Fundamentals and Introduction to XHTML

Web Programming 1-3

There are some privately owned internet service providers from which we can
hire the internet services.

1.1.3 Internet Protocol (1P) Address

Definition : Each host on a network is assigned a unique 32-bit logical address that is
divided into two main parts : the network number and the host number. This address
is called IP address.
The P address is grouped four into 8 bits separated by dots. Each bit in the octet
has binary weight
27 26 25 24 23 22 21 20

128.64.32 .16.8. 4. 2.1

As we know the IP address is divided in two categories network number and host
number.
Network number Host number

There are 5 classes based on two categories viz. A, B, C, D and E.

IP Address Class Format

Range Purpose
1 to 126 Very few large organisations use this class
Class A N.H.HHH
addressing
Class B N.N.HHI 128 to 191 Medium size organisations use this
addressing
Class C N.N.N.H 192to 223 Relatively small organisations use this class.
This class address is used for multicast
Class D 224 to 239
groups.

Class E 240to 254 This class addressing is reserved for

experimental purpose.
Here N stands for network number and H stands for host number. For instance
in
class C first three octets are reserved for network address and last 8 bits
denote
host address.

1.1.4 Domain Names

Each computer is assigned by a unique numerical address called IP address. This
is because
computer can remember the numerical addresses but humans can not
remember numerical addresses, but they can remember names in better
way.
Hence the concept of domain name has come up.

TECHNICAL PUBLICATIONS An up thrust for knowledge

Web Programming 1-4 Fundamentals and Introduction to XHTMI
Definition : Domain names are the unique names of host computers that can be
instead of numerical addresses. used

For example instead of 192.168.1.92 we can use

www.mycomp.com
In Domain Name Servers, instead of
using the IP address the name of the
computer is used to access that computer
system. But two names can be the same
Hence to uniquely
identify your computer the name must be created using DNS
hierarchy.
Some commonly used domain names are

Domain Purpose
names
Com Commercial organization

Government organizations
edu Educational
institutes/organizations
International organization

Network group
org Non profit organization

Milftary group/organizations

Sub domain name used to refer

India
wwwwww

Sub domain nanme used to refer

United Kingdom

Sub domain namne used to refer

Japan

The Internet logically

arranges the domain names in an hierarchical form.
There are some top level DNS such as com,
org, edu, mil, net, uk, in and so on.
Then each domain name is further divided into sub-domains then sub-sub-
domains and so on.
For example the
complete path for http://www.cse.tec.ac.in can be uniquely traced
out with the
help of domain name space.
ww.wwdan

wwwwwwwwwwwww
TECHNICAL PUBLICATIONS- An up thrust for
knowledge
 Web Programming 1 - 5 Fundamentals and Introduction to XHTML

com 9ov
org edu
UK
in
ac
redif
yahoo gmail tec pub

cse ece it
Parth Anand Arun Anuradha
Fig. 1.1.1 Domain name space
Review Questions
1. Explain domain names with an example.
Question Bank, Marks 5
2. Define Internet.
Question Bank, Model Question Paper, Dec:-17, Mark 1
3. Define Internet. Explain briefly domain name.
May-12. Marks 5
1.2 www
World Wide Web (Www) is collections of software and
used to access the resources over the network. corresponding protocols
The world wide web is information system in which various documents
a

containing information are interlinked together. User can access this information
or write the information via
computers. This information is typically
stored on the
web pages and through web browsers we can access these web pages.
The web pages may contain the information in the form of
text, audio, video,
images and graphics. We can navigate between the web pages using hyperlinks.
1.2.1 Origins
The concept of WwW was introduced by Sir Tim Berners-Lee the
contractor at
the European Organization for Nuclear Research (CERN), Switzerland in
1980.
He built a personal database of people and software models and used
that each new page of information was linked to an existing page.
hypertext so
In 1990, Berners-Lee introduced the tools such as HyperText Transfer Protocol
(HTTP), HyperText Markup Language (HTML) and the web browser. This is the
time when the first website http://info.cern.ch/was built.

TECHNICAL PUBLICATIONS An up thrust for knowledge

Web Programming 1-6 Fundamentals and Introduction
XHTM to
Web Programming
During 1992-1995, along with HTTP protocol a new protocol named Gopher
3. Google Chrome
protocol which provided access to content through hypertext menus presented as
4.
a file system rather than through HTML files. In 1993 a new web browser
with Opera
graphical user interface Mosaic got introduced. 5.
Netscape Navigator
In 1994, the World Wide Web Consortium (W3C) was founded by Berners-Lee at Review Question
the Massachusetts Institute of Technology (MT) with support from the Defense
Advanced Research Projects Agency (DARPA). This organisation was built
creating standards and recommendations to improve the quality of the Web
for 1. Define Web Browser
Berners-Lee made the Web available freely, with no patents. The World
Wide
Web Consortium (w3C) decided that their standards must be based on
free technology, so they can be
royalty- 1.4 Web Servers
easily adopted by anyone. And then at the end of
1994 a large number of websites got activated with
popular web services. Definition : Web server is a prog
HTTP protocol. It responds the clie
During 1996-1998, trade marketing started using WWW. The term E-commerce
got introduced during this period only. 1.4.1 Web Server
Operations
During 1999-2000, many entrepreneurs started selling their ideas using the The web server and we
dotcom boom.
protocol.
From 2002- tilldate, the WwW has got an evolving nature due to various When web server starts its
development such as online-booking, efficient search engines and agernt based ready to accept the request
technologies, Facebook, social networking sites and so on.
Web client opens a netwo
1.2.2 Web or Internet ? web server. The web serve
The term internet and WwW is often used interchangeably, but these The primary task of web
are two
different terms. accept HTTP command t
these commands.
The internet is collection of computers and other devices (such as
scanners etc.) connected together whereas World Wide Web
printers, When the request from cl
(Www) is collections name or a program name
of software and
corresponding protocols used to access the resources over the to the client. And if it is
network.
The world wide web contains
output is given to the clie-
huge amount of documents, images and other
resources which can be accessed
using the hyperlinks. 1.4.2 General Server Charac
File structure:
Thus people use internet through the Web. There are two types of d
documentroot and sery
1.3 Web Browser May-14. Dec.-17, Marks 7 software required for ser

Definition The files that are stored

:Web browser is a
application software which people use for retrieving clients using the top-lev
presenting and traversing information
present on the web. root directly.
Various commonly used web browsers are - Normally server stores
Internet explorer 2 Mozilla Firefox document root.

TECHNIC

TECHNICAL PUBLICATIONS- An up thrust for knowledge

 Web Programming 1-7 Fundamentals and Introduction to XHTML
3. Google Chrome

4. Opera
5. Netscape Navigator
Review Question

1. Define Web Browser Question Bank, Model Question Paper, May-14

Dec-17, Mark 1
1.4 Web Servers May-13, 14, Dec.-12, 16. 17. Marks 5
Definition : Web server is a program that processes requests made by clients using
HTTP protocol. It responds the clients by presenting requested web pages or files.

1.4.1 Web Server Operations

e The web server and web client communicate with each other using HITP
protocol.
us When web server starts its execution, it informs operating system that it is now
sed ready to accept the requests on specific port.
Web client opens a network connection with web server and sends the request to
web server. The web serverlistens the web client requests on particular port.
The primary task of web server is to monitor communications on specific port,
two
accept HTTP command through that port and perform operations specified by
these commands.
nters, When the request from client is received by the server it is translated either in file
tions name or a program name. If it is a filename, then the requested file is transferred
er the
to the lient. And if it is a program name, then the program is executed and its
outputis given to the client.
other
1.4.2 General Server Characteristics
File structure
There are two types of directories for the server. The roots of these directories are
documentroot and server root. These directories and the subdirectories store the
arks 7 software required for server execution.
The files that are stored directly in the document root directory are available to the
rieving,
clients using the top-level URL. Normally the clients do not access the document
root directly.

Normally server stores the documents that are readable to its client outside the
document root.
TECHNICAL PUBLICATIONS An up thrust for knowledge
Web Programmin9 1-8 Fundamentals and Introduction to XHTM
The virtual document trees are the areas from which the server can serve t
the
documents to its clients.
If the documents are stored in the subdirectories then cient can refer to these weh
documents using the URL with a particular file path to that directory from
he
document root directory.
Some servers allow the access to the web documents that are in the document TOnt
of other machine. Such servers are called proxy servers.

Web servers support various protocols such as HTTP, FTP, Gopher, News and
mail.

All the web servers can interact with the database systems with the help of
Common Gateway Interface (CG) or server side script.

1:4.3 Apache
Itis an excellent server because of its two important features Reliability and
Efficiency.
Secondly it is more popular because it is an open source software. That means it is
freely available to anybody. Apache web server is best suitable for UNIX systems
but it can also be used on Windows box. The
apache web server can be configured
as per the
requirements using the file httpd.conf. This
file is present in the Apache
software package.

1.4.4 11Ss
T h e Internet Information Services orInternet Information Server is
web
akind of
server provided by Microsoft. This server is most
popular on Windows
platform.
Following are some differences between Apache and IS servers
Sr. Apache Web Server
1ISWeb Server
No.
Apache web server is useful on both
based systems and on Windows platform.
UnixIS web server is used on Windows platform
2 Itis an open source product
is a vendor specific product and can be used on
windows products only.
3 The Apache web server can be controlled by
For IS server the behaviour is
moditying the window based controlled
editing the configuration file htpd.con Dy
managernent
programs called HS snap in. We can accesS
Snap in through the Control-Panel- Administratve
Tools

