HOW TO ADD LISTS IN WEB PAGES
IN WEB DESIGNING
There are two types of lists:-Ordered list
Unordered list
ORDERED LISTS
Ordered lists in web designing are those in which the items or elements of the list aregiven a specific sequence .This sequence given to the elements can be in form of numbers
or alphabets.In ordered list the default sequence provided to the elements is in form of
numerical values (example 1,2,3...).for creating ordered lists we use <ol> tag.And for
creating elements in list we use <li> tag.
Here is an basic example of creating an ordered list In HTML For Webpages
<html>
<head>
<title>list</title>
</head>
<body>
<ol>
<li>orange</li>
<li>blue</li>
<li>red</li>
</ol>
</body>
</html>
YOUR LIST WILL BE DISPLAYED LIKE GIVEN BELOW
Attributes Of Ordered List
Type
By default in web designing,the ordered list start with arabic number 1.However,you can
change the type to other number scheme or letter that can be placed in front of each item
using type attribute.
Various values that can be assigned to type attribute are:-
type value number style representation
1 arabic 1,2,3…..
a lowercase letters a b c d…..
A uppercase letters A B C D….
i lowercase roman
I uppercase roman
UNORDERED LIST
Unordered lists in web designing are those in which the elements of the lists are not given
specific sequence in form of numbers or alphabets.The are followed by bullet points,
square buttons or round buttons.the default format of unordered list show bullet points.
In unordered list <ul> tag is used.The rest format is same.
Example of unordered list for webpage:-
<html>
<head>
<title>unordered list</title>
</head>
<body>
<ul>
<li>zain</li>
<li>tia</li>
<li>ryan</li>
</ul>
</body>
</html>
YOUR LIST WILL BE DISPLAYED LIKE GIVEN BELOW
NESTED LISTS
Lists can be nested inside one another in web designing.You can nest lists of the same
or different types of lists within one another.
Now lets consider an example of nested listor different types of lists within one another.
<html>
<head>
<title>nested list</title>
<body>
<ul>
<li>printer</li>
<ul type=”square”>
<li>laser printer</li>
<li>dot matrix</li>
</ul>
<li>monitor</li>
<ul type=”circle”>
<li>crt</li>
<li>lcd</li>
</ul></ul>
</body>
</html>
YOUR LIST WILL BE DISPLAYED LIKE GIVEN BELOW
0 comments:
Post a Comment