Mad Dog's HTML Reference: Tags

Basic Text Formatting

We begin with the old-style HTML tags used in the <BODY> section that format your page content. These will work on any browser, although some are now "deprecated" in favor of newer tags and/or style sheets. In-line tags are meant to affect short bits of text; block-level tags affect paragraphs or other blocks of text, and typically include automatic line-breaks. You can nest in-line tags within block-level tags and/or other in-line tags, but don't next block-level tags inside in-line tags. Where tags let you specify attributes, attribute choices are summarized

what you type in: what you see:

First, note that HTML ignores
carriage returns and
extra spaces. You have to specify line breaks. First, note that HTML ignores carriage returns and extra spaces.
You have to specify line breaks.

Also paragraph breaks. But making extra space by stringing P tags together doesn't work . Use multiple BR tags, or insert special non-breaking space characters between P tags instead:
  

Also paragraph breaks.
But making extra space with multiple P tags doesn't work.
Use multiple BR tags, or insert special non-breaking space characters between P tags instead:

 The HR tag inserts a horizontal line:
 <HR> The HR tag inserts a horizontal line:

 That's the default; here are lines with specified HR attributes: 
<HR SIZE=4 WIDTH=120 ALIGN=RIGHT> 
<HR SIZE=8 WIDTH=350 ALIGN=CENTER NOSHADE> That's the default; here are lines with specified HR attributes:

bolded text bolded text

italicized text italicized text

nested bold and italic nested bold and italic

<CENTER>Centered Text</CENTER>  Centered Text

<DIV ALIGN=RIGHT>right-aligned text; the DIV tag's other ALIGN options are LEFT, CENTER and JUSTIFY</DIV>
right-aligned text; the DIV tag's other ALIGN options are LEFT, CENTER and JUSTIFY

<TT>fixed-width (typewriter), usually Courier</TT> fixed-width (typewriter), usually Courier

<STRIKE>strikeout</STRIKE> ~~strikeout~~

Xsuperscript X^superscript

Xsubscript X_subscript

small text small text

<BIG>big text</BIG> big text

Underlining is easily mistaken for a link. Underlining is easily mistaken for a link.

Mixing lots of
formats can impair readability. Mixing lots of formats can impair readability.

<PRE>preformatted text is one way of controlling spacing:
 Year Sales
 ---- -----
 1997 $5,632
 1998 $12,234 </PRE>
(Hint: type the data first to get it
aligned right; then insert other in-line tags.)
preformatted text is one way of controlling spacing: Year Sales ---- ----- 1997 $5,632 1998 $12,234
(Hint: type the data first to get it aligned right; then insert other in-line tags.)

You can include a BASEFONT tag at the start of your BODY section to specify the font SIZE, and, for some browsers, font FACE and font COLOR for your page, e.g.:

<BASEFONT SIZE="n" FACE="name" COLOR="color">

The allowable SIZE values are 1 through 7, typically referencing 8, 10, 12, 14, 18, 24 and 36 point font sizes respectively.
FONT references a font name (Arial, Times New Roman or whatever);
COLOR is an RGB hexadecimal triple or one of the 16 named colors.
Then you can change font attributes for special pieces of text with in-line FONT tags:

 ... 
Be careful about specifying fonts in the <BASEFONT> or  tag. You can count on all browsers having the basic fonts--Arial, Courier and Times Roman--but browsers that don't have the font you specify will simply substitute some other font, and the effect you want may be diminished or lost. The <BASEFONT> or  tags can list multiple fonts in order of preference. The list should include a generic font family as a last resort, e.g.
 
Generic font families include serif, sans-serif, monospace, cursive and fantasy.
Note that as of HTML 4, you are encouraged to use style sheets instead of these in-line font manipulations, but these tags work fine.

