HTML Guide

 

© Richmond Virginia Times-Dispatch, December, 1995
Used with permission of its creator Gary Brookins

Creating HTML Documents
Title and Headings
Paragraphs
Linking to other Documents
Relative Links versus Absolute Pathnames
Links to Specific Sections in Documents
Unnumbered Lists
Numbered Lists
Definition Lists
Nested Lists
Preformatted Text
Text Tags
Special Characters
Line Breaks
Horizontal Rules
File Extensions
In-Line Images
Sizing Images
Low and High Resolution Images
Interlaced GIF Images
Animated GIF Images
Image Alignment
Using an Image as Hypertext Link
Embedding sound
Flash files
Background Attributes
Changing Font Size, Color, and Face
Tables

Creating HTML Documents

HyperText Markup Language (HTML) is used to create Websites

Latest version of HTML defined using eXtensible Markup Language (XML) and is often called XHTML

This Guide refers to it as HTML

HTML documents are in plain text format and can be created using any text editor 

<HTML>
<HEAD>
<TITLE>Buster Dunsmore's Homepage</TITLE>
<!-- Created by Buster Dunsmore, Jan 11, 04 -->
</HEAD>
<BODY>
<H1>Buster Dunsmore's Homepage</H1>
HTML documents are in plain text format and can be created using
any text editor. 
<P>
</BODY>
</HTML>

What this looks like on the Web

HTML uses markup tags to tell Web browser how to display text

HTML tags are usually paired --
<H1> and </H1>

This is referred to as a "container" ... like an H1 container, a BODY container, a TITLE container, ....

<H1> tells Web browser to start formatting level-one heading

</H1> tells browser that heading is complete

Sample exception to pairing rule above is <P> (paragraph) tag ... known as "standalone" tag

NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>.

<!-- text --> is comment in HTML source

Not all tags are supported by all Web browsers

If browser does not understand tag, it just ignores it

Title and Headings

Every HTML document should have title used primarily for document identification 

<TITLE>Multivertebrate Lab</TITLE>

HTML has six levels of headings, numbered 1 through 6, with 1 being most prominent

<Hy>Text of heading </Hy>

where y is number between 1 and 6 

<H1>
Welcome to the Multivertebrate Lab
</H1>

Welcome to the Multivertebrate Lab

In many documents, first heading is identical to title

ALIGN attribute can be used to explicitly specify horizontal alignment

ALIGN=LEFT -- Heading is flush left (default)

&lt;H1 ALIGN=LEFT&gt;Lab Schedule&lt;/H1&gt;

Lab Schedule

ALIGN=CENTER -- Heading is centered

&lt;H3 ALIGN=CENTER&gt;Lab Schedule&lt;/H3&gt;

Lab Schedule

ALIGN=RIGHT -- Heading is flush right

&lt;H5 ALIGN=RIGHT&gt;Lab Schedule&lt;/H5&gt;

Lab Schedule

Paragraphs

Web browser ignores multiple spaces, line breaks, and starts new paragraph only when it reaches <P> tag

The agent slowly began to seep through the floorboard until the entire floor below was filled with deadly acid. &lt;P&gt;

The agent slowly began to seep through the floorboard until the entire floor below was filled with deadly acid.

Browser ignores any indentations or blank lines in source text

However, to preserve readability in HTML files, headings should be on separate lines, and paragraphs should be separated by blank lines (in addition to <P> tags)

Originally <P> tag was un-matched and used at end of paragraph

Newer version can be used with matching <P> ... </P> tags

With newer version ALIGN attribute can be used

<P> ... </P>

same as

<P ALIGN=LEFT> ... </P>

This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.

<P ALIGN=CENTER> ... </P>

This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.

<P ALIGN=RIGHT> ... </P>

This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.

Linking to Other Documents

Chief power of HTML comes from its ability to link regions of text (and also images) to another document

Browser highlights these regions (usually with color blue and underlines) to indicate that they are hypertext links

HTML's single hypertext-related tag is <A>, which stands for anchor

To include anchor in your document:

Start anchor with <A

Specify document that is being pointed to by entering parameter HREF="filename" followed by closing right angle bracket >

Enter text that will serve as hypertext link in current document

Enter ending anchor tag: </A> 

<A HREF="MaineStats.html">Maine</A>

MaineStats.html is in same directory as first document

Link to documents in other directories by specifying relative path from current document to linked document 

<A HREF="Atlantic/NJ.html">New Jersey
</A>

These are called relative links

Relative Links versus Absolute Pathnames

In general, you should use relative links, because...

They are shorter

It is easier to move group of documents to another location, because relative path names will still be valid