TECHNICAL PUBLICATIONS An up thrust for

knowledge
Web Programming 1-9 Fundamentals and Introduction to XHTML

Review Questions
1. Define web server.
Question Bank, May-14, Dec.-17, Mark 1
2. Explain the operation of web server.
Question Bank, May-13. Dec,-16. Marks 5
3. Illustrate the general server characteristics. Question Bank, Dec.-12, 16, Marks 5
4. Explain the file structure of wveb server. Question Bank,Marks 5
5. Explain the operation of web server with its file structure. Question Bank, Marks 10
1.5 Uniform Resource Locator Dec.-13, May-16, Marks 5
For identifying the documents on the internet the uniform or universal resource
Locator i.e. URL is used.

There is variety of URL depending upon the type of resources.

1.5.1 URL Formats

The general format of URL is -

Scheme:Address
That is

protocol://username@hostname/path/filename
The scheme specifies the communication protocol. Different schemes have
different schemes have different forms of addresses.
Various schemes that are used are http, ftp, gopher, file, mailto, news and so on.

The most commonly used protocol for web browser and web server
communication is hypertext transfer protocol(HTTP). This protocol is based on
request-response mechanism. This protocol handles the documents that are
created using eXtensible Hypertext Markup Language (XHTML). Using http the
Address part of URL can be written as follows -

I/Domain_name/path to_Document 2
tder
file is another most commonly used scheme in URL. This protocol allows to reside hon
the document in the client's machine from which the web browser is making out
the demand. Due to this the actual document is not available only for its visibility
but it can be tested. Using file the Address part of URL can be written as follows-

file://path-to-document
The hostname is the name of the server computer that stores the web documents.

TECHNICAL PUBLICATIONS- An up thrust for knowledge

 Fundamentals and lntroduction
jon to
to XXHT
Web Programming. 1- 10
Web gramming
Lhe default port number for the http protocol is 80.

Any URL does not allow the spaces

in it. But there are some special character s tha MIME is avery flexib
can be present in the URL. These characters
are ampersand & or percentaooo or
document
in
1.6.1 Type Specification an
n eem=

1:5.2 URL Paths The MIME messages

to the particular file Drec
The path to the web document is similar to the path
esentin specific data. MIME
the folder. In this path the directory names and files are separated by the separa content consists of
characters. The character that is used as a separator is slash. Unix system .
tw
forward slash whereas the windows system makes use of backward sla_h
se
example -
Contents
http://www.mywebsite.com/mydocs/index.htmnl

The URL includes all the directories path to the file is

path that along the calle For example The conte
the complete path.
type of e-mail content is im
Sometimes the base URL path is specified in the configuration file of the server.
such a case we need not have to specify the complete path for accessing t
Following table lists va
particularfile such a path is called the partial path. For example -

Content
http://www.mywebsite.com a2 text/htmi
This indicates that the file
mydocs/index.html is specified in the configuration file. inage/gif
Review Questions audio/mid
1. Discuss URL format with its application
different paths. Question Bank, Marks 5
2. Explain URL with general format. Example of MIM
Dec.- 13, May-16. Marks 5
HITP/1.0 200 Ox
1.6 Multipurpose Internet Mail Extension (MIME) Date: Thu, 14 Dec. 2016 0
Server: Apache/1.1.0
Nov.-11, May-12, 16, Marks Content-type: image/jpes
On the Internet, data is sent in the form of bytes. The Set-Cookie: Apache=loc
these bytes and arranges this data in the receiving software collec
proper order. But from these bytes Content-length: 32719
data it is not clear whether it is text ? Or whether Last-modified:Fri, 14 De
they represent a movie ? Then for a user at the they are picture ? Or whethe
a
Here note that thec
"How is it possible to know what the data is receiving end the question arise
addition to the bytes some additional few ?" On the other hand, suppose,
bytes are sent along with the actual dau
telling what the data is then the receiver will
1.6.2 Experimental
of data or message. This is what MIME easily come to know about the tyP Sometimes the
does!! It tells what is
the message contents can be used in an in a message so tn
The experimen
appropriate way.
Definition: Multipurpose Internet Mail Extensions The web prov.
specifies how messages must be formatted
(MIME) is an open standard. that particular
so that they can be
different e-mail systems. exchanged betwee

TECHNICAL PUBLICATIONS- An up thrust for

knowledge
 1-11 Fundamentals and Introduction to XHTML
Web Programming
MIME is a very flexible format, permitting us to include virtually any type of file
or document in an email message.

1.6.1 Type Specification

The MIME messages can contain text, images, audio, video, or other application-
data. MIME more than 100 different types of
content. The
specific supports
content consists of two levels
content is text, image or movie?
Type denotes whether the

Contents-

Subtype denotes whether the content is doc, rtf, html file or

whether it is tiff, jpg or git imagee

