Unit-2 Working with Links,

Images, Forms and Multimedia

Lectures-8, Marks-10

Hyperlinks
A hyperlink interconnects the current web
page with the other web page.
Hyperlink can be created by using the <A>
(anchor).
The hyperlink redirects the user to another
HTML page, image or file.
The A element uses the href(Hypertext
Reference) attribute to specify the target
resource or document that you want to open
when the user clicks the hyperlink.
The href attribute sets the URL of the target
and id attributes.
Source : HTML5 Black Book

Shefali Naik

Hyperlinks
Target attribute :
The <A> element uses the target attribute to specify
a window where you want to open a document
when a hyperlink is clicked.
For ex., you can open a document in the same
window or another window by using the target
attribute.
Target attribute takes five values :

_blank : Opens the linked document in a new unnamed

window
_self : Opens the linked document in the current window
(this is default)
_parent : Opens the linked document in the parent window
_top
: Opens the linked document in the topmost
window
framename : Opens the document in a named frame

Source : HTML5 Black Book

Shefali Naik

Hyperlinks
id attribute :
It is used to create fragment identifier within a
document.
A fragment identifier specifies a particular location
within a document. We can navigate different
locations within a document by using the id
attribute.
The id attribute takes a character string as a value.
This value must be unique in the same document,
however it can be reused in different documents.
For ex.,
<a id=top></a>
<a href=#top>Go to Top</a>

# indicates that the value is a fragment identifier.

Source : HTML5 Black Book

Shefali Naik

Hyperlinks
URL
URL refers to a unique address that identifies each web page
on WWW. The common way to access a website is to enter its
URL in the address bar of a Web Browser.
The URL of the website enables you to access files, such as
image files and program files within the website.
Some of the HTML elements also include the URL as an
attribute value, such as <a> element.
A URL can contain file name or an IP address(such as
127.1.1.1). The most common method of providing URL is to
specify the name of the website as names are easier to
remember than IP addresses. A URL consists of 3 parts:
Protocol : Transfers a resource over the web
Domain name : Refers to the machine hosting the resource
Path name : Specifies the path of the resource

Source : HTML5 Black Book

Shefali Naik

Hyperlinks
A resource available on the web, such as
HTML documents, images, video files and
programs has an address that is encoded by
a URL.
All URLs contain a scheme, domain name,
port, path, filename and hierarchical
description that specify the location of a
file on the internet.
The common URL syntax is:
Scheme:// host.domain:port/path/file_name?query#anchor
Source : HTML5 Black Book

Shefali Naik

Hyperlinks
Scheme : Refers to a protocol that is used to
access the file resource. It specifies the type of
the internet service such as http, ftp, etc. The
most commonly used type is http. Schemes and
their Access Points are given below.
Scheme

Access

file

Refers to a file on the local PC

ftp

Refers to a file on the ftp server

http

Refers to a file on the WWW server

Gopher

Refers to a file on gopher server

mailto

Refers to an electronic mail address

News

Refers to a usenet newsgroup

telnet

Refers to a telnet connection

wais

Refers to a Wide Area Information Servers(WAIS)

Source : HTML5 Black Book

Shefali Naik

Hyperlinks
Host : Specifies the domain host. The default domain
host for http is www.
Domain : specifies the internet domain name such as
google.com. The domain is also identified by a
unique IP address. For ex., google.co.in can be
accessed by its IP address 209.85.231.104
Port : refers to the port no. that connects a client
browser to a server. Every scheme has a default port
no. therefore if the port no. is omitted from the
URL, the default port no. of that scheme is used. The
default port no. for http is 80.
Path : specifies a path for the server. Every web
resource has the root directory of a website as the
default path. If the path is omitted, it means the
web resource is located at the root directory of the
website.
Source : HTML5 Black Book

Shefali Naik

Hyperlinks
File_name : specifies a document, information or
program. Every website has the default file name
index.html, which opens when the website loads in the
browser. Therefore, if only
scheme://host.domain:port/path/ is entered in the
browser, it opens the default file of the website.
Query_string : contains the data to be passed to the web
applications. The query string contains parameter and
value pairs separated by the &. In each pair, parameter
and value are separated by an = symbol. The whole query
string is preceded by ? symbol. The general query
structure is :
?parameter1=value1&parameter2=value2..

