HTML has other structures apart from paragraphs and section heads. In this part, we're going to look at lists, links and visual effects.
HTML defines three main kinds of list: ordered, discursive.
This is an ordered list:
<ol> <li>with an item 1,</li> <li>an item 2,</li> <li>an item 3 and so on</li> </ol>Notice that the whole ordered list is enclosed in
</ol>tags and that each list item within the list goes in
</li>tags. You can have a list within a list, but the numbering/lettering scheme is up to the browser (client): you can't affect how it numbers or letters the items.
An unordered list has bullets instead of numbers: you can use this for lists where the sequence of items is not important:
<ul> <li>2lb (4 cups) sugar</li> <li>8oz (8 squares) dark chocolate</li> <li>1/2pt (8 fl.oz) evaporated milk</li> <li>2oz (1 stick) butter</li> </ul>but you still use
</li>tags for the list items. This makes it easy to change the kind of list later: just swap
A list can go inside a paragraph, or between paragraphs. In theory you can also have a paragraph inside a list (ie between two list items):
<ul> <li>Here's the first item</li> <p>And a second paragraph belonging to the same item, so there's no bullet or number on it.</p> <li>Then comes another item</li> </ul>produces
And a second paragraph belonging to the same item, so there's no bullet or number on it.
Ordered and unordered lists can have an attribute of
compact which most browsers interpret as meaning the list
items will be short, so the space between items is reduced. Attributes
go inside the angle brackets after the tag name:
compact> for example, would produce
Discursive lists are designed to handle cases where each list item
needs some paragraphs of explanation. The whole list is surrounded
</dl> tags, and each
item is given in
tags (for discursive topic). Each
</dt> can then be
followed by one or more paragraphs, each surrounded with
discussion) tags, so
<dl> <dt>Managerial grades</dt> <dd>Senior and junior managers are expected to dress in conventional blue suits during office hours, especially while meeting clients.</dd> <dd>Any departure from this norm will be taken very seriously.</dd> <dt>Salaried staff below managerial level</dt> <dd>Employees must dress neatly but need not wear suits. Unusual or extravagant clothing is inappropriate to the position of these employees within the company.</dd> <dd>When meeting clients, suits <em>must</em> be worn.</dd> <dt>Programmers and HTML hacks</dt> <dd>Plebs like these can wear anything they want, your ever-loving and paternalistic company couldn't care less,</dd> <dd>In any case, we depend on them so much to keep our systems running that we'll make any exception they insist on.</dd> </dl>
The original HTML also defined
</dir> lists, but these
will be dropped in the frozen version as they have the same effect as
<ul>. They may be resurrected in HTML+ with slightly
Links are the slick bit about W3's hypertext. Click on a highlighted word or phrase and it retrieves a file related to the word or phrase. BUT...you as the author have to give it the right information about what file to retrieve, but it can be almost anything which is available from almost any server on the Internet. Not just another W3 hypertext file, but information available through Gopher, WAIS, Usenet news, anonymous ftp, telnet, finger and other more specific services.
The hypertext link tag is called anchor
<a...>) because it can act both as
a jumping-off point and as a target or another link to aim at. The
file or service specification you give in quotes is called the
Universal Resource Locator or URL for short.
surround the text you want to highlight with the
<a href="..."> tag in the
<a href="scheme://host/dir/subdir/filename">text</a>where the URL in quotes is made up of:
<a href="http://www.w3.org/hypertext/WWW/TheProject.html">WorldWideWeb</a> <a href="gopher://sunic.sunet.se/">Gopher</a> <a href="telnet://lamda.parc.xerox.com:8888">Telnet</a>
There are a few exceptions and additions:
There are some other attributes defined in HTML for the anchor tag which are mostly unused: rel, rev, urn, title, methods.
Use the form of the tag:
You can combine both in the same tag:
We've seen a lot of stuff about structure: here's how to add changes to visual appearance like different type styles. Bear in mind that these may only be obvious if you have a graphical client (browser) like Mosaic, Cello or Emacs which can use different type styles. Plain-terminals cannot, so browsers like Lynx and WWW simulate the changes by using underscores or asterisks around the text.
There are two main kinds of emphasis:
<em>this</em>to get this;
<strong>this</strong>to get this.
<u>for underlining, but this is not widely used.
<i>...</i>to get italics and
<b>...</b>to get bold.
There are several ways of showing fixed-width (typewriter) type, useful if your files refer to computer documentation, or if you need aligned columns (the original HTML has no specification for tables: HTML+ may introduce this). Don't forget that users on plain terminals only get typewriter-style letters anyway, so they won't be able to see any difference.
<code>...</code>to get fixed-width characters like `
cd /; rm -rf *', but if you want to include the less-than and greater-than characters (as in these examples), you have to use the character entities
>- how to actually display the `
<' itself is left as an exercise to the reader :-)
<xmp>...</xmp>tags to get fixed-width characters in the same way, but on a line to themselves (remember that linebreaks normally get swallowed up as if they were spaces). This lets you quote
<xmp>you can include the less-than and greater-than characters in this tag without having to use
<pre>...</pre>tags. Here, you can have many lines and the linebreaks and blank lines will be honored:
Results of the 2.30 at Fairyhouse 1st WorldWideWeb 2/1 on fav 2nd Gopher's Delight 100/1 3rd Acrobat 500/1 7 ran, Word Perfect (6) fell at the first fence.This also allows font changes like italics and bold to be honored within the preformatted display, so you do need to use
>if you want less-thans and greater-thans;
<listing>...</listing>tags, or use HTML's mechanism for including external files, which is explained in Part III. Angle brackets are honored as well as linebreaks and all spacing, so the file can contain any characters you wish;
<kbd>...</kbd>like this, and for individual keys there is
If none of these suits your purpose, single words and short phrases
<tt>...</tt> to get teletype
There are a few new tags, undefined in HTML, which are useful and will likely be included in HTML+. These are empty tags - they don't have matching end-tags:
you find you have to force a line-break at a specific point in your
text, there is an undeclared tag
<br> to do
There was one just after the word `this' just now. It will likely be defined properly in HTML+.
You can get a horizontal rule
non-breaking space is useful to prevent a browser making a linebreak
at a particular point: insert
words, leaving no other space.
The original HTML also defines the following four tags:
<samp>...</samp>to identify sample text like this (it may look like typewriter text);
<var>...</var>for variants like this;
<dfn>...</dfn>to identify definitions the first time they occur; and
<cite>...</cite>to deal with short citations like Goldfarb C, `The SGML Handbook', OUP 1990, 0-19-853737-9.
By now you should be able to enhance your simple document with lists, links and changes in appearance. In the next part we'll look at the remaining features of HTML like block text, some things not yet implemented like mathematics and tables, and then go on to the inclusion of files and images and a new feature of HTML+, form-filling.