Specify FONT SIZE relative to current font size:
size=-1
size=+2
+4! Specify FONT SIZE relative to current font size:
size=-1 size=+2 +4!

 Or specify FONT SIZE as number:
 size=1 size=2 size=3
 size=4 size=5
 size=6
 size=7
 Range is 1 to 7; 3 is browser's default. or specify FONT SIZE as number:
size=1size=2size=3
size=4size=5
size=6
size=7
Range is 1 to 7; 3 is browser's default.

 RED TEXT!
 GREEN TEXT!
 BLUE TEXT! RED TEXT!
GREEN TEXT!
BLUE TEXT!

 Try to maintain good contrast with the page's background color! Try to maintain good contrast with the page's background color!

You can try a funky font, but if the client browser doesn't support it, your page may not look so great. You can try a funky font, but if the client browser doesn't support it, your page may not look so great.

<H1>Biggest Headline</H1>
Biggest Headline

<H2>2nd biggest, italicized</H2>
2nd biggest, italicized

<H3>3rd biggest</H3>
3rd biggest

<H4>Note that headline tags include a paragraph break. Sizes are H0 through H6. This is H4.</H4>
Note that headline tags include a paragraph break. Sizes are H0 through H6. This is H4.

<H5>This is H5</H5>
This is H5

<H6>Last and definitely least, H6--pretty unimpressive!</H6>
Last and definitely least, H6--pretty unimpressive!



Controlling line breaks, alignment and indents
The   character is a non-breaking space that can be used to insure line breaks don't occur between certain pairs of words in a title.
To maintain strict control of line breaks, enclose your content in a  tag and then insert   tags to specify exactly where you do want the line breaks to occur. You can also include  tags to indicate where optional line breaks may occur if the line extends beyond the right edge of the browser window.
The preferred way to control text alignment is by including an ALIGNattribute in a block-level tag such as a paragraph , headline, e.g., <H2 ALIGN="center"> or page division <DIV ALIGN="right">. Each of these should terminate with a corresponding termination tag , </H2> or </DIV> as appropriate.
The block-level <CENTER> tag is still a commonly-used alternative (includes its own line breaks). Use <BLOCKQUOTE> for both-margin indents, <UL> with no list items for left-indents (see below).

Lists

Here's an unordered (bullet) list:
<UL>
<LI>bread
<LI>Drano
</UL> Here's an unordered (bullet) list:

bread

Drano

Here's an ordered (numbered) list:
<OL>
<LI>breathe in
<LI>breathe out
<LI>repeat as necessary
</OL> Here's an ordered (numbered) list:

breathe in

breathe out

repeat as necessary


<UL><LI>Hardware store
 <OL><LI>plunger<LI>Drano</OL>
<LI>Drug store
 <OL><LI>Kaopectate<LI>aspirin</OL>
</UL>

Hardware store

plunger

Drano

Drug store

Kaopectate

aspirin

Bullet TYPE can be specified for unordered lists or any individual list item:
<UL TYPE="DISC">
<LI>disc, default 1st level
<LI TYPE="CIRCLE">circle, default 2nd level
<LI TYPE="SQUARE">square, default 3rd level
</UL> Bullet TYPE can be specified for unordered lists or any individual list item:

disc, default 1st level

circle, default 2nd level

square, default 3rd level

Ordered lists let you specify a TYPE and ordinal VALUE for a list or any individual
list item:
<OL>
<LI TYPE="I">Roman caps
<LI TYPE="i">Roman lower-case
<LI TYPE="A">Alphabetic caps
<LI TYPE="a">Alphabetic lower-case
<LI TYPE="1" VALUE="16">Numbered
</OL> Ordered lists let you specify TYPE and an ordinal VALUE for a list or any individual list item:

Roman caps

Roman lower-case

Alphabetic caps

Alphabetic lower-case

Numbered

Lots of people use the UL tag alone for easy left-indents:
<UL>
"Now is the time for all good taxidermists to
come to the aid... Lots of people use the UL tag alone for easy left-indents:
"Now is the time for all good taxidermists to come to the aid...