Anchor : It specifies a particular location on a web page.

For ex., http://www.google.com/books/listing#top
provides address of the beginning of the listing section
on the page.

Source : HTML5 Black Book

Shefali Naik

Example
<!doctype dtml>
<html>
<body>
<a href="tabledemo.html" target="_blank">Open Table Demo</a><br/>
<a href="http://www.google.com" target="_self">Google</a><br/>
<a href="http://www.aesics.ac.in" target="_parent">AESICS</a><br/>
<a href="file://Z:\SHEFALI\2015-2016\HASS Courses offered in iMCA and
MCA.docx" target="_top">HASS Course File</a><br/>
<a href="mailto://naikshefali@gmail.com" target="_top">Send
Mail</a><br/>
</body>
</html>

Source : HTML5 Black Book

Shefali Naik

Using id attribute-Example
<!doctype dtml>
<html>
<a id="squareroot"></a>
<h1> Square Root - Definition </h1>
<h3>In mathematics, a square root of a number a is a number y such that y2 = a, in other words, a number y whose
square (the
result of multiplying the number by itself, or y y) is a.[1] For example, 4 and 4 are square roots of 16 because 42 =
(4)2 = 16.
</h3><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a id="explanation"></a>
<h1>Explanation : </h1>
<h3>Every positive number a has two square roots: a, which is positive, and a, which is negative. Together, these
two roots are denoted a (see shorthand). </h3><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a id="example"></a>
<h1>Examples</h1>
<h3>
sqrt(1)=1
sqrt(4)=2
sqrt(16)=4
</h3>
<h3><a href="#squareroot">Go to Square root definition</a>&nbsp;&nbsp;<a href="#explanation">Go to
Explanation</a>&nbsp;&nbsp;<a href="#example">Go to Example</a></h3>
</body>
</html>

Source : HTML5 Black Book

Shefali Naik

Images
<IMG> element is used to insert image in a web
page. <img> element contains many attributes,
but only src attribute is compulsory, all other
attributes are optional.
scr attribute provides the path of an image file
to the web browser. If your image and HTML file
are stored in the same folder, there is no need to
specify the full path of the image in src
attribute, else it is required to give full path in
scr attribute.
The syntax to insert an image is :
<img src=path of the image file with image file
name/>
Source : HTML5 Black Book

Shefali Naik

Attributes of <img>
Attributes

Description

Title

Displayed as a tooltip.

Src

Specifies URL or location of the image.

Alt

Specifies alternate text to be used is the browser cant

render the image.

Height

Specifies height of the image.

Width

Specifies width of the image.

Ismap

Indicates that the image is used as an image map.

Usemap

Associates an element with an image map.

Source : HTML5 Black Book

Shefali Naik

Different Image Formats

GIF (Graphics Interchange Format) the
extension of GIF file is .gif
PNG (Portable Network Graphics)
JPEG (Joint Photographic Experts Group)

Source : HTML5 Black Book

Shefali Naik

Example of IMG tag

<!doctype html>
<html>
<body>
<img src="file://Z:\SHEFALI\2015-2016\AEISCS-AU
Logo.jpg" height=100 width=300 dir="ltr"
title="Logo of AESICS" alt="Image not
available at the specified location"/>
</body>
</html>
Source : HTML5 Black Book

Shefali Naik

Using Image as a Hyperlink

<!doctype html>
<html>
<body>
<A href=font.html>
<img src="file://Z:\SHEFALI\2015-2016\AEISCS-AU
Logo.jpg" height=100 width=300 title="Logo
of AESICS" alt="Image not
available at the specified location"/>
</A>
</body>
</html>
Source : HTML5 Black Book

Shefali Naik

