Advanced HTML

Contents:

BASE Tag
How To Add Verification Button
Background Images and Color
Font Control
Image Maps
Tables

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://ei.cs.vt.edu/~jwww/spring.97//">

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://ei.cs.vt.edu/~jwww/spring.97/HTML.html.

The BASE tag can help if you ever move a document or a tree of documents!

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.

There are two forms:

server-side image maps (works with almost any graphical browser)

client-side image maps (works with recent browsers)

Mouse click is processed using local map file on client by code on client. Resulting URL to load is transmitted to server, saving server load.

Example:

From an ancient tutorial on HTML by NCSA:

Image maps are a little complicated because the require you to

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

Choosing an Appropriate Image

Use image with well defined regions.

Image containing squares is ideal.

Do not choose a photograph with fuzzy boundaries between regions.

Identifying Coordinates

Regions in 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. (0,0 is upper left corner.)

Circles: find center point and radius (in pixels).
Rectangles: find top left and bottom right corners.
Polygons: find every vertex.
Point: find its coordinate.

Some ways to find the needed coordinates:

Some Web page design tools (e.g., Macromedia Backstage) displays image and lets you draw regions over it or click on boundaries to generate map file.

Use a separate map editing program that does the same thing, such as mapedit or HotSpots on Windows or WebMap on the Macintosh.

Use drawing tool that reports x,y coordinates of cursor position. Just

open image in drawing tool,
click on vertices of regions, and
manually create the map file.

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

For server side image maps, there's a program that reads map file when mouse is clicked to transfer control to the appropriate URL.

The program name depends on the Web server. For NCSA server, it is imagemap.

You must also know directory in which program resides, relative to root document on Web server.

/home/httpd

imagemap

/home/httpd/htbin/imagemap

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 have been a 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 or CS4984 home page.

Last modified on 26 March 1998 by abrams@vt.edu.
[This is http://ei.cs.vt.edu/~jwww/courseNotes/html/HTMLinfo/Advanced.html.]