WebLord

A Brief HTML Reference

HTML stands for Hyper Text Markup Language. A markup language differs from a layout language in that it specifies the context of information, rather than the formatting. Context refers to things such as "heading", "quotation", "list of items", etc. rather than "Times Roman 12 point, italicized, indented 1.25cm."

Those of you familiar with TeX (or LaTeX) know it to be based on markup concepts, rather than layout. Word processors, desktop publishing systems, etc. are based on layout. HTML is based on markup.

The benefit of a markup language is that the actual choices for layout are made by the output system, not the designer. As such, the designer specifies something to be sub-heading. I choose that subheadings are displayed in Triumvirate 18pt and italiziced. Your choice may be Times Roman 20pt and bold. Keep that in mind when you work with HTML.

Various layout elements have crept into the HTML over the last few years. In particular, the style elements for bold, italics, and underlined text, and the ubiquitous font tag. Considering that the World Wide Web has become more and more used for advertising, and many people loath giving up control over the precise appearance of their creation, there is, arguably, value in these additions. I have separated the layout elements into a separate section below to enable you to make your own choices.

HTML Markup Elements

<H1> ... </H1>

The H1 tag (ended by /H1) represents the top-level (primary) heading. Secondary headings use H2 and /H2 to enclose the text. The smallest heading is H6, meaning that you can have headings, sub-headings, sub-sub-headings, plus another three smaller headings within those. That's probably enough for anybody. The size of the font for the text in these headings usually is smaller for each level (but browsers can usually configure this individually); headings H4 or smaller usually employ a fairly small font.

<BLOCKQUOTE> ... </BLOCKQUOTE>

A block quote is usually employed for a quotation. Many browsers tend to indent, and some also italicize the text enclosed by the BLOCKQUOTE.

<P> ... </P>

The paragraph symbol can be used either by itself (without the closing /P) or as an enclosing marker. You can add an ALIGN tag to the paragraph to ask the display system to LEFT, CENTER, or RIGHT align the text. Centering text with such a tag would look like this:

<p align=center>This is centered!</p>

There is also a DIV ("divider") tag that you can use instead. The paragraph tag tends to insert space between successive paragraphs to improve readability. The DIV tag tends to avoid this.

<DL> ... </DL>

A Definition List. This page uses a definition list for the individual tags and their description. The text that defines the item is usually somewhat indented beneath the item being defined. Here is an example of a definition list:

<dl> <dt>Apple
<dd>A juicy, round fruit with edible skin.
<dt>Orange
<dd>A juicy, round fruit with thick, inedible skin.
</dl>

Notice that the DL list uses DT items for the Defined Term, and DD items for the Defined Definition. :-) There are no /DT and /DD tags.

<OL> ... </OL>

An "Ordinal List" (i.e. one that numbers its elements).

<ol> <li>Apple
<li>Orange
</ol>

Notice that the OL list uses LI (list item) for the individual items; there is no /LI tag.

<UL> ... </UL>

An "Unlabeled List" (i.e. one that just puts bullets on its elements).

<ul> <li>Apple
<li>Orange
</ul>

Notice that the UL list also uses LI (list item) for the individual items; there is no /LI tag.

<EM> ... </EM>

Emphasize the enclosed text. Many browsers italicize such text, and some also apply a bold attribute to the font. It makes the text stand out from the surrounding text.

<STRONG> ... </STRONG>

Make the enclosed text stand out strongly. Most browsers apply a bold attribute to the font.

<A> ... </A>

An anchor that can act as a destination for a link or represent a link to lead elsewhere. This is the way that "clickable" areas are defined that link you to another resource, such as another document. Anchors usually have one of two elements: NAME=word or HREF=url. An 'url' that contains a '#' symbol followed by a word will look for an HTML page at that URL and for a named anchor with the given word. Without the '#' symbol, the document is viewed starting at the top. Here are some examples:

<a name=test></a>
If you click on <a href=demo.html#test>this link</a> you'll
end up at the place where the anchor named "test" is defined
in the file "demo.html"

Notice that all anchors need to be "closed" with a corresponding </a>

HTML Layout Elements

<B> ... </B>

The enclosed text is made bold. There also is an <I< for italics, and <U< for underlined text, each with the corresponding ending tags. Stay away from the underline version (it's confusing because most browsers underline anchors).

<font> ... </font>

The font tag is an abomination. But as abominations goes, it has its uses. :-/ The font tag lets you change the display font, the font size, and the font color. Changing these without good reason and with gleeful abandon can make your page look like the illegible scrawlings of a 3-year old child. But there are uses for the font tag:

1. The heading tags (H1 through H6) are designed to start a new heading, sub-section, etc. As such, they are of no use within a paragraph, because they neatly start a new section. The SIZE argument for a FONT tag allows you to increase or decrease the font size (SIZE=+1 to make it one step larger) or set a specific font size (SIZE=7 for the largest, and SIZE=1 for the smallest.) Notice that these absolute size values are not point sizes. An H1 heading usually uses a font of size 7, and many browsers also apply a bold style to the heading. The <font size...> tag gives you more control over the size of the font within paragraphs.

2. The COLOR argument for a FONT tag allows you to change the color of the font. There is a small set of predefined colors (such as black, white, red, green, blue, yellow, ...) but you can also specify a complete RGB ("red-green-blue" triplet) for a specific 24-bit color. It is beyond the scope of this document to explain how to do this, but you will find examples of such colors in the global.wl file. As an example: #ffffff is white, and #000000 is black. There is a good reason why there are always six letters: 3 pairs of 2 digits, one for red, green, and blue. The 2 digits are each a sedecimal ("hexadecimal") from 00 through FF (0-255 in decimal.)

Don't forget the ending /FONT tag.

<TABLE> ... </TABLE>

Tables are probably the most complicated of the HTML tags. It is beyond the scope of this document to fully explore these, but here is what you need to know to get started:

A table begins with <TABLE> and ends with </TABLE>. A table has rows. Each row begins with <TR> and ends with </TR>. Each row in the table has one or more data elements that begin with <TD> and end with </TD>. In general, the number of data elements must be the same from one row to the next, otherwise the layout will be corrected to include blank areas. It is possible to extend data elements to span more than one column (using the COLSPAN tag, as in COLSPAN=3 to span 3 columns). It is also possible to use the ALIGN tag on a data element to signify if the element is to be left, center, or right aligned in its cell. The TABLE tag can be given arguments to ALIGN the entire table (left, center, or right) on the page; you can also specify that the table should have lines drawn around it and between the cells that are 0 or more pixels wide (BORDER=0 for no lines, BORDER=8 for a really ugly, fat set of lines). There is a lot more to tables, but this will get you started.