HTML Advanced

Creating a Home Page

Course Description
Background Images and More Color
Font
HTML Attributes Readable by Netscape Navigator
Transparent and Interlaced GIF Images
Image Maps
Tables
1. Basic Markup Tags
2. Basic Table Format
3. Caption and Headers
  1. Captions
  2. Headers
4. Spanning Rows and Columns
5. Formatting Text Within Cells
  1. Vertical Adjustments (Rows and Cells)
  2. Horizontal Adjustments (Rows and Cells)
6. Examples

Course Description

(Prerequisite: Introduction to HTML or equivalent experience) Topics include tables, transparent and interlaced GIF images, using more color, background images, clickable maps and features to make your pages more efficient.

Top

Background Images and More Color

There are two methods for changing the background of your Web page: Solid Color Background and Tiled-Image Background. The Solid Color Background is much faster at loading.

Solid Color Background

<BODY BGCOLOR=#hex_number>

In order to change a particular color, you must find out the RGB (red, green, blue) hexadecimal (base=16) value for the color you want. There are a number of programs that will give the RGB hexadecimal value for a particular color. For example, Colormeister on the MAC.

The numbers range from 00 00 00 being black (lack of color) to FF FF FF being white (all colors) to being white (all color).

Example:
<BODY BGCOLOR=#6BE138>
Click to see results

Exercises

Top

Tiled-Image Background

Instead of a solid background, you may specify a particular image. The image will then be laid side by side in rows to fill the screen, similar to the way tiles would be laid on a kitchen or bathroom floor.

<BODY BACKGROUND="image_file">
Example:
Making a background out of the graphic file "jeweled.gif":
<BODY BACKGROUND="jeweled.gif">
Click to see results

Comments:

Make sure that the pattern flows smoothly from one tile to another.
Try to keep your background image as small as possible.
Use subtle patterns instead of loud ones.
When using tiled backgrounds, use a background color similar to the color of your background image. This will insure that visitors using browsers that do not support background images will see a page similar to what you intended.

Exercises

Top

Change Text Color

Once you have changed the color of your background, you may want to or need to change the color of your text. There are four attributes to consider:

TEXT=#hex_number

TEXT controls the color of the all the document's body text that is not a link, including headings and body text. (Default is black)

LINK=#hex_number

LINK controls the color of unfollowed links. (Default is blue)

VLINK=#hex_number

VLINK controls the color of visited links. (Default is purple)

ALINK=#hex_number

ALINK controls the color of links that have had the mouse button pressed on it, but not released. (Default is red)

Example:


<BODY BGCOLOR=#008080
      TEXT=#FFFFFF
      LINK=#FFFF00
      VLINK=#00FF00
      ALINK=#008080>

Click to see results

Comment:

Make sure that you have enough contrast between the background and the foreground (text) colors.
The ~~256~~, oops, 216 colors of Netscape
Here is a color reference chart.
To test/create your color schemes, you may want to use the OIT Color Sampler

Top

Font

The font tag  can be used to change the size, color, and typeface for a particular string of text.

text string

You may specify the text to be smaller to larger by using the SIZE=number option in the font tag. The values of SIZE are 1 to 7, with three being the default size.

The COLOR attribute allows you to change the color of the text.

The FACE attribute specifies the typeface to be used, such as Arialor Courier. If multiple names are specified, the first one listed that is installed on the client machine is used.

Example:
This is normal, black text.
This is larger, red text displayed in arial typeface
Click to see results.

Note:

The HTML font sizes of 1 thru 7 correspond to the wordpocessing font sizes of 8, 10,12, 14, 18, 24, and 36.
Please see the above section for more detail on RRGGBB.

Top

HTML Attributes Readable by Netscape Navigator

This section describes some additional attributes for some of the markup tags that were discussed in the HTML Basics class, plus introduces some additional markup tags.

Align

The ALIGN attribute is used to specify the alignment of a text element.

ALIGN={LEFT|CENTER|RIGHT}

ALIGN may be set to LEFT, CENTER, or RIGHT in order to make the text left justified (default), centered, or right justified, respectively.

Examples:
 This section describes some additional options (called attributes) for some of the markup tags that where discussed in the HTML Basics class, plus introduces some additional markup tags.
