HTML Code Tutorial
You can Test the simple list Codes online in this: HTML editor
Lists
There are 3 different kinds of lists which can be displayed using HTML. They are Unordered, Ordered and Definition lists.
Note: Items in a list do require a closing tag for w3c compliance. </li>
Unordered Lists
Unordered list:
- The unordered list
- The ordered list
- The definition list
The Code:
<ul type="disc">
<li>The unordered list</li>
<li>The ordered list</li>
<li>The definition list</li>
</ul>
|
Unordered list:
- The unordered list
- The ordered list
- The definition list
The Code:
<ul type="square">
<li>The unordered list</li>
<li>The ordered list</li>
<li>The definition list</li>
</ul>
|
You can Test the simple list Codes online in this: HTML editor
List items in an unordered list are preceded by a bullet. To designate the bullet selection of DISC, SQUARE or CIRCLE older HTML versions use the type attribute.
<ul type="SQUARE"> The default bullet is DISC.
Newer versions of HTML use style sheets to set the bullet style.
Example: list-style : disc or list-style-type : disc.
To eliminate the bullet use the style sheet code: list-style : none or list-style-type : none.
Ordered Lists
Ordered list:
- Write a Business Plan
- Obtain Licensing
- Obtain Financing
The Code:
<ol type="1" start="5">
<li>Write a Business Plan</li>
<li>Obtain Licensing</li>
<li>Obtain Financing</li>
</ol>
|
Ordered list:
- Write a Business Plan
- Obtain Licensing
- Obtain Financing
The Code:
<ol type="a" start="5">
<li>Write a Business Plan</li>
<li>Obtain Licensing</li>
<li>Obtain Financing</li>
</ol>
|
You can Test the simple list Codes online in this: HTML editor
Older HTML versions: The items of an ordered list are preceded by letters or numbers instead of bullets. The choices are integers as 1,2,3....., letters as upper or lower case A,B,C... a,b,c.... and Roman Numerals upper or lower case as I,II,III... i,ii,iii....
The type attribute determines the type. The start attribute is used to define the starting position in a list.
Newer HTML Versions In newer versions of HTML ordered list styles are set using style sheets.
Example: list-style : lower-alpha or list-style-type : integer
Some of the many choices for style or type are: integer, lower-alpha, upper-alpha, lower-roman, upper-roman.
Definition Lists
The definition list is handy for displaying a list of terms and their definitions. The definition <dd> is automatically indented below its associated term <dt>.
Definition list:
- Aardvark
- An anteater. Animal with a very long snout.
- Orangutan
- A monkey with very long arms.
- Zebra
- A pony with stripes.
|
The Code:
<dl>
<dt>Aardvark
<dd>An anteater. Animal with a very long snout.</dd>
<dt>Orangutan
<dd>A monkey with very long arms.</dd>
<dt>Zebra
<dd>A pony with stripes.</dd>
</dl>
|
An easy way to remember which tag goes where: <dt> = Define Term
<dd> = Define Definition
You can Test Code in this HTML editor.
Nesting Lists
Different types of lists can be nested or placed within each other to create sophisticated hierarchical structures.
- Item Ordered List
- Item Ordered List
- Sub Item Unordered List
- Term Definition List
- Definition
- Term Definition List
- Definition
- Sub Item Unordered List
- Sub Item Unordered List
- Item Ordered List
- Item Ordered List
|
- Definition List Term
-
- Items in Definition
- Items in Definition
- Items in Definition
- Items in Definition
- Definition List Term
- Ordered Items in Definition
- Ordered Items in Definition
- Ordered Items in Definition
- Ordered Items in Definition
- Definition List Term
- Definition Normal
|
Tricks With Lists and CSS
Lists can be used to create menus or text site maps for your website.
You could use a list of simple headings and hyperlinks and set them in a structure similar to one of those shown above. Or you could use a combination of hyperlinks and images.
The Style Sheets:
#links ul li a{ font-family: Arial;font-style : normal ;font-size : 12pt; font-weight :bold;text-decoration : none; color :#000000}
#links ul li a:hover{ font-family: Arial;font-style : normal ;font-size : 12pt; font-weight :bold;text-decoration : none; color :#ff0000}
The code:
<div ID="links" STYLE=";border: solid #000 2px; width :250px">
<p STYLE="font-family: Arial;font-style : italic ;font-size : 14pt; font-weight :bold;text-align : left; color :#0000FF">Table of Contents:
<ul style="list-style-image: url(images/heart.gif)">
<li><a href="#toppage">Unordered Lists</a></li>
<li><a href="#ordered">Ordered Lists</a></li>
<li><a href="#definition">Definition Lists</a></li>
<li><a href="#tricks">Tricks With Lists</a></li>
</ul>
</div>
Hover Property
IE7 and Mozilla browsers accept the CSS hover property for list items. This allows you to create some interesting effects when building menus and navigational links.
|
|
If you are using an IE7 or Mozilla browser, the buttons on the left will change color when you hold the mouse cursor over them.
The effect is created by using 2 different buttons.
The second button of a different color is displayed when the hover property is accessed for the list item. There is no confusing javascript - just 2 lines in the style sheet.
|
The HTML code:
<td id="buttons" width="190" align="center" style="background-color: #0060ff; border-right: solid #000000 2px; border-bottom: solid #000000 2px; border-left : solid #97BCF9 1px; border-top : solid #97BCF9 1px"><br>
<!--Edit Links Here-->
<ul>
<li><a href="#toppage">Page Number Two</a></li>
<li><a href="#toppage">Page Number Three</a></li>
<li><a href="#toppage">Page Number Four</a></li>
</ul><br>
</td>
|
The CSS code:
#buttons ul {list-style: none; text-indent: 0px; margin: 0px; padding: 0px }
#buttons li {background-image : URL(images/button15.png); background-repeat : no-repeat; width:181px; height:41px; text-align: center; padding-top: 8px}
#buttons li:hover {background-image : URL(images/button16.png); background-repeat : no-repeat; width:181px; height:41px; text-align: center; padding-top: 8px}
#buttons a { font-family:arial,serif; font-style: normal; font-weight: bold; font-size:8pt;text-decoration:none;color: #ff9900; margin: 0px; padding : 0px}
#buttons a:hover { font-family:arial,serif; font-style: normal; font-weight: bold; font-size:8pt;text-decoration:none;color: #0060ff ; margin: 0px; padding : 0px}
|
Copy these buttons to make it work on your web page:  
Best when placed on background color #0060ff
Note: If the list item hover property doesn't work in your IE7 browser try changing the Doctype at the top of your web page to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
You can Test the simple list Codes online in this: HTML editor
 Take a Quiz on this Information.
Check out our Free Frames Template Kit or try our Free Frames Kit Demo
|
