unit-2 working with links, images, forms and multimedia.pdf

Unit-2 Working with Links, Images, Forms and Multimedia

Lectures-8, Marks-10

Source : HTML5 Black Book Shefali Naik

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.


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


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.


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


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


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)


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.


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#topprovides address of the beginning of the “listing” section on the page.

http://www.google.com/books/listing


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://[email protected]" target="_top">Send Mail</a><br/>

</body></html>


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>


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”/>


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 can’t 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.


Different Image Formats

• GIF (Graphics Interchange Format) – the extension of GIF file is .gif

• PNG (Portable Network Graphics)

• JPEG (Joint Photographic Experts Group)


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>


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>


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>


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.


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>


Frames • Each web page when opened takes over

the entire browser screen. The browser screen couldn’t 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.


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


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>


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.


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

Accept-character

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.


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.


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


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>


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


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


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


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


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.

– 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/>

Attribute Description

Name Defines name of the radio button

Value Value of radio button

Checked Default selection


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.

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


Name Specifies name of the button

Value Specifies label of the button


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 can’t 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.


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


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


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


FORMS-Button Element

• Ex.,<button type="normal"><img

src=file://Z:\SHEFALI\2015-2016\AEISCS-AU Logo.jpg height=20 width=50> </button><br/><br/>

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.

//pdc8/BCA-Faculty/Shefali/SHEFALI/2015-2016/AEISCS-AU Logo.jpg













FORMS-Select Element• SELECT element allows user to select a single

item from list of items.• SELECT element doesn’t provide any default

option .• Following are attributes of SELECT element.


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


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


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.


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


FORMS-OPTGROUP Element• It is used to create nested and cascading drop-

down lists.• In both types of lists, the related items are

grouped under specific headings.• Following are the attributes of OPTGROUP.


Label Heading of the several groups

Disabled Disables the option


FORMS-OPTGROUP ElementEx.,

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


FORMS-TEXTAREA elements• It is used to define multiline textbox.• It accepts only plain text.• Following are the attributes of TEXTAREA element:


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


FORMS-TEXTAREA elementsAttributes 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>


FORMS-FIELDSET and LEGEND elements

• FIELDSET element is used to group related controls in a single box.

• Attributes of FIELDSET are:

• The LEGEND element is used to provide caption for the FIELDSET element.


Disabled Disables the related fields

Name Name of the fieldset control

Form Refers to form from its ID


FORMS-FIELDSET and LEGEND elements

• Ex.,

<FIELDSET>

<LEGEND>Provide Login Details</LEGEND>

Name :<INPUT type="text" name="uname“

style="color:blue;background-color:pink"><br/><br/>

Password:<INPUT type="password"><br/><br/>

</FIELDSET>


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>


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.


FORMS-KEYGEN Element

• Following are the attributes of KEYGEN element.


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


FORMS-KEYGEN Element

• Ex.,

Keygen Element : <KEYGEN name="key1“ challenge="987" keytype="dsa">


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.


For Associates output with a specific control.

Form Refers to the ID of the form.

Name Specifies name of the output element.


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>


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.


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


AUDIO ElementAttribute 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)


Video ElementAttribute 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


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>


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.


Embed ElementAttribute Description

Hspace Sets horizontal padding around the element

Type Specifies MIME type for the components

Height Height of element

Width Width of element


Embed Element

<!doctype html>

<html>

<body>

<embed src="tone_7.wav" width=600 height=100 hspace=5></embed>

</body>

</html>


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.


Object ElementAttribute Description

Data Specifies the URL of the object’s 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


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.


Name Name of the parameter

Value Value of the parameter


• Ex.,

<!doctype html>

<html>

<body>

<object data="tone_6.wav" type="audio/wav">

<param name="BorderStyle" value="5" />

</object>

</body>

</html>


End of Unit-2

unit-2 working with links, images, forms and multimedia.pdf

Documents

linked document

attribute value

target resource

href attribute

file resource

common url syntax

current window

web domain