Click to see results
 This section describes some additional options (called attributes) for some of the markup tags that where discussed in the HTML Basics class, plus introduces some additional markup tags.
Click to see results

<H2 ALIGN=CENTER>This is the title of my Page</H2>
Click to see results

Exercises

Top

Center

Everything (e.g. text, images) between the opening <CENTER> tag and the closing </CENTER> tag will be centered.

<CENTER>text and/or images</CENTER>

Examples:
<CENTER> This section describes some additional options (called attributes) for some of the markup tags that where discussed in the HTML Basics class, plus introduces some additional markup tags. </CENTER>
Click to see results

Top

Inline Images Revisited

<IMG SRC="graphics file URL" [ALT="text"] attributes >

Some additional attributes include:

ALIGN="{TOP | MIDDLE | BOTTOM | LEFT | RIGHT}"

This causes the top, middle, or bottom of the image to be aligned with the text on the line containing the IMG tag. These attributes treat the image like text. ALIGN can also be LEFT or RIGHT, this anchors the image to the left or right of the screen and forces text to flow around it. (Default is BOTTOM.)

WIDTH=number

This specifies the width (in number of pixels) of the image.

HEIGHT=number

This specifies the height (in number of pixels) of the image.

BORDER=number

Here number is the border thickness in pixels. (Default=1)

ISMAP

This attribute indicates that this image is a server-side image map.

USEMAP

This attribute is used for client-side image maps.

Comments:

HEIGHT and WIDTH attributes allow the browser to know the dimensions of the image enabling the browser to format the display the document text, before the image has downloaded.
When using ALIGN={LEFT|RIGHT}, you may need to use   to get the intended spacing.

Examples:
This is a picture of the Statue of Liberty <IMG SRC="statue_liberty.gif"> (located in New York harbor) on a cloudy day. For many immigrants, this was a most welcome site.
Click to see results
This is a picture of the Statue of Liberty <IMG SRC="statue_liberty.gif" ALIGN=TOP BORDER=5> (located in New York harbor) on a cloudy day. For many immigrants, this was a most welcome site.
Click to see results
<IMG SRC="statue_liberty.gif" ALIGN=LEFT> Not like the brazen giant of Greek fame With conquering limbs astride from land to land; Here at our sea-washed, sunset gates shall stand A mighty woman with a torch, whose flame Is the imprisoned lightning, and her name Mother of Exiles. From her beacon-hand Glows world wide-welcome; her mild eyes command The air-bridged harbor that twin cities frame, " Keep, ancient lands, your storied pomp ! " cries she With silent lips. " Give me your tired, your poor, Your huddled masses yearning to breathe free, The wretched refuse of your teeming shore, Sende these, the homeless, tempest-post to me, I lift my lamp beside the golden door ! " by Emma Lazarus, New York City, 1883
Click to see results

Click to see results, adding: 
<IMG SRC="statue_liberty.gif" ALIGN=RIGHT WIDTH=57 HEIGHT=123> This is a picture of the Statue of Liberty (located in New York harbor) on a cloudy day. For many immigrants, this was a most welcome site. " Give me your tired, your poor, Your huddled masses yearning to breathe free, The wretched refuse of your teeming shore, Sende these, the homeless, tempest-post to me, I lift my lamp beside the golden door ! "
Click to see results

Exercises

Top

Subscript

 text 

The subscript tag defines text that should be displayed in a smaller font than usual and lower on the line than usual.

Example:
To test the hypothesis that two proportions are the same, one would test the following null hypothesis 
H0: p1 = p2 = p
Click to see results

Top

Superscript

 text 

The superscript tag defines text that should be displayed in a smaller font than usual and higher on the line than usual.

Example:
 Albert Einstein's famous formula: E=mc2. 
Click to see results

Top

Transparency and Interlacing

Transparency and Interlacing are both features of the GIF89a format. Neither JPEG nor older GIF87 files have these capabilities.

Transparency

Transparency is the capability to set a color in a GIF file to be invisible. Therefore, when you display the image on a WEB page, the page beneath the image will show through the transparent parts. You can only make one color in the image transparent.

The following example shows the same image twice. The first does not have a transparent background while the second's background has been set to transparent.

Click to see the difference

Comments:

