Home)
Home)
Ordered Lists | Unordered Lists | Nested Ordered Lists Using CSS | Nested Unordered Lists | Unordered List Using a Marker | Definition Lists | Homework |
There are two types of lists in HTML that use markers: ordered and unordered. Lists may be nested within other lists. A definition list does not use markers.
An ordered list is a numbered list. Its opening and closing tags are <ol> and </ol> respectively. Each item within an ordered list must begin with the list item tag, <li>. The closing tag for list item is </li>. An ordered list can use five pre-defined markers or you can use an image as a marker. The default marker is "1" or Arabic numerals. Without using CSS you can only use the default marker. Other markers can be specified in CSS with the property of "list-style-type" and values of upper-roman, upper-alpha, decimal (Arabic numerals), lower-alpha, and lower-roman. Below is an ordered list on how to change a light bulb without CSS.
The code for the above follows:
<h4><i>Instructions on how to change a light bulb</i></h4> <ol> <li>Turn off the lamp or light fixture.</li> <li>Allow the hot bulb to cool before touching it.</li> <li>Grasp the bulb lightly but firmly and turn counterclockwise until it is released from the socket.</li> <li>Insert a replacement bulb lightly but firmly into the socket, and turn it clockwise until it's snug.</li> <li>Turn the lamp or fixture back on.</li> <li>Dispose the used bulb.</li>
</ol>
Return to Top
Below is a sample unordered list without CSS. The default marker (bullet or disc) is used.
The code for the above follows:
<h4><i>Things you'll need to change a light bulb</i></h4>
<ul>
<li>Lamps </li>
<li>Light Bulbs</li>
</ul>
Return to Top
An alphanumeric outline uses capital Roman numerals for the first level, capital letters for the second level, Arabic numerals for the third level, and lowercase letters for the fourth level. These four levels are supported by HTML. The fifth level is Arabic numerals followed by a right parenthesis. This level is not supported by HTML. You might consider using lower case Roman numerals, which is supported by HTML. If we want to create the following outline, it is necessary to use CSS.
The CSS could be an internal (embedded) style sheet placed in the <head> section of your document. Only the first 3 classes (ol.a, ol.b, ol.c) were used for this outline. The other 5 were put here for completeness. A listing of the entire document follows:
<!DOCTYPE HTML> <html> <head> <title>Nested Ordered Lists Using CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css">
ol.a {list-style-type:upper-roman;}
ol.b {list-style-type:upper-alpha;}
ol.c {list-style-type:decimal;}
ol.d {list-style-type:lower-alpha;}
ol.e {list-style-type:lower-roman;}
ul.f {list-style-type:disc;}
ul.g {list-style-type:circle;}
ul.h {list-style-type:square;}
</style> </head> <body> <h4><i>The Three Kingdoms</i></h4>
<ol class="a">
<li>History
<ol class="b">
<li>Yellow Turban Rebellion</li> <li>Dong Zhuo in power</li>
<li>Rise of Cao Cao</li>
<li>Battle of Red Cliffs
<ol class="c">
<li>Background</li>
<li>Battle</li>
<li>Analysis</li>
<li>Aftermath</li>
<li>Location</li>
<li>Fictionalized Account</li> <li>Cultural Impact</li> </ol>
</li>
<li>Three Emperors</li>
<li>Consolidation</li>
<li>Zhuge Liang's Northern Expeditions</li> <li>Wu and the South</li>
</ol>
</li>
<li>Decline and End of the Three Kingdoms <ol class="b">
<li>Fall of Shu</li>
<li>Fall of Wei</li>
<li>Fall of Wu</li>
</ol>
</li>
<li>Population</li>
<li>Economy</li>
<li>The Three Kingdoms in popular culture</li> </ol> </body> </html>
Return to Top
Unordered lists may also be nested. The default sequence is disc, circle, and square (see example below). To change the default sequence, you need to use CSS (the last 3 classes in the above internal style sheet: ul.f, ul.g, ul.h).
The code for the above follows:
<h4><i>The three most common fruits consumed by Americans</i></h4> <ul>
<li>Apples
<ul>
<li>Delicious Apples
<ul>
<li>Red Delicious Apples</li> <li>Golden Delicious Apples</li> </ul>
</li>
<li>Granny Smith Apples</li>
<li>Fuji Apples</li>
</ul>
</li>
<li>Oranges
<ul>
<li>Common Oranges
<ul>
<li>Valencia</li>
<li>Hamlim</li>
</ul>
</li>
<li>Navel Oranges</li>
<li>Blood Oranges</li>
<li>Acidless oranges</li>
</ul>
</li>
<li>Bananas
<ul>
<li>Manzano Banana</li>
<li>Baby Banana</li>
<li>Burro Banana</li>
<li>Red Banana</li>
<li>Plantain Banana</li>
<li>Cavendish (also called Chiquita) Banana</li> </ul>
</li>
</ul>
Return to Top
Unordered List with an Image as a Marker using CSS
I have used an inline style to achieve the following. You also need to have the image "right.gif" in the same folder as this html document. You may copy this image here 
.
The code for the above follows:
<ul style="list-style-image:url(right.gif);"> <li>this item</li>
<li>that item</li>
</ul>
Return to Top
A definition list starts with <dl>and ends with </dl>. A <dt>...</dt> is the term of the definition. A <dd>...</dd> is the definition description. You can have as many pairs of <dt> <dd> as you like. The code does not require CSS.
The code to achieve the above follows:
<dl>
<dt>Byte</dt>
<dd>A byte is 8 bits (binary digits).</dd> <dt>Googol</dt>
<dd>A googol is 1 followed by 100 zeros.</dd> </dl>
Return to Top
Create the following lists (between the two horizontal rules) by using the <h3> tag for the headings. Save your document as index.html in the homework/hw2 folder.
Return to Top