An HTML Overview

by Russ Jones

Sections include:
An HTML document is an ASCII text file that contains embedded HTML tags. On a UNIX server, it typically has a filename extension of .html. In general, the HTML tags are used to identify the structure of the document and to identify hyperlinks (to be highlighted) and their associated URLs.

HTML identifies the structure of the document and it suggests the layout of the document. The display capabilities of the Web browser determine the appearance of the HTML document on the screeen.

Using HTML you can identify:

HTML cannot control the: These things all depend on the browser, which may allow the user to control them.

Autoflowing and Autowrapping

The most basic element in the HTML document is the paragraph. The Web browser flows all the contents of the paragraph together from left to right and from top to bottom given the current window or display size. This is called autoflowing. How you break lines in that paragraph in the HTML is irrelevant when that page is displayed by a Web browser.

The Web browser wraps anything that doesn't fit on the current line, putting it on the next line. For example, a paragraph that displays six lines long on an 8-inch wide window rewraps to be about 12 lines long if the user resizes the Web browser window to be half as wide. This is called autowrapping.

Your document will be read by both graphical and character-based Web browsers. Furthermore, there will be display differences with graphical Web browsers given different screen resolutions. So just because one browser breaks a line at one place, that doesn't mean others will do so at the same place. Just remember that on the Web, you live in a world that is left-justified and flows from top to bottom.


HTML Tag Syntax

HTML tags are encapsulated within less-than (<) and greater-than (>) brackets. Some of the tags are single-element tags that can stand by themselves. These are referred to as standalone tags. The syntax is simple:
<tag>

The most common standalone tag is <P>, which ends a paragraph.

Other tags are used in pairs. The beginning tag tells the Web browser to start the tag function and the ending tag tells the Web browser to stop. The ending tag is created by adding a forward slash (/) to the beginning tag. The syntax is:

<tag>object</tag>
The tag identifies the function that is being applied to the object. For example, if you wanted to add special emphasis to a phrase, you would encapsulate the phrase with the <EM> tagging pair as illustrated:
<EM>text to emphasize</EM>
Many of the standalone tags and the beginning tag of tagging pairs can have options included. So to be complete the syntax is:
<tag option1 option2 option3>
A mistake you will make when manually authoring HTML with a text editor is to forget the ending tag or leave out the slash (/) in the ending tag. Don't worry -- it will be obvious when this happens, and it's simple to correct.

Document Construction Guidelines

Now let's look at the three tagging pairs used to create the highest level of structure in an HTML document:
<HTML> entire HTML document </HTML>
<HEAD> document header information </HEAD>
<BODY> body of the HTML document </BODY>
The following is a skeletal HTML document that shows the required nesting of these three tagging pairs:
<HTML>   
	<HEAD>      
		Head elements
	</HEAD>  
	<BODY>      
		Body elements and content  
	</BODY>
</HTML>
Remember that physical layout in an HTML document, like indentation and line breaks, is meaningless to Web browsers. So you can format your HTML according to your own preferences.

Sample HTML Document

The following is an example of the HTML template that I keep in my home directory. I pull it into a text editor as a starting point for creating a new HTML document. Although you could have a slightly more bare-bones HTML template, it's easier to delete than add. Here is the sample HTML document:
<HTML> 
<HEAD> 
<TITLE>Sample HTML Document</TITLE>
<LINK REV="OWNER" HREF="mailto:rjones@ix.netcom.com"> 
</HEAD>
<BODY>
<IMG SRC="my-logo.gif" ALT="logo"> 
<H1>Sample HTML Document</H1> 
<EM>To demonstrate HTML style</EM> 
<P> 
<HR> 
<P> 
Hello World.
<P> 
<HR> 
<P> 
Creation Date: <EM>Sat Apr 9, 1994</EM> 
<P>
<ADDRESS><A HREF="rjones.html">DRJ</A></ADDRESS>
</BODY> 
</HTML> 
See how this sample HTML document looks when displayed on your browser.

Let's go through it and look at the new tags it uses:

<TITLE> text-phrase </TITLE>
The <TITLE> tag pair is used once per document and identifies the document title. It should appear at the top of the document within the <HEAD> section. Many Web browsers display the document title in a special area. This is also the document name that is used when a user adds the document to her hotlist or list of bookmarks for later reference. Although not absolutely required, it is a good idea to have a document title in each HTML document.

