Post on 12-Jan-2016
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.
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¶meter2=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.
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> <a href="#explanation">Go to
Explanation</a> <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 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.
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 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.
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
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.
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.
– 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
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.
– 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.
Attribute Description
Name Specifies name of the button
Value Specifies label of the 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 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.
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
• 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.
Source : HTML5 Black Book Shefali Naik
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.
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 drop-
down 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 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>
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 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>
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:
• The LEGEND element is used to provide caption for the FIELDSET element.
Attribute Description
Disabled Disables the related fields
Name Name of the fieldset control
Form Refers to form from its ID
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;background-color: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 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)
Source : HTML5 Black Book Shefali Naik
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
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 ElementAttribute 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 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
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>