Image Maps
Image Map represents an image, which contains
sections that work as hyperlinks.
These hyperlinks help you to link multiple web pages to
a single image through an image map.
The linked regions of an image map are called Hot
Regions and each hot region is associated with an HTML
file which opens when the hot region is clicked.
The syntax to create an image map is :
<IMG src=path of an image usemap=#name of the
map/>
<MAP name=name of the map>
<AREA shape=name of the shape
coords=coordinate position href=name of the
target page/>
</MAP>
Source : HTML5 Black Book

Shefali Naik

Image Maps
Attributes of AREA element
Shape
Provides information about the shape of the hyperlink.
Specify rect for rectangle and circle for circle.

Coords
Specifies the position of the hyperlink in the form of X
and Y coordinates.
For circle, 3 coordinates should be specified as :
center_x, center_y and radius.
For rect, 4 coordinates should be specified as : x1, y1,
x2, y2.

Href
Contains path of the web page which is displayed when
user clicks on the image map.
Source : HTML5 Black Book

Shefali Naik

Example of Image Map

<!doctype html>
<html>
<body>
<IMG src="file://Z:\SHEFALI\2015-2016\AEISCS-AU
Logo.jpg" usemap="#SCSLogo">
<MAP name="SCSLogo">
<AREA shape="rect" coords="0,0,169,26"
href=font.html>
<AREA shape="circle" coords="704,51,26"
href=hlid.html>
<AREA shape="square"
coords="408,55,460,84" href=tabledemo.html>
</MAP>
</body>
</html>

Source : HTML5 Black Book

Shefali Naik

Frames
Each web page when opened takes over
the entire browser screen. The browser
screen couldnt be split into separate
sections.
The HTML tag that divide a browser screen
into 2 or more regions is <FRAMESET> tag.
Each unique region is called a frame.
Each frame can be loaded with a different
document.
<FRAMESET> is defined without BODY tag.
Source : HTML5 Black Book

Shefali Naik

Frames
The syntax of <FRAMESET> is:
<FRAMESET rows=values separated by
comma cols=values separated by
comma></FRAMESET>
<FRAME> tag: Once the browser is divided
into different sections using <FRAMESET>
tag, the section could be loaded with
different HTML files using <FRAME> tag.
Following is a syntax of <FRAME> tag.
<FRAME src=URL>
Source : HTML5 Black Book

Shefali Naik

Example
<!DOCTYPE html>
<html>
<frameset rows="30%,70%">
<frameset cols="30%,70%" name="frame1">
<frame src=font.html>
<frame src=tabledemo.html>
</frameset>
<frameset cols="30%,70%">
<frame src=imagedemo.html>
<frame src=hlid.html>
</frameset>
</frameset>
</html>

Source : HTML5 Black Book

Shefali Naik

FORMS
Forms are used to develop interactive web sites
through which user inputs data to the server for
processing and will get some output after data
processing.
A form is an area of a web page that allows the
user to provide his/her information in different
ways such as by entering the text field or by
selecting some options from the list.
HTML enables us to add a form in a web page by
using the FORM element.
After adding the form on the web page, we can
add various controls such as buttons, text fields,
etc.
Source : HTML5 Black Book

Shefali Naik

FORMS

Following are attributes of <FORM> tag.

Attribute

Meaning

Action

Refers to URL of the program in a server which processes the

form

Name

Name of the form

Autocomplete

Enables autocomplete feature in a form

Acceptcharacter

Refers to the character set in the form that can be accepted by

the server

Encrypt

Specifies how the information in the form should be encoded

before sending it to the server

Method

Specifies how information is sent from browser to server

Novalidate

Specifies form should not validate while submitting

Target

Specifies target window type such as new window, same window,

etc.

Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

A form is composed of controls such as
textbox, drop-down listbox, check box, etc.
that enable user to enter the information.
We can create these controls by using the
INPUT element. To do this, type attribute
of the input element should be set. For ex.,
<INPUT type=text> creates a control of
textbox type.

Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

Following are the types of the INPUT element.
Text and search
Tel
Url
Email
Password
Datetime-local
Datetime, date, month, week and time
Number and range
File
Hidden
Checkbox
Radio
Submit
reset
Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

Text and search : It is displayed as rectangular shaped box
that facilitates a user to enter information. It is used to
collect single line information such as name, birthdate,
contactno, email, etc. The following attributes of the INPUT
element specifies the features of the textbox:
Name : provides name to the textbox
Size : defines size of the textbox.
Maxlength : specifies maximum no. of characters the user can enter
in the textbox.
Value : specifies the default text

Following is an example of textbox.

<!DOCTYPE HTML>
<HTML>
<BODY>
<FORM>
<INPUT type="text" name="uname">
</FORM>
</BODY>
</HTML>

Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

Tel : Used to enter telephone numbers. In this, only numbers could
be entered. There is no specific syntax to specify the telephone
number in the input control.
Ex., <INPUT type="tel>
Url : used to enter valid path of a web page. The value of email field
is automatically validated when we submit the form.
Ex., <INPUT type="url">
Email : used to input email address. The value of email field is
automatically validated when we submit the form. We may enter
more than one email addresses in the email field by using multiple
attribute.
Ex., <INPUT type=email">
Password : we may create a password field by using the INPUT
element and by setting the type attribute to password. Password
field is same as textbox but the contents entered in password field
are not readable, therefore it is also referred as a masked
textbox.
Ex., <INPUT type=password">

Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

Datetime-local : Used to input date and time.
Datetime, date, month, week and time : Used
to input date, month, week and time
separately.
Ex., <INPUT type=datetime>
<INPUT type=month>
Number and range : Used to enter only
numbers. It will not allow you to enter
alphabets. The range type allows you to enter
a value within a specific range.
Ex., <INPUT type=number>
<INPUT type=range>
Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

File : It allows the user to select a file stored in the local
computer and send it to the server on submission of the
form. User can specify the path of the file or use browse
option to in file selection field to select the file. If the
pathname exceeds maxlength specified, still the browser
accepts the complete pathname. If the form contains file
selection fields, we need to set enctype attribute of the
form element with value multipart/form-data and the
method attribute with value post. Otherwise, the file
selection field would be considered as a simple textbox and
the contents of the file would not be sent to the server. The
attributes of file type are:
Size : Defines the width of the file selection field
Maxlength : Specifies the maximum no. of characters that can be
entered in the field
Accept : Specifies the type of files that can be submitted through a
file upload

Ex.,
Select File :<INPUT Type="file"><br/><br/>
Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

Hidden : It is used to pass along variables and values from one form
to another, without forcing the user to enter the information. It is
not displayed on the web page by browser. The type attribute is set
to hidden to create hidden field. The attributes of hidden field
are name and value.
Here is the hidden Field <INPUT Type="hidden
value=10><br/><br/>
Checkbox : It is used to select or deselect one or more items from a
given set of items that are displayed on the form. The type attribute
is set to checkbox to display the checkbox. The value attribute is
set with specific value to send it on the server. Following attributes
are used with checkbox control.
Name : name of the checkbox control.
Value : to set value which is to be passed to the server.
Checked : to set default.

Ex.,
Select Fruit : <INPUT Type="checkbox name="Fruit" value="Mango
checked="yes">Mango <br/>
<INPUT Type="checkbox" name="Fruit value="Orange"
checked="yes">Orange<br/>

Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

Radio : It is used to select any one option from the
given list of options. To create a radio button field,
the type attribute is set to radio. Following
attributes could be used with radio button control.
Attribute

Description

Name

Defines name of the radio button

Value

Value of radio button

Checked

Default selection

Ex.,
Select Fruit : <INPUT Type="radio name="gender"
value="Male checked="yes">Male <br/>
<INPUT Type="radio" name="gender
value="option2">Female<br/><br/><br/>
Source : HTML5 Black Book

Shefali Naik

FORMS-Types of Input Elements

Submit : It is used to submit(send) form data to the
server when user clicks on submit button. To create
a submit button, type attribute is set to submit.
Following attributes could be used with the submit
button.
Attribute

Description

Name

Specifies name of the button

Value

Specifies label of the button

Reset : It is used to erase(clear) values of all the

fields of form and set default values. It is created
by setting the type attribute with reset. The
attributes which could be used with reset button
are similar to the attributes of submit button.
Source : HTML5 Black Book

Shefali Naik

FORMS-Button Element
<Button> element is used to add button control on the
form.
It can be used to perform various tasks such as
submitting or resetting the details of the form.
It is used within the <FORM> element.
A button control can also be placed on the form by
using the <INPUT> element, but the difference is that
we cant change the appearance of the of the button,
except changing the text on the button. Using
<BUTTON> element we can change the appearance
also.
It is a container tag. The text, image or any multimedia
embedded between opening and closing tags of the
button becomes the content of the button control.

Source : HTML5 Black Book

Shefali Naik

FORMS-Button Element
The type attribute of <Button> element
allows us to define 3 types of buttons :
Submit button : Used to submit a form. It is
created by setting the type attribute to
submit.
Reset button : Used to reset a form. It is
created by setting the type attribute to
reset.
Normal button : It is created by setting the
type attribute to button.
Source : HTML5 Black Book

Shefali Naik

FORMS-Button Element
The attributes of button element are :
Attributes

Meaning

Autofocus

Focus automatically set on the button when page is

loaded.

Disabled

Disables the button

Form

Refers to the ID of the form element

Formaction

Refers to the value of the action attribute of the

current form

Formenctype

Specifies the value that is used to encode the content

while submitting the content to the server. The values
are :
application/x-www-form-urlencoded (default)
multipart/form-data
text/plain

Source : HTML5 Black Book

Shefali Naik

FORMS-Button Element
Attributes

Meaning

Formmethod

Specifies the methods at the time of submitting

the button control. The values are :
get
post
put
delete

Formnovalidate

Specifies that the form is not to be validated at

the time of submitting the button control.

Formtarget

Specifies the destination such as a new tab or a

new window.

Name

Provides name to the button

Source : HTML5 Black Book

Shefali Naik

FORMS-Button Element
Attributes

Meaning

Type

Specifies the type of the button. The values are :

submit
reset
button

Value

Provides a value to the button control. It is used if

the form attribute is specified.

Ex.,
<button type="normal"><img
src=file://Z:\SHEFALI\2015-2016\AEISCS-AU
Logo.jpg height=20 width=50>
</button><br/><br/>
Source : HTML5 Black Book

Shefali Naik

FORMS-Select Element
SELECT element allows user to select a single
item from list of items.
SELECT element doesnt provide any default
option .
Following are attributes of SELECT element.
Attribute

Description

Disabled

Disable the drop-down list.

Name

Gives name to the DDLB

Size

Defines no. of list items visible at a time

Autofocus

DDL will get the focus as soon as page is loaded

Form

Refers to the form using its ID

Multiple

Allows to select multiple items from the DDLB

Source : HTML5 Black Book

Shefali Naik

FORMS-Select Element
The options are written within the opening
and closing tags of the SELECT element by
using the OPTION element.
Ex.,
<SELECT size=3 multiple>
<option value=mango>mango</option>
<option value=grapes>grapes</option>
<option value=orange>orange</option>
<option value=apple>apple</option>
<option value=seet lime>sweet lime</option>
</select><br/><br/><br/><br/>

Source : HTML5 Black Book

Shefali Naik

FORMS-OPTION Element
It is used to define the options written within the SELECT
element.
The options are created by embedding the OPTION element
within the opening and closing tags OPTION element.
Each option is separately written within a separate set of OPTION
element.
Only plain text could be written within the OPTION element.
Following are attributes of OPTION element.
Attribute

Description

Label

Heading of the several groups

Disabled

Disables the option

Selected

Set option as a default

Value

Specified value will be sent to the server

Source : HTML5 Black Book

Shefali Naik

FORMS-OPTGROUP Element
It is used to create nested and cascading dropdown lists.
In both types of lists, the related items are
grouped under specific headings.
Following are the attributes of OPTGROUP.
Attribute

Description

Label

Heading of the several groups

Disabled

Disables the option

Source : HTML5 Black Book

Shefali Naik

