Unit-2 Working With Links, Images, Forms and Multimedia PDF

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

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
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
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)
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.
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.
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>
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> <a href="#explanation">Go to
Explanation</a> <a href="#example">Go to Example</a></h3>
</body>
</html>
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/>
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.
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)
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>
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>
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>
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.
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>
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.
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>
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>
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.
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.
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.
Shefali Naik

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
Shefali Naik

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>
Shefali Naik

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

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>
Shefali Naik

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/>
Shefali Naik

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/>
Shefali Naik

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/>
Shefali Naik

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.
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.
Shefali Naik
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.
Shefali Naik
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
Shefali Naik
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
Shefali Naik
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/>
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
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/>
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
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
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>
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
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>
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.
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>
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>
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.
Shefali Naik
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
Shefali Naik
Ex.,
Keygen Element : <KEYGEN
name="key1 challenge="987"
keytype="dsa">
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.
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>
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.
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
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)
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
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>
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.
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
Shefali Naik
Embed Element
<!doctype html>
<html>
<body>
<embed src="tone_7.wav" width=600
height=100 hspace=5></embed>
</body>
</html>
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.
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
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
Shefali Naik
Ex.,
<!doctype html>
<html>
<body>
<object data="tone_6.wav" type="audio/wav">
<param name="BorderStyle" value="5" />
</object>
</body>
</html>
Shefali Naik
End of Unit-2
Shefali Naik

Unit-2 Working With Links, Images, Forms and Multimedia PDF

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Unit-2 Working With Links, Images, Forms and Multimedia PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Unit-2 Working with Links,

Images, Forms and Multimedia

_blank : Opens the linked document in a new unnamed

Source : HTML5 Black Book

# indicates that the value is a fragment identifier.

Source : HTML5 Black Book

Refers to a file on the local PC

Refers to a file on the ftp server

Refers to a file on the WWW server

Refers to a file on gopher server

Refers to an electronic mail address

Refers to a usenet newsgroup

Refers to a telnet connection

Refers to a Wide Area Information Servers(WAIS)

Source : HTML5 Black Book

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

Source : HTML5 Black Book

Source : HTML5 Black Book

Source : HTML5 Black Book

Specifies URL or location of the image.

Specifies alternate text to be used is the browser cant

Specifies height of the image.

Specifies width of the image.

Indicates that the image is used as an image map.

Associates an element with an image map.

Source : HTML5 Black Book

Different Image Formats

Source : HTML5 Black Book

Example of IMG tag

Using Image as a Hyperlink

Example of Image Map

Source : HTML5 Black Book

Source : HTML5 Black Book

Following are attributes of <FORM> tag.

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

Name of the form

Enables autocomplete feature in a form

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

Specifies how the information in the form should be encoded

Specifies how information is sent from browser to server

Specifies form should not validate while submitting

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

Source : HTML5 Black Book

FORMS-Types of Input Elements

Source : HTML5 Black Book

FORMS-Types of Input Elements

FORMS-Types of Input Elements

Following is an example of textbox.

Source : HTML5 Black Book

FORMS-Types of Input Elements

Source : HTML5 Black Book

FORMS-Types of Input Elements

FORMS-Types of Input Elements

FORMS-Types of Input Elements

Source : HTML5 Black Book

FORMS-Types of Input Elements

Defines name of the radio button

Value of radio button

FORMS-Types of Input Elements

Specifies name of the button

Specifies label of the button

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