Use absolute pathnames when linking to documents that are not directly related

Uniform Resource Locators (URLs) specify location of files on other servers

scheme://host.domain[:port]/path/filename

where scheme is something like

http
file on World Wide Web server
ftp
file on FTP server

Port number can generally be omitted 

<A HREF="http://www.cbs.com/dec.html"> 
Late Night Schedule for December</A>

www might be an alias -- www.cbs.com might be alias for bigeye.cbs.com

For security, www alias usually maps to specific directory

www.cbs.com might go to www.cbs.com/public/.www

Link to directory is to default file in that directory -- index.html (typical), welcome.html, homepage.html

http://www.cbs.com --> http://www.cbs.com/index.html which is really www.cbs.com/public/.www/index.html

http://web.ics.purdue.edu/~jones --> http://web.ics.purdue.edu/~jones/index.html which is really ...~jones/www/index.html

On web.ics.purdue.edu ... index.html is the default, followed by index.htm, index.shtml and index.cgi

To make a link that sends e-mail... 

Please send any comments or 
suggestions to 
<A HREF = "mailto:dunsmore@purdue.edu">
the instructor</A>.

which looks like this...

Please send any comments or suggestions to the instructor.

To make a link that sends e-mail to multiple recipients... 

Please send any comments or suggestions to 
<A HREF = "mailto: mckinsec@purdue.edu, 
luks@purdue.edu, Chiefy81@hotmail.com, 
zaveri@purdue.edu, dunsmore@purdue.edu"> 
the instructors</A>.
which looks like this...

Please send any comments or suggestions to the instructors.

This also works... 

Please send any comments or suggestions to 
<A HREF = "mailto: 
Cheryl McKinsey <mckinsec@purdue.edu>, 
Alok Dalal <luks@purdue.edu>, 
Mike Schmidt <Chiefy81@hotmail.com>, 
Vivek Zaveri <zaveri@purdue.edu>, 
Buster Dunsmore <dunsmore@purdue.edu>"> 
the instructors</A>.
which looks like this...

Please send any comments or suggestions to the instructors.

You can even supply information for other mail fields... 

Please send any comments or suggestions to 
<A HREF = "mailto: 
Cheryl McKinsey <mckinsec@purdue.edu>, 
Alok Dalal <luks@purdue.edu>, 
Mike Schmidt <Chiefy81@hotmail.com>, 
Vivek Zaveri <zaveri@purdue.edu>, 
Buster Dunsmore <dunsmore@purdue.edu>?
subject=Some suggestions about the class&
body=I would like the following changes:&
cc=David Tabion <tabiondg@purdue.edu>"> 
the instructors</A>.
Please send any comments or suggestions to the instructors.

Links to Specific Sections in Documents

Anchors can also be used to move to particular section in document

Set link from document A to specific section in document B

Set up named anchor in document B 

Here is <A NAME="history">some text</A>

