Sunday, December 23, 2018
STEP BY STEP GUIDES ON HOW TO CREATE LIST ON A WEB PAGE USING HTML
In this lesson, we will be learning how to create lists on a web page using HTML. Kindly note that this lesson will utterly be confusing and difficult to understand if you’ve not practically been following our previous lessons. But if you're putting all these lessons into practice, then you have no worries.
Let’s quickly move on.
1. HOW TO CREATE LIST USING HTML
The mastery of list creation in HTML can help you outline important points when coding. In HTML, lists are classified into two major division. Namely: a)ordered lists and b)unordered lists.
a) Ordered List
Ordered list as the name implies is those list items that are numbered or ordered. I don’t know better words to use, but just note that items in the ordered list, items are arranged in numbers instead of bullets or asterisks. In HTML, ordered lists make use of <ol> tags and each of the item on this list is defined by the <li> tag. Please, you have to take note of these simple tags, (i.e <ol> meaning ordered list and <li> meaning list).
To familiarize this ‘ordered list’ of a thing, it is not unwise to consider at least one example. Are you ready? Fine, open your text editor. (Sublime text preferably. If you don’t have it, you can search for it on Google and download it. it is just a few megabytes. After installation, open it and type the following code below:
<html>
<head>
<title>Codinglegit of the Year</title>
</head>
<body>
<ol>
<li>Aisha</li>
<li>Aanuoluwapo</li>
<li>Lilian</li>
</ol>
</body>
</html>
It will look like this in your text editor:
Then save it as .html or.htm and open it in the folder using any web browser of your choice. It does not require internet connection.
The result will appear like this below
Please drop your comment below if you encounter any difficulty.
b) Unordered Lists
This is another kind of list in HTML. It is, as the name suggests, a list in which its items are not ordered. It is usually marked with bullets. Importantly, also note that unordered begins with the <ul> tag, unlike an ordered list which begins with <ol> tag. Let us consider the example below.
Input the following codes to your text editor
<html>
<head>
<title>Unachukwu Daniel’s Friends</title>
</head>
<body>
<ul>
<li>Aliyu</li>
<li>Babatunde</li>
<li>Emeka</li>
</ul>
</body>
</html>
It will look like this in your text editor
Save and open it. the result will look like this:
WRAPPING UP
In our next lesson, we going to be considering how to create tables and as well how to style it. However, kindly note that styling of these tables is more effective and beautiful in CSS than HTML. In fact, CSS is the king of styling. We shall yet get to CSS course this week. After tables, I will combine the remaining lessons except HTML 5 which I will treat separately for a reason.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment