Scribd
Upload
2 views9 pages

web technology unit 2

The document provides an overview of HTML lists, tables, and frames, detailing their structure and usage. It explains three types of lists (unordered, ordered, and description), demonstrates nested lists, and describes how to create tables with rows and cells. Additionally, it covers the concept of frames in HTML, allowing multiple URLs to be displayed in a single browser window.

Uploaded by

pragathiswaranpsk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views9 pages

web technology unit 2

The document provides an overview of HTML lists, tables, and frames, detailing their structure and usage. It explains three types of lists (unordered, ordered, and description), demonstrates nested lists, and describes how to create tables with rows and cells. Additionally, it covers the concept of frames in HTML, allowing multiple URLs to be displayed in a single browser window.

Uploaded by

pragathiswaranpsk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

1) LISTS :

 HTML lists allow web developers to group a set of related items in lists.
 It has three types in html are:
1. Unordered list.
2. Ordered list.
3. Description list.
1. Example:

An unordered HTML list:

 Item
 Item
 Item
 Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item.

1. Unordered HTML List:

 An unordered list is one of the type of html lists.


 An unordered list starts with the <ul> tag and ends with</ul> tag.
 Each list item starts with the <li> tag and ends with</li> tag.

Example:

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

Sample program to understanding:

<html>

<body>
<h2>An unordered HTML list</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

Output:

An unordered HTML list

 Coffee
 Tea
 Milk

2. Ordered HTML List:

 An unordered list is one of the type of html lists.


 An ordered list starts with the <ol> tag and ends with</ol> tag.
 Each list item starts with the <li> tag and ends with</li> tag.

Example:

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

Sample program to understanding:

<html>

<body>

<h2>An ordered HTML list</h2>


<Ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</Ol>

</body>

</html>

Output:

An ordered HTML list.

1. Coffee
2. Tea
3. Milk

3. Description HTML List:

 A description list is one of the type of html lists.


 HTML also supports 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:

Example:

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

HTML List Tags:

<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.

2) Nested list and combining list types:


1.Nested list:

 A nested HTML list is a combination of ordered list and un ordered list to display the content in
the web page.
 An example of nested HTML list is displayed below using un ordered list with Ordered list is
shown below,

<html>

<body>

<h2>A Nested List</h2>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

</body>

</html>

Output:
A Nested List:

 Coffee
 Tea

o Black tea

o Green tea

 Milk

2. Combining list types:

List in HTML helps to display a list of information semantically. There are three types of lists in HTML:

 Unordered list or Bulleted list (ul)


 Ordered list or Numbered list (ol)
 Description list or Definition list (dl)

HTML Unordered List or Bulleted List:

 In HTML unordered list, the list items have no specific order or sequence.
 An unordered list is also called a Bulleted list, as the items are marked with bullets.
 It begins with the <ul> tag and and closes with a </ul> tag.
 The list items begin with the <li> tag and end with </li> tag.

Syntax:

<ul>List of Items</ul>

Sample program:
<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<h2>List of Fruits</h2>

<ul>

<li>Apple</li>

<li>Mango</li>
<li>Banana</li>

<li>Grapes</li>

<li>Orange</li>

</ul>

</body>

</html>

Ordered list and numbered list (OL):

 In HTML, all the list items in an ordered list are marked with numbers by default instead of
bullets.
 An HTML ordered list starts with the <ol> tag and ends with the </ol> tag.
 The list items start with the <li> tag and end with </li> tag.

Different types of ordered list in html:

 Instead of numbers, you can mark your list items with the alphabet: A, B, C or a,b,c, or roman
numerals: i, ii, iii, etc.
 You can do this by using the <ol> tag type attribute.
 Let’s explore how to order lists with alphabets and roman numbers.
 To mark the list items with letters A, B, C, etc., you must specify A as the type attribute’s value in
the <ol> tag.

3) Table :
 HTML tables allow web developers to arrange data into rows and columns.
 A table in HTML consists of table cells inside rows and columns.

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.

Table Rows:

 Each table row starts with a <tr> and ends with a </tr> tag.
 tr stands for table row.

SAMPLE PROGRAM:

<html>
<style>

table, th, td

border:1px solid black;

</style>

<body>

<h2>TR elements define table rows</h2>

<table style="width:100%">

<tr>

<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>
</tr>

<tr>

<td>16</td>

<td>14</td>

<td>10</td>

</tr>

</table>

</body>

</html>

Table header:

 Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead
of the <td> tag:
 th stands for table header.

EXAMPLE:
<table>

<tr>

<th>Person 1</th>

<th>Person 2</th>

<th>Person 3</th>

</tr>

<tr>

<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>

</tr>

<tr>

<td>16</td>

<td>14</td>

<td>10</td>

</tr>

</table>

HTML Table Tags:

<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

4) Frames :
 HTML allows programmers to divide a single browser display into multiple window sections,
where each section can load individual URLs.
 This concept of HTML providing multiple frames at one browser display is called frameset, and
all the frame tags are used within the container tag <frameset>.
 So the entire separation of HTML pages is possible using the concept of frames.
 This tag defines a specific window or frame inside the <frameset> tag.
 Every <frame> within the <frameset> tag may use attributes for different purposes like border,
resizing capability, include scrolling, etc.
 The primary use of these frames was to display a menu in parts of the page with content in one
part of the page.
 Multiple HTML pages can be viewed in a browser window using this tag.

Let's see how:

<html>

<head>

<title>Example for Frame</title>

</head>

<frameset cols="20%,*">

<frame src="frame1.html"> 1st FRAME

<frame src="frame2.html"> 2nd FRAME

</frameset>

</html>

Various attributes of frame set:

 src: is implemented for fetching the HTML file that needs to be loaded in one of the frames. It
takes the value as filename.html or filename.htm within double-quotes.
 name: facilitates you in giving a name to your frame, and hence you can indicate which frame(s)
you are supposed to load into your page.
 frameborder: is used for specifying if the borders are being shown in the frame you are using,
and you can assign values either: 1 (yes) or 0 (no) for it.
 marginwidth: facilitates specifying the frame borders width spacing on the left and right sides. It
takes the value in pixels.
 marginheight: facilitates specifying the frame borders height spacing on top and bottom sides. It
also takes the value in pixels.

You might also like