HTML (Table and Multimedia): Understanding Web Development Essentials

HTML Introduction
HTML (Table and Multimedia)

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

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

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.

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

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>

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

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%" >

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>

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>

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>

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.

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

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,

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.

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;"

HTML (Table and Multimedia): Understanding Web Development Essentials

HTML (Table and Multimedia): Understanding Web Development Essentials

Recommended

More Related Content

Similar to HTML (Table and Multimedia): Understanding Web Development Essentials (20)

Recently uploaded (20)

HTML (Table and Multimedia): Understanding Web Development Essentials