For example The content of some image can be specified as Imageljpg. This means thee
bype of e-mail content is image and subtype is jpg image.

Following table lists various content types used. by MIME.

Content Type Meaningg
Marn
text/htm HTML text as on the World Wide Web

image/gif a common ímage in gif format

audio/midi midi music format for synthesizers

appication/pdf indicatesPDF document

Example of MIME

HTTP/1.0 200 OK
Date: Thu,14Dec. 2016 00:04:30 GMT
Server: Apache/1.1.0
Content-type: image/jpeg
Set-Cookie: Apache=localhost349860630670983; path F/
Content-length: 32719
Last-modified: Fri, 14Dec 201618:45:59 GMT
Here note that the content type is image which is actually a jpeg image.

1.6.2 Experimental Documental types

Sometimes the experimental subtypes are used.
The experimental subtype starts withx
in the MIME specification so
The web providers can add the experimental subtype
that particular data can be available to others.

TECHNICAL PUBLICATIONS- An up thrust for knowledge

 Web Programming 1-12 Fundamentals and Introduction to
HT M
Supporting web
we programs or applications called plug-ins are then manade available
by the web providers.
Review Questions
1.
Explain MIME with its type specification. Question Bank. Marks 5
2. What is MIME ?
Explain different MIME content types. Nov.-11, May-16, Marks 5
. What is MIME ? Explain briefly MIME type specification and experimental MIME type

May-12, Marks 5
1.7 The Hypertext Transfer Protocol Nov.-11, Dec.-16, 17,Marks 5
Hyper Text Transfer Protocol (HTTP) takes part in web browser and web
communication. Hence it is called a communication
server
HTTP protocol is that it follows the
protocol. The basic feature
of
request
response model. The client
makes a
request for desired web page by giving the URL in the address bar. This
submitted to the web server and then web server request is
gives the response to the
browser by returning the web
required
web page.
1.7.1 HTTP Request Message Structure
The basic structure
of request message is given by following general form-
<Start line>

<Header fields>

<Blank Line>

<Message Body>
Let us discuss this structure in detail

<Start line>
The start line consists.of three parts which are separated a
by single space. These parts
are

1) Request method 2) Request-URI 3) HTTP version

Let us discuss them in detail.

TECHNICAL PUBLICATIONS- An up thrust for

knowledge
roduction to XHTMI
Web Programming 1-13 Fundamentals and Introduction to XHTML
n made available
1, Request method: The method defines the CONNECT method which is used during
the web browser and server communication. It is always written in Upper Case
letters. The primary method in HTTP is GET. The GET method is used when -

1. You type a URL in address bar.

3ank, Marks 5
2 When you click on some hyperlink which is present in the document.
y-16. Marks 5
3. When browser downloads images for display within a HTML document.
pe.
There is another commonly used method and ie. POST. The POST method is
ay-12, Marks 5 typically used to send an information collected from a user form. Various methods used

16, 17,Marks 5 by HTTPare asgiven below n -

postme hod Colou he unbema oOn n

oCahonbu

HTTP Description ainSeCo

er and web server
Method
he basic feature of
The client makes a Thismethod means retrieve theinformation requested by theuser.
bar. This request is GE The GET method is used to retrieve information from a specified URI
and is assumed to be a safe, repeatable operation by browsers.
esponse to the web
The POST methodis used torequest theserverfor desired web page and
therequest made is accepted as a new subordinate of the resource
identified
POST The POST method is used for operations that have side effects and
al form- cannot be safely repeated. For example, transferring money from one
bank account to another has side effects and should not be repeated
without explicit approval bytheuser.
The HEAD method is identical toGET. The only difference is thatthe
server should not return a message-body in the response. Themeta-
HEAD information contained in the HTTP headers in response to a HEAD
request shouldbesimilar to the information sentin response to a GET
request.

This method supports for the specified URL. It can be used to check the
OPTION functionality of a web server by requestinginstead of a speciic
resource

PUT This methoduploads a representation of the specified resource.

DELETE Thismethodisuseful in deleting thespecifiedresource.

gle space. These parts Whenrequest is made usingTRACEmethodtheserverechoes back the
TRACE received request sothat aclient can see what intermediate servers are
adding or changing in the request
4
Request URI:The Uniform Resourçe Identifier (UR) is a string used to identify the
names or resources on the Internet. The URI is a combination of URL and URN. The
RL stands for Uniform Resource Locator and URN stands for Uniform Resource

TECHNICAL PUBLICATIONS An up thrust for knowledge

 Fundamentals and Introduction to Xu
Web Programming 1- 14
XHTM
Tlhe web address denotes the URL
and specific n a m e of the place or aa nae
persono
Name.
item denotes the URN. For example
urm:ISBN 978-81-8431-123-2

specifies the address of some book.

