Learn how to create structured data layouts using HTML tables and enhance web pages with multimedia elements like images, audio, and video. Master essential HTML tags, attributes, and best practices for effective web design and interactive content integration.

1. HTML Introduction
HTML (Table and Multimedia)

2. Previous Lecture
➢ HTML Comment
➢ Text and Document Link
➢ Email and Phone link
➢ Image Element and Attribute
➢ Image Link
Overview
➢ HTML Table
➢ HTML Multimedia

3. HTML Tables
➢ Tables are used on websites for two major purposes
• The obvious purpose of arranging information in a table
• The less obvious - but more widely used –purpose of creating a page layout
with the use of hidden tables.
• Most important is, that the content of a table is not shown until the entire
table is loaded.
• If you have extremely long pages, you should divide it into two or more
tables
Id First Name Last Name Degree
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

4. HTML Tables
The most important Layout aspects that can be done with tables are:
➢ Dividing the page into separate sections.
An invisible table is excellent for this purpose.
➢ Creating menus.
Typically with one color for the header and another
for the links following in the next lines.
➢ Adding interactive form fields.
Typically a gray area containing a search option.
➢ Creating fast loading headers for the page.
➢ A colored table with a text on it loads like a bullet compared to even a small banner.
➢ Easy alignment of images that have been cut into smaller pieces.
➢ A simple way to allow text to be written in two or more columns next to each other.

5. HTML Tables
➢ The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells.
➢ Table heading can be defined using <th> tag.
This tag will be put to replace <td> tag,
which is used to represent actual data cell.
<table >
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Hussein</td>
<td>7000</td>
</tr>
</table>
Name Salary
Raman 5000
Hussein 7000

6. Tables Attributes
➢ border is an attribute of <table> tag and it is used to put a border across all
the cells. If you do not need a border then you can use border="0".
➢ The cellspacing attribute defines the width of the border, cellpadding
represents the distance between cell borders and the content within a cell.
<table border=“3"cellpadding=“10" cellspacing=“10">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr> <td>Raman</td>
<td>5000</td> </tr>
<tr> <td>Hussein</td>
<td>7000</td> </tr>
</table>

7. Tables Backgrounds
Tables Backgrounds
➢ bgcolor attribute - You can set background color for whole table or just for
one cell.
➢ background attribute - You can set background image for whole table or
just for one cell.
➢ You can also set border color
also using bordercolor attribute.
<table border="1" bordercolor="green" bgcolor="yellow">
➢ background attribute - use an image available in /images directory.
<table border="1" bordercolor="green“ background="/images/test.png">

8. Table Height, Width and Caption
Table Height and Width
➢ You can set a table width and height using width and height attributes.
➢ You can specify table width or height in terms of pixels or in terms of
percentage of available screen area.
<table border="1" width="400" height="150">
Table Caption
➢ The caption tag will serve as a title or explanation for the table and it shows
up at the top of the table.
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr> <td>row 1, column 1</td>
<td>row 1, columnn 2</td> </tr>
</table>
<table border="1" width="50%" >

9. Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or
more rows.
<table border="1">
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th> </tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

10. Table Header, Body, and Footer
➢ Tables can be divided into three portions: a header, a body, and a foot.
➢ The three elements for separating the head, body, and foot of a table are:
<table border="1" width="100%" >
<thead>
<tr> <td colspan="4">This is the head of the table</td> </tr>
</thead>
<tfoot>
<tr> <td colspan="4">This is the foot of the table</td> </tr>
</tfoot>
<tbody>
<tr> <td>Cell 1</td> <td>Cell 2</td>
<td>Cell 3</td> <td>Cell 4</td> </tr>
</tbody>
</table>

11. Nested Tables
You can use one table inside another table. Not only tables you can use almost
all the tags inside table data tag <td>.
<table border="1" width=“30%">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th>Name</th> <th>Salary</th> </tr>
<tr> <td> Raman</td> <td>5000</td> </tr>
<tr> <td>Hussein</td> <td>7000</td> </tr>
</table>
</td>
</tr>
</table>

12. HTML Multimedia
➢ Multimedia on the web, is sound, music, videos, movies, and
animations.
➢ The first web browsers had support for text only, Later support colors and
fonts, and even support for pictures!
➢ Now web browsers support all Multimedia files,
some formats require extra helper programs
(plug-ins) to work.
➢ Multimedia files also have their own formats
and different extensions like:
.swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
➢ The easiest way to add video or sound to
your web site is to include the special HTML tag called <embed>.
➢ You can also include a <noembed> tag for the browsers which don't
recognize the <embed> tag.

13. Embed video
➢ Example to play an embedded mp4 file:
➢ The <embed> Tag Attributes:
Autostart: This boolean attribute indicates if the media should start automatically.
You can set it either true or false.
Loop: Specifies if the sound should be played continuously (set loop to true).
Playcount :Specifies the number of times to play the sound.
This is alternate option for loop if you are using IE.
Volume: Controls volume of the sound. Can be from 0 (off) to 100 (full volume).
Align, width, height, name ,and src..

14. HTMLAudio
➢ You can use HTML <bgsound> tag to play a soundtrack in the background of your
webpage.
➢ This tag is supported by Internet Explorer only and most of the other browsers ignore this
tag.
➢ HTML 4 introduces the <object> element, which offers an all-purpose solution to generic
object inclusion.
➢ Data can be HTML, PDF, Flash, and Java Applet document,

15. HTML5 Video
➢ HTML5 features include native audio and video support without the need
for Flash.
➢ The HTML5 <audio> and <video> tags make it simple to add media to a
website.
➢ You need to set src attribute to identify the media source and include a
controls attribute so the user can play and pause the media.
➢ Video Attributes:
Autobuffer : This boolean attribute if specified,
the video will automatically begin
buffering even if it's not set to automatically play.

16. HTML5 Audio
➢ HTML5 supports <audio> tag which is used to embed sound
➢ The current HTML5 draft specification does not specify which audio
formats browsers should support in the audio tag.
➢ But most commonly used audio formats are ogg, mp3 and wav.
➢ Handling Media Events (by using JavaScript)
• play : This event is generated when playback starts or resumes.
• Ended: This event is generated when playback completes.
• Pause: This event is generated when playback is paused.
• Progress: This event is generated periodically to inform the progress of
the downloading the media.
style="width: 600px;"