The Web

 It is a collection of linked documents on the network of computers all over the

world.
 All the computers in the Web can communicate with each other using HTTP.

How does the WWW work?

 Web pages are files, stored on computers called web servers.
 Computers reading the web pages are called web clients.

 Web clients view the pages with a program called a web browser.

 Popular browsers are Internet Explorer and Mozilla Firefox.

How does a Browser Fetch a Web Page?

 A browser fetches a page from a web server by a request.
 A request is a standard HTTP request containing a page address.

 An address may look like this: http://www.microsoft.com/page.htm.

How does a Browser Display a Web Page?

 All web pages contain instructions for display
 The browser displays the page by reading these instructions.

 The most common display instructions are called HTML tags.

 HTML tags look like this <p>This is a Paragraph</p>.

What is a Web Server?

 The collection of all your web pages is called your web site.
 To let others view your work, you must publish your web site.

 To publish your work, you web site must be copied to a web server.

 Most common is to use an Internet Service Provider (ISP) to host web site.

What is an Internet Service Provider?

 An ISP provides Internet services.
 A common Internet service is web hosting.

 Web hosting means storing your web site on a public server.

 Web hosting normally includes email services.

 Web hosting often includes domain name registration.

What is Web Hosting ?

Renting a server from an Internet Service Provider (ISP) is a common option. Here are some
advantages:

1
Connection Speed

Most ISP providers have very fast connections to the Internet, like full T3 fiber-optic 45Mps
connections equivalent to about 2000 traditional (28K) modems or 1000 high speed (56K)
modems.

Powerful Hardware

Service providers often have many powerful web servers that can be shared by several
companies. You can also expect them to have an effective load balancing, and necessary
backup servers.

Security and Stability

Internet Service Providers are specialists on web hosting. Expect their servers to have more
than 99% up time, the latest software patches, and the best virus protection.

How to select an ISP to host a web site ( Things to Consider )

24-hour support

Make sure your Internet service provider offers 24-hours support. Toll-free phone could be
vital if you don't want to pay for long distance calls.

Daily Backup

Make sure your service provider runs a secure daily backup routine, otherwise you may lose
some valuable data.

Traffic Volume

Study the provider's traffic volume restrictions. Make sure that you don't have to pay a
fortune for unexpected high traffic if your web site becomes popular.

Bandwidth or Content Restrictions

Study the provider's bandwidth and content restrictions. If you plan to publish pictures or
broadcast video or sound, make sure that you can.

Email Capabilities

Make sure your provider fully supports the email capabilities you need.

Database Access

Make sure your provider fully supports the database access you need if you plan to use
databases from your site

What is a Domain Name?

A domain name is a unique name for a web site, like microsoft.com and w3schools.com.

2
Domain names must be registered. When domain names are registered they are added to a
large domain name register, and information about your site - including your internet IP
address - is stored on a DNS server.

DNS stands for Domain Name System. A DNS server is responsible for informing all other
computers on the Internet about your domain name and your site address.

How to Registering a Domain?

Domains can be registered from domain name registration companies such as

http://www.dotdnr.com.

Domain Name Registration provides registration services for .com .net .org .biz .info .us
.nu .ws .cc and .tv domains.

Newer domain extensions such as .biz .info and .us have more choices available.

Choosing Your Domain

Choosing a domain is a major step for any individual or organization.

The shorter your domain, the easier it is to reach and the less are the chance the user will
make a typographical error while typing it.

Meaningful

Clear - Clarity is important when selecting a domain name.

Exposure - Search engines index your site and rank it for relevance against terms people
search for online. In order to maximize your sites exposure, consider including a relevant
search term in your domain.

Sub Domains

We use sub domains on a daily basis. The famous "www" of the World Wide Web is the most
common example of a sub domain. Sub domains can be created on a DNS server and they
don't need to be registered with a domain registrar, of course, the original domain would need
to be registered before a sub domain could be created. Common examples of sub domains
used on the internet are http://store.apple.com and http://support.microsoft.com.

False Domain Names - Directory Listings

Some providers will offer you a unique name under their own name like:
www.theircompany.com/yourcompany/

This is not a real domain name, it is a directory - and you should try to avoid it.

Expired Domains

When you register a domain, think of it as a rental. The result is that domains that were
previously registered regularly become available for registration again. You can see, and
search through a list of recently expired domains for free at http://www.dotdnr.com.

Hosting Capacities
3
How Much Disk Space?

A small or medium web site will need between 10 and 100MB of disk space.

Expect each HTML page to take up between 5 and 50KB of disk space on your web server,
depending on the use of images or other space consuming elements.

Make sure that you know your needs before you start looking for your web host.

Monthly Traffic

A small or medium web site will consume between 1GB and 5GB of data transfer per month.

You can calculate this by multiplying your average page size with the number of expected
page views per month. If your average page size is 30KB and you expect 50,000 page views
per month, you will need 0.03MB x 50,000 = 1.5GB.

Larger, commercial sites often consume more than 100GB of monthly traffic.

Before you sign a contract with a host provider, make sure to check this:

 What are the restrictions on monthly transfer

 Will your site be closed if you exceed the volume

 Will you be billed a fortune if you exceed the volume

Connection Speed

Visitors to your web site will often connect via a modem, but your host provider should have a
much faster connection.

In the early days of the Internet a T1 connection was considered a fast connection. Today
connection speeds are much faster.

