)
Figure 53.7. An unordered list in HTML.
| Previous | Table of Contents | Next |
HTML lets you use a few different formats of lists, such as ordered, numbered, labeled, and bulleted. The lists are surrounded by tags such as <OL> and </OL> (for ordered list) or <MENU> and </MENU> (for menus). Each item in the list has its own tag <LI> or something similar to separate it from other items. There are a few special types of list tags for glossaries and similar purposes, but we’ll ignore them for the purposes of this HTML overview.
Here’s an example of a simple list using the <UL> tags for unordered lists:
<HTML> <HEAD> <TITLE> This is my Web Page! Welcome! </TITLE></HEAD> <BODY> <H1> This is a list of some books I have written. </H1> Here are the books I wrote on last summer’s vacation. <UL> <LI> Mosquitos Bug me <LI> Fun with Bears <LI> What to eat when you have no food <LI> Why is it raining on my vacation? <LI> Getting lost in three easy lessons </UL> </BODY> </HTML>
An unordered list is like a normal list, except it has bullets and is not marked by any special numbering scheme. This code is shown in a browser in Figure 53.7, where you can see the way the bullets line up and the list is presented.
Figure 53.7. An unordered list in HTML.
The same code could be written with <OL> and </OL> tags for an ordered list. An ordered list has numbers in front of them, as shown in Figure 53.8. This is the same code as shown above, except we changed <UL> tags to <OL> tags.
)
Figure 53.8. An ordered list uses numbers instead of bullets.
Character tags can be used to change the appearance of text on the screen. There are a few character tags in HTML, including styles (such as italics, boldface, and so on) and logical (which indicate emphasis, code, or other types of text). Forcing character type changes with style tags is usually not a good idea since different browsers may not present the text the way you want to. However, you can use them if you know your server will be used only with a particular type of browser, and you know how the text will look on that browser.
Logical tags are a much better choice as browsers can implement them across platforms. They let the individual browser decide how italics, for example, will look. For that reason, we’ll concentrate on logical tags. There are eight logical tags in general use:
The following code shows an example of the use of some of these styles, and the resultant Web page is shown in Figure 53.9.
)
Figure 53.9. The use of logical character tags changes the way text appears.
<HTML> <HEAD> <TITLE> This is my Web Page! Welcome! </TITLE></HEAD> <BODY> <H1> This is an H1. </H1> <P> This is a sample entry that should be <EM> emphasized using EM</EM> and with the <STRONG> use of Strong </STRONG> emphasis. </P> </P> </BODY> </HTML>
As you can see, this browser (Mosaic) interprets the <EM> tag to be emphasis and the <STRONG> tag to be bold. Most browsers do this conversion, but other tags may look different with other browsers.
If you want to force character tags, you can do so with <B> and </B> for boldface, <I> and </I> for italics, and <TT> and </TT> for typewriter mono-spaced font (code).
A few other tags are useful in general Web page production. The first is the <PRE> tag, which means the contents between the tags are preformatted and should be left alone. Between the <PRE> and </PRE>, whitespace is important. This lets you preformat tables or other content exactly how you want it (subject to wrapping rules in the browser). For example, the code below has a PRE section in it:
){kind=link}
){kind=link}
){kind=link}
<HTML>
<HEAD>
<TITLE> This is my Web Page! Welcome! </TITLE></HEAD>
<BODY>
<H1> This is an H1. </H1>
<P> This is a sample entry that should be <EM> emphasized using EM</EM> and
with the <STRONG> use of Strong </STRONG> emphasis. </P>
<PRE>
This is preformatted
text that should appear
exactly like this in the Browser
</PRE>
</P>
</BODY>
</HTML>
As you can see in Figure 53.10, the spacing of the PRE material is retained, and even the text font is the same as the source (Courier).
)
Figure 53.10. The PRE tags let you preformat text.
Another tag that is handy is simple. The <HR> tag creates a horizontal rule across the page. For example, the code above can be enhanced with a couple of HR tags like this:
){kind=link}
<HTML>
<HEAD>
<TITLE> This is my Web Page! Welcome! </TITLE></HEAD>
<BODY>
<H1> This is an H1. </H1>
<P> This is a sample entry that should be <EM> emphasized using EM</EM> and
with the <STRONG> use of Strong </STRONG> emphasis. </P>
<HR>
<PRE>
This is preformatted
text that should appear
exactly like this in the Browser
</PRE> <HR>
</P>
</BODY>
</HTML>
As you can see in Figure 53.11, two horizontal rules now appear on the page. The exact appearance of the rule may change with browsers, but the overall effect is to put a divider on the page.
)
Figure 53.11. Use HR to draw horizontal rules across the page.
| Previous | Table of Contents | Next |
){kind=link}