FORMS-OPTGROUP Element
Ex.,
<SELECT size=3 multiple>
<optgroup label="fruits">
<option value=mango>mango</option>
<option value=grapes>grapes</option>
<option value=orange>orange</option>
<option value=apple>apple</option>
<option value=seet lime>sweet lime</option>
</optgroup>
<optgroup label="vegetables">
<option value=mango>cabbage</option>
<option value=grapes>potato</option>
<option value=orange>tomato</option>
</optgroup>
</select>
Source : HTML5 Black Book

Shefali Naik

FORMS-TEXTAREA elements

It is used to define multiline textbox.

It accepts only plain text.
Following are the attributes of TEXTAREA element:
Attributes

Description

Cols

Defines Width of textarea

Rows

Defines permitted no. of rows in textarea

Disabled

Disables textarea

Name

Defines name of textarea

Readonly

Defines textarea which is readonly

Source : HTML5 Black Book

Shefali Naik

FORMS-TEXTAREA elements
Attributes

Description

Autofocus

Set focus automatically when page is loaded

Maxlength

Maximum characters in textarea

Placeholder Provides hints for the input

Required

Entry is compulsory in textarea

Wrap

Allows text wrap. It takes 3 value : soft which includes line

breaks when submitted, hard which put line breaks at the end
of each line and appears exactly as it appers in the textarea, off
means no wrap.

Ex.,
<textarea col=20 rows=6 placeholder="Enter Text"
maxlength=200 required
wrap="hard"></textarea>
Source : HTML5 Black Book

Shefali Naik

FORMS-FIELDSET and LEGEND elements

FIELDSET element is used to group related
controls in a single box.
Attributes of FIELDSET are:
Attribute

Description

Disabled

Disables the related fields

Name

Name of the fieldset control

Form

Refers to form from its ID

The LEGEND element is used to provide

caption for the FIELDSET element.
Source : HTML5 Black Book

Shefali Naik

FORMS-FIELDSET and LEGEND elements

Ex.,
<FIELDSET>
<LEGEND>Provide Login Details</LEGEND>
Name :<INPUT type="text" name="uname
style="color:blue;backgroundcolor:pink"><br/><br/>
Password:<INPUT
type="password"><br/><br/>
</FIELDSET>
Source : HTML5 Black Book

Shefali Naik

FORMS-DATALIST Element
The DATALIST element is used to display the list of predefined
options that the user may want to select as input.
The DATALIST is referred in the INPUT element by specifying
its name in the list attribute. type attribute of INPUT
element is specified as text when datalist is referred.
Ex.,
<INPUT type="text" list="stdname">
<DATALIST id="stdname">
<option value="Ami">
<option value="Avani">
<option value="Aashish">
<option value="Aagam">
</DATALIST>

Source : HTML5 Black Book

Shefali Naik

FORMS-KEYGEN Element
The KEYGEN element is used to generate the
key pair.
When a form is submitted, a key pair which
contains the private and public keys, is
generated using the KEYGEN element to
secure the content of the form.
The private key from the generated key pair is
encrypted and stored in the key database on
local computer.
The public key is encrypted and submitted to
the server along with the form.
Source : HTML5 Black Book

Shefali Naik

FORMS-KEYGEN Element
Following are the attributes of KEYGEN
element.
Attributes

Description

Autofocus

Focus is set automatically on KEYGEN element when page is

loaded.

Challenge

Specifies a string that is used for the verification at the time of

submission of form

Disabled

Disables the control

Form

Refers to ID of a form

Keytype

Specifies security algorithm (rsa, dsa or en) of the key

Name

Name of the KEYGEN control

Source : HTML5 Black Book

Shefali Naik

FORMS-KEYGEN Element
Ex.,
Keygen Element : <KEYGEN
name="key1 challenge="987"
keytype="dsa">

Source : HTML5 Black Book

Shefali Naik

FORMS-OUTPUT Element
OUTPUT element is used to display the result,
which can be written using the JavaScript.
Following are the attributes of OUTPUT
element.
Attributes

Description

For

Associates output with a specific control.

Form

Refers to the ID of the form.

