Hypertext is actually a fancy technical name for a link. Regular text becomes hypertext when it is hyperlinked to another webpage. That’s the basic definition of HTML.

HTML also contains several other ways to tag your text to indicate various things about it. Among the most common are a tag to indicate a group of sentences as a paragraph (the P tag), a tag to indicate a text segment as a document heading (the H1 through H6 tags), and the list tags (UL, OL, and LI,) which indicate ordered or unordered lists of items.

How Not to Style HTML

Changing text into hypertext is helpful, but it’s not very pretty. Essentially, your document will read as a single column, top-to-bottom, in a single font of a single style. To get around this, people in the early days of the web began inventing new ‘tags’ to indicate style, such as the FONT tag to indicate what font to display the text in, the B tag to indicate bold text, and the I tag to indicate italic text. To get more flexibility in page layouts, people began to use the TABLE tag to make different sections of text display in different areas, rather that all in one column.

However, all of this new styling markup causes a big problem: it interferes with the purpose of HTML, which is to describe the text on the page. For instance, the TABLE tag, which is being used for page layout, is actually supposed to be used to present tabular data in columns and rows. The new styling tags like B, I, and FONT don’t describe the text in the document at all.

That means this method of styling a webpage is little more than a hack, a way to make the system do something for which is was not originally intended. It also obfuscates any real meaning that might be contained in the markup by essentially reducing it to a needle in a haystack.

It should also be mentioned that while this method of styling your webpage might work just fine for your web browser, it can do some really bad things for other kinds of browsers. For instance, if a blind person were to reach your website, their screen reader would have a lot of trouble interpreting meaning from the style markup you’ve provided. Also, search engines such as Google and Yahoo can gather a lot about your website based on the way it’s marked up; using markup to style your document will confuse the robots that try to index your page, which will negatively affect your rankings in search results (meaning that you’ll more likely to end up on the twenty-eighth page of results from a search for your name, rather than showing up on the first page).

The Right Way to Do It

If you use HTML only to describe the content (and not the style) of your document, how are you to make it look good on the web? I’m glad you asked; the solution to this problem is to use the right tools for the job.

There’s a second, complimentary language that you can use to style your well-formatted HTML. It’s called CSS, which stands for ‘Cascading Stylesheets’. The word ‘stylesheet’ should be pretty self-explanatory; it basically means a document that describes the styling for another document.

‘Cascading’ basically means that you can use just one CSS document to style every single page on your website; any change you decide to make will ‘cascade’ down to every page on your website. This makes styling changes a snap; instead of having to change every single page when you decide your site needs a makeover, all you have to do is make the change in one place and every page on your site will reflect that change.

It is possible to have a well-formed HTML document that very well describes your document’s text, while letting it look pretty on the web as well. All you need is a little CSS!

Here are a few resources to help you get started:

• The W3C XHTML Specification; XHTML is a version of HTML that permits no styling markup, which is what we want
• The Level 1 CSS Specification
• W3C’s Webpage Validator can help you find markup problems
• W3C’s CSS Validator, which can help find problems in your stylesheet
• The Web Content Accessibility Guidelines from W3C indicate and prioritize the various checkpoints that must be completed in order to ensure your content is accessible for people with disabilities

This is currently the desktop background on my Mac, and as such it’s sized appropriately (1680×1050). If you want to use it for your desktop, it should be fine, even if your screen is smaller. Just click the thumbnail above, then when the full-size image loads, right-click it and select ‘Set as Desktop Background’. From there, you should be able to ‘center’ the image, and click OK. That ought to do it!

This image was made from a freebie photo I found at Stock Exchange, and I put the fake sun and sunbeams in using a tutorial I came across at PSDTuts, along with some resources they link to.

Hope you folks enjoy!

I first designed his website nearly a year ago. It was a simple site, but it got the job done. But now that I know a lot more about web design, I have rebuilt his site from the ground up.

