HTML

1
 HTML(Hypertext Markup Language)
For a scientific discovery to be important, it must have a major impact on many people's
lives. For example, Telephone, Television, Automobile etc, each of these inventions, in its
own way has changed the way people view the world around them. The case is now the
same with World Wide Web (WWW). Each and every organization has a need to place its
information on World Wide Web.
Internet and Web Technologies
The Internet is a world wide system of interconnected computer networks. These
networks use the standard Transmission Control Protocol / Internet Protocol (TCP/IP)
suite to share information across the world. The internet is also interpreted as a network
of millions of networks, including private, public, academic, business and government
networks. It allows you to access different websites with help of its service, World Wide
Web (WWW). WWW, also called web, allows you to access information over the internet.
A web site is a collection of multiple web pages, which contain a variety of data that
includes graphics, sound, text and videos. You can view a website or web page with the
help of a special type of application, called web browser, which may be a part of
Microsoft Windows example Internet Explorer or other such as Firefox, Opera, Safari and
Google Chrome. You can create a website or a web page with the help of a variety of
web technologies. One of the most commonly used Web technologies, to create web
pages is HTML.
Hyper Text Markup Language (HTML) is an important tool and it is the medium for
creating the web pages. It is a standard that allows you to design static web pages,
where-in the content cannot be changed by a user. HTML allows you to use text or
images to link two or more web pages or websites. Such type of text or image is
interpreted as a hyperlink.
->In 1990, Tim Berners-Lee an English scientist at the "European Laboratory" for Particle
Physics (better known as CERN) developed a new computer language called HTML. HTML
is the first platform independent standard that is easily available to everyone.

•Hypertext is simply a piece of text that works as a link.

•Markup Language is a way of writing layout information within documents.

HTML5 is the latest version of the HTML standard that is currently under development. It
introduces various new elements, such as VIDEO, AUDIO,CANVAS. HTML also redefined
the capabilities of some existing elements such as A,CITE,MENU.

Nowadays, the Internet has become a widespread information infrastructure that

reaches various fields, such as business, education, hospitality and research. Internet is
a global system of interconnected computer networks, while web is one of the services
that run on the Internet. Web is a collection of interconnected websites and resources,
such as files and images which are linked by hyperlinks and Uniform Resource
Locators(URLs).

With the advent of various versions of web have been introduced. These versions are
given as follows:

2
* Web 1.0 - Provides read-only content and static HTML websites. There was no scope
for user interaction or content contribution to the websites. Therefore, Web 1.0 is also
called read-only Web. Some examples of Web 1.0 are Geocities and Hotmail.
* Web 2.0 - Enables people to collaborate and share information on the Internet. It
provides transition from static HTML web pages to dynamic web pages. Web2.0 enables
people to contribute information through blogs or websites such as Flickr, YouTube and
Digg.
* Web 3.0 - Enables people to personalize a web page on a website, for instance iGoogle.
This is the latest version of web, which is under development, and considered as a set of
standards that can turn the entire web into one big database. It is also known as
Semantic Web in order to create a place where search engines and software agents can
perform the search process in a better way.
Web technology is a standard that allows you to develop Web applications with the help
of predefined sets of classes, objects, methods and properties available in a markup
language, style sheet language or programming language.

Some common Web technologies to develop web sites are:

->HTML
->JavaScript
->CSS (Cascading Style Shetts)
->XML (Extensible Markup Language)
->XHTML (Extensible HTML)
->AJAX (Asynchronous JavaScript and XML)
->ASP. NET
->PHP (Hypertext Processor).

In computer field, HTML is the main markup language useful for creation of web pages. It
provides a means to describe the structure of text-based information in a document by
denoting certain text as headings, paragraphs, lists and so on and to supplement that
text with interactive forms, embedded images and other objects. HTML can also
describe, to some degree, the appearance and semantics of a document and can provide
additional features like embedded scripting language code, which affected the behavior
of web browsers and other HTML processors.
Format of a Web Page:
A well-organized web-site is the one that makes it easy for visitors to find what they
want. The easier it is to use, the longer users will stay at the site, and the more
information visitors will see on it.
A web-site is basically a collection of web-pages and the starting page is called home
page. There are a number of different elements that can be seen on a web page. These
elements can be incorporated into web pages using HTML programming.
-->The language used to develop web pages is called Hypertext Markup Language
(HTML). HTML is the language interpreted by a Browser. Web pages are also called HTML
documents. HTML is a set of special codes that can be embedded in text to add
formatting and linking information. Html is specified as TAGS in an HTML document.
HTML Tags

3
Tags are instructions that are embedded directly into the text of the document. An HTML
tag is a signal to a browser that it should do something other than just throw text up on
the screen. By convention all HTML tags begin with an open angle bracket(<) and end
with a close angle bracket (>).
HTML tags can be of two types:
Paired Tags: A tag is said to be a paired tag if it, along with a companion tag, lanks the
text. For example the<B> tag is a paired tag. The <B> tag with its companion tag</B>
causes the contained betwen them to be rendered in bold. The effect of other paired is
applied only to the text they contain.
In paired tags, the first tag (<B>) is often called the opening tag and the second tag
(</B>) is called closing tag.
Singular Tags:
The second type of tag is the singular or stand-alone tag does not have a companion tag.
For example <BR> tag will insert a line break. This tag does not require any companion
tag.

The following are the different types of elements that can be incorporated on a web-
page.
i. Text
ii. Links
iii. Images
iv. Tables
v. Frames
vi. Forms
vii. Horizontal line

All of the above elements can be aligned to the center, left or right of a web page.
Basic Tags in HTML
An HTML is a text file containing small markup tags. These markup tags tell the web
browser how to display the web page. Tags are used to mark-up the elements. These
HTMl tags are surrounded by the two characters < > and they are called as angle
brackets.

Example HTML file

----------
<html>
<head>
<title>Title for the web page</title>
</head>
<body>
<center>WELCOME TO HTML PROGRAMMING</center>
</body>
</html>

Description for the above tags:

----------------
4
-->The first tag in the above HTML document is <html>. This tag tells the web browser
that this is the starting of an HTML document. The last tag in the above example
is</html>. This tag tells the browser that this is the endo of the HTML document.

-->The text between <head> tag and the </head> tag is the header information. This
header information is not displayed in the browser window.

-->The text between <title> tag and </tag>

-->Tags can have attribute. HTML tags tell Web browsers how to format and organize
your web pages, but there's more to tell here- you can actually customize most tags
using attributes. Attributes can provide additional information about the HTML elements
on the web page.

syntax:
<TAGNAME ATTRIBUTE = VALUE>

For example, the<body> tag defines the body element for the web page. This
<body> tag, with an added bgcolor attribute, the browser can be inormed about
background color of the web page, as
<body bgcolor="blue">
*To set the background color as blue, the attributes always come in Name/value paris
as :name="value".
*The attributes are always added to start tag of an HTML element.
*We can use both double quotes as well as single quotes.

Html is one of the most commonly-used languages to design Web pages. To create a
Web page using HTML, we must be familiar with the HTML fundamentals, such as
elements and the content embedded within the elements, attributes, and data types.
Elements in an HTML document instruct the Web browser about how it should interpret
the document. The attributes of the element provide additional information about it,
such as its behavior and properties. The content is displayed on the browser according to
the properties and behaviors defined by the element and attributes.
Depending upon the behavior that they display on a Web page, HTML elements can be
categorized as root, metadata, section, heading, flow, phrasing, embedded, and
interactive. The root element category contains the main element of the HTML, which is
the HTML element. The metadata element category contains elements that define the
behavior of the entire HTML document. The section elements category contains elements
that are used to represent sections of the HTML document. The heading elements
category contains elements that represent headings in the HTML document. The flow
elements category elements that are used in the BODY element of an HTML document to
define the structure of the document. The phrasing element category contains elements
that are used to display text of an HTML document. The embedded elements category
contains elements that are used to embed content in the HTML document. The
interactive elements category contains elements that are used for user interactivities.
Understanding Elements
Elements are the building blocks of an HTML document. The browser interprets an HTML
document on the basis of the element types that are added in the document. As a result,
5
an HTML document is displayed with all the properties specified by the elements
embedded in it.
Example: <p> This is my first paragraph </p>
HTML elements are categorized into the following types:
A. Root
B. Metadata
C. Section
D. Heading
E. Phrasing
F. Embedded
G. Interactive

[Link] Elements: This represents the main or the starting element that should be
present in all HTML documents. The HTML element is the first element that comes after
the <!DOCTYPE> element and within which other HTML elements are specified. This
element allows the browser to identify the document type.

Attributes of the HTML Element

Atrribute Value Description
class class-name Specifies the class for an
element in an HTML
document.
dir ltr- left to right, rtl-right to left Specifies the direction of
text for the content in an
element.
id unique-id Specifies a unique
alphanumeric identifier for
an element.
lang language-code Specifies the base
language used for an
element.
xmlns [Link] Declares a namespace for
tags used in an HTML
document.
draggable true, false, auto Specifies whether or not we
can drag an element.
spellcheck True, false Specifies whether an
element should be checked
for spelling and grammar
or not.
style Style-definition Specifies an inline style in
the HTML document using
the <style> element.
title
B. Metadata Elements : The metadata elements are used to set the presentation
or behavior of the remaining content of a document. The elements can also be used to
6
set a relationship of a document with other documents. Some of the metadata elements
are :
i. TITLE: It contains the title of the HTML document, which appears in the title
bar of the web browser. This element is used by the search engines to select
the document and display it in the search result.
ii. BASE: The BASE element is used to specify a default URL and target for all the
links in an HTML document. We can set a base URL for all the links once at the
top of the document by using the BASE element. This element appears within
the HEAD element of the document and should be used as the first element in
the HEAD element. This enables other elements in the head section to uses this
information of the BASE element.
iii. Command: It is a new element introduced in HTML5, and is used to execute a
command when an event is fired by a form control, such as radio button or
checkbox. We can use the Command element with the context menu or toolbar.
<MENU label=”Cars”>
<COMMAND type=”radio” radiogroup=”cars” label=”Ferrari”>
<COMMAND type=”radio” radiogroup=”cars” label=”Lamborghini”>
</MENU>

Attribute Value Description

Type command(default),checkbox,radio Specifies the type of

command

label some_text Specifies the name of

the command that is
to be displayed on an
HTML page

radiogroup Some_text Specifies a string

value that represents
the name of the
group of commands
whose type attribute
has radio as its value.

iv. NOSCRIPT: This is used to display the alternate content on the Web browser
that either does not support JavaScript or has JavaScript disabled. If the
JavaScript is enabled or supported by the Web browser, the NOSCRIPT element
is not considered.
<NOTSCRIPT>

7
 JavaScript is disabled or not supported on your browser.
</NOSCRIPT>
v. SCRIPT: This element is used to declare a script, such JavaScript, within an
HTML document. This element either contains scripting statements or points to
an external script file through the ‘src’ attribute. We can use the SCRIPT
element for validating Web forms and manipulating the content and images
present on these forms.
<head>
<script type=”text/javascript”>
</head>
vi. STYLE: It is use to declare the style sheets within the HTML
document. This element specifies how the HTML elements are
rendered in a browser. Some of the attributes of
the STYLE element
Attribute Value Description

type text/css Specifies the type of

content, such as simple
text or style sheet in an
HTML document.

media Screen, tty,tv,projection, Specifies the destination

Handheld,print,Braille, medium where the style
aural,all is applied.

C. Section Elements: It is used to define the scope of headers, Footers and various
other sections of an HTML document. Different section elements are used to define
different parts of a document; for example, the BODY element is used to define the full
body of the document, which also includes other section elements. Some of the SECTION
elements are:
 BODY
 SECTION
 NAV
 ARTICLE
 ASIDE
 HEADER
 FOOTER
 ADDRESS

8
i. BODY: This element of the HTML document contains the main content of the
document. The BODY element is placed after the closing tag of the HEAD
element in the HTML element. The BODY element includes text, hyperlinks,
images and list.
<HTML>
<HEAD>
</HEAD>
<BODY>
// Some code --------------------------------
</BODY>
</HTML>
ii. SECTION: This element is used to represent a generic section of an HTML
document or application. This element groups the related content of the HTML
document. It also contains other new semantic elements, such as header and
footer and other HTML elements.
<SECTION>
<H1>WEB APPLICATION</H1>
<P>Example of the SECTION element</P>
</SECTION>
iii. NAV: This element is newly introduced in HTML5 and is used to navigate from
one HTML page to another. This element displays a group of links on an HTML
document. To go to a particular HTML page, we can click the link associated
with that page.
<NAV>
<H1>Navigation</h1>
<UL><LI><A
href=”[Link]”>Articles</A></LI> <LI><A
href=”[Link]”>Articles</A></LI> </UL>
</NAV>

Generally, the NAV element is used in the footer area of an HTML page. This
area contains a list of links related to various pages of a website, such as terms
of service and contact information.
iv. ARTICLE: It is newly introduced element in HTML5 and is used to represent a
section that contains the information about an HTML page, such as its title and
the date of its creation. We can display the information in this element in
various formats, such as a news article, a blog post, or user’s comments
section. The code such as
9
 <ARTICLE>
<HEADER>
Some heading content
</HEADER>
<P>Some article content</p>
</ARTICLE>
v. ASIDE: It is newly introduced in HTML5 and allows creating a section that is
used to display information about the content of other elements, such as time
and date, current news, and weather report. This element can also be used for
inserting typographical effects in a document, such as sidebars for
advertisements, links, notes and tips.

<BODY>
<HEADER>
<h1>Article Heading</h1>
<p>Article content</p>
</HEADER>
</BODY>
vi. HEADER: It is newly introduced in HTML5 and is used to provide the
introductory content on an HTML page. The HEADER element can contain
headings, paragraphs, links and other content.
<HEADER>
<H1>Heading Level1 </H1>
<A href=[Link]
Elements</A> <NAV>
<UL>
<LI><A
href=”/articles”>Articles</A>
<LI><A href=”/discussions”>Discussions</A>
<LI><A href=”/download”>Download</A>
</UL>
</NAV>
</HEADER>
vii. FOOTER: It is new element in HTML5 and is used to represent the footer,
which contains various types of information, such as links and copyright data
related to a document or a section of the document.
<FOOTER>
<UL>
<LI>Home</LI>

10
 <LI>Links</LI>
<LI>About</LI>
</UL>
</FOOTER>
viii. ADDRESS: This element is normally defined at the header of the HTML page
and is used to display the contact information for a document or part of a
document. Such contact information may include the names of the document’s
owner’s, maintainers, e-mail addresses for feedback, postal addresses, and
phone numbers. The content of this element appears in italics on the web
browser.

D. HEADING: Heading elements are used to provide different heading levels in the
HTML documents. These elements are used to create headlines of a text.
E. Flow Elements: These elements are used in the body of HTML documents or applications. The
body of the HTML document contains almost all the elements of HTML that are used to display different
types of content such as, plain text, links and images in the HTML document. Some of the flow elements
are:
Elements Description
A Represents a link in an HTML document
ABBR Represents an abbreviation
ADDRESS Represents additional information of an HTML document
ARTICLE Represents a self-contained composition of an HTML document
ASIDE Represents a self-contained composition of an HTML document
AUDIO Represents audio and sound streams
B Represents a bold text
BDO Represents the text direction
BLOCKQUOTE Represents long quotation
BR Represents a line break
BUTTON Represents a push button
CANVAS Allows to draw graphics using JavaScript
CITE Represents a citation
CODE Represents a code text
COMMAND Defines a command
DATALIST Defines options for controls by using various elements, such as
OPTION and INPUT
DEL Represents a deleted text
DETAILS Provides additional information or control for users
DFN Represents the definition term
DIV Represents a section in an HTML document
DL Represents a definition list
EM Represents an emphasized text
EMBED Represents a plug-in content in an HTML document
FIELDSET Represents a border of elements on a form
FIGURE Represents some flow content of an HTML document
FOOTER Defines a footer for a section in an HTML document

11
FORM Represents an HTML form for user input
HEADER Defines a header of a section in an HTML document
HGROUP Represents heading of a section by grouping the heading element
(H1,H2)
HR Represents horizontal line
I Represents italic text
IFRAME Represents an inline frame
IMG Represents an image
INPUT Represents an input control
INS Represents inserted text
KBD Represents keyboard text
KEYGEN Represents a control to generate key pair
LABEL Represents a label for an input element
MAP Represents an image map
MARK Represents a text in an HTML document that is highlighted for
reference
MATH Defines math expressions
MENU Represents a menu list
METER Defines a measurement, such as disk usage
NAV Represents a navigation section of an HTML document
NOSCRIPT Represents alternate text to be displayed on the Web browser that
does not support JavaScript
OBJECT Represents an embedded object
OL Represents an ordered list
OUTPUT Represents some output
P Represents a paragraph
PRE Represents a preformatted text
PROGRESS Defines the progress of tasks and operations
Q Represents short quotations
RUBY Allows you to mark up ruby annotations in an HTML document
SAMP Represents sample computer code
SCRIPT Represents a client-side script
SECTION Represents a section in an HTML document
SELECT Represents a select list (drop – down list)
SMALL Represents a small text
SPAN Represents a section in an HTML document
STRONG Represents a strong text
STYLE Represents style information of an HTML document
SUB Represents subscript text
SUP Represents superscript text
SVG Defines graphics in XHTML document
TEXTAREA Represents a multi-line text input control
TIME Defines date or time
VAR Represents a variable part of a text
VIDEO Represents a video or movies streams
WBR Defines a line break opportunity
TEXT Represents text in an HTML document

12
 F. PHRASING: These elements are used to represent the text of the HTML
document. These elements are also used to mark up the HTML document text within
the paragraphs of the document. We can organize the text of our HTML document by
using various elements
List of Phrasing Elements
Elements Description
A Represents a link in an HTML document
ABBR Represents an abbreviation
AREA (if it is a Represents an area of an image
descendant of a
map element)
AUDIO Represents audio and sound streams
B Represents a bold text
BDO Represents the text direction
BR Represents a line break
BUTTON Represents a push button
CANVAS Allows to draw graphics using JavaScript
CITE Represents a citation
CODE Represents a code text
COMMAND Defines a command
DATALIST Defines options for controls by using various elements, such as
OPTION and INPUT
DEL Represents a deleted text
DFN Represents the definition term
EM Represents an emphasized text
EMBED Represents a plug-in content in an HTML document
I Represents italic text
IFRAME Represents an inline frame
IMG Represents an image
INPUT Represents an input control
INS Represents inserted text
KBD Represents keyboard text
KEYGEN Represents a control to generate key pair
LABEL Represents a label for an input element
MAP Represents an image map
MARK Represents a text in an HTML document that is highlighted for
reference
MATH Defines math expressions
METER Defines a measurement, such as disk usage
NOSCRIPT Represents alternate text to be displayed on the Web browser that
does not support JavaScript
OBJECT Represents an embedded object
OUTPUT Represents some output
PROGRESS Defines the progress of tasks and operations
Q Represents short quotations
RUBY Allows you to mark up ruby annotations in an HTML document

13
 SAMP Represents sample computer code
SCRIPT Represents a client-side script
SECTION Represents a section in an HTML document
SELECT Represents a select list (drop – down list)
SMALL Represents a small text
SPAN Represents a section in an HTML document
STRONG Represents a strong text
STYLE Represents style information of an HTML document
SUB Represents subscript text
SUP Represents superscript text
SVG Defines graphics in XHTML document
TABLE Represents a table
TEXTAREA Represents a multi-line text input control
TIME Defines date or time
UL Represents unordered list
VAR Represents a variable part of a text
VIDEO Represents a video or movies streams
WBR Defines a line break opportunity
TEXT Represents text in an HTML document
[Link] Elements: These elements are used to import content
from other sources into the HTML document. For Example, the EMBED
element it is used as an integration point to plug in the content from
other sources into the HTML document. List of Embedded
Elements
Elements Description
AUDIO Represents audio and sound streams
CANVAS Allows to draw graphics using JavaScript
EMBED Represents a plug-in content in an HTML document
IFRAME Represents an inline frame
MATH Defines math expressions
OBJECT Represents an embedded object
SVG Defines graphics in XHTML document
VIDEO Represents a video or movies streams

H. INTERACTIVE Elements: These elements are specially intended

for user interaction. Some of example are

