HTML Section Four



In this section, we'll be looking at

  1. Ordered Lists
  2. Description Lists
  3. Using background colors
  4. Using background images

Unordered and Ordered Lists
Lists are slightly more complex in format than what we've covered. The list itself is defined by a start and stop tag, then each list item is defined separately. The format is:

<UL>
<LI>First item
<LI>Second item
<LI>Third item
</UL>

Which will get you this:

  • First item
  • Second item
  • Third item

Replacing the <UL> with an <ol> will get you this:

  1. First item
  2. Second item
  3. Third item

Description Lists
This type of list is usually used for glossary or list of items with associated descriptions. All of these instructional pages were created using description lists. They are started and stopped with the same format as above, using the <DL> to begin the list, and a </DL> to close it, but has the addition of two new tags, called data terms and date description. An example:

<DL>
<DT>First Data Term
<DD>Data Description
<DT>Second Data Term
<DD>Data Desctiption
</DL>

Which looks like the following:

First Data Term
Data Description
Second Data Term
Data Description


Background colors
You can assign a background color to your page by using a hexadecimal value. The value is made up of a mathematical combination of six alphanumeric fields. Don't worry about it; go to a hexadecimal conversion chart to figure out the right combination. This page has a white background by the insertion of an extra part in the <BODY> tag:

<BODY BGCOLOR="#ffffff">
Background Images
Images can be used in the background of a web page to create a background color or texture. The browser "tiles" the image. There are good images for this, and there are bad ones.

An example of a badly used image as a background.
An example of a better image to use.

Insert an image as a background with the following addition made to the <BODY> tag:

<BODY BACKGROUND="image.jpg">

There are many libraries of background images you can use. Do an Internet search for one, or go to the Glasgow University's library of background images.



ASSIGNMENT: Add the above tags to your page.
  1. Add an ordered, unordered, and description list to your page
  2. Add a background color to your page
  3. Find a good background image and load it on your page



Move on to KUMC's Tables Module

(note: no back navigation to Skyways training modules; manual back-pedalling required)

REVIEW
Introduction | Section Two | Section Three
Section Four | Design Considerations