H T M L 5: Ankit Singh 1

H
T
M
L
5 ANKIT SINGH 1
ANKIT SINGH 2
HTML Introduction
What is HTML?
HTML is a markup language for describing web documents (web pages).
 HTML stands for Hyper Text Markup Language

 A markup language is a set of markup tags
 HTML documents are described by HTML tags
 Each HTML tag describes different document content
Access to information: The Internet provides access to information on various

topics, such as sports, news, and education.
Communication: The Internet enables easy and rapid communication across the
world through a number of services, such as emails, chats, and social networks.
Data transfer: The Internet helps in transferring a large amount of data, such as
files and Images.
Electronic-commerce (e-commerce): The Internet is also used as a medium of

trade by buyers and sellers, Increasing their reach and reducing tune and
geographical gaps. This is known as e-commerce, which IS defined as the process
of buying and selling of goods and services electronically.
A Small HTML Document

Example:-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
ANKIT SINGH 3
Example Explained:-
 The <!DOCTYPE html> declaration defines this document to be HTML5

 The text between <html> and </html> describes an HTML document
 The text between <head> and </head> provides information about the
document
 The text between <title> and </title> provides a title for the document
 The text between <body> and </body> describes the visible page
content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes a paragraph
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps the
browser to display a web page correctly.There are different document types. To
display a web page correctly, the browser must know both type and version.
The doctype declaration is not case sensitive. All cases are acceptable:
Like
<!DOCTYPE html>
<!doctype HTML>
ANKIT SINGH 4
The <HTML> Declaration
The Hypertext Markup Language (HTML), the standard programming language for
describing the contents and appearance of Web pages. an HTML document. The opening
HTML tag, and the closing HTML tag, < 'HTML),
The <HEAD> Declaration

The <head> element is a container for metadata (data about data) and is placed between the <html>
tag and the <body> tag.
The elements can go inside the <head> element:
 <TITLE>
 <MEAT>
 <BASE>
 <STYLE>
 <LINK>
 <SCRIPT>
 <NOSCRIPT>
The <TITLE> Declaration

The <title> element:
 Only one title of the html page

 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the html page in search-engine
The <META> Declaration

