HTML Tags Tutor
Unordered List Tag
The unordered list tag is used to create lists on a web page. The code shown here produces the bulleted list on the right.
|
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
|
- List Item
- List Item
- List Item
|
Lesson steps
Click the <> button to enter your code
Type or paste the code shown here for an unordered list in the editor window:
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
Click Preview button.
|
|
Change List Style
Click the <> button to return to the code.
Add the inline style code to the opening list tag as shown in red:
<ul style="list-style: circle">
Click Preview button.
|
Change List Style
Click the <> button to return to the code.
Change the style code of the opening list tag as shown in red:
<ul style="list-style: square">
Click Preview button.
|
Set the Font
Click the <> button to return to the code.
Change the style code of the opening list tag as shown in red:
<ul style="list-style: square; font-family: verdana">
Click Preview button.
|
Add Color
Click the <> button to return to the code.
Change the style code of the opening list tag as shown in red:
<ul style="list-style: square; font-family: verdana; color: #00cc00">
Click Preview button.
|
Lesson Notes
The unordered list tag will work if you forget the closing list item tags. For W3C compliance you should include them.
When adding inline style declarations, use a semi colon to separate them. If these same declarations were defined in the head section using the style tag the code would look like this:
<head>
<style type="text/css">
ul {
list-style: square
}
li {
font-family: verdana;
color: #00cc00
}
<style>
</head>
|
Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset KY 42502
Last Modified: July 3, 2009
|
| |