<LINK REV="OWNER" HREF="internet-address">
The <LINK> standalone tag is used in a special way here to identify the email address of the document owner. This information is not displayed by a Web browser, but is used by some browsers when sending an email message on behalf of the user to the document owner. Other uses of the LINK tag will be described later.

<IMG SRC="URL">
The <IMG> standalone HTML tag inserts an image into the current autoflow stream. Note that you specify the image with its URL. ***See for more on URLs, and for more on image insertion.***

<H1>text-phrase</H1>
The <H1> header-level tag pair indicates a level of structure in your document. There are six levels of headers, H1 through H6. Headers, like paragraphs, autowrap if the phrase cannot fit on a single line. Header tags also force paragraph breaks before and after the header.

<EM>text</EM>
The <EM> tagging pair marks a phrase to be rendered with generic emphasis. On a graphical display, the phrase could be italicized, while on a character-mode display it might be underlined.

<P>
The <P> tag ends a paragraph and places a blank line after the paragraph on the display. Two paragraph break tags result in a single blank line.

<HR>
The <HR> (horizontal rule) tag forces the Browser to generate a horizontal rule, or line, across the display. It breaks pages into logical sections and is useful when creating forms. There is no equivalent vertical rule.

<ADDRESS>text</ADDRESS>
The <ADDRESS> tagging pair is used to identify addresses. Depending on the Web browser, the text is rendered in a special point size, typeface, or font.

Hyperlinks

One of the most important HTML tagging pairs creates a hyperlink to another document or Internet resource. Generically, the Anchor tagging pair is used as follows:
<A option1 optionN>anchor-text</A>
It's called an Anchor tagging pair because this tag anchors the link to a particular spot in your HTML. Another use of the Anchor tag described later marks a point within a document where a link transfers to (it is optional, because by default a link transfers to the beginning of a document). The two variations are sometimes called link-from and link-to tags.

The beginning Anchor tag always requires at least one option. Although there are several options, the two most important are HREF, which defines a hyperlink, and NAME, which identifies a link-to destination within a file. Let's look at the HREF option first. Here's the syntax:

<A HREF="URL">anchor-text</A>

The anchor-text is displayed in the browser. When the user triggers the link, the browser retrieves the specified URL. URLs are described in detail in a following section (titled URLs).

Going back to our sample HTML document, there is a hyperlink at the bottom of the document:

<A HREF="rjones.html">DRJ</A>

I use this hyperlink to sign each of my pages. My initials, DRJ, become the anchor text for a hyperlink to another HTML document called rjones.html in the same directory.

My signature hyperlink is actually enclosed within an <ADDRESS> tagging pair:

<ADDRESS><A HREF="rjones.html">DRJ</A></ADDRESS>

This demonstrates how hyperlinks can be embedded in other tagging constructs. Anywhere you have text within the body of the HTML document, you can create a hyperlink. The text could be in a paragraph, a header, a quote, or as part of an address. However, the reverse is not always true. You can put an anchor tagging pair inside a header, but you should not embed headers inside an anchor pair.

Instead of using text as the hyperlink anchor, you can use an image. This is done by enclosing the <IMG> tag with the anchor tagging pair:

<A HREF="org-overview.html"><IMG SRC="my-logo.gif"></A>
When the inline image is displayed, it becomes sensitive. If the user triggers it, the browser retrieves the document identified by the associated URL, in this case a file called org-overview.html.

Linking to Points Within Documents

By default, links point to the top of a document. You can also create hyperlinks that jump to other points in an HTML document. First, you must identify and name the link-to point. This is done with the NAME option of the Anchor tag.
<A NAME="anchor-name">anchor-text</A>
This tagging pair identifies a link-to point in the HTML document and names that point. The tagging pair provides an alternative entry point into an HTML document. The anchor-text cannot be omitted.

This link-to point is then referenced by using #anchor-name. For example, say you have a document with an appendix in the same file, and you want to link to the appendix. The header that starts the appendix should be turned into a link-to point. The HTML that indentifies the beginning of your appendix might look like:

<H2><A NAME="Appendix-A">Appendix A</A></H2>
You can then create hyperlinks to the appendix from within the same document like this:
Details are in <A HREF="#Appendix-A">Appendix A</A>.
You could also link directly to the appendix from an external document. From another HTML document you would reference it as:
<A HREF="URL#Appendix-A">Appendix A</A>
The URL can be a fully qualified URL or a relative URL.

