More Markup

Time to learn some more markup tags. We will do some easy ones first, then go into tables (which are complex, but very, very useful). Remember the definition of attributes from HTML I? If you don't, go back and take a look so the next few tags will be clear.

META Tag Attributes

To improve the effectiveness of keyword search engines, you should use two forms of the META tag:

The CONTENT attribute for the keywords or description will typically be included in the text that is indexed by the search engines. Some search engines will display the description content, or at least part of it, when a hit is found on that page.

IMG Attributes

There is another attribute that can appear inside the IMG tag, in addition to the SRC, WIDTH, HEIGHT, and ALT attributes that we mentioned in the first class.

The BORDER attribute specifies the width of the border. By default the border around an image is zero, unless the image is inside an HREF anchor tag, and is therefore clickable. Depending on the visual context, you may well want to specify BORDER=0 to suppress the border around a clickable image, or to specify BORDER=1 to put a hairline border around a non-clickable image.

The HEIGHT and WIDTH attributes are especially important. As we mentioned in the first seminar, using HEIGHT and WIDTH in your IMG tags tells the web browser how much space to allocate to a given image on the screen, thereby decreasing load time significantly. It speeds things up because the browser does not have to calculate the size of your image based on the data in the image file itself, and therefore the browser does not have to wait for the image file to be received in order to continue laying out the rest of the text on the page. This is especially important for people using dialup internet access, because most of the text of the web page will be available long before the images are.

You can also stretch and shrink images using these attributes, although the results are often ugly and it always takes extra time to display the image, because the browser system has to compute the color of each pixel, instead of reading it directly out of the graphic file. The examples below are all the same file, but have different HEIGHT and WIDTH attribute values.

Example:

The largest of the images below results from using this tag:

<IMG HEIGHT=118 WIDTH=112 SRC="../gifs/calvinyuck.gif" ALT="Calvin">

The other graphics use smaller values of the WIDTH and HEIGHT attributes.

You may well be able to experiment more rapidly with different possible sizes for an image by using the WIDTH and HEIGHT attributes, but once you have decided on the best size, you should prepare a new version of the image file that is actually that size. Displaying the image at a small size on the screen does not save loading time if the data file is still the same old monster. Good graphic software will be able to do a smoother job of scaling the image than most browsers do when they are presented with an image file that does not match the specified HEIGHT and WIDTH.

HR Attributes

Horizontal Rules have three interesting attributes, ALIGN, WIDTH, and SIZE. ALIGN controls the placement of the rule between the current left and right margins. WIDTH is given as a percentage of the screen width, also between the current left and right margins. SIZE controls the height or thickness of the HR, measured in pixels.

Examples:: <HR ALIGN="RIGHT" SIZE=5 WIDTH="50%">

<HR ALIGN="CENTER" SIZE=3 WIDTH="80%">

<HR ALIGN="LEFT" SIZE=25 WIDTH="10%">

You will notice that sometimes I put quotes around attribute values and sometimes I do not. It really is a matter of personal preference much of the time (most browsers are quite forgiving in this respect), but the rules are simple: if an attribute's value is a text string that contains space characters, it must be enclosed in quotes.

BODY Attributes

The body tag supports several attributes. All of which are pretty annoying and have been over-used, not to say abused, in a big way. One of the most common is the BACKGROUND attribute which allows you to put a background image in your page. Be careful using this, it is easy to make a page that is partially or completely unreadable because of it. In fact, we have seen pages that were readable with one version of Netscape and not with another because the background image displayed almost as dark as the text!

The BODY tag also supports the attributes BGCOLOR, TEXT, LINK, ALINK, and VLINK. Each of these take an RGB color value in hexadecimal notation:

Six characters, each a digit, 0 through 9, or a letter, A through F.
The first pair of characters controls the intensity of Red.
The second pair of characters controls the intensity of Green.
The third pair of characters controls the intensity of Blue.
"FFFFFF" is white, "000000" is black, and any color in which all three pairs are the same (e.g., "B5B5B5") is a neutral shade of gray.

TEXT, LINK, ALINK, and VLINK all specify the color of the text displayed. TEXT is the normal text of the document, LINK colors the links, ALINK colors the active links, and VLINK colors the visited links. Here are examples of their use:

<BODY BACKGROUND="../gifs/my_background.gif">
or
<BODY BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#65AD99">

If you want to do something different from the default, you will probably not encounter any nasty surprises by specifying a background color that is paler than the default gray, especially if you go all the way to white, as we have done with this page. A white background is a good idea for a presentation, since it provides the best available contrast with the black text.

Please do not specify any of the TEXT or LINK colors: your reader has been building up an intuitive feel for the meaning of various colors, based on the default behaviour of his or her browser. When you try to override that, you are discarding the reader's intuition. This is so far from being "user-friendly" that it deserves to be called not merely "user-hostile," but perhaps even "user-vindictive."