1 byte equals to 8 bits (and that's the number of bits used to transport one character). Low
speed communication modems can transport from about 14 000 to 56 000 bits per second (14
to 56 kilobits per second). That is somewhere between 2000 and 7000 characters per second,
or about 1 to 5 pages of written text.

One kilobit (Kb) is 1024 bits. One megabit (Mb) is 1024 kilobits. One gigabit (Gb) is 1024
megabits.

These are connection speeds used on the Internet today:

Speed per
Name Connection
second

T1 Digital 1.55Mb

OC-24 Optical Carrier 1.244Gb

OC-48 Optical Carrier 2.488Gb

Web Hosting Server Technologies

4
Windows Hosting

Windows hosting means hosting of web services that runs on the Windows operating system.

You should choose Windows hosting if you plan to use ASP (Active Server Pages) as server
scripting, or if you plan to use a database like Microsoft Access or Microsoft SQL Server.

Unix Hosting

Unix hosting means hosting of web services that runs on the Unix operating system.

Unix was the first (original) web server operating system, and it is known for being reliable
and stable. Often less expensive than Windows.

ASP.net - Active Server Pages

Asp.net is a server-side scripting technology developed by Microsoft. With ASP you can create
dynamic web pages by putting script code inside your HTML pages. The code is executed by
the web server before the page is returned to the browser.

JSP

JSP is a server-side technology much like ASP developed by Sun. With JSP you can create
dynamic web pages by putting Java code inside your HTML pages. The code is executed by
the web server before the page is returned to the browser. Since JSP uses Java, the
technology is not restricted to any server-specific platform.

PHP

Just like ASP, PHP is a server-side scripting language which allows you to create dynamic web
pages by putting script code inside your HTML pages. The code is executed by the web server
before the page is returned to the browser.

5
Web Hosting Database Technologies

If your web site needs to update large quantities of information via the web, you will need a
database to store your information.

There are many different database systems available for web hosting. The most common are
MS Access, MySQL, SQL Server, and Oracle.

HTML
What is an HTML File?
 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small markup tags called HTML Elements

 The markup tags tell the Web browser how to display the page

 An HTML file must have an htm or html file extension

<html>
<head>
<title> Title of page </title>
</head>
<body>
This is my first homepage. <b> Hello Welcome
in bold </b>
</body>
</html>
HTML Tags
 HTML tags are used to mark-up HTML elements
 HTML tags are surrounded by the two characters < and > called angle brackets

 HTML tags normally come in pairs like <b> and </b>

 The first tag in a pair is the start tag, the second tag is the end tag

 The text between the start and end tags is the element content

 HTML tags are not case sensitive

Basic HTML Tags

Tag Description

<html> Defines an HTML document

<body> Defines the document's body

<h1> to <h6> Defines header 1 to header 6

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a horizontal rule

6
<!--> Defines a comment

HTML Tag Attributes

HTML tags can have attributes. Attributes provide additional information to an HTML element.

Attributes always come in name/value pairs like this: name="value".

Attributes are always specified in the start tag of an HTML element.

Example 1:

<h1> defines the start of a heading.

<h1 align="center"> has additional information about the alignment.

Example 2:

<body> defines the body of an HTML document.

<body bgcolor="yellow"> has additional information about the background color.

Character Entities
Some characters like the < character, have a special meaning in HTML, and therefore cannot
be used in the text. To display a less than sign (<) in HTML, we have to use a character
entity.

A character entity has three parts: an ampersand (&), an entity name or a #

and an entity number, and finally a semicolon (;).

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;
< less than &lt; &#60;
& Ampersand &amp; &#38;

HTML Links
HTML uses a hyperlink to link to another document on the Web.

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a
movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

7
The <a> tag is used to create an anchor to link from, the href attribute is used to address the
document to link to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.

This anchor defines a link to Andhra university:

<a href="http://www.Andhrauniversity.info/"> Visit AU! </a>

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href= http://www.Andhrauniversity.info/ target="_blank">Visit AU!</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can
create links that can jump directly into a specific section on a page, instead of letting the
user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label"> Text to be displayed </a>

The name attribute is used to create a named anchor. The name of the anchor can be any
text you care to use.

The line below defines a named anchor:

<a name="Engcoll"> Engineering college </a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "Engcoll"

section, add a # sign and the name of the anchor to
the end of a URL, like this:

<a href= http://www.Andhrauniversity.info/html_links.asp#Engcoll>

Jump to the Engineering college Section of that web site</a>

A hyperlink to the Engineering college from WITHIN the file will look like this:

<a href="#Engcoll"> Jump to the Useful Tips Section </a>

Example :: Demo of jumping to another part of the document on the same page

<html>
<body>

8
<p> <a href="#C4">See also Chapter 4.</a> </p>

<h2>Chapter 1</h2>
<p>This chapter explains html</p>

<h2>Chapter 2</h2>
<p>This chapter explains web</p>

<h2>Chapter 3</h2>
<p>This chapter explains script</p>

<h2> <a name="C4"> Chapter 4 </a> </h2>

<p>This chapter explains jsp</p>

<h2>Chapter 5</h2>
<p>This chapter explains java</p>

</body>
</html>

Example : Demo of linking, jumping

( disp.html )

<html>
<body>
<h1> ABC Company </h1>
<p> <a href=phone.html> display phone list </a> to get phone numbers of all
</p>
</body>
</html>

( phone.html )

<html> < head> <title> list of numbers </title> </head>

<body>

<h1> <a name = “top”> Name of emp ( Mobile No) </a> </h1>

<p> <a href="#phonebob"> For Presidents number </a> </p>

<p> John A ( 939393) </p>

<p> Mark B ( 939493) </p>
<p> Lara H ( 939495) </p>
<p> Crist A (939293) </p>
<p> Amar k ( 939298) </p>

<p> <a name="phonebob"> BoB M (939491) </a> </h2>

<p> Chandra S (929594) </p>

<p> <a href = “ # top”> Go back to beginning </a> of this page </p>

</body>
</html>

9
HTML Frames

With frames, one can display more than one HTML document in the same browser window.

Each HTML document is called a frame, and each frame is independent of the others.

The Frameset Tag

 The <frameset> tag defines how to divide the window into frames
 Each frameset defines a set of rows or columns

 The values of the rows/columns indicate the amount of screen area each row/column
will occupy

The Frame Tag

 The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of
the browser window. The second column is set to 75% of the width of the browser window. The HTML
document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into
the second column:

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

Example ::

( Main file main.htm )

<html>
<frameset cols="20%,80%">
<frame src="ind.htm" name = “a1”>
<frame src="disp.htm" name = “a2”>
</frameset>
</html>

( ind.htm )

<html>
<body>
<a href ="auinfo.htm" target = “a2”> AU </a>
<a href ="gitam.htm" target = “a2”> GITAM </a>
</body>
</html>

( disp.htm )

<html>
<body>

10
 <center> click on links of left page </center>
</body>
</html>

( auinfo.htm )

<html>
<body>
AU information
</body>
</html>

( gitam.htm )

<html>
<body>
<center> Gitam Web page </center>
</body>
</html>

HTML Tables
With HTML one can create tables.

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a
data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Tables and the Border Attribute

To display a table with borders, you will have to use the border attribute:

<table border="1">

11
Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

How it looks in a browser:

Heading Another Heading

row 1, cell 1 row 1, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

A non-breaking space (&nbsp;) is used to empty data cells, and to make the borders visible:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

How it looks in a browser:

row 1, cell 1

Example ::

<html>
<body>

<h4> This table has a caption, and a thick border: </h4>

<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
12
 </tr>

<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

This table has a caption, and a thick border:

My Caption

100 200 300

400 500 600

HTML Lists
HTML supports ordered, unordered and definition lists.

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black
circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

 Coffee
 Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

13
Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-
list definition starts with the <dd> tag.

<dl>
<dt>Coffee</dt>
<dd> <i> Black hot drink </i> </dd>
<dt>Milk</dt>
<dd> <i> White cold drink </i> </dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images,
links, other lists, etc.

Example ::

<html>
<body>

<h4>An Ordered List:</h4>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

An Ordered List:
1. Coffee
2. Tea

3. Milk

Example ::

<html>
14
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea

<ul>

<li> Black tea</li>

<li> Green tea
<ul>

<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

A nested List:
 Coffee
 Tea

o Black tea

o Green tea

 China

 Africa

 Milk

HTML Forms and Input

Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea
fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

Input

The most used form tag is the <input> tag. The type of input is specified with the type
attribute. The most commonly used input types are explained below.

15
Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a
form.

<form>
First name: <input type="text" name="fname">
<br>
Last name: <input type="text" name="lname">
</form>

How it looks in a browser:

First name:

Last name:

In most browsers, the width of the text field is 20 characters by default.

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited
number of choices.

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

How it looks in a browser:

Male

Female

Checkboxes

Checkboxes are used when you want the user to select one or more options of
a limited number of choices.

<form>
bike: <input type="checkbox" name="vehicle" value="B">
<br>
car: <input type="checkbox" name="vehicle" value="C">
<br>
airplane: <input type="checkbox" name="vehicle" value="Ap">
</form>

The Form's Action Attribute and the Submit Button

16
When the user clicks on the "Submit" button, the content of the form is sent
to another file. The form's action attribute defines the name of the file to send
the content to. The file defined in the action attribute usually does something
with the received input.

<form name="formone" action="html_form_action.asp" method="get">

Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

How it looks in a browser:

Submit
Username:

If you type some characters in the text field above, and click the "Submit" button, you will
send your input to a page called "html_form_action.asp". That page will show you the
received input.

Example ::

<html>
<body>
<form name="input" action="html_form_action.asp" method="get">

Type your first name:

<input type="text" name="FirstName" value="Mickey" size="20">

<br>Type your last name:

<input type="text" name="LastName" value="Mouse" size="20">
<br>

<input type="submit" value="Submit">

</form>

<p>
If you click the "Submit" button, you will send your input to a new page called
html_form_action.asp.
</p>

</body>
</html>

Example ::

<html>
<body>
<form action=mailto: [email protected] method="post" enctype="text/plain">
<h3>This form sends an e-mail to W3Schools.</h3>

Name:<br> <input type="text" name="name" value="yourname" size="20">

<br>

Mail:<br>
17
 <input type="text" name="mail" value="yourmail" size="20">
<br>

Comment:<br>

<input type="text" name="comment" value="yourcomment" size="40">

<br><br>

<input type="submit" value="Send">

<input type="reset" value="Reset">

</form>
</body>
</html>

This form sends an e-mail

Name:
yourname

Mail:
yourmail

Comment:
yourcomment

Send Reset

HTML Images

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it has no closing
tag.

To display an image on a page, you need to use the src attribute. src stands for "source". The
value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image:

<img src="url">

The URL points to the location where the image is stored. For example an image named
"boat.gif" located in the directory "images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.

The browser puts the image where the image tag occurs in the document. If you put an image
tag between two paragraphs, the browser shows the first paragraph, then the image, and
then the second paragraph.

The Alt Attribute

18
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an
author-defined text:

<img src="boat.gif" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't
load images. The browser will then display the alternate text instead of the image. It is a good
practice to include the "alt" attribute for each image on a page, to improve the display and
usefulness of your document for people who have text-only browsers.

Example ::

<html>
<body>
<p>
An image: <img src="sunset.jpg" width="144" height="50">
</p>

<p>
A moving image: <img src="hackanm.gif" width="48" height="48">
</p>

<p>
Note that the syntax of inserting a moving image is no different from that of a non-
moving image.
</p>
</body>
</html>

Example ::

<html>
<body background="background.jpg">
<h3>Look: A background image!</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>

Example ::

<html>
<body>
<p>
<img src="hackanm.gif" width="20" height="20">
</p>

<p>
<img src="hackanm.gif" width="45" height="45">
</p>

<p>
<img src="hackanm.gif" width="70" height="70">
</p>

19
 <p>
You can make a picture larger or smaller changing the values in the "height"
and "width" attributes of the img tag.
</p>
</body>
</html>

HTML Backgrounds
A good background can make a Web site look really great.

The <body> tag has two attributes where you can specify backgrounds. The background can
be a color or an image.

Bgcolor

The bgcolor attribute specifies a background-color for an HTML page. The

value of this attribute can be a hexadecimal number, an RGB value, or a color
name:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

The lines above all set the background-color to black.

Background

The background attribute specifies a background-image for an HTML page.

The value of this attribute is the URL of the image you want to use. If the
image is smaller than the browser window, the image will repeat itself until it
fills the entire browser window.

<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">

The URL can be relative (as in the first line above) or absolute (as in the second line above).

Example ::

<html>
<body bgcolor="#d0d0d0">

<p> This is a paragraph. This is a paragraph. This is a paragraph. </p>

<p> This is another paragraph. This is another paragraph. </p>

</body>
</html>

Example ::

<html>
20
 <body background="rock.jpg">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>

HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light sources.

HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and
Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00)
and the highest value is 255 (hex #FF).

The table below shows the result of combining Red, Green, and Blue light
sources:.

Color
Color Color RGB
HEX

RED #FF0000rgb(255,0,0)

GREEN#00FF00rgb(0,255,0)

W3C Standard Color Names

W3C has listed 16 color names The color names are: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Why use HTML 4.0?

In HTML 4.0 all formatting can be removed from the HTML document and stored in a
separate style sheet. Thus it separates the presentation from the document structure.

Prepare Yourself for XHTML

XHTML is the "new" HTML. The most important thing you can do is to start writing valid HTML
4.01. Also start writing your tags in lower case. Always close your tag elements.

What Is XHTML?
 XHTML stands for EXtensible HyperText Markup Language
 XHTML is aimed to replace HTML

 XHTML is almost identical to HTML 4.01

 XHTML is a stricter and cleaner version of HTML

 XHTML is HTML defined as an XML application

21
The Most Important Differences:
 XHTML elements must be properly nested
 XHTML elements must always be closed

 XHTML elements must be in lowercase

 XHTML documents must have one root element

Some More XHTML Syntax Rules:

 Attribute names must be in lower case
 Attribute values must be quoted

 The id attribute replaces the name attribute

Attribute Names Must Be In Lower Case

This is correct:

<table width="100%">

Attribute Values Must Be Quoted

This is correct:

<table width="100%">

Attribute Minimization Is Forbidden

This is wrong:

<input checked>
<input readonly>
<input disabled>

This is correct:

<input checked = "checked" />

<input readonly= "readonly" />
<input disabled= "disabled" />
<option selected= "selected" />
<frame noresize= "noresize" />
The id Attribute Replaces The name Attribute

HTML 4.01 defines a name attribute for the elements a, applet, frame, , img, and map. In
XHTML the name attribute is deprecated. Use id instead.

This is wrong:

<img src="picture.gif" name= "picture1" />

This is correct:
22
<img src="picture.gif" id ="picture1" />

IMPORTANT Compatibility Note:

To make your XHTML compatible with today's browsers, you should add an extra space before
the "/" symbol.

Mandatory XHTML Elements

All XHTML documents must have a DOCTYPE declaration. The html, head and body elements
must be present, and the title must be present inside the head element.

This is a minimum XHTML document template:

<!DOCTYPE Doctype goes here>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>

<body> </body>

</html>

XHTML DTD
<!DOCTYPE> Is Mandatory

An XHTML document consists of three main parts:

 the DOCTYPE
 the Head

 the Body

The basic document structure is:

<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>

The DOCTYPE declaration should always be the first line in an XHTML document.

An XHTML Example

This is a simple (minimal) XHTML document:

23
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>simple document</title>
</head>

<body> <p> a simple paragraph </p> </body>

</html>
Validate XHTML With A DTD

An XHTML document is validated against a Document Type Definition (DTD). Before an XHTML
file can be properly validated, a correct DTD must be added as the first line of the file.

The Strict DTD includes elements and attributes that have not been deprecated or do not
appear in framesets:

!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

The Transitional DTD includes everything in the strict DTD plus deprecated elements and
attributes:

!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

The Frameset DTD includes everything in the transitional DTD plus frames as well:

!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

This is a simple XHTML document:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements

24
  Styles are normally stored in Style Sheets

 Styles were added to HTML 4.0 to solve a problem

 External Style Sheets can save you a lot of work

 External Style Sheets are stored in CSS files

 Multiple style definitions will cascade into one

Styles Solve a Common Problem

All major browsers support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the
color attribute in HTML 3.2. Styles are normally saved in external .css files. External style
sheets enable you to change the appearance and layout of all the pages in your Web, just by
editing one single CSS document!

Multiple Styles Will Cascade Into One

Style sheets allow style information to be specified in many ways. Styles can be specified
inside a single HTML element, inside the <head> element of an HTML page, or in an external
CSS file. Even multiple external style sheets can be referenced inside a single HTML
document.

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet
by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet

3. Internal style sheet (inside the <head> tag)

4. Inline style (inside an HTML element)

CSS Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the
property is the attribute you wish to change, and each property can take a
value. The property and value are separated by a colon, and surrounded by
curly braces:
25
body {color: black}

Note: If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each
property with a semicolon. The example below shows how to define a center
aligned paragraph, with a red text color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on
each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

Grouping

You can group selectors. Separate each selector with a comma. In the
example below we have grouped all the header elements. All header elements
will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}
The class Selector

