Additional Topics for your HTML Primer

In this primer, you will see how to use Horizontal Rules, various types of Lists, and inline Images.

The Horizontal Rule

The Horizontal Rule element creates a horizontal line separating two sections of text. In graphical browsers it is a sharp line, but text browsers, such as Lynx, have to resort to a sequence of hyphens "-" or similar characters.

To create a Horizontal Rule, put <HR> where you wish the line to be in your document.

Lists

There are three types of lists in HTML: the Unordered List, the Ordered List, and the Dictionary List.

The Unordered List

The Unordered list is the simplest of the list types. Typically, each item in the list is preceded by a bullet or box in graphical browsers, or some character, often an asterisk, in text browsers.

To create an unordered list, start it with <UL> and put </UL> at the end of where you want the list to be. This marks the area included in the list. Now, each region between these two tags and preceded by a <LI> is a new List Item and would be marked somehow, usually being preceded by a bullet or asterisk.

For example, a list of the days of the week would look like:

<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
<LI>Saturday
<LI>Sunday
</UL>

And would be shown by your browser as:

Within each list entry, you can use other HTML elements, such as bold, italics, and line break, to create better looking lists. You can even nest new lists within the current list, but if you choose to do this, be very careful to check the placement of the opening and closing elements of all the lists.

The Ordered List

The Ordered list is very similar to the unordered list, but instead of a bullet or asterisk preceding each item, the items in an ordered list have a definite order and are preceded by numbers or letters to show that order. The structure of the ordered list is exactly the same as the unordered list, except that you use <OL> to mark the beginning and </OL> to mark the end of the list.

For example, an ordered list of the months of the year would look like:

<OL>
<LI>January
<LI>February
<LI>March
<LI>April
<LI>May
<LI>June
<LI>July
<LI>August
<LI>September
<LI>October
<LI>November
<LI>December
</OL>

And would be shown by your browser as:

  1. January
  2. February
  3. March
  4. April
  5. May
  6. June
  7. July
  8. August
  9. September
  10. October
  11. November
  12. December

The Dictionary List

The Dictionary list is the third and most complicated of the list types. As the name suggests, the dictionary list was created to be used in applications where there would be a series of items, each with further information. A dictionary list is started with <DL> and ended with </DL>. Each entry is made up of up to two tags. The primary one is the Dictionary Term tag <DT>. The secondary part of the entry is the Dictionary Description tag <DD>. The Description sections are usually represented as indented from the Term Sections.

For example, a well known song from The Sound of Music might be represented as:

<DL>
<DT>Do
<DD>A deer, a female deer
<DT>Re
<DD>A drop of golden sun
<DT>Mi
<DD>A name, I call myself
<DT>Fa
<DD>A long, long way to run
<DT>So
<DD>A needle pulling thread
<DT>La
<DD>A note to follow so
<DT>Ti
<DD>I drink with jam and bread
</DL>

And would be shown by your browser as:

Do
A deer, a female deer
Re
A drop of golden sun
Mi
A name, I call myself
Fa
A long, long way to run
So
A needle pulling thread
La
A note to follow so
Ti
I drink with jam and bread

Inline Images

The ability to include images in HTML pages gives the Web much of the impact that it has. The format for including an image is <IMG SRC="imagepath" ALT="alttext">, where imagepath is replaced with the name or URL of the image, and alttext is the text to be displayed on browsers that are not capable of displaying images. If you wish, alttext can be empty, but that often looks much better than the default method of denoting images some text browsers use.

One thing to keep in mind when including images is how long they will take to load. Many people access the Web through a 14.4k modem, or even slower. Even with a direct internet connection, very large images can take quite a while to be transfered in full. A good guideline for your images is to keep icons under 2k, and keep other images under 25k whenever possible.

For example, if you wished to include a picture of a balloon that you have called balloon.gif, with the alternate text "This is a Balloon", you would do:

<IMG SRC="balloon.gif" ALT="This is a Balloon">

If you did not want any alternate text, you would:

<IMG SRC="balloon.gif" ALT="">

And, if you did not care about the alternate text, you could simply:

<IMG SRC="balloon.gif">

Up to the Primer Lesson List.
Back to the previous lesson.
Return to the Pegasus home page.