Appendixes

Section 3

HTML Syntax and Commands

Section 3 is intended to be a reference tool for users who already know the basics of HTML (see section 2 for a tutorial). Please note that many viewers support tags differently, and some (Netscape in particular) have unique tags that other viewers do not support. Your author has tried to include all of the standard tags, as well as the most common variations he can think of, but your mileage may vary. You've been warned. :-)

Section 3 contents: Document Tags; Formatting Tags; Character Tags; Creating Lists; Creating Tables; Special Characters; Inline Graphics; Hypermedia Links and Anchors

Document Tags

<HTML> . . . </HTML>: Indicates the start and end of HTML code, this is optional (but recommended)
<HEAD> . . . </HEAD>: Document information, items are not displayed as part of the document. There are two widely used parts:

<BASE HREF="URL">
Base URL for a "tree" of documents http://www.dsu.edu/ is an example, this tag is rarely used.

<TITLE> . . . </TITLE>
Title of document, this tag should always be included. Note that you will often see <TITLE> used by itself since most browsers do not require that it be placed inside of <HEAD> tags.
<BODY> . . . </BODY>: Optional tag to indicate the start and end of the documents main body, all of the tags described on the following pages may be used as part of the body.
: Comments are text in the body of a document that will not be displayed by the document viewer.
!--#exec cgi="program name "-->: Used for server-side includes, whereby a program's output is included in the HTML sent to the browser.
The most popular use for server-side includes are counters. To include a counter on your page add the following line in your HTML:

General Document Form: <HTML> <HEAD> <TITLE>General Document Form</TITLE> </HEAD> <BODY> This is the main body of our document that contains all of the great information we are distributing. </BODY> </HTML>: <HTML>; <HEAD>; <TITLE>General Document Form</TITLE>; </HEAD>; <BODY>; This is the main body of our document that contains; all of the great information we are distributing.; </BODY>; </HTML>

Paragraph Formatting Tags

<HR>

Horizontal Ruler

* Additional Netscape attributes:

<SIZE=X WIDTH=XX%>

<P>

Start of a new paragraph

Note that </P> is not required, but is recommended.

Attributes:

<P ALIGN=CENTER>

Used to denote information that should be centered in the user's web browser. (similar to <CENTER>)

If used </P> will end centering.

<BR>

Creates a break, text or graphics following will start on the next line down.

<CENTER> . . . </CENTER>

Centers items (text, images, or buttons)

<P ALIGN=CENTER> will also center information.

<BLOCKQUOTE> . . . </BLOCKQUOTE>

Used for including quotations, text is indented from the left and right.

<PRE> . . . </PRE>

Used to create pre-formatted text

<PRE> will accept one optional attribute defining the width of the text in characters:

<PRE WIDTH=X> . . . </PRE> where X is the width.

Character Tags

<B> . . . </B>: Bold text
<I> . . . </I>: Italics text
<FONT SIZE=X>Item</FONT>: Inline font changes
<Hx> . . . </Hx>: Header Font (x is the size, 1=Largest, 7=Smallest)
<ADDRESS> . . . </ADDRESS>: Usually placed at the end to designate the author or date that the document was last updated.
<BLINK> . . . </BLINK>: Used to create blinking items (text or images); * Thankfully only supported in the Netscape Browser
<TT> . . . </TT>: Fixed width text, like <PRE>, this is good for inline fixed width characters
<STRONG> . . . </STRONG>: Strong emphasis

Creating Lists

Definition Lists

Definition Lists (also called Description Lists) create indented and non-indented text. Note that creating a list of only Non-Indented text is useful when we want to make a list in which the items aren't emphasized. The two parts of a Definition list are Data Terms <DT> and Data Descriptions <DD>

<DL>
<DT>Non-Indented Text
<DD>Indented Text
<DD>More Indented Text
<DT>Non-Indented Text Again
</DL>

Ordered Lists

Ordered Lists can be used for lists of items that you wish numbered. Items in the list are designated with <LI> indicating that they are List Items.

<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>

Unordered Lists

Unordered List is used for lists that shouldn't include numbers, but which you want to be emphasized with bullets. As with ordered lists items in the list are designated with <LI> indicating that they are List Items.

<UL>
<LI>Item One
<LI>Item Two
<LI>Item Three
</UL>

Tables

<TABLE> . . . </TABLE>: Required to denote the beginning and end of a table.
<TR> . . . </TR>: Table Row, options are:

ALIGN (left, right, center)
VALIGN (top, middle, bottom, baseline)
<TH> . . . </TH>: Table Header, options are:

ALIGN (left, right, center)
VALIGN (top, middle, bottom, baseline)
NOWRAP
COLSPAN (default = 1)
ROWSPAN (default = 1)
<TD> . . . </TD>: ..

ALIGN (left, right, center)
VALIGN (top, middle, bottom, baseline)
NOWRAP
COLSPAN (default = 1)
ROWSPAN (default = 1)
<CAPTION> . . . </CAPTION>: Caption for a table, should be places before</TABLE> but not inside table rows or cells. Options:

ALIGN (top, bottom)
BORDER = value

CELLSPACING = value

CELLPADDING = value

WIDTH = vaule (or percent)

Special Characters

There are some characters such as the left angle bracket ( <) that cannot be displayed in HTML using normal methods. For these special characters we must use escape mechanisms. Escape mechanisms are keywords or ASCII codes, followed by a semicolon. When a web browser interprets the escape sequence it will display the character associated with the escape sequence given. Listed below are some common characters and their escape sequences.

Character  Escape Sequence

<          &lt;
>          &gt;
&          &amp;
"          &quot;
é          &eacute;
©          &#169;
®          &#174;
™          &#153;
£          &#163;
§          &#167;
¶          &#182;
•          &#149;

Graphics and Inline Images

General form:

<IMG SRC="filename" ALT="alternate text" ALIGN=top>

The source (SRC) parameter specifies the location and name of the image and is required.

For example:
<IMG SRC="words.gif">
or
<IMG SRC="/gifs/red.gif">

The optional ALT parameter allows a text string to be put in place of the image in text-based viewers that cannot display images.

For example:
<IMG SRC="words.gif" ALT="Words of Wisdom">

The optional ALIGN parameter specifies a relationship to the surrounding text. Arguments to align are TOP MIDDLE LEFT RIGHT and BOTTOM

For example:
<IMG SRC="words.gif" ALIGN=MIDDLE>

An additional attribute is the ISMAP attribute. ISMAP allows images to become image maps in graphical viewers. When the user clicks on an image map the client viewer sends the coordinates of the clicked position to the web server which then sends back the document or information associated with the area the user selected.

Because image maps require special configuration of the server they will not be discussed in this text. ISMAP will accept one attribute: BORDER=0 this will direct viewers not to display a blue line around the image map.

The graphic at the top of DSU's home page is an example of an image map, it's code follows:
<IMG BORDER=0 SRC="/gifs/dsulog1.gif" ALT="DSU logo">

Hypertext Links and Anchors

<A NAME="anchor_name"> . . .</A>: Target Location
<A HREF="#anchor_name"> . . . </A>: Link to the location anchored at anchor_name

External Links (to other documents)

<A HREF="url"> . . . </A>: Link to another document specified by its URL
<A HREF="url#anchor_name"> . . . </A>: Link to an anchor within another document; Note that Images may be linked to other files also. The command; <A HREF="URL"><IMG SRC="image.gif"></A>; will link to the specified URL when the image image.gif is clicked on.; Keep in mind that this is not the same as creating an image map which is explained in the inline images section above.