With the class selector you can define different styles for the same type of HTML element.

Say that you would like to have two types of paragraphs in your document:
one right-aligned paragraph, and one center-aligned paragraph. Here is how
you can do it with styles:

p.right {text-align: right}

p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">

26
This paragraph will be center-aligned.
</p>

Note: To apply more than one class per given element, the syntax is:

<p class="center bold">

This is a paragraph.
</p>

The paragraph above will be styled by the class "center" AND the class "bold".

You can also omit the tag name in the selector to define a style that will be
used by all HTML elements that have a certain class. In the example below, all
HTML elements with class="center" will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have
class="center". This means that both elements will follow the rules in the
".center" selector:

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
Add Styles to Elements with Particular Attributes

You can also apply styles to HTML elements with particular attributes.

The style rule below will match all input elements that have a type attribute
with a value of "text":

input[type="text"] {background-color: blue}

The id Selector

You can also define styles for HTML elements with the id selector. The id selector is defined as
a #.

The style rule below will match the element that has an id attribute with a
value of "green":

#green {color: green}

The style rule below will match the p element that has an id with a value of
"para1":

p#para1
{
27
text-align: center;
color: red
}

How to Use Styles

When a browser reads a style sheet, it will format the document according to it. There are
three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal, when the style is applied to many pages.
Each page
must link to the style sheet using the <link> tag. The <link> tag goes inside
the head section.

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>

