LRCuesta

HTML Session #4

HTML Session #4

Three Types of HTML Lists

March 16, 2009 - Procurement Division

Wall to wall text is unreadable. Readers can understand text much better and faster if it is illustrated with bullets. HTML has 3 types of lists: Unordered, Ordered, and Definition.

Metaphor: You have to fix something around the house. You know what the result should look like. You grab a tool from your tool chest that will give you the result you want. You use the tool correctly until you get the result you want. HTML offers you 3 different bullet types. Each has a different purpose.

I. Unordered Lists: <ul> </ul>

Three conventional HTML markers for three HTML levels: (Disc is default)

Disc (), circle (), square ().

(This is the nested default sequence.) Each marker is called by the <li> Tag.

For example (one top level list):

<ul>
<li> One item on the list
<li> Another item on the list
<li> Another item on the list
</ul>

Cascading Style Sheets:

Through Cascading Style Sheets you could indicate a 16 by 16 pixel graphic or smaller instead of the conventional HTML marker.

For example in the <head> tag:

.arrow {list-style-image:url(images/check3.gif)}

Class=”arrow” will go in the <ul> tag. Instead of a disc, you will get an arrow.

Nested 2 levels sample:

<ul>
<li> One item in the main list
<ul>
<li>A nested item
</ul>
<li> Second item in the main list
</ul>

II. Ordered Lists: <ol> </ol>

Five conventional HTML markers for five HTML levels: (Decimal is default)

Upper-alpha (A), lower-alpha(a), upper-roman(IV), lower-roman(iv), decimal (4).

(There is no nested default sequence.) Each marker is called by the <li> Tag.

For example (one top level list):

<ol>
<li> One item on the list
<li> Another item on the list
<li> Another item on the list
</ol>

Cascading Style Sheets:

Through Cascading Style Sheets you could indicate which of the 5 ordered markers you will use on an ordered list.

For example in the <head> tag:

.big-alpha {list-style-type:upper-alpha;}
.lil-alpha {list-style-type:lower-alpha;}
.big-roman {list-style-type:upper-roman;}
.lil-roman {list-style-type:lower-roman;}]
.decimal {list-style-type:decimal;}

Class=”lil-roman” will go in the <ol> tag. Instead of a “1”, you will get a “i”.

Start numbering but not at “1”:

You might want to start the numbering sequence with something other than the first number or first letter of the sequence. In that case, add a start number (not a letter) to the <ol> tag:

For example in the body: / The result would be:
<ol class=”lil-roman” start=”6”> / vi. the next item
<ol class=”lil-alpha” start=”6”> / f. the next item

III. Definition Lists: <dl> </dl>

If you have a glossary of terms and their definitions, what you need is a definition list. Notice the inherent and uniform indentation in the sample below.

Description of tags:

<dl> tag opens a definition list.

<dt> tag states a term that will be described.

<dd> tag offers an explanation of a term.

You may have as many <dd>s for any <dt>.

For example in the body:

<dl> Central California Cities
<dt> Sacramento</dt>
<dd>Capitol of the state</dd>
<dd>City of trees</dd>
<dt> Galt</dt>
<dd>Found in no map</dd>
<dd>Dairy farm charm</dd>
<dt> Roseville</dt>
<dd>Expensive malls</dd>
<dd>Great railroad center</dd>
</dl>

The result is the following (with a little help from some <div>s and <b>s:

Central California Cities
Sacramento
Capitol of the state
City of trees
Galt
Found in no map
Dairy farm charm
Roseville
Expensive malls
Great railroad center

HTML Session #4

Three Types of HTML Lists

March 16, 2009 - Procurement Division

Drill

Look at the hand out.

  • Create an HTML web page with the 4 fundamental tags (html, head, title, body) properly opened and closed.
  • You will need:<div>, <b>, <h2>, <hr />, and some styles.
  • For the lists you will need: <ul>, <li>, <ol>, <dl>, <dt>, <dd>.
  • The anchor needs the following style in the <head> tag and nothing else:
    a:link {background-color:#ffffff; color:#ff0000; text-decoration:underline;}
    a:hover {background-color:#ffff00; color:#0000ff; text-decoration:none;}
  • You will need to find a couple of bullets.
    Go to Google, search for “bullets +free”.
    Right-click on the bullet you like.
    Store it in a folder named “images”, not on the desktop!
  • The assignment is to recreate the page that I handed you.
    No editing or shortcuts.

ul style=”list-style-image:url(images/check3.gif)”>
<li>

<li>

<li>

</ul>

LRCuesta HTMLSession4.doc 10/29/2018 1