In-Line Images
Okay, now that you know how to format text on the page, let's include some in-line images. The web supports images in GIF, JPEG or PNG formats. GIFs can have up to 256 colors. JPEGs and PNGs can have millions (although clients' monitors may not display them all). JPEGs use a "lossy" compression that reduces image quality; GIFs and PNGs have lossless compression. The next chapter covers image editing strategies, etc. Here we just summarize image placement on the page with the <IMG> tag:

Here's an in-line image with default settings and unpredicable placement on the page.
<IMG SRC="ugly2.gif">
Resizing the browser window may cause such images to jump around as the lines re-wrap.
Here's an in-line image with default settings and unpredictable placement on the page. Resizing the browser window may cause such images to jump around as the lines re-wrap.

In this first example, the image file is in the same directory as this HTML file, and is simply referenced by its filename. If the image file is in another directory, you must reference it by its relative or absolute path. You can even specify the URL for an image located on another server, which is more honest than stealing a copy but makes your page depend on the other server remaining operational.

For better layout control, specify image dimensions, horizontal and vertical padding space (in pixels, 72 pixels/inch),alignment, etc.
<IMG HEIGHT=88 WIDTH=83 ALIGN=LEFT
HSPACE=10 VSPACE=5 ALT="Ugly Guy!" SRC="ugly2.gif"> Specifying image dimensions lets the client browser block out the space
and compose the page quicker.
 
You can stop text wrapping by including a CLEAR attribute in a line-break tag. For better layout control, specify image dimensions, horizontal and vertical padding space (in pixels, 72 pixels/inch), alignment, etc. Ugly Guy! Specifying image dimensions lets the client browser block out the space and compose the page quicker.
You can stop text wrapping by including a CLEAR attribute in a line-break tag.

The IMG tag's LEFT and RIGHT ALIGN attribute options wrap the text around the image. The other ALIGNoptions position the image relative to the current line only, and do not wrap other lines:
TOP aligns top of image to highest element in the line.
TEXTTOP aligns top of image with highest text in the line.
MIDDLE aligns middle of image to baseline.
ABSMIDDLE aligns middle of image with middle of largest element in the line.
BOTTOM aligns bottom of image to bottom of text.
ABSBOTTOM aligns bottom of image with bottom of largest element in page.
You can include   characters between images to make sure they always display on the same line, but you'll get little blank spaces between them. A better alternative is to do multi-image layouts in tables (see separate chapter).
Pay attention to the file sizes of your images! Web-surfers are often impatient, and may not wait for large images to load. You can keep your visitors' attention with interleaved GIFs and progressive JPEG's, which appear quickly at coarse resolution and gradually sharpen, or you can referrence a small, low-resolution version of your image in the <IMG> tag, e.g. <IMG WIDTH=200 HEIGHT=150 SRC="hi_res.gif" LOWSRC="low_res.gif">
Another option is to include a small "thumbnail" version of the image on your page that links to the full-sized version. Then your visitors can decide for themselves whether to view or skip the full-sized version. By default, a linked image has a 2-pixel-wide blue border, but you can use IMG tag's BORDER attribute to eliminate this (BORDER=0).

Okay, links!
Links reference other web pages, images, etc. on other servers by URL (Uniform Resource Locator). A URL specifies a scheme that tells the browser how to handle the file to be received from the server, the server name, and the path and filename of the file on the server. Common URL schemes include:

http:// = HyperText Transfer Protocol (conventional web pages)

ftp:// = File Transfer Protocol

mailto: = compose and send e-mail (note: no slashes)

news: = read/send to Usenet newsgroup

file:/// = local file access (note: 3 slashes)

