HTML 5 tutorial in urdu hindi part 6
Outline
- introduction to lists in html
- types of lists in html
- ordered list in html
- un-ordered list in html
- definition list in html
- nested list in html
- simple website layout using css
Introduction to lists in html
Lists are way to organize data in an order , in HTML lists can be numbered , lettered or bulleted, based on type of list. List is one of the building block of Web pages / websites. Lists can be used for creating list of students, list of employees , list of customers etc. Lists are also used for creating navigation bars like horizontal navigation, vertical navigation etc. by using little css.
Types of lists in html
There are three types of lists in HTML, which are
- Ordered Lists
- Un Ordered Lists
- Definition Lists
Ordered list in html
Ordered List are used to create a list in an order. Ordered lists are created with <ol>...</ol> tag. They are numbered lists by default, but style can be changed by using type attribute in opening tag. The type attribute can be assigned number or letter as value. Number can be decimal number like (1,2,3...) or roman number like (i,ii,iii or I,II,III) or letter (a,b, c or A,B,C). To create items in ordered list <li>...</li> tag is used.
Attributes of <ol> tag:
There are different attributes of <ol> tag, but there are two most notable attributes. Which are type and start attribute.
Type attribute
In type attribute , you can assign a single number or letter to type attribute.
type = a/a/i/I/1
Start attribute:
This attribute can be used to specify the starting number or letter for list, by default every list start with 1, a, A,i,or I or the series may change according to outer list.
start = number
Examples of Ordered List
Example#1: ordered list with default type
Following program create a numbered list , and numbered will be 1,2,3,4,.... and so on.
<!doctype html>
<html>
<head>
<title>Ordered List Example 1 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ol>
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ol>
</body>
</html>
<html>
<head>
<title>Ordered List Example 1 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ol>
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ol>
</body>
</html>
Example#2: ordered list of type roman number
Following example creates a numbered list with small case roman numbers like i,ii,iii,iv, and so on. you can specify a capital letter as roman number.
<!doctype html>
<html>
<head>
<title>Ordered List Example 2 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ol type="i">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ol>
</body>
</html>
<html>
<head>
<title>Ordered List Example 2 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ol type="i">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ol>
</body>
</html>
Example#3: lettered list
Following example create a list with type small letter , you can specify capital letter for making Capital Lettered List.
<!doctype html>
<html>
<head>
<title>Ordered List Example 3 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ol type="a">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ol>
</body>
</html>
Following example create a list with type small letter , you can specify capital letter for making Capital Lettered List.
<!doctype html>
<html>
<head>
<title>Ordered List Example 3 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ol type="a">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ol>
</body>
</html>
<html>
<head>
<title>Ordered List Example 3 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ol type="a">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ol>
</body>
</html>
Un-ordered list in html
Un Ordered Lists are those list which are not in a specific order. They are bulleted lists. The type attribute as values disk/circle/square. The Un Ordered List can be created with <ul> tag and to insert items in list , <li> ....</li> tag is used.
Examples of Un Ordered Lists
Example#1: Un Ordered list with default type
<!doctype html>
<html>
<head>
<title>Un Ordered List Example 1 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ul>
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ul>
</body>
</html>
<html>
<head>
<title>Un Ordered List Example 1 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ul>
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ul>
</body>
</html>
Example#2: Unordered list of type Circle
<!doctype html>
<html>
<head>
<title>Un Ordered List Example 2 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ul type="circle">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ul>
</body>
</html>
Example#3: Un Ordered List with type square
<!doctype html>
<html>
<head>
<title>Un Ordered List Example 3 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ul type="square">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ul>
</body>
</html>
Definition list in html
<!doctype html>
<html>
<head>
<title>Un Ordered List Example 3 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ul type="square">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ul>
</body>
</html>
<html>
<head>
<title>Un Ordered List Example 3 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>List of Students </h2>
<ul type="square">
<li>Ali</li>
<li>Amir</li>
<li>Bakar</li>
<li>Shakir</li>
<li>Moiz</li>
</ul>
</body>
</html>
Definition list in html
The definition list is used to describe terms. Definition list can be create with <dl>...</dl> element. The <dt>..</dt> element in <dl>...</dl> element , is used to specify terms which are to be described , and <dd>...</dd> element is used to describe these terms. Following is the basic example of definition list in HTML 5.
Definition list example
Definition list example
<!doctype html>
<html>
<head>
<title>Un Ordered List Example 3 </title>
<meta charset=”utf-8”>
</head>
<body>
<dl>
<dt>Mouse</dt>
<dd>Mouse is a pointing or selecting device , which can be connected with PC through wire or blue tooth. Mouse is used to select different items from Computer.</dd>
<dt>KeyBoard</dt>
<dd>Keyboard is a device like a type writer machine, it is used to input data in Computer in text format</dd>
</dl>
</body>
</html>
<html>
<head>
<title>Un Ordered List Example 3 </title>
<meta charset=”utf-8”>
</head>
<body>
<dl>
<dt>Mouse</dt>
<dd>Mouse is a pointing or selecting device , which can be connected with PC through wire or blue tooth. Mouse is used to select different items from Computer.</dd>
<dt>KeyBoard</dt>
<dd>Keyboard is a device like a type writer machine, it is used to input data in Computer in text format</dd>
</dl>
</body>
</html>
Nested list in html
<!doctype html>
<html>
<head>
<title>Nested List Example</title>
<meta charset="utf-8">
</head>
<body>
<h2>Types of Computer Memory</h2>
<ol>
<li>
Primary Memory
<ul>
<li>RAM</li>
<li>ROM</li>
</ul>
</li>
<li>
Secondary Memory
<ul>
<li>Hard Disk</li>
<li>CD</li>
<li>DVD</li>
<li>USB</li>
<li>Floppy Disk</li>
</ul>
</li>
</ol>
</body>
</html>
Creating Simple website layout through CSS
let me show you , how to create a simple website layout through css in HTML5.Following are the css selectors I am using in this example.
- * : is universal selector, it is used to specify styles which are applied to whole website elements.
- body : It is type selector , it is used to style body element of HTML.
- header: It is type selector, which is used to style header element of HTML.
- nav: It is type select , which is used to style nav element of HTML.
- main: It is type selector which is used to style main element of HTML.
- aside: It is type selector which is used to style aside element , which is used to create sidebar.
- footer: It is type selector which is used to style footer element of HTML.
Properties and their values used in this example:
margin-left: margin-left property takes values in pixels , percentage , auto etc. It sets left margin.margin-right:right-margin property takes values in pixels , percentage , auto etc . It sets right margin.
color: This property is used to specify text color. It takes color name like red, yellow, brown ... , hexadecimal value of color, like #fff for white, #000 for black, #f00 for red, #0f0 for green..... or any css color function like rgb(), rgba(), hsl() , hsla().
background: It is short hand property which is used to set background color or background image of an element. if you want to specify color it takes color name like red, yellow, brown ... , hexadecimal value of color , like #fff for white, #000 for black, #f00 for red, #0f0 for green..... or any css color function like rgb(), rgba(), hsl() , hsla(). If you want to set background image , just you have to write background:url(image Address). Here imageAddress is the address of image which you want to set as background of particular element.
text-align:center: This property is used to specify text alignment.
font-size: This property sets text font size
width: This property sets the width of element
height: This property sets the height of an element
float: This property is used to make element as inline, it take value right or left.
clear: this property clears float property.
<!doctype html>
<html>
<head>
<title>Nested List Example</title>
<meta charset="utf-8">
<style>
*{padding:0px;margin:0px;}
body{
margin-left:10%;
margin-right:10%;
color:white;
background:lightgray;
text-align:center;
font-size:2em;
}
header{width:100%; height:150px; background:brown;}
nav{width:100%; height:40px; background:lime;}
main{width:80%; height:600px; background:skyblue;float:left;}
aside{width:20%; height:600px; background:darkblue;float:right;}
footer{width:100%; height:150px; background:black;clear:both;}
</style>
</head>
<body>
<header>Website Header</header>
<nav>Navigation</nav>
<main>Main Content Area</main>
<aside>SideBar</aside>
<footer>Footer</footer>
</body>
</html>
Following is the output of above code:
 |
| Basic Website Layout |
0 Comments:
Post a Comment