Internal Style Sheet

has a unique style. You

An internal style sheet should be used when a single document
define internal styles in the head section with the <style> tag.

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

Inline Styles

An inline style should be used when a unique style is to be applied to a single occurrence of an
element.

To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change
the color and the left margin of a paragraph:

<p style="color: red; margin-left: 20px">

This is a paragraph
</p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will
be inherited from the more specific style sheet.

28
For example, an external style sheet has these properties for the h3 selector:

h3
{
color: red;
text-align: left;
font-size: 8pt
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align: right;
font-size: 20pt
}

If the page with the internal style sheet also links to the external style sheet
the properties for h3 will be:

color: red;
text-align: right;
font-size: 20pt

The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.

Example :: Demo style sheet – set Background color

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1> Java made simple </h1>
<h2> Introduction </h2>
<p> Java was invented by SunMicro … </p>
</body>
</html>

Example:: set color of text

<html>

<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
29
</style>
</head>

<body>

</body>
<h1> Java made simple </h1>
<h2> Introduction </h2>
<p> Java was invented by SunMicro … </p>

</html>

Example :: different list item markers

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

30
 JavaScript
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is a scripting language

 A JavaScript is usually embedded directly into HTML pages

 JavaScript is an interpreted language

Java and JavaScript are two completely different languages in both concept and design!

