HTML LISTS
HTML provides Elements for printing lists in a webpage.Html provides Ordered List, Unordered List and Descriptive List.
Unordered List
Unordered list can be included in a web page by using <ul> tag. The items in list are written inside <li> tag. By default the list items will be shown with bullets.
Unordered List Style Attribute
Style attribute can be added to List to make them presentable. By default HTML List provides bullets. The programmer can edit this by adding a style attribute. Style attribute provides properties to change bullets. They are:
list-style-type: circle-list items will be marked with circles
list-style-type: square-list items will be marked with squares.
list-style-type: none-list items will not be marked.
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h3>
Following is an unordered list</h3>
<ul style="list-style-type: square;">
<li>Sachin</li>
<li>Dravid</li>
<li>Zaheer</li>
</ul>
</body>
</html>
Unordered List
Following is an unordered list
- Sachin
- Dravid
- Zaheer
An unordered List can be included in web page using <ol> tag. List items must be included using <li> tag. Ordered List type Attributes In ordered List by default each list items will be marked with numbers. To change this we could use type attribute. They are: type=”A”-Uppercase letters will be used to mark each list items. type=”I” -Roman numbers will be used to mark each list items.
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h3>Following is an ordered list</h3>
<ol>
<li>India</li>
<li>USA</li>
<li>Pakistan</li>
</ol>
</body>
</html>
Ordered List
Following is an ordered list
- India
- USA
- Pakistan
HTML Description List
Description list contains list of terms and there descriptions.<dl> tag is used to add description list. We can include ‘terms’ into list by using <dt> tag. Descriptions of terms can be included by using <dd> tags. Nested List and Horizontal List We can have list inside another list. Its called nested list. We can have Horizontal List by applying css into list.
<html>
<head>
<title>Descriptive List</title>
</head>
<body>
<h3>Following is a descriptive List</h3>
<dl>
<dt>Cricket</dt>
<dd>It is a game</dd>
<dt>ISRO</dt>
<dd>Indian space Research Organisation</dd>
</dl>
</body>
</html>
Descriptive List
Following is a descriptive List
- Cricket
- It is a game
- ISRO
- Indian space Research Organisation
0 Comment "HTML LISTS"
Post a Comment