HTML Session2 module3 4 using lists tables and working forms and frames

Session 2
Module 3: Using Lists and Tables
Module 4: Working with Frames and Forms


Session 2 – Objectives (1)






Explain Unordered List
Explain Ordered List
Explain Definition List
Explain table element
Describe multimedia embedding

Using Lists and Tables & Working with Frames and Forms – Slide 2 / 51


Session 2 – Objectives (2)





Explain the <frameset> element
Explain HTML forms
Explain the <input> element
Explain the <select> and <option> element

Using Lists and Tables & Working with Frames and Forms – Slide 3 / 51


HTML Lists


The most common HTML lists are ordered and
unordered lists:
o An ordered list
1.
2.
3.

o

The first list item
The second list item
The third list item

An unordered list
•
•
•

List item
List item
List item
Using Lists and Tables & Working with Frames and Forms – Slide 4 / 51

Ordered List





An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
The list items are marked with numbers.
<ol> attributes:
o type = "1 | A | a | I | i"
o start = n (n is number)
<ol type="1">
<li>The first list item </li>
<li>The second list item </li>
<li>The third list item </li>
</ol>
Using Lists and Tables & Working with Frames and Forms – Slide 5 / 51


Unordered List





An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.
The list items are marked with bullets.

<ul> attributes:
o type = "disc | square | circle"
<ul type="square">
<li> List item </li>
<li> List item </li>
<li> List item </li>
</ul>
Using Lists and Tables & Working with Frames and Forms – Slide 6 / 51


Definition Lists




A definition list is a list of items, with a
description of each item.
The <dl> tag defines a definition list.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Using Lists and Tables & Working with Frames and Forms – Slide 7 / 51


Nested List
<ol type="1">

<li>
The first list item
<ul type="square">
<li> List item </li>
<li> List item </li>
<li> List item </li>
</ul>
</li>
<li> The second list item </li>
<li> The third list item </li>
</ol>
Using Lists and Tables & Working with Frames and Forms – Slide 8 / 51


Output

Using Lists and Tables & Working with Frames and Forms – Slide 9 / 51


HTML Tables (1)







Tables are defined with the <table> tag
A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the

<td> tag)
<td> stands for “table data” and holds the
content of a data cell
A <td> tag can contain text, links, images, lists,
forms, other tables, etc.

Using Lists and Tables & Working with Frames and Forms – Slide 10 / 51


HTML Tables (1)







Tables are defined with the <table> tag
A table is divided into rows (with the <tr> tag),
and each row is divided into data cells (with the
<td> tag)
<td> stands for “table data” and holds the
content of a data cell
A <td> tag can contain text, links, images, lists,
forms, other tables, etc.

Using Lists and Tables & Working with Frames and Forms – Slide 11 / 51


HTML Table (2)

Using Lists and Tables & Working with Frames and Forms – Slide 12 / 51


Layout of a Table
Table Head

Table
Body

Header 1

Header 2

Header 3

Data Cell 1,1

Data Cell 1,2

Data Cell 1,3

Data Cell 2,1

Data Cell 2,2

Data Cell 2,3

Footer

Table Foot

Table Cell
Table Row

Using Lists and Tables & Working with Frames and Forms – Slide 13 / 51


Table Attributes
border

cellspacing

cellpadding







border
width
height
cellspacing
cellpadding

height

width

Using Lists and Tables & Working with Frames and Forms – Slide 14 / 51


Elements Associated with Table

Using Lists and Tables & Working with Frames and Forms – Slide 15 / 51


Table Cell Element



<td> tag defines a standard cell in a table.
<th> tag defines a header cell in a table.
<table border="1" cellpadding="3">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Using Lists and Tables & Working with Frames and Forms – Slide 16 / 51

Output

Using Lists and Tables & Working with Frames and Forms – Slide 17 / 51


Table Cell Element Attributes

Using Lists and Tables & Working with Frames and Forms – Slide 18 / 51


Table Header, Footer And Body
<table border="1" cellpadding="3" bordercolor="red">
<thead>
<tr bgcolor="pink">
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr bgcolor="yellow">
<td align="center">1</td>
<td align="center">180</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="pink">
<th>Sum</th>
<th>$180</th>
</tr>
</tfoot>

</table>

Output

Using Lists and Tables & Working with Frames and Forms – Slide 19 / 51


Merging Cells





The colspan and rowspan attributes are used to
create cells that span more than one column or
row.
<th> can use only the colspan attribute.
<td> use both of the colspan and rowspan
attributes.
<th colspan="2">Header</th>
<td colspan="2">Data</td>
<td rowspan="2">Data</td>

Using Lists and Tables & Working with Frames and Forms – Slide 20 / 51


Web Page Layout Using Table
Header Region

Navigator

Region

Content Region

Footer Region
Using Lists and Tables & Working with Frames and Forms – Slide 21 / 51


Embedding Flash






Adobe Flash (formerly Macromedia Flash) is a
multimedia platform used to add animation,
video, and interactivity to web pages.
Flash is frequently used for advertisements and
games.
Flash files are in the SWF format, traditionally
called "ShockWave Flash" movies, "Flash
movies," or "Flash games", usually have a .swf
file extension.
Using Lists and Tables & Working with Frames and Forms – Slide 22 / 51


Embedding Flash Video (1)






Flash Video is a container file format used to
deliver video over the Internet using Adobe
Flash Player versions 6–10.
Flash Video content may also be embedded
within SWF files.
There are two different video file formats known
as Flash Video: FLV and F4V.

Using Lists and Tables & Working with Frames and Forms – Slide 23 / 51


Embedding Flash Video (2)


Embedding Flash Video to Web page