Faculty Of Engineering and Technology

Department of Computer Science

Course: Web Fundamental
Course Code : CS- 103
(Lecture-4)

Nasratullah zarif
Lecturer
Department of Computer Science
Email: [email protected]
Mobile: +93(0) 786586333
 CONTENTS
Web Page Designing
 HTML Lists

 HTML Lists Tags

 Types of List

 Tables

2
 OUTCOMES

At the end of this lecture, students will be able to:

• Practically make nested list in the web pages.

3
 Web Page Designing

HTML Lists:
 HTML lists allow web developers to group a set of related items in lists.
 Lists are used to group together related pieces of information so they are
clearly associated with each other and easy to read.
 Lists are good from a structural point of view as they help create a well-
structured, more accessible, easy-to-maintain document.
 Web Page Designing

HTML Lists Tags:

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list

<dd> Describes the term in a description

list
 Web Page Designing

Types of Lists:
 There are three list types in HTML:
1. Unordered list
2. Ordered Lists
3. Description Lists
 Web Page Designing

Unordered Lists:
 Unordered (bulleted) lists are used when a set of items can be placed in any
order.
 An example is a shopping list:
• milk
• bread
• butter
• coffee beans
 Web Page Designing
Cont.…
 An unordered list starts with the <ul> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with bullets (small black circles) by default:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Web Page Designing
Cont.…
 The CSS “list-style-type” property is used to define the style of the list item
marker.
 It can have one of the following values:
Value Description
disc Sets the list item marker to a bullet
(default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
 Web Page Designing
Example:

<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
 Web Page Designing

Ordered Lists:
 An ordered list starts with the <ol> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with numbers by default:
 An example is a shopping list:
1. milk
2. bread
3. butter
4. coffee beans
 Web Page Designing
Example:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
 Web Page Designing

Nested Lists:
 A nested list is a list inside another list.
 We can create a nested unordered list, or a nested ordered list, or even an
ordered list nested inside an unordered one.
 Remember that the only direct child of the <ul> tag is <li> .
 Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.
 Web Page Designing
Example:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
 Web Page Designing

Description Lists:
 A description list is a list of terms, with a description of each term.
 The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term
 Web Page Designing
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 Web Page Designing

Tables:
 A table is a representation of data arranged in rows and columns.
 In HTML, with the help of tables, you can arrange data like images, text, links
and so on into rows and columns of cells.
 The use of tables in the web has become more popular recently because of the
amazing HTML table tags that make it easier to create and design them.
 A table in HTML consists of table cells inside rows and columns.
 Web Page Designing
HTML Tables Tags:
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

 Web Page Designing

Table Cells:
 Each table cell is defined by a <td> and a </td> tag.
 <td> stands “for table data”.
 Everything between <td> and </td> are the content of the table cell.
 A table in HTML consists of table cells inside rows and columns.
 Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.
 Web Page Designing
Example:
<table>
<tr>
<td>Ali</td>
<td>Ahmad</td>
<td>Waheed</td>
</tr>
</table>
 Web Page Designing

Table Rows:
 Each table row starts with a <tr> and end with </tr> tag.
 <tr> stands for “table row”.
 We can have as many rows as you like in a table, just make sure that the
number of cells are the same in each row.
 Note: There are times where a row can have less or more cells than another.
You will learn about that in a later chapter.
 Web Page Designing
Example:
<table>
<tr>
<td>Ali</td>
<td>Ahmad</td>
<td>Waheed</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
 Web Page Designing

Table Headers:
 Sometimes you want your cells to be headers, in those cases use the <th> tag
instead of the <td> tag.
 By default, the text in <th> elements are bold and centered, but you can change
that with CSS.
 Web Page Designing
Example:
<table>
<tr>
<th> Company</th>
<th> Country</th>
</tr>
<tr>
<td>Etisalat</td>
<td>Afghanistan</td>
</tr>
<tr>
<td>Idea</td>
<td>India</td>
</tr>
</table>
Thank You…!