A brief primer on how to create transparent GIF images (AOL)
Creating Transparent Graphics Step-by-step process of creating images with transparent backgrounds using Lview Pro 1.B

Top

Interlacing

Interlacing is a method for saving GIF images. Instead of saving the file linearly (line 1, line 2, ... last line), an interlaced GIF file is saved in a stepwise fashion.

When the interlaced GIF file is displayed, the rows are loaded in the same sequence in which they were saved. Using Netscape, the missing lines are filled in with the information from the initial lines, thereby creating a blurry look until all the lines are filled in.

Interlacing is great for large images that take a long time to load. The visitor to your site will be able to more quickly get an idea of what the image will look like. That way the visitor can elect to stop loading the image if they are not interested.

Example of a non-interlaced GIF.
Example of an interlaced GIF.

Top

Image Maps

An image map is an image that contains context sensitive links. This allows a number of different links associated with it. Coordinates of mouse clicks are sent to either the browser or the web server and then tranlated into URL's. Clicks on different portions of the image go to different links. There are two types of image maps: Client-Side and Server-Side.

Client-Side Image Maps

Client browsers handle the image map coordinates, therefore they can process the image map faster. Netscape 2.0 is one of the browsers that supports this type of image map.

Map

The map tag defines a client-side image map. It gives a name to a collection of AREA tags that are superimposed over an inline image to connect user clicks with URLs.

<MAP NAME="name"> area tags </MAP>

Area

The <AREA> tag, valid only within a MAP, defines areas that act as hotspots within an image. There is no default or "background" area; you can achieve this effect by including an AREA tag at the end of the map that encompasses the entire image.

<AREA SHAPE="{RECTANGLE|CIRCLE|POLYGON}" COORDS="coords" HREF="URL">

The SHAPE attribute can be one of RECTANGLE, CIRCLE, or POLYGON (each can be abbreviated to the first four letters.)

The COORDS attribute gives the co-ordinates, in pixels, measured from the upper left corner of the image, of the defining points for the shape. For RECTANGLE these are left, top, right, bottom. For CIRCLE they are X_center, Y_center, radius. For POLYGON they are x₁, y₁, x₂, y₂, ... x_n, y_n.

Example:

<Center>
<IMG SRC="clickmap.gif" USEMAP="#newmap" BORDER=0 WIDTH=361 HEIGHT=233>
<MAP NAME="newmap">
<AREA SHAPE="RECT" COORDS= "145,32,228,109" HREF="square.html">
<AREA SHAPE="CIRCLE" COORDS= "82,168,44" HREF="circle.html">
<AREA SHAPE="POLY" COORDS= "214,199,320,199,320,90" HREF="triangle.html">
<AREA SHAPE="RECT" COORDS= "0,0,361,233" HREF="miss.html">
</MAP>
</CENTER>

Click to see results

Top

Server-Side Image Map

All browsers that can display images support server-side image maps.

<A HREF="image map">
<IMG SRC="image map graphic" ISMAP attributes >
</A>

The "image map", saved with the .MAP extension, defines the areas that act as hotspots within an image. Like Client-Server Image Maps, the hotspots can be either a RECTANGLE, CIRCLE, or POLYGON (which can be abbreviated to the first four letters.) Unlike Client-Server Image Maps, you can define a default area.

The hotspots are defined in pixels. For RECTANGLE these are left,top right,bottom. For CIRCLE they are x_center, y_center x_periphery,y_periphery. For POLYGON they are x₁, y₁ x₂, y₂ .. x_n, y_n x₁,y₁.

Example:

<Center>
<A HREF="clickmap.map">
<IMG SRC="clickmap.gif" BORDER=0 ISMAP WIDTH=361 HEIGHT=233>
</A>
</CENTER>

where clickmap.map contains:

default /path/miss.html
rect    /path/square.html 146,33 227,110
circle  /path/circle.html 86,168 86,125
poly    /path/triangle.html 320,95 319,200 215,200 320,95

Click to see results

Exercises

Top

Tables

Basic Markup Tags

