|
A Brief Introduction to HTML
Overview
What is HTML?
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 how something is used. Context could be a "heading", a "quotation", a "list of items", etc. This is distinctly different from layout concepts that specify how something is displayed, which would focus on specifics such as "Times Roman 12 point, italicized, indented 1.25cm."
Those of you familiar with TeX (or LaTeX) know it, too, to be based on markup concepts, rather than layout. Word processors on the other hand, and especially desktop publishing systems, are based on layout. This difference is important!
Why Markup instead of Layout?
HTML is based on contextual markup, rather than specific layout because output devices (screens, printers, even voice readers, etc.) differ greatly from one computer to another. If you were to insist on highly specific presentation concepts then the result could look like a fool's work on someone else's computer.
Consider that you were to design pages on a high-end computer system with a display that is 1600 × 1200 pixels in size and you decided that a headline should be nice and big, say about 150 pixels tall. If someone else were to view this headline on a 640 × 480 pixel display it would occupy nearly half the entire screen's height!
I have actually had this happening to me around 1995, where an assistant director insisted that I make certain fonts and images a good bit larger because they seemed too small. This person was viewing our office's pages at 1280 × 1024 resolution, using rather tiny font choices (but that wasn't my doing.) Keep in mind that 640 × 480 was the norm at the time, with some people starting to move to 800 × 600 resolutions. Imagine for a moment the effect, had I actually given in to these demands...<shudder>
Markup languages, such as HTML, solve the problem of disparate output characteristics by specifying the context of items in the presentation, not their characteristics. It is the recipient's system that is then responsible for making the appropriate choices for his or her setup.
Rather than focusing on font names, styles, and sizes, the designer specifies something to be a sub-heading. I might decide that subheadings should be displayed in Triumvirate 20pt and italiziced, while your own preference could be Times Roman 12pt and bold. Keep that in mind when you work with HTML.
HTML Corrupted
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 markup and layout elements into separate sections 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. If you seem to need more than that then the organization of your document may need some serious re-thinking! The size of the font for the text in these headings usually is smaller for each level (but the better browsers can configure this quite flexibly, including font, size, and style); 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. A fully enclosed paragrap <p>...</p> is generally preferred. 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
The following elements are generally well-accepted in HTML and certainly server their function, but you should keep in mind that they are departures from strict markup concepts and could introduce problems for some recipient's environments to accurately reproduce them:
- <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:
- 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.
Be very careful of a font size that is smaller than "-1" from the regular size: text that small is usually rendered as the equivalent of the fine print at the bottom of legal documents: designed to be overlooked.
- 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
html-colors.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>.
- A row has data items. Each data item begins with <TD> and ends with </TD>.
In general, the number of data elements must be the same from one row to the next, as each is aligned with a corresponding one from the other rows to form the columns of the table.
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), and in a more complicated manner it is also possible to extend elements across multiple rows with a ROWSPAN tag, but row-spanning data items get a bit complicated if you have never worked with tables before and we won't go into them any further here.
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).
And lastly, the TABLE can have a CELLPADDING value (in pixels from 0 on up) for space around the data within each cell, and CELLSPACING for the spacing between cells (this ends up making up the width of the lines between cells.
There is a lot more to tables, but this is enough to get you started.
|