Web servers typically have 3- or 4-part names; the last two parts comprise the registered domain name, e.g., udel.edu. Some web servers are configured as virtual hosts serving files under multiple server names and domains.
The path and filename in a URL are typically specified from the root of the web-server directory, which is some subdirectory of the server's local file system. For security reasons, browsers can't access stuff outside the web-server directory.
URLs can specify files by relative or absolute path.
A relative URL specifies a file relative to the location of the file containing the URL.
An absolute URL specifies the full server name and path from the root directory of the web-server.
Suppose your web page is http://www.taxidermy.org/~mad_dog/homepage.html and it includes a link to cadavers.html which is located in the same subdirectory. The link could specify the relative URL <A HREF="cadavers.html">(the default scheme is http://) or the absolute URL <A HREF="http://www.taxidermy.org/~mad_dog/cadavers.html">. Relative URLs make your website more portable: if you moved your whole web site to www.weirdos.net, you would have to fix all the absolute URLs; but the relative URLs would work fine. (They're shorter too.)
If a URL omits the filename, the browser will load a default file named "index.html" in the specified directory. If there is no such file, the browser will simply lists the entire directory's contents, so people can just snoop through your stuff any way they like. The primary webpage in each subdirectory of your website should be named "index.html" to prevent this. Then you can use nice compact URLs like "http://www.taxidermy.org/~mad_dog/"

The University of Delaware <A HREF="http://www.udel.edu/FREC/spatlab/"> Spatial Analysis Lab</A>, is a proud sponsor of this website. The animated GIF image below is also a link. By default, a linked image has a 2-pixel wide blue border, but I suppressed that with the BORDER=0 attribute in the IMG tag. <A HREF="http://www.udel.edu/FREC/spatlab/">
<IMG ALIGN=RIGHT HEIGHT=42 WIDTH=39 HSPACE=5 VSPACE=5 BORDER=0 SRC="tinyearth.gif"></A> The University of Delaware Spatial Analysis Lab is a proud sponsor of this website. The animated GIF image below is also a link. By default, a linked image has a 2-pixel wide blue border, but I suppressed that with the BORDER=0 attribute in the IMG tag.

I created the animated GIF by sequencing still GIF's with Microsoft's GIF Animator (a freebie you can pull off the web). The image is square, but the white image background blends seamlessly with the page background. It is also possible to specify one or more colors in a GIF's palette as transparent.

Here's a link to my <A HREF="mailto:johnmack@udel.edu?subject=Your Awesome MAD-DOG Page!">
e-mail:  <IMG ALT="Great Page, Mad Dog!" src="mailbox.gif"></a> so you can complain about this page. The link encloses both
the image (with default border) and the blue underlined text. Note that I specified the text for the subject line (the sender can change this). Here's a link to my e-mail: so you can complain about this page. The link encloses both the image (with default border) and the blue underlined text. Note that I specified the text for the subject line (the sender can change this).

Here's a link to the <A HREF="#top">top of
this page.</A> (I stuck a hidden anchor tag there: <A NAME="top"> </a>)
Use anchors to improve navigability, but remember that multiple linked pages will download quicker than one huge page requiring lots of anchor tags! Here's a link to the top of this page. I stuck a hidden anchor tag there: <A NAME="top"> </A> Use anchors to improve navigability, but remember that multiple linked pages will download quicker than one huge page with lots of anchor tags!

Note the use of keywords to make the
browser display special non-ASCII characters literally, e.g.: X > Y and Z < Y
implies X > Z. Note the use of keywords to make the browser display special non-ASCII characters literally, e.g.: X > Y and Z < Y implies X > Z.

Some useful special characters:
" = "
& = &
< = <
> = >
  = non-breaking space
° = degree-sign
± = plus-minus sign
÷ = division sign
· = middle dot (multiplication)
&mico; = Greek mu (micro)
ð = Icelandic eth, looks like partial derivative symbol
¼ = one quarter
½ = one half
¾ = three quarters

A while back web pages often had hit-counters showing how popular they were--like you care! Well, here's ours (just another animated GIF you're welcome to steal). If you want a real hit-counter, the "Forms" chapter shows you how to include one in your page.

Mad Dog's hit-counter: .
The most popular frickin' website on the web!