$next$ $up$ $previous$
Next: About this document Up: No Title Previous: No Title

Outline of HTML Concepts

A. Overview

HTML means HyperText Markup Language.
An HTML file name usually has an extension .html or .htm
An HTML file is more like a suggestion than an order. Browsers fit the page into the window the best they can.
Browsers are forgiving, ignoring things they don't understand or that seem to be wrong, and making do if expected controls are missing.
Our HTML template file is in h/template.html .
HTML has gone through various versions, with features being added. The current version is HTML 4.0.

B. Tags

HTML controls are in the form of ``tags''.
Some tags are in pairs, for example <H1> ...... </H1> for a big heading. Here <H1> is the opening tag and </H1> is the closing tag. Notice that the closing tag has a forward slash!
Other tags occur alone, for example <BR> to force a line break.
Don't put extra spaces in tags! (Not < H1 >) However, as you will see, opening tags can have ``attributes'' with a space before, for example, <H1 ALIGN="CENTER"> (although this particular attribute is getting obsolete). There can be multiple attributes.
Tag identifiers can be written with upper case or lower case; it doesn't matter. One book recommends always using upper case. That's a good idea for tags that you want to be conspicuous to anyone reading the HTML (instead of viewing the page with a browser), but many people use lower case for less important tags like <br> .
Pairs of tags can be ``nested'', one inside the other.
Paragraphing is controlled by tags only. Blank lines are ignored. So is extra white space between words of text.

C. Page-structure tags

A page is supposed to have a certain basic structure, consisting first of header information that identifies the page and then of the ``body'' of the page. Most browsers don't complain if structure information is missing, but in that case your page may not be handled correctly by search engines, etc.

The basic page structure looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4/0 Final//EN">
<HTML>
<HEAD>
<TITLE> some meaningful title, not displayed </TITLE>
</HEAD>
<BODY>
... This is where your displayed information goes.
</BODY>
</HTML>

The first line is a recent requirement so that a browser can tell the version of HTML used. Notice the nested pairs of tags. It would be equivalent to use

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4/0 Final//EN"> <HTML>
<HEAD> <TITLE> some meaningful title, not displayed</TITLE>
</HEAD> <BODY> ... This is where your displayed information goes.
 </BODY> </HTML>

but of course this isn't too clear.

D. Some handy tags

<H1> ... </H1> the largest heading, as mentioned above. A heading goes on its own line automatically.
<H2> ... </H2> next largest heading (and so on)
<P> ... </P> a paragraph. (It's not too terrible to omit the closing tag.)
<B> ... </B> boldface
<I> ... </I> italics. (What about bold italics?)
<HR> horizontal rule (a line across the page)
 an HTML comment (although this is also used for some recent controls that wouldn't make sense to older browsers).
<BR> force a line break (since newlines don't)
<IMG SRC="whatever.gif" ALT="[WHATEVER]"> insert an image and also say what to show if the user has the browser set not to display images

An ``ordered list'' (numbered list) with ``list items'': <OL> <LI> your 1st item ... <LI> your 2nd item ... <LI> your 3rd item ... </OL>

An unordered list (bulleted list) with list items: <UL> <LI> your 1st item ... <LI> your 2nd item ... <LI> your 3rd item ... </UL>

So UL does not mean to underline. UL replaces an earlier tag MENU, which is now ``deprecated'' (discouraged).

In addition, if you want to show a symbol such as < or > that is involved in the syntax of HTML tags, there are special control sequences for that.

E. Colors

To set the background color, you can use an attribute as part of the <BODY> opening tag that is part of the structure discussed above.

<BODY BGCOLOR="#00FF00">

The color is expressed in ``RGB'' (Red-Green-Blue) by six hexadecimal digits. The first two tell how much red to use (00 to FF), the next two how much green, and the last two how much blue. All zeros is black, all F's is white. The example above will be pure green. For a sample of colors, see the class home page under ``links'' and then look under ``HTML''.

It is also possible to set the color of text, etc.

F. Anchors (links)

Anchors are used to give links to other pages. The basic form is <A> .... </A>, but most of what you will notice is the attribute that gives the reference inside the opening tag. The text between is the part that the user clicks on, usually appearing underlined on the screen. An example:

<A HREF="http://www.math.ucla.edu/~baker/40/index.html"> Our
class home page </A>

BE SURE TO PUT IN THE SECOND DOUBLE QUOTE AND THE CLOSING TAG </A>. If you forget either one it will mess up quite a bit of your page.

If a page is referring to another page in the same directory or lower, only the relevant part of the file name is needed.

(It is also possible to have an anchor refer to a named location in the middle of a file instead of to the beginning of the file; we'll discuss that later.)

G. Other capabilities

HTML now handles tables, forms, frames (independent sub-pages), and other things. Also, the style of the display once was controlled by attributes, but now the idea is to use ``style sheets''. Of course, old versions of browsers may not understand all of these.

$next$ $up$ $previous$
Next: About this document Up: No Title Previous: No Title

Kirby A. Baker
Fri Jan 29 13:40:38 PST 1999