HTML offers three types of lists they are :
1.Unordered list: This can be created using <ul> tag,this will list items using plain bullets.
2.Ordered list: This can be created usingn<ol> tag,this will use different schemes of numbers to list items.
3.Definition list: This can be created using <dl> tag,this arranges your items in the same way as they are arranged.
UNORDERED LIST :
An unordered list is a collection of items that have no special order or sequence.This list is created by using HTML<ul> tag and each list starts with <li> tag , each item in the list is marked with a bullet .
Example for Unordered List :
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li>Tiger</li>
<li>cheetah</li>
<li>jaguar</li>
<li>Lion</li>
</ul>
</body>
</html>
UNORDERED TYPE ATTRIBUTE :
You can use type attribute for <ul> tag to specify the type of bullet you like,by default it is a disc the options are circle , square , none .
1. <ul type="square">
2. <ul type="disc">
3. <ul type="circle">
4. <ul type="none">
Example for Type Attribute :
<!Doctype html>
<html>
<head>
<title>TYPE ATTRIBUTE</title>
</head>
<body>
<h4>Square attribute example </h4>
<ul type="square">
<li>Tiger</li>
<li>Lion</li>
</ul>
<h4>Disc attribute example </h4>
<ul type="disc">
<li>Tiger</li>
<li>Lion</li>
</ul>
<h4>circle attribute example </h4>
<ul type="circle">
<li>Tiger</li>
<li>Lion</li>
</ul>
<h4>none attribute example </h4>
<ul type="none">
<li>Tiger</li>
<li>Lion</li>
</ul>
</body>
</html>
ORDERED LIST :
An Ordered list is a list of items in a numbered list.This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.
Example for Ordered List :
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol>
<li>Tiger</li>
<li>cheetah</li>
<li>jaguar</li>
<li>Lion</li>
</ol>
</body>
</html>
ORDERED TYPE ATTRIBUTE :
Type attribute can be used for <ol> tag to specify the type of numbering by default it is a number .
1. <ol type="1"> - Default Numerals.
2. <ol type="I"> - Upper-Case Numerals.
3. <ol type="i"> - Lower-Case Numerals.
4. <ol type="a"> - Lower-Case Letters.
5. <ol type="A"> - Upper-Case Letters.
Example for Ordered type Attribute :
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h4> Default Numerals </h4>
<ol type="1">
<li>Tiger</li>
<li>Lion</li>
</ol>
<h4>Upper-Case Numerals</h4>
<ol type="I">
<li>Tiger</li>
<li>Lion</li>
</ol>
<h4> Lower-Case Numerals </h4>
<ol type="i">
<li>Tiger</li>
<li>Lion</li>
</ol>
<h4>Lower-Case Letters </h4>
<ol type="a">
<li>Tiger</li>
<li>Lion</li>
</ol>
<h4>Upper-Case Letters </h4>
<ol type="A">
<li>Tiger</li>
<li>Lion</li>
</ol>
</body>
</html>
DISCRIPTION LIST :
A description list, is a list of items, with a description of each item.
1. The <dl> tag defines a list.
2. The <dt> tag defines the Item name.
3. The <dd> tag defines the description.
Example for Description List :
<!DOCTYPE html>
<html>
<body>
<h2> Description List</h2>
<dl>
<dt>Tiger</dt>
<dd>Tiger is Endangered</dd>
<dt>Lion</dt>
<dd>Lion is the king of jungle</dd>
</dl>
</body>
</html>
HORIZONTAL LIST :
HTML lists can be styled in many types , horizontal list is one of the type .
Example for Horizontal list :
<!DOCTYPE html>
<html>
<head>
<style>
ul#list li { display:inline; }
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="list">
<li>Tiger</li>
<li>cheetah</li>
<li>jaguar</li>
<li>Lion</li>
</ul>
</body>
</html>
HTML BLOCKS :
HTML elements are defined as block level elements or inline elements.
Block level elements normally start and end with a new line, when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>, <ol>, <dl>, <pre>>, <hr />
Inline elements are normally displayed without line breaks.
Examples: <b>, <td>, <img>, <big>, <small>, <li>, <ins>, <del> .
BLOCK LEVEL ELEMENT :
The <div> element is a block level element that can be used as a container for other HTML elements , style and class are common attributes , <div> tag can be used to create webpage layout to define different parts of the page using <div> tag .
Example for Block Level Element :
<!DOCTYPE html>
<html>
<head>
<style>
.ani { background-color:steelblue; color:white; margin:20px; padding:20px; border:5px solid mediumturquoise; }
</style>
</head>
<body>
<div class="ani">
<h2>TIGER</h2>
<p> The tiger (Panthera tigris) is the largest cat species, reaching a total body length which made of up to 3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. with most remaining populations occurring in small pockets isolated from each other, of which about 2,000 exist on the Indian subcontinent. </p>
<img src="http://Tiger.jpg" alt="TIGER" style="width:250px; height:200px">
</div>
<div class="ani"> <h2>LION</h2>
<p>The lion (Panthera leo) is one of the five big cats in the genus Panthera and a member of the family Felidae , it is the second-largest living cat after the tiger . lions live for 1014 years in the wild, although in captivity they can live more than 20 years.</p>
<img src="http://lion.jpg"alt="LION" style="width:250px;height:200px">
</body>
</html>
INLINE ELEMENTS :
The HTML <span> element is an inline element that can be used as a container for text , style and class are common attributes.The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements where as the <div> tag is used with block-level elements.
This is Inline Element :
<!DOCTYPE html>
<html>
<head>
<style>
span.steel { color:steelblue; }
</style>
</head>
<body>
<h1>This is <span class="steel"> INLINE</span>Element</h1>
</body>
</html>
To be continue NEXT POST...
Thanks for reading.
Comments