Name

Specifies name of the output element.

Source : HTML5 Black Book

Shefali Naik

FORMS-OUTPUT Element
<!doctype html>
<html>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" min=1 max=500 id="a" value="50">
<input type="number" id="b" min=1 max=50 step=2>

Sum ==> <output name="x" for="a b"></output>

</form>
</html>

Source : HTML5 Black Book

Shefali Naik

FORMS-PROGRESS Element
PROGRESS element is used to display
progress of a task. It is used with
JavaScript. It has 2 attributes value and
max.
Ex.,
<Progress>
</Progress max=500>Task Completed.

Source : HTML5 Black Book

Shefali Naik

FORMS-METER Element
PROGRESS element is used to define scalar
measurement. It is used to display a range
and not a single number.
Ex.,
<meter>
</meter value=35 max=500>Passing Score

Source : HTML5 Black Book

Shefali Naik

AUDIO Element
Attribute

Description

Autoplay

Play automatically when page loads

Controls

Displays controls on the web page

Loop

Replays

Preload

Specifies whether the audio file is

preloaded on web page or not

Src

Provides location of audio

HTML supports only 3 audio file formats

.oog (jargon derived from the game Netrek)
.mp3 (MPEG AUDIO LAYER 3)
.wav (WAVEFORM PCM AUDIO)
Source : HTML5 Black Book

Shefali Naik

Video Element
Attribute

Description

Autoplay

Play automatically when page loads

Controls

Displays controls on the web page

Loop

Replays

Preload

Specifies whether the audio file is

preloaded on web page or not

Src

Provides location of audio

Audio

Controls audio of a video file

Height

Hight of video element

Poster

Provides an image to be displayed when

video file is not available

Width

Width of video

Source : HTML5 Black Book

Shefali Naik

Video Element
HTML supports only 2 video file formats.
.ogv (Ogg Video File)
.mp4 (MPEG LAYER 4 )
<!doctype html>
<html>
<body>
<video src="file://C:\Users\Public\Videos\Sample
Videos\wildlife.mp4" controls></video>
<audio src="tone_6.wav" controls></audio>
</body>
</html>
Source : HTML5 Black Book

Shefali Naik

Embed element
HTML allows embed plug-ins in a web
page.
Embed element is supported by IE and
Netscape Navigator.
3 attributes src, height and width are
compulsory in embed element.

Source : HTML5 Black Book

Shefali Naik

Embed Element
Attribute

Description

Hspace

Sets horizontal padding around the

element

Type

Specifies MIME type for the components

Height

Height of element

Width

Width of element

Source : HTML5 Black Book

Shefali Naik

Embed Element
<!doctype html>
<html>
<body>
<embed src="tone_7.wav" width=600
height=100 hspace=5></embed>
</body>
</html>

Source : HTML5 Black Book

Shefali Naik

Object Element
OBJECT element is used to include objects
such as images, videos, audios, Java
applets, ActiveX controls, PDF(Portable
Document Formats) and Flash Objects in a
web page.
The text written between starting and
ending tags of the OBJECT element is the
alternate text for browsers that do not
support this element.
Source : HTML5 Black Book

Shefali Naik

Object Element
Attribute

Description

Data

Specifies the URL of the objects data

Type

Specifies MIME type for the components

Height

Height of element

Width

Width of element

Form

Specifies form(s) to which the object

belongs

Name

Object name

Usemap

Specifies the URL

Source : HTML5 Black Book

Shefali Naik

PARAM Element
The OBJECT element initializes the object
by passing parameters to the object, which
can be done using the PARAM element.
An OBJECT element can contain multiple
PARAM elements.
Attributes

Description

Name

Name of the parameter

Value

Value of the parameter

Source : HTML5 Black Book

Shefali Naik

 Ex.,
<!doctype html>
<html>
<body>
<object data="tone_6.wav" type="audio/wav">
<param name="BorderStyle" value="5" />
</object>
</body>
</html>
Source : HTML5 Black Book

Shefali Naik

End of Unit-2

Source : HTML5 Black Book

Shefali Naik