If the syntax of the anchor is incorrect, most Web browsers are forgiving and display the anchor-text or inserted image, but not make it sensitive as a hyperlink. This can be done intentionally to temporarily disable links without removing all the HTML that defines the link.


URLs

A URL points to a file or directory (the file may be a script or a program, rather than a document). There are three distinct types of URLs: absolute, relative, and local. There are also a couple of special-case URLs supported by some browsers.

Absolute URLs completely describe how to get a file on the Internet. Relative URLs and local URLs are both ways to specify a file on the same server as the document they appear in. The following sections describe each type of URL in more detail.

Absolute URLs

Absolute URLs can be used to reference any resource on the Internet, including local resources. However, it's better to use relative URLs for local resources for reasons described in the next section. The full syntax for an absolute URL is:
access-method://server-name[:port]/directory/file
If no port is specified, the default port associated with the given access method is used. The URL of a document that is on a Web server has an access method of http:. Every file on the Internet is uniquely addressable by its URL, regardless of the type of file or the type of server it is provided by.

Besides the http: access method, the URL concept also supports other important Internet protocol access methods such as Gopher, FTP, and Telnet.

The URL to access a file on a Gopher server follows the standard remote URL specification. Here's the URL to the campus Gopher server:

gopher://uniwa.uwa.edu.au/

To look at our Department's FTP archive you could open the following URL:

ftp://ftp.cs.uwa.edu.au/

You might sometimes see references to both the ftp: and the file: access methods. The ftp: nomenclature has replaced the earlier file: nomenclature, as it more accurately reflects the protocol being used. When using the ftp: access method to reference the contents of a directory you should make sure you close the URL with a trailing slash (/). When referencing a file in a directory, this is not necessary.

The URL to a Telnet resource is no surprise:

telnet://library.uwa.edu.au

When any URL appears in one of your documents, the Web browser uses the URL to go directly to that resource; it doesn't go through your Web server. That means that users who cannot telnet directly to a host from the shell command line (because they are blocked by a security firewall or because they do not have the password) will not be able to access the host via a Web browser either, even if you can access it from the machine where your HTML resides.

If any server is running on an unusual port, you need to include the port number as part of the URL. The standard ports are:

Port | Service
-----|--------
 21  | FTP
 23  | Telnet
 70  | Gopher
 80  | HTTP

The following URL shows how to specify a Gopher server running on port 1250:

gopher://garnet.berkeley.edu:1250/

Many sites around the Web have created public-access gateways to other common Internet services. The URLs for these gateways are based on file URLs, but can have various special syntaxes.

Absolute Versus Relative URLs

A relative URL assumes the same access-method, server-name, and directory-path as the document the URL appears in. It indicates the relative position of the target URL from the current URL. For example, here's a URL to a file in the same directory as the document the URL appears in.
<A HREF="page-7.html">Next Page</A>
Relative URLs are also sometimes called partial URLs. They are used to point to information resources in the same directory or on the same server. Absolute URLs, on the other hand, are usually used to point to information resources on other servers. In practical terms, this means that you can use relative URLs to direct navigation between documents that you author and use absolute URLs to direct navigation to resources elsewhere on the Internet.

The distinction between absolute and relative URLs is totally hidden from the Web server. When a user selects a relative hyperlink, the Web browser uses the current URL to determine the access-method, server-name, port-number, and directory-path, and sends only absolute URLs to the server.

Relative URLs allow you to author your HTML with total disregard for where your final HTML directory structure will be placed on the Web server or even what system the server will run on. You can direct the relative navigation between HTML documents using the same directory path navigation constructs that you use on UNIX to move up and down a directory tree. For example, to have a hyperlink that jumps up two levels in the directory structure to your home page, the following HTML could be used:

<A HREF="../../home.html">Return To Home Page</A>
Relative URLs also give you the flexibility to move your HTML directory structure anywhere on the Web. Your administrator may want another site to have a local copy of your HTML directory structure for various reasons.

Relative URLs also work when files are read directly from the file system by a Web browser, without the intervention of a Web server. This is very useful for Web authoring.