How to Put a JavaScript into an HTML Page

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script> tag we
use the "type=" attribute to define the scripting language.

The word document.write is a standard JavaScript command for writing output to a page.

Where to Put the JavaScript

Scripts in the head section: Scripts to be executed when they are called, or when an event
is triggered, go in the head section. When you place a script in the head section, you will
ensure that the script is loaded before anyone uses it.

Scripts in the body section: Scripts to be executed when the page loads go in the body
section. When you place a script in the body section it generates the content of the page.

Scripts in both the body and the head section: You can place an unlimited number of
scripts in your document, so you can have scripts in both the body and the head section.

Using an External JavaScript

Sometimes you might want to run the same JavaScript on several pages, without having to
write the same script on every page.

To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file
with a .js file extension. The external script cannot contain the <script> tag!

To use the external script, point to the .js file in the "src" attribute of the <script> tag:

<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>

31
Declaring java Script Variables

You can declare JavaScript variables with the var statement:

var x;
var carname;

Like any other language, Java script has operators, control structures, with all object oriented
features

Example : Demo of switch

<html>
<body>
<script type="text/javascript">

var d = new Date();

theDay=d.getDay();

switch (theDay)
{
case 5:
document.write("<b>Finally Friday</b>");
break;
case 6:
document.write("<b>Super Saturday</b>");
break;

default:
document.write("<b>I'm really looking forward to this weekend!</b>");
}

</script>

<p>This JavaScript will generate a different greeting based on what day it is</p>

</body>
</html>

Alert Box

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax:

alert(‘sometext’);

32
Confirm Box

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax:

confirm(‘sometext’);

33
Prompt Box

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed
after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box
returns null.

Syntax:

prompt("sometext","defaultvalue");

JavaScript Functions

A function contains code that will be executed by an event or by a call to that function.

You may call a function from anywhere within the page (or even from other pages if the
function is embedded in an external .js file).

Functions can be defined both in the <head> and in the <body> section of a
document. However, to assure that the function is read/loaded by the browser
before it is called, it could be wise to put it in the <head> section.

<html>
<head>
<script type="text/javascript">

function dispMessage()
{
alert("Hello World!");
}

</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onClick="dispMessage()" >
</form>
</body>
</html>
Events

By using JavaScript, we have the ability to create dynamic web pages. Events are actions that
can be detected by JavaScript.

Every element on a web page has certain events which can trigger JavaScript functions. For
example, we can use the onClick event of a button element to indicate that a function will run
when a user clicks on the button. We define the events in the HTML tags.

Examples of events:

34
  A mouse click
 A web page or an image loading

 Mousing over a hot spot on the web page

 Selecting an input box in an HTML form

 Submitting an HTML form

 A keystroke

onload and on Unload

The onload and onUnload events are triggered when the user enters or leaves the page.

The onload event is often used to check the visitor's browser type and browser version, and
load the proper version of the web page based on the information.

Both the onload and onUnload events are also often used to deal with cookies that should be
set when a user enters or leaves a page.

On Focus, on Blur and on Change

The onFocus, onBlur and onChange events are often used in combination with validation of
form fields.

Below is an example of how to use the onChange event. The checkEmail()

function will be called whenever the user changes the content of the field:

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit

The onSubmit event is used to validate ALL form fields before submitting it.

Below lineis an example of how to use the onSubmit event. The checkForm()
function will be called when the user clicks the submit button in the form. If
the field values are not accepted, the submit should be cancelled. The function
checkForm() returns either true or false. If it returns true the form will be
submitted, otherwise the submit will be cancelled:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver and onMouseOut

onMouseOver and onMouseOut are often used to create "animated" buttons.

Below is an example of an onMouseOver event. An alert box appears when an

onMouseOver event is detected:

<a href="http://www.w3schools.com"
35
onmouseover="alert('An onMouseOver event');return false">
<img src="w3schools.gif" width="100" height="30">
</a>

The Throw Statement

The throw statement allows you to create an exception. If you use this statement together
with the try...catch statement, you can control program flow and generate accurate error
messages.

Syntax
throw(exception)

The exception can be a string, integer, Boolean or an object.

Example

The example below determines the value of a variable called x. If the value of
x is higher than 10 or lower than 0 we are going to throw an error. The error
is then caught by the catch argument and the proper error message is
displayed:

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
throw "Err1";
else if(x<0)
throw "Err2";
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high");
if(er == "Err2")
alert("Error! The value is too low");
}
</script>
</body>
</html>

36
Object Oriented Java script

JavaScript is an Object Oriented Programming (OOP) language. An OOP language allows you
to define your own objects and make your own variable types.

Example :: Demo of string object

<html>
<body>
<script type="text/javascript">
var str="Hello world!";

document.write(str.indexOf("Hello") + "<br />");

document.write(str.toUpperCase( ) + "<br />");

</script>
</body>
</html>

Example :: Demo of Array objects

<html>
<body>

<script type="text/javascript">

var a = new Array(3);

a[0] = "java";
a[1] = "C";
a[2] = "CPP";

var b = new Array(3);

b[0] = "Oracle";
b[1] = "Sybase";
b[2] = "SQL";

document.write(a.concat(b));

</script>
</body>
</html>

37
Example :: Demo of Date objects

<html>
<body>

<script type="text/javascript">
var c = new Date;

with ( c )
{
document.write( “day:” + getDate() + “month:” + getMonth() + “year:” +
getYear() );

document.write( “hours:” + getHours() + “min:” + getMinutes() + “Sec:” +

getSeconds() );

</script>
</body>
</html>

The Navigator Object

The JavaScript Navigator object contains all information about the visitor's browser. We are
going to look at two properties of the Navigator object:

 appName - holds the name of the browser

 appVersion - holds, among other things, the version of the browser

Example
<html>
<body>
<script type="text/javascript">

var brow = navigator.appName;

var b_version = navigator.appVersion;

var ver = parseFloat(b_version);

document.write("Browser name: "+ brow);

document.write("<br />");
document.write("Browser version: "+ ver);

</script>
</body>
</html>

38
What is a Cookie?

A cookie is a variable that is stored on the visitor's computer. Each time the same computer
requests a page with a browser, it will send the cookie too. With JavaScript, you can both
create and retrieve cookie values.

Examples of cookies:

 Name cookie - The first time a visitor arrives to your web page, he or she must fill in
her/his name. The name is then stored in a cookie. Next time the visitor arrives at your
page, he or she could get a welcome message like "Welcome John Doe!" The name is
retrieved from the stored cookie


 Password cookie - The first time a visitor arrives to your web page, he or she must fill
in a password. The password is then stored in a cookie. Next time the visitor arrives at
your page, the password is retrieved from the cookie

 Date cookie - The first time a visitor arrives to your web page, the current date is
stored in a cookie. Next time the visitor arrives at your page, he or she could get a
message like "Your last visit was on Tuesday August 11, 2005!" The date is retrieved
from the stored cookie

Create and Store a Cookie

In this example we will create a cookie that stores the name of a visitor. The first time a
visitor arrives to the web page, he or she will be asked to fill in her/his name. The name is
then stored in a cookie. The next time the visitor arrives at the same page, he or she will get
welcome message.

First, we create a function that stores the name of the visitor in a cookie variable:

function setCookie(c_name, value, expiredays)

{
var exdate=new Date();

exdate.setDate( exdate.getDate() + expiredays );

document.cookie=c_name+ "=" + escape(value) +

((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

The parameters of the function above hold the name of the cookie, the value of the cookie,
and the number of days until the cookie expires.

In the function above we first convert the number of days to a valid date, then we add the
number of days until the cookie should expire. After that we store the cookie name, cookie
value and the expiration date in the document.cookie object.

Then, we create another function that checks if the cookie has been set:

39
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");

if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);

if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

The function above first checks if a cookie is stored at all in the document.cookie object. If the
document.cookie object holds some cookies, then check to see if our specific cookie is stored.
If our cookie is found, then return the value, if not - return an empty string.

Last, we create the function that displays a welcome message if the cookie is set, and if the cookie is not
set it will display a prompt box, asking for the name of the user:

function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");

if (username!=null && username!="")

{
setCookie('username',username,365);
}
}
}

All together now:

<html>
<head>
<script type="text/javascript">

function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)