the colon: denotes the scheme and
Every URI consists of two parts, the part before
the part after colon depends upon the scheme. The URls are case insensitive but genersl.
written in lower case. If the URI is written in the form of http: then it is both an URI ana
URL but there are some other URI which can also be used as URL. For example

Intended Server
URL
fp//ftp.mywebsite.com/index.bxt file can be located on FTP server

telnet://mywebsite.org Telnet server

mailto:mmyself@mywebsite.org Mail box

htip:/7www.mywebsite.com Web server

3. HTTP version : The first HTTP version was HTTP/0.9 but the official version of HITTP
was HTTP/1.1

Header Fields and message body

The host header filed is associated with the http request. The header fields are in the
form of field name and field value. Thus typical structure of http reguést is given be
following example-
Start Line

GET /pub/WwW/HTTP/1.1-
Host:www.vtubooks.comm
accept:text.html,video/x-mng.image/png, image/jpeg
accept-language.en-us, en
Header Flelds
connection:keep-alive
keep-alive:500
content-length:10

hello world
Blank Line

Message body
Fig. 1.7.1 HTTP request message structure

www.wwwnwnivwnwwwwwwwawwerana

TECHNICAL PUBLICATIONSAn up thrust for knowledge

inyi
 XHTML
Fundamentals and Introduction to
1-15
Web Programming

Message Structure
1.7.2 HTTP Response message
structure. It is as
similar to the request
of response message is
The structure
follows
< Status line>

<Header fields>
< Blank Line>

<Message Body >

this structure in detail.
discuss
Let us
fields.
of three
<Status line>
message.
It consists
the request
similar to the start line in
is
Status line reasonphrase
Status code
HTTP version code is a
status
HTTP/1.1. The form
v e r s i o n such
as
text string
the HTTP is in the phrase
version denotes The reason
HTTP
The the type of r e s p o n s e .
code indicating s t a t u s code.
numeric about the
information
the
and presents
HTTP/1.1 200 OK
For example-

Reason phrase
Status code
HTTP version
codes.
used s t a t u s
some
commonly
table explains
Following

Description
Reason Phrase

Status successful
request
for
response
Code This is a
standard

and a new resource

is being
OK is fulfilled
that the request
200 It shows
processedd
Created created.
for processing
butisnot
201 is accepted
When fhe request code
denoted by this status another
yet is
some
Accepted
r e s o u r c e
is moved at
202 URI for
requested
The
the
Moved Permanently
location. password and
is protected by s o m e
301 r e s o u r c e

requested password
The
provided any server is
U n a u t h o r i z e d user has not
the serverbut the
is present on
401 requested
resource
The it
to respond
not able
Forbidden

403
An up
thrust for knowledge
PUBLICATIONS-

TECHNICAL
 Web Programming
1- 16 Fundamentals and Introduction to XHT
Therequested resource is not sent currenty but may b
Not Found
404 availablein future
It is a generic error meSsage thal appears due to softwa
500 Internal Server Error
internalfailure

<header field > and <

message body>
The
header field in response
message is similar to that of
request message.
message body consists of TH
response message.
For example
HTTP/1.1 200 OK
Date: Fri, 1 Jan 2010 07:59:01
Server: GMT
Apache/2.0.50 (Unix)
mod perl/1.99 10 Perl/v5.8.4
mod_ssl/2.0.50 OpenSSL/0.9.7d
Last-Modified: Mon, 23 Feb 2009DAV/2 PHP/4.3.8
08:32:41 GMT
Accept-Ranges: bytes
Content-Length: 2010
Content-Type: text/html
IDOCTYPE HTML PUBLIC "-//w3C//DTD
htm html HTML 4.01 Transitional//EN"
Review Questions
1. Illustrate the HTTP
protocol's request and response phases.
2.
Explain the HTTP protocol's request and Question Bank. Marks 5
response phases with an
example for each.
Question Bank. Model Question
3. Explain request phases of HTTP. Paper, Dec.-17, Marks 10
Nov. 11, Dec. 16, Marks 5
1.8 Security
Definition : Web security is the Dec.-12, 14, Marks 5
between web server and
protection of information
web client. assets that can be accessed
During web client server
can illegally share or use
communication, there are chances that the web brows-
the sottware
server can make an unauthorized use of present on the web
server.
information present on the Similarly
wE
Tf web browsers or web clients have web client.
problems can be severe. complex software systems then the securi
Security Issues
Following are the most commony focused
security issues -

TECHNICAL PUBLICATIONS - An up thrust for

knowledge
Web Programming
1-24 Fundamentals and Introduction to
XHT
Every XHTML document must begin with an xml declaration element that simnl
identifies the document because it is based on XML. Thus in this line the Xp
version is specified 1.0 and
as encoding as utf i.e. the Unicode encoding.
Note that the XHTML document consists of some
strings enclosed within angular
brackets. Such strings are called tags. Hence various
tags that are written in above
document are <htm>, <h2>, head> and
<body>.
The XHTML document should be written within <html> and
<html>, The
<html> indicates the start of html and </html> denotes end of htm
program
program. Use of slash (/) in the angular bracket indicates end of that
tag. Note the xnmlns attribute in <html>, specifies the xml namespace for
particula
document and is required in XHTML documents.