Don't use symbolic links in your document tree, because they defeat the purpose of relative URLs, and make the document tree unportable. If you are tempted to use a symbolic link, use the Alias directive in srm.conf instead.

A relative URL can be relative to the document root instead of the directory of the current document. This kind of relative URL starts with a slash. In other words, it looks like an absolute URL, but without the access method and server name.

Oddball URLs

There are a couple of other URLs supported by certain browsers. They access articles from the local news server or send an email message to a document's owner.

For example, to read the cs.general newsgroup with your Web browser instead of a news reader, you would open the following URL:

news:cs.general

Some Web browsers, such as Lynx, support sending email back to the owner of a page. To identify ownership of a page, you can use the following local URL (also see example in previous sample HTML document ):

mailto:internet-address

However, mailto: is not widely supported yet.


Lists

Another key HTML construct is the list. There are three types of lists: In the first two types of lists, the elements of the list are designated with the <LI> list-item tag. For example, a simple bulleted list with three items would be tagged like this:
<UL>
<LI>First bullet
<LI>Second bullet
<LI>Third bullet
</UL>
and would look like this:

As you might expect, if a list-item phrase is wider than the display width, the Web browser autowraps the phrase and aligns the next line to indent under the previous line. Lists can also be nested:

<UL><LI>First bullet
	<UL><LI>First sub-bullet
	<LI>Second sub-bullet
	<LI>Third sub-bullet</UL>
<LI>Second bullet
<LI>Third bullet</UL>
The above code produces this result:

The third type of list, the definition list, is used when the list items do not need to be bulleted or numbered and can stand on their own. A good example might be a glossary, which lists terms and their definitions. Definitions do not use the <LI> tag to mark a new list entry. Instead they use the <DT> and <DD> tagging pairs. The <DT> tagging pair identifies the primary text and the <DD> tagging pair identifies the text associated with and indented below the <DT> tagging phrase.

For example, a definition list of three publications looks like:

<DL>
<DT>Action Plan for African Primate Conservation</DT>
<DD>Compiled by J.F. Oates and the IUCN/SSC Primate Specialist Group,
1986, 41 pp.</DD><P>
<DT>Dolphins, Porpoises and Whales. An Action Plan for the
Conservation of Biological Diversity</DT>
<DD>Second Edition. Compiled by W.F. Perrin and the IUCN/SSC
Cetacean Specialist Group, 1989, 27 pp.</DD><P>
<DT>Otters. An Action Plan for their Conservation</DT>
<DD>Compiled by P. Foster-Turley, S. Macdonald, C. Mason and the
IUCN/SSC Otter Specialist Group, 1990, 126 pp.</DD>
</DL>
which appears thusly:
Action Plan for African Primate Conservation
Compiled by J.F. Oates and the IUCN/SSC Primate Specialist Group, 1986, 41 pp.

Dolphins, Porpoises and Whales. An Action Plan for the Conservation of Biological Diversity
Second Edition. Compiled by W.F. Perrin and the IUCN/SSC Cetacean Specialist Group, 1989, 27 pp.

Otters. An Action Plan for their Conservation
Compiled by P. Foster-Turley, S. Macdonald, C. Mason and the IUCN/SSC Otter Specialist Group, 1990, 126 pp.

Graphics

Graphics were briefly mentioned earlier when the <IMG> HTML tag was introduced. Fundamentally, there are two different ways to present graphics -- inline images and external images. Inline images are displayed by the Web browser as part of your document and are automatically retrieved along with the document. External images are displayed by a separate viewer program (started by the Web browser when needed) and must be specifically requested by triggering a hyperlink.

Inline graphics involve the transfer of a lot of data and so retrieving them can be slow. Fortunately, many Web browsers let users optionally delay downloading of the inline images. With delayed downloading, inline images must be triggered by a hyperlink before they will be downloaded. When triggered, they still appear inline, not in an external viewer.

When contemplating the use of graphics within your HTML, you should consider the user community that will be accessing your Web server. Will they be using graphics-capable Web browsers, such as Mosaic, or will they be using line-oriented Web browsers, such as Lynx? The decision is easier if one class of Web browser dominates, but is more complicated if you expect people with both types of browsers to be using your Web server.

Inline Images

The inline image is just one more piece of information that is included in the autoflow and autowrap of your HTML on the Web browser screen. In other words, an image is treated just like a word. So an image can appear in the middle of a paragraph. If you want the inline image to stand alone you need to make sure you place <P> or <BR> HTML tags around it in your HTML document.

