ANNOUNCEMENT: This article is on probation -- currently, these HTML tags work independent of GuideML. They may stop working shortly, so enjoy this article while you can. If you percieve this site as looking incorrect, copy it into a text editor or something.

HTML, or HyperText Markup Language¹, is the universal format used to send formatted data, such as this article, over the Internet and local Intranets. HTML began as a way to allow web-based files to be more than just text. However, in some people's minds (including this Researcher), HTML is very nearly an art.

Making impressive pages is surprisingly difficult to do. Anyone can make a simple page, containing the information they want, such as this:

• Developed by H2G2 Researcher ([email protected])
• I like fishing and web design.
• My Other Pages:

• Page 1
• Page 2
• Page 3

Very mundane. This page is not bound to impress anybody. So what are the problems? Let's take a look at a few.

• The font is Times New Roman, which is uninteresting.
• The colors match the fairly-ugly standard Web color scheme.
• Space is wasted by both the list layout and the e-mail link.

Now. You're reading this article at H2G2, so the colors and font stand out a great deal. The first rule: look at your standard web fonts, and make a choice.

Times New Roman. Pretty boring.
Courier (Courier New). At least it's interesting, but it looks too technical and is reminiscent of old-fashioned typewriters and dot-matrix printers.
Arial and Helvetica. These fonts are sans serif, unlike Times and Courier, which are serif. A serif is the small indentations added to sides and corners of a letter - look at the letters, you'll see the difference. Sans serif fonts add a feeling of sleekness to a page.
Comic Sans (MS). Comic Sans is a very popular font, and adds a casual or relaxed feel to a page. However, it does not serve well on professional pages, because of the qualities mentioned above.
Verdana. A variation on other sans serif fonts, Verdana has a very high-tech feel to it.
WebDings and WingDings. (read: WebDings and WingDings.) These fonts (obviously) cannot be read, but can add an interesting accent to your pages.

Since this is a personal web page, the best font choice is probably Comic Sans MS. An important note: if the viewing web browser does not have the font you specify, the browser will use its default font, which can go completely against what you are trying to accomplish. this can be rectified via the following code:

<font face="Comic Sans MS, Verdana, Helvetica, Arial">

Now, if the viewing computer doesn't have Comic Sans, the font will default to Verdana. If they don't have that, it goes to Helvetica, for the Mac users reading. Failing all of these, it goes to Arial, which is Windows standard, and therefore pret-ty much universally compatible.

On to the colors.

The HTML Color Wheel

Some colors in HTML fit well with anything. Some don't. Colors worth using:

You can tell how well these work. A couple colors really don't work. One of the worst is HTML Purple. This color, frankly, clashes with nearly any HTML color scheme. It is highly reccommend that the color for visited links be set to anything but purple. Setting it to the same as the link color (traditionally blue) will look much better.

Let's apply these changes to our demo page.

• Developed by H2G2 Researcher ([email protected])
• I like fishing and web design.
• My Other Pages:

• Page 1
• Page 2
• Page 3

Note that the font for the "My Home Page" header has been changed to Verdana to add some variety. This already looks much, much better. Also, the visited link color has been changed to blue. The final improvement to make is...

First. Keeping the e-mail link outside of one's name is fairly unnecessary. We can move that on top of H2G2 Researcher. The home page links would look better if relocated to the right of the rest of the document, which can be accomplished by a borderless TABLE tag.

For Beginners: A tag in HTML looks something like this: <tagname> And a TABLE tag looks like this: <table> Finally, this is a borderless table tag: <table border="0"> Table cells are then divided into rows, using TR tags. Within each TR tag is a number of TD tags (up to the user.) TD tags hold the text that you want to arrange. For example, to make a two-celled table like the one described here: <table border="0"> <tr> <td> This text goes inside the first cell... </td> <td> ... and this text goes inside the second cell. </td> </tr> </table> The tags you see with a slash before the names (such as /TABLE) are end-tags. The slash is also pronounced "end", so "/TABLE" is pronounced end-table. Thsi signifies that nothing else is in the table, and that the table contains everything between the TABLE and /TABLE tags.

Finally, just because this appearance adds a dynamic feel, the "hoverlinks" feature from Internet Explorer will be activated. This is performed via CSS², and a code sample is available in the footnotes³. The underlines on links now show up only when the mouse is over them. Here is the final page.

You can view the way these pages were made by choosing the View->Page Source command in your web browser. On H2G2, you can view the HTML used to make an article by the following method. If the page's address is

http://www.h2g2.com/A123456

Then you can view the source via the URL

http://www.h2g2.com/test123456 (remember to leave out the A)

Feel free to use the code on this page for your own purposes. The best way to learn HTML techniques is to look at those of other people. Go look at web pages. Live by the View Source command! Thank you for staying with me this far, and this is

¹ HTML is developed by the World Wide Web Consortium, whose web page can be located at http://www.w3.org.

² CSS is short for Cascading Style Sheets. It is supported by web browsers of version 4.0 and higher. You can find resources for CSS online or in a highly reccommended book, "Instant IE4 Dynamic HTML: Programmer's Reference" from Wrox Press.

³ CSS code for hovering links: