Introduction to Internet Resources and Services

Spring '99
#43405 (Tue)
#43400 (Thu)

Class Notes: HTML Authoring

The icon marks items that are frequently overlooked, with unhappy consequences.

A companion page illustrates the tags discussed here.

Hypertext Markup Language (HTML)

HTML is a Document Type Definition (DTD) for the Standardized General Markup Language (SGML).
HTML describes document structure, not document appearance.
A recipe for agony: forget about structure and just try to make it look good on your browser.
Correct HTML ensures your document continues to look great:
- with different browsers (Netscape, IE, Opera, etc.).
- under different conditions (window size, color depth, etc.).
- on unexpected platforms (Lynx, WebTV, Palm, car dashboard, etc.).
- in the future (HTML 3.2, HTML 4, and beyond).
HTML document are plain text files.
- We will use Windows Notepad or Mac Simple Text to create documents.
- Save with .html or .htm filetype to ensure system recognizes document as HTML.
- The browser can view local files.

HTML Tags and Markup

Markup indicated as tags: <P>
Tags are case insensitive: <P> and <p> mean the same thing.
Most tags act as containers: <P>Hello world!</P>
Whitespace (space, tab, newline) is collapsed.
Some tags allow parameters: <P ALIGN=center>
Parameter values that contain special characters (characters other than letters, digits, hyphens, or periods) must be quoted: <A HREF="http://www.gslis.utexas.edu/~lis341/">

International characters and reserved characters may be represented with character entities.

	&egrave;	|è|
	&ntilde;	|ñ|
	&copy;		|©|
	&lt;		|<|
	&gt;		|>|
	&amp;		|&|
	&nbsp;		| |

Comments can be helpful:

HTML 3.2 Document Template

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
	<HTML>
	<HEAD>
	<TITLE>document title</TITLE>
	</HEAD>
	<BODY>
	   .
	   .
	document body
	   .
	   .
	</BODY>
	</HTML>

The HTML 3.2 DTD is required for all class assignments.
The <HEAD> is document meta-information.
The <TITLE> generally appears in the browser title bar.
The <BODY> is the document content.

Paragraphs

Example: <P>Hello world!</P>
Paragraph is a container, but closing tag is implied.
Accepts parameter: ALIGN=(left,right,center)
<P><P><P> won't create space. Even worse, you are falling into the "describing document layout" trap.

Document Headings

Document headings at six levels: <H1> thru <H6>
Example: <H1>My First Web Page</H1>
Headings are a container; don't forget closing tag.
Accepts parameter: ALIGN=(left,right,center)
Do not use headings as a text effect.

Properly structured headings will form an outline of the document.

-- HTML --			-- Outline --
<H1>The Title</H1>		The Title
<H2>Chapter One</H2>		I.  Chapter One
<H2>Chapter Two</H2>		II. Chapter Two
<H3>First Section</H3>		    A.  First Section
<H3>Second Section</H3>		    B.  Second Section
<H4>Typical Case</H4>		        1.  Typical Case
<H4>Special Case</H4>		        2.  Special Case
<H3>Third Section</H3>		    C.  Third Section

Is <P> required after a heading? Only for the "strict" DTD, but it's good style to do so.

Divisions

Divides sections of the document: <DIV> ... </DIV>
Accepts parameter: ALIGN=(left,right,center)
Gets more interesting with cascading style sheets (CSS).
The <CENTER> tag is evil. It conveys no information about document structure.

Text Styles

Logical Style - Describes what the text is, and browser formats appropriately.

Emphasis hello world <EM>hello world</EM>

Stronger Emphasis hello world <STRONG>hello world</STRONG>

Computer Code hello world <CODE>hello world</CODE>

(Sample) Computer Output hello world <SAMP>hello world</SAMP>

Computer (Keyboard) Input hello world <KBD>hello world</KBD>

Variable Name hello world <VAR>hello world</VAR>

Text Citation hello world <CITE>hello world</CITE>

Physical Style - Specifies how the text should be displayed.

Italic hello world <I>hello world</I>

Bold hello world <B>hello world</B>

Monospace (typewriter text) hello world <TT>hello world</TT>
What does <I> mean on a display that doesn't do italics? Or on a text-to-speech machine?
There are many more. (superscript, strikeout, etc.)
Be sure to nest containers properly.

wrong <B><I>zounds!</B></I>

right <B><I>zounds!</I></B>

Lists

Ordered List: <OL> <LI> ... </OL>
Unordered List: <UL> <LI> ... </UL>
Dictionary List: <DL> <DT> ... <DD> ... </DL>
Closing tag of list item container is safely implied.

Miscellaneous Markups

Block Quote: <BLOCKQUOTE> ... </BLOCKQUOTE>
Preformatted Text: <PRE> ... </PRE>
Line Break: <BR>
Horizontal Rule: <HR>

Anchors

Anchors create hyperlinks: <A HREF="location"> ... </A>
The location almost always contains characters that must be quoted.
Location may be: complete URL, full pathname or relative pathname.
Directories map to a default document, often index.html.
The slash at the end of directory names is required.

Images

Images may be inserted into documents: <IMG SRC="location">
Alternate description parameter: ALT="text"
Every image should have ALT text -- even if empty.
Example: <IMG SRC="logo.gif" ALT="company logo">
Vertical alignment parameter: ALIGN=(top,middle,bottom)
Horizontal alignment parameter: ALIGN=(left,right)
Text wrap can be stopped: <BR CLEAR=(left,right,both)>
Space may be reserved: HEIGHT=pixels WIDTH=pixels
Using dimensions to scale images often is a bad idea.

Putting it all together:

	<IMG SRC="graphics/small-caution.gif"
		ALT="[CAUTION!]"
		WIDTH=15 HEIGHT=15>

Image and Anchor Locations

The target URL of an <A> or <IMG> is calculated with respect to the current base URL.
The base URL typically is that of the current document.
The base URL may be specified by including <BASE HREF="location"> in <HEAD>.

The anchor <A HREF="./"> is a clever trick to link to the default document.

Base URL HREF="location" Target URL

scheme://host/directory/file scheme://host/directory/file scheme://host/directory/file

scheme://host/directory/file /full/pathname scheme://host/full/pathname

scheme://host/directory/file relative/pathname scheme://host/directory/relative/pathname

Base URL	HREF="location"	Target URL
scheme://host/directory/file	scheme://host/directory/file	scheme://host/directory/file
scheme://host/directory/file	/full/pathname	scheme://host/full/pathname
scheme://host/directory/file	relative/pathname	scheme://host/directory/relative/pathname

Body Parameters

background color: BGCOLOR=color
background image: BACKGROUND=location
text color: TEXT=color
hyperlink color: LINK=color
visited link color: VLINK=color
active link color: ALINK=color

Example:

	<BODY BGCOLOR="#FFFFFF"
		TEXT="#000000"
		LINK="#5500EE"
		VLINK="#551A8B"
		ALINK="#FF0000">

Font Modifications

Font parameters may be modified: <FONT> ... </FONT>
The <FONT> tag is just as evil as <CENTER>, but there is no (HTML 3.2) alternative.
The user has configured their browser for maximum readability. Your <FONT> changes will reduce readibility.
Modify size parameter: SIZE=value
Size value may be absolute (SIZE=4) or relative (SIZE="+1").
Modify color parameter: COLOR=color
Modify typeface parameter: FACE="selection[,...]"
FACE is a non-standard browser extension.
Available typefaces are system dependent.