Web Typesetting - Part 3: More Basics

by Randy Finch

Welcome once again to the wonderful world of World Wide Web typesetting where the world becomes your customer. We covered many basic features of HTML last month. This month, we'll finish up the basics so you can get on with the business of producing a home page. You don't want to be home-page-less in this day and age. Listing 1 is a repeat of my home page listing from last month. Figures 1 -3 are repeated from last month's column, also. So let's pick up where we left off.

Text Emphasis

Often you will want to highlight text in some way to place emphasis on it. Boldfacing, italicizing, and underlining are common ways of emphasizing text. HTML has many ways of accomplishing this. For instance, the <B>...</B> tags will boldface text and the <I>...</I> tags will italicize text (see the end of Listing 1 for an example). HTML 3.0 adds many more text formatting tags such as: <U>...</U> for underlining, <S>...</S> for striking through, <SUB>...</SUB> for subscripting, <SUP>...</SUP> for superscripting, <BIG>...</BIG> for making text bigger, and <SMALL>...</SMALL> for making text smaller. However, it is generally not recommended that these tags be used except in special circumstances. Remember, HTML is suppose to be a document description specification, not a document formatting specification. HTML files should only indicate what type of text is in it and let the browser decide how to handle displaying it.

There are several tags in HTML for specifying that text should be emphasized without specifying how it should be accomplished. These are typically called styles. For instance, the <EM>...</EM> style tags specify that the enclosed text should be emphasized, but it is left to the browser to decide how to do this. Usually, the text will be italicized. The <STRONG>...</STRONG> style tags tell the browser to add strong emphasis to the text. Usually, boldfacing is used. There are many others available such as the citation style for specifying that the text is a quote and the code style for specifying that the text is programming code. The latter is normally displayed using a fixed width font for readability. HTML 3.0 adds many more styles.

Hypertext Links

A special type of formatting is used when text is designated as hypertext. Hypertext formatting indicates that the text should allow the user to select it and be transported to another document or to another section of the current document. The anchor tags, <A>...</A>, are used for this purpose. If you look near the middle of Listing 1, you will see the following line:

<EM>(<STRONG>NOTE:</STRONG> This page is also available in <A HREF="rcfhome.html"> <STRONG>table format</STRONG></A>.)</EM>

Several styles are used in this text. Removing all but the relevant tags, we get the following:

This page is also available in <A HREF="rcfhome.html">table format</A>.

Here the <A> tag is used with the HREF attribute. This attribute specifies what document to display when the user selects the text between the <A> and </A> tags (table format). In this case, it is another document, rcfhome.html, in the same directory as the home page document. This is called a local link. However, it could have been any document in the entire world. This is called a remote link. For instance, I could have put the following line in my document.

Check out <A HREF="http://www.escom.nl">ESCOM's home page</A>.

When the user selects the words "ESCOM's home page", the browser will try to load ESCOM's home page at http://www.escom.nl.

A hypertext link also allows jumps to another section of the current document. This is accomplished by adding an anchor to the section of the document to be jumped to. For instance, the following line might be added to the middle of an HTML document:

<A NAME="Section5">

Near the beginning of the document there might be hypertext that links to the anchor as follows:

Go to <A HREF="#Section5">Section 5</A>

The pound sign must be used to let the browser know that you are referencing an anchor in the current document, not another document named Section5 (anchor names, like file names, are case-sensitive).

Suppose you want to link to an anchor point within another document. Just append the anchor name to the file name like this:

Go to <A HREF="manual.html#Section5">Section 5</A> of the manual.

It's that simple.

Near the beginning of Listing 1 you will see the following line:

<H5>Email your comments to: <A HREF="mailto:webmaster@rcfinch.com"> webmaster@rcfinch.com</A></H5>

Notice that the HREF attribute is not pointing to an HTML document. Rather, it has this strange "mailto:webmaster@rcfinch.com" value. This indicates that when the user selects the text between the <A> and </A> tags, the browser should execute a mail program with the recipient being the E-mail address following the "mailto:" text. For this feature to work, the browser has to recognize the "mailto:" option and be able to execute either an external mail program or an internal one.

How is the user suppose to know what text is hypertext? Well, each browser has the leeway to format hypertext the way it wants. Some browsers allow the user to decide how to format hypertext. Typically it will be underlined and in a different color than the main text (see Figures 1-3). Hypertext can be in one of three standard states. Each state is typically designated by different colors. The three states are: unfollowed (usually blue), activated but unfollowed (usually red), and followed (usually purple). The first is for links you have not selected. The second is for links that have been selected but not yet visited. The third is for links that have actually been visited. Having different colors for these different states helps greatly in keeping up with what you have and haven't done during a heavy Web browsing session. It is easy to get lost when linking around the world for a few hours.

Images