If you haven’t checked out his music already, you can listen to samples of his music (and order his CDs) on CDBaby. It’s highly recommended!

Lee’s Website: Lee Farrar Bailey

The Web Development Process

Generally, when I’m designing a website for someone, I’ll follow several steps in the process. The first several steps are outside the scope of this article, and involve interaction theory and information architecture and data structures and all that. But then I get down to designing the actual page, and that process follows these steps:

1. Code a static instance of the site.
2. Create from that model a theme for the CMS Du Jour.
3. Test the theme and CMS on a test server.
4. Deploy the theme to a live instance of the CMS.

Of course, you immediately see a problem with using this model for your own web development. “Chad, all I have is a PC running Windows. I don’t have a test server that can run all those fancy CMSs.”

Wanna bet?

The One-click Server Installer

It’s actually a lot easier than you think to set up a test CMS environment on your development PC. Content Management Systems normally run on a server technology “stack” that consists of the following:

• An Operating System (Like Windows)
• Server Software (This is the program that gives your browser a webpage to display when it asks politely)
• A Webpage Generation Engine (Which basically makes it so you don’t have to hand-craft each individual webpage)
• A Database (Which is where all the content, like the text of your pages and the pictures are stored)

Fortunately, you don’t even have to know any of that in order to get it all working.

There’s a little program called WAMP (each letter stands for one of the items above) that will do it all for you! All you have to do is install the thing.

And that really is all there is to setting up the server platform.

The Content Management System

Now all you have to do is get the CMS running on the platform you just set up. Piece of cake, right? Actually, it is. Three steps:

First, put your CMS on the server. Let’s say you’re using an easy CMS like WordPress (which this site runs on). First thing you’ll do is download the WordPress files and unzip them. You’ll want to move the unzipped files to your new Server’s root folder (if you installed WAMPserver, it’s probably C:\wamp\www\).

Second, you’ll add a database for WordPress to use. If you installed WAMPserver and now have it running, it should have put a little icon in your taskbar next to your clock. When you click it, you’ll get a menu, and among the options will be “phpMyAdmin”. Go there.

This is a pretty complicated interface, but I’ll give you a shortcut. Go to the “Priveleges” option about 2/3 of the way down the midddle column. Just add a user. After entering your new user’s information, check the option to “Create database with same name and grant all privileges,” and save. (Note that you can make the password easy because no one else can access this server.) That’s all you have to do to make a database.

Third, just go through the installer. Enter ‘http://localhost/’ in your browser’s address bar and click the directory where you installed your WordPress files. It should be a very quick (less than 30 seconds) matter to configure the CMS to access the database you set up.

Voila! You’re done. Really. That’s all there is to it.

Now you can take your CMS with you wherever you go.

Guinn Terry Davis and I go back quite a long time together — he and I met in college back in 2000. We quickly discovered that we had common ground, both in our respective family businesses and in the fact that we were both newcomers to the stage.

Guinn is quite a gifted writer, having written or co-written in the neighborhood of one zillion plays, musicals, short stories, articles, and such. Some of his work is award-winning material.

It’s been quite an honor for me to be able to design his personal website. Please drop by his site and have a look at some of the things he’s written, and even leave a comment or two for him.

And if his site doesn’t make you laugh, I’ll give you your money back. (Don’t worry, the check’s in the mail.)

His homepage: Guinn Terry Davis

Today, I’m frequently hired to do professional web designs for a variety of clients. As the clients’ sites are released publicly, I’ll be able to highlight the launches here.

JonathanLowery.com

I’ve known Jonathan Lowery since college. He and I have worked together more than once, so it was a great pleasure for me to be asked to design his personal website.

Jonathan is quite a talented performer and gifted choreographer, not to mention a very good friend.

If you get a chance, please drop by his site and check out the design, but also check out the things he’s written, and maybe leave a comment or two for Jonathan. I can guarantee you’ll be enriched by his acquaintance.

His Homepage: Jonathan Lowery