Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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 :
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>
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
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
ftp
http
Gopher
mailto
News
telnet
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.
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¶meter2=value2..
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/>
Source : HTML5 Black Book
Shefali Naik
Attributes of <img>
Attributes
Description
Title
Displayed as a tooltip.
Src
Alt
Height
Width
Ismap
Usemap
Shefali Naik
Shefali Naik
Shefali Naik
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
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>
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
Meaning
Action
Name
Autocomplete
Acceptcharacter
Encrypt
Method
Novalidate
Target
Shefali Naik
Shefali Naik
Shefali Naik
Shefali Naik
Shefali Naik
Shefali Naik
Ex.,
Select File :<INPUT Type="file"><br/><br/>
Source : HTML5 Black Book
Shefali Naik
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
Description
Name
Value
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
Description
Name
Value
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
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
Disabled
Form
Formaction
Formenctype
Shefali Naik
FORMS-Button Element
Attributes
Meaning
Formmethod
Formnovalidate
Formtarget
Name
Shefali Naik
FORMS-Button Element
Attributes
Meaning
Type
Value
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
Name
Size
Autofocus
Form
Multiple
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
Disabled
Selected
Value
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
Disabled
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
Description
Cols
Rows
Disabled
Disables textarea
Name
Readonly
Shefali Naik
FORMS-TEXTAREA elements
Attributes
Description
Autofocus
Maxlength
Wrap
Ex.,
<textarea col=20 rows=6 placeholder="Enter Text"
maxlength=200 required
wrap="hard"></textarea>
Source : HTML5 Black Book
Shefali Naik
Description
Disabled
Name
Form
Shefali Naik
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.
Source : HTML5 Black Book
Shefali Naik
FORMS-KEYGEN Element
Following are the attributes of KEYGEN
element.
Attributes
Description
Autofocus
Challenge
Disabled
Form
Refers to ID of a form
Keytype
Name
Shefali Naik
FORMS-KEYGEN Element
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
Form
Name
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>
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
Controls
Loop
Replays
Preload
Src
Shefali Naik
Video Element
Attribute
Description
Autoplay
Controls
Loop
Replays
Preload
Src
Audio
Height
Poster
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>
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.
Shefali Naik
Embed Element
Attribute
Description
Hspace
Type
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.
Source : HTML5 Black Book
Shefali Naik
Object Element
Attribute
Description
Data
Type
Height
Height of element
Width
Width of element
Form
Name
Object name
Usemap
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
Value
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
Shefali Naik