In the early days of Web browsing, only text was available for viewing. Now, almost anything can be viewed or heard. One common element on Web pages is graphic images. Images can be inserted into an HTML document with the <IMG> tag. This tag does not have a closing tag as all the information about the image is declared via attributes. The most important attribute is the image file name, declared as SRC="filename". Other tags are available also. Let's look at how I use an image in my home page. Right after the <BODY> tag in Listing 1 is the following:

<IMG SRC="amazcomp/jun95f1.gif" VSPACE=5 HSPACE=10 ALIGN="LEFT">

The image source is a GIF file, jun95f1.gif, in the amazcomp subdirectory. Since the ALIGN attribute is designated as LEFT, the image will appear to the left of the document area, allowing text to flow to the right of it. This type of alignment is an HTML 3.0 feature and is not supported by some browsers. For instance, AMosaic does not support it. You can see this by comparing Figures 1 and 2A. AMosaic, like most browsers, will support one line of text to the side of an image. The VSPACE and HSPACE attributes specify how close text should be allowed to get along the top / bottom and the left / right of the image, respectively. The numbers are in units of pixels.

If you want to designate the text that will appear in the place of your image in non-graphical browsers, the ALT="alternative text" attribute can be used. An image can also be a clickable image map (to be discussed in a future column) by adding the ISMAP attribute. There are some Netscape attributes for scaling the image horizontally and vertically and adding a border.

My home page also uses a different type of image. The code for it is near the beginning of Listing 1 and starts like this:

You are visitor number <IMG SRC="/cgi-bin/image_counter? ...

The image source actually references a CGI (Common Gateway Interface) program named image_counter. All of the stuff to the right of the question mark are parameters to be passed to the program. Suffice it to say that image_counter is a program, provided by my ISP, that reads a data file named rcfinch.dat, maintained by my ISP, that keeps up with the number of visitors my home page has had. The image_counter program converts the number into a graphical image that shows the number of visitors in an odometer-like way (see Figures 1 and 2B). I will not go into detail at this time because using server-side programs is an advanced topic and we're just beginning.

Lists

HTML provides several ways of presenting organized, structured data. The most common is called lists. There are actually five list types available: ordered, unordered, glossary or definition, menu, and directory. The latter two are rarely used and will not be discussed here. An ordered list is for presenting information in a particular order with an identifying label, such as a number, preceding each list item. An ordered list might look like this:

1. Amiga
2. PC
3. Macintosh
4. One I can't afford

The HTML code to generate this list looks like this:

<OL>
<LI>Amiga
<LI>PC
<LI>Macintosh
<LI>One I can't afford
</OL>

The <OL>...</OL> tags enclose the list. Each item in the list is preceded by the <LI> tag. The numbers are generated automatically by the browser. This is nice because I can now insert a new item between PC and Macintosh and the browser will renumber the items. There is a Netscape attribute available in the <OL> tag, TYPE="..." for designating what type of numerals to use for list identifiers. Options include capital letters, lower-case letters, capital Roman numerals, and lower-case Roman numerals. Also, Netscape provides the START="..." attribute to start the list with a number other than one.

An example of an unordered list can be seen in my home page (Listing 1). It looks exactly the same as an ordered list except the list items are enclosed in the <UL>...</UL> tags. The list items are typically preceded by a filled circle (see Figures 1 and 2B). Netscape's TYPE="..." attribute allows this character to be changed.

Glossary or definition lists are similar to ordered and unordered lists, but have two elements within its purview: a term and a definition. Here is an example.

<DL>

<DT>Superman<DD>A superhero from the planet Krypton that can fly.

<DT>Batman<DD>A super wealthy person who is also a super crime fighter.

<DT>Spiderman<DD>A mutant scientist that web-slings and fights criminals.

</DL>

The <DL>...</DL> tags enclose the definition list. The two elements within the list are the data term, preceded by the <DT> tag, and the data definition, preceded by the <DD> tag. The output of the above code will look something like this:

Superman
A superhero from the planet Krypton that can fly.
Batman
A super wealthy person who is also a super crime fighter.
Spiderman
A mutant scientist that web-slings and fights criminals.

Lists are very useful for presenting structured information, but the latest feature, part of HTML 3.0, is tables. Tables are better for presenting information because they are much more flexible than lists. However, if you want to use tables, be aware that many browsers, including AMosaic, will not display tables properly. I will be discussing how to create tables in a future column.

Closing Comments

Well, we've covered all the basics you need to get started producing a Web page. So get at it. If you do produce a Web page for public consumption, send me E-mail at webmaster@rcfinch.com so I can check it out. If I get enough responses, I might include a list of AC subscriber pages in my column. Next month I'll discuss how to get those neat Web pages on your Internet server, make it easy to find, and prepare for visitors from around the world.


Back to list of articles
Back to Randy Finch's Home Page
Last modified on June15, 1996
Randy Finch at webmaster@rcfinch.com