<TABLE attributes ></TABLE>: This is the main table defining tag. Unless surrounded by this pair of markers, all other table tags will be ignored.
<CAPTION attributes ></CAPTION>: This contains the caption of the table. This tag is optional.
<TR attributes></TR>: Stands for table row. This tag definds the beginning and end of every row in a table.
<TD attributes></TD>: Stands for table data. This tag specifies the contents of a cell within a table, this is where the contents of the table will go. Cells may contain any of the following
<TH attributes></TH>: Stands for table header. This is a special case of the <TD></TD> tags. Table headers are presented in boldface and are centered within the cell.

Top

Basic Table Format

The basic format for all tables looks like this:

<TABLE>
  <CAPTION>Caption Text</CAPTION>
  <TR>
    <TH>Cell Contents</TH>
    ...
  </TR>

  <TR>
   <TD>Cell Contents</TD>
   ...
   </TR>

...

</TABLE>

Example: Simple Table

<TABLE BORDER>
 <CAPTION>Simple Table</CAPTION>
 <TR>
  <TD>One</TD>
  <TD>Two</TD>
  <TD>Three</TD>
 </TR>
 <TR>
  <TD>Four</TD>
  <TD>Five</TD>
  <TD>Six</TD>
 </TR>
</TABLE>

Click to see results

The BORDER attribute causes the table and all cells to be surrounded by a raised border.

Example: Simple Table without a Border

<TABLE>
 <CAPTION>Simple Table</CAPTION>
 <TR>
  <TD>One</TD>
  <TD>Two</TD>
  <TD>Three</TD>
 </TR>
 <TR>
  <TD>Four</TD>
  <TD>Five</TD>
  <TD>Six</TD>
 </TR>
</TABLE>

Click to see results

Exercises

Top

Captions and Headers

Captions

As shown in the previous section, the optional <CAPTION> tab is used to label tables. The <CAPTION> tag also has an alignment attribute that allows the caption to be placed above or below the table. The default alignment is TOP.

<CAPTION [ALIGN={TOP|BOTTOM}]>Caption Text</CAPTION>

Exercises

Headers

The <TH></TH> tag centers and presents the enclosed text in boldface.

Example: Headers As Column Labels

<TABLE BORDER>
 <TR>
  <TH>Header 1</TH>
  <TH>Header 2</TH>
 </TR>
 <TR>
  <TD>Cell Content 1</TD>
  <TD>Cell Content 2</TD>
 </TR>
 <TR>
  <TD>Cell Content 3</TD>
  <TD>Cell Content 4</TD>
 </TR>
</TABLE>

Click to see results

Example: Headers As Row Labels

<TABLE BORDER>
 <TR>
  <TH>Header 1</TH>
  <TD>Cell Content 1</TD>
  <TD>Cell Content 2</TD>
 </TR>
 <TR>
  <TH>Header 2</TH>
  <TD>Cell Content 3</TD>
  <TD>Cell Content 4</TD>
 </TR>
</TABLE>

Click to see results

Exercises

Top

Spanning Rows and Columns

Spanning allows a cell to occupy the space of several cells. Spanning may occur in both horizontally or vertically.

Example: Row Spanning

<TABLE BORDER>
 <CAPTION>Row Spanning</CAPTION>
 <TR>
  <TD ROWSPAN=3> </TD>
  <TD>Red Team</TD>
  <TD>Blue Team</TD>
 </TR>
 <TR>
  <TD>3</TD>
  <TD>7</TD>
 </TR>
 <TR>
  <TD>5</TD>
  <TD>2</TD>
 </TR>
 <TR>
  <TD>Total</TD>
  <TD>8</TD>
  <TD>9</TD>
 </TR>
</TABLE>

Click to see results

Example: Column Spanning

<TABLE BORDER>
 <CAPTION>Column Spanning</CAPTION>
 <TR>
  <TD COLSPAN=3>Regional Teams</TD>
 </TR>
 <TR>
  <TD>Red</TD>
  <TD>Blue</TD>
  <TD>Green</TD>
 </TR>
 <TR>
  <TD>Yellow</TD>
  <TD>Orange</TD>
  <TD>Purple</TD>
 </TR>
</TABLE>

Click to see results

Example: Row and Column Spanning

<TABLE BORDER>
 <CAPTION>Combinations</CAPTION>
 <TR>
  <TD ROWSPAN=3> </TD>
  <TD COLSPAN=2>1996 Season Standings</TD>
 </TR>
 <TR>
  <TD>Red Team</TD>
  <TD>Blue Team</TD>
 </TR>
 <TR>
  <TD>First</TD>
  <TD>Second</TD>
 </TR>
 <TR>
  <TD>Total Points</TD>
  <TD>34</TD>
  <TD>32</TD>
 </TR>
