Many writers are creating and maintaining their own Web pages these days. The available tools make it so easy that you really don’t need a lot of tech skills to do so. Still, I think it’s a good idea to have some basic understanding of how all the parts work together to make up a Web page. Even the best tools break sometimes. I thought I might use the next few columns for a brief overview of all that mysterious stuff going on behind the cyber curtain, beginning with HTML and what it does and ending with some basic Web page design suggestions.
HTML (Hypertext Markup Language) tells your Web browser how to display the contents of a page. If you’ve ever used the style options in a word processing program such as Word, you’re already familiar with how text can be tagged. For example, the HTML tag <i> tells your browser to start italicizing text. The tag </i> tells it to stop italicizing. In this case, all text between the start tag and the stop tag will be displayed in italics by the browser. In general, every start tag requires a stop tag although there are some exceptions.
You can create a text-only Web page using less than 10 simple HTML tags. Most of them are self-evident as to their meaning: <p> is paragraph, <i> is italicize, <b> is bold, <u> is underline, and so on. Alas, a few may not be so self-evident until you learn what they mean, but once you’ve deciphered them they should be no trouble.
For example,
<a href="myhomepage.htm">Click here to see my home page</a>
The "a" means "anchor" and the "href" means "hypertext reference". You are
telling the browser to anchor this hypertext reference on this spot in relation to the other bits on this page. The
browser will also then show the words between the <a> and </a> tags as underlined and in a different color
to indicate that this is a link to another page.
Table tags can also seem cryptic at first:
<table>
<tr><td>Yes</td></tr>
<tr><td>No</td></tr>
</table>
This tells the browser to display a table with one column (the default) and two rows (<tr>) and show each row with one cell of table data (<td>). The table data for row one in this example is ,"Yes," and for row two, "No".
Of course, things can always be more complicated, especially with certain tags like <table> that can have many "attributes" to define them more precisely. For example, a table could have a tag like:
<table cols="3" width="540" border="1" bordercolor="dddddd">
This tells the browser that the table will have three columns, an absolute width of 540 pixels, a visible border 1 pixel thick and the border will be colored light gray. Fortunately, this is where the HTML editing tools come in so handy. They allow you to create tables and other potentially complex features without having to know all the possible attribute tags. If you prefer, you can always look the attributes up in a list and type them in by hand but it’s a lot faster just to use an editing tool.
In five minutes, or less, you can create a simple Web page using only basic HTML tags, that’s how easy it is to use. How can you learn more about HTML? Several ways. First, there’s the Internet itself. Use your browser to search for HTML or XHTML plus the word "tutorial" and you’ll find dozens of free learning sites, many including lists of all the possible HTML tags and what they do.
Second, there are dozens of books about HTML on the market. Officially, HTML is being replaced by XHTML in preparation for the Internet upgrade to XML sometime during the next few years, but you don’t need to concern yourself with that. Any book that covers XHTML or HTML version 4 will be valuable for a long time to come. Even books covering outdated versions of HTML can be useful to get you started. A few older tags have been officially replaced, but most of them still work in the common browsers. The newer HTML versions have generally just added more tags rather than replacing old ones.
Third, there are Web pages. Use the "view source" option on your browser to look at Internet pages as you surf. Once you have a page open, skip past all the confusing stuff in the <head> section , like <meta> tags, <script> tags and such, and continue down until you find the start <body> tag. The <body> area is where the actual words and graphics live and it’s where you can best see how typical HTML is used.