1.10.1 Syntactic Difference between HTML and XHTML

The XHTML is
syntactically identical to HTML. But XHTML follows certain
restrictions. These restrictions are mentioned by following difference.
Sr. No. HTML XHTML
1. The HTML tags are case insensitive. HenceThe XHTML is case sensitive and all the tags in
<body> or <BODY> or <Body> are XHTML document must be written in lower case.
treated
as one and the same.

2 We can omit the closing tags sometimes in For every tag there must be a closing tag. Somne
HTML document.
browsers get confused if the closing tag is not given
There are two ways by which we can mention the
cdosing tags
<a href "TajMahal.html" </a>
or
<a href-"Tajmahal.html/
3. In HTML the attribute values it not always In every XHTML document the attribute values
necessary to quote the attribute values. In must be quoted.
fact numeric attribute values are rarely
quoted in HTML Only if some special
characters or white spaces are present in the
attribute values then only it is essential to
put quotes around them in HTML

In HTML there are some implicit attribute In every XHTML the attribute values must be
values. specified explicitly.
5 In HTML even if we do not follow the In XHTML document the
nesting rules strictly it does not cause much
nesting rules
strictly followed. These nesting rules are must be
difference
A form element can not contain another
formelement.
An anchor element does not contan
another form element.

TECHNICAL PUBLICATIONS An up thrust for knowledge

 Fundamentals and lntroduction to XHTML
Web-Programming 1-25
List elemnent can not be nested in the list
elements.
If there are two nested elements then the
inner element must be enclosed first
before ciosing the outer element.

T ext elements can not be directly nested

inform elements.

Review Question

Question Bank, May-14, Marks 5

Mention the diferences
between html and xhtml.
1.

O00
 TML Docume
Java Script and XHTML Doc
2-2
Wet Progamming

2.1 Introduction time its nama

1995. At that
by Netscape in Wa
developed Netscape and then the
joined the
was
JavaScript
Later Sun Microsystems
on
LiveScript. is changed to Javaacript.
And later on its n a m e
developed LiveScript. the users. The Javas
used for interaction with
Srip
JavaScript can be effectively textbox, menuS
and so on. Simple v
such as button,
support form elements calendar can be developed using
JavaScript
applicationssuch as calculator,
JavaScript can access modify h
and

Using Document Object Model (DOM) AHIML documen

