Featured Templates
Home
HTML and CSS
Tutorials
The Basics of HTML
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
Ordered Lists
- Ordered lists allow you to create lists with various bullet styles which reflect the level of hierarchy.
- The basic ordered list involves three tags
- The <OL> tag is used to open a list. The <LI> tag is used to signify a list element, and the </OL> tag is used to end a list.
- For example, the following code could be used to create a list:
<HTML> <HEAD> <TITLE>Unordered List</TITLE> </HEAD> <BODY> <B>Food</B> <OL> <LI>Vegetables <OL> <LI>Broccoli <LI>Carrot <LI>Pea </OL> <LI>Meat <OL> <LI>Chicken <LI>Beef <LI>Pork </OL> </OL> </BODY> </HTML> |
- The previous code would produce the following HTML list. Notice that the bullets are numbered according to their level in the hierarchy:
Food
- Vegetables
- Broccoli
- Carrot
- Pea
- Meat
- Chicken
- Beef
- Pork
- You can modify the look of the bullets by using the TYPE or START attributes in the <OL> tag.
- The TYPE attribute supports the following values: A, a, I, i, or 1.
- The START attribute specifies at what point to start counting from.
- Below is some code that demonstrates the usage of the TYPE and START attributes.
<HTML> <HEAD> <TITLE>Unordered List</TITLE> </HEAD> <BODY> <B>Food</B> <OL TYPE = "A"> <LI>Vegetables <OL TYPE = "a"> <LI>Broccoli <LI>Carrot <LI>Pea </OL> <LI>Meat <OL TYPE = "a" START = "2"> <LI>Chicken <LI>Beef <LI>Pork </OL> </OL> </BODY> </HTML> |
- The previous code would appear as follows:
Food
- Vegetables
- Broccoli
- Carrot
- Pea
- Meat
- Chicken
- Beef
- Pork
- Notice that in this circumstance, the case of the TYPE argument matters.
Definition Lists
- Definition lists allow you to create lists that are more like glossary entries than hierarchies.
- The basic definition list involves three tags
- The <DL> tag is used to open a definition list. The <DT> tag is used to signify a definition term, the <DD> tag is used to signify a definition term description, and the </DL> tag is used to end the list.
- For example, the following code could be used to create a definition list:
<HTML>
<HEAD>
<TITLE>Definition List</TITLE>
</HEAD>
<BODY>
<B>Food</B>
<DL>
<DT>Vegetables
<DD>Vegetables are very good for you. They
contain all sorts of essential vitamins. Of course,
they taste terrible, so any self-respecting cyborg would
take vitamins instead.
<DT>Meat
<DD>Meat contains lots of proteins that your
body needs. Of course, in the modern world, the
way we get meat to the grocery store is exceptionally
immoral. You'll just have to make the decision for
yourself.
</DL>
</BODY>
</HTML> |
- The previous code would produce the following HTML list.
Food
Vegetables Vegetables are very good for you. They contain all sorts of essential vitamins. Of course, they taste terrible, so any self-respecting cyborg would take vitamins instead. Meat Meat contains lots of proteins that your body needs. Of course, in the modern world, the way we get meat to the grocery store is exceptionally immoral. You'll just have to make the decision for yourself.
Exercise Four
- Okay, as the final exercise for today, try adding a list to your HTML file.
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: