Unit-3 - PDF For CC

Unit-3 HTML Images, Tables and HTML5 Multimedia
 Adding Images to web page

Images are very important to beautify as well as to depict many complex concepts
in simple way on your web page.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of
attributes and it has no closing tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png">
</body>
</html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure
you specify correct image file name in src attribute. Image name is always case
sensitive.
Specifying image sources and alternate text

The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
Shri S. V Patel College of C.S & B.M, Surat Page 1

</html>
 Controlling image size and alignment

Set image width and height
You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the image in
terms of either pixels or percentage of its actual size.
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height =
"100"/>
</body>
</html>
Set image alignment

Image alignment is used to move the image at different locations (top, bottom,
right, left, middle) in our web pages. We use <img> align attribute to align the
image. It is an inline element.
Syntax:
<img align=”left|right|middle|top|bottom”>
Attribute Values:
Left: It is used for the alignment of image to the left.
right: It is used for the alignment of image to the right.
middle: It is used for the alignment of image to the middle.
top: It is used for the alignment of image to the top.
bottom: It is used for the alignment of image to the bottom.

Example: Left Alignment of the image

To align the image to the left use attributes value as “left”.
Syntax:
<img align=”left”>
Example :
<head>
<title>Left Alignment of Image</title>
</head>
<body>
<h1>SVP</h1>
<h3>Welcome to S.V. Patel College</h3>
<h4>Left Alignment of Image</h4>

<img align="left" src="logo3.png" alt="hello">
</body>
</html>
 Creating tables and table structure, table header, table rows and table
cell.
HTML tables: - It allows web developers to arrange data into rows and columns.
A table in HTML consists of table cells inside rows and columns.
<table>…</table> is used to create a table in HTML.
<tr>….</tr> is uder to create table rows
<th>----</th> is uded to create table header(column).
<td>….</td> is used to create table data(column).
Structure of a table: HTML tables have following structure.

<table>
<tr>
<th>…..</th>
<th>…….</th>
<th>……..</th>
</tr>
<tr>
<td>……..</td>
<td>……..</td>
<td>……..</td>
</tr>
</table>
Example:
<html>
<head>
<title>HTML Table</title>
</head>
<Body>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>

Output:
HML Table Header and Table Cell:

Table headers are defined with th elements. Each th element represents a table cell.
Example:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Vertical Table Headers

To use the first column as table headers, define the first cell in each row as
a <th> element:
Example:
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>

</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Align Table Headers

By default, table headers are bold and centered:
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
To left-align the table headers, use this property:
<html>
<head>
</head>
<body>
<table border="2" width="50%">
<tr>
<th align="left">Firstname</th>
<td >Jill</td>
<td>Eve</td>
</tr>
<tr>
<th align="left">Lastname</th>
<td>Smith</td>

<td>Jackson</td>
</tr>
<tr>
<th align="left">Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
</body>
</html>
Table Caption
You can add a caption that serves as a heading for the entire table.
Monthly savings
Month Savings
January $100
February $50
To add a caption to a table, use the <caption> tag:
<table style="width:100%">
<caption>Monthly_savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

 Formatting table content, Merging cells

1. Formatting table: Cell padding and cell spacing
2. Merging cells: colspan and rowspan
1. Formatting table: Cell padding and cell spacing

HTML tables can adjust the padding inside the cells, and also the space between
the cells.
Cell padding:
Cell padding specifies the space between the border of a table cell and its
contents (i.e) it defines the whitespace between the cell edge and the content of
the cell.
Syntax:
<table cellpadding="value" >.....</table>
where, value determines the padding
(space between the border of a table and its content)
Cell Spacing:
Cell spacing specifies the space between cells (i.e) it defines the whitespace
between the edges of the adjacent cells.
Syntax:
<table cell spacing="value" >.....</table>
where, value determines the padding
(space between adjacent cells)
Example:
<html>
<head> <title> Formatting table </title></head>

<body>
<table border="1"
cell padding="4"
cell spacing="5">
<tr>
<th>Name</span></th>
<th>Age</th>
</tr>
<tr>
<td>Rani</td>
<td>30</td>
</tr>
<tr>
<td>Rajan</td>
<td>35</td>
</tr>
<tr>
<td>Akshaya</td>
<td>17</td>
</tr>
<tr>
<td>Ashick</td>
<td>13</td>
</tr>
</table>
</body>
</html>
2. Merging cells: colspan and rowspan: The rowspan and colspan are the
attributes of <td> tag. These are used to specify the number of rows or
columns a cell should merge. The rowspan attribute is for merging rows and
the colspan attribute is for merging columns of the table in HTML.

Example of colspan:
<!DOCTYPE html>
<html>
<head>
<title> Colspan </title>
</head>
<body>
<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>
<table width="50%" border="2">

<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
</html>
o/p:
Cell that spans two columns
To make a cell span more than one column, use the colspan attribute.
Name Age
Jill Smith 43

Eve Jackson 57
Example of rowspan:
<!DOCTYPE html>
<html>
<head>
<title> Rowspan </title>
</head>
<body>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table width="100%">
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
</body>
</html>
Output:
Cell that spans two rows
To make a cell span more than one row, use the rowspan attribute.
Name Jill
555-1234
Phone
555-8745

 Embedding audio and video content
How to embed audio in HTML?
To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot
be added to web pages in the Internet Explorer era. To play audio, we used web
plugins like Flash. After the release of HTML5, it is possible. This tag supports
Chrome, Firefox, Safari, Opera, and Edge in three audio formats – MP3, WAV,
OGG. Only Safari browser doesn’t support OGG audio format.
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.
Note: Before adding an audio source must be sure that the audio file is in the
same directory and specified name.
Syntax:
<audio>
<source src="file_name" type="audio_file_type">
</audio>
Attributes of <audio> tag

Attribute Value Description
When the page is loaded. It specifies to play audio as

autoplay Autoplay
soon as possible.
controls Controls It displays audio control.
Loop Loop It will start the audio again when it is finished.
When the page is loaded audio will be automatically

Muted Muted
muted.

auto
It specifies how the author thinks the audio will be
preload metadata
loaded when the page is ready.
none
Src URL It specifies the URL of the audio file.
It specifies the height of the video area. The default

height Pixels
value of height is ‘auto’.
Example of audio tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play audio</h2>
<audio src="./test.mp3" controls></audio>
</body>
</html>
You can use <source> tag to specify media along with media type and many other
attributes. A video element allows multiple source elements and browser will use
the first recognized format
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>

<source src = "/html5/audio.ogg" type = "audio/ogg" />

<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
How to embed video in HTML?

To embed video in HTML, we use the <video> tag. It contains one or more video
sources at a time using <source> tag. It supports MP4, WebM, and Ogg in all
modern browsers. Only Ogg video format doesn’t support in Safari browser.
Syntax
<video>
<source src="file_name" type="video_file_type">
</video>
Attributes of <video> tag
When the page is loaded. It specifies to play video as

autoplay autoplay
soon as possible.
controls controls It displays video control such as play, pause, and stop.
Loop loop It will start the video again when it is finished.
When the page is loaded video will be automatically

Muted muted
muted.
Poster URL It specifies an image will be shown until video play.
auto
It specifies how the author thinks the video will be loaded
preload metadata
when the page is ready.
none

Src URL It specifies the URL of the audio file.
It specifies the width of the video area. The default value

Width pixels
of width is ‘auto’.
It specifies the height of the video area. The default value

height pixels
of height is ‘auto’.
Example of video tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Click play button to play video</h2>
<video src="./test.mp4" controls></video>
</body>
</html>
or you can use the following code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Click play button to play video</h2>
<video controls>

<source src="./test.mp4">
</video>
</body>
</html>
 Adding Captions and subtitles.
1. Get a WebVTT Caption File for Your Video

Videos display closed captions by referring to an accompanying caption file, which
contains text of speech and sounds with corresponding timestamps.
Caption files come in many different formats.
WebVTT (.vtt) is the format of choice for HTML5 video.
The WebVTT caption format is a text file with a .vtt extension. The file begins
with a header “WEBVTT FILE” followed by cues and their corresponding text.
A WebVTT file looks something like this:
1
00:00:10.500 --> 00:00:13.000
NARRATOR: In a world where nothing is what it seems,
2
00:00:15.000 --> 00:00:18.000
one man is about to do the impossible.
Pro tip: While you can create a WebVTT caption file yourself, or convert an
existing caption file, the easiest way is to submit your video for transcription and
captioning to a professional captioning company.
2. Upload Caption File to the Same Folder as Your Video
When your website plays a video, it references a specific video file that is stored
on your website’s server. Save a copy of your WebVTT caption file in the same
folder where your video is stored.
3. Add a Track Element to Your Video's HTML Code
Open up your website’s HTML editor and view the code for the video that needs
captions.
Add a track tag with the following information:
 src – the URL location of the caption file on your server

 label – the title of the track as it displays for the viewer

 kind – the type of time-aligned text. The options are captions, subtitles, chapters,
descriptions, or metadata.
 srclang – the language
 default – makes this track enabled by default. Note that multiple track elements
can be used simultaneously.
Here’s an example of a video with track tags. The first tag is for closed captions,
which are the default. The second tag is for French subtitles:
<video width="320" height="240">
<source type="video/mp4" src="/my_video_file.mp4" >

<track src="/captions_file.vtt" label="English" kind="captions" srclang="en-us"
default >
<track src="/French_captions_file.vtt" label="French" kind="subtitles"
srclang="fr" >
</video>
4. Save Your Changes and Update Your Webpage

Be sure to save changes and update your webpage before walking away.
The video should now display a CC symbol in the controls. You can click on this
to display the text track options and toggle captions or subtitles on and off.
 Controlling Media Playback

You can use <source> tag to specify media along with media type and many other
attributes. A video element allows multiple source elements and browser will use
the first recognized format
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>

<source src = "/html5/foo.ogg" type ="video/ogg" />

<source src = "/html5/foo.mp4" type = "video/mp4" />

Your browser does not support the <video> element.
</video>
</body>
</html>

Unit-3 - PDF For CC

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit-3 - PDF For CC

Uploaded by

Copyright:

Available Formats

Unit-3 HTML Images, Tables and HTML5 Multimedia

 Adding Images to web page

Specifying image sources and alternate text

Shri S. V Patel College of C.S & B.M, Surat Page 1

 Controlling image size and alignment

Set image alignment

Shri S. V Patel College of C.S & B.M, Surat Page 2

Example: Left Alignment of the image

Structure of a table: HTML tables have following structure.

Shri S. V Patel College of C.S & B.M, Surat Page 4

HML Table Header and Table Cell:

Vertical Table Headers

Shri S. V Patel College of C.S & B.M, Surat Page 5

Align Table Headers

Shri S. V Patel College of C.S & B.M, Surat Page 6

Shri S. V Patel College of C.S & B.M, Surat Page 7

 Formatting table content, Merging cells

1. Formatting table: Cell padding and cell spacing

Shri S. V Patel College of C.S & B.M, Surat Page 8

Shri S. V Patel College of C.S & B.M, Surat Page 9

<h2>Cell that spans two columns</h2>

<table width="50%" border="2">

Shri S. V Patel College of C.S & B.M, Surat Page 10

Cell that spans two rows

Shri S. V Patel College of C.S & B.M, Surat Page 11

 Embedding audio and video content

How to embed audio in HTML?

Attributes of <audio> tag

When the page is loaded. It specifies to play audio as

controls Controls It displays audio control.

Loop Loop It will start the audio again when it is finished.

When the page is loaded audio will be automatically

Shri S. V Patel College of C.S & B.M, Surat Page 12

Attribute Value Description

Src URL It specifies the URL of the audio file.

It specifies the height of the video area. The default

Example of audio tag

<audio controls autoplay>

Shri S. V Patel College of C.S & B.M, Surat Page 13

<source src = "/html5/audio.ogg" type = "audio/ogg" />

How to embed video in HTML?

When the page is loaded. It specifies to play video as

Loop loop It will start the video again when it is finished.

When the page is loaded video will be automatically

Poster URL It specifies an image will be shown until video play.

Shri S. V Patel College of C.S & B.M, Surat Page 14

Attribute Value Description

Src URL It specifies the URL of the audio file.

It specifies the width of the video area. The default value

It specifies the height of the video area. The default value

Example of video tag

or you can use the following code:

Shri S. V Patel College of C.S & B.M, Surat Page 15

 Adding Captions and subtitles.

1. Get a WebVTT Caption File for Your Video

Shri S. V Patel College of C.S & B.M, Surat Page 16

 label – the title of the track as it displays for the viewer

<source type="video/mp4" src="/my_video_file.mp4" >

4. Save Your Changes and Update Your Webpage

 Controlling Media Playback

<video width = "300" height = "200" controls autoplay>

Shri S. V Patel College of C.S & B.M, Surat Page 17