Sheets) and contents ot nent
properties of CSS(Cascading Style,
becomes dynamic.
Hence the static web document
the web page betore submitting it h
used to validate the data on
JavaScript are

the server.

2.2 The JavaScript Execution Environment This document is basically

In browser the XHTML document is displayed.
a
the Window object.
displayed in a window. The window is displayed using
of some object. When we create a
In JavaScript all the variables are data properties
are creating a new property
for the Window
global variable then it means we
object.
More than one Window objects can be created in JavaScript. And the globa

variables depend upon the window of its context.

In JavaScript the Document object represents the XHTML document. Every
Window object has a property named document which is reference to the
Document object.
Window object has a properby array frames using which multiple frames can be

displayed.
Every Document object has a property array called forms. Every Form object has
property arrays called elements. These elements contain the elements sucha
buttons and menus.
The Document object also has the property arrays for anchors, links, images and
applets.

2.3 The Document.Object Model Nov.-11, May-16.Dec.-17, Marks 5

The Document Object Model provides a mapping for various component of tne
web document into objects. These objects are accessible by the JavaScript.

TECHNICAL PUBLICATIONS- An up thrust for knowledge

 Web Programming 2-3 JavaScript and XHTML Document

The Document Object Model has been under development by w3C and it is
developed in various levels. These levels are
Level Description

DOM0 This model is supported by the early browsers. This level could support
JavaScript. This version was implemented in Netscape 3.0 and Internet
Explorer 3.0 browsers.

DOM 1 fhis version was issued in 1998 which was focused on XHTML and XML.

DOM 2 This version was issued in 2000 that could specify the styBe sheet. It also
supports the event modeland traversal with in the documents.

This is the current release of DOM specification published in 2004. This

DOM 3
version could deal with XML with DTD and schema, document validations
document viewsand formatting

Basically DOM is an Application Programming Interface(AP) that defines the

interface between XHTML document and application program.| That means,
suppose application program is written in Java and this Java program wants to
access the elements of XHTML web document then it is possible by using a set of
application programming interfaces(API) which belongs to the DOM.
The DOM contains the set of interfaces for the document tree node type. These
interfaces are similar to the Java or Ct++ interfaces. They have objects, properties
and methods which are useful for respected node type of the web document.
Structure of DOM
The documents in DOM are represented using a tree like structure in which every
element is represented as a node. Hence the tree structure is also referred as DOM
tree.

For example:
Consider following XHTML document
<htmi
<head
Stitle>This is MyWeb Page </title
</head
<body>
sh1>Hello Friends </h1>
h2>How are you?</h2>
<h3>See you</h3
slbody
The DOM tree will be as follows:
wwwwww nann

TECHNICAL PUBLICATIONS- An up thrust for knowledge

 Document
XHTML
nt
and
JavaScript

2-4

Web Programming Document

<body

<head

<h3
<h2>

<h1>

<title>

"See you"
"How are you?"
"Hello Friends" d o c u m e n t

web
for simple
"This is My Web Page" DOM
structure

Fig. 2.3.1
DOM node properties called
node.
DOM tree is
element in the root.
1. Every called the
DOM tree is
node in the
2. The topmost single node.
m u s t have a
parent
child node nodes.
Every called leaf
3 have n o
children are

bottommost
nodes that
4. The called siblings.
parent a r e
that have the
common

5. The nodes

Review Questions Marks 5

Question Bank,
1. Explain the
structure of DOM Dec.-17, Marks 5
Question Bank. Nov.-11,
List DOM node properties.
2.

Explain.
Nov 11. May-16. Marks 5
What is DOM?
3

2.4 Element Access in JavaScript

which we c a n access the elements of the web document. T
There are several ways by
accessing we will consider one simple web document a
understand these methods of
follows

XHTML Document
<html>

head
<title>This is My Web Page /title>
</head>
<body
TECHNICAL PUBLICATIONS-An up thrust for knowledge
 Web Programming 2-5 JavaScript and XHTML Document

<form name="form1"
<input type-"text name="myinput"/>
</fom>
</body
</html>

Method1: Every XHTML document element is associated with some address. This
address is called DOM address. The document has the collection of forms and
elements. Hence we can refer the text box element i.e.

<input type= "text" name = "my input"/>

Using DOM adress as -

varDom Obj=document.forms[0].elements[0];
But this is not the suitable method of addressing the elements. Because if we change
the above script ass

<form name fom1"> This is document forms [01

input type"button" name= "mybutton"/> forms1O].elements10
<input type-"text" name="myinput"7> forms[0].elements[11
</form>
then index reference gets changed. Hence another approach of accessing the elements
is developed.

Method 2: In this method we can make use of the name attribute in order to access the
desired element.

var Dom Obj=document.fom1.myinput;

But this may validation problem because the XHTML 1.1 standard does not
cause a

support the name attribute to the form element. Hence another way of accessing is
introduced.

Method 3:We the desired element from the web document

can access

To method getElementById. This method is defined in DOM1. The

using JavaScript
element access can be
as made as follows

var Dom Obj=document.getElementById("myinput");

But if the element is in
particular group, that means if there are certain elements on
the form such as radio buttons or
check boxes then they normally
Hence to access these elements we make appear in the groups.
use of its index. Consider the
sample following code
Sform id="Food"
Kinput type="checkbox"
name="vegetables" value="Spinach" />Spinach
TECHNICAL PUBLICATIONS An up thrust for knowlecige
 Java Script and XHT ML Document
2-6
Web Programming
value="FenuGreek" />FenuGreek
name="vegetables"
<input type="checkbox"
type="checkbox" n a m e =
"vegetables" value ="Cabbage" />Cabbage
Kinput
</form>
we can write following code
For getting the values of these checkboxes

var Dom_obj=document.getElementById("Food");
for(i =0;i< Dom_Obj.vegetables.length; it +)
document.write(Dom Obj.vegetableslij+"<br/>"

2.5 Event and Event Handling Dec-17

The first specification for Event Model is provided by the HTML 4.0 standard.
This event model is also called as DOM 0 event model.
All the browsers that support the JavaScript also supports the DOM 0 even-

model.
Later on the complete and comprehensive event model is named DOMZ
specified.

2.5.1 Basic Concepts of Event Handling

Event is an activity that represents a change in the environment. For exampl
mouse clicks, pressing a particular key of keyboard represent the events.
Event handler is a script that gets executed in response to these events. Thu
event handler enables the web document to respond the user activities throug
the browser window.
JavaScript support this special type of programming in which events may oc
and these events get responded by executing the event handlers. This type
programming is called event-driven programming.
Events are specified in lowercase letters and these are case-sensitive.
The process of connecting event handler to an event is called event registratic
The event handler registration can be done using two methods -

Assigning the tag attributes

Assigning the handler address to object properties.

2.5.2 Events, Attributes and Tags

On occurrence of events the tag attribute must be assigned with some used defir
functionalities. This will help to execute certain action on occurrence of particular event
Commonly used events and tag atributes are enlisted in the following table

TECHNICAL PUBLICATIONS An up thrust for

knowledge
 Documen
2-7 JaveSurp and XHTM
Web Prograiromirng

Associated Tags
Events Tag Attribute Meaning
oinge ocus

hextarea>
<select>

oncharge concnemce of soe

change
dange Chextarea
elect

When user cicks the ca>

cdick ondick
mcuse utson putb

When user doubie ca

dblclick ondblclick
clicks the mouse inpub
button cbutton

onfocus When user acquires

focus
the input focus
cinpul
Cselect>
<textareac

When user releases the form elements such as

keyup onkeyup inputbutton, text,textarea and
key from the keyboard
so on

When user presses the form elements such

keydown onkeydown
key down input.button,text,textarea and
so on

When user presses the form elements such

keypress onkeypress inputbutton,text,textarea and
key s0 on

mousedown onmousedown When user clicks 1he form elements Such as

left mouse button input,button,text.textarea and
so on

oninouseup When user releases the form elements Such as

mouseupP
left mouse buiton inputbuttorn,lext,tesxtarea and
so on

mousemove onmousemove When user moves the form elements Such

mouse input,buton,text,textarea and
so an

mouseo0t onmouseout When the user moves forn elements SUch

the mouse away from inputbulton,text,lextarea and
some element
mouseover onmouseOver When the user moves elements such as
form
the mouse away over inputbuttor,lextlextarea and
some elenent so on

load onload After getting the <body

documeni loaded
Feset onreset When the reset butt <iome
is cicked

TECHNICAL PUBLICATIONS Ar up tustfor knousg

 Web Programmingg
2-8 JavaScript and XHTML
submit onsubmit When the
Document
submit<form>
button is cicked.
select onselect On selection inpub
textarea
unload onunload When user eits the <body
document
The use of these tag attributes for handling the events is illustrated by following code
sample
input type ="button" name-"My
button"
onclick= "My fun()": />

Tag attribute Event handler

That when the user clicks the button then as

means
function My_fun) gets called. an event handler a user defined
need to be executed on the Basically in this function user writes the instructions tha
button click event.

Review Question
1. Define event and event handling
Question Bank.Model Question Paper
Dec.-17. Marks 2
2.6 Handling Events from Body Elements
For handling the event from
body element the most
commonly used events ar
onload and unload.
The onload event gets activated as soon as the web
page gets loaded in browser
window.
Example
JavaScript[Onload Demo.htmi]
<IDOCTYPE html>
<html>
<head>
<title> Demo of onload Tag Atibute </title
script type="text/javascript'>
function my fun()

on page loading
/This message will be displayed
alert("Welcome");

PUBLICATIONS- An up thrust
for knowiedge
TECHNICAL
Web Programming
2 9 JavaScript and XHTML Document

When web document gets loaded on the

</script browser window then my_fun) will be
</head>
called
<body onloadnmy fun)"
</body
</html
Output
wwww