Elements Description
A Represents a link in an HTML document
AUDIO (If Represents audio and sound streams
controls
attribute is
present)
BUTTON Represents a push button
EMBED Represents a plug-in content in an HTML document
14
IFRAME Represents an inline frame
IMG Represents an image
INPUT Represents an input control
KEYGEN Represents a control to generate key pair
LABEL Represents a label for an input element
MAP Represents an image map
MARK Represents a text in an HTML document that is highlighted for
reference
MATH Defines math expressions
MENU (If the Represents a menu list
type attribute is
in the toolbar
state
OBJECT Represents an embedded object
SELECT Represents a select list (drop – down list)
TEXTAREA Represents a multi-line text input control
VIDEO Represents a video or movies streams
Character Entities: We need to include some special character such as > and
< in the content of an HTML element. These characters are called as entities. HTML
enables us to include such symbols in the content of an element by using various
character entities. There are some characters, such as Greek and Chinese, which
do not appear on the keyboard of the user. However, we can overcome this
problem by using character entities in an HTML document .
Some of them are:
Character Name Character Character Entities

Less than < &lt;

Greater than > &gt;

Ampersand & &amp;

Quotation mar “ &quot;

Apostrophe ‘ &apos;

Horizontal Rules: Horizontal rules are used to draw horizontal lines across the browser window. It is
used to divide an HTML page into different horizontal sections. Horizontal rules are required when we need to
display different types of content in the same HTML page in a distinct manner. The HR element is used to
represent the horizontal rule. It is an empty tag; therefore, it does not contain any content in it. Some of the
attribute of Horizontal rule are:

Attributes Purpose

class Defines the name of the class

15
lang Defines the language of the rule

dir Defines the direction of rule, that is from left to right or right to
left

id Defines the value of the id

onClick Opens an HTML document on a mouse click

onDbClick Opens an HTML document on a double – click

onKeyDown Opens an HTML document on pressing of a key

onKeyPress Opens an HTML document on pressing and releasing of the

mouse button

onKeyUp Opens an HTML document when key is released

onMouseDown Opens an HTML document on clicking of a mouse button

onMouseMove Opens an HTML document on moving of the mouse pointer

onMouseOut Opens an HTML document when the mouse pointer moves out
of the element

onMouseOver Opens an HTML document when the mouse pointer moves over
the element

onMouseUp Opens an HTML document on releasing of the mouse button

style Defines inline style of the element

title Provides extra information about the element.

Paragraph: A paragraph tag is a container tag, which means it has both the
opening <p> tag and closing tag </p>. It is a container because it can contain
other tags in it. Attribute of the P element are:

Attribute Purpose

class Defines the name of the element

dir Defines the direction of the paragraph written from left to right
or right to left

id Defines the value of the id

lang Defines the language in which the paragraph is written

style Defines the inline style of the element

16
Title Provides extra information about the element

Onclick Opens an HTML document on a mouse click

Ondblclick Opens an HTML document on a double click

Onmousedown Opens an HTML document on pressing of a mouse button

Onmousemove Opens an HTML document on moving the mouse pointer

Onmouseout Opens an HTML document when the mouse pointer is moved out
of the element

Onmouseover Opens an HTML document when the mouse pointer is moved

over the element.

Onmouseup Opens an HTML document when mouse button is released

Onkeydown Opens an HTML document on pressing of a key

Onekeypress Opens an HTML document on clicking and releasing of the mouse

Onkeyup Opens an HTML document when a key is released

Citations: Citation is used to display text in a format that is different from the
normal text. The text embedded within the citation element is normally display in
the italic form. A citation is normally required to quote statements or remarks of an
author. The citation element is defined by an opening <cite> tag and </cite>.
Definition: This tag is used to list the definition of various terms. It contains the
following tags
 <DL>: Represents a definition list that is used to list the number of
definitions.
 <DT>: Represents the terms in a definition
 <DD>: Represents definitions of the terms

Developing HTML web pages by applying various HTML tags

1. Example HTML web page on SECTION and NAV elements
Section_Nav.html

<HTML>
<HEAD>
<TITLE>Working with Section Elements</TITLE>
</HEAD>
<BODY>
<SECTION>
17
 <H1>HTML5</H1>
<P>Example of the SECTION element.</P>
</SECTION>

<NAV>
<H1>Navigation</H1>
<UL>
<LI><A href="[Link]">Articles</A></LI>
<LI><A href="[Link]">Today’s to do list</A></LI>
</UL>
</NAV>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>Article page</TITLE>
</HEAD>
<BODY>
<H1>This is an Article Page</H1>
</BODY>
</HTML>

2. Developing HTML page to understand the use of the ADDRESS element.

[Link]
<HTML>
<HEAD>
<TITLE>Working with Section Elements</TITLE>
</HEAD>
<BODY>
<ADDRESS>
<P>Famaous Mail Web Sites:</P>
<A href="/[Link] /">Yahoo Home</A> and
<A href="/[Link] Home </A>
</ADDRESS>
</BODY>
</HTML>

3. Developing HTML web page by implementing HEADER and FOOTER

tags
Header_Footer.html
<HTML>
<BODY>
18
 <HEADER>
<H1>Heading </H1>
<A href="[Link]"> Section Elements</A></DD>
<NAV>
<UL>
<LI><A href="/articles">Articles</A>
<LI><A href="/discussions">Discussions</A>
<LI><A href="/download">Download</A>
</UL>
</NAV>
</HEADER>
The body content of the HTML document
<FOOTER>
<NAV>
<P><A href="/[Link]">Credits</A> —
<A href="/[Link]">Terms of Service</A>
</NAV>
<P>Copyright Orbit Pvt Ltd</P>
</FOOTER>
</BODY>
</HTML>

4. Developing HTML web page using various headings tags and special
characters.
[Link]
<HTML>
<HEAD>
<TITLE>heading2</TITLE>
</HEAD>
<BODY>
<H1>HTML WEB PAGE</H1>
<H2>JavaScript Web Page</H2>
<H3>CSS Web Page</H3>
<p>The alpha-numeric characters, such as ‘<’, and ‘>’, and ‘&’ are referred to as
special characters. </p>
<p>
The &lt; and &gt; are used to create an HTML element.
</p>
<HGROUP>
<H4>Servlet Web Page</H4>
<H5>JSP Web Page</H5>
<H6>Struts Web Page</H6>
</HGROUP>
19
 </BODY>
</HTML>

5. Developing HTML web page using <HR> tag and <BR> tags of HTML.
[Link]
<HTML>
<HEAD>
<TITLE>hrule2</TITLE>
</HEAD>
<BODY>
The first line.<HR/>
The second line.<HR size="10" style="background-color:blue;"/>
The third line <br> <br> <br> <br>

<H1>Address without line break.</H1>

Prof. Suresh Kumar
flat no. 28,
Santosh Nagar,
Hydrabad-500026,
India

<HR/>

<H1>Address with line break.</H1><BR/>

Prof. Sami Ahmed <BR/>
flat no. 007,<BR/>
James Bond STR,<Br>
Madras-630000, <BR/>
India<BR/>
</BODY>
</HTML>
6. Developing HTML web page using ‘Definition’ and <CITE> tags of
HTML.
[Link]
<HTML>
<HEAD>
<TITLE>definition</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Planet</DT>
20
 <DD>Celestial body that revolves around the star</DD>
<DT>Satellite</DT>
<DD>Celestial body that revolves around the planet</DD>
<DT>Star</DT>
<DD>A celestial body that has its own heat and light</DD>
</DL>
<br><br><br><br>
<P>There are some alpha-numeric characters such as ‘&lt;’, and ‘&gt;’, and
‘&amp;’
that are used in <CITE>HTML syntax formation</CITE>. They are referred to as
<CITE>special characters</CITE>.</P>
</BODY>
</HTML>

Working with Text

By default, the HTML documents are stored in the plain text format, which means it
doesn’t contain any type of formatting. To format the text in an HTML document, we
need to use various kinds of HTML elements. Formatting the text not only enhances the
visual appearance of the content but also improves its readability and comprehensibility.
The content of a formatted document is presented in an organized manner, which allows
readers to easily differentiate between various types of information.
Formatting Text with HTML Elements
HTML provides a set of elements to change the appearance of the text by applying
various formatting features, such as bold, italic, subscript, and superscript. In general,
HTML formatting elements are grouped into two categories:
 Physical Style
 Logical Style
Physical Style: HTML uses this physical style element to change appearance of text. If
we want our text to appear in a particular style such as bold or italic then we will use
physical style. Some of the Physical elements are:
o B: Displays the text in bold.
o I: Displays the text in Italic form
o SMALL: Displays the text in small font size
o SUB: Displays the text as subscript
21
 o SUP: Displays the text as superscript
Logical Style Elements: It specifies that the enclosed text has a specific meaning,
context, or usage. The advantage of using logical style elements rather than physical
style elements is that the meaning related to the element is more precisely conveyed to
the users. Some Logical Style Elements are:
o ABBR: Displays abbreviation on a web page
o CODE: Refers to the program code
o SAMP: Displays sample program output on a web page
o KDB: Refers to the keyboard keys
o EM: Emphasizes text
o STRONG: Emphasizes text by increasing boldness
o DFN: Displays new terms on a web page
o Q: Displays short quotations on a web page
o INS: Displays the inserted text
o DEL: Displays the deleted text
o VAR: Represents a variable
o BDO: Changes the direction of text
Mark Element: It is used to mark or highlight the text in an HTML document for
reference purposes. The style attribute of the MARK element is used to set the color with
which we want to highlight the text.
Code Element: It uses to represent the computer (program) code in an HTML document.
7. Developing HTML web page using various text displaying text of HTML.

Different_Text.html
<HTML>
<HEAD>
<TITLE>HTML document</TITLE>
</HEAD>
<BODY>
<h2>Displaying Text in various formats</h2>
Here we are displaying just plain text in HTML document. As you can see, we
have not used any element in the code to organize this text. <br><br>

Here we use <B> the B element </B> to display the text as <B> bold</B>.<br><br>

Here we use <I> the I element </I> to display the text as <I> italic </I>.<br><br>

<SMALL> This is a small text with only one SMALL element.</SMALL> <BR/>
<SMALL><SMALL> This is a small text with two nested SMALL
elements.</SMALL></SMALL> <br><br>

<P>Displaying <SUB>subscripted </SUB> Text.</P> <br><br>

<P>Displaying <SUP> superscripted </SUP> Text. </P> <br><br>

22
<ABBR title="Internet Explorer">IE</ABBR> abbreviation of Internet Explorer
<br><br>

Following is the basic structure of HTML:<BR/>

<code>
&lt;!DOCTYPE HTML&gt;<BR/>
&lt;HTML&gt;<BR/>
&lt;HEAD&gt;<BR/>
&lt;TITLE&gt;&lt;/TITLE&gt;<BR/>
&lt;/HEAD&gt;<BR/>
&lt;BODY&gt;<BR/>
&lt;/BODY&gt;<BR/>
&lt;/HTML&gt;<BR/>
</code> <br><br><br>

Press the <KBD>ENTER</KBD> key to execute the application. <br><br><br>

<P> The ABC phone service has been around for a while, with even access to the
marketplace. The XYZ fans, on the other hand, were left in the lurch with no equivalent
service made available. <STRONG>However, that is all set to change with the launch of
more ABC phones. </STRONG></P> <br><br><br>

<DFN title=”HTML”> HTML </DFN> is an acronym for Hypertext Markup Language,

which is a markup language for Web pages <br><br><br>
HTML, CSS, <INS>SGML</INS>, XHTML <br><br><br>
HTML, CSS, SGML, <DEL>XHTML</DEL> <br><br><br>
<P> The MARK element is used to <MARK style="background-color:yellow;"> mark or
highlight the text </MARK> in an HTML document. </P>
</BODY>
</HTML>
Organizing Text in HTML
We know that in a Web page, content is organized into different formats, such as layers,
paragraphs, lines, tables and divisions. Organizing text refers to the proper placement of
all the HTML elements and their content in a Web page. By default, a Web browser wraps
text in a Web page and displays the enclosed text in a single block by avoiding the line
and paragraph breaks. Now, if the content of a page is not separated by any link or
paragraph breaks, it becomes very tedious for the readers to understand the given
information.
To overcome this problem, we arrange text in different ways by using no. HTML elements
available as:
 Word breaks
 Preformatted text
 DIV element
 SPAN element
 Formatting text in tables
 Defining the Ruby (captioned) text

23
WBR Element: It is used to provide breaks between words or paragraph in a document.
WBR does not force the Web browser to break the line; whereas, the BR element breaks
the line irrespective of the space available in the Web page.
PRE Element: It is used to instruct a browser that the enclosed text is a formatted text
and should not be formatted again. This element is commonly used when the formatting
of the content is predefined, such as code snippet and poems.
DIV Element: This element is used to divide a web page into different divisions or
sections. This element basically works as a container for other HTML elements. Using this
element, we can group the HTML elements in sections and apply Cascading Style Sheet
(CSS) on them. The DIV element is a block level element and cannot be used inside the P
element. The P element is used for only creating paragraph where as DIV element is
used to divide a web page into different sections. Its attribute is given as

Attributes of DIV element

Attribute Description
id Defines a unique id for an element
class Defines a class name for an element
style Defines an inline style for an element
Title Defines extra information about an element
lang Defines a language code for the content in an
element
dir Defines the text direction for the content in an
element

SPAN Element: This element is used to change the style of the text enclosed within the
element using the style attribute. The SPAN element provides additional formatting
capabilities to HTML elements and is used with style sheets to set presentational
attributes that define the style of the content.
Attributes of SPAN element
Attribute Description
id Defines a unique id for an element
class Defines a class name for an element
style Defines an inline style for an element
title Defines a title for an element
lang Defines a language code for the content in an
element
dir Defines the text direction for the content in an
element

TABLE Element: This element is use for arranging text in a tabular format, i.e. in rows
and columns. The TABLE element is used along with the TH, TR, and TD elements. The
TH element is used to define the header of a table column. The TR element specifies the
content of the table rows and the TD element specifies the content of a table cell. We
can set the width and height of the table columns and rows using the style attribute in
the Table element. Using the style attribute we can also define the borders for the table,
font style for the table content, and the font size for the table.

RUBY (Caption) Text: This element specifies ruby annotations that provide reading or
pronunciation guide of a particular language, such as Chinese and Japanese. A ruby is
24
apart of an annotation par in which a piece of text (known as ruby text) is associated
with another set of text (known as ruby base. Ruby element contains the following
elements such as
o RP: Contains parenthesis
o RT: Acts as the container for the ruby text

List Element: Lists let you display information in a compact, tight format and useful
asset to know about. There are three kinds of lists –
UNORDERED LISTS, ORDERED LIST and DEFINITION LISTS.
UNORDERED LISTS
We can create unordered lists with elements like <UL>. Each item in the list gets its
own element using the <LI> list item tag.

ORDERED LIST
While unordered lists display a simple bullet before each list item, ordered lists use a
number (or lettering) system of some kind to indicate that the items are ordered in some
way. Here’s an example that creates a simple numbered list using he <OL> element.
DEFINITION LISTS
The lists include both terms and their definitions. We use the <DL> element to create
these lists, <DT> for terms, and <DD> for the definition of each term.

8. Developing HTML web page using ‘WBR’ and ‘PRE’ tags of HTML.

Word_Pre.html
<HTML>
<HEAD>
<TITLE>WORD BREAKS</TITLE>
</HEAD>

<BODY>
The longest name of a place in the world is:<BR/>
Krung thep maha <WBR>nakorn amorn </WBR>ratana kosinmahintar <WBR>ayutthay
amaha dilok phop </WBR>noppa ratrajathani burirom <WBR>udom rajaniwesmahasat
</WBR>harn amorn phimarn avatarn <WBR>sathit sakkattiya </WBR>visanukamprasit.
<br><br><br>

<PRE>
Preformat
Preformat Preformat
Preformat Preformat Preformat
Preformat Preformat Preformat Preformat Preformat
Preformat Preformat Preformat Preformat Preformat Preformat
/\
/ \
/ \
/ \

25
 --------
" "
" "
" "

</PRE>

</BODY>
</HTML>

9. Developing HTML web page using ‘DIV’ tags of HTML.

In the below program, we have used two DIV elements. In the first DIV element, we have
displayed the text, HOME, in the center and changed the background color to red. In the
second DIV element, we have displayed the Navigation section text and enclosed it
within a border. Here in this page, a web browser displays two sections on a Web page.

[Link]
<HTML>
<HEAD>
<TITLE>DIV</TITLE>
</HEAD>
<BODY>
<DIV style="background-color: RED; text-align: center">
<P><B>HOME</B></P>
</DIV>
<DIV style="border: 2px solid black">
<P><B>Navigation section</B></P>
</DIV>
</BODY>
</HTML>

10. Developing another HTML web page using ‘DIV’ tags of HTML.

[Link]
<HTML>
<HEAD>
<TITLE>Position</TITLE>
</HEAD>
<BODY>
<DIV id='abc' style="z-index: 2; position: relative; right: 0px; top: 10px;
background-color: #cccc33; width: 180px; padding: 10px; color: white; border: #ffffcc
2px dashed; "> HTML Black Book
</DIV>
</BODY>
</HTML>

26
 11. Developing HTML web page using ‘SPAN’ tags of HTML.

Span is used to change the format of a specific part of the text.

[Link]
<HTML>
<HEAD>
<TITLE>Span</TITLE>
</HEAD>
<BODY>
<H1>
Use <SPAN style="color: orange"> the SPAN element</SPAN> for
formatting <SPAN style="color: blue">Inline content</SPAN>
</H1>
</BODY>
</HTML>

12. Developing HTML web page using ‘RUBY’ tags of HTML.

[Link]
<HTML>
<HEAD>
<TITLE>Ruby Text</TITLE>
</HEAD>
<BODY>
We are talking about the RUBY element of
<RUBY><B>HTML</B><RP>(</RP><RT><B><SMALL>Hyper Text Markup
Language</SMALL></B></RT><RP>)</RP></RUBY>
</BODY>
</HTML>

13. Developing HTML web page using ‘OL’ tag of HTML.

[Link]

<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>

<BODY>
<H1 ALIGN=CENTER>
Creating An Ordered List
</H1>

Here are some items to consider when buying a computer :

<OL>

27
 <LI>Speed
<LI>Cost
<LI>RAM
<LI>Disk Space
<LI>CD ROM Speed
</OL>
</BODY>
</HTML>

14. Developing HTML web page using ‘UL’ tag of HTML.

[Link]
<HTML>
<HEAD>
<TITLE>
An Unordered List
</TITLE>
</HEAD>

<BODY>
<H1 ALIGN=CENTER>
Creating An Unordered List
</H1>

Here are some items to consider when buying a computer :

<UL>
<LI>Speed
<LI>Cost
<LI>RAM
<LI>Disk Space
<LI>CD ROM Speed
</UL>
</BODY>
</HTML>

15. Developing HTML web page using ‘DL’ tag of HTML.

[Link]
<HTML>
<HEAD>
<TITLE>
An Definition List
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>
Creating A Definition List
</H1>

28
 Here are some items to consider when buying a computer:
<DL>
<DT>Speed<DD>CPU speed in megahertz
<DT>Cost<DD>Make sure to keep this down
<DT>RAM<DD>Amount of memory in the computer
<DT>Disk Space<DD>Get plenty of gigabytes.
<DT>CD ROM Speed<DD>Get at least 24x
</DL>
</BODY>
</HTML>
16. Developing HTML web page by applying customizing application.

[Link]
<HTML>
<HEAD>
<TITLE>
An Ordered List
</TITLE>
</HEAD>

<BODY>
<H1 ALIGN=CENTER>
Creating An Ordered List
</H1>

Here are some items to consider when buying a computer:

<OL TYPE="1">
<LI>Speed
<LI>Cost
<LI>RAM
<LI>Disk Space
<LI>CD ROM Speed
</OL>
</BODY>
</HTML>

29
LINKS: HTML allows linking to other HTML documents as well as images. Clicking on a
section of text or an image in one web page will open an entire web page or an image.
The text or an image that provides such linkages is called Hypertext, a Hyperlink or a
Hotspot.
Generally, a hyperlink is an underlined word or phrase or can also be an image or icon
that contains a specific address of a Web page.. The address is provided in the hyperlink
in the form of the Uniform Resource Locator (URL), which is a unique address allotted to
every Web page. Within the help of URL we can navigate to the specific Web page.
In html, we can create a hyperlink by using the anchor element (A). The (A) uses the href
attribute to specify the target resource or document that we want to open when the user
clicks the hyperlink. The term “href” stands for hypertext reference. Along with hyperlink
we will use “target” and “id” attributes.
target attribute: The element <A> uses this attribute to specify a window where we
want to open a document when a hyperlink is clicked. We can open a document in the
same window or another window by using the target attribute. HTML defines five values,
_blank, _self, _parent, _top and framename or the target attribute. In addition to the
predefined values, we can specify the name o the frame in which we want to open a
document.

Value Description
_blank Opens the linked document in a new unnamed window
_self Opens the linked document in the current window (this is default value)
_parent Open the linked document in the parent window
_top Opens the linked document in the top most window
framename Opens the linked document in a named frame

id attribute: The <A> element uses the “id” attribute to create a fragment identifier
within a document. A fragment identifier specifies a particular location within a
document. We can navigate different locations within a document by using the “id”
attribute. The “id” attribute takes a character string as a value. This value must be
unique in the same document; however, it can be reused in different documents. For
example, <A id=”top”></A> first defines a location within the document and then <A
href=”#top”>Go to Top </A> provides reference to that location with a hyperlink
containing fragment identifier. The hash symbol (#) indicates that the value is a
fragment identifier. This concludes that URL followed by the # symbol along with defined
location (fragment identifier) is used to redirect to a particular named hyperlink.

In general case, any HTML document references a defined location by placing the #
symbol, as shown below
<a href=”[Link]#bottom”>Go to Bottom of this page </a>

The browser distinguishes Hyperlinks from normal text. Every Hyperlink,

 Appears in blue

-The default color setting in a browser for Hyperlink text or image

-The color can be set dynamically via an HTML program if required
30
  The hyperlink text/image is underlined
 When the mouse cursor is placed over it, the standard arrow shaped mouse
cursor changes to the shape of a hand.

The blue color, which appears by default, can be over-ridden. To change these
link colors, there are three attributes that can be specified with the <BODY> tag.
These are:
LINK : Changes the default color of a Hyperlink to whatever color is specified
with this tag. The user can specify the color name or an equivalent
hexadecimal number.
ALINK : Changes the default color of a Hyperlink that is activated to whatever
color is specified with this tag. The user can specify the color name or
an equivalent hexadecimal number.
VLINK : Changes the default color of a Hyperlink that is already visited to
whatever color is specified with this tag. The user can specify the color
name or an equivalent hexadecimal number.
Links are created in a web page by using the <A> </A> tags. Anything written between
the <A></A> tags becomes a hyperlink / hotspot. Here <A> means anchor, by clicking
on the hyperlink navigation to a different web page or image takes place.
The most common form of hyperlink is undoubtedly the text hyperlink, where the
hyperlink itself usually appears underlined and in a different color from the surrounding
text to set it off from that text.
Creating Text Hyperlinks
<A HREF=”[Link]”>NEXT PAGE</A>
Here we are using the <A> tag to set upa hyperlink and using the HREF attribute to set
the target of the hyperlink to “[Link]”. This is the URL that the browser will
navigate to when the user clicks the link. The text inside the <A> element will appear in
the hyperlink style for the page, which is underlined and usually in the hyperlink style for
the page, which is underlined and usually in a different color from the surrounding text
like this:
NEXT PAGE
17. Developing HTML web page by applying Hyperlinks to web pages.

[Link]
<HTML>
<HEAD>
<TITLE>
Creating A hyperlink
</TITLE>
</HEAD>

<BODY>
<CENTER>
<H1>Creating A Hyperlink
</H1>

Here's a Web Page to check out:

31
 <A HREF="[Link]">CLICK</A>
</CENTER>
</BODY>
</HTML>

18. Developing HTML web page by applying Hyperlinks to web pages.

[Link]

<HTML>
<HEAD>
<TITLE>
Setting hyperlink Colors
</TITLE>
</HEAD>

<BODY LINK="GREEN" VLINK="BLUE" ALINK="RED">

<CENTER>
<H1>Setting Hyperlink Colors
</H1>

Here's a Web Page to check out:

<A HREF="[Link]">CLICK</A>
</CENTER>
</BODY>
</HTML>

19. Developing HTML web page by applying Hyperlinks to web pages.

[Link]
<html>
<head>
<title>ORBIT TECHNOLOGY INFORMATION</title>

<Marquee direction="left" Scrollamount="25" Scrolldelay ="50">

<font color="RED" size="6" face="verdana" >
ORBIT TECHNOLOGIES PVT LTD
</font>
</marquee>

</head>

<body bgcolor="cyan">
<h3><center>ORBIT TECHNOLOGY INFORMATION</center></h3>
<img src="[Link]" align="right" width="250" height="275">
<br><br>
<h4>
<a href="[Link]">COURSE INFORMATION</p>
32
<a href="[Link]">REGISTRATION FORM</p>
<a href="[Link]">ORBIT BRANCHES</p>
<a href="[Link]">STAFF DETAILS</p>
<a href="about_us.html">ABOUT US</p>
<a href="[Link]">NEWS and EVENTS</p>
</h4>
</html>
20. Developing HTML web page by applying Hyperlinks to web pages.

[Link]
<html>
<head>
<title>ORBIT TECHNOLOGY INFORMATION</title>
<Marquee direction="left" Scrollamount="5" Scrolldelay ="50">
<font color="RED" size="6" face="verdana" >
ORBIT TECHNOLOGIES PVT LTD
</font>
</marquee>
</head>
<body bgcolor="cyan">
<h3><center>ORBIT TECHNOLOGY INFORMATION</center></h3>
<img src="[Link]" align="right" width="350" height="275">
<br><br>
<h4>
<a href="[Link]" style="text-decoration: none">COURSE INFORMATION</p>
<a href="[Link]" style="text-decoration: none">REGISTRATION FORM</p>
<a href="[Link]" style="text-decoration: none">ORBIT BRANCHES</p>
<a href="[Link]" style="text-decoration: none">STAFF DETAILS</p>
<a href="about_us.html"style="text-decoration: none">ABOUT US</p>
<a href="[Link]" style="text-decoration: none">NEWS and EVENTS</p>
</h4>
</html>
21. Developing HTML web page by applying Hyperlinks to web pages.

Email_Link.html
<HTML>
<HEAD>
<TITLE>
Creating A MAILTO Hyperlink
</TITLE>
</HEAD>
<BODY LINK="GREEN" VLINK="BLUE" ALINK="RED">
<CENTER>
<H1>Creating A MAILTO Hyperlink

33
 </H1>
Want to contact me? Just
<A HREF="[Link] Me</A>!
</CENTER>
</BODY>
</HTML>

[Link]

<HTML>
<HEAD>
<TITLE>Linking to Mail System</TITLE>
</HEAD>
<BODY>
<H1><A
href="[Link]
r@[Link]&body=Hi,%0AThis is an example of linking a hyperlink to the
mail system.%0ARegards.">E-mail Us</A></H1>
<BR/>
</BODY>
</HTML>
22. Developing HTML web page by applying Hyperlinks to web pages.

[Link]
<HTML>
<HEAD>
<TITLE>Creating a Hyperlink with the target attribute</TITLE>
</HEAD>
<BODY>
<H1><A href="[Link]" target="_blank">Go to the REFERENCE
PAGE</A></H1>
<BR/>
<H3>(You are directed to a New Window)</h3>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>Creating a Reference Page</TITLE>
</HEAD>
<BODY>
<H1>This is the REFERENCE PAGE</H1>
</BODY>
</HTML>

23. Developing HTML web page by applying Hyperlinks to web pages.

34
[Link]
<HTML>
<HEAD>
<TITLE>Creating a Hyperlink with id attribute</TITLE>
</HEAD>
<BODY>
<H1>This is TOP</H1>
<A id="top"></A>
<A href="#middle">Go to Middle</A>
<BR/>
<A href="#bottom">Go to Bottom</A>
<H1>This is TOP</H1>

<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>

<H1>This is MIDDLE</H1>
<A id="middle"></A>
<A href="#top">Go to Top</A>
<BR/>
<A href="#bottom">Go to Bottom</A>
<H1>This is MIDDLE</H1>

<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>
<BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/>

<H1>This is BOTTOM</H1>
<A id="bottom"></A>
<A href="#top">Go to Top</A>
<BR/>
<A href="#middle">Go to Middle</A>
<H1>This is BOTTOM</H1>

</BODY>
</HTML>
TABLES : A ‘TABLE’ is an orderly arrangement of data that is stored in the form of
rows and columns. Web designers use table’s purposes, such as positioning images and
text on Web pages (page layout), displaying large arrays of data, and creating input
forms. A table is a two dimensional matrix, consisting of rows and columns. Tables are
intended for displaying data in columns on a web page. All table related tags are
included between the <TABLE></TABLE> tags.
Each row of a table is described between the <TR></TR> tags. Each column of a table is
described between <TD></TD> tags.
Table rows can be of two types:
35
Header rows(A row that spancs across columns of a table)
A table header row is defined using <TH> </TH> tags. The content of a table
header row is automatically centered and appears in boldface.
Data rows (Individual data cells placed in the horizontal plane creates a data
row)
There could be a single data cell (i.e. a single column table) or multiple data cells
(i.e. a multi column table)
Data cells hold data that must be displayed in the table. A data row is defined
using <TD></TD> tags. An image can also be displayed in a data cell.

The attributes of TABLE tag are

ALIGN : Horizontal alignment is controlled by the
ALIGN attribute. It can be set to LEFT,
CENTER or RIGHT.

VALIGN : Controls the vertical alignment of cell

contents. It accepts the values TOP,
MIDDLE, or BOTTOM

WIDTH : Sets the WIDTH to a specific number of

pixels or to a percentage of the available
screen width. If width isnot specified, the
data cell is adjusted based on the cell data
value.

BORDER : Controls the border to be placed around

the table. The border thickness is specifed
in pixels.

CELLPADDING : This attributes controls the distance

between the data in ta cell and the
boundaries of the cell.

CELLSPACING : Controls the spacing between adjacent

cells.

COLSPAN : The COLSPAN attribute inside a <TH> or

<TD> tag instructs the browser to make
the cell defined by the tag takes up more
than one column. The COLSPAN attribute
can be set equal to he number of columns
the cell is to occupy. This attribute is
useful when one row of the table needs to
be a certain number of columns wide.

ROWSPAN : The ROWSPAN attribute works in the same

36
 way as the COLSPAN attribute except that
it allows a cell to take up more than one
row. The attribute can be set by giving a
numeric value.

HTML provides the TABLE element to create tables and display the respective
information in a tabular format. HTML also provides various elements to be used as the
child elements of the TABLE element. They are
o CAPTION
o COLGROUP
o COL
o TBODY
o THEAD
o TFOOT
o TR
o TD
o TH
CAPTION: It is used to create the CAPTION of a table and used in conjunction with the
TABLE element. A table should have only one CAPTION element and it must be placed
after the starting tag of the TABLE element.

COLGROUP: This element is used to specify the properties, such as font color, and
background color, border, for a group of columns in a table. This element is useful in
applying a style to multiple columns without defining the style again and again for each
cell. The COLGROUP element must be placed after the CAPTION element and before the
TBODY, THEAD, TFOOT, TR elements. We can use the span attribute of the COLGROUP
element to specify the number of columns on which we want to apply properties.

COL: This element is used to define the properties of each column of a table separately.
The COL element can be defined in the COLGROUP element, which itself is defined in the
TABLE element. Each COL element in the COLGROUP element represents a column of the
table.

TBODY: This element is used to group the rows of a table and is used in conjunction
with the THEAD and TFOOT elements. These three elements determine the body, head,
and footer of the table. They allow us to scroll freely throughout the body section and
provide a fixed height to the table.

THEAD: This element is used to define the header for the table and is used in
conjunction with the TBODY and TFOOT elements. We must define the THEAD element as
a child of the TABLE element after the CAPTION and COLGROUP elements and before the
TBODY, TFOOT, and TR elements.

TFOOT: This element is used to define the footer for the table and is used in conjunction
with the TBODY and the THEAD elements. We must define the TFOOT element as a child

37
of the TABLE element after the CAPTION, COLGROUP, and THEAD elements and before
the TBODY and TR elements.

24. Developing HTML web page using Table tags on web pages.

[Link]
<HTML>
<HEAD>
<TITLE>A simple table</TITLE>
</HEAD>

<BODY>
<TABLE>
<TR>
<TD>001</TD>
<TD>Suresh</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Hyderabad</TD>
</TR>
<TR>
<TD>002</TD>
<TD>Sami</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Bangalore</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Naresh</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Madras</TD>

</TR>
</TABLE>
</BODY>
</HTML>

//Applying Headings to the columns of the table

[Link]
<HTML>
<HEAD>
<TITLE>Adding a title to a column</TITLE>
</HEAD>
<BODY>
<TABLE>
38
 <TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Akbar</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Bangalore</TD>

</TR>
<TR>
<TD>002</TD>
<TD>Sandeep</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Madras</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Pradeep</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, Bank St, Bombay</TD>
</TR>
</TABLE>
</BODY>
</HTML>

//Applying CAPTION to the table

[Link]
<HTML>
<HEAD>
<TITLE>Adding caption to a table</TITLE>
</HEAD>

<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
39
 <TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Pune</TD>
</TR>
<TR>
<TD>002</TD>
<TD>Arun</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, [Link], Indore</TD>
</TR>

</TABLE>
</BODY>
</HTML>

//Applying COLGROUP element to the columns of the table

[Link]
<HTML>
<HEAD>
<TITLE>Changing the Properties of Multiple Columns
</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<COLGROUP span="2" style="background-color:yellow">
</COLGROUP>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Harish</TD>
<TD>15-03-1983</TD>
40
 <TD>01-01-2009</TD>
<TD>D-26, sector 62, Hyderabd</TD>
</TR>
<TR>
<TD>002</TD>
<TD>Majeed</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Jeddah</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Ameet</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, Bangalore</TD>
</TR>
</TABLE>

</BODY>
</HTML>

[Link]
<HTML>
<HEAD>
<TITLE>Spanning rows in a table</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>
<H3>Employee Details<H3>
</CAPTION>
<TR>
<TH rowspan="4">Employee id, name,<BR>
date of birth<BR>
and other information</TH>
<TH>Emp Id</th>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Ravi Kishore</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
<TD>D-26, sector 62, Hyderabad</TD>
41
 </TR>
<TR>
<TD>002</TD>
<TD>Salman</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, Washington D.C</TD>
</TR>
<TR>
<TD>003</TD>
<TD>Minhaj</TD>
<TD>25-11-1970</TD>
<TD>11-11-2006</TD>
<TD>H no. 123, South Ext, Delhi</TD>
</TR>
</TABLE>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>Spanning columns in a table</TITLE>
</HEAD>

<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>
<TR>
<TH colspan="5">Employee id, name,
date of birth
and other information

of employee</TH>
</TR>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
<TR>
<TD>001</TD>
<TD>Altaf</TD>
<TD>15-03-1983</TD>

42
 <TD>01-01-2009</TD>
<TD>D-26, sector 62,Fort City</TD>
</TR>
<TR>
<TD>002</TD>
<TD>Muzaffar</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, HiTech</TD>
</TR>

</TABLE>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>Advanced Tables</TITLE>
</HEAD>

<BODY>
<TABLE>
<CAPTION>
<B>Employee Details</B>
</CAPTION>

<THEAD>
<TR>
<TH>Emp Id</TH>
<TH>Emp name</TH>
<TH>DOB</TH>
<TH>DOJ</TH>
<TH>Address</TH>
</TR>
</THEAD>

<TFOOT>
<TR>
<TH colspan="5">This table contains information about the employees.</TH>
</TR>
</TFOOT>

<TBODY>
<TR>
<TD>001</TD>
<TD>Sirish</TD>
<TD>15-03-1983</TD>
<TD>01-01-2009</TD>
43
 <TD>D-26, sector 62,ECIL</TD>
</TR>

<TR>
<TD>002</TD>
<TD>Ilyas</TD>
<TD>19-12- 1980</TD>
<TD>25-08-2009</TD>
<TD>H no. 405, vijay nagar, Vijaywada</TD>
</TR>

</TBODY>
</TABLE>
</BODY>
</HTML>

[Link]
<html>
<head>
<body bgcolor="pink">
<center><h2>ORBIT TECHNOLOGIES PVT LTD</h2>
<br>
<h4>COURSE DETAILS</h4>
<br>

<table border="5" cellspacing="10" cellpadding="15">

<tr>
<th Bgcolor="brown">Course Name</th>
<th Bgcolor="blue">Duration</th>
<th Bgcolor="red">Fees</th>
</tr>
<tr>
<td Bgcolor="cyan">Computer Basics</td>
<td Bgcolor="violet">1 - Month</td>
<td Bgcolor="orange">1500</td>
</tr>
<tr>
<td Bgcolor="white">C-C++</td>
<td Bgcolor="yellow">2 - Months</td>
<td Bgcolor="green">2700</td>
</tr>
<tr>
<td>Java Technology</td>
<td>3 - Months</td>
<td>8000</td>
</tr>
<tr>
44
<td>.Net Technology</td>
<td>3 - Months</td>
<td>8000</td>
</tr>
<tr>
<td>MultiMedia</td>
<td>3 - Months</td>
<td>10000</td>
</tr>
<tr>
<td>Hardware/Networking</td>
<td>2 - Months</td>
<td>3500</td>
</tr>
</table>
</center>
</body>
</html>

[Link]

<html>
<head>
<body bgcolor="cyan">
<center><h3>CLASSES TIME TABLE FOR AUGUST MONTH</h3>
<br>
<br>
<table border="5" cellspacing="5" cellpadding="5">
<tr>
<th>IMAGE1</th>
<th>IMAGE2</th>
<th>IMAGE3</th>
</tr>

<tr>
<td><IMG SRC="[Link]" width="150" height="170"></td>
<td><IMG SRC="[Link]" width="150" height="170"></td>
<td><IMG SRC="[Link]">
</tr>
</table>
</center>
</body>
</html>

[Link]

45
<HTML>
<HEAD>
<TITLE>Size of Image</TITLE>
</HEAD>
<BODY>
<H2>Specifying the size of an Image</H2>
<P> The height of the following image is 100 and width is 100.</P>
<IMG src="[Link]" height="100" width="100"/>
<BR />
<P> The height and width of the following image is not pecified.</P>
<IMG src="[Link]" /> <br><br><br>

<H2> Using Images as Hyperlink</H2>

<A href="[Link]">
<IMG src="[Link]" height="100" width="100"/>
</A>

</BODY>
<HTML>

FORM Element
A form is an area of a web page that allows the users to provide their information in a
variety of ways, such as by entering the text in a text field or by selecting one or more
available options from the provided list.
HTML enables us to add a form in a web page by using the FORM element. After adding
the form on the web page, we can add various controls, such as buttons and text fields,
on the form by using a variety of elements. Some examples of these elements are INPUT,
BUTTON, TEXTAREA, and DATALIST etc.
Let’s discuss in dept about FORM element:
A form is an area on a web page that consists of plain text, HTML elements, and controls.
Plain text and HTML elements are used to structure the form; whereas, controls, which
are also known as, form fields, are used to make the form interactive by allowing a user
to enter information. A form is created by using the opening and closing tags of the form
element. Some of the attributes of ‘FORM’ element are:

Attribute Description
action Refers to the Uniform Resource Locator (URL) of the program in the server that
processes the form.
autocomplete Enables the autocomplete feature in a form
accept- Refers to the character set in the form that can be accepted by the server.
character
enctype Specifies how the information in the form should be encoded before sending it
to the server
method Specifies how the information is sent from browser to server
name Refers to the name of the form
novalidate Specifies that the form should not validate while submitting
target Opens the action URL in the specified target, such as in the same window, in a
46
 new window, or in a new tab.

Types of INPUT Element: A form is composed of controls, such as text box, drop-down
list, check box, and radio button that enable the user to enter the information. We can
create these controls by using the INPUT element. For this, we need to use the attribute
of the INPUT element to the name of the control such as <INPUT type=”text”> which
creates a control of text box type. Following are the types of the INPUT element that are
newly introduced in HTML5:
o Text and search
o tel
o url
o email
o password
o datetime-local
o datetime, date, month, week and time
o number and range
o file
o hidden
o checkbox
o radio
o submit
o reset
Let’s discuss about them one by one

Describing the “Text” and Search Type: A text box (or text field) is a box that facilitates a
user to enter information. It is used to collect line information, such as name, date of birth,
telephone number etc. We can create a text box inside a form by setting the type attribute of the
INPUT element to text. The attributes of INPUT tag are
Name: Provides a name to the text box
Size: Defines the size of the text box.
Maxlength: Specifies the maximum number of characters the user can enter in the text box.
Value: Specifies the default text that we want to display in the text box.

Syntax: <INPUT type=”text” name=”abc” maxlength=”20” >

Describing the “tel” and Search Type: This type of the input control is used to enter the
telephone numbers. In this type, we can only enter numbers, as it does not accept
alphabets. There is no specific syntax to specify the telephone number in the input
control.
Describing the “url” and Search Type: This type is used to enter a valid path of a web
page. A valid url of a website consists fo a protocol, a domain name, and a pathname.
The most widely used protocols are Hypertext Transfer Protocol (HTTP) and File Transfer
Protocol (FTP).
Describing the “email” and Search Type: This type of control is used to enter a valid e-
mail address, which should contain a @ symbol and a dot (.). The value of the e-mail
field is automatically validated when we submit the form.

47
Describing the “password” and Search Type: A password is used to protect the secret
information that a user does not want to share with others. The text appears in
unreadable format.
Describing the “datetime-local” and Search Type: This control is used to enter the
date and time in the input control. When the date and time is defined as the type of the
input control, a date time picker is provided on a form to select the date, month, year,
and time.
Describing the “file” and Search Type: This control allows a user to select a file sored in
the local computer and send it to the server on submission of the form. We need to set
the type attribute to the file to create a file selection field. A user can either type the
pathname or the file directly into the file selection field or use the browse option to
select the pathname of thefile from a system-specific dialog box.
Describing the “hidden” and Search Type: A hidden field is used to pass along
variables and values from one form to another, without forcing the user to re-enter the
information. In addition, it is not displayed by the browser.
Describing the “checkbox” and Search Type: It is used to select or deselect one or
more items from a given set o items that are displayed on the form. It helps a user to
select items quickly and easily by providing options. We can create a checkbox by
setting the type attribute of the INPUT element to checkbox. Attributes of checkbox
element are: NAME, VALUE and CHECKED.
Name: provides a name to the checkbox field.
Value: Determines the value that should be transmitted to the server after
selecting the corresponding option on the checkbox
Checked: provides the default item, which has to be sent to the server along wioth
the items that are selected by the user. In addition, a user can clear the checked as per
the requirement.
Syntax:<input type=”checkbox” name=”fruit” value=”mango”
checked=”yes”>
Describing the “radio” and Search Type: The usage of a radio button is almost similar
to a checkbox except that in a checkbox more than one item can be selected; however,
in a radio button, only one item can be selected.
Syntax:<input type=”radio” name=”fruit” value=”mango” checked=”yes”>
Describing the “submit” and Search Type: When a user clicks the submit button, the
form is sent to the address specified by URL. We can create a submit button by setting
the value of the type attribute of the INPUT element to submit.
Describing the “reset” and Search Type: When a user clicks the reset button,
information of all the fields in the form are erased and set to the default values. The
reset button is creatd by setting the type attribute of the INPUT element to reset.

Let’s discuss about “BUTTON” element

This element is sued to add a button control on the form. A button control can be used to
perform various tasks, such as submitting or resetting the details of the form. The BUTTON
element can be used with the conjunction of FORM element to display the controls on the form. A
button control can also be placed on the form by using the INPUT element, but the difference is
that we do not have the scope to change the appearance of the button control, except changing
the text on the button control. However, we can change the appearance of the button control in
48
case we have created the button control by using the BUTTON element. The text, image, or any
multimedia embedded between the opening and closing tags of the BUTTON element become
the content of the button control.
The BUTTON element provides a type attribute that allows us to create three kinds of button
controls: submit, reset and normal button. The submit button is used to submit the form;
whereas, the reset button is used to erase all the text entered in the text box of the form and set
the default values.

Let’s now discuss about Multiple-Choice Elements

Multiple-choice elements refer to the elements that offer multiple choices to the user in a web
page, such as check boxes and radio buttons. Multiple-Choice elements are SELECT, OPTION and
OPTGROUP.
SELECT tag: This element allows the user to select a single item from number of options.
Unlike the radio button, the SELECT element does not provide any default option that is to
transmitted to the server when no option is selected by the user.
OPTION: This element is used to define the options written within the SELECT element.

OPTGROUP: This element is used to create nested and cascading drop-down list.
Exploring the TEXTAREA and LABEL Elements
Textarea is similar to the text box except that in the text box, we can enter only a single line of
information; whereas, in the textarea, we can enter multiple lines of information. The content
provided within the starting and ending tags of the TEXTAREA element should only be plain text.
LABEL: This control provides the description of the control by adding a label on the form.

Exploring the FILEDSET and LEGEND Elements

The FIELD element is used to group related controls in a single box. Grouping the related controls
displays the form fields in a more organized manner. Suppose there is a registration form that is
used for user registration as well as for the login process. Using the FILEDSET elements, we can
group the controls used for the login process and the user registration in two separate boxes.
This makes the user easily understand the purpose of each control on the form.
The LEGEND element is used to provide caption for the FILEDSET element.

DATALIST Element: This element is used to display the list of the predefined options that the
user may want to select as input. This element enables the auto complete feature on the forms.
This means that when a user starts typing in a text box, a list of predefined words is dropped
down to choose. The DATALIST element is used with the INPUT element, in which the list
attribute is specified. The value of the list attribute is similar to the id attribute of the DASTALIST
element to link the INPUT element with the DATALIST element. The OPTION element used as the
child element of the DATALIST element is used to specify the list of the options that are to be
displayed.

OUTPUT Element: This element used to display the result of the calculation, which can be
written using the JavaScript. Such as

<FORM >
<OUTPUT name=”result”>
</OUTPUT>
</FORM>

49
PROGRESS Element: This element is used to display the progress of a particular task that is
being performed. This element is used in conjunction with Javascript to display the progress or
the process of a task.

25. Developing HTML web page using Form controls on web pages.

[Link]
<HTML>
<HEAD>
<TITLE>Form Controls</TITLE>
</HEAD>
<h1><font color="rainbow">Displaying Different Form Controls</font>
</h1><br><br>
<BODY>
<FIELDSET>
<LEGEND>
<h2>Personal Information</h2>
</LEGEND>
<FORM action="[Link]">
First Name:<input type='text' name='firstname'><br>
Last Name:<input type='text' name='lastname'><br><br>
User Name:<INPUT type='text' name='username'><br>
Pass word :<INPUT type='password' name='pwd'><br><br>
Gender:
<INPUT type='radio' name='gender' value='Male' checked='yes'>Male
<INPUT type='radio' name='gender' value='Female' > Female<BR>
Address<textarea name='address' rows='5' cols='15'></textarea><br><br>
Birth Place<select name='city'>
<option value='BOMBAY'>BOMBAY</option>
<option value='Culcutta'>Culcutta</option>
<option value='Delhi'>Delhi</option>
<option value='Banglore'>Banglore</option>
<option value='Hyderabad'>Hyderabad</option>
<option value='Other Place'>Other Place</option>
</select><BR><BR>
Country<select name='country'>
<option value='INIDA'>INDIA</option>
<option value='BANGLADESH'>BANGLADESH</option>
<option value='BHUTAN'>BHUTAN</option>
<option value='SRI LANKA'>SRI LANKA</option>
<option value='NEPAL'>NEPAL</option>
<option value='CHINA'>CHINA</option>
<option value='PAKISTAN'>PAKISTAN</option>
<option value='Other Place'>Other Place</option>
</select><BR><BR>
50
Select Hobbies<input type='checkbox' name='hobbies' value='Sports'>Sports<br>
<input type='checkbox' name='hobbies' value='Gardening'>Gardening<br>
<input type='checkbox' name='hobbies' value='Cooking'>Cooking<br>
<input type='checkbox' name='hobbies' value='News Paper'>News Paper<br><br>
</FIELDSET>
<FIELDSET>
<LEGEND>
<h2>Professional Information</h2>
</LEGEND>
Select Job Name<select>
<optgroup label="Doctor">
<option value='Heart'>Heart</option>
<option value='Cancer'>Cancer</option>
<option value='Eye'>Eye</option>
<option value='Skin'>Skin</option> <br><br>
</optgroup>
<optgroup label="Engineer">
<option value='Civil'>Civil</option>
<option value='Mechanical'>Mechanical</option>
<option value='Electronic'>Electronic</option>
<option value='Electrical'>Electrical</option> <br><br>
</optgroup>
<optgroup label="Defence">
<option value='AirForce'>AirForce</option>
<option value='Navy'>Navy</option>
<option value='Scientist'>Scientist</option>
<option value='Military'>Military</option> <br><br>
</optgroup><br><br>
</select><br>
Select Department
<select name='department' rows='35'>
<option value='Health'>Health</option>
<option value='Production'>Production</option>
<option value='Education>Education</option>
<option value='Engineering'>Engineering</option>
<option value='Defence'>Defence</option>
</select>
<br><br>
Job Type:
<INPUT type='radio' name='type' value='Permanent' checked='yes'>Permanent
<INPUT type='radio' name='type' value='Contract' > Contract<BR>
Work Experience: <input type="text" name='exp' size='15'> <br>
Select Department
<select name='department'>
<option value='Health'>Health</option>
51
<option value='Production'>Production</option>
<option value='Education>Education</option>
<option value='Engineering'>Engineering</option>
<option value='Defence'>Defence</option>
</select>
<br><br>
Monthly Salary: <input type="text" name='salary' > <br>
Your Email ID: <input type="text" name='email' > <br>
<input type="submit" value="Insert" > <input type="reset" value='Result'>
</FORM>
</fieldset>
</BODY>
</HTML>

[Link]
<HTML>
<HEAD>
<TITLE>Using the DataList Element</TITLE>
</HEAD>
<BODY>
<P>Enter the name of the your favorite car:</P>
<INPUT type="text" name="favCar" list="cars">
<DATALIST id="cars">
<OPTION value="BMW">
<OPTION value="Porsche">
<OPTION value="Audi">
<OPTION value="Ford">
<OPTION value="Ferrari">
<OPTION value="Mercedes">
</DATALIST>
</BODY>
</HTML>

[Link]
<HTML>
<HEAD>
<TITLE>Using the PROGRESS Element</TITLE>
</HEAD>
<BODY>
Current task is
<PROGRESS value="200" max="500">
</PROGRESS>
completed.
</BODY>
</HTML>

52
Multimedia in HTML
The term media refers to various means of communicating and disseminating
information, such as text, images, graphics, audio, video and animation. All these
mediums of communication are collectively termed as multimedia. A combination of
video and audio files can also be used in websites to gain popularity in terms of
viewership or provide information and entertainment to the users.
HTML helps us to add multimedia files on our website by providing various multimedia
elements. These elements include AUDIO, VIDEO, EMBED and OBJECT.
The AUDIO element is used to display the audio file on the web page; whereas the VIDEO
element is used to display the video files on the web page. The EMBED and OBJECT
elements display the multimedia files on a web page as well as embed the files from
other websites.
Let’s discuss Audio and Video File Formats
An audio file is used to store data on various devices, such as a computer system, mp3
players, and mobile phones. To store an audio data, we need to convert it into a digital
format. The process of converting audio data into a digital file is called encoding of the
raw audio data. It involves taking samples of audio data and storing them on a
compressed format to reduce the file size. An audio player decodes these compressed
sample files to make the audio waves audible. The process of converting a digital file
into the audio data is known as decoding.

Following is a list of the commonly used audio file formats:

o Advanced Audio Coding (AAC) File Format commonly known as MPEG-2 (Motion
Picture Experts Group -2).
o Audio Interchange File Format (AIFF)
o Audio File (Au) File Format
o Interchange File Format (IFF)
o Media Playlist File Format (M3U)
Describing the Multimedia Elements
HTML5 has introduced two new multimedia elements, AUDIO and VIDEO, for displaying
the audio and video streams on a web page. We can play the multimedia files, which are
stored in our local computer, on the web page by specifying their location. The src
attribute is used to specify the multimedia file to play it on the web page. If the web
browser does not support AUDIO and VIDEO elements, then the text defined between the
starting and closing tags of these elements is displayed on the web page.

Attributes of AUDIO element are:

Attribute Description
autoplay Plays the audio file as soon as the web page loads
controls Displays the controls on the web page, such as play and pause buttons
loop Replays the audio file
preload Specifies whether the audio file is preloaded on the web page or not
src Provides the location of the audio file to play
The formats supported by AUDIO element are .oog, .mp3 and .wav
We use the VIDEO element to display a video file on the web page. It supports formats
such as .ogv and .mp4 file formats. The attributes are
53
Attribute Description
autoplay Plays the video file as soon as the web page loads
controls Displays the controls on the web page, such as play and pause buttons
loop Replays the audio file
preload Specifies whether the audio file is preloaded on the web page or not
src Provides the location of the audio file to play
audio Controls the default state of the video’s audio channel
poster Provides an image to be displayed when the video file is not available
Width Specifies the width of the VIDEO element
height Specifies the height of the VIDEO element

We can also use the SOURCE element within the opening and closing tags of the VIDEO
element to provide the source of the video file. The SOURCE element is used in a
situation when the location of the video file is not confirmed. In this case, the VIDEO
element plays the first video file located in the specified path. The code such as

<VIDEO src=”[Link]” autoplay=”true” loop=”3” controls></VIDEO>

In the above code, we have defined a [Link] file in the src attribute. We have also
set the autoplay attribute to true, which implies that the video file starts playing as soon
as the Web page loads. The loop attribute is set to 3, which implies that the video file will
be played three times. In addition, the controls attribute displays the controls on the
video player.

Defining a Multimedia File using the EMBED Element

HTML allows us to embed plug-ins in a web page using the EMBED element. This element
lets us embed multimedia in a web page and play it while opening the page. The EMBED
element is supported by Internet Explorer as well as Netscape Navigator. The code such
as:
<EMBED src=”music.mp3” width=600 height=100></EMBED>
In the above code, we have defined the src attribute to specify the source multimedia file to be played while the
web page loads in the browser. We have also defined the height and width attributes to specify the height and
width of the embedded multimedia component in the page, respectively.
Attribute Description
height Specifies the height of the embedded component
Hspace Sets the horizontal padding around the element
type Specifes the Multipurpose Internet Mail Extensions(MIME) type for the compo
width Sets the width of the embedded component in the page

Defining a Multimedia File using the OBJECT Element

HTML uses the OBJECT element to include objects such as images, audios, videos, Java applets, ActiveX
controls, Portable Document Format (PDF), and Flash objects, in a web page. The OBJECT element allows us
to specify the data for objects inserted into HTML documents. It also allows us to specify the code that can be
used to display or manipulate that data. An OBJECT element can also be used inside the BODY element. The
text between the starting and ending tags of the OBJECT element is the alternate text for browsers that do not
support this element.
Attribute Description
data Specify the URL’s of the object’s data
54
form Specify on or more forms to which the object belongs
name Specifies whether the audio file is preloaded on the web page or not
type Provides the location of the audio file to play
usemap Controls the default state of the video’s audio channel
Width Specifies the width of the embedded component in the page
height Specifies the height of the object in pixels
The OBJECT element initializes the object by passing the parameters to the object, which
can be done using the PARAM element. In HTML, we can use the PARAM element to
define parameters or variables or an OBJECT element. An OBJECT element can contain
multiple PARAM elements as shown below
<OBJECT data=”[Link]” type=”video/quicktime” id=”video” width=”200”
height=”100” >
<PARAM name=”BorderStyle” value=”1” />
<PARAM name=”autoplay” value=”true” />
</OBJECT>

Exploring the FIGURE and FIGCAPTION Elements

The FIGURE element is newly introduced in HTML5 and is used to group or annotate
various diagrams, images, illustrations, and code. We can define various elements such
as IMG, CODE and PRE inside the FIGURE element. On the other hand, the FIGCAPTION
element is used inside the FIGURE element to provide the caption of the content. Such
as shown below:
<FIGURE>
<FIGCAPTION>Listing 1: Showing the alert box </FIGCAPTION>
<PRE><CODE>alert(‘Hello World!’); </CODE></PRE>
</FIGURE>
In the above code, we have defined the FIGURE element, which contains the FIGCAPTION
element to display the figure caption on a web page. In addition, we have also defined
the PRE and CODE elements to display the code in a predefined formatting.

26. Developing HTML web page for playing an audio file on web pages.

[Link]
<HTML>
<HEAD>
<TITLE>Setting Background Sound</TITLE>
</HEAD>
<BODY >
<H1>Playing Background Music </H1>
<BR/>
<AUDIO src="[Link]" autoplay="true>
Your browser does not support the AUDIO element.
</AUDIO>
</BODY>
</HTML>

55
 27. Developing HTML web page for playing an audio file on web pages
and to display the controls of AUDIO element.
[Link]
<HTML>
<HEAD>
<TITLE>Setting Background Sound</TITLE>
</HEAD>
<BODY >
<H1>Playing Music </H1>
<BR/>
<AUDIO src="[Link]" controls autoplay="true >
Your browser does not support the AUDIO element.
</AUDIO>
</BODY>
</HTML>

28. Developing HTML web page for displaying video file on web pages.
[Link]
<HTML>
<HEAD>
<TITLE>Using VIDEO Element</TITLE>
</HEAD>
<BODY>
<H1>Using the VIDEO Element</H1>
<VIDEO src="[Link]" controls></VIDEO>
</BODY>
</HTML>

29. Developing HTML web page for playing audio file on web pages
using EMBED element.
[Link]
<HTML>
<HEAD>
<TITLE>Embedding an Audio File</TITLE>
</HEAD>
<BODY>
<H1>Playing Background Music</H1>
<BR/>
<EMBED src="Music.mp3" width=600 height=100></EMBED>
</BODY>
</HTML>

56
 30. Developing HTML web page for playing audio file on web pages
using EMBED element.
[Link]
<HTML>
<HEAD>
<TITLE>Embedding a Video File</TITLE>
</HEAD>
<BODY>
<H1>Playing Video "Wildlife"</H1>
<BR/>
<EMBED src="[Link]" width=400 height=200></EMBED>
</BODY>
</HTML>
31. Developing HTML web page for playing audio file on web pages
using EMBED element.
[Link]
<HTML>
<HEAD>
<TITLE>Adding a Video File</TITLE>
</HEAD>
<BODY>
<H1>Playing Video "Wildlife"</H1>
<BR/>
<OBJECT data="[Link]" type="video/wmv" width="500"
height="300" />
</BODY>
</HTML>

32. Developing HTML web page for displaying an image using FIGURE
element.
fig_image.html
<HTML>
<HEAD>
<TITLE>Using the FIGURE and FIGCAPTION Elements</TITLE>
</HEAD>
<BODY>
<H1>Displaying an Image of a Car</H1>
<BR/>
<FIGURE>
<IMG src="[Link]" alt="A small Car."> <BR/>
<FIGCAPTION>Figure showing you a small car.</FIGCAPTION>
</FIGURE>
57
 </BODY>
</HTML>

58
JAVASCRIPT

59
Introduction to JavaScript
JavaScript is a client and server-side scripting language that is used to make interactive
web pages. A scripting language is a lightweight programming language with less
complexity. JavaScript developed by Netscape in 1995 as a method for validating forms
and providing interactive content to web site. Soon after their release in the market both
browsers such as Microsoft and Netscape introduced JavaScript support in their
browsers. Later other web browsers followed the support of JavaScript in their browsers.
The other scripting languages are:
 VBScript
 Active Server Pages (ASP)
 Hypertext Preprocessor (PHP)
Among these, JavaScript is the most commonly used scripting language to add
dynamism and interactivity to web pages. This is because JavaScript, written on the
client-side, executes on a client browser, thereby reducing the load on the server.
JavaScript is an interpreted language, which implies that scripts written in JavaScript are
processed line by line. These scripts are interpreted by the JavaScript interpreter, which
is a built-in component o the web browser. JavaScript can be written on the client-side as
well server-side. Client-side JavaScript allows us only those programs that execute and
produce the result on the client machine. In contrast, server-side JavaScript validates
only those programs that execute on the server. JavaScript includes various built-in
objects and features that can be used to make our HTML pages dynamic. Moreover,
JavaScript is platform-independent, which implies that we need to write the script once
and can run it on any platform or browser without affecting the output of the script.

Features of JavaScript
Imperative and structured – Implies that JavaScript supports all the syntaxes of the
structured programming language C, such as the if statement, loops, and the switch
statement. The only syntactical difference between C and JavaScript is that, in JavaScript
semi-colon is not necessary to terminate a statement, whereas in C, semi-colon in
necessary to terminate a statement.
Dynamic text – Implies that JavaScript supports dynamic typing. This means that the
type of variable is defined according to the value stored in it. For example, after
declaring a variable x, we can assign it a number or string value. This is known as
dynamic typing. JavaScript is an object-based scripting language, which provides some
built-in objects, such as String, Math, and Date objects.
Functional – Implies that JavaScript does not support classes. Instead of using classes,
objects are created from the constructor functions. Each constructor function represents
a unique object type.
Prototype-based – Implies that JavaScript is a prototype-based scripting language. This
means that JavaScript uses prototypes instead o classes for inheritance. In JavaScript,
ach constructor function s associated with a prototype object. There are several built-in
objects that represent constructor functions, such as Arrays (), Boolean (), Date (), Error
(), Math (), Number (), Object (), RegExp (), and String ().
Platform-independent – Implies that JavaScript supports platform-independency or
portability. This means that we can write the script once and run it anywhere at any
time. In other words, we can write our JavaScript application and run it on any platform
or any browser without affecting the output o the script.

60
Using JavaScript in an HTML Document
We can insert JavaScript code in an HTML document by using the SCRIPT element.
When an HTML document with the SCRIPT element is loaded in a web browser, the browser processes the
content enclosed within the SCRIPT element as JavaScript code. The SCRIPT element either contains scripting
statements or a reference to an external script file. This element provides the src attribute, which allows us to
add the reference o an external script file in an HTML document. The attributes of SCRIPT elements are as
follows as describes in the following table.
Attributes Values Description
async true Specifies whether the script should be executed
false asynchronously or not
type text/ecmascript Specifies the Multipurpose Internet Mail Extension(MIME)
text/javascript type of script
application/
ecmascript
application/javascript
text/vbsrcipt
charset charset Specifies the character encoding used in the script
defer true Specifies whether the browser can continue parsing the
false web page or not
src URL Specifies the URL of a file that contains the script.
We can use the SCRIPT element in a Web page in the following three ways:
In the HEAD element
In the BODY element
As an external script file
JavaScript in the HEAD Element: We can place the SCRIPT element inside the HEAD
element of an HTML document. The script placed inside the HEAD element runs when we
perform some action, such as click a link or the submit button. The following code shows
a how to use the SCIRPT element inside the HEAD element of an HTML document:
<HEAD>
<SCRIPT type=”text/javascript”>
Script code here
</SCRIPT>
</HEAD>
In the above code, the SCRIPT element is used inside the HEAD element. In the SCRIPT
element, we have used the type attribute to specify the type of the script.
JavaScript in the BODY Element We can also place the SCRIPT element inside the
BODY element of an HTML document. The SCRIPT element placed inside the BODY
element runs when a web page starts loading in a web browser. The following code
shows how to use the SCRIPT element inside the BODY element of an HTML document:
<BODY>
<SCRIPT type=”text/javascript”>
Script code here
</SCRIPT>
</BODY>
JavaScript in an External File: When the JavaScript code created in an HTML
document is very lengthy, it affects the readability of the HTML document. In addition, at
times we may need to use the same JavaScript code in several web pages. In such cases,
we can store the JavaScript code in an external file and save that file using the .js as
61
extension. Next, we need tolink the external file with the HTML document by using the
src attribute of the SCRIPT element to access the script file. The following code shows
how to link the external script file with the HTML document:
<HEAD>
<SCRIPT src=”URL of the external file”>
Script code here
</SCRIPT>
</HEAD>
Describing Programming Fundamentals of JavaScript
JavaScript helps you to create interactive web pages and embed JavaScript statements
directly in an HTML document. It also shares the fundamental features of all
programming languages. For example, JavaScript can retrieve data from a source,
process it, and display the output. The programming fundamentals of JavaScript include
the following:
 Lexical Structure
 Variables
 Operators
 Control flow statements
 Popup boxes
Lexical Structure of JavaScript: The lexical structure of JavaScript provides the set
of rules to write programs. In addition, it defines rules for variables names, characters
used or creating comments, and the procedure to separate one statement from the
other. The lexical structure of JavaScript defines the rules for the following aspects:
 Character set
 Case sensitivity
 White spaces and line breaks
 Optional semicolons
 Comments
 Literals
 Identifiers
 Reserved words
Character Set : Character set is a set of character reserved to write JavaScript programs. In American
Standard Code of Information Interchange (ASCII) character set, there were only 128 different characters. Out
of these 128 characters, 96 characters are available for use and the remaining 32 character are reserved as
control characters. ECMAScript version 3 of JavaScript support the Unicode character set, which contains
1000, 000 characters. Unicode characters start with the \u string followed by a four-digit hexadecimal number.
Below table describes the some special characters available in a character set:
Symbols Names
\t Represents a tab
\f Represents a form feed, which is also referred as whitespace
\b Represents a back space
\n Represents a new line
\r Represents a carriage return character, which is used to start a new line of text
\” Represents a double quote
\’ Represents a single quote
\\ Represents a backslash

62
Understanding Case Sensitivity
JavaScript is a case-sensitive language, which means that keywords, variable names,
function names, and identifiers should be typed with a consistent casing of letters. For
example, function is a keyword that must always be written in lower case. If it is not,
JavaScript generates an error.

Understanding White Spaces and Line Breaks

The JavaScript interpreter ignores tabs, spaces, and newlines that appear in a program,
except strings and regular expressions. For example:
function fun()
{
var i = 10;
var j = 20;
}

function fun1(){ var i=10; var j=20; }

Both function and variable declaration will be treated in a same manner.

Understanding the Optional Semicolon

The syntax of JavaScript is similar to the syntax of C, C++ and Java. In JavaScript,
statements are generally followed by a semicolon(;), which indicates the termination of
the statement. However, it is not necessary to use the semicolon at the end of the
statement. The following code shows two valid declarations of variable in JavaScript:
var x=5;
var x=5
Both the declaration is same.

Understanding Literals
A literal is a data value that represents a fixed value in a program. JavaScript supports
the following type of literals:
o Numeric literal
o Floating-point literal
o Boolean literal
o String literal
o Array literal
o Regular expression literal
o Object literal
Numeric Literal: A numeric literal can be expressed in the decimal (base 10),
hexadecimal (base 16), and octal (base 8). Decimal numeric literals consist of a
sequence of digit (0-9) without a lading 0 (zero). Hexadecimal numeric literals include
digits (0-9) and letters a-f and A-F. A leading 0x (or 0X) indicates hexadecimal. Octal
numeric literals include only the digits 0-7. A leading 0 (zero) in a numeric literal
indicates that it is in the octal format.

63
Boolean Literal : The Boolean literal is used to make a decision in a relational
expression. There are only two Boolean literal values: true and false. The following code
shows the use of Boolean literal:
var b=true;
var c=false;
if(b=true)
{
//some code
}

String Literal: A string literal can be a zero or more characters enclosed in double (“) or
single (‘) quotation marks. Examples are
“Suresh”
“Sami”
“Hyderabad”
Array Literal: An array literal is a list of zero or more expressions representing array
elements that are enclosed in square brackets ([]). When you create an array using an
array literal, its is initialized with the elements specified in the square brackets, as shown
below
var emp=[“anuj”,”suresh”,”Junaid”];
In the above code, the emp array has three elements; therefore, the length of the emp
array is three.

Regular Expression Literal: A regular expression literal, also known as RegExp,is a

pattern used to match a character or string in some text. It is created by enclosing the
string that you want to match between forward slashes, as shown below
var myregexp = new RegExp(“abc”);
Object Literal: The object literal is a collection of name-value pairs enclosed in curly
braces({}). We can describe any object by using an object literal. A name-value pair is
separated by commas and colon is used to separate a name and value, as shown below:
var games={cricket:11, chess: 2, carom: 4};

Exploring Variables: In JavaScript, data can be temporarily stored in variables, which

are the named locations in the memory. A variable has a name, value and memory
address. The name of the variable uniquely identifies the variable, the value refers to the
data that is stored in the variable, and the memory address refers to the memory
location of the variable. We need to declare a variable before using it to store data.
While declaring a variable, we need to provide a and unique user friendly name for it.
The syntax are as follows:
var variable_name;
In the above code, var is a keyword and variable name represents the name of the
variable. We can also declare multiple variables in the same statement, by separating
each variable with a comma (,) as shown in the below code;
var variableq1, variable2, variables3
In the above code, we have declared three variables named variable1, variable2 and
variable3 by using the keyword var.

64
JavaScript allows you to store multiple type s of values in a variable. For example the
same variable can store both a string ad a number at different times in the script. This is
why JavaScript is considered an s a poorly typed language.

Control Flow Statements

Control flow statements are special statements that control or alter the sequence in
which the script statements are executed. The decision regarding the execution of a
statement is based on the value of a condition, which is a JavaScript expression that
evaluates to a Boolean value (true or false). When the condition evaluates to true, a
particular group of statements is executed and when the condition evaluates to false,
another group of statements is executed.
The control statements are classified as:
i. Selection Statement – Allow the execution of a group of statements from
multiple groups of statements.
ii. Loops – Allow repeated execution of a group of statements.
iii. Jump Statements – Allow the execution to skip or jump over certain
statements.
Understanding Selection Statements
 if statement:- It means the condition is true then our writing code is executed
other wise our code is not execute .
Syntax for the if statement:-
if ( expression )
{
statement1
statement2
}
 if - else statement:- This statement is used to when the condition is true then
our code to execute and when the condition is false then our written code is not
execute.
Syntax for the if - else statement:-
if (expression)
statement1
else if (expression2)
statement2
else
statement3
 if...else if....else statement -This statement is used to if you want to select one
of many blocks of code to be executed .
 switch statement:-This statement is used to if you want to select one of many
blocks of code to be executed.

65
 Syntax for the switch statement:-
switch (expression)
{
case1:
statement1
break
case2:
statement2
break
default:
statement3;
}

What is JavaScript loop?

The JavaScript loops used to execute the same block or code a specified number of
times and while a specified condition. JavaScript loops Very often write code, you want
the same block of code to run over and over again in a row. The Instead of adding
several almost equal lines in a script we can use loops to perform a task.

JavaScript supported Two different type looping :-

[Link] do Loop
[Link] do .. While Loop
3. for loop

The while Loop:

The while loop is used when the loop to execute and continue executing while the
specified condition. Syntax is as follow
while(condition)
{
Statement1;
Statement2;

Statement n;
}
The do while loop
The JavaScript do...while loop is a variant of the while loop. The loop will be always
executing a block of code once and then it will repeat the loop as long as the specified
condition is true. This loop will be always executed once, even if the condition is false,
because the loop code are executed before the condition is tested.
Syntax is as follow
do
{
Statement1;
Statement2;

66
 Statement n;
} while(condition);

For Loop:
The JavaScript for loop is used the know in advance how many times of the script should
run. JavaScript loop Use a For loop to run time same block of code a specified the
number.
for( initialization; condition; increment/decrement)
{
Statement1;
Statement2;

Statement n;

Javascript looping Break and continue

There are two statements supported in javascript used in loop:- Break and continue
break:
The JavaScript break command will break the loop and continue executing the code the
follows after the loop.
continue:
The JavaScript continue command will be break the current loop and continue with the
next value.

Exploring Popup Boxes

A popup box is a window that displays a message along with an OK button. The popup
box may also contain a Cancel button. In addition, it can prompt users to enter some
text. JavaScript supports three types of popup boxes:
o alert box
o confirm box
o prompt box
alert box: The alert box is generally used to display an alert message while executing
the JavaScript code. In addition, an alert box is used to display error messages after you
validate a form. The alert box contains an OK button, which the user has to click to
continue with the execution of the code.
Confirm box: The confirm box is an advanced form of the alert box. It is used to display
a message as well as return a true or false value. The confirm box displays a dialog box
with two buttons, OK and Cancel. When you click the OK button, the confirm box returns
a true value and when you click the Cancel button, the confirm box returns a false value.
In other words, the confirm box enables you to interrupt JavaScript processing to ask the
use a question and then continue processing based on which button is clicked.
Prompt box: The prompt box is used to input a value from a user. It contains a text box
and Ok and Cancel button. The user has to click either the OK or cancel button to
continue the execution of the code after entering an input value. If the user clicks the OK
button, the input value is returned. Otherwise, the box returns null value.

67
1. Developing a web page to place the SCRIPT element inside the HEAD element of an
HTML document. The script placed inside the HEAD element runs when you perform
some action, such as clicking a link or the submit button.
[Link]
<HTML>
<HTML>
<HEAD>
<TITLE>Adding script in HEAD element</TITLE>
<H1>Adding script in the HEAD Element</H1>
<SCRIPT type="text/javascript">
[Link]("Welcome to the World of JavaScript <BR/>");
[Link]("In this example we have used the JavaScript in the HEAD element.");
</SCRIPT>
</HEAD>
</HTML>
2. Developing a web page to place the SCRIPT element inside the BODY part of an HTML
document. The script placed inside the BODY element runs when the web page starts
loading in a web browser.
[Link]
<HTML>
<HEAD>
<TITLE>Adding script in Body Element</TITLE>
</HEAD>
<BODY>
<H1>Adding JavaScript in Body Element</H1>
<SCRIPT type="text/javascript">
[Link]("Welcome to the World of JavaScript <BR/>");
[Link]("In this example we have
used the JavaScript in the BODY element.");
</SCRIPT>
</BODY>
</HTML>

3. Developing a web page to place the SCRIPT outside of the HTML document then give
the link to the external file.
[Link]
var i, count=0;
for(i=0;i<5;i++)
{
count=count+i;
}
[Link](count);
[Link]
<HTML>
<HEAD>
<TITLE>Using the External Script file</TITLE>
68
 </HEAD>
<BODY>
<H2>The sum of First Four Number is:</H2>
<H2><script src="[Link]"></H2>
</SCRIPT>
</BODY>
</HTML>
4. Developing a web page to show how to assign values to the variables in the script.
[Link]
<HTML>
<HEAD>
<TITLE>Assigning values to Multiple Variables</TITLE>
</HEAD>
<BODY>
<H1>Using Multiple Variable in the Script</H1>
<SCRIPT type="text/javascript">
var qty=50, price=150, bill,bookName="JavaScript Programming";
bill=qty*price;
[Link]("Total Books = " + qty+"<BR/>");
[Link]("Price of Book = " + price+"<BR/>");
[Link]("Total Bill = " + bill+"<BR/>");
[Link]("bookName = " + bookName);
</SCRIPT>
</BODY>
</HTML>
5. Developing a web page to show how to find whether a given number is even or odd
using else if statement.
[Link]
<HTML>
<HEAD>
<TITLE>if...else Statement</TITLE>
</HEAD>
<BODY>
<H1>Using the if...else Statement in the Script</H1>
<SCRIPT type="text/javascript">
var Number=44;
if((Number%2) != 0)
{
[Link](Number + " is an odd number");
}
else
{
[Link](Number + " is an even number");
}
[Link]("<BR/>Thank you!");
</SCRIPT>
</BODY>
69
</HTML>
6. Developing a web page to find whether an alphabet is vowel or consonant using
nested if.
[Link]
<HTML>
<HEAD>
<TITLE>Nested if... else Statement</TITLE>
</HEAD>
<BODY>
<H1>Using Nested if... else Statement</H1>
<SCRIPT type="text/javascript">
var letter="I";
if (letter=="A")
[Link]("vowel A");
else
if(letter=="E")
[Link]("vowel E");
else
if(letter=="I")
[Link]("vowel I");
else
if(letter=="O")
[Link]("vowel O");
else
if(letter=="U")
[Link]("vowel U");
else
[Link]("consonant");
[Link]("<BR/>Thank you!");
</SCRIPT>
</BODY>
</HTML>

7. Developing a web page to find whether an alphabet is vowel or consonant using

switch statement.
[Link]
<HTML>
<HEAD>
<TITLE>Using switch Statement</TITLE>
</HEAD>
<BODY>
<H1>Using switch Statement in the script</H1>
<SCRIPT type="text/javascript">
var letter="I";
switch(letter)
{
default:[Link]("consonant");
break;
70
 case "A":[Link]("A is a vowel");
break;
case "E":[Link]("E is a vowel");
break;
case "I":[Link]("I is a vowel");
break;
case "O":[Link]("O is a vowel");
break;
case "U":[Link]("U is a vowel");
break;
}
[Link]("<BR/>Thank You!");
</SCRIPT>
</BODY>
</HTML>

8. Developing a web page to show the use of while loop.

[Link]
<HTML>
<HEAD>
<TITLE>Using while loop</TITLE>
</HEAD>
<BODY>
<H1>Using while Loop in the Script</H1>
<SCRIPT type="text/javascript">
var totalDistance=0, fare=0;
while(totalDistance<=10)
{
fare=fare+5;
totalDistance=totalDistance+2;
[Link]("Rs." + fare + " for " + totalDistance + " KM distance. <BR/>");
}
[Link]("Thank You!");
</SCRIPT>
</BODY>
</HTML>

9. Developing a web page using Do-While loop.

[Link]
<HTML>
<HEAD>
<TITLE>Using do...while loop</TITLE>
</HEAD>
<BODY>
<H1>Using do...while Loop in the Script</H1>
<SCRIPT type="text/javascript">
var totalDistance=0, fare=0;
do
71
 {
[Link]("Rs." + fare + " for " + totalDistance + " KM distance. <BR/>");

[Link]("<HR/>");
fare=fare+5;
totalDistance=totalDistance+2;

}
while(totalDistance<=10);
</SCRIPT>
</BODY>
</HTML>

10. Developing a web page to show the use of For loop.

[Link]
<HTML>
<HEAD>
<TITLE>Using for loop</TITLE>
</HEAD>
<BODY>
<H1>Using the for loop in the script</H1>
<SCRIPT type="text/javascript">
var Number;
[Link]("Even numbers from 0 to 10 <BR/>");
for(Number=0;Number<=10;Number=Number+2)
{
[Link](Number+"<BR/>");
}

</SCRIPT>
</BODY>
</HTML>

11. Developing a web page to show the use of Break Statement.

[Link]
<HTML>
<HEAD>
<TITLE>Using break Statement</TITLE>
</HEAD>
<BODY>
<H1>Using break Statement in while loop</H1>
<SCRIPT type="text/javascript">
var count=0;
while(count<10)
{
++count;
if((count%5==0))
break;
72
 else
[Link]("count="+count+"<BR/>");
}
[Link]("while loop exited");
</SCRIPT>
</BODY>
</HTML>

12. Developing a web page to show the use of Continue Statement.

[Link]
<HTML>
<HEAD>
<TITLE>The continue Statement</TITLE>
</HEAD>
<BODY>
<H1>Using the continue statement</H1>
<SCRIPT type="text/javascript">
var count=0;
while(count<10)
{
++count;
if(count%2==0)
continue;
else
[Link]("count="+count+"<BR/>");
}
[Link]("while loop exited");
</SCRIPT>
</BODY>
</HTML>

13. Developing a web page to show the use of alert box.

[Link]
<HTML>
<HEAD>
<TITLE>Using alert box</TITLE>
</HEAD>
<BODY>
<H1>Showing the alert box</H1>
<SCRIPT type="text/javascript">
alert( "Hello, I am an alert box." );
</SCRIPT>
</BODY>
</HTML>

14. Developing a web page to show the use of confirm box.

[Link]

73
<HTML>
<HEAD>
<TITLE>USING CONFIRM BOX</TITLE>
</HEAD>
<BODY>
<H1>Showing the confirm box</H1>
<SCRIPT type="text/javascript">
var qry= confirm ( "Are you sure to send this file to Recycle Bin ? " );
if (qry)
[Link] ("Welcome to JavaScript. <BR/> You have
moved the file to Recycle Bin.");
else
[Link] ("Welcome to JavaScript <BR/> The file is not
moved");
</SCRIPT>
</BODY>
</HTML>

15. Developing a web page to show the use of prompt box.

[Link]
<HTML>
<HEAD>
<TITLE>Using prompt Box</TITLE>
</HEAD>
<BODY>
<H1>Accepting your name using prompt box</H1>
<SCRIPT type="text/javascript">
var name= prompt( "Please enter your name: " );
if (name==null || name=="") name = " visitor ";
{
[Link]("Hi " + name + ", Welcome to JavaScript");
}
</SCRIPT>
</BODY>
</HTML>

74
Functions in JavaScript
A function is a set of statements used to perform a particular task. The set of statements
in a function are executed when the function is called in a program. In JavaScript, we can
create a function that accepts input from a user and displays it whenever the user visits
the same web page in which the function is defined. We can also create JavaScript
functions to perform various tasks, such as calculating numbers or displaying text in a
control. A function performs a specific task within a program independent of the rest of
the code in the program. In JavaScript, functions are placed under the head and body
sections of a HTML document. JavaScript functions are divided into the following two
categories:
o Functions without parameters – Does not contain parameters. The code
written in these functions is static, implying that the values of members of
these functions cannot be changed at runtime.
o Function with parameters – Contains parameters in its parenthesis, such
as integer and string. Unlike functions without parameters, the values of
members of these functions can be changed at runtime by passing different
values to their parameters.
JavaScript provides a number of built-in global functions to work with JavaScript programs. In the below table
some of the most frequently used functions listed:
Function Description
alert() Displays information in a message box. This function displays an error
message when you validate a form.
prompt() Displays a message box consisting of the OK and Cancel buttons. This function
returns a text string when the Ok button is clicked and null when the Cancel
button is clicked.
confirm() Displays a message box with two buttons, Ok and Cancel. When you click the
Ok button, the function returns true. When you click the Cancel button, the
function returns false.
eval() Evaluates and executes a string and returns a result
isFinite() Returns a Boolean value, true or false, indicating whether the argument
passed to it is finite or infinite.
isNaN() Determines whether or not a value is an illegal number. NaN stands for Not a
Number
parseInt() Extracts a number from the beginning of a string. This function parses the
string and returns the first integer value found in the string
praseFloat() Extracts a number from the beginning of a string. This functions parses the
string and returns the first floating –point value found in the string.
Number() Converts a value of an object into a number. If the object contains Boolean
value, then it returns 1 for true and 0 for false.
escape() Encodes a string so that it can be transmitted across any network to any
computer that supports American Standard Code for Information Interchange
(ASCII) characters. This function encodes special characters except *, @, -, +
and /.
unescapse() Decodes a string that is encoded by the escape () function.

Defining and Invoking a Function

A function contains code that is executed when an event is triggered or the function is
called. We can call the function from any where within a program. We can also define the
parameters to be passed with functions while calling the function. The parameters in a

75
function are used to exchange information between a calling statement and function. We
can define a function by using the function keyword such as follows:
function function_name(parameter1,parameter2….paramenter n)
{
//Block of Code
}
Defining Function Scope and Closures
A scope refers to an area within which a function and its variables are accessible. Each
function is associated with a scope, which defines its accessibility in a program. In
JavaScript, scope of a function is divided into the following two categories:
 Global – Specifies that a function can be called or accessed from anywhere in a
program.
 Local – Specifies that a function can be accessed only within its parent function.
A closure is a variable that is created inside a function and continues to exist after the
function has finished executing. It is a combination of two things, a function and any
local variable defined in that function. Closures are used in defining control structures,
such as branches and loops.
Calling Functions with Timer
Timer is one of the most important features of JavaScript, which allows you to execute
JavaScript functions after a specified period; thereby, making it possible to add a new
dimension, time, to your web pages. With the help of timer, you can run a command at
the specified intervals, run loops repeatedly at a predefined time, and synchronize
multiple events in a particular time span. To use timer, JavaScript provides various
methods which are as follows:
 setTimeout() method – Executes codes at a specified interval. The syntax is
setTimeout(function,delayTime)
In the above syntax, the setTimeout() method contains two parameters – function
and delayTime. The function parameter specifies the method that the timer calls
and the delayTime parameter specifies the number of milliseconds to wait before
calling the method.
 clearTimeout() method – Deactivates or cancles the timer that is set using the
setTimtout() method. Syntax for this method is as follows:
clearTimeout(timer);
In the above code, timer is a variable that is created using the setTimeout().
 setInterval() method – Executes a function after a specified timer interval. The
syntax is as follows:
setInterval(function,intervalTime)
In the above code, the setInterval() method contains two parameters – function
and intervalTime. The function parameter specifies the method to be called;
whereas, the intervalTime parameter specifies the time interval between the
function calls.
 clearInterval() method – Deactivates or cancels the timer that is set using the
setInterval() method. The syntax of the clearINterval() method is as follows:
clearInterval(timer) . In this syntax, the timer variable is created using the
setInterval() method.
Events In JavaScript

76
Events refer to actions that are detected by a programming language when we perform
a particular task. For example, the onclick event is detected by the programming
language when we click the mouse button. Events are generally used in combination
with functions, implying that when an event occurs, it calls a specified function. An event
commonly occurs when a user clicks the mouse button, web page is loaded, or form field
is changed. Events are handled by a special function, known as event handler, which
handles a particular event when the event is triggered. The following code shows how to
create an event handler in JavaScript:
onEvent = “Code to handle the event”
In the above code, onEvent refers to the name o an event followed by an equal sign and
the code that executes when the event is triggered.
In the below list, some events which are used in HTML forms:
Event Description
onsubmit Triggers on submitting a form
onselect Triggers on selecting an element
oninvalid Triggers when an element is invalid
oninput Triggers when input is provided for an element
onforminput Triggers when input is provided on a form
onformchange Triggers when a form changes
onfocus Triggers when a window gets focus
oncontextmenu Triggers when the context menu is used
onchange Trigger when an element changes
onblur Triggers when a window loses focus
onclick Triggers on clicking the mouse button
ondbclick Triggers on double clicking the mouse button
ondrag Triggers on dragging an element
ondragend Triggers on ending the drag operation
ondragenter Triggers on dropping the dragged element on a valid target
ondragleave Triggers on leaving the valid target while dragging an element
onmousedown Triggers on pressing the mouse button
onmousemove Triggers on moving the mouse pointer
onmouseout Trigger when the mouse pointer leaves an element
onmouseover Triggers when the mouse pointer moves over an element
onmouseup Triggers on releasing the mouse button
onscroll Triggers on scrolling the scroll bar of an element

Some events of Keyboard used in HTML

Event Description
onkeydown Triggers on pressing a key
onkeypress Triggers when a key is pressed
onkeyup Triggers on releasing a key

Some of the events used in media elements (Multimedia web page)

Event Description
onabort Triggers on aborting a process
oncanplay Triggers when an audio or video file starts, but might has to stop for
buffering
onerror Triggers when an error occurs on loading an element
onloadeddata Triggers on loading the media file

77
onloadedmetadat Triggers on loading the media data, such as duration and size
a
onloadstart Triggers when a web browser starts loading the media data
onpause Triggers on posing the media file
onplay Triggers when a media file is going to play
onprogress Triggers when a web browser retrieves the data of a media file
onseeking Triggers when the seeking process begins
onwaiting Triggers when the media file has stopped, but is expected to resume later

Some of the events of browser

Event Description
onafterprint Triggers after printing a document
onbeforeprint Triggers before printing a document
onbeforeonload Triggers before loading a document
onblur Triggers when window loses focus
onfocus Triggers when a window gets focus
onhaschange Triggers at the time of changing a document
onload Triggers at the time of loading a document
onmessage Triggers when the postMessage() method sends a message to the current
document
onpagehide Triggers when a window is hidden
onredo Triggers at the time of performing the redo action in a document
onunload Triggers at the time of leaving a document

Exploring Image Maps

An image map is an image on a web page that provides various links, called hostspots,
to navigate to other web pages or other sections of the same web page. You can use any
shape, such as rectangle, circle, or polygon, as a hotspot link in image maps. To create a
rectangle hotspot, you need two different co-ordinates, such as top right and bottom left.
To create a circle hotspot, you need centre co-ordinate.
You can use the Map element to define the image maps. Every image map has a unique
name; therefore, the name attribute is required in the MAP element. To associate an
image map with an image, you can add the use map attribute to the IMG element. You
can also add events to the image map using the AREA element. The AREA element
supports various events such as onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onfocus, onblur etc. Every AREA element is
associated with the alt attribute, which is used to display an alternative text. You canalso
provide the title attribute in the AREA element to display tooltip.

Exploring Animations
Animation is a type of optical illusion where the rapid display of a sequence of images or
frames of 2-Dimensional (2-D) or 3-Dimensional (3-D) artwork creates an illusion of
movement. A cartoon film is one of the examples of animation. Often, animation is used
or entertainment purposes.
Animation can be divided into the following two categories:
 Sprite animation – Defines a rectangular image in which the parts of the image
are made transparent where you want to show the background. Sprite animation
occurs when you move an image called sprite over a background image. It has the
ability to move an image over another image.
78
  Frame animation – Allows you to create fast slide shows. In this animation, you
can create a number of slides or frames by making small changes in each frame.
The set of slides are displayed in quick succession; therefore, the changes appear
as motion.
A high-quality animation contains the combination of both sprite animation and frame
animation. JavaScript provides the following timing functions to create animation:
 setTimeout(function, duration) – Executes the code sometime in the future
 setInterval(function, duration) – Executes the code after specified time
intervals
 clearTimeout(setTimeout_variable) – Clears the timer set by the setTimeout()
function.

1. Developing a web page, to display an alert message when the BODY of the page is
loaded.
[Link]
<HTML>
<HEAD>
<TITLE>Function</TITLE>
<SCRIPT language="JavaScript">
function simple()
{
alert("This is an alert box. Thank You!!")
}
</SCRIPT>
</HEAD>
<BODY onload="simple()">
<H1>Using Simple JavaScript Function</H1>
<P>Here we are using a simple JavaScript function
that displays an alert box on the load event of the Web page.</P>
</BODY>
</HTML>

2. Developing a web page, to call a function with parameters.

[Link]
<HTML>
<HEAD>
<SCRIPT type="text/JavaScript">
function parameter(value)
{
alert(value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" onclick="parameter('JavaScript function with
parameter')" value="Callfunction">
</FORM>
79
 <P>This is an example of JavaScript function with parameters</P>
</BODY>
</HTML>

3. Developing a web page, to call a function with multiple parameters.

[Link]
<HTML>
<HEAD>
<TITLE>Function with Arguments</TITLE>
</HEAD>
<BODY>
<H1>Passing Arguments to the Functions </H1>
<SCRIPT language="JavaScript">
function total(a,b,c)
{
var sum = a+b+c;
[Link]("total="+sum);
}
[Link]("The sum is calculated by
passing arguments to the function<BR/>");
total(4,5,6);
</SCRIPT>
</BODY>
</HTML>

4. Developing a web page, to call a function which returns a calculated value.

[Link]
<HTML>
<HEAD>
<TITLE>RETURN</TITLE>
</HEAD>
<BODY>
<H1>Using the return Statement </H1>
<SCRIPT language="JavaScript">
function area (l, b)
{
var rectangle = l*b;
return rectangle;
}
[Link]("The area of the rectangle
is calculated using the area() function <BR/>");
var rect=area (4,6);
[Link]("Area of rectangle is:"+rect);
</SCRIPT>
</BODY>
</HTML>

5. Developing a web page, to call a function which returns a calculated value.

80
Scope_Closure.html
<HTML>
<HEAD>
<TITLE>Closures</TITLE>
</HEAD>
<BODY>
<H1>Using the Function Scope and Closure</H1>
<SCRIPT language="JavaScript">
// call function to display greeting message
Showmessage();
// "Hello, World" function
function Showmessage()
{
// declaring new variables
var date = new Date();
var hour = [Link]();
var min = [Link]();
var month = [Link]() + 1
var day = [Link]()
var year = [Link]()
// call DisplayGreeting
Display();
// display greeting
function Display()
{
if (hour >= 22 || hour <= 5)
[Link]("Goodnight, world! <BR/>");
else
[Link]("Hello, world! <BR/>");
[Link]
("Today is " + month + "/" + day + "/" + year + "<BR/>");
[Link] ("The current time is " + hour + ":" + min );
}
}
</SCRIPT>
</BODY>
</HTML>

6. Developing a web page, using setTimeout() method that is used to specify the time
interval after which the code executes.
[Link]
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
81
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value=" timed alert box!"
onClick="timedMsg()" />
</FORM>
</BODY>
</HTML>

7. Developing a web page, using setTimeout() method that is used to execute the code
after every specified time intervals.
[Link]
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function timedMsg()
{
var t=setInterval("alert('1seconds!')",1000);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value=" timed alert box!"
onClick="timedMsg()" />
</FORM>
</BODY>
</HTML>

8. Developing a web page, to show the mouse event action

[Link]
<HTML>
<HEAD>
<TITLE>onload Event</TITLE>
</HEAD>
<BODY>
<H1>Using the Mouse Events </H1>
<P> Click this Button </P>
<BUTTON onMouseDown = "[Link]['img'].src='[Link]'"
onMouseUp = "[Link]['img'].src='[Link]'" >
<IMG NAME="img" >
</BUTTON>
</BODY>
</HTML>
9. Developing a web page for moving a car from one place to another place.
82
[Link]
<HTML>
<HEAD>
<TITLE>JavaScript Animation</TITLE>
<SCRIPT type="text/javascript">
var imgObj = null;
var animate ;
function init(){
imgObj = [Link]('myImage');

[Link]= 'relative';
[Link] = '0px';
}
function moveRight()
{
[Link] =parseInt([Link]) + 10 + 'px';
animate = setTimeout(moveRight,200); // call moveRight in 20msec
}
function stop()
{
clearTimeout(animate);
[Link] = '0px';
}
[Link] =init;
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<IMG id="myImage" src="[Link]" />
<P>Click the Start button to start aniamtion</P>
<INPUT type="button" value="Start"
onclick="moveRight();" />
<INPUT type="button" value="Stop" onclick="stop();" />
</FORM>
</BODY>
</HTML>

Objects in JavaScript
JavaScript is an object-based scripting language that is used to develop object-oriented
web applications. Similar to real world objects, the objects in the JavaScript language
also encapsulate various sates and behaviors. The various states of an object are defined
as its properties; whereas, behaviors of the object are specified by its methods.
An Object-Oriented Programming (OOP) language is based on the concepts of classes
objects, and four principles, namely abstraction, encapsulation, inheritance, and
polymorphism. A class represents the structure of its objects by defining data and
methods. The abstraction and encapsulation principles are used to show the necessary
details or hide the unnecessary details of an object, respectively. Moreover, inheritance

83
promotes reusability of code and polymorphism is used to define many forms of an
object.
In JavaScript, an object is an entity that can contain other objects; however, properties of
one object cannot be inherited by any other object. This implies that the child objects do
not inherit the properties of its parent object. There are two categories of objects in
JavaScript – language and browser. Language objects specify the objects that are
provided by the JavaScript language and are not dependent on any other object, while
the browser objects specify the objects that tare provided by the client browser.
In JavaScript, we can create objects in two ways either by creating a direct instance or by
creating an object using a function template. A direct instance of an object is created by
suing the new keyword.
The following code shows the syntax for creating direct instance of an object:
obj=new object();
Another way to creat an instance of an object is by creating a function template of the
object. After defining the unction template of an object, you need to create an on
instance of the object by using the new keyword. A function template for an object is
created by using the function keyword. You can also add properties to the function
template by using the “this” keyword. The following a\code shows an example of
creating a function of template:
function bike(speed, engine,color)
{
[Link]=speed;
[Link]=engine;
[Link]=color;
}
In the above code, a function name bike is created and three parameters anemd speed,
engine, and color are added to its. The values o the parameters are assigned with the
properties that you want the bike object to have. The “ this” keyword is used to
represent the current object that is in use.
Next, you have to create the instance of the object bike by using the new keyword, as
shown below
var my_bike=new bike(“120kph”, “v-6”,”red”);
Now, you can access the my_bike instance of the bike object as shown below
var engine_type=my_bike.engine;

Properties of an Object
Property, also known as attribute, is the characteristic of an object. For example, vehicle
is an object and color and speed are its properties. You can add properties to an object
by using the this keyword followed by the dot (.) operator. Now, let’s extend an object
function, myobject, to contain two properties, each containing a string of text, as shown
below:
function myobject(parameter)
{
this.property1=parameter
this.property2=”Hello World”
}
The properties defined in the preceding code can be accessed, as shown below:
<SCRIPT>
84
 var object=new myobject(“Hello all”)
//alerts “Hello all”

alert(object.property1)
//writes “Hello world”
[Link](object.property2)
</SCRIPT>
Methods of an Object
A method is a set of one or more statements that are executed by referring the name of
the method. In other words, a method can be defined as an action performed by an
object. To add method to a user defined object, you need to perform the following steps:
 Declaring and defining a function for each method
 Associating a function with an object
Let’s create a “triangle” as an object and create a function, computerarea() as shown
below:
Function computerarea()
{
var area=[Link]*[Link]*0.5
return area
}
In the above code, the computerarea(0 function calculates the area of a triangle. Now,
associate the function computerrea() to the object triangle, as shown below
<SCRIPT type=”text/javascript”>
function triangle(b,a)
{
[Link]=b
[Link]=a
[Link]=computerarea
}
</SCRIPT>
Now, call the method by instantiating the object, as shown below
<script type=”text/javascript”>
var mytriangle=new triange(20,10)
alert(“area=” + [Link]())
</script>
Now, call the method by instantiating the object, as shown in the following code
<script type=”text/javascript”>
var mytriangle=new triangle(20,10)
alert(“alert = “ + [Link]())
</script>
JavaScript’s Standard or Built-In Objects
JavaScript supports seven built-in objects whose function has been already been defined
to the browser. They are:
 String
 RegExp
 Boolean
 Number
85
  Array
 Math
 Date

String Object : A string is a sequence of characters. In JavaScript, all strings are

represented as instances of the String object. The purpose of the String object in
JavaScript is to perform operations on the stored text, such as finding the length of the
text or string. The String object is a wrapper class and a member of the global objects.
Properties of String Object are:
Property Description
constructor Returns the function, which creates the property of a string object
length Returns the length of a String
prototype Adds properties and methods to the object

Methods of the String Object

Method Description
charAt() Retruns the character in the specified
charCodeAt() Returns the Unicode equivalence of the character in the specified index
concat() Joins two string and returns the joint string
fromCharCode() Converts Unicode to character
replace() Searches for the match between a regular expression and a string, and
replaces the matched substring with a new substring
search() Search for a match between a regular expression and a string, and
returns the position of the match

RegExp Object
A regular expression is an object that helps you to validate the pattern of characters. For
example, you can validate whether the syntax of an email address entered in a form is
correct or not by providing the pattern for e-mail address in the RegExp object. The two
easy of defining regular expressions in JavaScript:
 Using RegExp objects’s constructor function
 Using literal
The following is the syntax for the use of RegExp constructor:
Var RegularExpression = new RegExp(“pattern”, “flag”0;
In the above code, patternis the text of the regular expression and flag makes the
regular expression search for a specific pattern.
The following code is used to match all strings that look like the [Link] IP
address:
var regualrexp=new RegExp(\\b\\d{1,3}\\. \\d{1,3}\\. \\d{1,3}\\. \\d{1,3}\\b”,”g”);
The following code shows the use of a literal:
var RegularExpression = /pattern/flag;
For example, to match all strings that look like IP address: [Link], the following
code is :
Var regularexp= /\b\d{1,3}.\d{1,3}\.\d{1,3}\.\d{1,3}\b/g;
The following are the three types of flags in JavaScript:
 g – Finds all the matches globally
 i – Ignores the case in searches, i.e. text written in the lower case is same as the
text written in the upper case.
86
  m --- Represents multiline matching, i.e. The symbols ^(caret) and $(dollar) match
the beginning and end of lines as well as the entire string

Boolean Object : A Boolean object is a wrapper class and a member of global objects. It
used to convert the non-boolean values into Boolean values. It has two values: true and
false. The Boolean object returns false when the object is passed with values, such as 0
(zero), “ “ (empty string), false, null, undefined, and Not a Number (NaN) values. The
Boolean object can be created in the following ways:
 Using boolean literal notation
 Using the Boolean object as function
 Using the testable expressions
Boolean Literals
Boolean literals make use of two keywords, true and false, to automatically inherit the
members of the Boolean object, as shown in the following code:
var bool=true;
In the above code, the value fot ehe bool variable has been set to true. The following
code shows how to print the value of bool:
[Link](bool + “ “);

Number Object : All numbers in JavaScript 64 bit (8 bytes) floating point numbers,
which yield an effective range of 5e-324(negative) to 1.7976931348623157e+308
(positive). Unlike C or C++, there are no data types, such as integer or floating-point
types, to define numbers in JavaScript. The syntax for creating the Number object is
var num =new Number(value);
example
var num=new Number(’12.12’);

Array Object : The Array object is used to store multiple values in a single variable. In
JavaScript, an array can hold different types of data types in a single array slot, which
implies that an array can have a string, a number, or an object in a single slot. An Array
object can be created in the following ways:
 Using the array constructor
 Using the array literal notation
Using the Array Constructor
An empty array is created in cases where you do not know the exact number of
elements to be inserted in an array. You can create an empty array by using an array
constructor, as shown
var myarray=new array()
The example such as:
Var myarray=new array(20)
We can also create an array like this:
Var myarray=new array(“Sunday”,”Monday”,”Tuesday”,”Wednesday”,…….);

Using Array Literal Notation

Here array is created using comma-separated list of items enclosed by square
brackets.
Var myarray=[]
An example such as:
Var myarray=[6,”hello”,false,true];
87
Math Object
The match object is used to perform simple and complex arithmetic operations.
JavaScript math object is use to mathematical tasks.

Date Object
The data object is used to display a date ion a web page or timestamp in numeral or
mathematical calculations. In JavaScript, you can either define the Date object by
providing he date or your choice or let JavaScript define the Date object based on the
visitors system clock. The Date object stores dates as milliseconds that have p[assed
since midnight on January 1, 1970 Universal Time Code (UTC). The Date object can be
created with the help of the constructor function. You can create the Date object in the
following ways as
var date1=new Date();
var date1=new Date(yyyy mm,dd[,hr,min,sec,millisec]);

1. Developing a web page to learn how to work with templates of an object

[Link]
<HTML>
<HEAD>
<TITLE>Template Demo</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
function employee(name,jobtitle,salary)
{
[Link]=name;
[Link]=jobtitle;
[Link]=salary;
}
var emp1=new employee("Suresh Kumar","Technical writer",10000);
[Link]([Link]+ " is a "+[Link]+" in Infosys

company, having the salary Rs."+[Link]+" per month");

</SCRIPT>
</BODY>
</HTML>

2. Developing a web page to learn how to work with templates of an object

[Link]
<HTML>
<HEAD>
<TITLE>Template Demo</TITLE>
</HEAD>
<BODY>
<TABLE border=3>
<TR>
88
<TH>Bike Image</TH>

<TH>Bike Color</TH>
</TR>
<TR>
<TD>
<IMG name="myimage01" src="[Link]"/>
<SCRIPT type="text/javascript">
[Link].myimage01;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {

[Link]=color;
}

var bike1= new bike("Red");

[Link]([Link]);

</SCRIPT>
</TD>
</TR>

<TR>
<TD>
<IMG name="myimage02" src="[Link]"/>
<SCRIPT type="text/javascript">
[Link].myimage02;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {

[Link]=color;
}

var bike2= new bike("Black");

[Link]([Link]);

</SCRIPT>
</TD>
</TR>
<TR>
<TD>
<IMG name="myimage03" src="[Link]"/>
89
<SCRIPT type="text/javascript">
[Link].myimage03;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {

[Link]=color;
}

var bike3= new bike("Blue");

[Link]([Link]);

</SCRIPT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

3. Developing a web page to apply string properties on a web page.

[Link]
<HTML>
<HEAD>
<TITLE>String Properties Demo</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
function employee(name,jobtitle,salary)
{
[Link]=name;
[Link]=jobtitle;
[Link]=salary;
}
var emp1=new employee("Sami Ahmed","Technical writer",10000);
[Link]("Name : "+[Link]+ "<BR/>

Designation : "+[Link]+"<BR/> Salary : Rs."+[Link]);

[Link]("<BR/>

--------------------<BR/>");
var emp2=new employee("Sandeep Rao","HR manager",40000);
[Link]=2007;
[Link]("Name : "+[Link]+"<BR/>
Designation : "+[Link]+"<BR/> Date of

Joining : "+[Link]+"<BR/>Salary : Rs."+[Link]);

90
</SCRIPT>
</BODY>
</HTML>

4. Another example of using a string object is using its properties and methods
[Link]
<HTML>
<HEAD>
<TITLE>Form with Sting Object</TITLE>
</HEAD>
<BODY style="background-color:orange">
<H3>Enter your text in the given text area</H3>
<FORM name="wordcount">
<TEXTAREA rows="12" name="wordcount2" cols="38" wrap="virtual"
style="color:pink;background-color:blue;font-size:20px"></textarea><br>
<INPUT type="button" value="Calculate Words" onClick="countit()">
<INPUT type="text" name="wordcount3" size="20">
</FORM>

<SCRIPT type="text/javascript">
function countit(){
var formcontent=[Link]
formcontent=[Link](" ")
[Link]=[Link]
}
</SCRIPT>
</BODY>
</HTML>

91
Browser Objects in JavaScript
These are the objects which are automatically created by a browser at the time of
loading a web page. When a HTML document is opened in a browser window, the
browser interprets the document as a collection of hierarchical objects and accordingly
displays the data contained in these objects. The browser parses the document and
creates a collection of objects which defines the document and its details. Parsing is a
process of analyzing a document for correct syntax and building a data structure on the
basis of the specified syntax. There are various types of browser objects such as:
 Window
 Navigator
 Document
 Screen
 History
 Location
Window Object
The window object is used to open a window in a browser to display the web page. It is a
global object, which means that it provides global access to the associated variables and
functions. Whenever you open a new window, a window object is created.
The properties of the window object are used to retrieve the information about the
window that is currently open on the web browser; whereas, the methods are used to
perform specific tasks, such as opening, maximizing, or minimizing the window. The
window object is the top-level or parent object in the hierarchy of browser objects and is
automatically defined by the browser, as shown
[Link](“JavaScript”)
Navigator Object
The navigator object is used to display information about the version and type of the
browser. In JavaScript, the navigator object is associated with some properties and
methods, which help you navigate from one element to another.
History Object
The history object is a predefined JavaScript object that consists of an array of URLs,
which are visited by a user in the browser. This object is returned by using the history
property of a window object.
Screen Object
The screen object is used to determine the properties of the display screen of a browser.
In other words, the screen object provides the information about the dimensions of a
display screen, such as its height, width, color bits. You can use the screen object with or
without the window object as shown in the following code:
[Link]
or
screen
Using the screen object along with the window object represents the browser window
and its screen object. However, using the screen object, without using the window
object, automatically detects the browser window, which is created by a JavaScript
runtime engine.

92
Location Object: In JavaScript, location is a child object of the window. It is used to
store information of the current URL of the window. The location object allows you to
automatically navigate to another web page. For instance, by using the following code,
we can navigate to the home page of Google:
<script type=”text/javascript”>
[Link]=[Link]
</script>

1. Developing a web page to open a URL in a new window or to close a window by using
the various methods of “window“object.
[Link]
<HTML>
<HEAD>
<TITLE>Window Object Methods</TITLE>
<SCRIPT type="text/javascript">
var myWindow;
function openCenteredWindow(url) {
var width = 400;
var height = 300;
var windowFeatures = "width=" + width + ",height=" + height +",status,resizable";
myWindow = [Link](url, "subWind",windowFeatures);
}
function show_alert()
{
alert("Hi!!! I am alert box");
}
function resizeWindow(){
[Link](-100,-100)
}
function closeWindow(){
if ([Link]("Do you want to close the

browser?"))
[Link]();
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Open a New Window"
onclick="openCenteredWindow('[Link]')" />
<INPUT type="button" value="Alert"

onclick="show_alert()" />
<INPUT type="button" onclick="resizeWindow()" value="Resize window">
<INPUT type="button" onclick="closeWindow()" value="Close the window">
</BODY>
</HTML>

93
2. Developing a web page to identify the name of the browser using Navigator object.
[Link]
<HTML>
<HEAD>
<TITLE>Detecting Browser Capabilities</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function displayNavigatorProperties() {
with(document) {
write("<B>appName: </B>")
writeln([Link]+"<BR>")
write("<B>appVersion: </B>")
writeln([Link]+"<BR>")
write("<B>appCodeName: </B>")
writeln([Link]+"<BR>")
write("<B>platform: </B>")
writeln([Link]+"<BR>")
write("<B>userAgent: </B>")
writeln([Link]+"<BR>")
}
}
function displayExplorerProperties() {
with(document) {
write("<B>appName: </B>")
writeln([Link]+"<BR>")
write("<B>appVersion: </B>")
writeln([Link]+"<BR>")

write("<B>appCodeName: </B>")
writeln([Link]+"<BR>")
write("<B>platform: </B>")
writeln([Link]+"<BR>")

write("<B>userAgent: </B>")
writeln([Link]+"<BR>")
write("<B>cookieEnabled: </B>")
writeln([Link]+"<BR>")
}
}
function displayBrowserProperties() {
if([Link]=="Netscape")
displayNavigatorProperties()
else
if([Link]=="Microsoft Internet

94
Explorer")
displayExplorerProperties()
}
displayBrowserProperties()
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

3. Developing a web page to specify the action related to the browser using Navigator
object.
[Link]
<HTML>
<HEAD>
<TITLE>Navigator Methods Demo</TITLE>

</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
[Link]("Java enabled: " +

[Link]()+"<BR/>");
[Link]("Data tainting enabled: " +

[Link]());

</SCRIPT>
</BODY>
</HTML>

95
Document Object
You are already familiar with browser objects in JavaScript that enable you to access you
web browser in a variety of ways. Besides, window, navigation, location, history, and
screen objects, another browser object in JavaScript is the “ document” object, which
enables you to access HTML elements of an HTML document. Suppose you have created
a form in an HTML document using the FORM element and added some text fields and
buttons on the form. On submitting the form, you want to validate the input or display
the input on another page. In this situation, you can use the document object, which is a
child object of the window object. Using the document object, you can access the
elements of the form and validate the input.
The document object provides different collection elements, such as anchor and links,
which help you to count the number of specific elements on a form. In addition, the
document object provides various properties and methods. The properties of the
document object, such as the URL of the document and the background color. The
methods of the document, such as open(), close(), write(), writeln(), getElementById(),
and getElementByName(), allow you to perform various tasks, such as opening an HTML
document to display the output and writing text on a web page. The document object
also allows you to create cookies of a web page by providing a property, named cookie.
A cookie stores some specific information about the user’s computer, which helps in
accessing visited websites.
The document object is an object that provides access to all HTML elements of a
document. When an HTML documents is loaded in a browser, then it becomes a
document object. The document object stores the elements of an HTML document, such
as HTML, HEAD, and BODY as objects. You can access a document object either using
the [Link] property or using the document object directly, as shown below
[Link]
Or
document

Document Object Collections

In programming, a collection is defined as an array of related objects. This array of objects provides a
convenient way to refer to a related group of objects as a single object. The document object also provides some
elements as collection of objects. Below table shows the list of collection elements that are provided by the
document object:
Collection Description Syntax
anchors Refers to array that returns all the anchor objects of an [Link][]
HTML document. The order of the anchor objects stored
in the array depends on the order in which they appear in
the source code.
forms Refers to an array that returns all the form objects of an [Link][]
HTML document
images Refers to an array that returns all the image objects of an [Link][]
HTML document
links Refers to an array that returns all the link objects of a [Link][]
document.

Document Object Properties

96
A property of an object is the value associated with the object. The property is accessed
by using the following notation:
[Link]
In the above code, objectName is the name of the object and propertyName is the name of its property; both are
case-sensitive. You can assign a value to the property as [Link]=”100”, where tableObj is the name of
the object and width is the property of the object. In the below table shows the property
Properties Description
cookie Returns a report that contains all the visible and unexpired cookies
associated with the document
domain Returns the domain name of the server from which the document has
originated
lastModified Returns the date on which the document was last modified
documentMode Returns the mode used by the browser to process the document
readyState Reurns the loading status of the document
referrer Returns the URL of all the documents referred to in an HTML document
title Returns the name of the HTML document defined between the starting and
ending tags of the TITLE element
URL Returns the full URL of the HTML document

Document Object Methods

The document object also provides various methods to access HTML elements. The
syntax used to call a method is as follows:
[Link](arguments)
Some methods of Document Object
Methods Description Syntax
open Opens an HTML [Link](mimetype,replace)
document to display
the output
close Closes an HTML [Link]()
document
write Writes HTML [Link](exp1,exp2..)
expressions or
JavaScript code into an
HTML document
getElementById Returns the reference [Link](id)
of first element of an
HTML document with
the specified id
getElementsByName Returns the reference [Link](name)
of an element with the
specified name
getElementsByTagName Returns all elements [Link](tagname
with the specified )
tagname

Cookies: A cookie is a small file containing information, which a server embeds on a

user’s computer. Each time the same computer requests for a web page from a server,
the server refers to the created cookie for displaying the requested web page. The size
of a cookie depends on a browser, but it generally should not exceed 1K (1,024 bytes). A

97
cookie is generally used to store the user name and password information on a computer
so that you need not to enter this information each time you visit a website.
A cookie has several attributes, which contain vital information about the cookie.

 name: Represents a variable name and the corresponding value to be stored in a

cookie.
 expires: Specifies the time when a cookie is deleted. It is expressed as a UNIX
timestamp.
 domain: Represents a domain name (partial or complete) to which a cookie is
sent. For example, if the value for the Valid domain attribute is [Link], a
client sends the cookie informationto the web browser every time the client visits
the [Link] website.
 path : Identiies sites among various paths in the same domain. Setting this
attribute to the server root (/) allows the entire domain to access the information
stored in a cookie.
 secure: Restricts a borser from sending cookie information over unsecured
connections. It allows the cookie to be sent over any type of HTTP connection. The
default value of the Security Flag attribute is 0. Setting the value to 1 allows the
cookie to be sent over a secure HTTP connection.
1. Developing a web page to display the number of image objects in a web browser.
[Link]
<HTML>
<HEAD>
<TITLE>Image Collection</TITLE>
</HEAD>
<BODY>
<H1> Counting the IMG Elements </H1>
<IMG src="[Link]" alt="flower1" width="120" height="100"></BR>
<IMG src="[Link]" alt="flower2" width="120" height="100"></BR>
<IMG src="[Link]" alt="flower3" width="120" height="100"></BR>

<P>This document contains <B>

<SCRIPT type="text/JavaScript">
[Link]([Link]+" ")
</SCRIPT></B>
IMG elements.</P>
</BODY>
</HTML>

2. Developing a web page using document object which provides the forms [] property to
select the references of all the form objects of an HTML document.
[Link]
<HTML>
<HEAD>
<TITLE>online shopping</TITLE>
<SCRIPT language="JavaScript">
<!--

98
 function order()
{
var order="Dear "
order = order + [Link][0].[Link]
order = order + ", You have ordered an item with size "
if ([Link][0].[Link][0].selected){
order = order + "small"
}
if ([Link][0].[Link][1].selected){
order = order + "medium"
}
if([Link][0].[Link][2].selected){
order = order + "large"
}

order = order + " and it will be delivered in a "

if ([Link][0].packaging[0].checked){
order = order + "cardboard box"
}
if ([Link][0].packaging[1].checked){
order = order + "styrofoam-insulated container"
}
order = order + " to the following address: "
order = order + [Link][0].address. value
alert(order)
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Online Shopping</H1>
<FORM action="[Link]
enctype="text/plain">
Name:<INPUT name="Name" size=20><BR>
Address:<INPUT name="address" size=20><P>
Item size:<BR>
Size: <SELECT name="size">
<OPTION>Small<OPTION selected>Medium
<OPTION>Large</SELECT><BR>

Packaging :<BR/>
<INPUT type=radio name="packaging">Cardboard box<BR>
<INPUT type=radio name="packaging">Styrofoam-insulated
container<p>
<INPUT type=submit value="order">
</FORM>
</BODY>
</HTML>

99
3. Developing a web page for creating a cookie
[Link]
<HTML>
<HEAD>
<SCRIPT type="text/javascript">

function getCookie(cname)
{
if ([Link]>0)
{
cstart=[Link](cname + "=");
if (cstart!=-1)
{
cstart=cstart + [Link]+1;
cend=[Link](";",cstart);
if (cend==-1) cend=[Link];
return unescape([Link](cstart,cend));
}
}
return "";
}

function setCookie(cname,value,expiredays)
{
var exdate=new Date();
[Link]([Link]()+expiredays);
[Link]=cname+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+[Link]());
}

function checkCookie()
{

mycookie=getCookie('mycookie');
if (mycookie!=null && mycookie!="")
{
alert('Welcome again '+mycookie+'! \n The cookies has already been created.');
}
else
{
mycookie=prompt('Please enter your name:',"");
if (mycookie!=null && mycookie!="")
{
setCookie('mycookie',mycookie,30);
}
}
}
</SCRIPT>

100
 </HEAD>

<BODY>
<H1>Creating and Reading Cookies</H1>
<P>Click on the button to create the cookie: </P>
<INPUT type="button" onclick="checkCookie()" value="Create Cookie">
</BODY>
</HTML>

4. Developing a web page for setting and deleting cookie value

[Link]
<HTML>
<HEAD>
<TITLE>Resetting Cookie</TITLE>
<SCRIPT type="text/javascript">

function getCookie(cname)
{
if ([Link]>0)
{
cstart=[Link](cname + "=");
if(cstart!=-1)
{
cstart=cstart + [Link]+1;
cend=[Link](";",cstart);
if (cend==-1) cend=[Link];
return unescape([Link](cstart,cend));
}
}
return "";
}

functionsetCookie(cname,value,expiredays)
{
var exdate=new Date();
[Link]([Link]()+expiredays);
[Link]=cname+ "="
+escape(value)+((expiredays==null) ? "" :
";expires="+[Link]());
}

function checkCookie()
{
mycookie=getCookie('mycookie');
if (mycookie!=null && mycookie!="")
{

alert('Welcome again '+mycookie+'! \n The cookies

101
 has already been created.');
}
else
{
mycookie=prompt('Please enter your name:',"");
if(mycookie!=null && mycookie!="")
{
setCookie('mycookie',mycookie,30);
}
}
}

function eraseCookie()
{
setCookie('mycookie',"",-1);
alert('The cookie has been successfully erased.');
}
</SCRIPT>
</HEAD>

<BODY>
<H1>Creating and Reading Cookies</H1>
<P>Click on the button to create the cookie: </P>
<INPUT type="button" onclick="checkCookie()" value="Create Cookie">
<P>Click on the Delete Cookie button to delete the cookie: </P>
<INPUT type="button" onclick="eraseCookie()" value="Delete Cookie">
</BODY>
</HTML>

Validation in JavaScript on Form Controls

JavaScript plays an important role in adding interactivity to the HTML web pages. It
allows you to implement client-side scripting in a web page for performing various
actions, such as validating a form, debugging, and exception handling. Using HTML, you
can only design the fields of form, but JavaScript allows you to apply restrictions on these
fields. These fields restriction on a form are known as form validation.
Form Validation
Form validation is the process of verifying whether a form has been filled correctly
before it is processed. When a user enters data into a form field, it is possible that the
user can make a mistake or enter the incorrect data in the fields. You can check these
mistakes or incorrect data input by validating those fields. For example, if your form has
text boxes for the user id, password, and email address; and you want user id must start
with a number, the password must be minimum o six characters and maximum o twenty
102
character, and the email addresses must be entered in the correct format, then the best
option is to write code to validate these fields. You can validate a form by using the
following validation methods:
 Server-side validation – Uses Common Gateway (CGI) scripts, Servlet, JSP, ASP
to validate a form.
 Client-side validation – Uses a JavaScript or VBScript to validate a form.
The server-side validation is more secure, but it is more complex to code, and requires a
server connection to validate the form. Whereas, the client-side validation is easier and
quicker because it does not require a server connection to validate the form, so the
users find out instantly if they have made mistakes or entered incorrect data before
submitting the form. The advantages of the client-side validation are given as follows:
 Validates form elements before the form data is submitted to the form
 Does not require a connection with a server
 Reduces the load on the server
 Saves the time
You can use the “onsubmit” attribute of the HTML forms to validate a form. The
onsubmit attribute is an event attribute that triggers when the submit button of the form
is clicked and calls JavaScript function. This function checks that the form fields are valid
or not and uses a return submitted; otherwise, the form is not submitted and an error
message appears. The following code shows the syntax to use the onsumbit attrite:
<HTML>
< HEAD> <Title> Validating Required fields </title>
<Script type=”text/javascript”>
function validateReqFields(thisform)
{
.....
.....
}
</SCRIPT>
</HEAD>
<BODY>

<FORM action=”[Link]” onsubmit = “return validateReqFields(this)”

method=”post”>
.....
.....
<INPUT type=”submit” value=”submit” />
<form>
</body>
</html>

Different Types of Errors in JavaScript

When you write a program, it is common to make mistakes. In JavaScript, these mistakes
are treated as errors. Consider, you create function, named onAccept(); however, you
forget to write the code in the opening and closing braces – {}. As a result, the error
occurs due to which the function performed by onAccept() will not execute in the web
page. The following is the list of common errors that you should avoid while writing a
program in JavaScript:
 Spelling and typing errors
103
  Missing brackets or quotation marks
 Using wrong type of bracket
 Mismatching quotation marks
 Referencing objects that do not exist
There are three types of errors that can occur while writing a program in JavaScript:
i. Syntax errors
ii. Runtime errors (Exception)
iii. Logic errors
Debugging JavaScript Programs
An error in a program is called a bug Therefore, when it is said that you need to debug a
program, and then it means that you need to locate and correct the errors of the
program. This implies that debugging is a process of finding and rectifying the bugs or
defects of a computer program or a piece of electronic hardware. When you debug a
program or hardware device, you need to start with a problem, isolate the source of the
problem, and then fix it. In JavaScript, you can debug program by using the following
technique:
 JSLint checker
 Browser sniffing
JSLint Checker: JSLint is an on-line validator that is used to debug the JavaScript code.
It has two fields, one is text field to set the JavaScript code and another is the JSLint
button. To debug a JavaScript program by using JSLint, you have to set the JavaScript
code in the text field o JSLint and press the JSlint button. If the code has any error, JSLint
generates the error message with the line number where the error has occurred. Some
guidelines that should be followed while using JSLint are given as follows:
 Every statement must end with semicolon(;) except the for, function, if, switch, try,
and while expressions
 An identifier, a string a, a number, a and a suffix operator, such as ), ], ++, and --,
must not appear at the end of the line
 Variables must be declared only once, and must be declared before they are used.

Browser Sniffing : Browser sniffing is a process of detecting the information related to

a browser. This browser related information includes the name, version, operating
system, and type of the browser, such as Internet Explorer and Netscape Navigator.
Browser sniffing also detects the runtime environment of the browser in which a web
page is executed. It restricts the code fragments of the language that might be
JavaScript or any other language that are either having the bugs or are not browser
specific. For example, if you are using Internet Explorer as the browser then you must
use only those features in coding that Internet Explorer supports. If you use the features
of Netscape Navigator in a fragment of code then Internet Explorer does not execute
that code fragment. Browser sniffing is also used by a web server to find out the name
and the version of a user’s browser. When the user sends the request o the server, the
server finds out the name and the version of browser, and produces the result according
to the user’s browser. Browser sniffing uses the navigator object to tdete4ct the user’s
browser.

Exception Handling In JavaScript

104
An exception is an error that occurs at the time of execution due to an illegal operation
when a program is syntactically correct. For example, when you try to reference an
undefined variable or call a non-existent method, an exception will occur.
There are two ways of handling exceptions in JavaScript:
i. Using try-catch statement
ii. Using onerror event
Using try-catch Statement
In JavaScript, you need to write the code, which can generate an error, in the try block.
Immediately, after the try block there is a catch block that specifies the exception type
that you want to catch.
try
{
//code that can cause an error
}
catch (error)
{
//what to do when an error occurs
}

onerror Event: Any error that is not handled by the try-catch statement causes the
onerror event to fire on the window object. The onerror event does not create a n ecent
object; it is called by the object to the window that has the errors. It accepts three
arguments, the eeor message, the URL of the web page on which is the error occurred,
and theline number that contains the error. When the onerror event triggers, it displays
the error message, the URL o the web page, and the line number at which the error
occurs. The syntax is the onerrror event is as follows:
[Link] = function(ermessage, url, line)
{
alert(message);
}
In the above code, we has used the window object to call the onerror event that takes
three argument , error message, URL and the line number.

Security Policies of JavaScript

Downloading and running programs, which are written by unknown vendors, from the
Internet can be dangerous. On the Internet, a program may seem beneficial, but while
downloading it, some spy ware or a virus can install on your system. A JavaScript code
provides the access to documents or programs available on different websites. However,
it follows JavaScript security model that is based upon Java. According to this model,
JavaScript uses a security policy that is a set of rules allowing you to perform different
actions under different circumstances. For example, when you try to use the window.
Close() method on the main browser window, a confirmation box appears prompting if
you really want to allow the window to be closed. This situation is one of the aspects of
the JavaScript security. There are two security policies in JavaScript:
 Same-origin
 Signed-script
Same-origin Policy: The primary JavaScript security policy is the same-origin policy,
also known as single-origin policy or same-site policy. In this policy when a script
105
attempts to access the properties or methods of a web page from some other web page,
then the browser performs the same-origin check on the URLs of the different web
pages. If the URL of the new web page has the same origin as the previous web page,
then only the properties and methods can be accessed. If the URL of the new web page
does not have the same origin, then an error is thrown. Two different web pages have
the same origin if they are loaded from the same server by using the same protocol and
port number.

Signed-Script Policy
In the signed-script policy, you create a named policy and apply that policy to a specific
list of web sites. You can define a list of trusted sites to which you are willing to grant
certain extended privileges. For example, you can create a policy called Intranet and
apply it to pages fetched from your corporate intranet. If a user wants to access a site
that is available in the list o trusted sites, then the access is granted by the policy. If the
user tries to access a site that is not available in the list o trusted sites, the access is not
granted by the policy.

1. Developing a web page for validating DATE value field.

[Link]
<HTML>
<HEAD>
<TITLE>Validating Date</TITLE>
<SCRIPT type="text/javascript">
function isDate(txtDate)
{
var objDate;
var mSeconds;
if (txtDate=="")
{
alert("Please enter the Date");
return false;
}
var day = [Link](3,5);
var month = [Link](0,2)-1;
var year = [Link](6,10);
if ([Link](2,3) != '/')
{
alert("Please enter the Date in correct format");
return false;
}
if ([Link](5,6) != '/')
{
alert("Please enter the Date in correct format");
return false;
}
mSeconds = (new Date(year, month, day)).getTime();
objDate = new Date();
[Link](mSeconds);

106
 if ([Link]()!= day)
{
alert("you have entered the wrong Day");
return false;
}
if ([Link]()!= month)
{
alert("you have entered the wrong month");
return false;
}
if ([Link]()!= year)
{
alert("you have entered the wrong year");
return false;
}
return true;
}
function checkDate(thisform)
{
var txtDate = [Link];
if (isDate(txtDate))
return true;
else
{
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM action="[Link]" onsubmit="return checkDate(this)" method="Post">
Enter Date(mm/dd/yyyy):<INPUT type="text" name="date"/><BR/>
<INPUT type="submit" value="submit"/>
</FORM>
</BODY>
</HTML>
2. Developing a web page for validating EMAIL field value
[Link]
<HTML>
<HEAD>
<TITLE>Validating E-mail</TITLE>
<SCRIPT type="text/javascript">
function validateEmail(thisform)
{
var txtEmail=[Link];
var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/;
var n1=[Link]("@");
var n2=[Link](".");
107
 if(txtEmail=="")
{
alert("Enter the Email address");
[Link]();
return false;
}
if([Link](illegalChars))
{
alert("Invalid Email address");
[Link]();
return false;
}
if(n1<1 ||n2-n1<2)
{
alert("Invalid Email address");
[Link]();
return false;
}
return true;
}
</SCRIPT>
</HEAD>
<BODY >
<FORM action="[Link]" onsubmit="return validateEmail(this)"
method="Post">
User Name:<INPUT type="text" name="uname"/><BR/>
E-mail:<INPUT type="text" name="email"/>*<BR/>
<INPUT type="submit" value="submit"/>
</FORM>
</BODY>
</HTML>

3. Developing a web page, in which an example for required field validation for input
components.
[Link]
<HTML>
<HEAD>
<TITLE>Validating required fields</TITLE>
<SCRIPT type="text/javascript">
function validateReqFields(thisform)
{
//Validation for First Name and Last Name
var fName=[Link];
var lName=[Link];
if(fName==null || fName=="")
{
alert("Enter the First name");
[Link]();

108
 return false;
}
if(lName==null || lName=="")
{
alert("Enter the Last Name");
[Link]();
return false;
}

//Validation for User Name and Password

var userName= [Link];
var pass1= [Link];
var pass2= [Link];
if(userName=="")
{
alert("Please enter the user name");
[Link]();
return false;
}
if([Link]<6)
{
alert("User name must be of atleast six characters");
[Link]();
return false;
}
if(pass1=="")
{
alert("Please enter the password");
[Link]();
return false;
}
if([Link]<8)
{
alert("Password must contain atleast 8 digits");
[Link]();
return false;
}
if(pass2=="")
{
alert("Please enter the confirm password");
[Link]();
return false;
}
if([Link]<8)
{
alert("Confirm password must contain atleast 8 digits");
[Link]();
return false;
}
109
 if([Link]>=8 && [Link]>=8 )
{
if(pass1!=pass2)
{
alert("Password mismatched! enter the correct password!");
return false;
}
}
//Validation for Employee Id
var num = [Link];
if(num==null|| num=="")
{
alert("enter the number");
[Link]();
return false;
}
var num = [Link];
if(isNaN(num))
{
alert("it’s not a valid number");
[Link]();
return false;
}

//Validation for phone number

var ph=[Link];
if(ph==null||ph=="")
{
alert("enter the phone number");
[Link]();
return false;
}
if([Link]<10)
{
alert("phone number must have atleast 10 digits");
[Link]();
return false;
}
if(isNaN(ph))
{
alert("Invalid phone number");
[Link]();
return false;
}

//Validation for Time field

var txtTime= [Link];
if(txtTime == "")
{
110
 alert("Please enter the Time");
[Link]();
return false;
}
var pos=[Link](":");
if(pos<0)
{
alert("Invalid Time!colon(:) is missing between HH and MM");
[Link]();
return false;
}
if(pos>2 || pos<1)
{
alert("Invalid Time! Time format should be HH:MM AM/PM");
[Link]();
return false;
}
var hours= [Link](0,pos);
if(hours>12)
{
alert("Invalid Time! Hours cannot be greater than 12");
[Link]();
return false;
}
if(hours<=0)
{
alert("Invalid Time! Hours cannot be smallar than 0");
[Link]();
return false;
}
var min=[Link](pos+1, pos+3);
if(min>59)
{
alert("Invalid Time! Mins cannot be greater than 59");
[Link]();
return false;
}
if(min<0)
{
alert("Invalid Time! Mins cannot be smallar than 0");
[Link]();
return false;
}
var t1 = [Link](5,8);
if(t1!= "AM" && t1!= "am" && t1!="PM" && t1!= "pm")
{
alert("Invalid Time! time should be end with AM or PM");
[Link]();
return false;
111
 }

//Validation for CreditCard Number

var cardNum = [Link];
var cardType= [Link];
if (cardType=="sc")
{
alert ("Please select the card");
[Link]();
return false;
}
if (cardNum=="")
{
alert ("Enter your credit card number");
[Link]();
return false;
}
if (isNaN(cardNum))
{
alert ("it’s not an integer");
[Link]();
return false;
}
switch (cardType)
{
case"Master Card": var c = [Link](0,2);
if ([Link]!=16 ||c<51|| c>55)
{
alert ("Invalid Master card Number");
[Link]();
return false;
}
break;

case"Visa": var c = [Link] (0,1);

if ([Link]!=16 && [Link]!=13 ||c!=4)
{
alert ("Invalid visa Number");
[Link]();
return false;
}
break;

case"Amex": var c = [Link](0,2);

if([Link]!=15 || c<34 ||c>37)
{
alert("Invalid Amex Number");
[Link]();
return false;
112
 }
break;
}

//Validation for Zip Code

var zipCode = [Link];
var c= [Link](0,1);
if (zpCode=="")
{
alert ("Enter the six digit zip code number");
[Link]();
return false;
}
if (isNaN(zipCode))
{
alert ("zip code must be an integer value");
[Link]();
return false;
}
if ([Link]!=6)
{
alert ("zip code must be of six digits");
[Link]();
return false;
}
if(c==0 || c==9)
{
alert ("not a valid zip code");
[Link]();
return false;
}

return true;
}

</SCRIPT>
</HEAD>
<BODY>
<FORM action="[Link]" onsubmit="return validateReqFields(this)"
method="Post">
<table>
<tr>
<td>First Name:</td>
<td><input type= "text" name="fname"><font color='red'>*</font></td></tr>

<tr>
<td>Last Name: </td>
<td><input type= "text" name="lname"><font color='red'>*</font></td></tr>

113
<tr>
<td>User Name:</td>
<td><INPUT type="text" name="uname"><font color='red'>*</font></td></tr>

<tr>
<td>Password:</td>
<td><INPUT type="password" name="pw1"><font color='red'>*</font></td></tr>

<tr>
<td>Confirm-Password:</td>
<td><INPUT type="password" name="pw2"><font color='red'>*</font></td></tr>

<tr>
<td>Enter Emp Id:</td>
<td><INPUT type="text" name="num"><font color='red'>*</font></td></tr>

<tr>
<td>Phone Number:</td>
<td><input type="text" name="phnum"><font color='red'>*</font></td></tr>

<tr>
<td>Enter Time(HH:MM AM/PM):</td>
<td><input type="text" name="time"><font color='red'>*</font></td></tr>

<tr>
<td>Card Type :</td>
<td><SELECT name= "CType">
<OPTION value="sc" selected> Select Card
<OPTION value="Master Card">Master Card
<OPTION value="Visa">Visa
<OPTION value="Amex">American Express
</SELECT></td></tr>
<tr>
<td>Card Number :</td>
<td><INPUT type="text" name="CNum"></td></tr>
<tr>
<td><INPUT type="submit" value="submit"></td>
<td><INPUT type="reset" value="reset"></td></tr>
</table>
</FORM>
</BODY>
</HTML>
4. Developing a web page showing exception handling
[Link]
<HTML>
<HEAD>
<TITLE>Using try-catch statement</TITLE>
<SCRIPT type="text/javascript">
114
try
{
[Link](n);
[Link]("Hello World");
}
catch(err)
{
[Link]([Link]);
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

5. Developing a web page showing exception handling

[Link]
<HTML>
<HEAD>
<TITLE>Using finally block</TITLE>
<SCRIPT type="text/javascript">
try
{
[Link](n);
}
catch(err)
{
[Link]([Link]);
}
finally
{
[Link]("<BR/>");
[Link]("Hello World");
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

115
CSS (Cascading Style Sheet)

116
Cascading Style Sheet(CSS)
CSS is a text file with .css extension and is commonly used to define styles and layouts
of web pages written in HTML and XHTML. CSS simplifies the task of maintaining a web
document by separating its style information, such as font size, font color, line width,
and background color. This separation allows us to apply the same style rules to multiple
web pages CSS also allows us to apply a style multiple times in a single web page.
Suppose, we have a web page that contains multiple tables and we want to apply some
style on the table caption, table header, and table cells. To do this, we just need to write
the code once in a CSS style sheet and apply this style sheet to all the tables o our web
page. This reduces the complexity and redundancy of code in the web page and saves
our time, as we do not need to write the same code again and again. The styles in a CSS
file are defined according to the rules of the CSS recommendation that suggests how a
web page should be presented. The CSS file contains the style code for the structure,
such as headings, paragraphs, and links. The styles patterns and layouts defined in a
CSS file can be modified by making the required changes in the code of the CSS file. CSS
also provides a pattern that helps in applying the style rules on specific elements. This
pattern is known as a selector. Some of the most-commonly used CSS selectors are
universal, type and class.
History of CSS
CSS was introduces in late 1996 on the recommendation of World Wide Web Consortium
(W3C). Nine different style sheet languages were proposed to the W3C to control the
style of a web page. Out of the nine proposals, two languages –Cascading HTML Style
Sheets (CHSS) and Steam-based Style Sheet Proposals (SSP) – were selected to be
implemented. Unlike, CHSS, which could be applied only on HTML, CSS can also be
applied to other markup languages, such as XML and XHTML. The CSS level 1 (CSS 1)
Recommendation was published in December, 1996. The W3C group worked on the
issues that were not address in CSS 1. It gave rise to the creation of higher version of
CSS 1 namely CSS level 2 (CSS 2) on November 4, 1997. CSS 2 was published as a W3C
Recommendation on May 12, 1998. Some CSS 2 properties that could not be successfully
implemented by the Web browsers were discarded from CSS 2. Later, CSS 2.1 became a
Candidate Recommendation on February 25, 2004, but was pulled back to working Draft
status on June 13, 2005, and again returned to Candidate Recommendation status on
July 19, 2007.

Style sheet features:

I. Flexible placement of style information:
Placing style sheets separate files makes them easy to reuse.
It enables you to keep separate the instructions related to the presentation of Web
content from the Web content itself. For instance, you can specify an image on a web
page with the help of an HTML element, and specify the position of the image with the
help of CSS code. Sometimes it's useful to include rendering instructions within the
document to which they apply, either grouped at the start of the document, or in
attributes of the elements throughout the body of the document. To make it easier to
manage style on a site basis, this specification describes how to use HTTP headers to set
the style sheets to be applied to a document.

ii. Independence from specific style sheet languages

117
 This is the capability provided by some style sheet languages such as (CSS) to allow
style information from several sources to be blended together. These could be, for
instance, corporate style guidelines, styles common to a group of documents, and styles
specific to a single document. By storing these separately, style sheets can be reused;
simplifying authoring and making more effective use of network caching. The cascade
defines an ordered sequence of style sheets where rules in later sheets have greater
precedence than earlier ones.

Syntax of CSS
Syntax can be defined as a rule that defines the structure or the order of the statements
used in a programming language. It also specifies how words and symbols are put
together to form statements and expressions. CSS also uses syntax to apply CSS rules in
an HTML document. The CSS syntax is divided into two different parts such as
i. Selector: It defines an HTML element to which the CSS style is applied.
ii. Declaration: It contains the CSS properties as well as the value of these
properties.
Syntax of CSS document
Selector
{
1st property : value;
2nd property : value;
------

CSS Selectors: A selector is a pattern that is used to select an element to apply the
CSS style rules. Selectors can be used as a condition or a CSS rule to determine the
elements that match with the selector. The CSS rule is divided into two parts: selectors
and declaration. The declaration is a part that appears within the braces of the CSS rule
followed by the selector. The rules defined in the declaration part are applied to the
elements specified by the selector. The different types of selectors are as follows:
o Universal selector
o Type selector
o class selector
o id selector
o child selector
o descendant selector
o adjacent sibling selector
o attribute selector
o query selector
Universal Selector: The universal selector selects all the elements that are present in
an HTML document. We can use this selector to apply the same rule to all the elements
of an HTML or XHTML document. The universal selector is represented by an asterisk
symbol as shown below
*{
margin: 0;
padding: 0;
118
}
In the above code, the margin and padding properties are set to 0 for all the
elements in the HTML or XHTML document no which the CSS rules is applied.
Type Selector: The type selector matches all the elements specified in a list with the
given value to determine the elements to which the CSS rules are to be applied. The
rules applied to several elements of an HTML or XHTML document are similar to the ones
applied to a CSS file. In the below code type selector syntax:
h1,h2, h3,p {font-family; sans-serif}
In the above code, we have specified the font-family property for the different heading
elements (h1, h2, and h3) and for the paragraph element (p).
Class Selector: The class selector allows us to apply CSS rules to the elements that
carry a class attribute whose value matches with the class attribute specified in the class
selector. Let’s consider that we have an element H1, with a class attribute whose value
is intro, as shown below
<H1 class=”intro”>Header 1 </h1>
We can use the class selector in the following two ways:

 Applying the CSS rule to all the elements that have the class attribute of the same
value such as
.intro{font-family: sans-serif}
In the above code, a period is followed by a value. The value is
followed by braces, which embeds the CSS rule within it. The CSS rule is applied to
all the elements having the class attribute with intro as its value.
 Applying the CSS rule to the H1 elements, whose class attribute contains intro as
its value which is shown below
[Link] {font-family: sans-serif }
In the above code, an element name is followed by a value.
The value is followed by braces, which embeds the CSS rule within it. The CSS rule
is applied to all the H1 elements having the class attribute with intro as its value.
ID Selector: The value of id attribute is unique within a document; therefore, the
selector is applied only to the content of one element. Below code shows the h1 element
having myHeader as the value of the id attribute:
<H1 id=”myHeader”>Hello World!</H1>
In the above code, myHeader is the value of the id attribute. The CSS rule is applied to
the value of the id attribute.
Child Selector: The child selector matches the element that is an immediate child of
another element. In the child selector, greater than symbol (.) is used as the
combinatory, as shown below
TD>b{font-family: sans-serif }
A combinatory is a symbol, such as >, <, and + which shows the relationship between
two elements. In the above code, the B element is the immediate child of the TD
element. The CSS rule is applied to all the B elements that are immediate children of TD
elements.
Descendant Selector: The descendant selector matches an element that is a
descendant of another element. A descendant element is an element that is nested

119
inside another element. In case of the descendant selector, white space is used as the
combinatory, as shown below
table b{font-family: sans-serif}
In the above code, CSS is applied to all the b elements that are nested within the table
element.
Adjacent Sibling Selector: The adjacent sibling selector selects all the elements that
are adjacent siblings of a specified element. Sibling elements must have the same
parent element. The word adjacent means side-by-side, so no other element could exist
between the adjacent sibling elements. To use an adjacent sibling selector, the plus
symbol (+) is used as its combinatory, as shown below
H2+p{font-family: sans-serif}
Let’s applied the preceding code below to the following HTML code
<H2>Heading</H2>
<p>The selector above matches this paragraph. </p>
<p>The selector above does not matches this paragraph. </p>
In the above code, the first paragraph matches the adjacent sibling selector, H2+P,
because the P element is an adjacent sibling to the h2 element. The second paragraph
does not match with the selector. Although it is a sibling of the H2 element. It is not
adjacent to the element
Attribute Selector: This selector select elements on the basis of some specific
attributes or attribute values. List of some common types of attribute selectors:

Name Syntax Match Example

Hyphen [attribute|=value] Match if the [lang|=fr] {background-color:red; }
selector element has an
attribute with a
value followed
by a hyphen
Existence [attribute] Matches if the a[title]{
selector element has a color:green; }
specific
attribute
Equality [attribute=value] Matches if the a[href=[Link]
selector element has an {
attribute with a font-weight:bold;
specific value }
Space selector [attribute~=value] Matches if the a[title~=web]{
element has an background-color:red;
attribute with }
space
separated items
that match with
the value
Query Selector: The querySelector() and querySelectorAll() methods accept CSS
selectors as parameters and return the matching element node in the document tree.
The querySelector() method helps in querying the entire document or a specific element
of the document. We can use all the CSS selectors with this method as parameters. If
multiple elements are available, CSS selectors return the first matching element; or
returns null, I no element is available. The querySelectorAll() method returns all the
available elements as a single static collection of elements known as staticNodeList. This
120
collection of elements is not affected by any change made in the document tree, for
instance removing or inserting a node does not affect staticNodeList.

Inserting CSS in an HTML Document

We can use a CSS style sheet with an HTML document by learning how to link the CSS
code with the HTML document. A CSS style sheet can be linked to an HTML document in
a variety of ways, where each way has its own advantages and disadvantages. The three
ways are:
 The internal style sheet
 The external style sheet
 The in-line style

Internal Style Sheet: The internal style sheet is written within the HEAD element of the
HTML document. This style is applied only to the documents in which it is defined and
not referenced by any other web document. The syntax is given below

<STYLE type=”text/css”>
Selector {property: value; }
</Style>
The preceding syntax contains the starting and ending tags of the STYLE element. The
STYLE element contains a type attribute with value text/css. The opening and closing
tags of the STYLE element embeds the style declaration. The declaration consists of a
selector followed by curly braces. The curly braces hold a property followed by a colon,
which is further followed by a value, and finally that value is followed by a semicolon.
The following code shows a sample CSS document written using the internal style sheet:
<HEAD>
<STYLE type=”text/css”>
p { font-family:sans-serif; color:#c00; }
h1 { font-family: sans-serif; color: #f00; }
</STYLE>
</HEAD>
In the above code, the STYLE element is placed inside the HEAD element. The CSS
statements are written within the STYLE element. The two selectors are p and h1. The
properties of the P element are font-family and color. The value of font-family is sans-
serif and the value of the color is #c00. Similarly, the properties of H1 element are font-
family and color. The value of font-family s sans-serif and the value of color is #f00.

External Style Sheet:

The syntax to create an external style sheet is same as that of creating an internal style
sheet. In case of internal style sheet, the CSS file is placed inside the HTML document;
whereas, in case of external style sheet, the CSS file is written outside the HTML
document and the reference of the CSS file is placed in the HTML document. In an
external style sheet, the style sheet rules are saved into a text file with the .css
extension. Once we have a style sheet document, we can link it with our web pages in
the following two ways:

121
  Linking: Refers to the HTML LINK element, which is used to link a style sheet. This
element has three attributes – rel, type, and href. The rel attribute specifies what
we are linking (style sheet in this case). The type specifies the MIME type for the
browser, and the href attribute specifies the path of the .css file as shown below

<LINK rel=”style sheet” type=”text/css” href=”[Link]” />

In the above code, the value of the rel attribute is set to style sheet, value of the type
attribute is set to text/css, and that of the href attribute is set to [Link].
 Importing: It helps in accessing the style rules from other CSS style sheets. The
@import keyword is used, followed by the Uniform Resource Identifier (URI) of the
style sheet to which we want to import the style rules. The following code shows an
example of using the @import rule:
<STYLE TYPE=”text/css”>
@import url (“[Link]”)
H1 {color:blue}
</STYLE>
In the above code, we have used the @import keyword followed by the URL of the style
sheet, named [Link].
In addition to the @import rule, the @media rule of CSS helps us in applying the styles to
the media device depending on the type of the device a page is displaying. Some of the
media devices supported by the CSS are computer screens, printers, televisions,
handhelds, speech synthesizers, and projectors.
The following code shows an example of using the @media rule:
<STYLE TYPE=”text/css”>
@media screen
{
Body{ font-size: 13px }
}
</STYLE>
In the above code, we have defined the @media rule for the screen media type.
Inline Style: the inline style properties are written in a single line separated by
semicolons. These properties are placed inside the style attribute of the HTML element,
on which we want to apply the style:
<P style=”background:#ccc; color:#fff; border:solid black 1px;”>
This inline provides highest precedence over internal and external style sheets.

Inheritance in CSS: In CSS, a property that is applied to an element is also inherited by

the child elements o that element. For example, if the font-family property is declared for
the BODY element, it is automatically applied to all the elements present inside the
BODY element. This inheritance saves our time in writing the repeated code for every
single element that constitutes the web page. Following code shows inheritance in CSS:
<DIV style=”font-family:serif; border:1px solid red; padding:10px;”>

This text will be in a serif font.

<p>
This text is also in a serif font, because font is inherited by default. But the border and
padding properties are not inherited from the parent div.
</p>
122
</DIV>
In the above code, font-family is automatically inherited by the P element from the
parent DIV element. In this case, border and padding properties are not inherited from
the parent element.
In the below table list of properties that are inherited automatically in CSS are shown
Properties Description
border-collapse Represents the border display
border-spacing Represents the thickness of the border
caption-side Represents the place of the table caption
color Represents the color of a text
cursor Represents the cursor to be displayed
direction Represents the direction of a text
empty-cells Specifies whether to display the border and background on empty cells
font Specifies all the font properties
font-family Represents the font family for a text

123
1. Developing a web page where styles has been applied by
“[Link]” on [Link] file.
/* style sheet for [Link] document */
*{margin: 0;}
body
{
color:#ff0000;
background-color:#ffff00;
font-family: sans-serif;
}
h1{font-size:18pt}
p{font-size:12pt}
table
{
background-color:#efefef;
border-style:solid;
border-width:2px;
border-color:#999900;
}
th
{
background-color:#cccc00;
font-weight:bold;
padding:3px;
}
td{padding:3px}
[Link]
{
font-family: serif;
font-weight:bold;
}

[Link]
<HTML>
<HEAD>
<TITLE>CSS Example </TITLE>
<LINK rel="stylesheet" type="text/css" href="[Link]"/>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>
<TABLE>
<TR>
<TH>living being</TH>
<TH>shelter</TH>
124
 </TR>
<TR>
<TD class="code">Lion</TD>
<TD>Lion lives in the den</TD>
</TR>
<TR>
<TD class="code">Man</TD>
<TD>Man lives in house</TD>
</TR>
<TR>
<TD class="code">Fish</TD>
<TD>Fish lives in water</TD>
</TR>
<TR>
<TD class="code">Bird</TD>
<TD>Bird lives in nest</TD>
</TR>
</TABLE>
</BODY>
</HTML>

2. Developing a web page where styles has been applied within the
HTML document.
Internal_Inline.html
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Example </TITLE>
<STYLE>
*{margin: 0;}
body
{
color:Red;
background-color:lightgrey;
font-family: sans-serif;
}

h1{font-size:18pt}

p{font-size:12pt}

</STYLE>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>

<BR/>
<BR/>
125
 <H1 style="color:#ff0000;background-color:#ffff00;font-family: Ariel;">The
font size of this heading is 18pt</H1>
<P style="color:yellow; font-size:10pt">The font size of this paragraph is 12pt</P>
</BODY>
</HTML>

3. Developing a web page where querySelector() method has been

applied on the HTML document.

[Link]
<HEAD>
<TITLE> Working with querySelector </TITLE>
</HEAD>
<BODY>
<H1>Working with querySelector</H1>
<div id="div1" style="padding:50px; width:100px; height:100px; border:1px solid
black">
</div>
<P>Move the mouse cursor over the color name</P>
<LABEL id="label1" >Blue</LABEL>--
<LABEL id="label2" >Red</LABEL>--
<LABEL id="label3" >Yellow</LABEL>--
<INPUT id="text">
<script type="text/javascript">
if ([Link])
{
var lbl1=[Link]('#label1')
var lbl2=[Link]('#label2')
var lbl3=[Link]('#label3')

[Link]=function(){
[Link]('#text').value="This is Blue color";
[Link]('#text').[Link]="blue";
[Link]('#div1').[Link]="blue"
}
[Link]=function(){
[Link]('#text').value="This is Red color";
[Link]('#text').[Link]="red"
[Link]('#div1').[Link]="red"
}
[Link]=function(){
[Link]('#text').value="This is Yellow color";
[Link]('#text').[Link]="yellow"

[Link]('#div1').[Link]="yellow"
}
}
</script>
126
 </BODY>
</HTML>

4. Developing a web page where querySelectorAll() method has been

applied on the HTML document.
[Link]
<HEAD>
<TITLE>Working with the querySelectorAll</TITLE>
</HEAD>
<BODY>
<H1>Working with the querySelectorAll</H1>
<FORM id="myform">
<B>Select your favourite cars:</B> <BR/>
<INPUT name="cars" type="checkbox" value="Ferrari" />Ferrari
<BR/>
<INPUT name="cars" type="checkbox" value="Audi" />Audi <BR/>
<INPUT name="cars" type="checkbox" value="BMW" />BMW <BR/>
<INPUT name="cars" type="checkbox" value="Mercedez" />Mercedez<BR/>
<BR />
<INPUT type="submit" />
</FORM>

<SCRIPT type="text/javascript">
if ([Link]){
[Link]('#myform').onsubmit=function()
{
var checkcars=[Link]('input[name="cars"]:checked')
[Link]("<B>You have selected the following cars:
</B><BR/>")
for (var i=0; i<[Link]; i++){
var value=""
value += checkcars[i].value + "<BR/>"
[Link]("<LI>"+value+"</LI>")
}
return false
}
}
</SCRIPT>
</BODY>
</HTML>

5. Developing a web page where @import Rule has been applied on the
HTML document to import external style sheets in our HTML document.
[Link]
<HEAD>
<TITLE>CSS Example </TITLE>
<STYLE TYPE="text/css">
127
 @import url("[Link]");
P {color:blue}
</STYLE>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>
<TABLE>
<TR>
<TH>living being</TH>
<TH>shelter</TH>
</TR>
<TR>
<TD class="code">Lion</TD>
<TD>Lion lives in the den</TD>
</TR>
<TR>
<TD class="code">Man</TD>
<TD>Man lives in house</TD>
</TR>
<TR>
<TD class="code">Fish</TD>
<TD>Fish lives in water</TD>
</TR>
<TR>
<TD class="code">Bird</TD>
<TD>Bird lives in nest</TD>
</TR>
</TABLE>
</BODY>
</HTML>

128
Backgrounds and Color Gradients in CSS
A web developer always tries to create an impressive website. This is because, unless
the website looks appealing, a user is not attracted towards the content of the website.
To create attractive websites, web developers use background images and color
gradients. Prior to HTML 4, the background of a web page was set by using the bgcolor
attribute of the BODY element. However, from HTML4 onwards, the background is
controlled by using CSS. CSS not only helps in setting the background of an entire web
page, but also helps in adding different colors to the various elements of the web page.
For example, we can set the green color for the entire web page and display the content
of a paragraph in the orange base color. Therefore, by using different elements with
different background colors, we can easily highlight various areas of a web page, such as
paragraphs and headings.
The new version o CSS, CSS 3, allows us to set the color of a background on the basis of
various color specifications, such as Red Green Blue (RGB) and Hue Saturation Lightness
(HSL). It also enables us to set the transparency level of a color that has to be displayed
in the background of a website and specify how many times the image should be
repeated.
Exploring Background of a Web Page
Background of a web page is the area on which the content of the web page, such as
text, tables, border, and images, is displayed. A web page should have a background
that expresses the motto o the web page. For example, while constructing a web page
for an organization, the background can have logo that represents the organization.
Similarly, while creating a web page with text as main content, such as the web tutorials
or forms, it is important that background should have lighter color than the text written
on it to provide better readability. Similarly, while creating a web page for
entertainment, the background should preferably have vibrant color. CSS provides us
various properties to set the background of a web page. These are as follows:
o background-color
o background-image
o background-repeat
o background-attachment
o background-position
o background-clip
o background-origin
o background-size
o background-quantity
o background-spacing
o background

background-color property: This property is used to set the color of the background
area on which an element is displayed. It can be applied to almost any element. The
background-color property takes any of the following three values:
 Color name
 Hexadecimal equivalence of the color
 RGB color value

An example for using background-color property is given below

129
 H1 {background-color: #FFFFFF ;}
Apart from the preceding three values, the background-color property can also take two
more values. They are transparent and inherit. When the value is set to transparent, the
background color of the element becomes transparent to its parent element so that the
background color of the parent element is visible through it. It is important to note that
the element does not take or inherit the color of the parent element; it just becomes
transparent so that the background color of parent element is visible through it.
Transparent is a default value, that is, if no value is set for the background-color
property; it takes transparent as its default value. When we set the value of the
background-color property to inherit, it takes or inherits the color of its immediate parent
element.
background-image property: It is used to set an image in the background of an
element. It is similar to the background attribute of the body element of HTML 4.0. In
case of the background attribute, the image could only be set for the body element;
whereas, using the background-image property, we can virtually set background image
for all elements the background-image property is specified using two value either url, to
specify the image, or none, when no image is used.
Some examples of using the background-image property are given below
Body{background-image: url (“[Link]”);}
P{background-image: none;}
In the preceding code, an image, [Link], is specified for the BODY element and no
image is used for the P element of HTML. The [Link] image is located in the local
server. If the image is located in a different server, we have to provide the complete
path of the image in the url, as shown below:
Body {background-image: url([Link]
background-repeat Property: It allows us to tile the background images along x-axis
and y-axis of an element. This property is used along with the background-image
property only. The background-repeat property can take either of the following values:
repeat-x – Tiles an image horizontally
repeat-y – Tiles an image vertically
repeat – Tiles an image both horizontally and vertically
no-repeat – Does not tile an image
Following code shows how to use the background-repeat property:
<BODY style=”background: url(‘pic_2.gif’);background-repeat: repeat-y;”>
background-attachment property: It is used to fix or scroll the background image
along with the text and other content displayed on it. This property takes either of the
tow values: fixed or scroll. If the value is set to fixed, the background image does not
move with the text when the web page is scrolled. If the value is set to scroll, the
background image scrolls along with the text written over it. The default value of the
background-attachment property is scroll. The following code shows below as:
body {background-image:url (‘[Link]’); background-attachment: scroll;}
background-position property:It sets the position of a background image on a web
page. This property is used along with the background-image property. We can set
position of an image by performing the following tasks:

130
 Representing position in pixels, as shown
body{background-image: url(‘[Link]’; background-position: 220px
200px;}
Representing position in percentage, as shown below
body {background-image: rul(‘[Link]’); background-position: 50%
50%;}
Representing position by words, such as left, right, and center,for x-axis, and
top, down, and center for y-axis as shown below
body {background-image : url(‘[Link]’); background-position: left
bottom;}
background-clip property: It is newly introduced in CSS3 to determine whether the
background image extends into the border or no. It takes either the border-box or
padding-box value. When we use the border-box value, the background image extends
to the border. This is the default value of the background-clip property. The following
code shows the use of this property
<P style=”background-color: orange; border: 2em blue; border-style: dotted double;-
webkit-background-clip: border-box;” >
background-origin property: It uses to determine the starting position of the
background image in a box like shape. This property allows us to specify the starting
point o the position our background image. There are three values that can be specified
with the background-origin property. The three values are
 Padding-box: It specifies the position of the background image in relation to the
outer edge of the padding or inner edge of the border. This is the default value of
the background-origin property.
 border-box: Specifies the position of the background image in relation to the
outer edge of the border.
 Content-box; Specifies the position of the background image in relation to the
outer edge of the content or inner edge of the padding.
background-size property: It is used to specify the size of the image that is used as a
background for an element. We can specify the size by using any of the following value:
auto keyword: Sets the image to its original size such as
background-size: auto;

length parameter: Sets an image of specified size in terms of height and

width such as given below
background-size: 15px;
background-size: 15px 100px;
Percentage parameter: Sets the size of an image with respect to the
specified height and width of the area in which the image has to be
displayed such as
background-size: 50%
background-size: 50% auto;
background-quantity property: It is used to specify the number times to repeat an
image. It takes the following value:
 Infinite keyword: Repeats an image infinitely such as
background-quantity: infinite;

131
  Integer parameter: Repeats an image the specified number of times.
Background-quantity: 5;
background-spacing property: It is used to specify the distance between the images
that are repeated in the background of an element. It takes the value to specify the
horizontal and vertical space, related to the coordinates specified by the background-
position property.
<BODY style=”background-image: url(‘[Link]’); background-repeat: repeat-x;
background-spacing: 20px 50px; “>
background property: It is the short cut of specifying several background properties at
the same place in a style sheet. It can be used to specify the values for the background-
color, background-image, background-repeat, background-attachment, background-
position and background-size as shown below

body {background: green }

It specifies that a color is defined for background.
P {background:url(“[Link]”) blue 50% repeat fixed }
In the above code, it specifies that all properties are specified individually, which
includes an image, color, image size, image repetition and its attachment.

Exploring Color Properties

In the below table, the list shows the color names and their hexadecimal and RGB format
values:

Color Name Hexadecimal value RGB value

aliceblue #f0f8ff 240,248,255
antiqueqhite 3faebd7 250,235,215
aqua #00ffff 0,255,255
aquamarine #7fffd4 127,255,212
azure #f0ffff 240,255,255
beige #f5f5dc 245,245,220
bisque #ffe4c4 255,228,196
black #000000 0,0,0
blanchedalmond #ffebcd 255,25,205
blue #0000ff 0,0,255
blueviolet #8a2be2 138,43,226
brown #a52a2a 165,42,42
burlywood #deb887 222,184,135
cadetblue #5f9ea0 95,158,160
chartreuse #7fff00 127,255,0
chocolate #d2691e 210,105,30
coral #ff7f50 255,127,80
cornflowerblue #6495ed 100,149,237
cornsilk #fff8dc 255,248,220
crimson #dc143c 220,20,60
cyan #00ffff 0,255,255
and many more……

The RGB format uses three elementary colors, Red, Green, and Blue, to specify the color
of an element. CSS 3 adds a new level, Alpha (A), the level of opacity to this RGB format.
132
Therefore, a new color specification is formed, which is known as RGBA. CSS 3 also
introduces a new format of color specification i.e. HSL.
Opacity property
RGBA value format
HSL and HSLA value format
Opacity Property: It is used to produce transparency effect in an HTML element. When
we use the opacity property for an HTML element, it is also applied to its child element.
The syntax is
Opacity: [number between 0-1];
Using the preceding syntax, is we define the opacity of an element as 0.5, it means the
element will be 50% transparent. This property is supported by new versions of all major
browsers.
The following code shows the use of Opacity property such as
H1{background:#36; opacity:0.0;}
H2{background:#36; opacity:0.2;}
In the above code the opacity value 1.0 makes an element completely visible while 0.0
makes the element completely invisible.
RGBA Value Format: It takes 4 arguments, in which first three are same as in RGB
format, while the fourth argument is the alpha channel. This argument specifies the
transparency or opacity level of the specified color. It takes a number between 0 and 1
as a value. The main advantage using RGBA over the opacity property is that using
RGBA the transparency is not applied to child element such as given below in code
H1{background-color: rgba(153,134,117,0.0);}
H2{background-color: rgba(153,134,117,0.2);}
HSLand HSLA Values Format: The HSL color format takes three parameters, Hue,
Saturation, and Lightness. The Hue parameter specifies an angle of the color around the
circular wheel, for instance 0 0 (means red color), 600 (means yellow color), 1200 (means
green color) and 1800 (means cyan color). Hue values are either integer or floats in the
range 0-360 or integer or float percentage values in the range 0-100%.
Saturation represents the mixing of white color with a base color. For instance, 0%
means grayscale and 100% means full color. Lightness specifies the percentage of the
brightness of the base color, where 0% means dark, 50% means average and 100%
means light. The code such as
h1{background-color: hsl(320,100%,25%);}
h2{background-color: hsl(320,100%,50%);}
Exploring Gradient Properties: CSS3 enables us to set a gradient background for an
element. A gradient background is a variation of colors, which are arranged from lightest
to darkest or vise-versa. It can be used as the background for an entire web page or just
within table cells or div elements. CSS 3 provides us a variety of gradient options, in
which linear and radial gradients are popular ones. The linear gradient shows the color
combinations in lines format. The following code shows how to produce linear gradient
effects using CSS:
-webkit-linear-gradient(pos, #AAA B, #XXX Y);
In the above code, the –webkit are used to display linear gradient effects on the Chrome
browser. The description of parameters is as follows
pos – Specifies the position of the first color, which gives direction to the
gradient
#AAA – Specifies the primary color
133
 B – Specifies the percentage from where the fade begins
#XXX – Specifies the secondary color
Y – Specifies the percentage from where the fade begins
An example
P{
Height: 100px;
background: -mox-linear-gradient(top, #35425d 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, from (#35425d), to d
(#fff));
}

1. Developing a web page for setting background color in 3 ways

[Link]
<HTML>
<HEAD>
<TITLE>bgndcolor</TITLE>
</HEAD>
<BODY style="background-color:#ff0000;">
<H1 style="background-color:yellow;">
Heading
</H1>
<P style="background-color:rgb(175,0,0);">hello world </P>
</BODY>
</HTML>

2. Creating a web page to learn how to use the inherit and transparent values of the
background-color property.
[Link]
<HTML>
<TITLE>background</TITLE>
<HEAD>
<STYLE type="text/css">
.Orbit1 {
background-color: green;
color: white;
}
.Orbit2 {
background-color: transparent;
color: red;
}
.Orbit3 {
background-color: blue;
color: yellow;
}
.Tech1 {
background-color: inherit;
color: inherit;
font-weight: normal;
134
}
</STYLE>
</HEAD>
<BODY>
<DIV class="Orbit1">
<H1 class="Tech1">
Hello, world 1..... This is Heading 1 level
</H1>
</DIV>
<DIV class="Orbit3">
<H2 class="Tech1">
Hello, world 2..... This is Heading 2 level
</H2>
</DIV>
<DIV class="Orbit2">
<H3 class="Tect1">
Hello, world 3..... This is Heading 3 level
</H3>
</DIV>
</BODY>
</HTML>
3. Developing a web page to set a background an image
[Link]
<HTML>
<HEAD>
<TITLE>bgimage</TITLE>
<STYLE>
.Orbit1 {background-image: url(background_image.jpg); font-size: large; color:
black}
.Orbit2 {background-image: url([Link]); font-size: large;
color: white}
</STYLE>
</HEAD>
<BODY class="Orbit1">
<P class="Orbit2">
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
135
</P>
</BODY>
</HTML>

4. Developing a web page to repeat and specify a position for a background image
using background-repeat and background-position properties.
[Link]
<HTML>
<BODY style="background-image: url(photo_1.gif);background-repeat:
repeat-y;">
<P style="background-image: url([Link]);background-position:
top;background-repeat: no-repeat;">
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit
Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit
Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit
Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech
</P>
</BODY>
</HTML>

5. Developing a web page for either to fix a background image or to scroll the
background image along with the scrolling text using background-attachment property.

[Link]

<HTML>
<BODY>
<P style="background: red
url('top_bg.jpg');background-attachment:scroll;"> <HTML>
<BODY>
<P style="background: red url('top_bg.jpg');background-attachment:scroll;">Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech

136
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
</P></BODY>
</HTML>
</P></BODY>
</HTML>

6. Developing a web page for either to know whether the background image extends into
the border or not using background-clip property and background-position property to
know the starting position of the background in a box shape.

[Link]
<HTML>
<BODY>
<P style="color:white;border: 1em blue;border-style: dotted double;padding:
20px;background-color: orange;background: url('[Link]');
background-position:center left;
-webkit-background-clip:padding-box;
-webkit-background- origin:padding-box;">
Web Page Web Page Web Page Web Page Web Page Web Page Web
Page Web Page Web Page Web Page Web Page Web Page Web Page
Web Page Web Page Web Page Web Page Web Page Web Page Web
Page Web Page Web Page Web Page Web Page Web Page

137
</P>
</BODY>
</HTML>
7. Developing a web page to know different types of colors in a web page using
specifications such as RGB, RHBA, HSL, HSLA and OPACITY.
[Link]
h1 {
color: red;
background-color: rgb(60, 80, 100); }
h2 {
color: red;
background-color: rgb(125, 50, 200); }
h3 {
color: red;
background-color: rgb(60, 150, 50); }
[Link]
h1 {
color: red;
background-color: green; opacity:0.3; }
h2 {
color: red;
background-color: green; opacity:0.6; }
h3 {
color: red;
background-color: green; opacity:1.0; }
[Link]
<HTML>
<HEAD>
<TITLE>CSS Colors Web Page</TITLE>
<LINK rel="stylesheet" type="text/css" href="[Link]"/>
</HEAD>
<BODY>
<H1>Heading 1
</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
</BODY>
</HTML>
8. Developing a web page using Gradient property.
[Link]
body {
background: blue;
}
P{
height: 200px;

138
 background: -webkit-gradient(linear, left top, left bottom,
from(white), to(red));
}
[Link]
<HTML>
<HEAD>
<TITLE>CSS Colors Web Page</TITLE>
<LINK rel="stylesheet" type="text/css" href="[Link]"/>
</HEAD>
<BODY>
<P> CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE
CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS STYLE CSS
STYLE CSS STYLE CSS STYLE demo
</P>
</BODY>
</HTML>
Controlling the Display of an Element Using CSS
A web page contains different types of elements, such as paragraphs, headings, and
images. These elements must be properly placed and positioned on a web page to make
the web page properly formatted and readable. To position elements on a web page, we
can use CSS. CSS provides us various properties, such as position and float, to control
the placement and positioning of HTML elements. The position property sets the position
of the content to be displayed on the web page and the float property sets the position
of an element and the flow of the other elements on the web page.
Using CSS properties, we can also control the visibility of an element. For instance, we
can use the display property to display or hide an element or to display the content of
elements in a single line or in blocks. We can also set specific positions for an element or
overlap the elements using the position property. This property also allows us to fix the
position of an element with respect to the web page. This implies that when we scroll the
web page, the element will not move.
CSS allows us to control the display of an HTML element by using the “display” and
“visibility” properties. The display property specifies how to display an element, while
139
the visibility property specifies whether the element should be visible or hidden. The
below code shows the use of display property:
H1{display:none;}
The following code shows the code of visibility property:
P{visibility:visible;}
CSS also allows us to display the content o an HTML element as inline or in blocks. When
we display the content of an element as block, then it takes the full width of a web page
and is preceded and followed by a line break. Some example of block elements is H1, P,
and DIV. The following code shows how to define a block element:
p{display:block;}
The inline element, on the other hand, does not have any line break associated with it.
Some example of inline elements are SPAN and A. The following code shows how to
define an inline element:
a{display:inline;}

Let’s discuss about display property

The display property is used to display an element in a specified manner. It generates a particular type of box
for an element. This property takes different values, in which inline, block and none are the most common.
Different values of display property along with their usage are given below:
Value Description
none Does not display an element
block Generates a block box, which means a line break before and after an
element.
inline Generates an inline box, which means no line break before and after an
element. This is the default value.
inline-block Generates a block box, laid out as an inline box
list-item Generates an element as an item of a list element
table Generates table element width a line break before and after the element.
Value Description
table-caption Displays an element as a table caption
table-cell Displays an element as a table cell
table-column Displays an element as a table column
table-column-group Displays an element as a group of table columns.

Let’s discuss about visibility property

The visibility property specifies whether an element is visible on a web page or not. The values of visibility
property along with their usage are shown below:
Value Description
visible Makes an element visible
Hidden Hides an element
Collapse Represent a value that is applied only to a table element and removes its
rows and columns
Inherit Inherits the value of visibility property from the parent element

Positioning an Element: CSS provides a property known as position, which controls the
position of elements with respect to the normal flow of the content on a web page. We
can apply the position property on any HTML element such as P, DIV, TABLE, FORM, and
TEXTAREA. The syntax to use the position property is given as follows:
position: [value];
140
The position property takes the following values:
relative: Specifies relative position of an element with respect to the
normal flow the content.
absolute: Specifies the position of a block element with respect to the
normal flow of the content.
fixed: Fixes the position of an element with respect to the normal flow of
the content.
static: Specifies the normal position of an element
inherit: Specifies that an element uses the same settings o positions as of
its parent element
The following code shows how to use the position property:
P{position: fixed;}
CSS also provides some properties that specify the offset position of an element with
respect to the normal flow of the content of a web page. These properties are given as:
 top – Offsets an element in the top direction of a web page.
 bottom – Offsets an element in the bottom direction of a web page
 left – Offsets an element in the left direction of a web page
 right – Offsets an element in the right direction of a web page
The following code shows how to set the offset positions for an element:
p{
position: fixed; top: 10px; right: 5px;
}
In the above code, the offset position of the p element is top-right and the position is
fixed with respect to the normal flow of the web page content.

Let’s discuss more about positioning of an element in the following sections

 Fixed Position: The fixed value of the property is used to set the fixed position
for an element. It keeps an element fixed with respect to the remaining content of
the web page. An element assigned with fixed positioning does not change its
position when the web page is scrolled. This type of positioning is often used when
a fixed header or footer needs to be specified in each page of a web site
irrespective of the scrolling of the page. This is also used to create a frame whose
header and side bar are kept constant and the remaining content keeps changing
on scrolling. The following code shows how to fix the position of the P element:

<STYLE type=”text/csss”>
P{
Position: fixed;
bottom: 10px;
right: 5px;
}
</STYLE>
 Relative Position: The relative value of the position property is used to set the
relative position of an element with respect of the content of its parent element.
This type of positioning allows an element to retain natural formatting. Relative
positioning provides the following advantages:
i. Adjust the z-order coordinate relative to other elements that may

141
 occupy the same area.
Ii. Positions the child elements that are underlying or overlaying
the content of the parent element.
Iii. Moves or hides an element dynamically using a scripting
language.
Relative positioning defines a new coordinate system for child elements, with the origin
located at the position where the first child element is rendered. The following code
shows how to set relative position:
<STYLE type=”text/css”>
.pos_left{
position: relative;
left: -20px;
}
.pos_right{
position:relative;
left:20px;
}
</STYLE>

 Absolute Position: The absolute value of the position property is used to set
the absolute position of an element with respect to the content of its parent
element. An absolute positioned element and its parent element are placed
independently. The layout of each absolutely positioned element is independent of
other elements. By default, an absolutely positioned element is placed just above
(in z-space coordinate) its parent element. The following code shows how to set
absolute position:
<STYLE type=”text/css”>
.absolute{
position: absolute;
left: 100px;
top: 150px;
}
</STYLE>
Using CSS, we can also overlap the content of two elements. To overlap two
elements, we should specify the position of one element as absolute. CSS provides
the z-index property to overlap the content of two elements. This property specifies a
stack order that positions one element over another. The following code shows
overlaps the content o the P element over the content of the parent element:
 <STYLE type=”text/css”>
p{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</STYLE>
Floating an Element Using CSS : Sometimes we need to use the text wrap feature
in a document to properly arrange the position of images with respect to their
142
description. For instance, we need to set an image as floated to right side and rest of the
content in the left side. CSS allows us to implement the text wrap feature in a web page
by using the floating property. This property makes an HTML element as a floated
element and defines the side where other elements are displayed, the syntax is:
float: [value];
The float property supports the following values:
left – Floats an element to the left with respect to the content
right – Floats an element to the right with respect to the content
none—Does not float an element
inherit – Floats an element using the same float setting as specified for its
parent element.
The following code floats an image in the right side:
<P>
<IMG src=”[Link]” alt=”image” style=”float: right; “ />
The text is in left direction
</P>
1. Developing a web page to understand the working of display property.
[Link]
<HTML>
<HEAD>
<TITLE>display</TITLE>
<STYLE type="text/css">
p{
display:inline;
}

span{
display:block;
}

h1{
display:none;
}
</STYLE>
</HEAD>
<BODY>
<H2>Hello all</H2>
<P>This is </P>
<P>my paragraph</P>
<H2>Hello all</H2>
<SPAN>This is </SPAN>
<SPAN>my paragraph</SPAN>
<H1>Hello World</H1>
</BODY>
</HTML>

2. Developing a web page to control the display of elements using JavaScript.

143
Display_Js.html
<HTML>
<HEAD>
<TITLE>display</TITLE>
<STYLE type="text/css">
p{
display:inline;
}
</STYLE>
</HEAD>
<BODY>
<H1> Changing the display Property Using JavaScript</H1>
<H2>Hello all</H2>
<P Id="display">Changing the display</P>
<P Id="display">property of my paragraph</P>
<BR/><BR/>
<INPUT Type="button"
onclick="[Link]('display').[Link]='block';
" value="display:block">
<INPUT Type="button"
onclick="[Link]('display').[Link]='inline';
" value="display:inline">
</BODY>
</HTML>

3. Developing a web page to apply the visibility property decides whether the
element should be visible or hidden.
[Link]
<HTML>
<HEAD>
<TITLE>visibility</TITLE>
<STYLE>
.visible {
visibility: visible;
}
.hidden {
visibility: hidden;
}
</STYLE>
</HEAD>
<BODY>
<H1> Working with visibility Property </H1>
<P class="hidden">My paragraph is hidden</P>
<P class="visible">My paragraph is visible</P>
The first paragraph is hidden and the second paragraph is visible
</BODY>
</HTML>

144
 4. Developing a web page to hide elements using the visibility and display properties.
[Link]
<HTML>
<HEAD>
<TITLE>display and visibility</TITLE>
<STYLE type="text/css">
h2{
display:none;
}
h3{
visibility:hidden;
}
</STYLE>
</HEAD>
<BODY>
<H1>Hiding Elements using display and visibility

Properties</H1>
<P>my paragraph 1</P>
<H2>Hello World</H2>
<P>my paragraph 2</P>
<H3>Hello world</H3>
<P>my paragraph 3</P>
</BODY>
</HTML>

5. Developing a web page to understand how to fix the position o an element. Here,
we are fixing an image
[Link]
<HTML>
<HEAD>
<TITLE>fixedposition</TITLE>
<STYLE type="text/css">
.pos_fixed{
position:fixed;
bottom:10px;
right:5px;
}
</STYLE>
</HEAD>
<BODY>
<H1> Fixing the Position of the content </H1>
<A href="[Link]">
<IMG class="pos_fixed" src="[Link]" style="height:60px;width:120" /></A>
<P> In this Web page, we have fixed the position of the feedback image to
the bottom right corner of the Page. The image remain fixed at this position even if you
scroll the page.</P>
<IMG src="[Link]" />
145
 <P> We are at the bottom of the Web page and the image, showing an
arrow, displays at the same position of the page.</P>
<BR/><BR/>
</BODY>
</HTML>
6. Developing a web page to set the position of an element as relative.
[Link]
<HTML>
<HEAD>
<TITLE>relative</TITLE>
<STYLE type="text/css">
.pos_left{
position:relative;
left:-20px;
}

.pos_right{
position:relative;
left:20px;
}
</STYLE>
</HEAD>
<BODY>
<H1>Showing Relative Position of the Text </H1>
<P>Normal positioning</P>
<P class="pos_left">paragraph is moved 20 px left w.r.t. the normal
positioning</p>
<P class="pos_right">paragraph is moved 20 px right w.r.t. the normal
positioning</P>
</BODY>
</HTML>
7. Developing a web page to set the position of the element as absolute using
absolute property.
[Link]
<HTML>
<HEAD>
<TITLE>Absolute Positioning</TITLE>
<STYLE type="text/css">
.absolute{
position:absolute;
left:100px;
top:150px;
}
.absolute2{
position:absolute;
left:10px;
146
 top:50px;
}
</STYLE>
</HEAD>

<BODY>
<H1 class="absolute">This is a heading with an absolute position</h1>
<IMG class="absolute2"
style="height:100px;width:100px;" src="[Link]" />
<P>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
This is my paragraph<BR/>
</P>
</BODY>
</HTML>

8. Developing a web page for overlapping elements and to understand how to the
elements are overlapped.
[Link]
<HTML>
<HEAD>
<TITLE>overlapping</TITLE>
<STYLE type="text/css">
p{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</STYLE>
</HEAD>

<BODY>

147
 <H1 style="color:red";>This is a heading</H1>
<P>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
My paragraph<BR/>
</P>
<H2 style="color:red";>Because the paragraph has a z-index of -1, it will be
placed behind the text.</H2>
</BODY>
</HTML>

9. Developing a web page to position an element to the right of the web page .
[Link]
<HTML>
<HEAD>
<TITLE>float to the right</TITLE>
<STYLE type="text/css">
.orbit{
float:right;
}
</STYLE>
</HEAD>
<BODY>
<H1>Floating an Element to Right </H1>
<P>
<IMG class="orbit" src="[Link]" />
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
148
 </P>
</BODY>
</HTML>

10. Developing a web page to position an element to the left of the web page.
[Link]
<HTML>
<HEAD>
<TITLE>float to left</TITLE>
<STYLE type="text/css">
.orbit1{
float:left;
}
</STYLE>
</HEAD>
<BODY>
<P>
<H1>Floating an Element to Left </H1>
<IMG class="orbit1" src="[Link]" />
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.

</P>
</BODY>
</HTML>

11. Developing a web page to turn off the effect of a floated element by using the
“clear” property of CSS.
[Link]
<HTML>
<HEAD>
<TITLE>clear</TITLE>
<STYLE type="text/css">
.off{
clear:both;
}
</STYLE>
</HEAD>

149
 <BODY>
<H1>Turning off Floating of the Element </H1>
<P>
<IMG class="off" src="[Link]" />
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
</P>
</BODY>
</HTML>

11. Developing a web page to control of float and clear properties by using Javascript.
Right_Left.html

<HTML>
<HEAD>
<TITLE>float</TITLE>
<STYLE type="text/css">
.float{
clear:both;
}
</STYLE>
</HEAD>
<BODY>
<H1>Floating an Element Using JavaScript </H1>
<P>
<IMG id="float" src="[Link]" />
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
My paragraph. My paragraph. My paragraph. My paragraph.
</P>
<INPUT type="button" onclick="[Link]('float').[Link]='left'"
value=" Float Left">
<INPUT type="button" onclick="[Link]('float').[Link]='ri
ght'" value="Float Right">
150
 </BODY>
</HTML>

Applying CSS Styles on List Elements

A list is a series of items belonging o a specific category, such as colors, vehicles, and
countries. Depending open the order in which the items of a list are arranged, the list
can be categorized as unordered or ordered. The items in an ordered list are arranged in
a sequential or logical order; that is why, this list is also called a sequential list. On the
other hand, there is no specific sequence or order to place items in an unordered list. In
HTML, ordered lists are marked with numbers or letters; whereas, unordered lists are
marked which with different types of images or bullets. All these symbols, numbers, and
letters with which the items o a list are marked are known as list item markers. HTML
also provides CSS that allows us to set various list-style properties to define the style of
the list item markers for both ordered and unordered lists. These list style properties are
list-style-type, list-style-image, and list-style-position.
The list-style-type Property
This property allows you to use symbols as list item markers for the items of an HTML
list. It is used to modify the default appearance of list-markers in HTML list structures.
The following is the syntax of to use the list-style-type property:
List-style-type: <glyph> | <algorithm> | <symbolic>
In the above code, <glyph> includes that insert their corresponding symbols for an
unordered list. For example, is we mention the circle value in <glyph>, a circle-shaped
bullet gets inserted in the list. The parameters of <glyph> are:
 None: Does not specify a marker for a list item
 Disc – Specifies a filled circle as a marker for a list item
 Circle – Specifies a hollow circle as a market or a list item
 Square – Specifies a square as a marker for a list item
The following code specify how to specify glyph values:
ul.l1{list-style-type: circle;}
ul.l2{list-style-type: square;}
In the above code, the circle-shaped bullet is assigned to unordered list 1 and the
square-shaped bullet is assigned to unordered list 2.

The <algorithm> -- Includes values that display their corresponding symbols for an
ordered list. The parameter uses the following values:
 armenian – Specifies that a marker is displayed as the traditional Armenian
number.
 decimal – Specifies that a marker is displayed as a decimal number.
 Decimal-leading-zero – Specifies that a marker is displayed as a number padded
by initial zeros, such as 01, 02 and 03.

The <symbolic> -- Includes the values, asterisks and footnotes, where asterisks show
the symbols in an increasing order (*, **, ***) and footnotes show the (*,ú, etc) symbols.

The list-style-image property

151
In CSS, we can also use an image as a list item marker. The image used as a list item
marker should be smaller in size than the size of the list item. We can use an image as a
list item marker for both ordered and unordered lists. To display an image as a list item
marker, we need to use the list-style-image property. We need to give the URL of the
image that we want to use as a list item marker in the list-style-image property. The
syntax to declare the list-style-image property is given below:
list-style-image: <url> | none;
In the above code, <url> indicates the URL source for the list-marker graphics; whereas,
none specifies that no list-marker is used for the list item.

An example to define the an image as a list item marker for an unordered list is given as
follows:
ul{list-style-image: url(“[Link]”);}
In the above code, the [Link] image is assigned as a list marker of an unordered list.

The list-style-position Property

This property is used to specify the position of a list item marker in a list. This property
takes any of the two values, inside or outside. The inside value indents the marker in
the inside direction with context to the other elements of the HTML document. The
outside value, on the other hand, displays the marker to the outside or left of the list
item. The default value of the list-style-position property is outside.
The syntax of this property is as follows:
list-style-position: inside | outside;
An example code of this property is given below:
Ul {list-style-position: inside}
In the above code, the position of the list of an unordered list is set to the inside
direction.

The list-style shorthand Property

This property it used to modify the default display chjaracteristics of list-markers in HTML
list structures. It is used to provide the values for the list-style-type, list-style-image and
list-style-position properties. The following code shows an example of using the property:
ull{list-style: outside url([Link] }
In the above code, the list style of an unordered list contains an image at the outside
direction of the content of the HTML document.

1. Developing a web to show the ordered and unordered list item marker by using the
list-style-type property.
[Link]
<HTML>
<HEAD>
<STYLE type="text/css">
ul.d {list-style-type:square;}
ol.u {list-style-type:upper-roman;}
</STYLE>
</HEAD>
<BODY>
<P>Unordered list item marker :</P>
152
<UL class="d">
<LI>item1</LI>
<LI>item2</LI>
<LI>item3</LI>
</UL>
<P>Ordered list item marker:</P>

<OL class="u">
<LI>item1</LI>
<LI>item2</LI>
<LI>item3</LI>
</OL>
</BODY>
</HTML>

2. Developing a web to display an image as a list item marker by using the list-style-
image property.
[Link]
<HTML>
<HEAD>
<STYLE type="text/css">
body{background-color: aquamarine}
ul
{
list-style-image: url('orange_bullet.gif');
}
h3{color: blueviolet}
</STYLE>
</HEAD>
<BODY>
<H3>Furniture list</H3>
<UL>
<LI>Chair</LI>
<LI>Table</LI>
<LI>Dining table</LI>
<LI>Dressing table</LI>
<LI>Bed</LI>
<LI>Sofa set</LI>
</UL>
</BODY>
</HTML>

3. Developing a web to position the list item marker by using the list-style-position
property.
[Link]
<HTML>
<HEAD>
<STYLE type="text/css">
153
[Link] {list-style-position:inside;border:5px dashed red;}
[Link] {list-style-position:outside;border:5px dashed red;}
</STYLE>
</HEAD>
<BODY>
<P>The list items with position value inside:</P>
<UL class="in">
<LI>item 1</LI>
<LI>item 2</LI>
<LI>item 3</LI>
</UL>
<P>The list items with position value outside:</P>
<UL class="out">
<LI>item 1</LI>
<LI>item 2</LI>
<LI>item 3</LI>
</UL>
</BODY>
</HTML>

4. Developing a web to define the shortcuts to set various list-style properties by

using the list-style shorthand property.
[Link]
<HTML>
<HEAD>
<STYLE type="text/css">

ul.u1{background-color:greenyellow;list-style:url('orange_

[Link]');}
li.l1{list-style:lower-greek;}
</STyLE>
</HEAD>
<BODY>
<ul class="u1">
<li>Milk
<ul>
<li class="l1">Goat</li>
<li class="l1">Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li class="l1">Free-range</li>
<li class="l1">Other</li>
</ul>
</li>
<li>Cheese
<ul>
154
 <li class="l1">Smelly</li>
<li class="l1">Extra smelly</li>
</ul>
</li>
</ul>
</BODY>
</HTML>

5. Developing a web to create a horizontal list by using the list-style-type property.

[Link]
<HTML>
<HEAD>
<STYLE type="text/css">
ul{color:red;
margin: 0;
padding: 0;
list-style-type: none;}
ul li { display: inline; }
body{background-color:lightseagreen;}
</STYLE>
</HEAD>
<BODY>
<IMG src="[Link]">
<UL>
<LI><A href="#">Milk</A></LI>
<LI><A href="#">Eggs</A></LI>
<LI><A href="#">Cheese</A></LI>
<LI><A href="#">Vegetables</A></LI>
<LI><A href="#">Fruit</A></LI>
</UL>
</BODY>
</HTML>

Table Layout in HTML using CSS Styles

In earlier chapters we already learned how create “TABLES” in HTML with rows and
columns. But some times we require presenting a table in different layouts and formats
to make it more attractive or visually appealing on a web page. We can customize the
appearance and layout of a table using CSS in HTML. The various table properties of CSS,
155
which include table-layout, caption-side, border-collapse, border-spacing and
empty-cells.
Table-layout Property
The table layout property specifies the way in which a table should be displayed in a web
browser. In CSS, the table-layout property allows flexibility in positioning the tables,
which means that we can easily move and place tables at different locations throughout
the web page. Using the table layout property we can also decreases the loading time of
the table, allowing the main content to appear before the graphics. The values of table-
layout property are:

Value Description
auto Refers to the layout in which a web browser automatically resizes a table according
to its content. This is the default value of the table-layout property. In auto layout,
the web browser reads all the content of a table before determining the final layout
and sets the column width according to the width occupied by the content in the
cells.
fixed Refers to the layout in which a web browser does not resize a table according to the
width occupied by its content. In the fixed layout, a web browser reads only the first
row of a table to determine the final layout of the table.
Following is the example code of specifying the table-layout property in a table:
table{
table-layout: auto;
}
In the preceding code, the value of the table-layout property has been set to auto. This
implies that table cells would automatically be resized according to the amount of
content placed in them.
Caption-side Property
This property is used to specify the position of a table caption. A table caption is a short
description that is provided with a table, specifying its number, the number of the
chapter it belongs to, and the information that is imparting. We can use the caption-side
property to display the table caption on the top as well as at the bottom of the table.
Values of this property are listed in the below table:
Value Description
top Defines a caption on the top of a table
bottom Defines a caption at the bottom of the table
inherit Specifies that the value of the caption-side property is inherited from its
containing element.
Following is the syntax of this property:
table{
table-side: bottom;
}
In the above syntax, the value of the caption-side property is bottom, indicating that the
table caption appears below the table.

border-collapse Property
It allows us to define a way in which a border should be displayed around a table cell. To display the border of
our table in different styles, we need to set the appropriate values of the border-collapse property. The values of
this property are listed below:
156
Value Description
collapse Sets a common border to all the cells of a table
Separate Sets a separate border for each cell of a table
inherit Inherits the value of the border-collapse property from the parent element
The syntax of this property is given below:
table{
border-collapse: separate;
}
In the above code, the valueof the border-collapse property is set to separate. This
allows us to set different border for all the cells of a table.

border-spacing Property
It allows us to specify the amount of space between the borders of adjacent table cells. The amount of space
between the borders of a adjacent cells is also known as border space. Below table shows the values for this
property:
Value Description
Length Specifies the horizontal and vertical spacing between borders. If two length values
are provided to this property, the first value sets the horizontal spacing and the
second value sets the vertical spacing.
inherit Specifies that the value of the border-spacing property shoule be inherited from the
parent element.
Syntax of this property is given below:
border-spacing:10px 50px;
In the above code, the border-spacing property takes two values, 10 pixels and 50
pixels. The first value specifies the horizontal spacing and the second value specifies the
vertical spacing.

empty-cells Property
A cell hat does not contain any content is known as an empty cell. The empty-cells property is used to define
the border of an empty cell. The value of this property is:
Value Description
show Displays a border around an empty cell
hide Hides the border of an empty cell
Inherit Specifies that the value of this property of an element should inherit the value
same property from its parent element.
The syntax for this property is given below:
table{empty-cells: show;
In the above code, the value of this property is set to show. This indicates that the
border is displayed around the empty cells.

1. Developing a web page to determines how a table is rendered in a web page by

using table-layout property. Here we are displaying automatic table layout.
[Link]
<HTML>
<HEAD>
<TITLE>Auto Table Layout</TITLE>
<STYLE type='text/css'>
table,td{

157
 border: 1px solid black;
}
.alayout{
table-layout:auto;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Auto Table Layout </H1>
<TABLE class="alayout">
<TR>
<TD class="a1">Column 1</TD>
<TD class="a2">Column 2</TD>
<TD class="a3">Column 3</TD>
</TR>
</TR>
<TR>
<TD>auto auto auto auto auto auto auto
auto auto auto auto auto auto</TD>
<TD>auto auto auto auto auto auto auto auto auto</TD>
<TD>auto auto auto</TD>
</TR>
</TABLE>
</BODY>
</HTML>

2. Developing a web page to set the fixed layout for a table.

[Link]
<HTML>
<HEAD>
<TITLE>Fixed Table Layout</TITLE>
<STYLE type='text/css'>
table,td{
border: 1px solid black;
}
.flayout{
table-layout:fixed;
}
.f1{
width:200px;
}
.f2{
width:50px;
}
.f3{
width:400px;
}
158
 </STYLE>
</HEAD>
<BODY>
<H1>Working with Fixed Table Layout </H1>
<TABLE class="flayout">
<TR>
<TD class="f1">Column 1</TD>
<TD class="f2">Column 2</TD>
<TD class="f3">Column 3</TD>
</TR>
<TR>
<TD>This column is 200px wide. </TD>
<TD>This column is 50px wide.</TD>
<TD>This column is 400px wide.</TD>
</TR>
</TABLE>
</BODY>
</HTML>

3. Developing a web page to specify the position of the caption of a table using
caption-side Property.
[Link]
<HTML>
<HEAD>
<TITLE>Table Caption </TITLE>
<STYLE type="text/css">
table,td,th {
border:1px solid black;
}
caption {
caption-side:top;
border:2px solid black;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Table Caption. </H1>
<TABLE>
<CAPTION>Table 1.1: Showing Values of the caption-side Property</CAPTION>
<TR>
<TH>Value</TH>
<TH>Description</TH>
</TR>
<TR>
<TD>top</TD>
<TD>Defines a caption on the top of a table</TD>
</TR>
<TR>
159
 <TD>inherit</TD>
<TD>Specifies that the value of caption-side property is inherited from its containing
element</TD>
</TR>
<TR>
<TD>bottom</TD>
<TD>Defines a caption on the bottom of a table</TD>
</TR>
</TABLE>
</BODY>
</HTML>

4. Developing a web page to set the style of the borders of table cells.
[Link]
<HTML>
<HEAD>
<TITLE>Border Collapse</TITLE>
<STYLE type="text/css">
.collapse{
border-collapse: collapse;
}
.separate{
border-collapse:separate;
}

table, td, th{

border:1px solid black;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with border-collapse Property</H1>
<P>The border-collapse property value is collapse</P>
<TABLE class="collapse">
<TR>
<TH>Name</TH>
<TH>Age</TH>
</TR>
<TR>
<TD>Name1</TD>
<TD>Age1</TD>
</TR>
<TR>
<TD>Name2</TD>
<TD>Age2</TD>
</TR>
<TR>
<TD>Name3</TD>
<TD>Age3</TD>
160
 </TR>
</TABLE>

<BR/><BR/>
<P>The border-collapse property value is separate</P>
<TABLE class="separate">
<TR>
<TH>Name</TH>
<TH>Age</TH>
</TR>
<TR>
<TD>Name1</TD>
<TD>Age1</TD>
</TR>
<TR>
<TD>Name2</TD>
<TD>Age2</TD>
</TR>
<TR>
<TD>Name3</TD>
<TD>Age3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

5. Developing a web page to specify border spacing in a table using border-spacing

property in HTML.
[Link]
<HTML>
<HEAD>
<STYLE type="text/css">
.table1{
border-collapse:separate;
border-spacing:10px;
}

table, td, th{

border:1px solid black;
}

.table2{
border-collapse: separate;
border-spacing:10px 50px;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with the border-spacing Property</H1>
161
 <TABLE class="table1" border="1">
<TR>
<TD>name1</TD>
<TD>age1</TD>
</TR>
<TR>
<TD>name2</TD>
<TD>age2</TD>
</TR>
</TABLE>
<BR />
<TABLE class="table2" border="1">
<TR>
<TD>name3</TD>
<TD>age3</TD>
</TR>
<TR>
<TD>name4</TD>
<TD>age4</TD>
</TR>
</TABLE>
</BODY>
</HTML>

6. Developing a web page to specify empty spacing in a table using empty-spacing

property in HTML.
[Link]
<HTML>
<HEAD>
<TITLE>Empty Cells </TITLE>
<STYLE type="text/css">
table{
table-layout:fixed;
border-collapse:separate;
empty-cells:hide;
}

table, td, th{

border:1px solid black;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with empty-border Property </H1>
<TABLE >
<TR>
<TH>Name</TH>
<TH>Age</TH>
<TH>Address</TH>
162
 </TR>
<TR>
<TD>name1</TD>
<TD>age1</TD>
<TD>address1</TD>
</TR>
<TR>
<TD>name2</TD>
<TD></TD>
<TD>address2</TD>
</TR>
<TR>
<TD>name3</TD>
<TD>age3</TD>
<TD>address3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

7. Developing a web page to apply rounded corners to a table cells using border-
radius property in HTML.
[Link]
<HTML>
<HEAD>
<TITLE>Applying Rounded Corners</TITLE>
<STYLE>
body {
padding:10px 50px;
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

td {
border-radius:50px;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

163
 img{
border-radius:50px;
height:100px;
width:100px;
}
table{
border:1px solid #000;
border-radius:50px;
background:gray
}

</STYLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>Table 1: Displaying images in the table </CAPTION>
<TR>
<TD>Desert</TD>
<TD><IMG src="[Link]"></TD>
</TR>
<TR>
<TD>Jelly Fish<T/D>
<TD><IMG src="[Link]"></TD>
</TR>
<TR>
<TD>Koala</TD>
<TD><IMG src="[Link]"></TD>
</TR>
<TR>
<TD>Tulips</TD>
<TD><IMG src="[Link]"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

164
Applying Effects HTML Elements
CSS properties provide us with various functionalities to make our web page more
dynamic and attractive. Some of these functionalities are applying effects, creating
frames, and customizing the appearance of controls on a web page. Effects are optical
illusions created by animating images and elements in a web page. These effects can be
made to appear in a web page on various events, such as mouse hover and mouse click.
For instance, we can set the transition effect to appear between two images when a
mouse is clicked.
CSS also allows you to display the content of our web page in frames, which are
independent from the other sections of the web page. This implies that frames allow you
to place different types of content, exhibiting different functionalities, on a single web
page. For instance, an online library site can allow you to select a book in the left frame of
the browser window and displays its Table of Content (ToC) in the right frame of the
window. We can also customize the appearance of controls of our web page by using CSS
properties.
One of the main advantages of using CSS to apply styles on a web page is that it allows us
to apply a style multiple times without repeating the code. This reduces the complexity
and redundancy of code in a web page and saves our time, as we do not need to write the
same code again and again.
Different Types of Effects in CSS
Effects are the results of actions that are carried out to change the look and feel of HTML
elements. CSS allows us to apply different types of effects on different types of HTML

165
controls, such as buttons, menus, images, and tables. The following are the types of
effects that can be applied on a web page:
 Opacity effects – Modify the opacity of an HTML element. For instance, using these
effects we can make an element transparent so that any other element or
background behind that element gets visible. Using these effects, we can change
the opacity of almost every element of an HTML document, such as buttons, text, or
images. The following code shows an example of using the opacity property:
img{
j opacity:0.6;
}
In the above code, we have set the opacity of the IMG element to
0.6, i.e. 60%. It means that the element gets transparent by 60%.

 Transition effects – Change the states of an element. Transition is a process of

passing an act from one state to another. Generally, whenever the value of a CSS
property changes, the result ins instantly rendered on a web page. However, when
we apply transition effect on an element, it slowly transits from its old state to new.
The Transition properties are as follows:
I. transition-property—Specifies the property to which we apply the
transition
II. transition-duration – Specifies the time duration or the length of a transition
III. transition-delay – Delays the transition
IV. transition-timing-function – Changes the speed of transitioning images
The following code is an example of using transition properties:
DIV
{
transition-property: opacity;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
In the above code, we have applied the transition effect on the opacity property of the
DIV element and set the time limit for transition to 2 seconds. The degree of
smoothness of the transition effect is defined by the ease-in-out property.

 Transformation effects – Change the position or direction of the content of our

web page CSS allows us to apply this effect to the web content with the help of the
transform property. Transformation is a process of changing the position, size, , or
style of an object. CSS provides the transform property to apply the transformation
effect on the HTML elements. The possible values of the transform property are
listed as follows:
I. transform – Specifies the transform function to apply it on an element. The
possible values of this property are matrix, rotate, scale, scaleX, scaleY,
skew, skewX, skewY, translate, translateX and translateY.
II. Transform-origin – Specifies the origin o the transformation for an element.
The possible values of this property are left, right, center, bottom, top and
50% 50%.
III. transform-style – Specifies whether the transformation apply in 2D or 3D
on an element. The possible values of this property are flat and
perspective-3D
166
 IV. perspective -- Shows an element from different angles and perspectives.

The following code shows an example of using the transformation properties:

P{
-webkit-transform: rotate(45deg);
-webkit-perspective: 1200px;
-webkit-perspective-origin: right;
}
In the above code,we have defined the transform perperty to rotate the paragraph
element. The perspective property has been set to 1200px and the perspective-origin
property to right, which enable us to view the element at 1200 points from its right side.

 Animation effects – Animation is a process of creating the illusion of motion by

placing still images one after another in a typical order. For instance, a ball can be
made to appear rising from the ground by placing its pictures showing different
positions in succession. Refer to optical illusions, which are created by animating
images and elements in a web page. CSS provides the following properties to enable
you to animate different elements of a web page:
I. animation-name—Specifies the name of the animation that is to be applied on
an element
II. animation-duration – Specifies the time duration an animation takes to
complete one cycle.
III. Animation-timing-function – Specifies the progress o an animation
IV. Animation-iteration-count – Specifies the number of animation cycles
V. animation-direction – Specifies whether the animation is played in reverse of
alternate direction.
VI. Animation-delay – Specifies a time period after which an animation starts.
The following code shows an example of using the animation:
Img
{
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease;
}
In the above code, we have applied the resize animation effect and set the animation
duration to 1 second. The iteration count is set to infinite, which means that the
animation cycle is repeated infinite times.

Creating Frames Using CSS

Frames refer to elements that are used to divide a web page into separate parts or
portions. Dividing a web page into frames enables us to display additional content or
multiple documents in a single web page. Earlier, frames were created using the FRAME
element provided by HTML; however, this method has now become obsolete due to
various reasons, such as problem in bookmarking the page or lack or proper support on
web p\browser. Nowadays, frames can be created using various properties of CSS, as
shown below:
<DIV id=”frame”> This is a frame </DIV>
167
 <STYLE type=”text/css”>
#frame{
Position: absolute;
Top: 0px;
Bottom: 0px;
Right: 0;
Width: 100px;
Height:100%;
Background: white;
Color: red;
}
</STYLE>
In the above code, we have used a DIV element to be displayed as a frame in a web
page. We have also specified the position of a frame using the position, top, bottom, and
right properties.

Customizing Controls Using CSS

CSS also provides you the functionality to customize controls on a web page by
modifying their appearance. For instance, we can change the shapes of the buttons and
the color of the scroll bars. For example to change the appearance of the button control:
<STYLE type=”text/css”>
#button {
Border-radius: 30px;
Background:lime;
Height:80px;
Width:80px;
}
</STYLE>
-----
<BUTTON id=”button”>BUTTON 1</BUTTON>
In the above code, we have used the BUTTON element to display a button control on the
web page. We have also specified the border-radius, background, height, and width
properties of CSS to change the appearance of the button control.

We can also change the appearance of menus by applying the effects on mouse events,
such as mouseover and mouseout. The following code shows the CSS code for changing
the appearance of menus:
.Vmenu li:hover
{
background-color: white;
color: black;
border-bottom: 1px solid black;
}
In the above code, we have used the background-color, color, and border-bottom
properties to change the background color, text color, and border of menus.

1. Developing a web page to change the transparency of an image with the change in
the mouse events.
168
 [Link]
<HTML>
<HEAD>
<TITLE>Applying Rounded Corners</TITLE>
<STYLE>
.trans{
border:1px solid #000;
border-radius:50px 0px 50px 0px;
background:gray
}
img{
opacity:0.3;
height:250px;
width:300px;
}
</STYLE>
</HEAD>
<BODY>
<H1 style="text-align:center">Working with Image

Trasparency </H1>
<IMG src="[Link]"
onmouseover="[Link]=1;[Link]=100"
onmouseout="[Link]=0.4;[Link]=20">
<IMG src="[Link]"
onmouseover="[Link]=1;[Link]=100"
onmouseout="[Link]=0.4;[Link]=20">
<IMG src="[Link]"
onmouseover="[Link]=1;[Link]=100"
onmouseout="[Link]=0.4;[Link]=20">
<IMG src="[Link]"

onmouseover="[Link]=1;[Link]=100"
onmouseout="[Link]=0.4;[Link]=20">
<IMG src="[Link]"

onmouseover="[Link]=1;[Link]=100"
onmouseout="[Link]=0.4;[Link]=20">
<IMG src="[Link]"

onmouseover="[Link]=1;[Link]=100"
onmouseout="[Link]=0.4;[Link]=20">
</BODY>
</HTML>

2. Developing a web page to change the transparency of any element by using the
opacity property to display the text on a transparent box.
[Link]
169
<HTML>
<HEAD>
<TITLE>Transparent Box</TITLE>
<STYLE type="text/css">

body{
background:url([Link]);
}
.trans{
width:500px;
height:400px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.5;
color:red;
font-weight:Bold;
font-size:20px;
text-align:justify;
}

</STYLE>
</HEAD>

<BODY>
<H1>Working with Transparent Box</H1>
<TEXTAREA class="trans" type="text">Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect

Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect
Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect Orbit Tect </TEXTAREA>
</BODY>
</HTML>

[Link] a web page to change the position of the content of a web page or
rotate the content of an element.
[Link]
<HTML>
<HEAD>
<TITLE> Rotating Images </TITLE>
<STYLE type="text/css">
170
 img {
width: 300px;
height: 200px;
}

#transform {
position: relative;
margin: 10px auto;
width: 300px;
height: 200px;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
}

#transform:hover {
-webkit-transform: rotateZ(35deg);
-webkit-box-shadow: -5px 5px 5px #aaa;
}

</STYLE>
</HEAD>

<BODY>
<H1>Working with Transformation </H1>
<DIV id="transform">
<IMG src="[Link]"/>
</DIV>

<DIV id="transform">
<IMG src="[Link]"/>
</DIV>

<DIV id="transform">
<IMG src="[Link]"/>
</DIV>
</BODY>
</HTML>
4. Developing a web page to change the passage of an act from one state to another
using Transition property.
[Link]
<HTML>
<HEAD>
<TITLE>Transition </TITLE>
<STYLE type="text/css">

div{
background:url([Link]);
}

171
 .area {
border-bottom: 6px solid #dbdfcd;
height: 500px;
position: relative;
}
.item {
background: red;
color: #444;
margin: 0 20px;
height: 30px;
line-height: 30px;
position: absolute;
text-align: center;
width: 90px;
height:90px;
opacity:0.9;
}
.area .item {
-webkit-transition: all 1s linear;
}
.area .item-1 {
bottom: 10px;
-webkit-transition-duration: 1.0s;
}
.area .item-2 {
bottom: 110px;
-webkit-transition-duration: .75s;
}
.area .item-3 {
bottom: 220px;
-webkit-transition-duration: .5s;
}
.area .item-4 {
bottom: 330px;
-webkit-transition-duration: .25s;
}
.item:hover,
.item:focus {
color: white;
width: 400px;
opacity:0.6;
}
</STYLE>
</HEAD>
<BODY>

<DIV class="area">
172
 <H1>Working with Transition </H1>
<DIV class="item item-1">1.0 second</DIV><BR/>
<DIV class="item item-2">0.75 second</DIV><BR/>
<DIV class="item item-3">0.5 second</DIV><BR/>
<DIV class="item item-4">0.25 second</DIV>
</DIV>
</BODY>
</HTML>

5. Developing a web page to apply the transition property on the borders of an

element.
[Link]
<HTML>
<HEAD>
<TITLE>Transition </TITLE>
<STYLE type="text/css">
div{
background:#444;
}
.area {
border-bottom:
6px solid #dbdfcd;
height: 500px;
position: relative;
}
.item {
width: 240px;
height:200px;
opacity:0.9;
border-radius:5px 5px 5px 5px;
}
.area .item {
-webkit-transition: all 0.5s linear;
}
.item:hover,
.item:focus {

-webkit-border-radius:500px;
}
</STYLE>
</HEAD>
<BODY>
<DIV class="area">
<H1>Working with Transition </H1>
<IMG class="item item-1" src="[Link]">
<IMG class="item item-2" src="[Link]"><BR/>
<IMG class="item item-3" src="[Link]">
173
 <IMG class="item item-4" src="[Link]">
</DIV>
</BODY>
</HTML>

6. Developing a web page to apply the animation effect to an element.

[Link]
<HTML>
<HEAD>
<TITLE> Animation </TITLE>
<STYLE type="text/css">
@-webkit-keyframes resize {
0% {
height:220px;
width:220px;
opacity:0.7;
}
50% {
height:240px;
width:240px;
opacity:0.4;
}
}

#heart:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0,0.5,0,0);
}
#heartinf {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(0,0.5,0,0);
position: absolute;
left:250px;
top:80px;
width: 200px;
height:200px;

}
img{
height:200px;
width:200px;
opacity:1;
174
 }
</STYLE>
</HEAD>
<BODY>
<H1>Working with Animation </H1>
<IMG id="heart" src="[Link]" >
<IMG id="heartinf" src="[Link]" >
<P style="position:absolute;left:60px;top:280px;text-align:center">Hover on this
image <BR/> to animate.</P>
<P style="position:absolute;left:300px;top:280px;text-align:center">Continoustly
Animating <BR/>Image </P>
</BODY>
</HTML>

7. Developing a web page to create frames in an HTML page.

[Link]
<HTML>
<HEAD>
<TITLE>Creating Frames</TITLE>
<STYLE type="text/css">
#frame{
position: absolute;
top:0px;
left:0px;
bottom: 0px;
right:0;
width: 200px;
/*Width of frame div*/
height: 100%;
overflow: hidden;
background:
Black;
color: white;
}
#main{
position: fixed;
top: 0px;
left:210px;
right: 0;
bottom: 0px;
overflow: auto;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="frame">
<H1>This is the Left Frame</H1>
175
 </DIV>
<DIV id="main">
<H1>Heading of the main content</H1>
<P>Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech </P>
<IMG src="[Link]" style="width:100%;height:100%;">
</DIV>
</BODY>
</HTML>

8. Developing a web page to display content at the right side of the web page by
creating a frame.
[Link]
<HTML>
<HEAD>
<TITLE>Creating Frames</TITLE>
<STYLE type="text/css">

#frame{
position: absolute;
top:0px;

bottom: 0px;
right:0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden;
background: Black;
color: white;
}

#main{
position: fixed;
176
 top: 0px;
right:210px;
bottom: 0px;
overflow: auto;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="frame">
<H1>This is the Right Frame</H1>
</DIV>
<DIV id="main">
<H1>Heading of the main content</H1>
<P>Web Designing Web Designing Web Designing
Web Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing Web Designing Web Designing Web Designing Web Designing Web
Designing </P>
<IMG src="[Link]" style="width:100%;height:100%;">
</DIV>
</BODY>
</HTML>

9. Developing a web page to display content web page by creating a frame at the top
and bottom.
[Link]
<HTML>
<HEAD>
<TITLE>Creating Frames</TITLE>
<STYLE type="text/css">

#topframe{
position: absolute;
top:0px;
left:0px;

177
 bottom: 0px;
right:0;
width: 100%;
height: 100px;
overflow: hidden;
background: Black;
color: white;
}
#main{
position: fixed;
top: 100px;
left:10px;
bottom: 100px;
overflow: auto;
}
#bottomframe{
position: absolute;
left:0px;
bottom: 0px;
right:0;
width: 100%;
height: 100px;
overflow: hidden;
background: Black;
color: white;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="topframe">
<H1>This is the Top Frame</H1>
</DIV>
<DIV id="main">
<H1>Heading of the main content</H1>
<P>Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit
Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit
Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit
Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit
Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit
Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech
Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech Orbit Tech </P>
<IMG src="[Link]" style="width:500px;height:500px;">
</DIV>

178
 <DIV id="bottomframe">
<H1>This is the Bottom Frame</H1>
</DIV>
</BODY>
</HTML>

10. Developing a web page to apply CSS style on buttons.

[Link]
<HTML>
<HEAD>
<TITLE>CSS Style on Buttons </TITLE>
<style type="text/css">
#round{
border-radius:60px;
background:lime;
height:80px;
width:80px;
}
#square{
background: aqua;
display: block;
float: left;
font: normal 12px Arial;
line-height: 15px;
height: 23px;
padding-left: 9px;
text-decoration: none;
width:100px;
}

#oval{
background: gray;
color:white;
display: block;
float: left;
font: normal 13px Tahoma;
line-height: 16px;
height: 24px;
padding-left:11px;
text-decoration:none;
width:100px;
border-radius:60px;
}
#bold{
padding: 5px 7px;
border: 1px solid #778;
color: white;

179
 border:1px solid gray;
background:#3282c2;
border-radius: 8px;
box-shadow: 3px 3px 4px rgba(0,0,0,.5);

-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);

background:-webkit-gradient(linear, center top, center bottom,
from(#a4ccec), color-stop(25%, #72a6d4),
color-stop(45%, #3282c2), color-stop(85%, #357cbd),
to(#72a6d4)); /* webkit gradient background */
width:100px;
}
</style>
</HEAD>
<BODY>
<H1>Applying CSS on Buttons </H1>
<H3>Round Shaped Buttons</H3>
<BUTTON id="round"> Button 1 </BUTTON>
<BUTTON id="round"> Button 2 </BUTTON>
<BR/><HR/>
<H3>Sqaure Shaped Button</H3>
<BUTTON id="square" > Button 1</BUTTON>
<BUTTON id="square" > Button 2 </BUTTON> <BR/>
<BR/><HR/>

<H3>Oval Shaped Button</H3>

<BUTTON id="oval" > Button 1 </BUTTON>
<BUTTON id="oval" > Button 2 </BUTTON><BR/>

<BR/><HR/>
<H3>Gradient Buttons</H3>
<BUTTON id="bold" > Button 1 </BUTTON>
<BUTTON id="bold" > Button 2 </BUTTON>
</BODY>
</HTML>

11. Developing a web page to apply CSS style on menus.

[Link]
<HTML>
<HEAD>
<STYLE type="text/css">
.Vmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}
.Vmenu li {
180
 background: #333 no-repeat right top;
font: bold 13px "Lucida Grande","Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
width:180px;
}
.Vmenu li{
background: #333 no-repeat right top;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.Vmenu li:hover{
background-color: white;
color: black;
border-bottom: 1px solid black;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Vertical menus</H1>
<DIV class="Vmenu">
<MENU >
<LI>Home</LI>
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
<LI>Contact Us</LI>
<LI>Feedback</LI>
</MENU>
</DIV>
</BODY>
</HTML>

11. Developing a web page to apply different CSS style on menus.

[Link]
<HTML>
<HEAD>
181
 <STYLE type="text/css">
.bevelmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}
.bevelmenu li{
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration:none;
width:180px;
}
.bevelmenu li:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}
</STYLE>
</HEAD>
<BODY>
<H1>Working with Vertical menus</H1>
<DIV class="bevelmenu">
<MENU>
<LI>Home</LI>
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
<LI>Contact Us</LI>
<LI>Feedback</LI>
</MENU>
</DIV>
</BODY>
</HTML>

12. Developing a web page to create horizontal menus.

[Link]
<HTML>
<HEAD>
<style type="text/css">
.hmenu{
font-weight: bold;
182
 width: 100%;
}
.hmenu menu{
padding: 6px 0 7px 0;
margin: 0;
}
.hmenu li{
display: inline;
}

.hmenu li{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration:none;
border-bottom:5px solid gray;
}
.hmenu li:hover{
border-bottom-color:black;
color: black;
}
</style>
</HEAD>
<BODY>
<H1>Working with Horizontal menus</H1>
<div class="hmenu">
<Menu >
<LI>Home</LI>
<LI>HTML</LI>
<LI>CSS</LI>
<LI>JavaScript</LI>
<LI>Contact Us</LI>
<LI>Feedback</LI>
</Menu>
</div>
</BODY>
</HTML>

13. Developing a web page for applying CSS styles on ScrollBar.

[Link]
<HTML>
<HEAD>
<TITLE>CSS on Scroll Bars </TITLE>
<STYLE type="text/css">
html, body{
scrollbar-face-color:Blue;
scrollbar-base-color:yellow;

183
 scrollbar-arrow-color:black;
scrollbar-track-color:gray;
scrollbar-shadow-color:#EBF5FF;
scrollbar-highlight-color:#EBF5FF;
scrollbar-3dlight-color:#78AAFF;
scrollbar-darkshadow-Color:#78AAFF;
scrollbar-size:10px;
}
p{width:600px;}
</STYLE>

</HEAD>
<BODY>
<H1>Applying CSS on Scroll Bars</H1>
<P>This is a Sample Paragraph. This is a Sample Paragraph.
This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph.
This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph.
This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph.
This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph.
This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph.
This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph.
This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph.
This is a Sample Paragraph. This is a Sample Paragraph. This is a Sample Paragraph.
</P>
</BODY>
</HTML>

Implementing Advance Features of HTML5

HTML5 comes with many new and advanced features that enable you to access and
present our web pages in a more attractive and user-friendly way. For instance, we can
perform many functions on an HTML document, such as creating editable content,
checking spelling mistakes, and formatting the text. HTML5 allows you to store data
used in web applications at the client side system using session storage or local storage.
We can also embed semantic markup, which includes logic, information, outline data, for
message content in our HTML page by using microdata. HTML5 API also supports
creation of Accessible Rich Internet Applications (ARIA) and offline web applications. The
drag and drop feature of HTML allow you to drag textual data or an image from a source
area to a target area on a web page. We can establish web communications between
web applications using various techniques, which include geo location, web sockets and
web workers.

Creating Editable Content

184
Editable content means the content that can be edited after being loaded on the web
browse. We can make content of an HTML element as editable by using the
contentEditable attribute. The syntax to use the contentEditable attribute is given as
follows:
<element contentEditable = [value]>
In the above code, element refers to an HTMLO element and the contentEditable
attribute can take any o the following values:
 true: Indicates that the element is editable
 false: Indicates that the element is not editable
 inherit – indicates that the element is also editable if its parent is editable.
We can confirm whether anelementis editable or not by using the isContentEditable
attribute, which returns true if the element is editable, and false if it is not. The syntax to
use the isContentDitable attribute is given as follows:
elemenet . isContentEditable
In the above code, the element returns true if it is editable; otherwise returns false.

Checking Spelling Mistakes

The spell check feature isintroduced in HTML5 to allow you to check spelling mistakes of
the editable text. This feature uses the contentEditable attribute to find spelling mistakes
in web page. The syntax to use the spellcheck attribute is given as follows:
<element spellcheck = [value ]>
In the above syntax, element represents an HTML element and the specllcheck
atributecan take any of the following values:
 true: Checks an element for spelling and grammar I its content is editable
 false: Does not check an element for spelling and grammar
 inherit: Specifies that an element inherits the spell check behavior from its
parent element

Custom Data Attributes

One of the new features of HTML5 is the addition of custom data attribute. A custom
data attribute is used to sore private data, which is not seen by end users of the
application. We can define a custom attribute by starting any attribute with the data-
string characters. A custom data attribute consists of the following two parts:
Attribute name: Specifies a name that must be prefixed with data- and
does not contain any uppercase letters.
Attribute value: Specifies a value in the string format
An example for defining a custom attribute is given as follows:
<LI class=”user” data-name=”SureshKumar” data-city=”Madras” data-lang-“js” data-
food=”Pizza”>
<B> Kabir says: </b> <SPAN>Hello, how are you? </SPAN>
</LI>
In the preceding code, data-name, data-city, data-lang and data-food are examples of
the custom attributes.

1. Developing a web page to make the text of the element editable by using
contentEditable attribute.
[Link]
185
<HTML>
<HEAD>
<TITLE>HTML5 contenteditable example</TITLE>
<SCRIPT>
function getUserScribble() {
var scribble = '<i style="color:magenta;font-family:Geneva, Arial;
font-size:5;">Write here....</i>';

[Link]('scribble').innerHTML = scribble;
}
</SCRIPT>
</HEAD>
<BODY onload="getUserScribble()">
<P>
<TABLE width=320 height=450 border=0 cellspacing=0 cellpadding=62>
<TD background="[Link]" contentEditable="true" id="scribble"></TD>
</TABLE>
<SCRIPT>
getUserScribble();
</SCRIPT>
<P>
</BODY>
</HTML>

2. Developing a web page to check spelling mistakes of the web content by using
spellcheck attribute.
[Link]
<HTML>
<HEAD>
<TITLE>HTML5 spell check example</TITLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA style="width:300px;height:150px;border: 1em solid black"
spellcheck="false" contentEditable="true">Spell check off</TEXTAREA><BR/>
<TEXTAREA style="width:300px;height:150px;border: 1em solid black"
spellcheck="true"
contentEditable="true">Spell check on</TEXTAREA><BR/>
</FORM>
</BODY>
</HTML>

3. Developing a web page to embed custom data attributes with HTML elements by
using custom data attribute.
[Link]
<HTML>
<HEAD>
<TITLE>HTML5 custom attributes example</TITLE>
186
</HEAD>
<BODY>
<IMG src="[Link]" data-out="[Link]" data-over="[Link]" />
<IMG src="[Link]" data-out="[Link]" data-over="[Link]" />
<IMG src="[Link]" data-out="[Link]" data-over="[Link]" />
<SCRIPT type="text/javascript">
function imagerollover(){
var allimages=[Link]("img")
var preloadimages=[]
for (var i=0; i<[Link]; i++){
if (allimages[i].getAttribute("data-over"))
{
[Link](new Image())
preloadimages[[Link]-1].src=allimages[i].getAttribute("data-over")
allimages[i].onmouseover=function(){
[Link]=[Link]("data-over")
}
allimages[i].onmouseout=function(){
[Link]=[Link]("data-out")
}
}
}
}
imagerollover()
</SCRIPT>
</BODY>
</HTML>
3. Creating a web page for dragging and dropping an element from one place to
another.

[Link]
<html>
<body>
<script language="JavaScript">
function dragDropFunc() {
var isDragged = [Link]();
}
</script>
<div style onMouseUp="dragDropFunc();">
<p align="center">&nbsp;</p>
<div style="background: #cf2255; width:'100%';" align="center">
<font color="#ffffcc" size="12pt">
<b>Drag Drop Example</b></font></div>
<center>
<div style="background: #ffffcc; width:'100%';"
align="center">
<p>&nbsp;</p>
<table border="0" cellpadding="0" cellspacing="0"
width="510" height="104">
187
 <tr>
<td width="151" >
<textarea cols="20" id="source" rows="15">
Select any part of this text box to drag</textarea>
</td>
<td width="185" height="104" valign="middle"
align="center">Drag <==> Drop</td>
<td width="174" height="104">
<textarea cols="20" id="destination" rows="15"></textarea>
</td>
</tr>
</table>
&nbsp;
<p>
</div>
</center>
</div>
</body>
</html>

188