For inline images, the two supported graphics types are the Graphics Image Format (GIF) and the X Bitmap (XBM) format. GIF images support 256 colors and are the more common of the two image types. X Bitmaps are black and white.

When inline images are autoflowing as part of a paragraph, you can explicitly control the alignment of the image with the text line by using the optional ALIGN option of the <IMG> tag. The three values for ALIGN are:

<IMG ALIGN=TOP SRC="filename.GIF"> 

<IMG ALIGN=MIDDLE SRC="filename.GIF"> 

<IMG ALIGN=BOTTOM SRC="filename.GIF"> 

TOP alignment places the top of the image even with the top of the current line of text, and so on. If ALIGN is omitted, bottom alignment is the default.

In terms of image placement and autoflow, both image formats normally provide square outlines. It is possible to develop images in either format that have translucent (or clear) backgrounds to eliminate the square outline. With a translucent image background, the background color of the main window display can show through the translucent areas of the image. You see this technique used particularly with cursive signatures at the bottom of HTML documents, or to make a circular university seal appear circular, instead of circular in a square image. Here's the URL of a document that explains how to do translucent backgrounds:

http://melmac.corp.harris.com/transparent_images.html

In browsers running on color graphics systems, your images might be sharing the color map with other applications. Mosaic, in particular, only allocates a colormap table with 50 entries. If an inline image has more colors than can be displayed, it still is displayed with the available colors, but it won't look as good as the full-color image. With these colormap issues in mind, you should probably reduce the number of colors used in your GIF files to under 50. If you are going to include multiple GIF images in a single HTML document, you should use the ppmquantall utility from the pbmplus package to force all of the images to share a common colormap.

(The pbmplus package and its utilities are described in the books UNIX Power Tools and Encyclopedia of Graphics File Formats.)

These colormap issues also influence whether you enrich your HTML documents with photographs (which require many colors) or with clip-art, which has a more well-defined and limited color palette.

Also think about performance. It takes a lot longer for a Web browser to retrieve an HTML document that has inline images than to retrieve one that does not (unless the user specifies delayed downloading). The larger the inline image, the longer it takes. In fact, the time is proportional to the square of the dimension (a four-inch-square image takes almost twice as long as a three-inch-square one). One thing working in your favor is that many graphically-based Web browsers cache inline images. So if the inline image has been used in previous HTML documents in the user's navigation chain, that image might still be cached. Caching also happens when the same inline image appears multiple times in the same HTML document. It is retrieved only once.

One trick that's used to solve the performance problem of big images is to use "thumbnails." A thumbnail is a small version of a figure displayed inline, which is a link to the full-sized image displayed externally. With image manipulation tools such as the pbmplus utilities, it is easy to create a smaller version of an image. The HTML to do this looks like:

<A HREF="file-full.gif"><IMG SRC="file-thumb.gif"></A>

This HTML uses the syntax for external images, which we'll describe in the next section.

Don't let these issues discourage you from enriching your HTML document with graphics. Use of graphics can add meaning and clarity to the information in your HTML document and can increase the overall usability of the information. You will also see in the article "Clickable Image Maps" that specific areas in inline graphics can become link anchors (clicking on different parts of an image can trigger different links).

External Images

External images are images that are not displayed inline as part of your document, but in a separate window, by an external viewer program. This is the technique to use if you have TIFF, JPEG, RGB, or HDF images and don't want to convert them to GIF. This technique is also useful for displaying very large GIF images. Instead of using the <IMG> HTML tag described earlier, you simply include the URL of your external image file as part of the hyperlink. For example, to display a JPEG image in an external window, you can include the following in your HTML document:
<A HREF="filename.jpg">anchor-text</A>
The filename.jpeg in this example can be replaced by any URL; it doesn't have to be a local file. Another section of Managing Internet Information Services explains the handshaking between Web server and browser that makes this work. Suffice it to say for now that the user needs an external viewer installed that knows how to deal with the incoming external image file and the Web browser needs to know how to recognize the type of data that's arriving and how to start the appropriate viewer.

Using external images with your HTML document further limits the usability of your HTML document. Just as there are users who can't display inline graphics, there are more who have not configured their environment to support the display of external images.

Inline images with character-based Web browsers