40
 {
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);

if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>

The example above runs the checkCookie() function when the page loads.

Example :: alert after 5 seconds

<html>
<head>
<script type="text/javascript">

function timedMsg()
{
var t= setTimeout(" alert( '5 seconds ' ) " , 5000);
}

41
</script>
</head>

<body>
<form>
<input type="button" value= "Display timed alertbox!" onClick = "timedMsg()" >
</form>

<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>
</html>

Example : Validation of input fields

<html>

<head>
<script type="text/javascript">

function validate()
{
var fage;
fage = document.biodata.age.value;
if (fage < 20 || fage > 58)

{
alert(‘age incorrect .. enter again’);
return false;
}
indin = document.biodata.mail.value.indexOf(“@”);

if (indin == -1)

{
alert("email incorrect .. enter again”);
return false;
}

return true;

</script>
</head>

<body>

<form name = “biodata” onSubmit = “return validate() “ >

Enter mail-id: <input type = “text” name = “mail” >

Enter age : < input type = “text” name = “age” >

<input type="submit" value="Click" >

</form>

42
</body>
</html>

Example :: Demo of Document Object

<html>
<head> <title> order form </title>

<script language= "javascript">

function alerTv( )
{
s = document.tvform.tvsize.value;
alert(‘u wany a TV of size=’ + s);
}

function alerRef( )
{
s = document.reffrom.refcap.value;
alert(‘u wany a Refrig of size=’ + s);
}

</script>
</head>

<body>
<form name = “tvform” >
<h2> Television order </h2>

Screen Size: <input type = text name = tvsize >

<input type="button" value="OK" onClick = “alerTv( )”>

</form>

<hr> <br>

<form name = “refform” >

<h2> Refrigerator order </h2>

Ref Capacity: <input type = text name = refcap >

<input type="button" value="OK" onClick = “alerRef( )”>

</form>

<hr>

</body>
</html>

Example : Demo of Forms and Elements ( Radio )

43
<html>
<head> <title> Foreign Exchange converter </title> </head>

<body>
<script language= "javascript">
var f,a, val = 0, res = 0;
function convert(f,a)
{
val = parseFloat(f.rupees.value);

if ( a.match(“US”) )
{
res = val/40;
alert(‘in US dollars=’ + res);
}

if ( a.match(“SG”) )
{
res = val/28;
alert(‘in Singapore dollars=’ + res);
}

if ( a.match(“UK”) )
{
res = val/70;
alert(‘in UK pounds=’ + res);
}
}
</script>

<form name = “forexform” >

<h2> Foreign Exchange Converter </h2>

Enter Rupees: <input type = text name = rupees >

<input type="radio" name=currency onClick=convert(this.form,”US”)> USdoller

<input type="radio" name=currency onClick=convert(this.form,”SG”)> Sigdoller
<input type="radio" name=currency onClick=convert(this.form,”UK”)> UKpound

</form>
</body>
</html>

Example : Demo of Forms and Elements ( Select Box )

<html>
<head> <title> Telephone directory </title></head>

<body>

<script language= "javascript">

44
 var i,f,phone;

function getnumber(f )
{
phone = new Array(2567835, 2727311,2456563, 2345653,2897654,2342211);

i = f.nameBox.selectedIndex;

f.PhoneNumber.value = phone[i];

}
</script>

<form name = “telform” >

<pre > < center> <hr><br> <h2> Telephone services </h2>

<pre> <center> <hr> <br> select name and pres button to get number
<br>

Enter Name: <select name = “nameBox” >

<option> Prasad </option>

<option> Pushkal </option>

<option> Preethi </option>

<option> Anuj </option>

<option> Kumar </option>

<option> Sashi </option>
<br>

Phone Number : <input type=text name=PhoneNumber> <br>

<input type = button value = “GetNumb” onClick=getnumber(this.form)>

<br> <br> <hr> <br>
</form>
</body>
</html>

Event Handling :

It is an activity that happen on the web document. Some examples are

1. Html document is loaded to the browser

2. A button on the web page is clicked
3. A key is pressed
4. A radio button is selected
5. Mouse dragged

The following are the list of some events recognized by javascript

45
 EVENT TARGET CAUSE

onDblClick Document use double clicks with left button of

mouse

onKeyPress Doc user continue pressing a key

Image
Link
Textarea

onLoad Doc page completes loading into browser

Applet
Frameset
Image

onFocus Window User brings input focus to the target

Frame
All elements

onMouseDown Button, Doc,Link User depresses mouse left/right

button

onMouseOut link, area, User moves mouse out of focus

onSubmit form User submits a form

onUnload Doc,Frameset,image User exits to a diff page

onHelp window User hits F1 key

onChange textfield,textarea,selectlist User changes the value of a field

Example : Demo of DoubleClick Event

<html>
<h4> Java Tutorial </h4>
<h5> Sample material is given for the students to learn </h5> <br> <br>

Double click any where on this document

<body OnDblClick = “ alert( ‘ Hi u have double clicked now ‘ )” >

</body>
<html>

46
Example : Demo of Help Event

<html>
<h4> Java Tutorial </h4>
<h5> Sample material is given for the students to learn </h5> <br> <br>
<body>
Enter Name : <input type = “text” name = “vname” >

OnHelp = “ alert( ‘ Enter Name \n as per your SSC\n marks list ‘ )” >

</body>
<html>

Example : Demo of Key Press Event

<html>
<h4> Java Tutorial </h4>
<h5> Sample material is given for the students to learn </h5> <br> <br>

Key Press any where on this document

<body OnKeyPress = “ alert( ‘ Hi u have presses a key now ‘ )” >

</body>
<html>

47
Example : Demo of KeyUp Event

<html>
<h4> Java Tutorial </h4>
<h5> Sample material is given for the students to learn </h5> <br> <br>

PressKey any where and release it on this document

<body OnKeyUp = “ alert( ‘ Hi u have released a key now ‘ )” >

</body>
<html>

Example : Demo of Change Event

<html>
<head> <title> Telephone directory </title>
<script language= "javascript">
</head>
<body>
var i,f,phone;
function getnumber(f )
{
phone = new Array(2567835, 2727311,2456563, 2345653,2897654,2342211);
i = f.nameBox.selectedIndex;
f.PhoneNumber.value = phone[i];

}
</script>

<form name = “telform” >

<pre > < center> <hr><br> <h2> Telephone services </h2>

<pre> <center> <hr> <br> select name to get number

<br>

Enter Name: <select name = “nameBox” OnChange = getnumber(this.form) >

<option> Prasad </option>

<option> Pushkal </option>

<option> Preethi </option>

<option> Anuj </option>

<option> Kumar </option>

<option> Sashi </option>
<br>

Phone Number : <input type=text name=PhoneNumber> <br>

</form>
</body>
</html>

48
Example : Demo Browser Object

<html>
<body>
<script type="text/javascript">
document.write("<p>Browser: ");
document.write(navigator.appName + "</p>");

document.write("<p>Browserversion: ");
document.write(navigator.appVersion + "</p>");

document.write("<p>Code: ");
document.write(navigator.appCodeName + "</p>");

document.write("<p>Platform: ");
document.write(navigator.platform + "</p>");

document.write("<p>Cookies enabled: ");

document.write(navigator.cookieEnabled + "</p>");

document.write("<p>Screen Resolution: ");

document.write(screen.width + "</p>" + “<p>” + screen.height + “</p>” );

</script>
</body>
</html>

Example : Demo of location object and onClick event

<html>
<head>
<script type="text/javascript">

function pageload()
{
Location.href = ‘http://www.sun.com’ ;
}

</script>
</head>

<body>
<form>
<input type="button" value = "sunmicro" onClick = "pageload()" >
</form>
</body>
</html>

49
Example : Demo of onLoad, onUnLoad Event

<html>
<h4> Java Tutorial </h4>
<h5> Sample material is given for the students to learn </h5> <br> <br>

<body onLoad = alert(“welcome”) onUnLoad= alert(“visit again”) >

<h3> study of java makes your career superb </h3>

</body>
</html>

Example : Demo of Mouse Event

<html>
<h4> Andhra University </h4>
<h5> PG Studies </h5> <br> <br>

<body onLoad = alert(“welcome”) onUnLoad= alert(“visit again”) >

< a href = www.Andhrauniversity.info

onMouseOver= “ window.status = ‘good choice’; return true; ”

onMouseOut = “window.status = ‘’ ; return true ; > AU </a>

</body>

</html>

Example : Demo of History Event

<html>
<head> <title> Demo of History Object </title>

<script language= "javascript">

function f1( )
{
k = history.length;
alert(“len=”+ k);
}

function f2( )
{
history.back;
}

function f3( )
{
history.forward;

50
 }

function f4( )
{
history.go(-2);
}

</script>
</head>
<body>

<form >

<input type="button” value = “length” onClick = “f1( )”>

<input type="button” value = “back” onClick = “f2( )”>
<input type="button” value = “forward” onClick = “f3( )”>
<input type="button” value = “Go” onClick = “f4( )”>

</form>
</body>
</html>

Example : Income Tax calculation

<html>
<head> <title> IT calculation </title>
<script type="text/javascript">

var ded, tax, totinc, anninc;

function findIT(f)
{

anninc = parseFloat(f.ai.value);
ded = anninc/3;

if(ded > 12000)

ded = 12000;

if(totinc <= 25000)

tax = 0;

if(totinc> 25000 && totinc <= 100000)

tax = 1750+ 0.3*(totinc-25000);

if(totinc> 100000
tax = 29250 + 0.3*(totinc-100000);

f.tax.value = tax;
}
</script>
</head>

51
<body>
<form >

Enter Your annual Income <input type = “text” name = “ai” >

<br><hr>

< input type = “button” value = “Compute Tax”

onClick = “findIT(this.form)”>
<br><hr>

Your Tax is : <input type="text" name = “tax” >

<br><hr>

</form>
</body>
</html>

Example : On line Room reservation

<html>
<head> <title> Room Reservation </title>

<center> <h1> Room reservation at Hotel Grand Bay </h1> </center>

<script type="text/javascript">

var f,a;

function check(f)
{
a = window.event.keyCode;

if( (!(a>=65 && a<= 90)) && ( !(a>=97 && a<= 122) ))
alert( “type name in characters” ) ;

function checknum(f)
{
a = window.event.keyCode;

if( (!(a>=48 && a<= 57))

alert( “Enter in digits” ) ;

}
</script>
</head>

<body>
<form >

52
 Enter Name : <input type = “text” name = “namei”
onKeyPress = “check(this.form)” >
<br>

Enter Address : <input type = “textarea” name = “addi” >

<br>

Enter Phone : <input type = “text” name = “phonei”

onKeyPress = “checknum(this.form)” >

Type of Room :

single: <input type="radio" name="roomi" checked value="chk">

<br>
delux: <input type="radio" name="roomi" value="chk">
<br>
double: <input type="radio" name="roomi" value="chk">

Enter Days : <input type = “text” name = “daysi”

onKeyPress = “checknum(this.form)” >

</form>
</body>
</html>

53