Special Characters

You may have noticed that these pages include the display of many characters that constitute HTML tags, complete with angle brackets. How is this done without the browser trying to interpret them as HTML tags?

The trick is to use the ampersand character ("&"), followed by a specific text string, followed by a semicolon. Of course, this means that you have to use the trick to display an ampersand character, too. For example:

"<" will be displayed as "<".
">" will be displayed as ">".
"&" will be displayed as "&".
"©" will be displayed as "©".
" " will be displayed as a non-breaking space.

Browsers are now rarely forgiving if you fail to include the terminating semicolon, so be sure to include it each time. Obviously, you must include the terminal semicolon if you want to display a special character followed by a semicolon; for example:

">;" will be displayed as ">;".

The specific text string may be of the type shown above, with letters (that are case-sensitive), or it may be of the form &#nnn;. The latter results in the browser displaying whatever character is coded on that platform by the numerical value between the pound sign and the semicolon. It is essentially never a good idea to use the &#nnn; codes for specific characters, because you cannot be sure what browser and platform your audience will use to examine the page: either the numerical value (the "nnn" part) is one that calls up the same standard character on Macintosh and on Windows, in which case you should simply have typed that character, or the numerical value specifies different characters on Macintosh and on Windows computers, so if you test it on one, users of the other will see something entirely different!

Block Quotes

The <BLOCKQUOTE> ... </BLOCKQUOTE> tag pair surrounds text that will be indented one step from the existing left and right margins. Some browsers will add white space above or below the block. For example:

This is a blockquote section. It is separated from the text above by a <P> tag and the </BLOCKQUOTE> tag is immediately followed by the <HR> tag.

Nested Lists

I promised in the other class that we would take a look at some nested lists. In the example below, I used <P> tags for clarity. You can jam list items onto adjacent lines, but I suggest that you usually should use the white space of a blank line to separate them, especially if you are nesting them.

Example HTML

<OL> <LI>First item of ordered list. <P> <LI>Second item. <P> <LI>Third item in that ordered list, but it has sub-items: <P> <UL> <LI>First sub-item <LI>Second sub-items of an un-ordered list <LI>Third sub-item, like the others, has its own <LI> tag. </UL> <P> <LI>Fourth and final item in the outer list. </OL>

Example Formatted for Display

First item of ordered list.
Second item.
Third item in that ordered list, but it has sub-items:
- First sub-item
- Second sub-items of an un-ordered list
- Third sub-item, like the others, has its own <LI> tag.
Fourth and final item in the outer list.

Once you are adept at using tables (discussed next) and lists, you can even combine them! With some perseverance you can recreate just about anything using HTML. It is pretty ugly, and can take a lot of time and effort, so I would recommend starting simple. This page will be available so you can always come back to it when you are ready for more advanced formatting.

Tables

Tables are pretty complicated, but they are also versatile and powerful. Mastery of tables will provide you with enhanced control of the way the pages look when viewed with a graphical browser. Before tables came along, web pages all looked very similar, now that tables exist we are seeing many different and pleasing variations in web page design (as well as some unfortunately ugly designs).

There are two situations where you will be tempted to use tables:

To coerce the placement of various items on the screen of a graphical browser.
For the display of inherently tabular data (for example, a sport team's statistics, a campus directory with voice and FAX numbers for each office, etc.).

Care is especially needed for the first situation, because of the substantial risk that the resulting page will end up being very difficult to use for people whose browsing environment differs from your testing environment.

The Preformatted Workaround

The current version of Lynx does not understand tables. Some experimentation may be needed to achieve HTML codes that work effectively in both Lynx and Netscape. One work-around is to use a block of text enclosed within the <PRE> and </PRE> tags. This "Pre-formatted" text is displayed without re-wrapping: all space characters and line breaks are preserved. The text is also forced into a fixed-pitch font for display (usually Courier), so that columns will line up predictably.

Example

first   second   third
    1       2       3
    4       5       6

Is produced by the following HTML code:

<PRE>
first   second   third
    1       2       3
    4       5       6
</PRE>

This is easier to use if you can tell your word processor to display that section of the code in a fixed-pitch font, such as Courier, so that you can get the columns to line up on the first try. Do not use tabs, only space characters, to align the columns.

The Four Basic Table Tags

There are four basic tags that are associated with tables:

<TABLE> and </TABLE> surround the entire section of HTML that you want formatted as a table. Nested inside these tags you will find:
<TR> and </TR> surrounding each individual table row. Nested inside these tags you will find:
<TD> and </TD> surrounding the text for each cell within a row.
<TH> and </TH> surround the text of each cell that functions as a table header. It is really equivalent to having a bold tag built into a <TD> tag.

The Basic Table:

This short section of HTML is annotated to emphasize the correct nesting of the various tags: