Advanced HTML

Contents:

Infrequently Used Tags
An HTML Template
How To Add Verification Button
Background Images and Color
Font Control
Image Maps
Tables

Infrequently Used Tags

BASE Tag

The BASE tag gives an absolute URL that is used when resolving relative URLs appearing in the document. Suppose a document contains

<base href="http://www.cs.vt.edu/~abrams/JavaCourse/">

If the absolute URL is a directory, then the slash is mandatory. (Web browsers automatically add that slash for you, so we often forget!)

A link to <A HREF="HTML.html">...</A> would refer to http://www.cs.vt.edu/~abrams/JavaCourse/HTML.html.

The BASE tag is wonderful if you ever move a document or a tree of documents!

LINK Tag

The LINK tag specifies relationships of the document to other documents or objects. The minimum attributes in LINK are

<LINK HREF="..." >

Some browsers will expect a LINK REV relationship of "made" to be a "mailto:name@e-mail_address" to facilitate sending comments to the person that made the document. So I include the following line in my documents:

lt;link rev="made" href="mailto:abrams@cs.vt.edu">

There are many more attributes that can go in LINK; click here to see them.

An HTML Template

I use the following template for my HTML files. It has several features:

A template helps me get a consistent look for my pages
It forces me to insert desirable fields: Title, navigation back to the home page of the Web site, etc.
It forces me to insert desirable tags: BASE, LINK
It inserts a button on which I can click to check the HTML syntax.

<html>

<head>
<base href="http://www.cs.vt.edu/~abrams/JavaCourse/?">
<link rev="made" href="mailto:abrams@cs.vt.edu">
<title>????</title>
</head>

<!--<body bgcolor="#0000FF" -->
<body>

<h1>????</h1>

<hr>

