Gettin' My Geek On » webdesign

CSS Formats for Code Presentation

Mark Stevens — Sat, 25 Jul 2009 03:42:52 +0000

I need to have some sections of code in my blog, as any good geek blog would. Here is what I added to my blog’s style sheet to support my code entries. In fact, the presentation of the css code uses the code definitions in the style sheet. Can you say recursion?

/* section to define the ‘code box’ and text used to show computer output */
.code {
font-family:’Courier New’, Courier, Monospace, Fixed;
line-height: .6em;
font-size: 110%;
white-space: pre;
border: 2px ridge #0f5384;
padding: .5em;
background-color: #fffeef;
color: #511211;
min-width: 10em;
overflow: auto;
}

/* section to define text used to show computer input */
.code b {
font-weight: 900;
color: #0f5384;
}

/* section to define text used to show my comments within the code box */
.code i {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-effect: italic;
white-space: normal;
line-height: 1em;
}

Then I apply the code format using

and then, within that div section, use to indicate text that is input to the system, and

XHTML and CSS example

Mark Stevens — Wed, 08 Jul 2009 22:12:52 +0000

I wanted to get a simple web page up on my hosted site, created by hand using a simple text editor; just a little project to learn the basics of xhtml and cascading style sheets. I’m a big advocate of the “learning-by-doing” mantra.
I had done some work in html many years ago, so I understood the concepts of markup languages and tagging. It took a couple of weeks working in the evening (sometimes the late evening), but I was able to get a simple page established at markstevens20.net.
The following resources were very helpful:

Beginning Web Programming with HTML, XHTML, and CSS, 2nd edition by John Duckett, courtesy of the local public library.

w3schools.com CSS tutorial

http://www.edtechblog.org/ and many other talented css/xhtml/webdesign bloggers.

The w3 consortium css page, official standards for all of the elements and properties completely documented.

and a couple Firefox plug-ins that helped with web design:

Colorzilla (especially the eyedropper for converting colors to hex values)

MeasureIt, a pixel ruler for measuring the size of elements.

I won’t try to explain xhtml & css in the post, but rather encourage those that are interested follow the links above and use almighty Google to find additional resources. However, I do want to share the work that I’ve done as an example. Here is a modified version on my homepage and it’s associated style sheet. I’ve changed the color scheme to allow the individual elements to be seen better. The text content is different too, but other than that, it is the same xhtml and css file. You can download the xhtml and css files here and experiment with them on your own home computer or use them as templates if you wish. The downloaded files have extensive comments (maybe too many?) to explain what each element is doing for the page.

Learning xhtml and css is cheap and easy. Free tutorrials are available on the web, free text editor software is available on all computers (such as Notepad/Wordpad in Windows), and you can view your work using a free web browser. If you choose to explore xhtml/css on your own, I hope the references on the page are helpful to you. Good luck with your endeavors! If you have found other xhtml/css sites helpful, please add them below as comments.

The Webhost

Mark Stevens — Wed, 20 May 2009 01:38:37 +0000

My first step was to pick a webhost. It wasn’t hard, and there certainly are lots to choose from. While I was trying to pick a domain name, I used all mighty Google to search for web hosting, which led me to http://webhostinggeeks.com/. I was in the minimum budget category, as I have no intention of this turning into a high traffic revenue generating site. Webhostinggeeks provided a nice simple overview of the options, features and prices. It was difficult to find any one host to stand out. Prices are all about the same and would cost me less than $100 USD for a year of hosting. All boasted similar features. Customer reviews were about equal, it seemed that they all had solid reviews, with a few ticked off vocal customers for each. I couldn’t find anything to differentiate them.

It wasn’t until I started bookmarking the hosting sites on on my del.icio.us page that I noticed a distinction. While most of the sites listed on webhostinggeeks were bookmarked a few hundred times, Bluehost was bookmarked 10 times more often, over 3500 times! An important rule of social media is to “trust the masses.” This may just be a volume decission, as it seems that Bluehost is the only host to crack the top 50 webhosts, out of the sites I bookmarked.

So a few weeks ago I bit the bullet and signed up for a site with Bluehost. As for domain name, I chose markstevens20.net. I tried to be more creative, but

A) I’m not that creative and

B) Anything creative I did come up with, was already parked by someone else. Annoying, isn’t it?

But markstevens20.net suits me fine. It’s easy to remember, albeit somewhat narcisistic, and I like that the 20 hints at 2.0. Whether that’s web 2.0, enterprise 2.0 or just Mark Stevens 2.0, I’ll figure that out as I go.