Create link in document A, include not only filename, but also named anchor, separated by hash mark (#) 

This is my 
<A HREF="docB.html#history">link</A>
to document B

Links to Specific Sections Within Current Document 

This is a
<A HREF = "#history">history link</A>
from within Document B

Unnumbered Lists

Start with opening list <UL> tag

Enter <LI> tag followed by individual item. Follow item with </LI> tag.

End with closing list </UL> tag. 

<UL>
<LI> apples </LI>
<LI> bananas </LI>
</UL>

Numbered Lists

Numbered list (also called ordered list) uses <OL> instead of <UL>. Items are tagged using same <LI> tag. 

<OL>
<LI> oranges </LI>
<LI> peaches</LI>
<LI> grapes</LI>
</OL>

  1. oranges
  2. peaches
  3. grapes

<OL> is the same as <OL TYPE=1> (Arabic numbers) 

<OL TYPE=A> (capital letters)
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</OL>

  1. oranges
  2. peaches
  3. grapes 

<OL TYPE=a> (small letters)
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</OL>

  1. oranges
  2. peaches
  3. grapes 

<OL TYPE=I> (Large Roman numerals)
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</OL>

  1. oranges
  2. peaches
  3. grapes 

<OL TYPE=i> (Small Roman numerals)
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</OL>

  1. oranges
  2. peaches
  3. grapes

The START attribute may be used with the OL tag to start at a specific number. Also, the VALUE attribute may be used with the LI tag to skip unwanted numbers. 

<OL START=3>
<LI> oranges </LI>
<LI> peaches </LI>
<LI VALUE=7> grapes </LI>
<LI> apples  </LI>
<LI> raisins </LI>
</OL>

  1. oranges
  2. peaches
  3. grapes
  4. apples
  5. raisins

Notice how this works for a list NOT using standard Arabic numbers: 

<OL TYPE=A START=3>
<LI> oranges </LI>
<LI> peaches </LI>
<LI VALUE=7> grapes </LI>
<LI> apples  </LI>
<LI> raisins </LI>
</OL>

  1. oranges
  2. peaches
  3. grapes
  4. apples
  5. raisins

Definition Lists

Definition list usually consists of alternating term (abbreviated as DT) and definition (abbreviated as DD) 

<DL>
<DT> NCSA
<DD> NCSA, National Center for 
     Supercomputing Applications, is
     located on the campus of the
     University of Illinois at 
     Urbana-Champaign.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of
     Cornell University in Ithaca,
     New York.
</DL>

NCSA
NCSA, National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.

Nested Lists

<UL>
<LI> A few New England states: </LI>
    <UL>
    <LI> Vermont </LI>
    <LI> New Hampshire </LI>
    </UL>
<LI> One Midwestern state: </LI>
    <UL>
    <LI> Michigan </LI>
    </UL>
</UL>

Preformatted Text

Use the <PRE> tag (which stands for ``preformatted'') to generate text in fixed-width font and cause spaces, new lines, and tabs to be significant 

<PRE>
  #!/bin/csh                           
  cd $SCR                             
  cfs get mysrc.f:mycfsdir/mysrc.f   
  cfs get myinfile:mycfsdir/myinfile   
  fc -02 -o mya.out mysrc.f           
  mya.out                              
  cfs save myoutfile:mycfsdir/myoutfile 
  rm *                                
</PRE>


#!/bin/csh                           
cd $SCR                             
cfs get mysrc.f:mycfsdir/mysrc.f   
cfs get myinfile:mycfsdir/myinfile   
fc -02 -o mya.out mysrc.f           
mya.out                              
cfs save myoutfile:mycfsdir/myoutfile 
rm *

HTML tags are honored inside the <PRE> container 

<PRE>
I have embedded a 
<A HREF="sample.html">hyperlink</A>
in this material.
</PRE>


I have embedded a 
hyperlink
in this material.

The same goes for the <CODE>, <TT>, and <KBD> text tags 

I have <CODE>embedded a 
<A HREF="sample.html">hyperlink</A> 
in this</CODE> material.

I have embedded a hyperlink in this material.

The <XMP> tag (which stands for ``eXaMPle'') is like the <PRE> tag, except that it ignores all HTML tags 

<XMP>
I have embedded a 
<A HREF="sample.html">hyperlink</A>
in this material.
</XMP>

I have embedded a &lt;A HREF="sample.html"&gt;hyperlink&lt;/A&gt; in this material.

Text Tags

Start with <tag>, where tag is desired formatting tag, to indicate beginning of tagged text

Enter tagged text

End passage with </tag>

<B>
Bold text -- Be Prepared
<I>
Italic text -- Semper Fidelis
<CODE>,<TT>,<KBD>
for snippets of computer CODE -- The iostream.h header file. (Displayed in fixed-width font.)
<SUP>
SUPerscript (exponent) -- x 2
SUP can be used for footnotes; make footnote a link 7 and put references at end of page
<SUB>
SUBscript -- a i
<STRIKE> and <DEL>
strike-through style or for deleted items--
Please do not drink and drive
<U>
Underline -- Pegasus was named for the winged horse. (Use this carefully. It looks too much like a hyperlink!)

<BIG>
BIGger font -- When the hammer hit her thumb, she screamed in agony.

<SMALL>
SMALLer font -- Across the room he caught a glimpse of a tiny little mouse heading toward Mr. Wilson.

Special Characters

Four characters -- left angle bracket (<), right angle bracket (>), ampersand (&) and double quote (") have special meaning within HTML and therefore cannot be used ``as is'' in text

To use one of these characters in HTML document, you must enter its special character sequence instead:

&lt;
special character sequence for <
&gt;
special character sequence for >
&amp;
special character sequence for &
&quot;
special character sequence for "
&#64;
special character sequence for @
&#169;
special character sequence for ©
&copy;
special character sequence for ©
&#174;
special character sequence for ®
&reg;
special character sequence for ®
&nbsp;
special character sequence for non-breaking space

&nbsp; intended to keep words together on a line

"Elwood&nbsp;Scuggins" will appear as

Elwood Scuggins

on one line

&nbsp; can be used to create spaces that the browser does not ignore

For example,
"one two&nbsp;&nbsp;&nbsp;three"
will appear as

one two   three

To make an indented paragraph...

"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a dark and stormy night." will appear as

     It was a dark and stormy night. Sam Slade pulled his old rattle-trap Ford up to the curb when he saw the light in the apartment window.

Line Breaks

<BR> tag forces line break

Stop.&lt;BR&gt; Drop.&lt;BR&gt; And roll!

Stop.
Drop.
And roll!

<CENTER> -- All lines of text between <CENTER> and </CENTER> are centered between current left and right margins

&lt;CENTER&gt; Stop. Drop. And roll! &lt;/CENTER&gt;

Stop. Drop. And roll!

Horizontal Rules

<HR> tag produces horizontal line width of browser window

Default is shaded engraved line

&lt;HR&gt;

<HR NOSHADE> -- For those times when you really want solid bar

<HR SIZE=number> -- how thick is horizontal rule to be; default is 2

&lt;HR NOSHADE SIZE=2&gt;

&lt;HR NOSHADE SIZE=5&gt;

&lt;HR NOSHADE SIZE=12&gt;

<HR WIDTH=number|percent> -- Default horizontal rule is always as wide as page. With WIDTH tag, can specify exact width in pixels, or relative width measured in percent of document width.

A "pixel" is a PICture ELement -- the colored dots that make up pictures and lines. There are generally about 72 pixels per inch.

&lt;HR WIDTH=100&gt;

&lt;HR NOSHADE SIZE=5 WIDTH=75%&gt;

<HR ALIGN=LEFT|RIGHT|CENTER> -- For small rules, pushed up against left margin, right margin, or centered on page (centered is default)

&lt;HR NOSHADE ALIGN=LEFT SIZE=4 WIDTH=80%&gt;

File Extensions

In following list, those extensions in red can be displayed "in-line" by most Web browsers -- no need to invoke "helper" or plug-in program

HTML document
.html or .htm
Plain text
.txt
PostScript file
.ps or .eps

Portable BitMap (PBM) image
.pbm
Portable GrayscaleMap (PGM) image
.pgm
Portable PixMap (PPM) image (full color)
.ppm
Portable aNyMap (PNM) image (all 3 above)
.pnm
Tagged Image File Format (TIFF) image
.tiff or .tif
X BitMap (XBM) image
.xbm
Graphics Interchange Format (GIF) image
(pronounced like the peanut butter)
.gif
Joint Photographic Experts Group (JPEG) image
(pronounced "jay peg")
.jpeg or .jpg
Portable Network Graphics (PNG) image
(pronounced "ping")
.png

Because of the way they store colors: GIF images are better (clearer, smaller files) for cartoon-like images with 32 colors or so. JPEG images are better (sharper, smaller files) for photograph-like images with thousands of colors. PNG was expected to replace GIF, but has not caught on.

AUdio (AU) sound (UNIX)
.au
Audio Interchange File Format (AIFF) sound (Macintosh)
.aiff or .aif
WAVE (Windows)
.wav

RealAudio and RealVideo (Windows, Macintosh, UNIX)
.ram -- .ra and .rm

Moving Picture Expert Group (MPEG) movie (UNIX, Windows)
.mpeg or .mpg or .mp3
QuickTime MOVie (Macintosh, Windows)
.mov
Audio Visual Interleave (AVI) for digital video and audio (Windows, Macintosh)
.avi

In-Line Images

To include in-line image, use 

<IMG SRC="image_URL">

Big World <IMG SRC="globe.gif">
or
<IMG SRC="images/globe.gif">

A large collection of public domain images (clip art) is available at ClipartGuide.com.

Put in alternative text to use if Web browser is not currently displaying images

<IMG ALT= "Big World" SRC="globe.gif">

displays...

Big World

instead of globe image

Also, "Big World" can be seen if cursor rests on top of image without moving for few seconds

Sizing Images

Specify image's width and height in pixels 

<IMG SRC="images/doggie.jpg" 
  WIDTH=400 HEIGHT=300>

Do this for speed

Leaves right amount of space for image, but continues laying out document with hole into which image will be placed

WIDTH and HEIGHT values that differ from actual width and height of image scale image to fit 

<IMG SRC="images/doggie.jpg" 
  WIDTH=200 HEIGHT=150>


<IMG SRC="images/doggie.jpg" 
  WIDTH=600 HEIGHT=450>

Be sure to use width and height that have same ratio as actual image or you will get strange image 

<IMG SRC="images/doggie.jpg" 
  WIDTH=100 HEIGHT=300>

Can specify ONLY width or height

Browser will scale other dimension appropriately and display image 

<IMG SRC="images/doggie.jpg" WIDTH=100>
will display smaller (but appropriately scaled) image 100 pixels wide

Can also use percentages 

<IMG SRC="images/doggie.jpg" HEIGHT=50%>

will display larger (but appropriately scaled) image 50% as high as screen size

Low and High Resolution Images

IMG tag also has LOWSRC attribute

Example of LOWSRC attribute 

<IMG SRC="large.jpg" LOWSRC="small.gif"
WIDTH=400 HEIGHT=200>

Most browsers recognize LOWSRC

Those that do not just ignore it and load normal SRC image

LOWSRC image loaded on "first pass" through document

When all text and all LOWSRC images loaded, SRC images loaded on "second pass" through document

LOWSRC can be "low resolution" small (fast loading) image file

SRC can be "high resolution" large (slow loading) image file

.gif and .jpeg images can be used for either LOWSRC or SRC and can be mixed

WIDTH and HEIGHT attributes used for both LOWSRC and SRC

If no WIDTH and HEIGHT attributes given, size of LOWSRC is used for SRC

Why? The "hole" in the document for the image is determined by the size of the first image.

Interlaced GIF Images

Standard feature of GIF or PNG image format is option to store image data in file in interlaced fashion

Instead of storing image's scan lines in exact sequence, equally spaced nonadjacent sets of lines are stored together

Interlaced image appears to "fade in" from fuzzy to sharp focus

With modern Internet connections, little effect

Example of Normal and Interlaced Images

JPEG images may be turned into pro-JPEG (progressive-JPEG) images that do the same thing

Can convert an existing image to an interlaced images using Photoshop or similar image software

Animated GIF Images

A GIF image can have more than one image per file

Becomes slide show presentation or animation

Examples of Animated GIF Images

Web browsers can display multiple images in a single GIF file

A GIF "image" can contain several separate images, information on timing, and whether or not to "loop" the animation

Multiple images can be used along with transparency

Simple to use -- Just imbed the image inline via
<IMG SRC="images/sylvester.gif">

Tools (for example, Photoshop) are available to combine multiple GIF images into one "animated GIF"

For much more information and for tools, see Royal Frazier's GIF89a-based Animation for the WWW

A gallery of animated GIF images is available at the Animated Gif Artists Guild Gallery. Many are available for use by just getting permission from the image's creator.

Image Alignment

[IMAGE]By default aligns text with bottom of image 

<IMG ALIGN=BOTTOM
 SRC="images/globe.gif">

[IMAGE] ALIGN=TOP aligns text with top of image 

<IMG ALIGN=TOP SRC="images/globe.gif">

[IMAGE] ALIGN=MIDDLE aligns text with center of image 

<IMG ALIGN=MIDDLE
 SRC="images/globe.gif">

[IMAGE] With ALIGN=LEFT, graphic will float down and over to current left margin, and subsequent text will wrap around right hand side of graphic until <BR CLEAR=LEFT>. Any text following the <BR CLEAR=LEFT> will appear under the image. Notice that unlike the other ALIGN attributes (like TOP, MIDDLE, and BOTTOM), ALIGN=LEFT specifies where the image will be, ... not the text.

[IMAGE] With ALIGN=RIGHT, graphic will float down and over to current right margin, and subsequent text will wrap around left hand side of graphic until <BR CLEAR=RIGHT>. Any text following the <BR CLEAR=RIGHT> will appear under the image. Notice that unlike the other ALIGN attributes (like TOP, MIDDLE, and BOTTOM), ALIGN=RIGHT specifies where the image will be, ... not the text.

HSPACE and VSPACE leave horizontal and vertical white space between the image and things around it

[IMAGE] <IMG SRC="images/globe.gif" HSPACE=50>

Using an Image as Hypertext Link

<A HREF = "construction.html">
<IMG SRC = "images/doggie.jpg"></A>

Notice that the clickable image is surrounded by a blue box of 2 pixels. Can make this larger or smaller with BORDER attribute:

<A HREF = "construction.html">
<IMG SRC = "images/doggie.jpg" BORDER=5> </A>

Can even make border go away completely (BORDER=0), but then you must tell people in the image or the text somewhere that it is a link

Can also use a small image (thumbnail) as a link to a larger version

Embedding sound

Can simply make a link to a sound file 

<A HREF="sounds/HailPurdue.mp3">
Hail Purdue</A>

which works like this...
Hail Purdue 

<A HREF="sounds/hymn.mp3">
Purdue Hymn</A>

which works like this...
Purdue Hymn

This page includes... 

<EMBED SRC="sounds/hail.mid"
 WIDTH=150 HEIGHT=75 
 ALIGN=LEFT AUTOSTART=FALSE>
EMBED tag is used to embed sound or video on page -- like inline image

Use WIDTH and HEIGHT attributes to leave space for audio controls

Use ALIGN attribute same way as for images

AUTOSTART=FALSE keeps the sound from starting automatically on Internet Explorer (would not anyway on Netscape)

This page includes... 

<EMBED SRC="sounds/GrandfatherClock.au"
WIDTH=145 HEIGHT=60 AUTOSTART=TRUE>
...which will start automatically and play once

But, with the controls you can play it as many times as you like

This page includes... 

<EMBED SRC="sounds/GrandfatherClock.au"
WIDTH=2 HEIGHT=2 AUTOSTART=TRUE LOOP=TRUE>
...which will start automatically and play forever (background music :-)

The controls are hidden because of the small WIDTH and HEIGHT

WIDTH=0 and/or HEIGHT=0 does not work with Netscape which shows full size controls in that case

Flash files

Can simply make a link to a video file 

<A HREF="video/baby.mpg">
birth of a baby</A>

which works like this...
birth of a baby

But, Flash files are now standard for embedding video onto a Web page

Flash, a popular authoring software developed by Macromedia, is used to create vector graphics-based animation programs

Small files, fast transmission times, can play while downloading

Easily resizeable

Macromedia tools allow easy creation of .swf (ShockWave Flash) files

Most all Web browsers have Flash players included

This page includes... 

<EMBED SRC="lsc.swf" WIDTH=550 HEIGHT=350>
Notice that WIDTH and HEIGHT here refer to the size of the viewing area for the flash file

This page includes... 

<EMBED SRC="hampsters.swf" 
WIDTH=600 HEIGHT=450>
Flash files can have both video and sound

The "Hampster Dance" was one of the first Flash files that caught public attention.

Flash files are easily resizeable both smaller and larger

A link to a Flash file displays the file on the full screen

Background Attributes

An image that is to be used as background for document

Used to tile full background of document-viewing area

<BODY BACKGROUND="images/wheat.gif">
...
</BODY>

BGCOLOR Attribute

(Note: Much of the material below concerning colors was researched and written by Kevin Brewer of Delco Electronics and is used with his permission.)

Change color of background without having to specify separate image that requires another network access to load

Color samplers are available at HYPE's Color Specifier and Doug Jacobson's RGB Color Charts

<BODY BGCOLOR="color">
...
</BODY>

Where "color" is "#RRGGBB" hexadecimal red-green-blue (RGB) triplet or a color name

RGB color value consists of three two-digit hexadecimal numbers (00-FF)

Each two-digit value specifies intensity of corresponding color

Color value #FF0000 is red because red number is set to highest value with green and blue set to zero

Pound sign (#) optional -- but generally used with RGB values

16 "primary" color names:

Aqua Black Blue Fuchsia
Gray Green Lime Maroon
Navy Olive Purple Red
Silver Teal White Yellow

These colors display as:

Aqua Black Blue Fuchsia
Gray Green Lime Maroon
Navy Olive Purple Red
Silver Teal White Yellow

These are standard supported 16 colors

All the color names we know (supported at least by Netscape)...

Black Blue Brown Cyan
Aqua
Gold Gray Green Lime
Magenta
Fuchsia		 Maroon Navy Olive
Orange Orchid Pink Plum
Purple Red Salmon Scarlet
Sienna Silver Teal Turquoise
Violet Wheat White Yellow

These display as:

Black Blue Brown Cyan
Aqua
Gold Gray Green Lime
Magenta
Fuchsia		 Maroon Navy Olive
Orange Orchid Pink Plum
Purple Red Salmon Scarlet
Sienna Silver Teal Turquoise
Violet Wheat White Yellow

Curiously color name RED and value #FF0000 are the same

Color name BLUE and value #0000FF are the same

BUT, color name GREEN and value #00FF00 are NOT the same -- probably because #00FF00 looks more like LIME

TEXT ATTRIBUTE

Control color of all normal text in document

<BODY TEXT="color">
...
</BODY>

LINK, VLINK, AND ALINK ATTRIBUTE

VLINK stands for visited link, and ALINK stands for active link. Default coloring of these is LINK="BLUE", VLINK="PURPLE", and ALINK="RED".

<BODY LINK="color" VLINK="color" ALINK="color">
...
</BODY>

<BODY BGCOLOR="BLACK" TEXT="#F0F0F0" LINK="YELLOW" VLINK="#22AA22" ALINK="#0077FF">

Changing Font Size, Color, and Face

<FONT SIZE=value>...</FONT>

Can change font size. Valid values range from 1-7. Default FONT SIZE is 3. Value given to size can optionally have a '+' or '-' in front of it to specify that it is relative to document BASEFONT. Default BASEFONT is 3.

This is <FONT SIZE=+3>

This is <FONT SIZE=+1>

This is <FONT SIZE=-2>

<FONT SIZE=+1> is the same as <BIG>

<FONT SIZE=-1> is the same as <SMALL>

<FONT COLOR=color>...</FONT>

Can change font color. "Color" is "#rrggbb" hexadecimal red-green-blue triplet or a color name used to specify color

This is <FONT COLOR="BLUE">

<FONT FACE=face>...</FONT>

<FONT FACE="face1,face2, ... ,facen"> ... </FONT>

Can change font face. Specify one or more font faces to use (in preference order). If none are available, standard face (usually "Times") will be used.

This may be <FONT FACE=Helvetica>

Can change any combination of the three.

<FONT FACE=value(s) SIZE=value COLOR=color>...</FONT>

We advise you to use <FONT FACE="Helvetica,Utopia" SIZE=+3 COLOR="RED"> extreme caution</FONT> when handling sulfuric acid.

We advise you to use extreme caution when handling sulfuric acid.

Tables

Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=2>
<TR>
<TD>Chicago</TD> 
<TD>75</TD> 
<TD>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD>1254</TD> 
<TD>Good</TD>
</TR>
</TABLE>

Tables begin with <TABLE ...> tag and end with </TABLE> tag

By default, tables have no borders or same effect via BORDER=0

Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=0>
<TR>
<TD>Chicago</TD> 
<TD>75</TD> 
<TD>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD>1254</TD> 
<TD>Good</TD>
</TR>
</TABLE>

<TR ...></TR> stands for table row

<TD ...></TD> stands for table data, and specifies standard table data cell. Each row need not have same number of cells specified. Short rows will be padded with blank cells on the right. Default alignment of table data is ALIGN=LEFT.

Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=2>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

<TH ...></TH> stands for table header. Header cells are identical to data cells in all respects, with exception that header cells are in bold FONT, and have default ALIGN=CENTER.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=2>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

<CAPTION ...></CAPTION> represents caption for table. CAPTION tags should appear inside TABLE but not inside table rows or cells. CAPTION accepts alignment attribute that defaults to ALIGN=TOP but can be explicitly set to ALIGN=BOTTOM. Captions are always horizontally centered with respect to table, and may have their lines broken to fit within width of table.

Figure 4.12. Attendance at and Ratings of the last two seminars.
City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=2>
<CAPTION>
Figure 4.12.  Attendance at and 
Ratings of the last two seminars.
</CAPTION>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

Figure 4.12. Attendance at and Ratings of the last two seminars.
City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=2>
<CAPTION ALIGN=BOTTOM>
Figure 4.12.  Attendance at and 
Ratings of the last two seminars.
</CAPTION>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

BORDER attribute appears in TABLE tag. Borders drawn around all table cells. Borders can be arbitrarily thick.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=10>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

COLSPAN attribute can appear in any table cell (TH or TD) and it specifies how many columns of table this cell should span. Default COLSPAN for any cell is 1.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good
Detroit No Data Available

<TABLE BORDER=5>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
<TR>
<TD>Detroit</TD> 
<TD COLSPAN=2>No Data Available</TD>
</TR>
</TABLE>

ROWSPAN attribute can appear in any table cell (TH or TD) and it specifies how many rows of table this cell should span. Default ROWSPAN is 1.

City Attendance Rating
Chicago 75 Excellent
1254 Good
420 Excellent

<TABLE BORDER=5>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD ROWSPAN=3>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>420</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
</TABLE>

CELLSPACING=<value>

By default cell spacing of two. Cell spacing is amount of space inserted between individual cells in table.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=5 CELLSPACING=10>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

CELLPADDING=<value>

By default cell padding of one. Cell padding is amount of space between border of cell and contents of cell.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=5 CELLSPACING=10 
 CELLPADDING=15>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

Tables can be centered and WIDTH tag can be used to specify size in pixels or percentage of screen width to use for table

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<CENTER>
<TABLE BORDER=5 WIDTH="75%">
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>
</CENTER>

Tables can use ALIGN=LEFT or ALIGN=RIGHT in which case they work just like images with text wrapping around them

Figure 4.12. Attendance at and Ratings of the last two seminars.
City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. 

<TABLE BORDER=5 ALIGN=LEFT>
<CAPTION>
Figure 4.12.  Attendance at and 
Ratings of the last two seminars.
</CAPTION>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>
This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.
<BR CLEAR=LEFT>

Figure 4.12. Attendance at and Ratings of the last two seminars.
City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. 

<TABLE BORDER=5 ALIGN=RIGHT>
<CAPTION ALIGN=BOTTOM>
Figure 4.12.  Attendance at and 
Ratings of the last two seminars.
</CAPTION>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>
This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.
<BR CLEAR=RIGHT>

BGCOLOR and BACKGROUND attributes can be used with TABLE, TH, TR, TD tags

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=5 BGCOLOR="YELLOW">
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR BGCOLOR="ORANGE">
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD BGCOLOR="PINK">Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

&lt;TABLE BORDER=5 BACKGROUND="images/Vtile.jpg"&gt; &lt;TR&gt; &lt;TH&gt;City&lt;/TH&gt; &lt;TH&gt;Attendance&lt;/TH&gt; &lt;TH&gt;Rating&lt;/TH&gt; &lt;/TR&gt; &lt;TR BACKGROUND="images/water.jpg"&gt; &lt;TD&gt;&lt;FONT COLOR="WHITE"&gt; Chicago&lt;/FONT&gt;&lt;/TD&gt; &lt;TD ALIGN=RIGHT&gt; &lt;FONT COLOR="WHITE"&gt; 75&lt;/FONT&gt;&lt;/TD&gt; &lt;TD ALIGN=CENTER&gt; &lt;FONT COLOR="WHITE"&gt; Excellent&lt;/FONT&gt;&lt;/TD&gt; &lt;/TR&gt; &lt;TR&gt; &lt;TD BACKGROUND="images/island.gif"&gt; Indianapolis&lt;/TD&gt; &lt;TD ALIGN=RIGHT&gt;1254&lt;/TD&gt; &lt;TD ALIGN=CENTER&gt;Good&lt;/TD&gt; &lt;/TR&gt; &lt;/TABLE&gt;

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=0 BGCOLOR="RED">
<TR>
<TD>
  <TABLE BORDER=5 BGCOLOR="YELLOW">
  <TR>
  <TH>City</TH> 
  <TH>Attendance</TH> 
  <TH>Rating</TH>
  </TR>
  <TR BGCOLOR="ORANGE">
  <TD>Chicago</TD> 
  <TD ALIGN=RIGHT>75</TD> 
  <TD ALIGN=CENTER>Excellent</TD>
  </TR>
  <TR>
  <TD BGCOLOR="PINK">Indianapolis</TD> 
  <TD ALIGN=RIGHT>1254</TD> 
  <TD ALIGN=CENTER>Good</TD>
  </TR>
  </TABLE>
</TD>
</TR>
</TABLE>

Can be used to enclose text in colored box.

Mississippi River Campaign
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river.

<CENTER>
<TABLE WIDTH=75%>
<TR>
<TD ALIGN=CENTER 
BGCOLOR="SILVER">
Mississippi River Campaign
</TD> 
</TR>
<TR>
<TD BGCOLOR="YELLOW">
This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.</TD> 
</TR>
</TABLE>
</CENTER>

VALIGN tag controls whether text inside the table cell is aligned to TOP of cell, MIDDLE of cell (default), or BOTTOM of cell.

Mississippi River Campaign This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.

<TABLE BORDER=5>
<TR>
<TD>Mississippi River Campaign</TD> 
<TD>This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.  This victory, along with 
that at Gettysburg, Pennsylvania,
(July 1-3, 1863) tilted the war 
in favor of the North.</TD> 
</TR>
</TABLE>

Mississippi River Campaign This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.

<TABLE BORDER=5>
<TR>
<TD VALIGN=TOP>
Mississippi River Campaign</TD> 
<TD>This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.  This victory, along with 
that at Gettysburg, Pennsylvania,
(July 1-3, 1863) tilted the war 
in favor of the North.</TD> 
</TR>
</TABLE>

Tables can contain hyperlinks, images, images that are hyperlinks, and different color fonts

Prof. Dunsmore's Table of Interesting Things
Thank you for Visiting! Advanced HTML Guide

<TABLE BORDER=2>
<TR>
<TD ALIGN=CENTER>
<IMG SRC="images/WWWlogo.gif"></TD> 
<TD><FONT SIZE=+2>
Prof. Dunsmore's Table of
Interesting Things
</FONT></TD> 
<TD ALIGN=CENTER>
<IMG SRC="images/globe.gif"></TD>
</TR>
<TR>
<TD><FONT COLOR="RED">
Thank you for Visiting!</FONT></TD> 
<TD ALIGN=CENTER>
<A HREF="doggie.html">
<IMG SRC="images/doggie.jpg"></A></TD> 
<TD><A HREF="advhtmlguide.html">
Advanced HTML Guide</A></TD>
</TR>
</TABLE>