Most HTML tags are used in pairs, that is, HTML tags generally have a beginning tag and an ending tag surrounding the text that they affect, e.g.
<TagName>the affected text</TagName>The tag name itself (here, TagName) is enclosed in brackets (< >).
The beginning tag "turns on" a feature (such as headings, bold, etc.), and the ending tag turns it off. Closing tags have the same name as the beginning tag except that the closing tag name is preceded by a slash (/). For example, the following <STRONG> tag will make the word basic in the following sentence bold when displayed by a browser.
This is a <STRONG>basic</STRONG> tag tutorial.will be displayed as:
This is a basic tag tutorial.Not all HTML tags have a beginning and an end. Some tags are only one-sided, such as the <LI> tag for an element in a list.
All HTML tags are case-insensitive; that is, you can specify them in upper or lower case, or in a mixture. <STRONG> is the same as <strong> or <STrong>. It is common practice, however, to specify all tags in uppercase because they are easier to spot when editing an HTML document.
The following sections describe the use of commonly used HTML tags. If HTML is new to you, I suggest that you read each section in sequence. If you are interested in learning about a particular feature then you can use one of the following links.
Sounds and Animations
The same syntax used to link to images is used to link to external animations and sounds. The only difference is the file extension of the linked file. For example,
<A HREF="AdamsRib.mov">link text</A>specifies a link to a QuickTime movie. Some common file types and their extensions are:
| File Type | Extension |
|---|---|
| plain text | .txt |
| HTML document | .html or .htm |
| GIF image | .gif |
| TIFF image | .tiff |
| X Bitmap image | .xbm |
| JPEG image | .jpg or .jpeg |
| PostScript file | .ps |
| AIFF sound file | .aiff |
| AU sound file | .au |
| WAV sound file | .wav |
| QuickTime movie | .mov |
| MPEG movie | .mpeg or .mpg |
Keep in mind your intended audience and their access to software. Most UNIX workstations, for instance, cannot view QuickTime movies.
Clickable Image Maps
Netscape, Microsoft (Version 2.0 and later) and Spyglass browsers all support the client-side (browser processed) image map element MAP. MAP specifies the regions of a mapped image and the associated URLs. This allows you to assign different links to different parts of a single image rather than only one link to the entire image.
The format is:
<MAP NAME="string">
<AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="url_for_region">
..... more shapes ...
</MAP>
where (x1,y1) are the upper-left hand coordinates and (x2,y2) the lower
right-hand coordinates for a rectangle within the image associated with the link.
Other possible shapes are:
<AREA SHAPE="circle" COORDS="x1, y1, x2, y2" HREF="url_for_region">
<AREA SHAPE="polygon" COORDS="x1, y1, x2, y2 ... xn, yn" HREF="url_for_region">
With the circle, (x1,y1) is the center and (x2,y2) is an edge. All coordinates are in pixels.
Referencing the MAP
You reference the map from within an IMG element using the USEMAP attribute.
For example:
<IMG SRC="blobby.gif" USEMAP="#string">references the map named "string" listed above.
Client-side image maps are simple to create with the assistance of a map coordinate program. You simply specify the image you want to map in the application, use several geometric tools to define the area and assign a URL. The program does the rest and inserts the map coordinates in your HTML document. Simple and easy!
You can download a free evaluation copy of a mapping application at any one
of the following:
Clickette by Sausage Sorry, only WIN95 version ($25)
Mapedit A WYSIWYG image mapping for Windows and UNIX
TABLE
Before HTML tags for tables were formulated, authors had to carefully format their tabular information within <PRE> tags, counting spaces and previewing their output. Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who use the table tags to present their regular Web pages. (Check out the NCSA Relativity Group's pages for an excellent, award-winning example.)Think of your tabular information in light of the coding explained below. A table has headings where you explain what the columns/rows include, rows for information, and cells for each item. In the following table, the first two rows contain the heading information, each detail row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function.
Table Elements | |
|---|---|
| Element | Description |
| <TABLE> ... </TABLE> | defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border. |
| <CAPTION> ... </CAPTION> | defines the caption for the title of the table. The default position of the title is
centered at the top of the table. The attribute ALIGN=BOTTOM
can be used to position the caption below the table. NOTE: Any kind of markup tag can be used in the caption. |
| <TR> ... </TR> | specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information. |
| <TH> ... </TH> | defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information. |
| <TD> ... </TD> | defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information. |
Table Attributes | |
|---|---|
| NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>. | |
| Attribute | Description |
|
|
General Table Format
The general format of a table looks like this:<TABLE> <== start of table definition <CAPTION> caption contents </CAPTION> <== caption definition <TR> <== start of first row definition <TH> cell contents </TH> <== first cell in row 1 (a head) <TH> cell contents </TH> <== last cell in row 1 (a head) </TR> <== end of first row definition <TR> <== start of second row definition <TD> cell contents </TD> <== first cell in row 2 <TD> cell contents </TD> <== last cell in row 2 </TR> <== end of second row definition <TR> <== start of last row definition <TD> cell contents </TD> <== first cell in last row... <TD> cell contents </TD> <== last cell in last row </TR> <== end of last row definition </TABLE> <== end of table definitionThe <TABLE></TABLE> tags must surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined by the <TR>...</TR> tags. Within a row you can have any number of cells defined by the <TD> ...</TD> or <TH>...</TH> tags. Each row of a table is, essentially, formatted independently of the rows above and below it. This lets you easily display tables like the one above with a single cell, i.e. Table Attributes, spanning columns of the table.
Centering Tables
You can also use CENTER to center TABLEs -- in fact, this is currently the only way you can do so. For example:
<CENTER>
<table border>
<tr>
<td>here is a single-celled table!</td>
</tr></table>
</CENTER>
displays this:
| here is a single-celled table! |
Nested Tables
The cell of a table can contain other HTML tags including another table. A table contained within another table is called a nested table. For example,
<TABLE WIDTH="100%" BORDER>
<TR>
<TD>
...outer table...
<TABLE WIDTH="100%" BORDER>
<TR>
<TD>
...inter table...
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
would be displayed as:
...outer table...
|
Tables for Nontabular Information
Some HTML authors use tables to present nontabular information. For example, because links can be included in table cells, some authors use a table with no borders composed of a number of images. Displayed as cells of a table, several images appear to be a single large image. Browsers that can display tables properly show the various images seamlessly, making the created image look like an image map (one image with hyperlinked portions).
Using table borders with images can create an impressive "windowed" display as well. Specify CELLSPACING=0, CELLPADDING=0 and BORDER=0 explicitly for seemless images and specify a border greater than zero for a picture frame effect. Experiment and see what you like.
The following image of a map of downtown Paris is actually four images displayed in a table with two rows of two columns each. Each image links to a larger image for that quarter of the map.
The HTML for the table is:
<CENTER>
<TABLE border=0 cellpadding=0 cellspacing=0>
<TR>
<TD><a href="./images/cite_nw.jpg"><img src="./images/cite_nw_sm.jpg"
WIDTH= "180" HEIGHT="120" border=0></A></TD>
<TD><a href="./images/cite_ne.jpg"><img src="./images/cite_ne_sm.jpg"
WIDTH= "180" HEIGHT="120" border=0></A></TD>
</TR>
<TR>
<TD><a href="./images/cite_sw.jpg"><img src="./images/cite_sw_sm.jpg"
WIDTH= "180" HEIGHT="120" border=0></A></TD>
<TD><a href="./images/cite_se.jpg"><img src="./images/cite_se_sm.jpg"
WIDTH= "180" HEIGHT="120" border=0></A></TD>
</TR>
</TABLE>
</CENTER>
 |
 |
 |
 |
Another use of a TABLE is to display text with white space on both the left and right
to create margins. For example, the following will place the page content in the center
80% of the page.
<TABLE WIDTH="100%">
<TR>
<TD WIDTH="10%"></TD>
<TD WIDTH="80%">
...page content...
</TD>
<TD WIDTH="10%"></TD>
</TR>
</TABLE>
Finally, a table can be used to align text with the middle of an image as indicated above. For example, to place an image on the left and text to the right, create a table with one row and two columns. Display the image in the first column and the text in the second. The browser will center the text in the table cell which will align it with the middle of the image. See The Unsophisticated Traveler's web site for an example of a page heading displayed in this manner. The use of a table to create margins around text is also evident on that site.
FORM
Web forms let a reader return information to a Web server for some prescribed action. For example, suppose you collect names and email addresses so you can email information to people who request it. For each person who enters his or her name and address, you need to send some response back to them and to add the respondent's data to a data base. This processing of incoming data is done by a script or program executed on the web server.The forms themselves are not hard to code. They follow the same constructs as other HTML tags. What is difficult is creating the program or script that takes the information submitted in a form and processes it. Because of the need for specialized scripts to handle the incoming form information, forms are not discussed in this primer.
Comments in HTML Documents
Comment lines are indicated by the special beginning tag <!-- and ending tag
--> placed at the beginning and end of EVERY line to be treated as a
comment. Comments cannot be nested, and the double-dash sequence "--" may not appear
inside a comment. You must also make sure that there are no spaces in the start-of-comment string.
For example, the line
<!-- This is a comment -->is a valid comment line, but the lines
<!-- This is -- not -- a comment --> < !-- This is not a comment -->are not.
Do not try to use comments to "comment out" HTML tags, since some browsers (notably Mosaic) will still pay attention to angle brackets inside a comment and terminate the comment prematurely.
FONT
Netscape introduced the FONT element to permit control of the size of the displayed font. Font sizes are defined in a range from 1 to 7 (the default base value is 3). You can then specify a change in font size using elements such as
This is <FONT SIZE="+2">resized up 2</FONT>.<BR>
This is <FONT SIZE="-2">resized down 2</FONT>.<BR>
This is <FONT SIZE="7">resized to 7</FONT>.
which is displayed as:
This is resized up 2.
This is resized down 2.
This is resized to 7.
Thus you can specify the font size relative to the current size (using + or -) or as an absolute size from 1 to 7.
Microsoft Attribute Enhancement
The Microsoft browser introduced a FONT attribute, FACE, for specifying the typeface. For example FACE="arial" would specify the arial font. The face names are taken from the Windows font manager, so you need to know the font names and have the fonts installed for this to work. Clearly this will only work on PCs, and will not work on Macs or Unix computers.
Here is an example:
This is <FONT FACE="arial">sample</FONT>.<BR>
This is <FONT FACE="times">sample</FONT>.<BR>
This is <FONT FACE="zapf">sample</FONT>.
which is displayed as:
This is sample.
This is sample.
This is sample.
BASEFONT Element
In introducing the FONT element, it becomes desirable to be able to set the base-level font size for an entire document (default size is 3). This is done via the BASEFONT tag. For example <BASEFONT SIZE="4:> sets the base font for the document to 4. Relative fonts, specified by FONT, are then determined relative to this base size.
BASEFONT Caveats
1. You should always put BASEFONT at the beginning of your body, as otherwise odd things will happen.
2. Note also that if you specify <BASEFONT SIZE="7">, then <FONT SIZE="+2"> will not work, as 7 is the largest possible font size.
Escape Sequences: Special Characters (a.k.a. Character Entities)
Character Entities are composed of a short sequence of characters that are translated by the browser and displayed as a single character. Character Entities (also called "escape sequences") begin with an ampersand and end with a semi-colon. The use of character entities allow you to do two things:- display certain characters that normally have special meaning in HTML and therefore are not normally displayed
- display characters not available in the plain ASCII character set (primarily characters with diacritical marks)
To have one of these three characters displayed in an HTML document, you must enter its escape sequence instead of the character itself:
< the escape sequence for < > the escape sequence for > & the escape sequence for &
The double quote mark is a special case. It may be used directly in text but it also has an escape sequence ("). You are free to use either (using the double quote mark directly is, of course, easiest).
Additional escape sequences support accented characters, such as:
ö the escape sequence for a lowercase o with an umlaut: ö ñ the escape sequence for a lowercase n with an tilde: ñ È the escape sequence for an uppercase E with a grave accent: ÈYou can substitute other letters for the o, n, and E shown above. Check this online reference for a longer list of special characters.
NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for instance, use < instead of <.
Troubleshooting
Consider this example of HTML:
<B>This is an example of <I>overlapping</B> HTML tags.</I>
In this example the bold sequence begins before the italics sequence and ends within the italics sequence. A browser might be confused by this coding and might not display it the way you intend. The only way to know is to check each popular browser (which is time-consuming and impractical).
In general, avoid overlapping tags. Look at your tags and pair them up. Tags (with the obvious exceptions of elements whose end tags may be omitted, such as paragraphs) should be paired without an intervening, unmatched tag in between. Look again at the example above. You cannot pair the bold tags without another tag in the middle (the first italics tag). Try matching your coding up like this to see if you have any problem areas that should be fixed before your release your files to a server.
HTML protocol allows you to nest HTML tags in some cases. For example, you can embed links within other HTML tags such as headings.
<H2><A HREF="Destination.html">My heading</A></H2>
Do not embed HTML tags within an anchor, such as:
<A HREF="Destination.html"><H2>My heading</H2></A>
Although most browsers currently handle this second example, the official HTML specifications do not support this construct and your file may not work with future browsers. Remember that browsers can be forgiving when displaying improperly coded files. But that forgiveness may not last to the next version of the software! When in doubt, code your files according to the HTML specifications.
Character tags can modify the appearance of the text within other elements:
<UL>
<LI><B>A bold list item</B>
<LI><I>An italic list item</I>
</UL>
However, avoid nesting other types of HTML element tags. For example, you might be tempted to embed a heading within a list in order to make the font size larger.
<UL>
<LI><H2>A large heading</H2>
<LI><H3>Something slightly smaller</H3>
</UL>
Although some browsers handle this quite nicely, formatting of such coding is unpredictable (because it is not part of the standard). For compatibility with all browsers, avoid these kinds of constructs.
What's the difference between embedding a <B> within a <LI> tag as opposed to embedding a <H1> within a <LI>? Within HTML the semantic meaning of <H1> is that it's the main heading of a document and that it should be followed by the content of the document. Therefore it doesn't make sense to find a <H1> within a list.
Character formatting tags also are generally not additive. For example, you might expect that:
<B><I>some text</I></B>
would produce bold-italic text. On some browsers it does; other browsers interpret only the innermost tag.
From here, I suggest you go back to the HTML Tutorial Table of Contents. You can do this by clicking on Tutor TOC Page.