Inline images can't be displayed on character-based terminals. Character-based Web browsers indicate that an image is in the autoflow stream by displaying:
[IMAGE]
However, you can override this default and make your inline images more meaningful in character-based Web browsers by using the ALT option:
<IMG SRC="filename.GIF" ALT="image-description"> 

The ALT option makes character-based Web browsers display the image-description instead of [IMAGE]. You can also make the browser ignore an image using a null ALT option:

<IMG SRC="filename.GIF" ALT=""> 
When a character-based Web browser sees the null ALT option, it ignores the image-insertion tag. The HTML authoring convention is that if you are going to insert inline images in your document, you should at least describe the image with a word or phrase for users with character-based Web browsers.

Server-Side Includes

The NCSA Web server can include information from files and environment variables into an HTML file just before the file is sent to the user. It also can automatically include the last-modified date, current date, document size, and a few other useful pieces of information. This capability is collectively called server-side includes.

Let's look at a quick example. We modify the bottom of our sample HTML template to look like:

Creation Date: <EM><!--#echo var="LAST_MODIFIED"--></EM>
<P>
<!--#include file="owner.txt"-->
</BODY>
</HTML>
We also create a file called owner.txt, which contains a single line:
<ADDRESS><A HREF="rjones.html">DRJ</A></ADDRESS>
Now all our HTML documents that are based on the sample HTML template will automatically have their last modification date (from the filesystem) and the owner of the file included by the Web server whenever a user requests that file. This guarantees that the document's modification date is correct -- no need to enter it manually. It also gives us the ability to change the owner of every HTML document with a simple edit to owner.txt.

Depending on how your Web server is set up, you may have to rename the HTML files that you want processed for server-side includes (usually to use the suffix .shtml). Ask your Web server administrator (or read the section "Enabling Server-Side Includes" from Managing Internet Information Services). It's also possible that the server-side includes feature might not be set up. Or it might have been disabled for security reasons (see the section "Server Side Includes").

You might have noticed that the ASCII text file owner.txt actually contains HTML. owner.txt is not called owner.html, because it doesn't contain fully structured, legal HTML and because it isn't intended for standalone viewing. (You may want to tell the Web server to ignore included files like owner.txt when it does automatic directory indexing, since included files are not intended to be viewed alone. See section "Automatic Directory Indexing.")

Generically, the format of the include statement is usually:

<!--#command tag="value"-->

The two commands demonstrated in the HTML above were #echo and #include. Two others are #fsize and #flastmod, which include a file's size and last-modified date. The file= tag of the #include command is used to reference a document in the same physical directory as the HTML document (or a directory relative to that directory). The var= tag of the #echo command reads and displays the value of an environment variable, which can include any of those defined by the CGI (described in "The Common Gateway Interface"), plus the six listed below.

Another #include tag (not shown) is virtual=, which specifies a file relative to the document root. You would use the virtual= tag instead of the file= tag if you wanted to have standard boilerplate such as a copyright notice used with every document on your Web server, independent of the document tree structure.

All the tags valid with #include are also valid with #fsize and #flastmod.

The six environment variables (not counting all the CGI variables) you can use with #echo are the last modification date (LAST_MODIFIED), and:

DOCUMENT_NAME
The current filename
DOCUMENT_URI
The virtual path to this document
DATE_LOCAL
The current date and local time
DATE_GMT
Same as DATE_LOCAL but in Greenwich mean time
QUERY_STRING_UNESCAPED
The search query the client sent, if any

There are two more commands not covered here: #exec, which runs a script and includes its output, and #config, which controls the format of the size and date commands. For complete information, see the URL:

http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html

For More Information About HTML

Not surprisingly, the definitive guide to HTML, A Beginner's Guide to HTML, is available on the Web. Point your Web browser at URL:
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
You should take a look at this document, because it describes all the other HTML tags that are available. It also describes some additional options to the HTML tags that we have outlined here.

Remember also that many Web browsers give you the ability to view the HTML source of the document being displayed, or even to store it locally on your own system. If you see a neat trick that someone else has done with their HTML, just look at the HTML source to see how they did it. In graphical Web browsers, you can also cut and paste from the HTML of existing documents to avoid retyping the tags.

Of course, the book from which this section was excerpted, Managing Internet Information Services, contains more information on HTML and related subjects.