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.
<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.
<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.
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:
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.