</TABLE>

Click to see results

Exercises

Top

Formatting Text Within Cells

Horizontal Alignment (Rows and Cells)

<TR [ALIGN={LEFT|CENTER|RIGHT}]>
<TD></TD>
...
</TR>

<TD [ALIGN={LEFT|CENTER|RIGHT}]></TD>

Vertical Alignment (Rows and Cells)

<TR [VALIGN={TOP|MIDDLE|BOTTOM}]>
<TD></TD>
...
</TR>

<TD [VALIGN={TOP|MIDDLE|BOTTOM}]></TD>

Example:

<TABLE BORDER>
 <TR>
  <TD> </TD>
  <TH>Alignment Attributes</TH>
  <TH>Alignment Attributes</TH>
  <TH>Alignment Attributes</TH>
 </TR>
 <TR>
  <TH>Horizontal<br>Alignment</TH>
  <TD ALIGN=LEFT>ALIGN=LEFT</TD>
  <TD ALIGN=CENTER>ALIGN=CENTER</TD>
  <TD ALIGN=RIGHT>ALIGN=RIGHT</TD>
 </TR>
 <TR>
  <TH>Vertical<br>Alignment</TH>
  <TD VALIGN=TOP>VALIGN=TOP</TD>
  <TD VALIGN=MIDDLE>VALIGN=MIDDLE</TD>
  <TD VALIGN=BOTTOM>VALIGN=BOTTOM</TD>
 </TR>
</TABLE>

Click to see results

Exercises

Top

Examples of Tables:

Graphics in Tables

It is a simple process to insert a graphic into a table. Just enter the IMG tag between the <TD></TD> tags.

<TABLE BORDER>
 <TR>
  <TD><IMG SCR="welsmall.gif" width=55 height=48></TD>
  <TD>Page Created by: VCU WebMaster<br>April 1, 1996</TD>
 </TR>
</TABLE>

Click to see results

Links within Tables

<TABLE BORDER> 
 <TR> 
  <TD><IMG SRC="welsmall.gif" width=55 height=48></TD> 
  <TD>Page Created by: <a href="mailto:webmaster@www.vcu.edu">VCU WebMaster</a>
      <br>April 1, 1996</TD> 
 </TR> 
</TABLE>

Click to see results

Exercises

Lists in Tables

<TABLE BORDER> 
 <TR> 
  <TD>
   <UL>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
   </UL>
  </TD> 
  <TD>
   <OL>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
   </OL>
  </TD> 
 </TR> 
</TABLE>

Click to see results

Nested Tables

<TABLE BORDER>
 <TR>
  <TD>Row 1/Cell 1</TD>
  <TD>Row 1/Cell 2</TD>
 </TR>
 <TR>
  <TD>Row 2/Cell 1</TD>
  <TD>

   <table border>
    <tr>
     <td>Row 1/Cell 1</td>
     <td>Row 1/Cell 2</td>
    </tr>
    <tr>
     <td>Row 2/Cell 1</td>
     <td>Row 2/Cell 2</td>
    </tr>
   </table>

  </TD>
 </TR>
</TABLE>

Click to see results

Top

Office for Information Technology | Web Support Services

Date Last Modified: October 14, 1998
Please send comments to Web Support

HTML Advanced

Creating a Home Page

Table of Contents

Course Description

Background Images and More Color

Solid Color Background

Tiled-Image Background

Change Text Color

Font

HTML Attributes Readable by Netscape Navigator

Align

Center

Inline Images Revisited

Subscript

Superscript

Transparency and Interlacing

Transparency

Interlacing

Image Maps

Client-Side Image Maps

Map

Area

Server-Side Image Map

Tables

Basic Markup Tags

Basic Table Format

Captions and Headers

Captions

Headers

Spanning Rows and Columns

Formatting Text Within Cells

Horizontal Alignment (Rows and Cells)

Vertical Alignment (Rows and Cells)

Examples of Tables:

Graphics in Tables

Links within Tables

Lists in Tables

Nested Tables