List are used when you want to display
data in the form of points.
There are three types of list.
› Unordered List
› Ordered List
› Description List
An unordered list is a list of items where
the sequence is not significant.
By default it is marked with bullets.
To create unordered list, we use <UL>
tag and to create each point of list, we
use <LI> tag.
<LI> stands for List Item
Attribute:
› Type (Circle, Square, Disc)
<ul type=“circle”>
<li> Hyderabad </li>
<li> Karachi </li>
<li> Lahore </li>
<ul>
An ordered list is a list of items where
sequence is very important.
By default it starts with numbers.
We use <OL> tag to create ordered list
and <LI> for each items.
Attribute:
› Type (1, A, a, I, i)
› Start (starting Value)
<ol>
<li> Apple</li>
<li> Banana </li>
<li> Mango </li>
</ol>
<ol type=“a” start=“5”>
<li> Strawberry</li>
<li> Orange </li>
<li> Peach</li>
</ol>
A description list is not a list of single item.
It is a list of items with a description of
each.
A description list start with <DL> tag and
each item start with <DT> tag (Definition
Term) followed by a definition using
<DD> tag (Definition Data) are used to
create descriptive list.
<dl>
<dt> HTML</dt>
<dd> HTML stands for Hyper Text
Markup Lanaguge </dd>
<dt> CSS </dt>
<dd> CSS stand for Cascading Style
Sheet </dd>
</dl>
Creating list within another list is called nested list.
Syntax:
<ol> Subjects
<li> English </li>
<li> Math </li>
<li> Science
<ul>
<li> Physics </li>
<li> Chemistry</li>
<li> Biology </li>
</ul> </li>
<li> Urdu </li>
</ol>
Table are used to display data in a
tabular format. Data is representing in a
from of rows and columns in Table.
The following tags are used to create
table
› <Table>
› <TR> (Table Row)
› <TH> (Table Head / Header)
› <TD> (Table Data)
<table> tag is used to define table in HTML
page.
It is a container element.
Attributes:
› Align
› Bgcolor
› Border
› Bordercolor
› Cellpadding
› Cellspacing
› Width and Height
<table border=“2” width=“50%” bgcolor=“yellow”>
<tr>
<th> [Link] </th>
<th> Name </th>
<th> Class </th>
</tr>
<tr>
<th> 1 </th>
<th> Harry </th>
<th> DIT </th>
</tr>
<tr>
<th> 2 </th>
<th> SHA </th>
<th> DIT </th>
</tr>
</table>
Attributes:
› Align
› Valign
› Bgcolor
Example:
<tr bgcolor=“Red” valign=“top”>
<th> [Link] </th>
<th> Name </th>
<th> Class </th>
</tr>
Attributes:
› Align
› Valign
› Colspan
› Rowpan
› bgcolor
Example:
<tr>
<th colspan=“3”>Students Records </th>
</tr>
Attributes:
› Align
› Valign
› Colspan
› Rowpan
› bgcolor
Example:
<tr>
<td rowspan=4> Students Records</td>
<th colspan="3">Students Records </th>
</tr>
It is used to insert audio song in web
page with the following elements.
› <Audio>
› <Source>
Syntax:
› <audio controls>
<Source src=“Audio Name. Audio Type”>
</audio>
It is used to insert video song in web
page with the following elements.
› <Video>
› <Source>
Syntax:
› <video with=“200” height=“200” controls>
<Source src=“Video Name. Video Type”>
</Video>