Simple Tags, part 2--Colors, Lists, Images, Links, and Tables

Simple HTML Tags, Part Two

(Click this link to visit the section on Links!)
[used to demonstrate intra-page linking, discussed below]

Colors and Body Attributes

The body tag in this document contains a full complement of attributes that set colors for text, linked text, linked text that is being clicked on, and a link that has been previously visited.

The colors are specified as hexadecimal numbers (that is, base 16), a numbering system where the digits are, in order, 0 1 2 3 4 5 6 7 8 9 A B C D E F (that is, A=10, B=11, and so on to F, which equals 15).

When you specify a color with HTML using hexadecimal numbers, you always begin with a # (to indicate that it is a hexadecimal number) followed by exactly 6 digits.

The six-digit hexadecimal number can be thought of as three two-digit hexadecimal numbers squished together, specifying, from left to right, the red, the green, and the blue components that makes up the color (this is called RGB color, for Red, Green, Blue). In other words, the first two digits represent the red component, where 00 means no red, and FF means the brightest possible red (FF is equivalent to the decimal number 255). The second two digits represent the green component, and the third two digits represent the blue component.

BGCOLOR, is the page's background color, and here it is set to white (Red=FF, Green=FF, and Blue=FF).
TEXT is the normal color of text on the page, and here it is set to a darkish violet color (Red=99, Green=00, and Blue=99). Note that 99 is equivalent to decimal 153; since the brightest possible color component is 255, 153 is slightly more than half-intensity.
LINK is the color of text that is linked; any links on this page will be dark red.
ALINK is the color linked text will have while the mouse is being held down on it; active links will appear as a reddish violet (more red than blue).
VLINK is the color of a link that has been visited recently; visited links on this page will be a dark blue.

Lists: Ordered and Otherwise

In the section above, you saw a bulleted list. This is created with the UL tag (for Unordered List). The UL tag has a corresponding /UL to end the list. Lists are indented, with line breaks between list items. And, not surprisingly, a List Item is marked by an LI and /LI pair of tags.

Another sort of list is the Ordered List, which is created with the OL and /OL tags. Items in an ordered list are also specified with the LI and /LI tags. Ordered lists number each item consecutively, starting from 1 (though you can specify a different starting number with the START attribute [for example, START="21"]).

This is
An example
Of an
Ordered list.

This list
starts with
twenty-one: blackjack!

A very useful type of list for academics is the Definition List. This list is good for presenting terms and definitions (and may also be used for things like annotated bibliographies). The whole list is enclosed by the DL and /DL tag pair. Each item in the list consists of two parts: the Definition Term, and the Definition Description. Thus, you use the DT and /DT pair for, say, a concept to be defined, and the DD and /DD pair for the body of the definition. Note that you can use other style tags inside of a list; the one below uses the CITE tag, and the EMPHASIS tag (both of which usually are represented as italic by Netscape Navigator).

Bureaucracy: a form of enlightened self-interest, if you happen to be part of one; the spawn of Hell, if you happen to be the victim of one.
Smith, John, Dogs of Undeclared War, Kensington Press, Boston, 1999.: Another in a series of cheap thrillers told from the point of view of humanity's most loyal pet.

Displaying Images

Images are displayed with the IMG tag. Unlike many tags, this one doesn't come with a corresponding /IMG tag; it is a self-contained unit. Valid image formats are GIF (Graphic Interchange Format) and JPG (Joint Photographer's Experts Group format). GIF is best for line art or images with just a few distinct colors; JPG is best for photographs.

The IMG tag has a number of attributes:

SRC -- This specifies where to get the image to display. If the image is in the same directory as the HTML, all you need is the file name.
WIDTH -- How many pixels wide the image is. If you specify a number that is different from the image's actual width, the browser will scale the image; it is best not to do this unless you have a good reason. You can omit this tag, but it makes the browser work harder, and can delay how long it takes to display a page, since all processing must stop until the actual image is downloaded.
HEIGHT -- See WIDTH
ALT -- This tag contains a short text caption that will be seen if the user has turned off image display in her browser; it is also good for letting blind people know what the image is.
ALIGN -- Left, right, top, middle, or bottom. Left and right let you put the image in-line with the text and wrap the text around it; top, middle, and bottom refer to how the image aligns vertically with the line of text on which it is placed.
BORDER -- Specified in pixels. Places a border around the image in the same color as the default text color.
HSPACE, VSPACE -- specified in pixels, lets you provide some "air" around the image so the text doesn't butt right up against it.

Links

Links to other documents are created via the A tag, which has a corresponding /A. "A" stands for "anchor," which can be confusing, because it normally is just the opposite of what a real anchor does: clicking an HTML anchor makes you move, not stay put!

The A tag requires at least one attribute, usually the HREF attribute, which specifies the location to which the link goes; for example, <A HREF="http://hctv.humnet.ucla.edu">HCTV - The Streaming Server!</A> will take you to the Real and QuickTime streaming media server.

Another form of the A tag is one that really DOES specify an anchor. This form uses the NAME attribute; e.g. <A NAME="linkstuff"> assigns the name "linkstuff" to a specific location on a page. You can then refer to this name in another anchor tag that uses an HREF to go to that specific place on the page. For example, the <A HREF="#linkstuff"> tag placed at the top of this page links to this section. Note that the A tag that specifies a NAME also requires a closing /A tag.

Tables

Tables are truly wonderful things...they are the set of tags you use to control line length, arrange items, and, generally, bring order to the plain boring flow of text on a page.

Tables begin with the TABLE tag (and end with the corresponding /TABLE, of course).

Tables are composed of rows of cells. A row is specified by the TR tag (and ends with the corresponding /TR tag). A cell in each row is specified by the TD (for "table data") tag, and ends with the /TD tag.

The TD tag can take a number of attributes:

BGCOLOR -- for specifying the background color of a cell; this cell is a pale yellow in color when displayed on screen.
WIDTH -- for specifying the width of a cell. Note that each column in the table will be as wide as the widest cell, so if you want to play it safe, use the WIDTH attribute only in the cells in the first row; also note that if an image in a cell is wider than the specified WIDTH, the cell will expand to accomodate the image.
ALIGN -- to specify the alignment of the text in the cell.

This text should be at the bottom of the cell, centered. You can specify the horizontal and vertical alignment of text within each cell with the ALIGN and VALIGN attributes.

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Note that you can have tables embedded within tables. Note also that the TABLE tag has a BORDER attribute.