As our group discussed before, we will set a image of ipad as our home page for our hypertext essay. A list may be involved in our homepage. Thus, I look deep into list function in HTML today, and found some very useful information.
There are basically two types of list for easy use purpose, ordered lists and unordered lists
Ordered lists <ol></ol> obvious means lists that are in order, on contrast, unordered lists <ul></ul> means lists that are not in order. An ordered list will be displayed with number ahead, and unordered list will be displayed with pullet point ahead.
Here is the example of coding and list,
<html>
<body>
<b><h1>My favourite fruits(Unordered):</h1>
<ul>
<li> Watermelon </li>
<li> Banana </li>
<li> Orange </li>
</ul>
<h1>My favourite fruits (In ordered):</h1>
<ol>
<li> Watermelon </li>
<li> Banana </li>
<li> Orange </li>
</ol>
</body>
</html>
The code above will look like this:
My favourite fruits(Unordered):
- Watermelon
- Banana
- Orange
My favourite fruits (In ordered):
- Watermelon
- Banana
- Orange
But I found another cool list which called definition lists, you can actually put some description on your list, it starts with tag <dl> to tell HTML that I am going to make a definition lists, then follow with tag <dt> which means to defines a list, after that, use tag <dd> to describe the item you list previously.
Here is a small example,
<dl>
<h1>My favourite fruits</h1>
<dt> Watermelon </dt>
<dd> — I eat one to two times a month</dd>
<dt> Banana </dt>
<dd> — I eat twice a month</dd>
<dt> Orange </dt>
<dd> — I eat five times a month</dd>
</dl>
The code above will look like this:
- Watermelon
- — I eat one to two times a month
- Banana
- — I eat twice a month
- Orange
- — I eat five times a month
My favourite fruits
Hey guys, please try it yourself, you won’t learn it until you actually put it in practice. If I can do it, so do you. LOL
