A Very Short Course on HTML
With so many options for creating and editing a Web site without exposing yourself to HTML codes, this section of the chapter may seem superfluous. On the other hand, there are so many variables in Web authoring and so many areas where imprecise code can mess up the way your site appears that it's important to know at least the basics.
HTML employs text-based commands to format your Web page. In fact, the pages themselves are all text, and (if they're not too large) you can even open them in Mac OS 9's SimpleText (some folks hand-tune their HTML that way). The commands are instructions that tell your Web browser how the page should look.
If you've ever been exposed to old-fashioned text-based word processors, which were prevalent before Apple existed, or to traditional typesetting, you'll see a passing resemblance between HTML and the way you coded those documents.
For example, HTML consists of an opening tag that appears before the material you're formatting and a closing or end tag that appears at the end of the material.
To separate HTML from regular text, you place the commands within angle brackets, beginning with the less-than sign (<) and concluding with the greater-than sign (>).
The Frustrating Differences in How Web Sites LookWith a word-processing or desktop-publishing document, you can be reasonably assured that the document will look the same on your monitor and printed out as long as you have the right fonts and linked pictures. Not so with Web sites. Every single Web browser out there interprets Web pages in a unique way. That means the Web site you laboriously created and fine-tuned may look perfectly fine in the latest Macintosh version of Microsoft Internet Explorer but may fall flat on its face in the comparable version of Netscape Communicator. Even worse, when you view the very same site in a Windows version of these browsers, you may see additional differences—some slight, some significant. Part of the problem on the Windows side is that the display size is typically 96 dots per inch (dpi), as opposed to 72 dpi on a Mac (although high screen-resolution settings have altered that old industry-wide desktop-publishing standard). In addition, Windows uses larger font sizes to accommodate the higher standard screen resolution. All these factors can combine to give your Web pages a totally different look from what you had planned. Furthermore, as emerging Web standards change, you can bet that what looked fine in your browser or Web authoring program will undergo still more unexpected alterations. What Should You Do? If your target audience is apt to be using the latest browser versions, you can probably just check out your pages in the current software and be confident that most of the visitors to your site will see acceptable results. However, if you want the widest possible audience, consider that many users have old Macs, old PCs, and older versions of browsers, which are less able to display the latest commands. You will want to test your pages using these parameters to see if they still look acceptable. Some designers will set up their sites with alternative versions of a page. For example, if a browser can't display features such as frames or animations, users can click a button to see another version; if they have the right browser, the page can display in all its glory. One example where using a browser-specific tag can have unwanted results is Netscape's <BLINK> tag. A rapidly flashing button or title may seem cool, but most folks find the result downright annoying. I tried it at my site once and got several extremely heated complaints. Avoid using it. |
One basic tag, <i>, specifies italic text. Everything following that simple com-mand is italic. To switch back to roman text, you simply close the tag with a slash, like this: </i>. Of course, this command structure can get quite involved when you expand your HTML arsenal to specify the attributes of linked Web sites or graphics.
An example of a more complex command is this one, which links my Web site to another page on another site and then provides a title that appears tool-tip style on most browsers other than Netscape (except for Netscape 6):
<a href="http://www.rockoids.com" title="Attack of the Rockoids Is Coming!">
A List of Basic HTML Tags
I make no pretense of offering a complete course in HTML. But I do cover the basics of HTML tags. Once you get the hand of it, some practice and regular reference to a book such as Elizabeth Castro's fine work will do wonders to increase your knowledge and abilities.
The beginning of a Web site.
First things first. Every Web document must have some basic tags that identify it to your browser, and you must enter additional tags in a specific order.
 | You begin a Web page with a header that identifies it, much as you'd set up a PostScript or PDF file. A PDF file, for example, contains a header labeled %PDF-1.4 (the latter part is the version number). |
To start your page, enter the <HTML> tag. You'll close your page with an </HTML> tag at the bottom. The latter, like all end tags, contains the telltale slash that indicates a closing command. Once you've established at the beginning of the page what kind of page you're building, you then need to separate the heads from the body copy. You can repeat these tags as needed throughout the page. Here's the way you'd set up your basic page:
<HTML> <HEAD> <TITLE>Gene's Fabulous Web Page</TITLE> <BODY>
Use the area following the <BODY> tag for the main text of your document. Of course, the process doesn't end here. Your code will include tags that specify the text style. If you want to include graphics or links to other sites, which entails more-complex commands. You'll use special tags to add tables, frames (multiple pages within a single page), and elaborate effects such as JavaScripts and animation.
Your Web page concludes with this:
</BODY> </HEAD> </HTML>
All right. That's the easy stuff. You can use the tags in the table “Common Web Tags” to build a simple page with text and headlines from scratch, without a WYSIWYG Web tool. Now we move on to some of the more sophisticated tags (still basic, but more comprehensive).
| Common Web Tags | |
|---|---|
| <H1> | Opens a heading. There are six levels of headings in regular HTML, with number 1 being the largest. |
| </H1> | Closes that number 1 head. |
| <P> | Specifies the beginning of a paragraph in your body copy. |
| </P> | Ends the paragraph. An extra return usually separates paragraphs on a Web page for easy reading. Some folks use paragraph indents instead. You'll want to try both to see which works best for you. |
| <B> | Makes the text that follows it bold. |
| </B> | Changes bold text back to roman. |
| <UL> | Starts an unordered list, such as this bulleted list. |
| <LI> | Formats the text that follows the bullet so it's indented within the bullet. |
The next level.
Once you get past the basic formatting instructions, you'll start adding attributes, elements that provide special instructions describing the command's use. You can, for example, specify a background color for your Web page. Otherwise, you get a drab gray background.
One of the simplest colors to use is plain white. I'll show you the code and then tear it down to explain how it's set up:
<body bgcolor="white">
That's an easy one. The attributes—in this case, the background color—appear after the equal sign (=), enclosed in double quotes (""). You can specify basic colors by name alone or by hexidecimal format, as in the following example:
<BODY BGCOLOR="#FFFFFF">
More-complex shades always get a number rather than a name.
To insert a picture, you'd use an image tag, which is simply a reference to the picture and its location. This is similar to how a page-layout program such as QuarkXPress handles pictures behind the scenes, by storing a reference to the file rather than inserting the file itself.
For example, I used to use this tag to summon the logo for my site (until I changed it to a more complicated version consisting of banners, tables, and whatnot):
<img src="nightlogo.gif">
Nothing mysterious here—this command is just describing the source, or SRC, of the image, a file named NIGHTLOGO.GIF. If the picture is in another folder, you'd specify the path or location of the folder:
<IMG SRC="IMAGEFOLDER/NIGHTLOGO.GIF">
 | Don't forget that to make your pictures appear on a page, you must upload the actual images to your Web storage space, not just to the text page. Popular Web authoring tools such as Adobe GoLive and Macromedia Dreamweaver can handle all these site-management chores, so visitors always see the latest images at your site. |