The <Meta> tag use to specify some keywords for your website so that
they can be easily searched by search engines. To implement such functionality. you can
use the <META> tag. The <META> tag provides additional information about the current
document in the form of name and value pairs
(META name="keywords" content="hote1, online, booking ">

(META name=”author" content="Harry Anem")
ANKIT SINGH 5
The <BASE> Declaration
The <Base> tag is used to URL (Uniform Resource Locator) or address for all the
related links on a page. The hosting Images in a website located in a particular
directory. To access these Images, you can specify path of the directory by using the
href attribute of the <Base> tag.
Example:-
<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The Base Tag Example</TITLE>
<BASE href=”D:\Images\”>
</HEAD>
<BODY>
<IMG src=”img1.jpg”></IMG><BR>Best Book For HTML
</BODY>
</HTML>
The <STYLE> Declaration

The Style is used to Making a webpage attractive colors and styles in the browser you
can used style tag.
Example:-
<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The Style Tag Example</TITLE>
<style>
h1 {
color: red;
ANKIT SINGH 6
font-size: 14px;
P{
Font-style:italic;
</style>
</HEAD>
<BODY>
<h1>The Style using for style Tag</h1>
<p>Its Provides Online Booking</p>
</BODY>
</HTML>
The <LINK> Declaration

The < LINK>tag is used to establish the relationship current document to other
document and you create a best look and feel than you use the style sheet connect on
link tag
<link href=”StyleHome.css” rel=”stylesheet”>
The <SCRIPT> Declaration

The <script>tag use for client-side script, such as JavaScript, associated with the
document. to add Interactivity to Web pages. This tag contains various attributes that
help you add scripts in a Web page.
Example:-
ANKIT SINGH 7
<! DOCTYPE HTML>
<HTML>
<BODY>
<SCRIPT type="text/javascript">
var name=prompt("Please Enter Your Name","like John");
alert("Welcome "+name);
</SCRIPT></BODY>
</HTML>
prompts users to enter name by using the prompt() function and displays this name
in a message box by using the alert() function.
Please Enter Your Name
The alert ( ) function code displays the message, Welcome John when the OK
button in the prompt is clicked.
The <NOSCRIPT> Declaration

The <NOSCRIPT> tag display an alternate content on the browsers on which the script
have been disable or on the browsers that do not support client side scripting.
<! DOCTYPE HTML>
<HTML>
<BODY>
ANKIT SINGH 8
<SCRIPT type=”text/javascript”>
Document.write(Welcome To the Ankit Singh Website!)
<SCRIPT>
<NOSCRIPT>Your browser does not support script</NOSCRIPT>
</BODY>
</HTML>
The <Noscript> tag code display the text Your browser does not support scripts
If the script are not supported by the browser.
Applying Headings
The HTML allows SIX levels of headings, ranging from <H1> to <H6> The <H1> tag
is used to define the topmost heading, whereas the <H6> tag is used to define the
lowest-level heading
Example:-
<HTML>
<HEAD></HEAD>
<BODY>
<H1>This Example is Heading 1 </H1>
<H2> This Example is Heading 2 </H2>
<H6> This Example is Heading 3 </H6>
</BODY>
</HTML>
ANKIT SINGH 9
Adding paragraphs
You can use the new paragraphs in a HTML
 <p>
 <DETAILS>
 <SUMMARY>
<P>
The <p> tag add a new paragrphs in the HTML Document.the <p>
Tag is a container the browsers automatically add one line space before and
after the content.
Example:-
<BODY>
<P>Welcome to the first website </P>
<p>Created by Mr. Ankit singh</P>
</BODY>
<DETAILS>
The additional content that a user can view or hide as per requirement to be
used details tag in your HTML document.
<BODY>
ANKIT SINGH 10
<DETAILS>
<P> We provide Computer Education for all type </P>
</DETAILS>
</BODY>
<SUMMARY>
A heading for the <DETAILS> TAG Users can click this heading to view or hide
the details.
Example:-
<BODY>
<DETAILS>
<SUMMARY>Categories of Computer Education</SUMMARY>
<P>ADCA,DCA,BASIC,TALLY,HTML,JAVA,C,C++,C#,COREL DROW,PHOTO
SHOP</P>
</DETAILS>
</BODY>
ANKIT SINGH 11
Defining a Layout
The layout of a Web page and separate individual elements or content should be
displayed on the Web page.
<DIV>
<SPAN>
<DIV>
The <DIV>tag is used to define a section in a document. It is used to group of
sections as blocks
<SPAN>
The <span> tag enables you to group and apply styles to inline elements. The tag is
dependent on the style attribute on a particular word and line.
<BODY>
<p>The demo of the <span style=”color:blue;font-size:16px;”> sapn </span>

tag</p>
</BODY>
ANKIT SINGH 12
Formatting a Web Page
The content on a Web page needs to be attractive content of the Web page by using formatting tags.
 <B>
 <I>
 <U>
 <LI>
 <BR>
 <HR>
<B>
The <B> tag is used to bold font face.
<BODY>
<B>You can Read online HTML Code</B>
</BODY>
<I>
The <I> tag is used to Italic font face.
<BODY>
<I> You can Read online HTML Code </I>
</BODY>
ANKIT SINGH 13
<U>
The <U> tag is used to underline the text
<BODY>
<U> You can Read online HTML Code </U>
</BODY>
<LI>
The <LI> tag is used to create a lists. In HTML Document represented with special set
of tags.
 Ordered or Numbered list
 Unordered or Bulleted list
 Definition list
Ordered or Numbered list

The ordered or a number list represents a set of items in a sequence or an order.
<BODY>
<P>Our ranking in the computer classes industry</p>
<ol><li>Ranked 1st for best teacher</li>
<li>Ranked 2nd for best education </li>
<li>Ranked 3rd for we provide high education</li><ol>
</BODY>
ANKIT SINGH 14
Unordered Or Bulleted List
Unordered or bulleted list represents a set of related items that do note follow a
specific order.
<BODY>
<ul><li>HTML </li>
<li>JAVA</li>
<li>C#</li></ul>
</BODY>
Definition list
The definition tag used one or more terms definition are to be included in an
HTML document. Its represent by the <DL> tag. And this tag to comprises two
other tags <DT> and <DD>
<BODY>
<DL>
<DT>Title1</DT><DD>This is a first definition</DD>
<DT>Title2</DT><DD>This is a second definition </DD>
</DL>
</BODY>
ANKIT SINGH 15
<BR>
The <BR> tag is used to break of the line code.
<BODY>
Welcome to the HTML<br> Book To Create by Ankit singh
</BODY>
<HR>
The <HR> tag is used to create a horizontal line
<BODY>
Welcome to the HTML<br><hr>
Book To Create by Ankit singh
</BODY>
ANKIT SINGH 16
Adding Images
The images are used to create more interesting as ideas are well
communication with images and graphics.
GIF:-
The Graphic Interchange Format The most commonly-use image format on
the web.
JPEG:-
Joint Photographic Experts Group The format is used when the image
is a photograph medical image or complex photographic
PNG:-
Portable Network Graphics The format is used an alternative to GIF
the PNG format a defines a portable well-compressed and well-
specified standard for bitmapped image files.
<BODY>
<IMG src=”ankit.jpg”></IMG>
</BODY>
ANKIT SINGH 17
Attributes for <image>
Alt The alt attribute is use to alternate text for an image this attribute
work only your image cannot display a browser.
Height the attribute display a height your image in a browser.

Width the attribute display a width your image in a browser.
<IMG src=”D:\image\ankit.jpg” alt=”ankit” height=”400”
width=”300”>
ANKIT SINGH 18
Adding Navigation Links
The navigation links tag is using to link one page to another page using <A> tag
and attribute href or frame this attribute link image multimedia files to each
other.
href the href attribute specifies the URL to connect the document using
hyperlink
<A href=”Honepage.html”>Book Your course</A>
target the target attribute is use a browser windows you can refer to
another windows by using the target attribute
<A href=”Aboutus.html” target=”frame1”>About Us</A>
Adding Multimedia Components

The multimedia Element is used to adding audio video sound in a website and
improve visual effect of the website.
 <AUDIO>
 <VIDEO>
<AUDIO>
The <audio>tag provide adding a audio in a web page.
<AUDIO controls=”controls” src=”audio1.mp3”>Your browser does not

support this audio format.</AUDIO>
<VIDEO>
The <video> tag is provide displaying a video on a web page.
<VIDEO width=”320” height=”240” controls=”controls”

autoplay=”autoplay” src=”D:\video\video2.mp4”> Your browser does
not support this video format.</VIDEO>
ANKIT SINGH 19
Measuring Data and Displaying a Progress
Bar
The progress bar is use to display a progress for downloading and uploading file
such as image video audio in disk space.
 <METER>
 <PROGRESS>
<METER>
The <meter> tag a scalar measurement within a used to display disk usage.
<P>Display a meter</p>
<METER value=”4” min=”0” max=”10”></METER>
<PROGRESS>
The <progress> tag is used to display the progress of the task.
Progress of a task:
ANKIT SINGH 20
<PROGRESS value=”12” max=”100”></PROGRESS>
Semantic tags
 <HGROUP>
 <ARTICLE>
 <ASIDE>
 <HEADER>
 <FOOTER>
 <NAV>
 <FIGURE>
<hgroup>
You need to group related heading and sub heading than you used to<hgroup>
tag.
<HDROUP><H1>Book your course</H1>
<H2>Rating of the course</H2>
<H6>shot Course</H6></HGROUP>
<ARTICLE>
The <ARTICLE> tag an independent or a self-contained content
<ARTICLE><H1>Book your course</H1>
ANKIT SINGH 21
<p>This Course is specifically designed to provide details about your
course</p></ARTICLE>
<ASIDE>
the <aside> tag is used the write a note or a tip
<ASIDE><P>Get discounts on book course today</P></ASIDE>
<HEADER>
The <HEADER> tag is used to defined website heading you can used multiple
<HEADER> tag.
<HEADER><H1>Book Your course </H1>
<p>An easy way of booking your course</p> </HEADER>
<FOOTER>
The <FOOTER> tag is used to add a footer in your web page.
<FOOTER>Author: Ankit singh</FOOETR>
<NAV>
The <Nav> tag is used to group of link created by using <A> tag.
ANKIT SINGH 22
<NAV>
<A href=”Course”>Course</A>|
<A href=”About”>About Your Course</A>|
<A href=”Booking”>Booking</A></NAV>
<FIGURE>
The <FIGURE> tag is used to self-contained such as images diagrams photo.
<FIGURE><FIGCAPTION>HD Image</FIGCAPTION><IMG
src=”localimg.jpg” alt=”image” width”300” height=”400”></FIGURE>
ANKIT SINGH 23
Working With Style
The style of the web page depends upon look and feel of the HTML element use same
look and feel for all web pages you used to Cascading Style Sheet (CSS)
Different ways for Apply Style sheet
 Inline style
 Internal style sheet
 External style sheet
Inline Style
Inline style is use to particular paragraph tags the Inline style are attached directly with
the HTML tag.
<HTML>
<BODY><P style=”font-size: 24px; color: red;”>Course book of 2nd July

</p><p>Compare the course from other course</p></BODY>
</HTML>
Internal Style Sheet

The internal sheet is used to multiple element in a same style using inline style
<html>
ANKIT SINGH 24
<head>
<style type=”text/css”>
P{color:red; font-size:20px; font-style:italic;}
</style>
</head>
<body>
<p>Welcome to the first internal style created by Ankit singh</p>
<p>compare to the other book</p>
</body>
</html>
External Style Sheet

The external style sheet is used to multiple webpages with same and equal styles in the
page using External style sheet with CSS formatting.
P
{
color:red; font-size:20px; font-style:italic;
}
H1
{
color:blue;
}
Save the code mystyle.css
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
ANKIT SINGH 25
<h1>Welcome to the first internal style created by Ankit singh</h1>
<p>compare to the other book</p>
</body>
</html>
CSS SELECTORS
To use a style any tag and you uniquely identified one than you can used CSS Selector
user defined CSS selectors ID and Class selector
Implementing the ID selector

An ID selector is used to deferent type of style than used to ID selector an ID selector
is defined by using hash symbol (#)
<HTML>
<HEAD>
<STYLE>
P
{
color:red;
}
#pname
{
color:green;font-size:20px;font-weight:bold;
}
</STYLE>
ANKIT SINGH 26
</HEAD>
<BODY>
<p id=”pname”>Welcome to the HTML Book</p>
<p>Book Reading facility </p>
</BODY>
</HTML>
Implementing the CLASS selector

The class selector is used to apply the same style on different types of elements in the
HTML document the class selector is defined by (.) dot symbol.
<html>
<head>
<style>
h1
{
Font-size:20px;
color:red;
font-weight:bolt;
}
h2
{
Font-size:20px;
color:red;
font-weight:bolt;
}
P
{
Font-size:20px;
color:red;
font-weight:bolt;
ANKIT SINGH 27
}
</style>
</head>
<body>
<h1>Welcome to the Ankit singh website</h1>
<h2>this site is very user friendly</h2>
<p>this site is gives information of all the HTML tag</p>
</body>
</html>
Using class selector

<html>
<head>
<style>
.name{
Font-size:20px;
color:red;
font-weight:bolt;
}
</style>
</head>
<body>
<h1 class=”name”>Welcome to the Ankit singh website</h1>
<h2 class=”name”>this site is very user friendly</h2>
<p class=”name”>this site is gives information of all the HTML tag</p>
</body>
ANKIT SINGH 28
</html>
 Font
 Text
 Link
 List
 Background
Font
Font properties is used to customize the text is display
P
{
Font-family: “Haettenschweiler”;
Font-size:20px;
}
h1
{
Font-variant:small-caps;
Font-style:italic;
}
Valid Values
PROPERTY Definition Sample Usage
ANKIT SINGH 29
Font-Family Is used to set the font Different font types,such {font-family: arial, times
type for a text. as times new roman, roman; }
courier, verdana,
Helvetica, arial, and san –
serif
Font-Size Is used to set the size of a Font size may be {font-size:12px: }

text. specified in px, percent, { font- size: 100% ; }
or in absolute units (large { font- size:x- small; }
or small) { font -size:x- large; }
Font-Style Is used to set the style for Normal, italic, or oblique { font – style : italic ; }
a text.
Font-Variant Is used to specify Normal or small-caps { font -variant : small-

whether a text should be caps : }
displayed in small copy
font or in a normal font.
Font-Weight Specifies how the Normal or bolder decimal { font – weight : bold ;}
characters in a text values from 100 to 900 { font- weight : “ 600” ; }
should be displayed.
Font Is used to set all Font-style|| Font : italic bold 15px

properties in one font –variant|| arial ;
declaration. font – weight||
font – size|| font-family
Text
Text properties Is used to change the colour alignment of text element.
P
{
letter-spacing:2px;
line-height:12px;
}
h1
{
color: red;
text-align: center;
}
Property Definition Valid Values Sample Usage
ANKIT SINGH 30
text-align Is used to set the horizontal Left | right | Center {text – align : center; }
Alignment of the HTML | Justify
Element.
Text-indent is used to the set the Length in pixels | {text –intent:25px; }

indentation of the first line Percentage {text –indent:5#; }
in a block of text.
line-height Is used to specily the height of a normal | number | {line-hight:10pt; }

line length in pixels | {line-height:100#; }
percentage {line – height: normal;
}
Direction Is used to specify the text direction ltr | rtl {direction: rtl; }
i.e. left to right or
Right to left
Vertical- Is used to set the vertical alignment (sub | super {vertical-align: sub ;
Align of the Html | baseline) || }
Element. Length in pixels || {vertical-align:50#;
percentage }
{vertical-align: -
30px; }
{vertical-align:-
20px; }
Color is used to set the color of A HEX value, on rgb {color: red ; }
text. Value, of a color name. {color: # 00ff00;}
color:rgb(0,0,255 ) ;
text-decoration Is used to specify the none | underline | {text-
decorations that can be over line | line- Decoration: underline;
added to a text through }
text- Is used to control the Capitalize | {text- .

transform capitalization of text Uppercase | Transform: uppercase;
lowercase | none }
letter- is used to set the spacing normal | length {letter-spacing:4pt;

spacing between the characters where, length specifies }
in text an extra space between
Characters. Negative {letter-spacing:-2pt;
Values are also allowed. }`
word –spacing Is used to set the spacing normal | length {vord-spacing:3px ;
between the words in a }
text.
Link
ANKIT SINGH 31
Link properties is used to customize the link in the HTML document.
 Link: An unvisited link

 Visited: A visited link
 hover: this is work mouse is placed or moved over
 active: A link as it appears it is clicked
<style>
a: link
{
color:blue;
}
a:visited
{
color:red;
}
a: hover
{
color:pink;
}
a:active
{
color:green;
}
</style>
List
list properties is used to look of the order and unordered HTML lists.
Ul
{
list-style-type:square;
list-style-position: inside;
}
Property Definition Valid Values Sample

usage
is used to specify the inside outside (List-style-
its--style-position position of list-item position:
markers according to the inside :)
content flow:
ANKIT SINGH 32
its-style-type Disk I circle I square { list – style-
I decimal I type: upper-
is used to specify the type Lower-roman | alpha. }
of the list-item markers. Upper-roman |
Lower-roman |
Upper-alpha |
Lower-Latin |
Upper-lain |none|
ist-style-image is used to specify an urn | none ( list –style_

image on list –item image : urn
markers. (plus.gif’ ) : )
ist – style Sets all the properties in type || position || { list –style :
one declaration image Square outside
url (plus . gif ) ; }
Background
Background properties is used to specify the background color image of the HTML
element.
<style>
Body
{
Background-color:lavender;
}
</style>
Background – color Is used to set background Color \ transparent (background – color :

color of an HTML yellow ; )
element.
Background - image Is used to set None \ url (background – image :

background image of an url ( ‘ img . gif ’ ) ; )
HTML element.
Background Sets all the properties in Background – color \ (background : green url
one declaration. background - image ( ‘ img . gif ‘ ) } ;
Grouping Style
ANKIT SINGH 33
Style are uses to apply same style more than one selector by combining them.
H1,p
{
color:red;
}
Nesting Style
Nesting style used to style element inside the other element style this style used to
better look and feel.by using the class and ID selector.
Selector Example Description
Element1>element2 Div>p Select all the <p> elements, where <Div> is their immediate -
Parent element.
Element1 element2 Div p Select all the <p> elements inside the <Div> element.
Element1 + element Div+p Select the <p> element that is placed immediately after the <Div>
element.
element 1 + div+p Selects the

element 2 <p> element that is
placed immediately after the <DIV> element.
element 1 – element 2 div –p Selects all

the <p> elements that follow the
<DIV>
Element
 hidden: hide the element form a web page.
 visible: show the element on a web page.
Positioning HTML Element

If you can change the default position of HTML document than you used to the
placement of element
 Position
 Float
Position
ANKIT SINGH 34
The position property is used to set the position an element on a web page.
Positioning Method Description
Static In static positioning elements are positioned according to the normal

flow of the page.
Fixed In fixed positioning, elements are positioned relative to the browser

window. They will not change their position even if the browser window
is scrolled.
Relative In relative positioning, an HTML elements is positioned relative to its

normal position.
Absolute In absolute positioning, an element can be placed at a fixed position on

the Web page. Its position will not be affected by the flow of other
elements.
Property Definition Valid values Sample

Usage
Is used to set the bottom margin Auto | length| (Bottom: 5px
Bottom for the positioned element ;)
Top Is used to set the top margin Auto| length| (Top: 5px ;)
for the positioned element. percentage
Left Is used to set the left margin Auto | length| (Left: 5px ;)
Right Is used to set the right margin Auto | length| (Right: 5px ;)
Position Is used to specify the Static | absolute (Position:

positioning method to be used | fixed | relative static ;)
for on element.
Float
the float property is used to place the HTML element to left or right margin.
float: left | right | none
 left: set the element to the left.
 right: set the element to the right.
 none: the element does not float it is default value of float.
<html>
<head>
<style>
img
ANKIT SINGH 35
{
float:left;
}
.auto
{
clear:both;
}
</style>
</head>
<body>
<img src=”hotel1.jpg” height=”300” width=”500”></img>
<p> Description and Services

Located on the hills of Nice, a short distance from the famousPromenade des
Anglais, Hotel Anis is one of the hotels in theCosta Azzurra (or Blue Coast) able
to satisfy the different needs of its guests with comfort and first rate services. It
is only 2 km from the airport and from highway exits. The hotel has a large
parking area , a real luxury in a city like Nice.</p>
<p class=”auto”>At Hotel Anis you will be welcomed amongst olive trees,
citron trees and magnolias, in gardens that hide exotic plants and in a wonderful
outdoor pool with deck chairs; protected against the sun’s rays by big umbrellas
you can enjoy a drink amongst thewisteria bushes, and find peace and
tranquillity enjoying Costa Azzurra’s mild climate.
The spacious rooms of this beautiful Mediterranean residenceoffer the possibility
of enjoying a rich breakfast buffet on thesplendid outdoor terrace where guests
may continue to enjoy frequent sunny days and mild temperature, even during
the winter months.
If you are looking for peace and tranquillity after days spent walking amongst
the city streets or under the sun, the Hotel Anis ofNice offers refreshments in its
refined indoor rooms. The lounge bar, open 24 hours a day and
the restaurant, available for grandwedding events are all in elegant air
conditioned rooms. The restaurant service is also available on the terrace.
The hotel’s reception is open 24 hours a day and offers bookingservices for
guided tours to Monte Carlo, Saint Paul de Venceand excursions by
boat towards Antibes and Cannes or to the nearby Isola 2000 ski resorts.
</p>
</body>
</html>
Clear
The clear property is used to turn off the float effect on HTML element.
 both: Clears float from either direction.
 left: Clears float from the left direction.
 right: clears float from the right direction.
ANKIT SINGH 36
Applying Transitions
You want to change the color of the HTML element from red to black in the event is
mouse hover event the CSS transition provide a way to moderately change the HTML
element from one position to another.
<html>
<head>
<style>
Div
{
width:200px;
height:200px;
background:red;
-webkit-transition:width 4s;
-o-transition:width 4s;
}
div:hover
{
width:400px;
}
</style>
</head>
<body>
<div></div>
ANKIT SINGH 37
</body>
</html>
Before mouse hover
After mouse hover
Applying Animations
To apply animation effects on HTML elements. You can create an animation that will
increase the size of the element when user clicks.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
ANKIT SINGH 38
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its

original style.</p>
</body>
</html>
Applying transformations
You want to rotate a cube having different pictures on its curves. CSS provides the
functionality of transformations to modify the HTML element.
2D transforms
2d transforms you can apply various transformations such as rotations or translations on
HTML element.
<html>
<head>
<style>
div
{
width:200px;
height:100px;
ANKIT SINGH 39
background-color:red;
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3D
HTML element by using 3D transforms. The using transform methods
RotateX() Rotate element at given degree around X-axis.

RotateY() Rotate element at given degree around Y-axis.
Project Time
Home style
h3{color: darkgreen; font-family: algerian; position:absolute; right: 130px;

top: 320px;}
ANKIT SINGH 40
aside p{text-align: center; background-color: darkgreen; color: white; font-
size: 15px; }
body{background-color:#D51165; backgound-image: src("D:\ankit\3D\

70.jpg"); background-repeat: repeat-x;}
details{color: darkgreen; font-family: algerian; font-size:15px;}
h1{font-family: algerian; color: darkgreen; font-size:20px; position: absolute;

top: 0px;right:50px;}
article p{color: black: font-size: 15px; font-family: arial; width: 550px; }
h5{font-family:arial; color: white; font-size: 16px; float:right;}
h2{color: darkgreen; font-family:relative; top: 0px;left: 500px;}
details ul{color: #D51165; font-size: 15px;}
h4{color: darkgreen; font-family: algerian;}
video{position: absolute; right:50px top:380:}
#mainDivContainer H4{color: darkgreen; font-size:24px;}
#callus{float: right; right:500px;}
#call{float: right; right:5px; position: absolute; top: 370px; right: 130px;}
NAV a:hover{color:pink;}
NAV A{text-decoration: none; color: white;}
Home.Html
<html>
<head>
<title>
UpComingMovies
ANKIT SINGH 41
</title>
<link rel="shortcut icon" href="movie_run.png">
<link type="text/css" rel="stylesheet" href="homestyle.css"/>
<link type="text/css" rel="stylesheet" href="ucm.css"/>
</head>
<body><div style="position: relative;width:150px;height:auto;padding-top:100px;

float:left;">
</div>
<div id="mainDivContainer" style="position: relative; width: 100%;margin-top: 0px;

margin-bottom: 0px;">
<div style="width: 960px; margin-top: 5px; margin-left: auto; margin-right: auto;">
<div style="width: 960px; height: 80px;">
<img id="logo" src="movie.png" width="100" height="100">
<h5>For Enquiry<br>Call Us 8802136955</h5>
<img id="callus" src="hi.jpg" height="50" width="50">
</div>
<div style="width:500px; height:20px; padding-left:100px text-align:center; ">
<span class="auto-style1"><b><marquee>The Ultimate Way For Booking Movie

Tickets</marquee></b></span></div>
<div id="topnav" style="float:left; width:960px; height: 20px; word-spacing: 15px; font-

size: 90%; padding-top: 6px; white-space: nowrap; text-align:left; background-color:
black;">
<nav>
<A href="homepage.html">Home</A>|
<A href="aboutus.html">AboutUs</A>|
<A href="contactus.html">ContactUS</A>|
ANKIT SINGH 42
<A href="UpComingMovie.html">UpcomingMovies</A>|
<A href="Onlinebooking.html">OnlineBooking</A>
</nav>
</div>
<div style="width: 960px height: auto; position: relative; margin: 0px; padding: 29px;
overflow: hidden; background-color: white;">
<h4>Currently, showing...</h4>
<img src="207.jpg" width="222" height="200">
<img id="call" src="202.jpg" width="222" height="200" >
<h3>Latest Hot offer</h3>
<article>
<p>ShowOnWheels is an emerging enterainment Company in the fied of the booking

online movie tickets in INDIA.
We pioneered cinema halls in INDIA by establishing the first multiplex cinema in 2001 and
the largest 9-screen multiplex cinema in 2007.
With its head office in Los Angeles, ShowOnWheels is now serving the viewers of major us
cities.</p>
<p>Waiting in queues to book tickets for your favorite movie in now a matter of post.
ShowOnWheels empowers you by offering a platform to book movie tickets anyware ,

anytime.Whether shopping in a mall,
ANKIT SINGH 43
enjoying a vacation at a Miami beach,partying in a discotheque, attending a confernce , or
taking Your pet for a walk, ShowOnWheels is there to reserve Your hot seat in your
favorite cinema.</p>
<aricle><br><br><br><br><br>
<details>
<summary><b>Currently, operating in:</b></summary>
<ul>
<li>Los Angeles<li>Chicago<li>Houston</li><ul>
With an annual turnover of INDIA $12 million ShowOnWheels is expending its wings. We
are lanunching three new screens in South Africa, shortly.
The area most in flux in relation to the new media elements has to do with synchronized
media playback, multiple audio, video, and text tracks, and media element accessibility.
As to be expected, these areas also have the least implementation support.
A new addition to the HTML5 media elements is the new media controller object. This
object provides for synchronized playback among multiple audio and video elements
in a web page. When implemented, we should be able to play video and/or audio files
in multiple elements in the web page via one controller user interface.
Another new addition is support for multiple audio and video tracks within the media
resource. When this functionality is implemented, we should be able to pick from
among a list of audio tracks in different languages, play director commentary along
with the video, or enjoy picture-in-picture support.
There’s also browser support for multiple text tracks, too. Currently, browsers parse
the track element and it becomes part of the Document Object Model (DOM), but no
browser yet processes the track element’s contents and provides the caption or subtitle
text. Happily, though, there are JavaScript libraries that can process the captions or
subtitles within the track elements, giving us at least some interim functionality, as we’ll
see at the end of the chapter.
</details>
ANKIT SINGH 44
<h1><br>Hurry Heavy Discounts on weekend...</h1>
<aside>
<p>
<i><b>ShowOnWheels values its customers. We keep you updated with our new discounts
and offers.We appreciate your association!</b></i></p></aside>
<video width="380" height="268" controls autoplay="autoplay" loop>
<source src="" type="video/mp4"/>
your browser does not support this video format.</video>
</div>
</div>
</div>
</body>
</html>
ANKIT SINGH 45
ANKIT SINGH 46
Working with Tables and
Frames
Table are used for structuring and displaying complex information in a structuring format
on a web page.
Frames provide a mechanism for positioning and displaying several web pages in
different section of a single browser window.
Creating Tables
If you want to show the result information on your website than you need to creating a
well structured of table on a webpage using tables. Tables represent complex
information in a simple and easy to understand manner. By using tables
The Basic Structure of a Table

The user for preparing different certification exams of MySQL. Once registered for an
online exam a user is provided a login ID and password the test result of the candidates.
Specifying Table Body

the table body contain data arranged in row further comprise one or multiple columns
the body of the table can be group by using the <tbody> tag.
Creating Row
The Adding rows in the table using <tr> tag. The contents place between <tr>and </tr>
tag
Creating Columns
The adding the columns to the <td> tag the <td> tags are uses within <tr>
and </tr> tags.
<html>
<body>
<table border="2">
<tbody>
<tr><th>Name</th>
ANKIT SINGH 47
<th><ul>Login Id</th>
<th>Course Name</th>
<th>Marks</th></tr>
<tr class="alt"><td>steve</td>
<td>01234</td>
<td>My sql 5 Developer certified professional Exam,part I </td>
<td>92</td></td>
<tr><td>John</td>
<td>01235</td>
<td>Mysql 5 Developer Certified Professional Exam, part II</td>
<td>85</td>
<tr class="alt"><td>Joseph</td>
<td>01236</td>
<td>Mysql 5 Database Administrator Certified Professional Exam, Part
I</td>
<td>98</td>
<tr ><td>Michel</td>
<td>01237</td>
<td>Mysql 5 Database Administrator Certified Professional Exam, part
II</td>
<td>25</td>
</tr>
</tbody>
</body>
</html>
ANKIT SINGH 48
Combining Multiple Rows and Columns into a Single cell
That only the column of the first row should extend to four columns and display
the heading Top Three performers. The remaining rows of the table should
have four separate columns.
Using the rowspan and colspan attribute
<html>
<body>
<table border="2">
<tbody>
<tr><th colspan="4"><center>Top Three
Performers</center></th></tr>
<tr><th>Name</th>
<th>Coutse Name</th>
<th>Marks</th></tr>
<td>01234</td>
<td>92</td></td>
<tr><td>John</td>
<td>01235</td>
<td>85</td>
<td>01236</td>
I</td>
<td>98</td>
<td>01237</td>
II</td>
<td>25</td>
</tr>
ANKIT SINGH 49
</tbody>
</body>
</html>
Rowspan Example:
<html>
<body>
<table border="2">
<tbody>
<tr><th rowspan="6"><center>Top Three
<tr><th>Name</th>
<th>Marks</th></tr>
<td>01234</td>
<td>92</td></td>
<tr><td>John</td>
<td>01235</td>
ANKIT SINGH 50
<td>85</td>
<td>01236</td>
I</td>
<td>98</td>
<td>01237</td>
II</td>
<td>25</td>
</tr>
</tbody>
</body>
</html>
The Table Caption
The users to understand the information that the table display for creating a
table title the using the <caption> closing tag </caption
<html>
<body>
<table border="2">
<caption>Test Results</caption>
ANKIT SINGH 51
<tr><th rowspan="6"><center>Top Three
<tr><th>Name</th>
<th>Marks</th></tr>
<td>01234</td>
<td>92</td></td>
<tr><td>John</td>
<td>01235</td>
<td>85</td>
<td>01236</td>
I</td>
<td>98</td>
<td>01237</td>
II</td>
<td>25</td>
</tr>
</body>
</html>
ANKIT SINGH 52
<html>
<head>
<style>
th
{
font-size:18px;
text-align:center;
padding-top:3px;
background-color:#BDB76B;
color:#006400;
}
caption
{
font-size:35px;
color:black;
}
td
{
font-size:15px;
border:1px solid #008B8B;
padding:3px;
background-color:khaki;
ANKIT SINGH 53
}
tr.alt td
{
color:#F0E68C;
background-color:#B22222;
}
</style>
</head>
<body>
<table border="2">
<caption>Test Results</caption>
<tr><th colspan="4"><center>Top Three

<tr><th>Name</th>
<th>Marks</th></tr>
<td>01234</td>
<td>92</td></td>
<tr><td>John</td>
<td>01235</td>
<td>85</td>
<td>01236</td>
I</td>
<td>98</td>
<td>01237</td>
ANKIT SINGH 54
II</td>
<td>25</td>
</tr>
</body>
</html>
ANKIT SINGH 55
ANKIT SINGH 56
ANKIT SINGH 57
Accessing Multiple Web Page Using Frames
Which makes it look like a single page. This is made possible by using the
concept of frames. A frame is a rectangular region in a browser window.
The first frame that is named as HeaderFrame display the name of the website.
The second frame that is named as NavigationFrame contains the links to the
various MySQL courses. The third frame that is named as ContentFrame display
the web page.
The <IFRAME> Tag

the HTML <iframe> tag is used to specify an inline frame. It allows you to divide
a web page into sections or frames.
 src is used to the location or the URL of the web page.
 name is used assign a name of the frame
 seamless is a Boolean attribute
 srcdoc is used to an HTML code that defines the content to be

display inside the frame.
 Height is used to set the height of the frame
 Width is used to set the width of the frame
Home.HTML page
<html>
<body>
ANKIT SINGH 58
<iframe src="head nav.html" name="headerframe"
width="100%"height="135"></iframe>
<iframe src="nav.html" name="navigationframe"

width="25%"height="500"></iframe>
<iframe align="right"
name="contentFrame"width="74%"height="500"></iframe>
</body>
</html>
NAV.HTML
<html>
<head>
<style>
body
{background-color:#00C0F3;}
ul {margin:0; padding:0;list-style:none width:350px}
ul li a{display:block; text-decoration:none; color Black; background:

#B3ECFC; padding: 5px border:1px solid #ccc; border-bottom:0;}
ul{margin:0;padding:0;list-style:none;width:320px;}
li:hover ul{display: block;}
a:hover{background-color:#5E9DC9;}
</style>
</head>
<body>
<ul><li><A href="E:\book niit\new folder\HTML5 Media.pdf"

target="contentFrame">HTML</A></li>
<li><A href="E:\book niit\new folder\"

target="contantFrame">SQL</A></li>
<li><a href="">ASP.NET</a></li><ul>
</body>
ANKIT SINGH 59
</html>
HEAD NAV.HTML
<html>
<head>
<style>
body
{background-color:#00C0F3;}
h1{color:white;font-size:45;}
</style>
</head>
<body>
<center>
<h1 >Learn HTML</h1>
</body>
</html>
ANKIT SINGH 60
ANKIT SINGH 61
Project Time
Home style
h3{color: darkgreen; font-family: algerian; position:absolute; right:

130px; top: 320px;}
ANKIT SINGH 62
aside p{text-align: center; background-color: darkgreen; color: white;
font-size: 15px; }
body{background-color:#D51165; backgound-image: src("D:\ankit\

3D\70.jpg"); background-repeat: repeat-x;}
details{color: darkgreen; font-family: algerian; font-size:15px;}
h1{font-family: algerian; color: darkgreen; font-size:20px; position:

absolute; top: 0px;right:50px;}
article p{color: black: font-size: 15px; font-family: arial; width: 550px; }
h5{font-family:arial; color: white; font-size: 16px; float:right;}
h2{color: darkgreen; font-family:relative; top: 0px;left: 500px;}
details ul{color: #D51165; font-size: 15px;}
h4{color: darkgreen; font-family: algerian;}
video{position: absolute; right:50px top:380:}
#mainDivContainer H4{color: darkgreen; font-size:24px;}
#callus{float: right; right:500px;}
#call{float: right; right:5px; position: absolute; top: 370px; right:

130px;}
NAV a:hover{color:pink;}
ANKIT SINGH 63
NAV A{text-decoration: none; color: white;}
Ucm style
<style>
table{position:absolute; top:140px; left:10px; right:120px; border:solid

4px green;}
td{text-align:center;border:solid 1px green; padding:3px;}
th{background-color:green; color:white;border:solid 1px green;}
tr{color:green}
</style>
Ucm.HTML
<html>
<head>
<title>
UpComingMovies
</title>
<link rel="shortcut icon" href="movie_run.png">
<link type="text/css" rel="stylesheet" href="homestyle.css"/>
<link type="text/css" rel="stylesheet" href="ucm.css"/>
<script type="text/javascript">
function onlinebooking()
ANKIT SINGH 64
alert("The Bookings for the Upcoming Movies are not Currently
Available");
}</script>
</head>
<body><body><div style="position:
relative;width:150px;height:auto;padding-top:100px; float:left;">
</div>
<div id="mainDivContainer" style="position: relative; width:

100%;margin-top: 0px; margin-bottom: 0px;">
<div style="width: 960px; margin-top: 5px; margin-left: auto; margin-

right: auto;">
<div style="width: 960px; height: 80px;">
<img id="logo" src="movie.png" width="100" height="100">
<h5>For Enquiry<br>Call Us 9225648543</h5>
<img id="callus" src="hi.jpg" height="50" width="50">
</div>
<div style="width:500px; height:20px; float: left; text-align:center;">
<span class="auto-style1"><b>The Ultimate Way For Booking Movie

Tickets</b></span></div>
<div id="topnav" style="float:left; width:960px; height: 20px; word-

spacing: 15px; font-size: 90%; pading-left:60px; padding-top: 6px;
white-space: nowrap; text-align:left; background-color: black;">
<nav>
<A href="homepage.html">Home</A>|
<A href="aboutus.html">AboutUs</A>|
<A href="contactus.html">ContactUS</A>|
<A href="UpComingMovie.html">UpcomingMovies</A>|
<A href="Onlinebooking.html">OnlineBooking</A>
</nav>
ANKIT SINGH 65
</div>
<div style="width: 960px height: AUTO; position: relative; margin: 0px;

padding: 29px; overflow: hidden; background-color: white;">
<h4><b><i><center>UpcomingMovies</center></i></b><h4>
<table><tr><th>Movie Category</th>
<th>Movie Title</th>
<th colspan="3">starring</th>
<th>Director</th>
<th>Release Date</th>
<th>Certificate</th>
<th>Online Bookings</th></tr>
<tr>
<td rowspan="2">Thriller</td>
<td>A Dame to kill for</td>
<td>Jennifer Lawrence</td>
<td>Patrick</td>
<td>Evan</td>
<td>Freddie Highmoree</td>
<td>12 Jan,2015</td>
<td>INDIA</td>
<td><a onclick="onlinebooking();" >BookYourShow</a></td></tr>
<tr><td>prisoners</td>
<td>Evan Rachel Wood</td>
<td>Rachel Wood</td>
<td></td>
<td>Victoria A.</td>
ANKIT SINGH 66
<td>19 Jan,2015</td>
<td>INDIA</td>
<td><a href="">BookYourShow</a></td></tr>
<tr><td rowspan="3">Romantic</td>
<td>A Walk to remember-II</td>
<td>Ellen page</td>
<td>Rechel Wood</td>
<td>Victoria</td>
<td>Freddie Highmoree</td>
<td>27 Feb, 2013</td>
<td>india</td>
<td><a href="">BookYourShow</a></td></tr>
<tr><td>Twilight Saga</td>
<td>patrick</td>
<td>Wood A.Han</td>
<td>Victoria</td>
<td>Victoria A.</td>
<td>17 May,2015</td>
<td>india</td>
<td><a href="">bookyourshow</a></td></tr>
<tr><td>if only_ii</td>
<td>Ellina smith</td>
<td>Rachel Wood</td>
<td></td>
<td>Robert vann</td>
<td>23 june, 2015</td>
<td>a</td>
ANKIT SINGH 67
<tr><td rowspan="4">Action</td>
<td>star wars</td>
<td>robert</td>
<td>logan lerman</td>
<td></td>
<td>ariana grande</td>
<td>23 june, 2015</td>
<td>india</td>
<tr><td>man of steel</td>
<td>patrick</td>
<td>rachel wood</td>
<td></td>
<td>victoria</td>
<td>17 may,2015</td>
<td>india</td>
<td><a href="">bookyourshow<a></td></tr>
<tr><td>area 52</td>
<td>dianna</td>
<td>alice</td>
<td></td>
<td>robert s. vann</td>
<td>28 sep, 2015</td>
<td>a</td>
<tr><td>2 guns</td>
<td>illiana</td>
<td>john park</td>
ANKIT SINGH 68
<td>ankit</td>
<td>josh hutcherson</td>
<td>23 oct, 2015</td>
<td>india</td>
<td><a href="">bookyourshow</a></td></tr></table></div>
</body>
</html>
ANKIT SINGH 69
ANKIT SINGH 70
Scripting
Types of Scripting
Create a dynamic and interactive web page you need to incorporate a block of code the
script can be executed either by the web browser. The requests is send to a computer
that is placed at a different location on the World Wide Web. Computer on which the
browser is running is known as the client.
 Client-side scripting
 Server-side scripting
Client-side Scripting
Client side scripting refers to the scripts that are executed at the client side by the web
browser running on the user’s computer some of the languages used for creating client
side scripts are client side JavaScript (CSJS)
Server-side Scripting
Server-side scripting refers to the scripts that are executed by the web server on the
basis of the user’s request. Some of the languages used for creating server-side scripting
are server-side JavaScript (SSJS)
ANKIT SINGH 71
Benefits of javaScript
 Handle events java Script can be used to execute functions whenever an

event is triggered
 Gather browser information java script can be used to gather browser

information such as the browser name and version.
 Manipulate cookies java script can be used to access and store user
information such as client preferences and authentication information of a client
computer in the form of cookies.
Implementing JavaScript
JavaScript is one of the most popular scripting languages. It can be used to provide
functionality to a web page.
Two type of implement scripting in a web page
A script can be embedded directly into a web page by writing the javaScript code inside
the <script> tag. Or writing the JavaScript code in an external JavaScript (.js) file.
Embedding a script tag
<html>
<body>
alert(‘Welcome to JavaScript’);
</SCRIPT>
</body>
</html>
Creating an External file
The external JavaScript file is saved with the .js extension.
alert(“Welcome products on sale :\n”+”1. LEO Mobile\n”+”2. LEO Cmera\

n”+”3. RED shoes\n”+”4. KP Watch”);
save the file as sale.js
<html>
ANKIT SINGH 72
<body>
<h1>By Products</h1>
<SCRIPT type=”text/javascript” src=”sale.js”>
</SCRIPT>
</body>
</html>
Save the file as home.html
Rules and Conventions Used in JavaScript
 Semicolons: JavaScript does not compulsorily require a semicolon to

indicate the end of the statement.
 Quotes: JavaScript allows you to use either double-quotation marks(“ ”)

or single quotation marks(‘ ’) to enclose string of characters.
 Case sensitivity: JavaScript is a case-sensitive scripting language.
 Comments: Comments are statements that are not executed by the

interpreter single line comment are indicated by using // and multi-line comment
are indicate by using the symbols /* and*/.
Defining Variables
A variables is a named location in memory that is used to store a value.
Quantity=5
Price=250
Declaring a variable
The using a variable in your program you should declare it first. JavaScript allow to
declare a variable by using the var keyword.
var var_name;
var employeeName ;
Assigning a value to a variable
 Assigning a value to a variable after its declaration
 Initializing a variable while declaring it
ANKIT SINGH 73
 Initializing a variable without declaring it
Assigning a value to a variable after its declaration
var employeeName;
employeeName=”Peter”;
initializing a variable while declaring it
var employeeName=”peter”;
initializing a variable without declaring it Explicitly
employeeName=”peter”;
using Operators
<html>
<body>
var employeeName;
var basicSalary;
var othersAllowance;
var TotalSalary;
employeeName=”peter”;
basicSalary=20000;
otherallowance=1000;
TotalSalary=basicSalary+otherAllowance;
</SCRIPT>
</body>
</html>
ANKIT SINGH 74
Operator Categories
 Arithmetic Operators
 Assignment Operator
 Arithmetic Assignment Operators
 Comparison Operators
 Logical Operators
Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on variable and literals.
Assignment Operator
ANKIT SINGH 75
An assignment operator (=) is used to assign a value or a result of an expression to a
variable.
Arithmetic Assignment Operators
Arithmetic assignment operators are used to perform arithmetic operations and assign
the value to the variable a the left side of the operator
Comparison Operators
Comparison operators are used to compare two value and perform an action on the basis
of the comparison.
ANKIT SINGH 76
Logical Operators
Logical operators are used to evaluate complex expressions in which there is a need to
evaluate a single expression or multiple expressions to assess the result.
Conditional Constructs
 The if…else Construct
 The switch…case Construct
The if…else Construct
ANKIT SINGH 77
The if statement in the if…else conditional construct is followed by a logical expression in
parenthesis.
Syntax of the if else construct
If(exp.)
//statements;
Else
//statements;
Example
var age=5;
if(age<12)
alert(‘Sorry ! this game is for children above 12 years’);
Else
alert(‘Play the Game’);
Switch case Construct
Syntax for switch case
switch(variableName)
case ConstantExpression_1 :
//statement;
break;
ANKIT SINGH 78
case ConstantExpression_2 :
//statements;
break;
case ConstantExpression_n:
//statements;
break;
default:
//statements;
break;
Loop Constructs
 The while loop
 The do while loop
 The for loop
The while loop
Syntax for while loop
while(expression)
statements;
Example
var num=0;
while(num<20)
{num=num+1; alert (num);
ANKIT SINGH 79
</SCRIPT>
The do while Loop
The do while loop is similar to the while loop but do while loop execute at least one time
Syntax for do while loop
do
{ statements;}
while(condition);
Example
var num=0;
do
{num=num+1;
alert (num);
while(num<20)
</SCRIPT>
ANKIT SINGH 80
The for Loop
The for loop allow the execution of a block of code depending on the result of the
evaluation of the text condition.
Syntax for Loop
for (initializa variavle ; text condition ;step value)
//code block
 Initialize variable : Intializes the loop variable to a value
 Text Condition: the condition to be checked before execution statement

in the code block.
 Step value : the increment or decrement to be performed for every

iteration the execution of the for loop starts.
var num;
ANKIT SINGH 81
var sum=0;
for(num=100;num<200;num++)
Sum=sum+num;
alert(sum);
</SCRIPT>
Break and Continue Statements
Break
The break statement is used to exit the loop
while(test condition)
//statement1;
if(test condition1)
break;
//statement2;
//statement3;
Continue
The continue statement is used to skip all the subsequent instruction and take the
control back to the beginning of the loop.
while(test condition)
//statement1;
if(test condition1)
ANKIT SINGH 82
continue;
//statement2;
//statement3;
Function
 Built-in functions
 User-defined functions
Built-in Functions
Built-in function are ready to use as they are already coded the built-in functions
supported by JavaScript.
 isNaN ()
 parseInt ()
 parseFloat ()
 evel ()
 prompt ()
 confirm ()
isNaN ()
the isNaN function determines whether a parameter is not a number. The function return
true if the parameter is not a number
<html>
<body>
num1="Two thousant";num2=8000;
Result=isNaN(num1);alert(Result);
res=isNaN(num2); alert(res);
</SCRIPT>
ANKIT SINGH 83
</body>
</html>
parseInt ()
the parseInt () function parse the string parameter and return the corresponding integer.
X=”5”;
Y=parseInt(x);
parseFloat ()
the parseFloat () function takes a string parameter and returns a floating point number.
X=”6.5”;
y=parseFloat(x);
eval()
the evel () function is used to evaluate or execute a parameter if the is a expression.
var res1=0; res1=evel(5+100;
alert(res1);
</SCRIPT>
prompt ()
the prompt () function is used to display a prompt dialog box allow a user to input value.
<html>
<body>
<script>
var a,b,c;
a=parseInt(prompt("Enter number :1"));
b=parseInt(prompt("Enter number :2"));
c=a+b;
ANKIT SINGH 84
document.write(c);
</script>
</body>
</html>
confirm ()
the confirm () function is used to display a dialog box that will enable a user to verify or
accept a task. If user clicks the ok button the confirm () function return true. If the user
clicks the cancel button the confirm () function return false.
<html>
<body>
var response;
response=confirm("Do you wish to continue");
if(response==true)
alert("you can proceed further");
else
alert("you cannot proceed further");
</SCRIPT>
</body>
</html>
User-defined Functions
The user-defined function you to define your own function according to your needs.
Creating Functions
Create by function keyword
ANKIT SINGH 85
function functionName (variable1,variable2)
//function statement
A user-defined function can optionally accept a list of parameters.
Calling a Function
A function is called by using the function name .
functionName ();
Returning values from a Function
A function can return a value through the return statement.
Function functionName()
var variable=10;
return variable;
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
ANKIT SINGH 86
ANKIT SINGH 87
Creating Forms
The data entered using these form elements needs to be processed further upon
submission. Every web page should respond to end user actions such as clicking
a submit button.
Designing an HTML Form
Customers to place online order with various details such as the name contact
number and address in an online form named as Order Food Online.
Create Form
If you create a form on a web page you need to <form> tag. The <form>
Tag is define a form has on opening <form> tag and closing </form> tag.
The <form>tag supports the attribute.
 Name
 Id
 Action
 Method
 Autocomplete
 Novalidate
 Target
Name
The name attribute is used to specify a unique name uniquely identify a ID
form in the get or post methods
<form name=”user defined name”></form>
ID
ANKIT SINGH 88
The ID attribute is used to uniquely identify a form element on a web page.
<form ID=”user defined Id”></form>
Action
The action attribute is used to the URL of the document assumed as the location
for the form submission.
<form action=”filename or URL”>
Method
The method attribute is used to be submitted to the file or the URL action
attribute.
 Get
 Post
Get
The get value form data to the URL of the form submission. The size of data that
can be submitted using the get method.
Post
The post value dose not append the form data to the URL of the form submitted.
A large amount of data can be sent using the post method.
Autocomplete
The autocomplete attribute is used to a form should have the autocomplete on

or off.
<form Id=”fileId” autocomplete=”on”>
Novalidate
The novalidate attribute that the date in the form should not be validate by the
browser.
<form ID=”fileID” novalidate>
Target
the target attribute is used to the name of thee frame or the window in which
response after submission.
<form target=”_blank | _self | _parent | _top | frame_name ”>
ANKIT SINGH 89
 _blank: the response should be displayed in a new frame or
windows.
 _self: the response the same frame
 _parent: the response the parent frame or window.
 _top: the response in the full body of the window.
 Frame_name: the response in the specified frame.
<form name=”OrderFoodOnline” ID=”Order_food” method=”post”>…

</form>
Form Elements
 <INPUT>
 <SELECT>
 <LABEL>
 <FIELDSET>
 <TEXTAREA>
 <DATALIST>
 <KEYGEN>
 <OUTPUT>
 <BUTTON
<INPUT>
The <INPUT> tag. Is used to input inside A form the input fields are various type
such as text box radio button or check box. Some important attributes type
value name ID autocomplete autofocus form required pattern and placeholder.
Type
The type attribute is defined the type of input field to be added on the form.
ANKIT SINGH 90
 Text creates a single line text field. Type attribute is text two
additional attribute size and maxlength, the size attribute is used for
limiting the character. The maxlength attribute is defined the maximum
number of characters.
 First Name:<input type=”text” Name=”fname” size=”20”

maxlength=”20”>
Password
The password field which will not display the characters being typed by the user.
Actual show the values for each character ****.
<input type=”password” name=”accountpassword”>
Radio
A radio button used to select one of the options from a set of given options.
<input type=”radio” name=”rating of Hotel” checked >5-start<br>
<input type=”radio” name=”rating of hotel”>budgeted
Checkbox
A checkbox is used to select one or more option from a set of given options.
ANKIT SINGH 91
<input type=”checkbox” name=”Cuisine1” value=”Continental Cuisine”>
Continental Cuisine <input type=”checkbox” name=”Cuisine2” value=”Chinese
Cuisine”> Chinese Cuisine
Submit
A submit button is used to the form data submit to the specified location using
action attribute of the form.
Formaction
It is used to a URL the form data would be submitted the submit button is
clicked.
Formmethod
It is used to the method such as get and post the form data will be sent to the
file or URL in the action attribute of the form
Reset
A reset button clears the values entered by a user in the form fields.
<input type=”reset” name=”reset”>
URL
That is used to enter a URL of a website the value in this field is automatically
validated the form is submitted.
<input type=”URL” name=”locator”>
Email
ANKIT SINGH 92
A field in an HTML form to accept the email address from the users.
<input type=”email” name=”email_id”>
Range
Creates a slider control to enter a numeric value within a range.
<input type=”range” max=”50” min=”10” step=”5” value=”10”>
Date
Is used to define a date field in a HTML form.
<input type=”date” name=”bday”>
Time
Is used to define a time field in an HTML form.
<input type=”time” name=”user_time>
Number
ANKIT SINGH 93
Is used to create an input field for entering a numeric value.
<input type=”number” name=”quantity” min=”0” max=”50”>
Tel
is used to accept a telephone number form the user.
<input type=”tel” name=”usrtel”>
Image
Is used an image to be used as a submit button. The value of the type attribute
is image
<input type=”image” src=”img_submit.gif” alt=”submit” width=”48”

height=”48”>
Required attribute
The required attribute is used an input field must not be left empty while
submitting the form.
<input type=”text” name=”username” required>
Placeholder
Is used to a simple value for the input filed that will be displayed until the user
enters a value
<input type=”text” placeholder=”type your name” name=”fname”>
ANKIT SINGH 94
Select Tag
The select tag is a container tag it create a drop-down list in the form.
Option Tag
It is always used within the <select> tag. Option tag is used to create a list of
option in the drop-down list.
 Selected is used that a particular option comes pre-selected.
 Value is used to value of the option to be sent on the form

submission.
 Disabled that an option should be disabled when the page load.
Optgroup Tag
Group the related options in one group.
 Disabled is used to the option group should be shown disables

whan the page load.
 Label used to a label for the option group.
Label
Is used to define a label for the input fields.
 For is used to bind the <label> tag with the input field same value
as the Id attribute
 Form is used to the name of one or more forms.
Textarea
ANKIT SINGH 95
Text area tag is used the user can enter a large amount of text.
 Rows set the number of row of text that will be visible without
scrolling up or down in the field
 Cols set the number of columns of text that will be visible without
scrolling right or left in the field.
Datalist
The datalist tag is used to create a pre-defined options for an input fields.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<html>
<head>
<style>
ANKIT SINGH 96
body
background-color:#FFEBCD;
.autostyle
color:red;
font-size:20px;
text-align:center;
</style>
</head>
<body>
<form action ="registration.html">
<table>
<tr class="autostyle">
<td colspan="2">OrderFoodOnline</td></tr>
<tr><td width="100%" colspan="2"></td></tr>
<tr><td><label for="name">Name:</lable></td>
<td><input type="text" name="username" Id="name"

placeholder="Enter Your Name" required></td></tr>
<tr>
<td><label for="date">Date:</label></td>
<td> <input type="date" name="date" Id="date"

required></td></tr>
<tr><td><label for="email" >Email ID: </lable></td>
<td><input type="email" name="useremail" Id="email"

placeholder="Enter Your Email Id"
ANKIT SINGH 97
Required></td></tr>
<tr>
<td><label for="Number">Contact Number</label></td>
<td><input type="tel" name="usrtel" ID="number"

placeholder="Enter Youe phone Number"
required></td></tr>
<tr><td><label for="Food">Select Food:</label></td>
<td><label for="nonveg">Non-vegetarian</label> <input

type="radio" name="food" id="nonveg">
<label for="veg">Vegetarian</label>
<input type="radio" name="food" id="veg"></td></tr>
<tr>
<td><label for="restro">Selec Restaurant:</label></td>
<td><select>
<option value="opt1">Select Your Restaurants</option>
<option value="opt2">La Figa</option>
<option value="opt3">Benihana</option>
<option value="opt4">Gallipoli</option>
<option value="opt5">Kings Road

SteakHouse</option></select></td></tr>
<tr><td><label for="drinks">Drinks:</label></td><td>
<select>
<option value="opt6">Select Your Drink</option>
<option value="opt7">Caffelatte</option>
<option value="opt8">Cappuccino</option>
</select></td></tr>
<tr><td><label for="soups">Soups:</label></td>
ANKIT SINGH 98
<td><select><option value="opt9">Select Your Soup of Your
Choice</option>
<option value="opt10">Minestrone</option>
<option value="opt11">Fonduta</option>
<option value="opt12">pasta e fagioli</option></select></td></tr>
<tr><td><label for="dishes">Dishes:</label></td><td>
<select><option value="opt13">Select the dishes of Your

choice</option>
<optgroup label="Italian">
<option value="opt14">Pasta</option>
<option value="opt15">Fish</option>
<option value="opt16">Rice</option>
</optgroup>
<optgroup label="Chinese">
<option value="opt17">Chowmin</option>
<option value="opt18">Manchurian</option>
<option value="opt19">Water chessnut

cake</option></optgroup></select></td></tr>
<tr><td><label for="orderFor">Order For:</label></td><td>
<label for="pickup">Take Away</label>
<input type="radio" name="picku" id="pickup"> <label

for="home">Home Delivery</label><input
type="radio" name="pickup" id="home"></td></tr>
<tr><td><label for="orderfor">Address:</label></td>
<td><textarea rows="3" cols"16" id="orderfor">Enter Your Address

Hera</textarea></td></tr>
<tr><td><label for="State">State:</label>
</td><td>
<input list="state" name="stat" id="state">
ANKIT SINGH 99
<datalist id="state">
<option value="Alabama">
<option value="California">
<option value="Delaware">
<option value="Florida">
<option value="Hawaii"></datalist><br>
</td></tr>
</table>
</form>
</body>
</html>
Output
Is used to represent the result of a calculation.
ANKIT SINGH 100

 For is used to the relationship between input fields useds and the
result generated for the calculation.
 Form the name of one or more forms to which the output tag
belongs.
 Name a name for the output tag.
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="50">
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
Button
Is used to create a button input type submit.
 Type is used to accept the value such as button submit and reset
<html>
<head>
<style>
#button{margin-left:50px;}
...</style>
</head>
<body>
...</tr>
<tr><td>
ANKIT SINGH 101

<button id="button
type="submit"><p>Submit</p></button></td><td><button
type="reset"><p>Reset</p></button></td></tr>
</body>
</html>
ANKIT SINGH 102

Working with Browser Object
A web page is displayed in a browser a user can access information not only
about the current page but also additional details such as information about
window and screen the pages the user has visited in the past or the version the
browser begin used to view the document.
 Window
 Document
 Navigator
 Screen
 History
 Location
Browser object represent the browser environment and provide properties and
methods for its access and manipulation.
Using the window Object
The window object is one of the highest level objects in the javaScript Object
hierarchy. It represents a browser window which display the document.
ANKIT SINGH 103

ANKIT SINGH 104
A new window displaying the hotel booking form click the hotel image:
Function open_win()
ANKIT SINGH 105

Windows.open
(“hotelBooking.html”,”height=100 ,width=200”)
Create a clock on web page
<html>
<head>
function clockTime()
{var todayDate=new Date();
var hrs=todayDate.getHours();
var mns=todayDate.getMinutes();
var scs=todayDate.getSeconds();
mns=check(mns);
scs=check(scs);
document.getElementById('displayTime').innerHTML=hrs+":"+mns+":"
+scs;
t=setTimeout('clockTime()',1000);
function check(t)
if(t<10)
t="0"+t;
return t;
ANKIT SINGH 106

</SCRIPT>
</head>
<BODY onload="clockTime()">
<DIV ID="displayTime"></DIV>
</BODY>
</html>
Using the document object
The document object model hierarchy. The document object provides the
properties and methods to work with many aspects of the current document
including information about forms links title current location and URL.
ANKIT SINGH 107

The used method of the document object
 Write()
 Writeln()
 getElementsByName()
 getElementsByTagName()
 getElenmentsById()
ANKIT SINGH 108

write()
the document.write() method enables users to write text on a web page.
Document.write(“Hello”);
<html>
<head>
<style>
Body
Background-color:#DAA520;
</style>
</head>
<body>
var name=prompt("please enter your
name","");
document.write("<p>");
document.write("<i>");
document.write("<b>");
document.write("Welcome "+name);
document.write("</p>");
document.write("</i>");
document.write("</b>");
</SCRIPT>
ANKIT SINGH 109

</body>
</html>
Writeln
The writeln() method also writes text on a web page. The only difference is that
the writeln() method appends a new line character at the end of the text.
<html>
<body>
<PRE>
document.writeln("Hi !");
document.writeln("Welcome to our site!");
document.write("Have a ");
document.write("great day");
</SCRIPT>
</PRE>
</body>
</html>
getElementsByName
ANKIT SINGH 110

the webpage should be specified by a unique name. however multiple element
can also share the same name in a web page the
document.getElementsByName() method
document.getElementsByName(“name_of_the_element”);
<html>
function count()
var x=document.getElementsByName(“link”);
alert (x.length + “Hyperlinks”);
</SCRIPT>
<body>
<A name=”link” href=” “>Link 1</A><br>
<input type=”button” value=”Count” onclick=”Count()”/>
</body>
</html>
getElementsByTagName
A user can customize the background color of all text boxes on a web page a
drop down list is used to choose the background color. If the user selects the
green color from a drop down list the background color of all the text boxes in
the document changes to green.
document.getElementsByTagName(“tag_name”);
var x=document.getElementsByTagName(“a”);
alert(x.length +” Hyperlinks”);
ANKIT SINGH 111

getElementsById
HTML element used on a web page has an optional attribute ID which uniquely
identifies the element the document.getElementById() method
document.getElementById(“id_of_the_element”);
<html>
<SCRITP type=”text/javascript”>
function replacetext()
document.getElementById(“para1”).innerHTML=”changes the content

by using the inner HTML property of getElementById() method”;
}</SCRIPT>
<body>
<p ID=”para1”>A simple paragraph</p>
<input type=”button” value=”change text” onclick=”replacetext()”/>
</body>
</html>
Handling Events
ANKIT SINGH 112

ANKIT SINGH 113
ANKIT SINGH 114
<html>
<head>
<title>registration details</title>
<style>
h1,h3{
color:black;
font-size:40px;
text-align:center;
table{
margin-left:550px;
border:2px solid white;
background-color:gray;
td{
padding:10px;
border:2px solid white;}
#button{
margin-left:670px;}
ANKIT SINGH 115

</style>
<SCRIPT>
function show()
var fname=document.getElementById
("textbox1").value;
var lname=document.getElementById
("textbox2").value;
var age=document.getElementById
("age").value;
var address=document.getElementById
("address").value;
var gender=document.getElementById
("gender").value;
confirm("you have entered:"+ "\n name:"+fname + "" +lname+"\n

age:"+ age+"\n address:"+address+"\n gender: "+ gender + "\n\n do
you want to confirm dese details?");
function changecolor(val)
if ((val.value=="")||(val.value==null))
val.style.background="pink";
else
val.style.background="yellow";
ANKIT SINGH 116

}
</SCRIPT>
</head>
<body>
<h1>user registrartion details<hr/></h1>
<h3>plz fill the following details and get registered!!</h3><br/><br/>
<table>
<tr>
<td> first name:</td>
<td> <input type="text" name="name1" id="textbox1"

onblur="changecolor(this)"/> </td>
</tr><tr>
<td>last name:</td>
<td> <input type="text" name="name2" id="textbox2"

</tr><tr>
<td>age:</td>
<td> <input type="text" name="age_box" id="age"

</tr><tr>
<td>address:</td><td> <textarea rows="5" name="address_box"

id="address" onblur="changecolor(this)"/></textarea> </td>
</tr><tr>
<td>gender:</td><td> <select name="gender" id="gender"> <option

value="male">male</option> <option
value="female">female</option> </td>
</tr><tr>
</tr></table>
<br/><input id="button" type="button" value="register me"

onclick="show();"/>
ANKIT SINGH 117

</body>
</html>
ANKIT SINGH 118

Event Listeners
You can handle user actions or event handlers. To handle each and vary user
action or event a listener is notified.
addEventListener()
addEventListener(type,listener[,useCapture]);
 type: a string representing the event type.
 Listener: the object that receives a notification when an event

occurs.
 useCapture: is a Boolean variable specifying whether an event

needs to captured or not.
you can also remove a handler by calling the removeEventListener()
the parameters passed to the addEventListener()
<html>
<head>
function OnClick ()
ANKIT SINGH 119

alert("A click event has occurred on the Submit button.");
function AddEventHandler()
var Button = document.getElementById("Button");
if(Button.addEventListener)
Button.addEventListener("click",OnClick,false);
function RemoveEventHandler ()
var Button=document.getElementById("Button");
if(Button.removeEventListener)
Button.removeEventListener("click",OnClick,false);
</SCRIPT>
</head>
<body>
Click on the Submit button when the "click" event has a listener and
when it does not.<br>
<button onclick="AddEventHandler();">Add a "click" event listener to

the submit button</button>
<button onclick="RemoveEventHandler();">Remove the event

listener</button><br><br>
<button id="Button">Submit</button>
</body>
ANKIT SINGH 120

</html>
Using the navigator Object
The navigator object is one of the top level objects in the javaScript object the
navigator object is an independent object the own set of properties and method.
ANKIT SINGH 121

<html>
<body>
document.write(navigator.appName);
document.write(navigator.appVersion);
</SCRIPT>
</body>
</html>
Using the screen Object
The screen object enable you to access details of the user’s screen such as its
width, height, and resolution.
ANKIT SINGH 122

<html>
<body>
document.write("Height: "+screen.availHeight);
document.write("Width: "+screen.availWidth);
</SCRIPT>
ANKIT SINGH 123

</body>
</html>
Using the history Object
The history object contains a list of all the page that have been visited by user.
<html>
<head>
function show()
alert(history.length);
</SCRIPT>
</head>
<body>
<input type="button" value="Show History" onclick="scho()"/>
</body>
</html>
Using the location object
The location object contains information about the current URL it can also be
used to enable navigator to different URLs on the internet.
Protocol://hostname:port/pathname/search#hash
ANKIT SINGH 124

 protocol: the protocol such ad HTTP and FTP is used transmit data
over the internet
 hostname: the hostname of the URL such as

http://www.silvertech.com
 port: the port number of the URL it is optional. If the port number
is not specified for the http request.
 pathname: the path in the URL such as

http://www.silvertech.com/careers.html.
 search: the search string which is any portion of the URL. Followed
by a question mark such as
http://www.silvertech.com/careers.html/search? Programmer.
 #hash: the internet hyperlink og a web page. Such as

http://www.silvertech.com/careers.html#position1.
ANKIT SINGH 125

<form>
<input type=”button” value=”visitus”

OnClick=”location.href=’http://www.xyz.com’ ”>
</form>
Working with Form Objects
 Form
 Button
 Checkbox
 Text
 Textarea
 Radio
 Select
Form
A form accepts user inputs. When a web page containing multiple forms is
viewed in a browser
ANKIT SINGH 126

 submit() submit a form to the server for processing syntax is
form1.submit()
 reset() reset all the fields of the given form syntax is used for the
reset() method form1.reset()
 onsubmit: Occurs a user clicks a button or hyperlink to submit the

form to the server.
 Onreset: Occurs a user opts for resetting the fields of the form by
clicking the reset button or hyperlink
Button
The button object refers to the HTML button. It allows you to perform several
tasks based on user action.
 click() clicking for a button MyButton.click()
 focus() sets focus on a button
 blur() Removes focus from the button.
 onclick occurs a user clicks a button
 onmouseDown Occurs amouse button is pressed
 onmouseUp Occurs the mouse button is released.
Checkbox
The checkbox object refers to the HTML check box.
 click()
 focus()
 blur()
document.form1.checkbox1
<html>
<head>
ANKIT SINGH 127

<style>
Body
Background-color:pink;
</style>
<SCRIPT>
function validate()
If(document.f1.check1.checked==false)
Alert(“please select the check box”);
return false
else
return turn
</SCRIPT>
</head>
<body>
<form name=”f1” method=”get” action=”thanks.html”

onsubmit=”return validate ();”>
<input type=”checkbox” id=”check1” />Do you want to accept?
<input type=”submit” name=”submit” value=”Submit” ></input>
<input type=”reset” name=”reset” value=”Reset”></input>
</form>
</body>
</html>
ANKIT SINGH 128

Text
The text object refers to the HTML text box.
 blur() remove focus from a text field.
 focus() sets focus on a text field.
 select() select a text field.
 onfocus: fired when an element receives focus.
 onchange: fired after the occurrence of the blur event when the
value of the text object.
 onselect: fired when the user selects a part of the text within the
text field. Document.form1.text1
Textarea
The textarea object refers to the HTML textarea the textarea object has similar
method and event attribute
Radio
The radio object refers to an HTML radio button.
Document.form1.radio1
<html>
<head>
<style>
Body
Background-color:pink;
</style>
<SCRIPT>
function validate()
ANKIT SINGH 129

{
if((document.f1.M.checked==false)&&(document.f1.F.checked==false))
alert(“please select the gender”);
return false
else
return true
</SCRIPT>
</head>
<body>

onsubmit=”return validate();”>
Gender:
<input type=”radio” name=”gender” id=”M”/>Male
<input type=”radio” name=”gender” id=”F”/>Female
<input type=”submit” name=”submit” value=”Submit”

align=”Center”></input>
<input type=”reset” name=”reset” value=”Reset”></input>
</form>
</body>
</html>
Select
The select object refers to the HTML drop down list.
 blur()
 focus ()
ANKIT SINGH 130

 onchange
 onfocus
 onblur
the select object can be referred inside a form
document.form1.select1
<html>
<head>
<SCRIPT>
function validate()
if(document.f1.opt.value==0)
alert(“please select the contry”);
return false
else
return true
</SCRIPT>
</head>
<body>

onSubmit=”return validate();”>
Country:
<select id=”opt” style=”width:200”>
<option value=”0”> Select any Country</option>
<option value=”1”>India</option>
ANKIT SINGH 131

<option value=”2”>USA</option>
<option value=”3”>UKs</option>
</select>
<input type=”submit” name=”submit” value=”Submit”>
<input type=”reset” name=”reset” value=”Reset”>
</form>
</body>
</html>
ANKIT SINGH 132

Graphics
Canvas
Canvas provides an easy and powerful way to create graphic on a web page. A canvas
has on content of its own. A canvas is simply an area on a web page that act as a
container for embedding graphic objects.
Defining the Canvas
A canvas is defined by using the <canvas> tag. This tag is defined in the body section of
the HTML Document.
<canvas id=”myCanvas” width=”300” height=”300” style=”border:1px solid

black”></canvas>
Accessing the Canvas
ANKIT SINGH 133

A canvas element only create a blank drawing surface however to actually draw graphic
objects on the canvas.
<SCRIPT>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
</SCRIPT>
Working with Shapes
You can draw shapes such as rectangle and square on it rectangle and square are the
easiest shapes to draw on the canvas element by using the javascript function.
 rect ()
 fillRect ()
 strokeRect ()
 clearRect ()
rect()
the rect() method is used to create a rectangle on the canvas the default color of the
canvas to draw the outline of the rectangle.
rect(X,Y,width,height);
 X: the X-coordinate of the upper-left corner of the rectangle
 Y: the Y-coordinate of the upper-left corner of the rectangle
 Width: width of the rectangle in pixels
 Height: height of the rectangle in pixels
<html>
<body>
<canvas id="myCanvas" width="300"
height="300" style="border:1px solid black"></canvas>
<SCRIPT>
ANKIT SINGH 134

var c =document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(30,30,120,120);
ctx.stroke();
</SCRIPT>
</body>
</html>
fillRet()
the fillRect () method is used to create a rectangle filled with the specified color. The
default color is black.
fillRect(X,Y,width,height);
<html>
<body>
<canvas id="myCanvas" width="300"
height="300" style="border:1px solid black"></canvas>
<SCRIPT>
ANKIT SINGH 135

ctx.fillRect(30,30,120,120);
</SCRIPT>
</body>
</html>
strokeRect()
create a rectangle using by the rect() method you also need to use the stroke() method
to define its outline on the canvas.
strokeRect(X,Y,width,height);
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid

black"></canvas>
<SCRIPT>
ctx.strokeRect(30,30,120,120);
</SCRIPT>
</body>
</html>
ANKIT SINGH 136

clearRect()
the clearRect() method is used to clear a portion of the rectangle it clears the
specified pixels within the given rectangle.
clearRect(X,Y,width,height);
<html>
<body>

black"></canvas>
<SCRIPT>
ctx.fillRect(30,30,120,120);
ctx.clearRect(50,50,40,40);
</SCRIPT>
</body>
</html>
ANKIT SINGH 137

Working with Colors
The graphic objects on a canvas by using the default stroke and fill color. You can use
colors other than the default color for creating th graphic object.
 fillStyle
 strikeStyle
 shadowcolor
fillStyle
the fillStyle property is used to define a color that will be used to fill any closed shape
drawn on the canvas.
fillStyle=”color”;
<html>
<body>

black"></canvas>
<SCRIPT>
ctx.fillStyle="red";
ANKIT SINGH 138

ctx.fillRect(30,30,120,120);
</SCRIPT>
</body>
</html>
strokeStyle
the strokeStyle property is used to set the outline color of a shape drawn on the canvas
strokeStyle=”color”;
<html>
<body>

black"></canvas>
<SCRIPT>
ctx.strokeStyle="blue";
ctx.strokeRect(30,30,120,120);
</SCRIPT>
</body>
ANKIT SINGH 139

</html>
shadowColor
you have drawn a shape on the canvas you may want to make it more it more stylish by
creating a shadow on it to graphic object on the canvas
shadowColor=”color”;
<html>
<body>

black"></canvas>
<SCRIPT>
ctx.shadowBlur=40;
ctx.fillStyle="pink";
ctx.shadowColor="black";
ctx.fillRect(30,30,120,120);
ctx.shadowColor="blue";
ctx.fillRect(170,30,120,120);
</SCRIPT>
ANKIT SINGH 140

</body>
</html>
Working with Style
Creating simple shapes on the canvas you can also apply style such as gradients.
 addColorStop()
 createLinearGradient()
 createRadialGradient()
 createPattern()
addColorStop()
to create gradients you need to first specify the colors and their position in a gradient
object.
addColorStop(position,color);
 position specifies a value between 0.0 to 1.0 to represent the position

from where to start and end the gradient color.
 color the color that needs to be applied on the respective position.
ANKIT SINGH 141

createLinearGradient()
the createLinearGradient() method is used to return a gradient object that represent a

linear gradient for painting the color along a line
createLinearGradient(X0,Y0,X1,Y1);
 X0 the x-coordinate of the start point of the gradient
 Y0 the y-coordinate of the start point of the gradient
 X1 the x-coordinate of the end point of the gradient
 Y1 the Y-coordinate of the end point of the gradient
<html>
<body>

black"></canvas>
<SCRIPT>
var grad=ctx.createLinearGradient(0,0,170,0);
grad.addColorStop(0,"blue");
grad.addColorStop("0.5","yellow");
grad.addColorStop(1,"red");
ctx.fillStyle=grad;
ctx.fillRect(20,20,180,180);
</SCRIPT>
</body>
</html>
ANKIT SINGH 142

createRadialGradient()
the createRadialGradient() method is used to return a gradient object that represents a

radial or a circular gradient to be applied on a graphic object.
createRadialGradient(X0,Y0,R0,X1,Y1,R1);
 X0 the x-coordinate of the start point of the gradient
 Y0 the y-coordinate of the start point of the gradient (x0,y0) the center
 R0 the radius of the starting circle
 X1 the x-coordinate of the end point of the gradient.
 Y1 the y-coordinate of the end point of the gradient (x1,y1) the center
 R1 the radiu of the ending circle creating the radial gradient object.
<html>
<body>

black"></canvas>
<SCRIPT>
var grad=ctx.createRadialGradient(75,50,5,90,60,100);
ANKIT SINGH 143

grad.addColorStop(0,"blue");
grad.addColorStop("0.5","yellow");
grad.addColorStop(1,"red");
ctx.fillStyle=grad;
ctx.fillRect(20,20,180,180);
</SCRIPT>
</body>
</html>
createPattern()
is used to create a pattern by displaying an image on a canvas in the specified direction
createPattern(img,”repeat|repeat-x|repeart-y|norepeat”);
 img the image or video to be used to create a pattern
 repeat the pattern should be repeated horizontally and vertically
 repeat-x the pattern should be repeated horizontally
 repeat-y the pattern should be repeated vertically
 no-repeat the pattern should be display only once.
ANKIT SINGH 144

<html>
<body>
<img src="a.jpg" id="pattern">
<button onclick="draw('repeat')">Repeat</button>

#d3d3d3;">does not</canvas>
<SCRIPT>
function draw(direction)
var img=document.getElementById("pattern");
var pat=ctx.createPattern(img,direction);
ctx.rect(0,0,300,300);
ctx.fillStyle=pat;
ctx.fill();
</SCRIPT>
</body>
</html>
ANKIT SINGH 145

Working with Path
A path ia a series of points joined together to create lines or shapes. In canvas you can
use line or paths to draw shapes other than rectangles or squares.
Using moveTo() and lineTo() method.
ANKIT SINGH 146

ANKIT SINGH 147
<html>
<body>

<SCRIPT>
ctx.beginPath();
ctx.moveTo(40,40);
ctx.lineTo(240,40);
ctx.stroke();
</SCRIPT>
</body>
</html>
ANKIT SINGH 148

<html>
<body>

<SCRIPT>
ctx.beginPath();
ctx.arc(80,90,50,0,Math.PI*2,false);
ctx.closePath();
ctx.fillStyle="yellow";
ctx.fill();
</SCRIPT>
</body>
</html>
ANKIT SINGH 149

Draw more complex curvatures
bezierCurveTo()
bezierCurceTo(cp1x, cp1y, cp2x,cp2y,x,y);
 cp1x the x-coordinate of the first control point
 cp1y the y-coordinate of the first control point
 cp2x the x-coordinate of the second Bezier control point
 cp2y the y-coordinate of the second Bezier control point
 x the x-coordinate of the ending point
 y the y-coordinate of the ending point
<html>
<body>

<SCRIPT>
ANKIT SINGH 150

ctx.beginPath();
ctx.moveTo(200,20);
ctx.bezierCurveTo(80,20,80,100,150,100);
ctx.stroke();
</SCRIPT>
</body>
</html>
Working with Text
To drawing shapes or lines on the canvas you can also draw text on it
fillText()
ANKIT SINGH 151

the fillText() method is used to draw a text filled with solid color on a canvas.
fillText(text,x,y,width);
 text the text to be written on the canvas
 X the x-coordinate of the starting point of the text.
 Y the y-coordinate of the starting point of the text.
 Width the width of the text.
<html>
<body>

<SCRIPT>
ctx.font="15px Georgia";
ctx.fillText("Fill Text",10,60,120);
ctx.font="15x Verdana";
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1","red");
ctx.fillStyle=gradient;
ctx.fillText("Fill Text with Gradient",10,90,120);
</SCRIPT>
</body>
</html>
ANKIT SINGH 152

strokeText()
the strokeText() method is used to draw a text at the specified position on the canvas by
using the current font style and color.
strokeText(text,x,y,width);
 Text the text to be written on the canvas
 X the x-coordinate of the starting point of the text
 Y the y-coordinate of the starting point of text
 Width the width of the text.
<html>
<body>

<SCRIPT>
ctx.font="15px Georgia";
ctx.strokeText("Fill Text",10,60,120);
ctx.font="15x Verdana";
var gradient=ctx.createLinearGradient(0,0,170,0);
ANKIT SINGH 153

gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1","red");
ctx.strokeStyle=gradient;
ctx.strokeText("Fill Text with Gradient",10,90,120);
</SCRIPT>
</body>
</html>
Working with images
drawImage(img,x,y);
drawImage(img,x,y,width,height);
drawImagw(img,sx,sy,swidth,sheight,x,y,width,height);
 img image that need to be drawn on the canvas
 x the x-coordinate for the starting point of the image.
 Y the y-coordinate for the starting point of the image
 Width the width of the image it is optional argument.
 Height the height of the image it is optional argument
ANKIT SINGH 154

 Sx the x-coordinate to start the clipping of the image
 Sy the y-coordinate to start the clipping of the image
 Swidth the width of the clipping image
 Sheight the height of the clipping image
<html>
<body onload=setImage()>

<SCRIPT>
function setImage()
var img=new Image();
img.src="a.jpg"
img.onload=function()
ctx.drawImage(img,10,10,150,150);
</SCRIPT>
</body>
</html>
ANKIT SINGH 155

Working with Graphs
A graph is a way of representing relationships among a collection of items.
If you want to create a bar graph on a web page than you need to download the
RGraph.common.core.js and RGraph.bar.js files.
Transforming Canvas Element
you can move HTML element from one position to another position easily while working
with a canvas you may want to shift the graphics object from one position to another
and increase or decrease their size.
 translate()
 scale()
 rotate()
translate
the translate () method is used to reset the origin of the canvas to the specified position.
translate(x,y);
 x the value to be added to the existing value of the x coordinate
ANKIT SINGH 156

 y the value to be added to the existing value of the y coordinate
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”red”;
ctx.fillRect(10,10,100,100);
<html>
<body >

<SCRIPT>
ctx.fillRect(10,10,100,100);
ctx.translate(50,25);
ctx.fillStyle="blue";
ctx.fillRect(10,10,100,100);
</SCRIPT>
</body>
ANKIT SINGH 157

</html>
Scale
The scale () method is used to increase or decrease the units in the canvas grid.
scale(scalewidth,scaleheight);
 scalewidth the width (in percentage) a graphic object should be scaled

to.
 scaleheight the length(in percentage) a graphic object should be scale

to.
<html>
<body >

<SCRIPT>
ANKIT SINGH 158

ctx.fillRect(10,10,100,100);
ctx.translate(50,25);
ctx.scale(2,2);
ctx.fillRect(10,10,100,100);
</SCRIPT>
</body>
</html>
Rotate
The rotate() method is used to rotate the graphic object to a degree in the clockwise
direction
rotate(angle);
<html>
<body >

<SCRIPT>
ANKIT SINGH 159

ctx.fillRect(10,10,100,100);
ctx.rotate(25);
ctx.fillRect(40,40,100,100);
</SCRIPT>
</body>
</html>
Animating Canvas Elements
An animation is a visual technique that provides the object is moving by displaying

graphic object in rapid sequence.
1. Create variables for the animation state.

2. Draw the animation.
3. Redraw the object.
<html>
<head>
</head>
ANKIT SINGH 160

<BODY>
<CANVAS Id="canvas" width="400"
height="300" style="border:2px solid black">
</CANVAS>
var canvas;
var ctx;
var x = 390;
var y = 290;
var dx = 2;
var dy = 2;
var WIDTH = 400;
var HEIGHT = 300;
function circle() {
ctx.beginPath();
ctx.arc(x,y,10,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
function init() {
canvas = document.getElementById
("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
ANKIT SINGH 161

}
function draw() {
clear();
circle();
if (x> WIDTH || x< 12)
dx = -dx;
if (y> HEIGHT || y< 12)
dy = -dy;
x += dx;
y += dy;
init();
</SCRIPT>
</BODY>
</html>
ANKIT SINGH 162

Project time
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'pink';
ANKIT SINGH 163

ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.90, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
ANKIT SINGH 164

}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ANKIT SINGH 165

ctx.stroke();
ctx.rotate(-pos);
</script>
</body>
</html>
ANKIT SINGH 166

Geolocation
Implementing Geolocation
The store offers clothes accessories and footwear in addition it sells the home furnishing
goods and electronic items such as refrigerator air conditioner laptops and mobile
devices.
Using the Geolocation API the Geolocation API-enabled website can locate users current
geographical location display points of interest around that location or guide the users
from their current location to a target destination.
Implementing the Geolocation API
The users location is not retrieved just through code or browser. Instead the
Geolocation API uses certain features such as Global Positioning System (GPS) Internet
Protocol (IP) address of a device. Nearest mobile phone towers and input from user in
the users device to retrieve the users location.
 getCurrentPosition()
 watchPosition()
getCurrentPosition()
the getCurrentPosition() method is used to retrieve the current geographical location of a

user the location is retrieved as a set of coordinate
getCurrentPosition(callbackFunction,ErrorHandler,Options);
 callbackFunction this is a function defined by the developer to retrieve

the current location
 ErrorHandler this is the name of a function that is called when an error

occurs while retrieving the location of a user. This is a optional parameter.
 Options this optional parameter a set of options such as timeout for

retrieving the information about the user
ANKIT SINGH 167

<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
ANKIT SINGH 168

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
</script>
</body>
</html>
watchPosition()
the watchPosition() method return the current location of a user and continuously update
the location while user is moving. The watchPosition ()
method takes the same parameter as the getCurrentPosition() method and returns
the same object.
<!DOCTYPE HTML>
<head>
<html>
var watchID;
var geoLoc;
function showLocation(position)
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
ANKIT SINGH 169

}
else if( err.code == 2) {
alert("Error: Position is unavailable!");
function getLocationUpdate(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
geoLoc = navigator.geolocation;
watchID = geoLoc.watchPosition(showLocation, errorHandler,

options);
else{
alert("Sorry, browser does not support geolocation!");
</script>
</head>
<body>
<form>
<input type="button" onclick="getLocationUpdate();" value="Watch

Update"/>
</form>
</body>
</html>
ANKIT SINGH 170

Handling Errors
User may not provide the permission to access his location. This may raise an error in
your website. The error may also occur when a user checks the current location on a
mobile device and the device goes out of coverage area or the network connection is
time out error.
 Permission_denied that the user has declined the request to share the
location
 Position_unavailable that the users current location cannot be retrieved.
 Timeout that the time given to retrieve the users location exceeded the
maximum limit.
 Unknoen_error that an unknown or undefined error has occurred.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
ANKIT SINGH 171

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
</script>
</body>
</html>
Offline Support
 Ensures that the website is available even when the user is not connected
to the network.
 Reduces network load on the server. You can make your website work
offline by using the
 Implement client-side storage
 Implement application cache
ANKIT SINGH 172

Client-side storage
The client-side storage refers to the process of storing data locally within the users
browser the date stored by using client-side storage is retrieved only when it is
requested the date stored in the key value pairs.
 localStorage
 sessionStorage
localStorage
the localStorage object allow you to store data without any expiration date. The implies
that the date stored by using the localStorage .
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does

not support Web Storage...";
</script>
</body>
</html>
ANKIT SINGH 173

sessionStorage
the sessionStorage object is used to store the data for only one session.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
document.getElementById("result").innerHTML = "You have clicked the

button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser

does not support web storage...";
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click

me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is
reset.</p>
</body>
</html>
ANKIT SINGH 174

Implementing Application ache
You must have faced a situation when the network connection is lost and you click the
back button in the browser to view the previous page.
 Offline browsing that a website can be viewed even if the user is not
connected to the internet.
 Speed that if the user request the web page which is already there in the
cache it is retrieved from the cache and not from the server.
 Reduced server load that the web page if cached will always be made
available from the cache unless the browser detects that the cache manifest has
been updated on the server or user has cleared the browser cache.
 Cache the files that need to be cached after they are downloaded for the
first time.
 Network the files that should never be cached.
 Fallback the task to be performed a user tries to fetch the uncached files.
<html manifest=”HotelFacilities.appcache”>
ANKIT SINGH 175

jQuery
The website should be designed in such a way that it displays the product categories
and items in the sliding and collapsible menu and submenu format the web designer has
been asked to complete the task quickly and keep the code simple for this situation the
designer can use the prewritten JavaScript library known as jQuery.
Manipulating HTML Element by Using jQuery
You can make use of jQuery in a web page to manipulate HTML element by using
jQuery. The using jquery before you need to download jquery-1.8.3.js file. It can be
referred to the web page by using the <SCRIPT>tag in the head section.
<SCRIPT type=”text/javascript” src=”path/jquery-1.8.3.js”>
</SCRIPT>
The SCRIPT tag instructs the browser that the HTML document uses a script.
The type attribute specifies the type of scripting used.
The src is used to path of jquery file store in your hard drive.
document.ready()
this function contains the jquery code to be executed on HTML element after the web
page has been fully loaded in the browser.
<SCRIPT type="text/javascript" src="F:\HTML\class\jQueryS\

jquery.1.8.3.js">
$(document).ready(function(){//jQuery code})
</SCRIPT>
The dollar sing ($) represent start of the jQuery code block and jQuery code is the code
to be implemented for the document.ready() function
$ (selector).action();
The selector is the element to be manipulated and action represents action to be taken
on the selector element.
<html>
<head>
ANKIT SINGH 176

jquery.1.8.3.js">
</SCRIPT><SCRIPT>
$(document).ready(function(){//jQuery code})
</SCRIPT>
</head>
<body>
...
</body>
jQuery HTML
the JQuery provides predefined functions to perform modifications on the content of

HTML elements.
ANKIT SINGH 177

ANKIT SINGH 178
<html>
<head>

jquery.1.8.3.js">
</SCRIPT><SCRIPT>
$(document).ready(function(){$("button").click (function() { $
("#para").prepend("<b>jQuery<b>"); $("#para").append('<h3> This is the
newly inserted heading.</h3>');
$("#newhead").remove();});});
</SCRIPT>
</head>
<body>
<div align="center"></div>
<h3>Complete the sentence:</h3>
<p id="para">is a javascript library that enables the content to be appended

after the inner content in the selected element using the</p><br><h2
id="newhead">this heading would be removed.</h2>
ANKIT SINGH 179

<button id="b">click me</button>
</body>
After click me button clicked
Handling jQuery Events
In jQuery events are handled by using functions or predefined event method.
ANKIT SINGH 180

ANKIT SINGH 181
ANKIT SINGH 182
Visual Effects
 Hide
 Show
ANKIT SINGH 183

 Toggle
 Slide
 Fade
 Animate
Hide Effect
The hide() function is used to make an element disappear when an event such as click or
double-click occurs.
$(selector).hide(speed)
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></
script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
ANKIT SINGH 184

Show Effect
The show() function is used to make a hidden element visible when an event occurs.
$(selector).show(speed)
<!DOCTYPE html>
<html>
<head>
<script src="F:\HTML\class\jQueryS
\jquery.1.8.3.js"></script>
<script>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
ANKIT SINGH 185

});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Toggle Effect
The toggle () function is used to switch between the show and hide effects of an
element.
$(selector).toggle(speed)
<!DOCTYPE html>
<html>
<head>
<script src="F:\HTML\class\jQueryS\jquery.1.8.3.js"></script>
<script>
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle between hiding and showing the paragraphs</button>
ANKIT SINGH 186

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
Slide Effect
The slide effect used to produce a sliding effect on the selected element. The slide
functions slideDown() slideUp() and slideToggle()
slideDown()
$(selector).slideDown(speed)
slideUp()
$(selector).slideUp(speed)
slideToggle()
$(selector).slideToggle(speed)
<!DOCTYPE html>
<html>
<head>
<script>
$("#flip").mouseenter(function(){
$("#panel").slideToggle("slow");
});
});
</script>
ANKIT SINGH 187

<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
#panel {
padding: 50px;
display: none;
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
Fade Effect
Fade effect is used to gradually reduce the opacity of the selected elements.
ANKIT SINGH 188

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></
script>
<script>
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
ANKIT SINGH 189

<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;">
</div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;">
</div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;">
</div>
</body>
</html>
Animate Effect
The animate effect is used to create custom animation.
Animate({params},speed,callback);
Params the CSS properties to be animated.
Speed duration of the animated effect
Callback the function that will be executed after completing the animation.
<!DOCTYPE html>
<html>
<head>
<script>
$("div").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
ANKIT SINGH 190

height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<div
style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Image Rollover
The images can be replaced by other images at runtime by creating the image rollover
effect.
<!DOCTYPE html>
<html>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)"

border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the mouse pointer
over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved

out of the image.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
ANKIT SINGH 191

}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
</script>
</body>
</html>
Image Gallery
An image gallery is a collection of thumbnail pictures or image links. All of these can be
clicked individually to provide a large view of the corresponding product on another web
page.
 Using colorbox plugin
 Using galleria plugin
Colorbox plugin enables displaying a collection of images one by one by using the
previous and next button and variety of transition effects.
If you want to use this effect than you need to download a colorbox.zip file.
Colorbox this folder comprises the jquery.colorbox.js file. Is used to implement the
lightbox slideshow and the transition effects.
Colorbox.css style sheet contains the formatting instructions to stylize position and
decorate the image gallery.
<html>
<head>
<link media="screen" rel="stylesheet" href="F:\HTML\class\demo\

colorbox.css"/>
ANKIT SINGH 192

<script src="F:\HTML\class\jQueryS\jquery.colorbox.js"></script>
$("a").colorbox({transition:"fade",height:"250",width:"220"});
});
</script>
</head>
<body>
<h1 product demonstration</h1>
<a href="a.jpg">shanu</a>
</body>
</html>
Galleria plugin
This plugin is used to display image gallery and create thumbnails of the images to be
displayed in the gallery automatically. When the mouse pointer is moved on a thumbnail
image is large version of image.
If you want to used galleria plugin you need to download the galleria.zip file
ANKIT SINGH 193

H T M L 5: Ankit Singh 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

H T M L 5: Ankit Singh 1

Uploaded by

Copyright:

Available Formats

H

HTML is a markup language for describing web documents (web pages).

 HTML stands for Hyper Text Markup Language

Access to information: The Internet provides access to information on various

Electronic-commerce (e-commerce): The Internet is also used as a medium of

A Small HTML Document

<h1>My First Heading</h1>

 The <!DOCTYPE html> declaration defines this document to be HTML5

The <!DOCTYPE> Declaration

The <HEAD> Declaration

The elements can go inside the <head> element:

The <TITLE> Declaration

 Only one title of the html page

The <META> Declaration

(META name="keywords" content="hote1, online, booking ">

<! DOCTYPE HTML>

<TITLE>The Base Tag Example</TITLE>

<IMG src=”img1.jpg”></IMG><BR>Best Book For HTML

The <STYLE> Declaration

<! DOCTYPE HTML>

<TITLE>The Style Tag Example</TITLE>

<h1>The Style using for style Tag</h1>

<p>Its Provides Online Booking</p>

The <LINK> Declaration

<link href=”StyleHome.css” rel=”stylesheet”>

The <SCRIPT> Declaration

Please Enter Your Name

The <NOSCRIPT> Declaration

<! DOCTYPE HTML>

Document.write(Welcome To the Ankit Singh Website!)

<NOSCRIPT>Your browser does not support script</NOSCRIPT>

If the script are not supported by the browser.

<H1>This Example is Heading 1 </H1>

<H2> This Example is Heading 2 </H2>

<H6> This Example is Heading 3 </H6>

<P>Welcome to the first website </P>

<p>Created by Mr. Ankit singh</P>

<P> We provide Computer Education for all type </P>

<SUMMARY>Categories of Computer Education</SUMMARY>

<p>The demo of the <span style=”color:blue;font-size:16px;”> sapn </span>

<B>You can Read online HTML Code</B>

<I> You can Read online HTML Code </I>

<U> You can Read online HTML Code </U>

Ordered or Numbered list

Welcome to the HTML<br> Book To Create by Ankit singh

Welcome to the HTML<br><hr>

Book To Create by Ankit singh

Height the attribute display a height your image in a browser.

Adding Multimedia Components

<AUDIO controls=”controls” src=”audio1.mp3”>Your browser does not

<VIDEO width=”320” height=”240” controls=”controls”

<METER value=”4” min=”0” max=”10”></METER>

<HDROUP><H1>Book your course</H1>

<H2>Rating of the course</H2>

<ARTICLE><H1>Book your course</H1>

<ASIDE><P>Get discounts on book course today</P></ASIDE>

<HEADER><H1>Book Your course </H1>

<p>An easy way of booking your course</p> </HEADER>

<FOOTER>Author: Ankit singh</FOOETR>

<A href=”About”>About Your Course</A>|

Different ways for Apply Style sheet

 Internal style sheet

 External style sheet