e o o aniosd leg Attitute Windows internet Exp 2

wwwwwwwn
DUsvaScript ExiOr X17sgieE CUst
Favontes gsted Se Get More Add-ons

Demo of onload ag Att. w wwwwwwwwwwvwwwwwwwwwwwwwwww..ww.e

wwww owwwvwwwwwwww.w

Message irom webp.

Weicome

Compster Protecfed Mode: Of 100%

Script Explanation: In above JavaScript,

For the body element the onload event is triggered and this onload event calls a
function my_fun)
Inside the my_fun) function the alert box displaying Welcome message is
specified.
Hence as soon as we load the above web page we get a welcome message.

Button Elements
2.7 Handling Events from
For handling the event using button element we have used the tag attribute
onclick.
The idea is that whenever we click the button some event handler must be called.
This event handler can be a user defined function in which certain set of
instructions get executed.

TECHNICAL PUBLICATIONS - An up thrust for knowledge

 Web Programming 2-10 JavaScript and XHTML
ume
Example 1: Following is a simple JavaScript in which on the button clic
have called a function my_fun). This is a simple function in which we
na
displayed some message using alert popup box.
JavaScript [OnclickDemo.html]
<IDOCTYPE html
<htmi>>
<head>
title Demo of onlclick Tag Attibute</title
Script type "text/javascript
function my fun0

alert(Hello I am in my function );
/script
</head
<body
center
<form
Kinput type="button value "Click"
</form onclick="my fun()>
/center
</body
</html
Output
Demo of onlkick Tag Attibute Windows Internet Explores
2 D:UavaScript Ex OnclickDemo.html X ToggleEN Cust
Favorites E Suggested Sites e Get More Add-ons
Demo of onlclick Tag At.. Page Safety
Click
-rieros

Message from webpage

Hello I am in my function
Computer P

Now let us see another example

TECHNICAL PUBLICATIONS An up thrust for knowiedae