Today we going to learn about listing in web design ,there are two different kinds of listing, ordered list which use make use of numbering ,alphabetical order or Roman numbers and unordered list which uses dots and square.List tag is <li></li> an
ordered list tag is <ol></ol> and unordered list tag is <ul></ul>.
Lets take an example of list of tools to develop web page .
<html>
<head>
<title>My First webpage</title>
</head>
<body>
List of Tool use To develop a web page
<li>Computer</li>
<li>Notepad appliction</li>
<li>Dreamweaver application</li>
<li>Notepad++ application</li>
<li>Adobe Photoshop application</li>
</body>
</html>
This will be the result when you run the codes .
Oredered List
Now lets make use of the ordered list so we will just use the above list and make it ordered , we will have nest the list we
created inside the ordered list ,This is how its done .
Replace this codes to the list codes
<h3> Ordered List</h3>
<ol>
<li>Computer</li>
<li>Notepad appliction</li>
<li>Dreamweaver application</li>
<li>Notepad++ application</li>
<li>Adobe Photoshop application</li>
</ol>
When you do it and run you must get the same as this in example below.
Now lets change the numbers to Alphabet
To change the listing to alphabet you add the type property to the opening tag of the ordered list , type="a"
like how i did below.
<ol type="a">
<li>Computer</li>
<li>Notepad appliction</li>
<li>Dreamweaver application</li>
<li>Notepad++ application</li>
<li>Adobe Photoshop application</li>
</ol>
This is the result of the code when you run it
To change it to Roman numbers you will have to change ' a ' in the code to ' i '.
You can also specified which letter to start from, example we want to start from ' b ' not ' a ' ,you will have add this code to the ordered opening tag start="2" ,two its here because a represents 1 and 2 for b .
<ol type="a" start="2">
<li>Computer</li>
<li>Notepad appliction</li>
<li>Dreamweaver application</li>
<li>Notepad++ application</li>
<li>Adobe Photoshop application</li>
</ol>
This will be the results when you run the codes.
Unordered List
To make this we will nest the list tags inside unordered list tag like we how we did to the ordered list
Like the example below
<h3> Unordered List</h3>
<ul>
<li>Computer</li>
<li>Notepad appliction</li>
<li>Dreamweaver application</li>
<li>Notepad++ application</li>
<li>Adobe Photoshop application</li>
</l>
It will look same as this when you run the code ,you can see that, unordered list and list look the same .
We can change the type of the unordered list to square ,this code will do it for us . type="square"
<h3> Unordered List</h3>
<ul type="square">
<li>Computer</li>
<li>Notepad appliction</li>
<li>Dreamweaver application</li>
<li>Notepad++ application</li>
<li>Adobe Photoshop application</li>
</ul>
this is the results of the code ,watch it carefully you will see that black dot has change to square
There are situations that you will need to have list and sub list i call it nested list,the first list to be the heading for the
next sub list .In this case to be able to do it we would have to nest unordered list inside ordered list, the ordered list will be the
mother list .To make it the sub list of the mother list,the ordered list will have it own list of items and to make each item be
the header for other child list ,we will nest unordered list below each list of the ordered list. Lets take a look at this example
<ol>
<li> List of Tool use To develop a web page </li>
<ul>
<li>Computer </li>
<li>Notepad appliction </li>
<li>Dreamweaver application </li>
<li>Notepad++ application </li>
<li>Adobe Photoshop application </li>
</ul>
<li>List of other Languages associated with Web development</li>
<ul>
<li>Java</li>
<li>PHP</li>
<li>JQuery</li>
</ul>
</ol>
I have indent th codes make it reader friendly ,You can see clearly what i have explained .The ordered list has it own list
which are:
<li> List of Tool use To develop a web page </li>
<li>List of other Languages associated with Web development</li>
And each of them have its own corresponding sub list which are coded with unordered list .
This would be the results when you run the codes .
No comments:
Post a Comment