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:

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.

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
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

Optical
OC-24 1.244Gb
Carrier
Optical
OC-48 2.488Gb
Carrier

Web Hosting Server Technologies

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.
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
 Defines the document's
<body>
body
<h1> to Defines header 1 to header
<h6> 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> 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>

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>

<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>

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>
<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">

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>
</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>

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>
<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.

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

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: prasadreddy.vizag@gmail.com 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>

<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

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>

<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>
<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
HEX RGB
#FF00 rgb(255,
RED 
00 0,0)
 GRE #00FF rgb(0,25
EN 00 5,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
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:

<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:

<!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
 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:

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">
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
{
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

An internal style sheet should be used when a single document has a

unique style. You 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. 

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)}
</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>

n 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)
{
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);
}
</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>

</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 )

<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">

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

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>
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>
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>
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>
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;
}

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>

<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 >

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>