<P>Return to <A
HREF="http://www.cs.vt.edu/~abrams/JavaCourse">CS6204 home page\
</A>.
<P><I>Last modified on ?? 1996.</I>
<p><i>Send comments to abrams@vt.edu.</i>
<br>[This is http://www.cs.vt.edu/~abrams/JavaCourse/?.]

</body>
</html>

How To Add Verification Button

To help me verify the correctness of HTML in pages I author, I insert the following button in my documents. You can click on the button to verify the URL named in where a question mark appears above:

The button is generated by (replace the "?" by your URL):

<FORM METHOD="POST"
ACTION="http://www.webtechs.com/cgi-bin/html-check.pl">
<INPUT NAME="recommended" VALUE="1" TYPE="hidden">
<INPUT NAME="level"  VALUE="Mozilla" TYPE="hidden">
<INPUT NAME="input"  VALUE="0" TYPE="hidden">
<INPUT NAME="esis"   VALUE="0" TYPE="hidden">
<INPUT NAME="render" VALUE="0" TYPE="hidden">
<INPUT NAME="URLs"   VALUE="http://?" TYPE="hidden">
<INPUT TYPE="image"
  SRC="http://www.webtechs.com/html-val-svc/images/valid_html.mcom.gif">
</FORM>

Background Images and Color

Background Image

To display a background image, use

<BODY BACKGROUND="images/paperbkg2.1.gif" >

The specified image will be tiled. Note that you can create fast-loading pages with attractive backgrounds by using a very small gif image; the image will be tiled to fill the user's browser window.

The BACKGROUND attribute only works for HTML 3.0, Netscape 1.1 (or later) and Microsoft Internet Explorer 2.0 (or later).

There are many more attributes that can go in BODY; click here to see them.

Background Color

In Netscape and Internet Explorer, set the background color with the BGCOLOR attribute in the BODY tag:

<BODY BGCOLOR="#rrggbb" >

The rrggbb is parsed as rr=red intensity, gg=green intensity, and bb=blue intensity. Each of rr, gg, and bb is a hexidecimal constant. The constant can be in the range of 00 to FF (i.e., 0 to 255), with 0 meaning off and FF meaning the highest intensity. Note that the use of six hex digits permits specification of 24 bits of color.

000000 is black, FF0000 is red, 00FF00 is green, FFFFFF is white, and so on.

You can also use (in HTML 3.2) sixteen predefined color names rather than the six digit hex number: Black, Maroon, Green, Olive, Navy, Purple, Teal, Gray, Silver, Red, Lime, Yellow, Blue, Fuchsia, Aqua, White.

Font Control

Setting Font Size

To change the size of a font in Netscape (1.1 or later) or MS Internet Explorer (2.0 or later), the FONT tag can be used. The tag is not in HTML, and in fact violates the HTML 1.0 concept that a Web browser should alway set the font size. The FONT tag allows the font to be set to sizes 1 to 7, where 3 is the default:

<FONT SIZE=1>Size 1</FONT>
<FONT SIZE=3>Size 3</FONT>
<FONT SIZE=7>Size 7</FONT>

produces Size 1 Size 3 Size 7.

Setting Font Color

Simply add the COLOR attribute to the font tag to set the font color in Netscape 2.0 or later or Explorer 2.0 or later:

Prepare
to meet your destiny!

The example above was produced by

<hr WIDTH="50%">
<P ALIGN=CENTER>
<FONT SIZE=5 COLOR="#DD0000">Prepare</FONT>
<br><B>to meet your destiny!</B>
<hr WIDTH="50%">

Image Maps

An image map is a graphic image on a page that contains distinct regions on which a user can click. Clicking on a region follows a link that is associated with the region.

For example, the home page for the Computer Science Department at Virginia Tech (www.cs.vt.edu) contains an image map. On the map, a user can click buttons to view new items on the site, search, to go the university's page, or to email a comment to the Web administrator:

Image maps are a little complicated because the require you to

choose an appropriate image,
identify the coordinates of each region in the image,
create a map file, and
know the name of a CGI (common gateway interface) program that processes image maps.

Choosing an Appropriate Image

Use an image with well defined regions. For example, an image containing squares is ideal. Do not choose a photograph with fuzzy boundaries between regions.

Identifying Coordinates

Regions in an image can be a circle, a rectangle, a polygon, or a point. Each is identified by the x,y coordinates of certain items, listed below. (Coordinate 0,0 is the upper left corner.)

For circles, find the center point and the radius (in pixels).
For rectangles, find the top left and bottom right corners.
For polygons, find every vertex.
For a point, find its coordinate.

A simple way to find the needed coordinates is to use an map editing program, such as mapedit. You specify the image name to the mapedit program, and click on the boundaries, and it generates a map file. Or use HotSpots on Windows or WebMap on the Macintosh.

Otherwise you can use a drawing tool that reports the x,y coordinates of the cursor position. Just open the image in such a drawing tool, and click on the vertices of the regions.

Creating Map File

The format of the map file depends on which Web server is used. For example, www.cs.vt.edu uses the NCSA server. The image map used is:

# If user clicks on "what's new" star:
poly http://www.cs.vt.edu/whats_new.html 335,67 316,87 363,87 
383,116 397,105 425,124 424,83 464,66 412,49 389,22 372,30 
341,5 347,35 299,42

# If user clicks on "comment" button:
rect http://www.cs.vt.edu/htbin/mail?webmaster 186,110 256,165

# If user clicks on "virginia tech" button:
rect http://www.vt.edu/ 84,110 181,164

# If user clicks on "search" button:
rect http://www.cs.vt.edu/util/search.html 10,109 72,164

# If user clicks anywhere else (e.g., on "Computer Science" text)
default http://www.cs.vt.edu/

Finding the Image Map Processing Program

There is a program that reads the map file when the mouse is clicked to transfer control to the appropriate URL. The program name depends on the Web server. For the NCSA server, it is imagemap. You must also know the directory in which the program resides, relative to the root document on the Web server. For example, the NCSA server's file hierarchy is installed at /home/httpd on www.cs.vt.edu. Program imagemap is in /home/httpd/htbin/imagemap. You can ask your Web administrator for this information.

Putting It All Together

The HTML file must contain an A tag (that names the image map program and the image map file) and an IMG tag (that names the image). For example, on www.cs.vt.edu the HTML file contains:

<A HREF="/htbin/imagemap/image/maps/vtcs.gif.map">
  <IMG SRC="/image/new_headers/vtcs.gif" ISMAP >
</A>

The A tag contains a very ugly hack: The URL name is a concatenation of the image map program name (/htbin/imagemap) and the image map file (htdocs/image/maps/vtcs.gif.map). Both path names are relative to the root directory of the Web server (which is /home/httpd on www.cs.vt.edu).

Tables

Tables are a highly non-standard HTML feature. The Sandia HTML manual states:

The TABLE element is part of a comprehensive new proposed standard tables structure. It is partially implemented in some browsers. The proposal has undergone numerous changes. Some broswers implemented features in early versions of the proposal which did not survive in the final proposal. Consistent with the nature of HTML, the proposal defines the logical contents of cells and their row/column location, rather than a physical layout which is left as a function of the browser. Details of the appearence of the table, along with the size of margins around cells, even perhaps ruling and shading, might be controlled by associated style sheets, proposed in Version 3. The current proposal expects text to flow around a table, if possible.

Many Web browsers recognize at least the following:

Use the <TABLE> ... </TABLE> tags.
Define each row with <TR> ... </TR>.
Use <TH> <P>... </TH> to define headings.
Use <TD> <P>.. </TD> to define cells (data) in table.

An example:

Model	Price
Corvette	$35,000
Porsche	$62,000

The example above was generated with:

<TABLE BORDER=1>
<TR>
<TH> <P>Model</TH>
<TH> <P>Price</TH>
</TR>
<TR>
<TD> <P>Corvette</TD>
<TD> <P>$35,000</TD>
</TR>
<TR>
<TD> <P>Porsche</TD>
<TD> <P>$62,000</TD>
</TR>
</TABLE>

Return to CS6204 home page.

Last modified on 9 January 1997.

Send comments to abrams@vt.edu.
[This is http://www.cs.vt.edu/~abrams/JavaCourse/Advanced.html.]