Rajiv Jain, Vei Publishing - Zero To Mastery In Web Development- No.1 Web Development Book To Become Zero To Hero In Web Development, This Amazing Web Development Book Covers A-Z Web ... (Zero To Mast.pdf

Zero to Mastery in
Web
DEVELOPMENT
Zero to Mastery in
Web
DEVELOPMENT
Vayu Education of India

AN ISO 9001:2008 CERTIFIED COMPANY
2/25, Ansari Road, Darya Ganj, New Delhi-110 002

Copyright © Vayu Education of India
First Edition: 2022
All rights reserved. No part of this publication may be reproduced, stored in a retrieval
system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior permission of the copyright
owners.
DISCLAIMER
Errors, if any, are purely unintentional and readers are requested to communicate
such errors to the publisher to avoid discrepancies in future.
Published by:
AN ISO 9001:2008 CERTIFIED COMPANY
VAYU EDUCATION OF INDIA

2/25, ANSARI ROAD, DARYA GANJ, NEW DELHI-110 002
PH.: 011-41564440, MOB. 09910115201
E-MAIL: vei@veiindia.com • WEB: www.veiindia.com
Preface v
Chapter 1: Information Architecture 1
1.1 Role of Information Architect 1
1.1.1 Need of Information Architect 1
1.1.2 Need of Information Architecture 1
1.1.3 Main responsibilities of Information Architect 2
1.1.4 The Consumer’s perspective 2
1.1.5 The producer perspective 3
1.1.6 Who should be the information Architect? 3
1.1.7 Balance Your Perspective 4
1.2 Collaboration & Communication 5
1.2.1 Need of Team 5
1.3 Organizing Information 6
1.4 Organizational Challenges 6
1.5 Organizing Websites and Intranets 8
1.5.1 Organization schemes 8
1.5.2 Organisation Structure 11
1.6 Creating Cohesive Organizaton Systems 14
1.7 Designing Navigation Systems 15
1.8 Types of Navigation Systems 15
1.8.1 Embedded/Integrated Navigation Systems 15
1.8.2 Supplemental/ Remote Navigation System 16
1.9 Designing Elegant Navigation Systems 17
1.10 Searching Systems 18
1.10.1 Need of searching systems 18
vi ZERO TO MASTERY IN WEB DEVELOPMENT
1.10.2 Searching your website 18

1.11 Designing the Search Interface 20
1.11.1 Support for Different Modes of Searching 21
1.11.2 Searching and browsing systems should be closely integrated 22
1.11.3 Searching should conform to the site’s Look and feel 22
1.11.4 Search Options Should Be Clear 22
1.11.5 Choose a search Engine That Fits Users’ Needs 23
1.11.6 Display search Results sensibly 23
1.11.7 Always provide the user with feedback 25
1.11.8 Other Considerations 25
1.12 Indexing the Right Stuff 25
1.12.1 Indexing the entire site 25
1.12.2 Selectively indexing the right content 26
1.13 To Search or Not to Search 26
1.14 Grouping Content 26
1.15 Conceptual Design 27
1.15.1 Brainstorming with White Boards and Flip Charts 27
1.15.2 Metaphor Exploration 29
1.16 High level Architecture Blueprints 30
1.17 Architectural Page Mock-ups 31
1.18 Design Sketches 32
Chapter 2: Dynamic HTML and Web Designing 34

2.1 Dynamic HTML 34
2.1.1 Features of DHTML 35
2.2 Web Designing 36
2.2.1 Steps of Web Design 36
2.3 Good Web Design 38
2.3.1 Principles for good Web design 38
2.4 Process of Web Publishing 40
2.5 Phases of Website Development 41
2.6 Structure of HTML Document 43
2.7 HTML Elements 45
2.8 Core Attributes in HTML 46
CONTENTS
vii
2.9 Language Attribute in HTML 52
2.10 Events in HTML 52
2.10.1 List of Keyboard events 52
2.10.2 List of Mouse events 53
2.10.3 List of Focus events 53
2.10.4 List of tag specific events 53
2.11 Block Level and Text Level Elements 56
2.12 Linking in HTML 64
2.13 Images and Anchors 66
2.14 Anchors Attributes 67
2.15 Image Map 70
2.15.1 Client side image map 70
2.15.2 Server side image map 71
2.16 Semantic Linking Meta Information 73
2.16.1 How would you define the main goals of the Semantic Web? 74
2.16.2 What are the major building blocks of the Semantic Web? 75
2.17 Image Preliminaries 75
2.18 Image Download Issues 77
2.19 Image as Button 79
2.20 Introduction to Layout 80
2.20.1 Background, Colors and Text 81
2.20.2 Layout with Tables 81
2.20.3 Advanced Layout: Frames and layers 83
2.21 Audio Support in Browser 88
2.22 Video Support in Browser 90
2.23 Forms in HTML 93
Chapter 3: Style Sheets 101

3.1 Style Sheets 101
3.1.1 CSS Syntax 101
3.2 Applying CSS 101
3.2.1 Inline Styles 102
3.2.2 Internal Style Sheet 103
3.2.3 External Style Sheet 107
viii ZERO TO MASTERY IN WEB DEVELOPMENT
3.2.4 Importing a Style Sheet 108

3.3 Positioning with style sheets 108
3.3.1 Absolute Positioning 109
3.3.2 Fixed Positioning 109
3.3.3 Relative Positioning 111
3.3.4 Static Positioning 112
3.3.5 Overlapping Elements 112
Chapter 4: Java Server Pages 116

4.1 Introduction to JSP 116
4.1.1 Need of JSP 116
4.1.2 Advantages of JSP over other technologies 117
4.2 JSP Architecture 117
4.2.1 JSP Processing: 117
4.3 JSP Life Cycle 118
4.4 JSP Tags 120
4.4.1 The Scriptlet 120
4.4.2 JSP Declarations 120
4.4.3 JSP Expression 121
4.4.4 JSP Directives 121
4.4.5 JSP Actions 126
4.5 JSP Implicit Objects 126
4.5.1 JSP Request Object 127
4.5.2 JSP Response Object 141
4.5.3 JSP Out Object 145
4.5.4 The Session Object: 147
4.5.5 The Application Object 155
4.5.6 The Exception Object 158
Chapter 5: Active Server Pages 161

5.1 ASP (Active Server Pages) 161
5.1.1 The ASP Process 163
5.2 Basic Syntax Rules 164
5.2.1 Variables in Asp and its scope 165
5.2.2 Procedures in ASP 166
CONTENTS
ix
5.3 ASP Objects 167
5.3.1 Response Object 167
5.3.2 ASP Request Object 172
5.3.3 ASP Application Object 174
5.3.4 ASP Session Object 178
5.3.5 ASP Server Object 180
5.3.6 ASP ASPError Object 183
5.4 Retrieving the content of HTML Forms 185
5.5 Troubleshooting 187
Chapter 6: Cookies 188

6.1 Introduction to Cookie 188
6.1.1 How does cookie data move? 189
6.1.2 How do Web sites use cookies? 189
6.2 Cookies in JSP 190
6.2.1 How to Create a Cookie? 190
6.2.2 How to Retrieve a Cookie Value? 190
6.2.3 Example of creating and reading a cookie 190
6.3 Cookies in ASP 194
6.3.1 How to Create a Cookie? 194
6.3.2 How to Retrieve a Cookie Value? 195
6.3.3 A Cookie with Keys 195
6.3.4 Read all Cookies 195
6.3.5 Example for Creating and Reading cookie 196
Chapter 7: Extensible Markup Language 199

7.1 What is XML? 199
7.1.1 How Can XML be used? 204
7.1.2 What is an XML Element& Attribute? 204
7.2 XML Tree 205
7.3 XML Syntax Rules 207
7.4 Well Formed & Valid XML Document 209
7.5 Introduction to DTD 209
7.5.1 Types of DTD: 211
7.5.2 Limitations of DTD 213
x ZERO TO MASTERY IN WEB DEVELOPMENT
7.5.3 Advantages of using DTD 213

7.6 Introduction to Schema 214
7.6.1 Why Use XML Schemas? 214
7.7 Displaying XML with CSS 217
7.8 XSL (EXtensible Stylesheet Language) 223
7.8.1 XSLT (XSL Transformations) 224
7.8.2 XPATH 231
7.8.3 XSL-FO (Extensible Stylesheet Language
Formatting Objects) 232
7.9 Relationship between HTML, SGML and XML 234
Index 239-244
CHAPTER 1
INFORMATION
ARCHITECTURE
1.1 Role of Information Architect

Information architecture is all about understanding and conveying the big
picture of a web site. Information Architect is a person who designs the structure
of information which helps other to find their personal paths to gain the
knowledge.
1.1.1 Need of Information Architect

Each building serves a unique purpose. Architecture and design of a
building depends upon various things such as purpose, location, users, finance etc.
If we start constructing a building without a selection of its design and architecture,
the constructors will face many problems in constructing it, users will face
problems in using it and the purpose for building construction will never be achieved.
In the same way, websites are main resource of information. Each website serves
its unique purpose. If website is developed without having any design and
architecture then developer may have problems in organizing and maintaining the
information, users may have problems in using the website in searching and
accessing the information. These problems may be like time consuming search,
time wastage in loading and browsing of web page due to improper formats used
and keywords.
1.1.2 Need of Information Architecture

• It is necessary for producer so that any changes in the information can be
done efficiently and accurately within time to maintain consistency.
• It is necessary for any website to be commercially successful because if
users are facing problems in searching and accessing the information then
they will never visit the website again.
2 ZERO TO MASTERY IN WEB DEVELOPMENT
• It is necessary because relevant knowledge cannot be obtained from the

unorganized information.
1.1.3 Main responsibilities of Information Architect

The main responsibilities of the information architects are given below. An
information architect
• Specifies the mission and view for the site, balancing the requirements of
its sponsoring organization and its audiences.
• Finds what relevant data and functionality the site will contain.
• Specifies how users will search the information in the site by defining its
organization, navigation, labelling and searching systems.
• Maps out how the site will find accommodate change and growth
continuously over time.
Well-organized information architecture is useful for both consumers and
producers. When consumers access a site for the first time, they can quickly
understand it without any efforts. They can easily find the needed information,
which reduces time and costs wasted on both finding information and not finding
information. Producers of web sites and intranets benefit because they know where
and how to place new content without replacing the existing content and site
structure.
1.1.4 The Consumer’s perspective

As we know, users want to find information quickly and easily. Due to inefficient
information architectures, users get confused and frustrated. It is because different
users have different needs so it is important to support multiple modes of searching
information. From the consumer’s perspective there can be two possible modes of
searching information.
Known item searching: Some users know exactly what kind of information
they are looking for. They know what it is called and know it exists. This is called
known item searching.
Casual Browsing: Some users don’t know what they kind of information
they are looking for. They don’t know the right label. They simply browse the site
and learn about products or services that they’d never even considered.
These two modes of searching information are not mutually exclusive. In a
well-designed system, many users will switch between known-item searching and
casual browsing as they explore the site. If you consider consumer, then it is
important that your information architecture supports both modes. Moreover if
attractive graphics and reliable technologies are essential to user satisfaction, they
are not enough.
INFORMATION ARCHITECTURE
3
1.1.5 The producer perspective
Many organizations are completely self centred because they usually want to know
the return on their investment for information architecture design. Buying
information architecture services is not like investing in a mutual fund. You can’t
calculate hard and fast numbers to show the exact benefit of the investment over
time.
After considering the value to the producer, now the consumer’s value is
considered again. If you are producing an external website the users can be real
customers, investors, employees, business partners, media & executives. If you
are producing an intranet then the employees of your organization are the
consumers. The cost of designing and implementing the architecture is the cost of
time spent:
• In deciding the categories of various users.
• In deciding main areas of content and functionality that the site would
include.
• Redesigning.
• In maintaining the information space on increase in information.
The role of information Architects is to reduce or minimize their cost. If
information architect doesn’t consider producer’s perspective the burden will be
on the site’s user to understand how to use and find information in poorly designed
website. The site maintainers wouldn’t know the location to place the new
information that the site would eventually include, they had likely to argue over
whose content was more relevant and deserved visibility on the main page and so
on.
1.1.6 Who should be the information Architect?

1. An insider who can conceptually understand the sites sponsoring
organization.
Advantages
• Organization’s information is in safe hands.
• As there is no extra cost, so it’s cost effective.
• Insider understands the organization’s processes completely and knows
how to get things done within that organization.
Disadvantages
• Knowledge of an insider may be too specific.
• Insider may lack the political base required for cooperation from others in
the organization.
• Insider gets diverted from his original responsibilities assigned to him.

2. Someone who can think like an outsider and be sensitive to needs of site’s
users.
Advantages
• Unbiased behaviour is expected from an outsider.
• Outsider should be selected according to our needs so he’ll act more
efficiently than insider because he’ll be the specialist of his field.
Disadvantages
• Extra cost.
• Outsider doesn’t have each and every detail of organization so he needs
information.
• Passing confidential information of the organization to an outsider can be
risk factor.
Outsider can exist from many fields like:
Journalism: Journalists are good at editing and organizing information. They
have rich knowledge base.
Graphic Design: Graphic Design is much more than creating animated
pictures. It also shows concern towards creating relationship between visual
elements and determining their effective integration as a whole.
Information and library science: People in this field are good to work with
searching, browsing, and indexing technologies.
Marketing: Marketing specialists are expert at understanding audiences and
conveying a message effectively to different audiences. They know how to highlight
a positive feature and how to suppress the negative ones.
Computer science: Programmers and computer specialists plays an important
role in information architecture. They have good technical skills in many areas
like programming, database, networking etc. To maintain architecting information,
a site requires a database to store the content that minimizes data integrity problems.
So computer scientists have the best skills for modelling content for inclusion in a
database.
1.1.7 Balance Your Perspective
Whomever you do use as an information architect, remembers everyone (including
us) is biased by their disciplinary perspective. If possible try to ensure that other
disciplines are represented on your web site development team to guarantee a
balanced architecture.
The information architect ideally should be responsible for the site’s
architecture and not for its other aspects. It can be distracting to be responsible for
other, more tangible aspects of the site, such as its graphic identity.
5
1.2 Collaboration & Communication
To communicate with web site development team is a very challenging task because
information architecture is highly abstract and intangible. So the information
architect must do effective communication with the web site development team as
well as documents (such as blueprint diagrams) must be created in ways that can
be easily understood by all team members regardless of their own disciplinary
backgrounds.
1.2.1 Need of Team

In the early days of the web, web sites were often designed, created and maintained
by a single individual by his or her own wish. This single webmaster was responsible
for organizing the content, designing the graphics and hacking together relevant
CGI scripts. The only prerequisites were a familiarity with HTML and a willingness
to learn on the job. People with an amazing diversity of backgrounds suddenly
became webmasters overnight, and soon found themselves in many roles such as
graphics designers, then editors, then programmers.
Then companies began to demand more of their sites and their webmasters.
People wanted better content, better functionality, better graphics, tables, VRML,
frames etc. Shockwave, Java, and Active X were added to the toolbox. It was very
difficult for the webmaster to manage the increasing complexity of the environment.
So webmasters and their employers began to realize that the successful design and
production of complex web sites requires an interdisciplinary team approach. The
composition of this team will depend upon the needs of a particular project,
available budget and the availability of expertise. However, most projects will
need expertise in marketing, information architecture, graphic design, programming
and project management.
Marketing
The marketing team basically focuses on the intended purposes and audiences for
the web site. They must understand what will bring the right people to the web site
and what will bring them back again.
Information Architecture
The information architects focus on the design of organization, indexing, labelling,
and navigation systems to support browsing and searching throughout the web
site.
Graphic Design
The designers are responsible for the graphic design and page layout to represent
the graphic look of the web site. They create and implement a design philosophy
that balances form and function.
Editorial
Editors focus on the use of language throughout the web site. Their tasks may
involve reading and editing copy, massaging content to ensure a common voice for
the site, and creating new copy.
Technical
The technical designers and programmers are responsible for server administration
and the development of site production tools and web site applications. They also
aware the other teams regarding technology-related opportunities and limitations.
Project Management
The project manager is responsible for managing the project on schedule and within
budget. He or she is also responsible for enabling communication between the
other teams and the clients or internal stakeholders.
1.3 Organizing Information

We organize information
• To understand
• To explain
• To Contol
Information architects also organize interrelation so that people can get the
right answers to their questions.
Organizing Information involves three steps:
• Structuring: In Structuring information, appropriate levels of granularity
for information atoms in your site are determined and it is also decided
that how these levels are related to one another.
• Grouping: Grouping information means grouping the linked information
atoms into meaningful and different categories.
• Labelling: Labelling information means figuring out the names for these
categories.
Among these structuring and grouping are considered mainly as organizing
labelling is done as a separate step.
1.4 Organizational Challenges

As we all are aware that the rate of growth of information is very high, the world
produces between 1 and 2 exabyte of unique information per year and an exabyte
is a billion gigabytes, this growing mountain of information should keep us all
busy for a while. In an unorganized information space, it is very time consuming
and difficult to insert any new information atoms. There are some reasons why
organizing information in useful ways is so difficult:
7
• Ambiguity: Classification systems are built upon the foundation of
language, and language can be ambiguous. It means, in language, a single
word can have more than two possible meanings. Think about the word
pitch, there are actually more than 15 definitions, including:
• A throw, fling or toss.
• A black, sticky sabotage: used for waterproofing.
• The rising and falling of bow and stern of a ship in a rough sea.
• A salesman’s persuasive line of talk.
• An element of sound determined by the frequency of vibration.
This ambiguity results in weakens the base of our organization systems. When
we use words as labels for our categories then there is a risk that users will miss
our meaning. So we should be clear with the labels and their definitions. Moreover,
we should also know which documents should be placed in which categories.
Let’s take the example of the common tomato. According to Webster’s dictionary
a tomato is a red or yellowish fruit with a juicy pulp used as a vegetable but
botanically it is a berry. So if we have such problems classifying the common
tomato then these kinds of challenges should be considered in classifying web site
content.
• Heterogeneity: Heterogeneity is considered as collection of objects
composed of unrelated elements and homogeneity is considered as
something composed of similar or identical elements. For example, an old
fashion library card catalog is relatively homogenous. It organizes and
provides access to books. It doesn’t provide access to chapters in books,
magazines or videos. This homogeneity is applicable for a structured
classification system. Each book has a record in the catalog and each record
contains the same fields like author, title and subject.
Most websites are highly heterogeneous in many respects. For example
websites often provide access to documents and their components at varying levels
of granularity. A website might present articles, journals and journal database too.
Links might lead to pages, section of pages or other web sites. Also, websites
provide access to document in multiple formats; you might find financial news,
product description, employee home page, image gallery and software files.
Dynamic news contains share space with static human resources information.
Shares with videos, audios and interactive applications. The heterogeneous nature
of website makes it difficult to impose any single structured organization system
on the content.
• Difference in Perspective: It is a fact that labelling and organization
systems are very much affected by their creators perspective .It is observed
at the corporate level with websites organized according to internal division
organization charts with grouping such as marketing, sales, customer
support, human resources and information systems. To design usable and

efficient systems, we need to escape from our own mental models of content
labelling and organization.
• Internal Politics: Politics exist in every organization. Individuals and
departments constantly position for power or respect. Because of the
inherent power of the information organization in forming understanding
and opinion, the process of designing information architectures for web
sites and intranets can involve a strong undercurrent of politics. The choice
of organization and labeling systems can have a great impact on how users
of the site perceive the company, its departments, and its products. For
example, should we include a link to the library site on the main page of
the corporate intranet? Should we call it as The Library or Information
Services or the Knowledge Management? Should information resources
provided by other departments be included in this area? If the library gets
a link on the main page, then why not corporate communications? What
about daily news?
As an information architect, you must be sensitive to your organization’s
political environment. In certain cases, you must remind your colleagues to focus
on creating an architecture that works well for the user. In others, you may need to
make compromises to avoid serious political conflict. Politics basically raise the
complexity and difficulty of creating usable information architectures. However,
if you are sensitive to the political issues at hand, you can manage their impact
upon the architecture.
1.5 Organizing Websites and Intranets

The organization of information in websites is a major factor in determining success.
Organization systems are made up of organization schemes and organization
structure.
1.5.1 Organization schemes

It defines the shared characteristics of content items and influences the logical
grouping of those items. Various organization schemes are being used now a day.
These schemes can be divided into two categories:
1. Exact organization schemes
2. Ambiguous organization schemes
1. Exact organization schemes: In these schemes, the information is divided
into well-defined and mutually exclusive sections. Users can search the
information only if he knows what he is looking for and he knows the
label so that he can identify the group or section in which the item is. The
organization of the phone book’s white pages in alphabetical order is a
perfect example. If you know the last name of the person you are looking
9
for, navigating the scheme is easy. Kumar is in the K’s which is after the
J’s but before the L’s. You know what you’re looking for and it’s obvious
where to find it. This is known as well-defined and mutually exclusive
known item searching. No ambiguity is involved in this.
Advantages:
• This organization schemes are easy to design and maintain due to little
intellectual work involved in assigning items to categories.
• It’s Easy to Use.
Disadvantages:
• Exact organization schemes require the user to know the specific name
of the resource they are going to search.
Three frequently used exact organization schemes are as follows:
• Alphabetical organization scheme: In this scheme all the information
atoms are arranged alphabetically and grouped accordingly. The
implementation of this scheme can be seen in encyclopaedias,
Dictionaries, phone books, bookstores etc. On the web you can observe
this scheme in the Address book of your mailbox.
• Chronological Organization Schemes: In this scheme, the information
is represented in chronological way. E.g. an archive of press releases
might be organized by the date of release. Moreover, history books,
magazine archive, diaries and television guides are organized
chronologically. As long as there is agreement on when a particular
event occurred, chronological schemes are easy to design and use.
• Geographical Organization Schemes: Location is very important
characteristics of information. It is because political, social and economic
issues are mainly location dependent. Example, in a website of MNC
the list of products available is different in different countries according
to economy, population of that particular country. So such a website
maintains such location dependent information using Geographical
Organization Schemes.
2. Ambiguous Organization Schemes: Ambiguous Organization Schemes
divides the information into categories that defy exact definition. They
are mired in the ambiguity of language and organization. Ambiguous
organization supports the serendipitous mode of information seeking by
grouping items in intellectually meaningful manner. In the alphabetical
scheme, closely grouped items may don’t have anything in common beyond
the fact that their names begin with the same letter. In this scheme, someone
other than the user has made an intellectual decision to group items together.
This grouping of related items supports an associative learning process

that may enable the user to make new connections and to reach at better
conclusions. While ambiguous organization schemes require more work
and introduce a messy element of subjectivity, they often prove more
valuable to the user than exact schemes.
The success of this scheme depends on the initial design of a classification
system and the ongoing indexing of content items. The classification system
basically serves as a structured container for the content items. It is
composed of a hierarchy of categories and subcategories with scope notes
that define the types of content to be included in each category. Once this
classification system has been created, content items must be assigned to
categories accurately and consistently.
Advantages
Ambiguous Organization Schemes are more useful than exact organization schemes
because the information atoms are grouped on the basis of their meaning not just
because they start from a particulars alphabet.
Disadvantages
Ambiguous Organization Schemes are difficult to
• Design
• Maintain
• Use
Most common and valuable ambiguous organization schemes are:
• Topical Organization scheme: The most challenging approach to organize
the information is by topic or subject. In this scheme all the information
atoms related to one topic is grouped into a single category E.g. Phone
book yellow pages are organized topically. Research oriented websites
are highly dependent and based on topical organization schemes. To design
a topical Organization Scheme, it is important to define the breadth of
coverage content. Some schemes such as encyclopaedia cover the entire
breadth of human knowledge. On the other hand, corporate websites are
limited to cover only those topics which are directly related to the
company’s products and services. E.g.Yahoo.com categorizes the various
information as Ads & Entertainment, Hobbies and Games, Industry and
Business etc. whereas Microsoft.com categorizes it as about, Product
Support, Careers, and Contacts etc.
• Task-oriented Organization Scheme: Task oriented schemes organizes
the content and application into a collection of processes, functions or
tasks. These schemes are useful when it is possible to deal with a limited
11
number of high priority tasks that users will want to perform frequently.
E.g. Ms Word uses this scheme as collections of individual actions are
organized under various task oriented menus such as Edit, Insert and
Format.
• Audience-specific Organization Scheme: This scheme is appropriate
where there are two or more clearly definable audiences for a website
organization intranet. This scheme works efficiently, when the site is
frequently used by repeated visitors who can bookmark their particular
section of the site. It also works well if there is value in customizing the
content for each audience. E.g. xyzcollege.com contains different links
for students, faculty and management. This type of schemes can be open
or closed. In an open scheme, members of one audience can access the
content intended for other audiences. A closed scheme prevents members
from moving between audience specific sections.
• Hybrid Organization Scheme: The power of a pure organization scheme
is having the ability to provide a simple mental model that users can quickly
understand. However when you start combining the elements of multiple
schemes, confusion is created and solutions are hard to find. The hybrid
scheme can include elements of audience specific, topical task oriented
and alphabetical organization.
1.5.2 Organisation Structure

It defines the types of relationships between content items and groups. It plays an
intangible yet very important role in the design of websites. The structure of
information defines the primary ways in which users can navigate. The major
organization structures that apply to the web site and internet architectures include
• Hierarchy
• Database oriented Model
• Hypertext
Each Organization structure has its unique strengths and weaknesses.
The Hierarchy: A Top-Down Approach
In this model we provide the groups a hierarchical structure having parent
child relationship between them such that they get divided into mutually exclusive
groups.
Examples
• Family trees are basically hierarchical.
• Organization charts are usually hierarchical.
• We divide the books into chapters into sections into paragraphs into
sentences into words into letters.
Advantages
A. The mutually exclusive subdivisions and parent child relationships of
hierarchies are simple and familiar.
B. Because of this pervasiveness of hierarchy, it is easy for the user to quickly
understand web sites that use hierarchical organization models. They can
develop a mental model of the site’s structure and their location within
that structure. This helps the users to feel comfortable.
C. This approach allows you to quickly get a handle on the scope of the
website without going through an extensive content inventory process.
You can identify the major content areas and exploring possible
organization schemes that will provide access to that content. Because
hierarchies provide a simple and familiar way to organize information
they are a good place to start the information architecture process.
While designing the hierarchical model consider the following points
• Balance between exclusivity and inclusivity: The hierarchical categories
should be mutually exclusive. Within a single organization scheme there
is a need to balance between exclusivity the and inclusivity. Hierarchical
model that allows listing is known as poly hierarchical model. But if too
many items are cross listed then hierarchy loses its value.
• Balance between breadth and depth: It is necessary to consider the
balance between the breadth and depth of the hierarchy. Breadth refers to
the number of options at each level in the hierarchy and depth refers to the
number of levels in the hierarchy. If a hierarchy is too narrow and deep
then users have to click through an inordinate number of levels to find
what they are searching for. In the broad and shallow hierarchy users must
choose from large number categories and may get unpleasantly surprised
by the lack of content once they select an option.
The Relational Database Model: A Bottom-up Approach

A database is a collection of records. Each record has a number of fields. For
example, a customer database may have one record per customer. Each record
includes fields such as customer name, street address, city, state, ZIP code, and
phone number. The database allows users to search for a particular customer or to
search for all users with a specific ZIP code. This field-specific searching is a
major advantage of the database model. Additionally, content management is easier
with a database than without. Databases can be designed to support time saving
features. They can also facilitate distributed content management, employing security
measures and version control systems that allow many people to modify the content
without stepping on each other’s toes.
Finally, database allows you to repurpose the same content in multiple forms
13
and formats for different type of audiences. For example, an audience oriented
approach might benefit from a context-sensitive navigation scheme in which each
audience has unique navigation options such as returning to the main page of that
audience area. Without a database, you need to create a separate version of each
HTML page that has content shared across multiple audiences. This is a production
and maintenance nightmare! In another scenario, you may want to publish the
same content to your web site, to a printed brochure, and to a CDROM. The database
approach supports this flexibility.
However, the database model has limitations. The records must follow the
rigid rules. Within a particular record type, each record must have the same fields,
and within each field, the formatting rules must be applied consistently across
records. This structured approach does not work well with the heterogeneous
content of many web sites. Also, technically it’s not easy to place the entire contents
(including text, graphics, and hypertext links) of every HTML page into a database.
Such an approach can be expensive and time consuming.
For these reasons, this model is best applied to subsites or collections of
structured, homogeneous information within a broader web site. For example,
staff directories, news release archives, and product catalogs are candidates for
the database model.
Hypertext Model
Hypertext is a new and highly nonlinear way of structuring information. A hypertext
system involves two types of components: the items or chunks of information which
are to be linked, and the links between those chunks. These components can form
hypermedia systems that connect text, data, image, video, and audio chunks.
Hypertext chunks can be connected hierarchically, non-hierarchically, or both
(shown in figure 1.1).
Figure. 1.1: In hypertext systems, content chunks are

connected via links in a loose web of relationships.
Advantages
1. This model provides great flexibility
2. This model allows for useful and creative relationships between various
items and areas in the hierarchy. It usually makes sense to first design the
information hierarchy and then identify ways in which hypertext can
complement the hierarchy.
Disadvantages
1. It presents substantial potential for complexity and user confusion.
2. As users navigate through highly hyper textual websites it is easy for them
to get lost.
3. Hyper textual links are often personal in nature. The relationships that
one person sees between content items may not be apparent to others.
1.6 Creating Cohesive Organizaton Systems

In Organization systems, we have many options for selecting the appropriate
organization scheme and the appropriate organization structure. In large website
development project, it is difficult to choose a proper system to implement. So it is
necessary to breakdown the site into its components to access one option for scheme
or structure at a time. By decomposing the content collection into the narrow
domains, you can identify opportunities for highly effective organization systems.It
has been observed that all information retrieval systems give best result when applied
to small domains of homogeneous content.
In considering which organization schemes to use, remember the difference
between the exact and the ambiguous schemes. Exact schemes are best when used
for known-item searching, when users know precisely what they are looking or
searching for. Ambiguous schemes are best when used for browsing and associative
learning, when users have a vaguely defined the information that is needed.
Whenever possible, use both types of schemes. Also, be aware of the challenges
faced while organizing the information on the Web. Language is ambiguous, content
is heterogeneous, people have different perspectives, and politics can rear its ugly
head. Providing many ways to access the same information can help to deal with
all of these challenges. When thinking regarding which organization structures to
use, keep in mind that large web sites and intranets typically require all three types
of structure. The top-level, umbrella architecture for the site will almost certainly
be hierarchical. As you are designing the hierarchy, keep a lookout for collections
of structured, homogeneous information. These potential subsites are excellent
candidates for the database model. Finally, remember that less structured, creative
relationships between content items can be handled through hypertext. In this way,
all three organization structures together can create a cohesive organization system.
15
1.7 Designing Navigation Systems
To organize the information space for large amount of information, it is useful to
divide the information space into groups and label them. To look for any information
item, it is important to search for its link information and its group by navigating in
the information space. User can get lost in the information space but a well-designed
taxonomy may reduce the chances that user will be lost. So Navigation Systems
are useful if information is organized using the hierarchy model. Efficient navigation
tools are required to provide context and better flexibility.
Navigation and Searching

Navigation and Searching both are used for finding information. In Navigation,
information is found by moving between links available. But in searching,
information is found by giving the text to search engine and search engine does the
task of finding information for users. We can search for a phrase but can’t navigate.
1.8 Types of Navigation Systems

1.8.1 Embedded/Integrated Navigation Systems
Embedded Navigation Systems are typically defined within the content of the site.
These systems provide context and flexibility to users for understanding where
they are and where they can go. Embedded Navigation Systems can be further
divided into three categories:
Global (site-wide) Navigation System: By definition, a global navigation
system is intended to be available on every page throughout a site. It is often
implemented in the form of a navigational bar at the top of each page. These site
wide navigation systems allow direct access to key areas and functions, no matter
where the user travels in the site’s hierarchy. Most global navigation systems provide
a link to the home page. Many provide a link to the search function.
Local Navigation Systems: Local Navigation Systems enable users to explore
the immediate area. Some lightly controlled sites combine global and local
navigation into a coexistent unified system. A user who selects business looks for
different navigation options than a reader who selects sports, but both sets of options
area presented within the same navigation framework. These local navigation
systems and their content are often so different that these local areas are referred
to as sub sites or sites within sites. Sub sites exist because of two reasons:
1. Areas of content and functionality really make a unique navigation
approach
2. Due to decentralized nature of large organization different groups of people
are often responsible for different content areas and each group may decide
to handle navigation differently.
Contextual Navigation system: Some relationships are not well suited into
the structured categories of global and local navigation. So there is a need for the
creation of contextual navigation links specific to a particular page, document or
object. E.g. Words or phrases within sentences are represented as embedded or
inline hypertext links. On an e-commerce site, these “See Also” links can point
users to related products and services. In this way contextual navigation supports
associative learning and users learn by exploring the relationship you define
between items. They might learn about useful products they didn’t know about.
1.8.2 Supplemental/ Remote Navigation System

These navigation systems are external to the basic hierarchy of a website and provide
complementary ways of finding content and completing tasks. These navigation
systems provide users with backup data. Some of the examples of Remote navigation
Systems are
Sitemaps: In a book/ magazine, the table of contents presents the top few
levels of the information hierarchy. It shows the organization structure for the
printed work and supports random as well as linear access to the content through
the use of chapter and page numbers. In context of websites a sitemap provides a
board view of the content in the website and allow access to segmented portions
of that content randomly. A sitemap can contain graphical or text based links to
provide the user with direct access to pages of the site. A sitemap is the most
natural for websites that lend themselves to hierarchical organization. But for a
small website with only two or three hierarchical levels a sitemap may be
unnecessary.
Site Indexes: Similar to the back of book index, a web based index
presents keywords organization phrases alphabetically, without representing the
hierarchy. These web based indexes are relatively flat and presents only one or
two levels of depth. Therefore indexes work well for users who already know the
name of the item they are looking for. Large complex Websites often require both
a siteman and a site index. For small sites, a site index alone may be sufficient.
The most challenging factor which is considered in indexing a website involves
the level of granularity.
Methods to create index are as follows:
• For small sites you need to create content to inform decisions about which
links to include.
• For large sites, you need to use controlled vocabulary indexing at the
document level to drive automatic generation of tie site index.
Guides: Guides can be available in several forms including guided tours,
tutorials and micro portal focused around a specific audience topic or task. In each
case, guides supplement the existing means of navigating and understanding site
17
content. Guides typically feature linear navigation but hyper textual navigation
should be available to provide additional flexibility.
Rules for designing guides:
• The guide should be short.
• At any point, the user should be able to exit the guide.
• Navigation should be located in the same spot on every page so that users
can easily step back and forth through the guide.
• The guide should be designed to answer the questions efficiently.
• Screenshots should be clear and optimized with enlarged details of key
features.
• If the guide includes more than a few pages, it should have its own table of
contents.
Uses of Guides
• Guides are often a useful tool for introducing new users to the content and
functionality of a website.
• Guides are valuable marketing tools for restricted access websites, enabling
you to show potential customers what they will get for their money.
• Guides are valuable internally, providing an opportunity to showcase key
features of a redesigned site to colleagues, managers and venture capitalists.
Linking between Navigation and searching: Searching is loosely linked with
integrated Navigation Systems and tightly linked with Remote Navigation systems.
1.9 Designing Elegant Navigation Systems

The most challenging task is in Designing navigation systems that work well. We
have so many solutions and technologies such as pop-up menus and dynamic
dynastic site maps for designing purpose. These technologies help the user to find
the information they need. No single combination of navigation elements works
for all web sites. For designing the optimal solution, you need to consider the
specific goals, audience, and content for the project at hand.
A challenged navigation system design begins with the process of hierarchy.
As the primary navigation System, the hierarchy affects all other decisions. The
design of global navigation system depends upon the choice of major categories at
the highest levels of the website. On the basis of the hierarchy, you will be able
select key pages or types of pages that should be accessible from every other page
on the web site. This will help the global navigation system to determine design of
the local and then ad hoc navigation systems.
Once the integrated navigation system is designed, various remote navigation
elements can be considered in addition. In most cases, you will need to choose
between a table of contents, an index, and a sitemap. For strong hierarchy, a table
of content is needed. For appropriate hierarchy, an index is considered. Moreover,
for good visualization of hierarchy, a sitemap may be appropriate. At last, to help
new or prospective users to understand what they can do with site, a guided tour
can be added in the system.
For large and complex site, elements such as table of contents and an index
can be added serve different users with varying needs. Sometimes, a user gets
confused due to multiple options while navigating these elements. So it is important
to consider the potential user confusion and additional overhead required to design
and maintain these navigation elements.
1.10 Searching Systems

1.10.1 Need of searching systems
• Due to the increased amount of information on the website, it is very difficult
to find the needed information. If the navigation systems are not properly
designed and maintained then searching systems are required to find the
needed information.
• If your site has enough contents and users come to your site to look for
information then site need searching systems.
• If the site contains highly dynamic content then search system should be
there on our site.
• A search system provides automatic indexing of the contents of a site
many times per day. Automating this process ensures that users have quality
access to your website’s contents.
1.10.2 Searching your website

Assuming, you wish to implement a Searching system for your website. It’s
important to understand how users really search before designing it.
Users have different kinds of information need: Information scientists and
librarians have been studying user’s information finding habits for so many decades.
The results of these studies indicated that users are not single minded monolithic
audience who want the same kind of information in the same way as it is delivered.
Some users want a basic idea about the topic while others want detail knowledge
about the topic. Some users want only the exact highest quality information; while
others do not care much about whether the information source is reliable or not.
Moreover, some users are only interested in getting the information, regardless of
how much relevant content are really missing. Finally it is observed that different
users have different needs and expectations so the information systems must
understand, recognize, differentiate and accommodate these different needs.
19
To illustrate consider one of these factors in detail: The variability information
users searching expectations.
• Known item searching: Some user’s information needs are defined clearly,
properly and have a single correct answer. When you check the newspaper
to view how your stock in Amalgamated Shoelace and Aglet is doing, you
know exactly what information you want, that the information exists, and
where it can be found. This is the simplest type of information need. If it
were the only type, the job of the web site architect would be much easier.
• Existence searching: However, some users know what information they
want but don’t know how to describe it or whether the answer exists at all.
For example, you might want to buy shares in a particular type of mutual
fund that invests in Moldovan high-tech start-ups and that carries no load.
You are convinced that this sector is up-and-coming, but do Fidelity and
Merrill Lynch know this as well? You might check their web sites, call a
broker or two. This kind of information need is challenging: it might be
hard to convey exactly what you’re looking for, especially if it’s a new
and as-yet-unheard-of item. Rather than a clear question for which a right
answer exists, you have an abstract idea or concept of that, and you don’t
know whether matching information exists. The success of your search
depends as much upon the abilities of the brokers, the web sites, to
understand your idea and its context as whether the information exists.
• Exploratory searching: Some users know how to phrase their question,
but don’t know exactly what they’re hoping to find, and are just exploring
and trying to learn more. If you ever considered changing careers, you
know what we mean: you’re not sure that you definitely want to switch to
a career in chinchilla farming, but you’ve heard it’s the place to be, so you
might informally ask a friend of a friend who has an uncle in the business.
Or you call the public library to see if there’s a book on the subject. Or
you write to the Chinchilla Professionals’ Association requesting more
information. In any case, you are not sure exactly what you’ll uncover, but
you’re willing to take the time to learn more. Like existence searching,
you have not so much a question seeking an answer as much as an idea
that you want to learn more about. Unlike the next type of searching, you
don’t need to know everything there is; a few pieces of good information
will do fine for now.
• Comprehensive Searching (Research): Some users want everything
available on a given topic. Scientific researchers, patent lawyers, doctoral
students trying to find unique and original dissertation topics, and fans of
any sort fit into this category. For example, if you idolize that late great
music duo Milli Vanilli, you’ll want to see everything that has anything to
do with them - singles and records, bootlegs, concert tour posters, music
videos, reviews, fan club information, paraphernalia, interviews, books,

scholarly articles, and record-burning schedules. Even casual mentions of
the band, such as someone’s incoherent ramblings in a web page or Usenet
newsgroup, are fair game if you’re seeking all there is to know about Milli
Vanilli. So you might turn to all sorts of information sources for help:
friends, the library, bookstores, music stores, radio call-in shows, Ouija
boards, and so on.
There are many other ways of classifying information needs, but the
important thing to remember is that not all users are looking for the same
thing. Ideally, you should anticipate the most common types of needs that
your site’s users will have and ensure that these needs are met. Minimally,
you should give some thought to the variations and try to design a search
interface that is flexible in responding to them.
1.11 Designing the Search Interface

The two types of models for searching systems are as follows:
• In the first model user express their information need in the form of a
query and they enter this query in a search interface by using a specialized
search language.
• In the second model users express the information need in search interface
by using the natural language like English.
After this step Queries are matched against an index that represents the site’s
content and number of matching documents are found.
As we know there is variation among users to account for, a single search
interface cannot exist. To select the appropriate search interface there are various
factors:
• The levels of searching expertise users have: It is important to know
whether the users are comfortable with Boolean operators or which kind
of natural language they prefer. Whether they need simple or high powered
interface?
• The kind of information the user wants: It is important to observe whether
they want a simple research or high level research. On the basis of their
research level, it should be clear that whether they want brief documents
or detailed documents as output.
• The type of information being searched: It is important to know whether
the searched information is made up of structured fields, full texts,
navigation pages, destination pages, HTML or other formats.
• How much information is being searched: finally, it should be observed
whether the users will be overwhelmed by the number of documents
retrieved?
21
1.11.1 Support for Different Modes of Searching
Generally the same interface is used to allow users to search the product catalog, or
the staff directory, or other content areas. If users of different native language are
the part of your site then you should provide them with search interfaces in their
native languages. These interfaces will include language specific directions, search
commands and operators, and help information etc. If your site needs to satisfy
users with different levels of complexity with online searching then you should
provide both a basic search interface and an advanced one.
• Simple / Basic search interface: Earlier a simple search interface was
required because users used to do simple known item searches. A simple
search box is useful for the users who know exactly what they are looking
for. Various filtering options are provided including searching for keywords
within abstract fields, searching within the author field or searching within
the publication number field. These filtering options provide the user with
more power by allowing more specific searching. But these labels keyword,
author and publication number are fairly self explanatory. So it depends
on the user whether they opt for these filtering options or not.
• Advanced search Interface: We needed interface that would satisfy
important expert audience who were used to use complex Boolean and
proximity operators and who were already very used to the arcane search
languages of other commercial information services. This interface supports
the following types of searching:
Fielded Searching
Users are easily reachable to author, keyword, Title, Subject and ten other fields.
For example, A researcher could find a dissertation related to his or her area of
interest by searching the subject field. By reading the abstract of that dissertation
he will learn who was advisor of that doctoral student. To find other related
dissertations, the researcher could then search the advisor field to learn about other
doctoral students who shared the same advisor.
Familiar Query Language

It is observed that many different query language conventions are supported by
traditional on line products and users may be used to an established convention. To
support these users variant terms are provided to them. For example, to fill the
field Degree Date the user can enter either ‘‘dt’’, ‘’da’’, ‘’date’’, ‘’Yr ‘’ or year.
Longer Queries
More complex queries often require more space than the single line entry box
found in the simple search interface. The more complex interface supports a much
longer query.
Reusable Result Sets

Many traditional online information products allow searchers to build sets of results
that can be reused. In this example, we have combined two sets that were already
found and could in turn combine this resulted set with other sets during the iterative
process of searching. Because this advanced interface supports so many different
types of searching, a help page is also provided to the users for guidance. For users
of common browsers, the help page is launched in a separate browser window so
that users don’t need to exit the search interface to get help.
1.11.2 Searching and browsing systems should be closely integrated

As we mentioned earlier, users typically do switching back and searching and
browsing. In some situations users often don’t know if they need to search or browse
in the first place. Therefore, these respective systems shouldn’t live in isolation
from one another. The search or browse approach can be extended by making
search and browse options available on the search result page as well, especially
on null results pages when a user might wish to finish its search and needs to
follow the process of iterative searching and browsing.
1.11.3 Searching should conform to the site’s Look and feel

Search engine interfaces and retrieval documents should look and behave like the
rest of your site.
1.11.4 Search Options Should Be Clear

In searching process, users use different variables so there are high chances for
things to go wrong on a help or Documentation page. This is why it is important to
let the user know the following things:
• What is being searched?
Users make an assumption that their search query is being run against the
full test of every page in your site instead your site may support fielded
searching or another type of selective searching. If they’re curious, users
should be able to find out exactly what they are searching.
• How they can formulate search queries
What good is it to build in advanced querying capabilities if the user never
knows about them? Shows off the power of your search engine with
excellent real life examples. In other words, make sure your examples
actually work and retrieve relevant documents if the user decides to test
them.
• User options
Can the user do other neat things much as changing the sorting order of
retrieval results? Show them off as well!
23
• What to do if the user can’t find the right information
It is important to provide the user with some tricks to handle the following
situations:
• I’m getting too much stuff
• I’m not getting anything
• I’m getting the wrong stuff
For first case, you might suggest approaches that narrow the retrieval results.
For example if your system Support the Boolean operator AND, suggest that users
combine multiple search terms with an AND between them.
If they are retrieving zero results as in second case, suggest the operator OR
the use of multiple search terms the use of truncation, and so on.
If they are completely dissatisfied with their searches, as in third case, you
might suggest that they contact someone who knows the site’s content directly for
custom assistance, it may be a resource intensive approach, but it’s a far superior
last resort to ditching the user without helping them at all.
1.11.5 Choose a search Engine That Fits Users’ Needs

At this point, you ideally will know something about the sorts of searching
capabilities that your site’s users will require. So select a search engine that satisfies
those needs as much as possible. For example, if you know that your site’s users
are already very familiar with a particular way of specifying a query, such as the
use of Boolean operators, then the search engine you choose should also support
using Boolean operators. Does the size of your site suggest that users will get huge
retrieval results? Be sure that your engine supports techniques for whittling down
retrieval sizes, such as the AND and NOT operators, or that it supports relevance-
ranked results that list the most relevant results at the top. Will users have a problem
with finding the right terms to use in their search queries?
1.11.6 Display search Results sensibly

You can configure how your search engine displays search results information in
many ways. How you configure your search engine results depends on two factors.
The first factor is the degree of structure your content has. What will your
search engine be able to display besides just the titles of retrieved documents? Is
your site’s content sufficiently structured so that the engine can parse out and
display such information as an author, a date, an abstract, and so on?
The other factor is what your site’s users really want. What sorts of information
do they need and expect to be provided as they review search results?
When you are configuring the way your search engine displays results you
should consider these issues:
1. How much information should be displayed for each retrieved

document?
To display less information per result when you anticipate large result
sets. This will shorten the length of the results page making it easier to
read. To display less information to users who know what they’re looking
for, and more information to users who aren’t sure what they want.
2. What Information should be displayed for each retrieved document?
Which fields you show for each document obviously depends on which
fields are available in each document, what your engine displays also
depends on how the content is to be used. Users of phone directories for
example want phone numbers first and foremost. So it makes sense to
show them the information from the phone number field on the results
page. Lastly, the amount of space available on a page is limited: You can’t
have each field displayed, so you should choose carefully and use the
space that is available wisely.
3. How many retrieved documents should be displayed?
How many documents are displayed depends on the preceding two factors:
If your engine displays a lot of Information for each retrieved document,
you’ll want to consider a smaller size for the retrieval set, and vice versa.
Additionally the user’s monitor resolution and browser settings will affects
the amount of information that can be displayed individually.
4. How should retrieved document be sorted?
Common options or sorting retrieval results include:
• In chronological order.
• Alphabetically by title, author, or other fiends.
• By an odd thing called relevance.
Certainly, if your site is providing access to press releases or other news-
oriented information, sorting by reverse chronological order makes good sense.
Chronological order is less common, and can be useful for presenting historical
data.
Alphabetical sorts are a good general purpose sorting approach (most users
are familiar with the order of the alphabet). Alphabetical sorting works best if
initial articles such as a and the are omitted from the sort order (certain search
engines provide this option).
Relevance is an interesting concept; when a search engine retrieves 2000
documents, is not it great to have them sorted with the most relevant at the top, and
the least relevant at the bottom? Relevance ranking algorithms are typically
determined by some combination of the following; how many of the query’s terms
occur in the retrieved document; how many times terms occur in that document;
how close to each other those terms occur and where the terms occur.
25
1.11.7 Always provide the user with feedback
When a user executes a search, he or she expects result. Usually a query will
retrieves at least one document, so the user’s expectation is fulfilled. But sometimes
a search retrieves zero results. Let the user know by creating a different results
page especially for these cases. This page should make it painfully clear that nothing
was retrieved, and give an explation as to why, tips for improving retrieval results
and links to both the help area and to a new search interface so the user can try
again.
1.11.8 Other Considerations

You might also consider including a few easy to implement but very useful things
in your engine’s search results:
• Repeat back the original search query prominently on the results page
As users browse through search results, they may forget what they
searched for in the First Place. Remind them. Also include the query in
the page titles; this will make it easier for users to find it in their browser’s
history lists.
• Let the user know how many document in total were retrieved.
Users want to know how many documents have been retrieved before
they begin reviewing the results. Let them know: if the number is too
large, they should have the option to refine their search.
• Let the user know where he or she is in the current retrieved set.
It’s helpful to let users know that they’re viewing documents 31-40 of the
83 total that they’ve retrieved.
• Always make it easy for the user to revise a search or sort a new one.
Give them these options on every results page and display the current
search query on the revise search page so they can modify it without re-
entering it.
1.12 Indexing the Right Stuff

Searching only works properly when the stuff that’s being searched is the same as
the stuff that users want. This means that you may not want to index the entire site.
1.12.1 Indexing the entire site

Search engines are used to index the entire site without regard for the content and
how it might vary-every word of every page, whether it contain the real content or
help information, advertisement, navigation and so on.
However, searching works in a better way when the information space is
defined narrowly and contains homogeneous contents. By doing this, the site’s
architects are ignoring two important things: that the information that is there
in the site isn’t all the same. And that it makes good sense to respect the lines that
has already been drawn between different types of content. For example, it’s clear
that English and French content are vastly different and that there audience’s
overlaps very little, so why not create separately searchable indices along those
divisions?
1.12.2 Selectively indexing the right content

Search zone are subset of website that have been indexed separately from the rest
of the contents that site contains. When you search a search zone, you have, through
interaction with the site, already identified yourself as a member of a particular
audience or as someone searching for a particular type of information in the web
site. The search zone in a site matches the specific needs of the user and result in
improved retrieval performance. The user is less likely to retrieve irrelevant
information. Also note that the full site search option: sometimes it does make
sense to maintain an index of the entire site, especially for user who is unsure
where to look and find the content they are searching, who are doing a comprehensive
leave-no-stones-unturned search, or who just haven’t had any luck searching the
more narrowly defined indices.
How indexing of a search zone is set up? It depends on the search engine
software used. Most support the creation of search zone, but some of them provides
interfaces that make this process easier, while other require you to manually provide
a list of pages to index. You can create search zones in many ways.
Examples of common approaches are:
• By content type
• By audience
• By subject
• By date
1.13 To Search or Not to Search

It’s becoming a moot question whether to apply a search engine in your site or not.
Users generally expect searching to be available to them, certainly in large sites.
Yet we all know how poorly many search engine actually work. They are easy to
set up and easy to forget about. That’s why it’s important to understand how users
information needs can vary and to plan and implement the searching system’s
interface and search zones accordingly to the need of users.
1.14 Grouping Content

Grouping content into the top-level categories of an information hierarchy is the
most important and challenging process you will face. How the content should be
27
organized? By audience or format or function? How do users presently navigate
this information? How do the clients want users to navigate the information? Which
content items should be included in which major categories? The design of
information architectures should be determined by research involving members of
the team and the representatives from each of the major audiences. Fortunately,
you don’t need the latest technology to conduct this research. Index cards, the 3 ×
5 inch kind you can fit in your pocket and find in any stationery store, will help you
get the job done. For lack of a better name, we call this as index card based approach
content chunking. To try content chucking, you need to buy a few packages of
index cards and follow these steps:
1. Team is invited to generate a content wish list for the website on a set of
index cards.
2. Instructions are given to them to write down one content item per card.
3. Ask each member of the group or the whole group to organize cards into
piles of related content items and assign labels to each pile.
4. Result of each is recorded and then we move on to the next.
5. Repeat this same exercise with representative members and groups of the
organization and intended audiences.
6. Compare and contrast the results of each.
7. Analysis of the results should influence the information architecture of
the site.
Card based content chunking process can be performed collaboratively where
people must reach consensus on the organization of information. Alternatively,
individuals can sort the cards alone and then record the results. The biggest problem
with shuffling index cards is that it can be time consuming task. Involving clients,
colleagues and future users in the exercise and analyzing the sometimes confusing
results takes time. Some of this content chunking can be accomplished through
the wish list process. However, the major burden of content chunking responsibility
generally falls to the information architect in the conceptual design phase.
1.15 Conceptual Design

Early conceptual design meetings focus on metaphor and high-level organization.
You need to present all possible organization schemes, balancing the desire to
reach general agreement and move forward with the need to remain open-minded
about the alternate approaches. White boards and flip charts, high-level architecture
blueprints, and scenarios are key tools at this stage.
1.15.1 Brainstorming with White Boards and Flip Charts

For collaborative purposes, white boards are unparalleled. The ephemeral (lasting
for a very short time) nature of white board scribbling permits a creative freedom
that is not found in other media. The technology disappears and inhibitions fall
away.
In early research-oriented meetings, white boards support the collaboration
around the definition and refinement of the mission, vision, and goals of the project.
When working with several people from the organization, each with a different set
of experiences, perspectives, and goals, you can use the white board to help identify
issues, resolve the differences, and achieve consensus.
White boards are also useful for considering all possible information
architectures. Presenting ideas on the whiteboard triggers new understanding and
further brainstorming. The white board, the architect, and colleagues become
connected in a feedback cycle that moves towards the articulation of the information
architecture.
Sample White Board Scribblings
Where do these go:

Why Digital?
1. help/contact
2. sales & returns info
3. Product news
Welcome
About the Pilot
Current Research
MARC Online
Digital Dissertations
Notes: Secondary pages have Notes: Welcome page provides

global navigation Links back to brief intro and directs users to
Welcome page. one of three major areas.
Figure 1.2 Sample white board scribbling

A major problem of white boards revolves around the difficulty of recording
a white-boarding session. White board scribbling does not leave a permanent record.
Ideas flow. The board fills up and is erased. Eventually, everyone leaves and the
scribblings remain trapped on the surface of the white board, soon to be erased by
the participants of the next meeting.
In reality, you can use this problem to your advantage. Each time consensus
is reached, record the relevant white board scribblings. Differences of opinion and
discussions with dead end are quickly forgotten and only the agreements remain.
29
If you’re not comfortable with this level of sneakiness, you can assign a designated
note taker to record agreements and disagreements alike.
While the flip chart is a close relative of the white board, various characteristics
distinguish the two. Advantages of using the flip chart during the research phase
include its high portability and intrinsic record generating nature. They are portable.
Their tearaway sheets can be taken back to the office for study and transcription.
White boards are anchored to walls and won’t fit in your car.
However, flip charts don’t really support iteration and collaboration.
Because of the difficulty of erasing ink on paper and the ugliness of extensively
marked-up pages, flip charts invoke in people a higher fear of error and
greater resistance to change. When working with flip charts, people try to get it
right the first time. Whether or not they succeed, they tend to live with the results
rather than mark up the page. This limits the freedom and creativity of group
collaboration.
While the visible differences between white boards and flip charts are fairly
subtle and seemingly innocent, the ultimate impact upon the collaborative process
can be significant.
1.15.2 Metaphor Exploration

Metaphor can be a powerful tool for communicating the complex ideas and
generating enthusiasm. By suggesting creative relationships or by mapping the
familiar onto the new, metaphor can be used to explain, excite, and persuade.
Three types of metaphor can be applied in the design of web sites. These are
organizational, functional, and visual metaphors:
• Organizational metaphors leverage familiarity with one system’s
organization to convey quick understanding of a new system’s organization.
For example, when you visit an automobile dealership, you must choose
to enter one of the following departments: new car sales, used car sales,
repair and service, or parts and supplies. People have a mental model of
how dealerships are basically organized. If you’re creating a web site for
an automobile dealership, it may make sense to employ an organizational
metaphor that draws from this model.
• Functional metaphors make a connection between the tasks you can
perform in a traditional environment and those you can perform in a new
environment. For example, when you enter a traditional library, you can
browse the shelves, search the catalog, or ask a librarian for help. Many
library web sites present these tasks as options for users, thereby employing
a functional metaphor.
• Visual metaphors leverage familiar graphic elements such as images, icons,
and colors to create a connection to the new. For example, an online
directory of business addresses and phone numbers might use a yellow

background and telephone icons to invoke a connection with the more
familiar print-based yellow pages.
1.16 High level Architecture Blueprints

Blueprints are the architect’s tool of choice for performing the transformation for
chaos in to the order. Blueprints basically show the relationship between pages and
other content components and can be used to portray organization, navigation and
the labelling systems. Blueprints focus on the major areas and the structure of site
ignoring many navigation details and the page level details. They are great tools
for explaining the architectural approaches and are generally referred to as sitemaps
and do in fact have much information common with those supplemental navigation
systems. Both the diagram and the navigation system display the shape of the
information space, information overview, functioning as a condensed map for site
developers and the users, respectively.
High level architecture blueprints are generally created by information
architects as a part of a top down information architecture process. During the
design phase, high level blueprints are useful for exploring primary organization
schemes and the various approaches. High level blueprints map out the organization
and the labelling of major areas. These blueprints can be created by hand, but
software such as Visio or Net Objects Fusion are preferred to use. These tools help
to quickly layout the architecture blue prints, as well as helps with site
implementation and administration.
As a project moves from strategy to design to implementation, blueprints
become more utilitarian, enabling the information architect to communicate to
others involved in design and development and less geared toward strategy and
product definition. “Lower-level” blueprints need to be produced and modified
quickly and iteratively, and often draw input from an increasing number of
perspectives, ranging from visual designers to editors to programmers. Those team
members need to be able to understand the architecture, so it’s important to develop
a simple, condensed vocabulary of objects that can be explained in a brief legend.
See figure1.3 for an example
Legend
Page Link
Content component Content group
Figure 1.3 The blueprint legend describes an simple vocabulary

31
In the figure1.3, the legend describes the three levels of content granularity.
The coarsest are content groups (made up of pages); these are followed by the
pages themselves. Content components are the finest-grained content that makes
sense to represent in a blueprint. The arrow describes a link between the content
objects; these can be one-way or bidirectional links.
This is a minimal set of objects; we’ve found that retaining a limited vocabulary
helps the information architect to avoid the temptation of overloading the diagram
with too much of information. After all, other diagrams can be used to convey
other views of the architecture more effectively.
1.17 Architectural Page Mock-ups

Information architecture blueprints are very useful for presenting a bird’s eye view
of the web site that you are going to develop. However they do not work well for
helping people to envision the contents of any particular page they are looking for.
They are also not straightforward enough for most graphic designers to work from.
In Fact, no single format does a job of conveying all aspects of information
architecture to all audiences. As information architectures are multi dimensional,
it’s important to show them in multiple ways.
Search Browse
Search
_________________________
_________________________
sample search would go here
Search tips
Browse
by Title
by Subjects/Discipline
by Primary Audience
by Primary Purposes
by Primary Format
Figure 1.4 Sample of Architectural page mockup

For these reasons Architectural page mockup are very useful tools during
conceptual design for complimenting the blueprint view of the site. Mockups are
quick and dirty textual documents that show the content and links of major pages
on the website. They enable you to clearly communicate whatever the implications
are, of the architecture at the page level. They are also very useful when used in
conjunction with scenarios. They help the people to see the site in action before
any code is written. Finally, they can be employed in some basic usability tests to
see if users actually follow the scenarios as expected by you. Keep in mind that
you only need to mockupthe major pages of the web site. These mockups and the
designs that derive from them can serve as templates for the design of subsidiary
pages.
The mockups are easier to read as comparative to blueprints. By integrating
various aspects of the organizational labelling, and navigation systems in to one
view, they will help to understand the architecture. In laying out the content on a
page mockup, you should try to show the logical visual grouping of the content
items. Placing a content group at the top of the page or using a larger font size
indicates the relative importance of that particular content.While the graphic
designer will make the final and more detailed layout decisions you can make a
good start with such mockups.
1.18 Design Sketches

Once you’ve evolved high-level blueprints and architectural page mockups, you’re
now ready to collaborate with your graphic designer to create design sketches on
paper of major pages that are there in the web site. In the research phase the design
team has begun to develop a sense of the desired graphic identity. The technical
team has assessed the information technology infrastructure of the organization
and the platform limitations of the intended audiences. They understand what’s
possible with respect to features such as dynamic content management and the
interactivity. And, of course, the architect has designed the high-level information
structure for the site. Design sketches are a best way to pool the collective knowledge
of these three teams in a first attempt at interface design for the top level pages of
the web site. This is a great opportunity for interdisciplinary user interface
design.Using the architectural mocks ups as a guide; the designer starts sketching
pages of the site on sheets of paper. As the designer sketches each page, questions
arise that must be discussed. Here is a sample sketching session dialog between the
programmer, designer and the architect:
Programmer: I like what you’re doing with the layout of the main page, but
there is a need to do something more interesting with the navigation system.
Designer: Can we implement the navigation system using pull down menus?
Does that architecturally make sense?
33
Architect: That may work but it will be difficult to show context in the
hierarchy form. What you think about a tear-away table of contents feature? We’ve
had pretty good reactions to that type of approach from users in the past.
Programmer: We can certainly go with that approach from a purely technical
perspective. How would a tear away table of contents look? Can you sketch it for
us? I like to have a quick and dirty prototype. These sketches allow rapid iteration
and intense collaboration.
As you can notice, the design of these sketches requires the involvement of
people from all three teams. It is much cheaper and easier for the group to work
with the designer on these rough sketches than to begin with HTML page layouts
and graphics. These sketches allow rapid iteration and intense collaboration.
CHAPTER 2
DYNAMIC HTML AND
WEB DESIGNING
2.1 Dynamic HTML

Dynamic HTML, or DHTML, is a collection of technologies used together to create
interactive and animated web sites by using a combination of a static markup
language like HTML, a client-side scripting language such as JavaScript, a
presentation definition language such as CSS, and the Document Object Model. It
is NOT a language or a web standard. It’s an art of combining HTML, JavaScript,
DOM, and CSS. DHTML allows scripting languages to change variables in a web
page’s definition language, which in turn affects the look and function of “static"
HTML page content, after the page has been fully loaded and during the viewing
process. Thus the dynamic characteristic of DHTML is the way it functions while
a page is viewed, not in its ability to generate a unique page with each page
load.There are four parts to DHTML:
• Document Object Model (DOM)
• Scripts
• Cascading Style Sheets (CSS)
• XHTML
DOM
The DOM is what allows you to access any part of your Web page to change it
with HTML. Every part of a Web page is specified by the DOM and using
its consistent naming conventions you can access them and change their
properties.The HTML DOM is the W3C standard Document Object Model for
HTML. It defines a standard set of objects for HTML, and a standard way to access
and manipulate them.DHTML is about using the DOM to access and manipulate
HTML elements.
DYNAMIC HTML AND WEB DESIGNING
35
Scripts
Scripts written in either JavaScript or ActiveX are the two most common scripting
languages used to activate DHTML. You use a scripting language to control the
objects specified in the DOM. JavaScript is the scripting standard for HTML.
DHTML is about using JavaScript to control access and manipulate HTML elements.
Cascading Style Sheets

CSS is used in DHTML to control the design pattern of the Web page. Style sheets
define the colors, fonts of text, the background colors and images, and the placement
of objects on the page. Using scripting and the DOM, you can change the style of
various elements. CSS is the W3C standard style and layout model for HTML. It
allows web developers to control the style and layout of web pages.
XHTML
XHTML or HTML is used to create the page itself and build the elements for the
CSS and the DOM to work on.
According to the World Wide Web Consortium (W3C):
“Dynamic HTML is a term used by some vendors to describe the combination
of HTML, style sheets and scripts that allows documents to be animated."
2.1.1 Features of DHTML

There are four primary features of DHTML:
1. Changing the tags and properties
2. Real-time positioning
3. Dynamic fonts
4. Data binding
Changing the tags and properties

This is one of the most common uses of DHTML. It allows you to change the
qualities of an HTML tag depending on an event outside of the browser such as a
mouse click. You can use this to preload information onto a page, and not display
it unless the reader clicks on a specific link.
Real-time positioning
When most people think of DHTML, Real time positioning is expected. Objects,
images, and text moving around the Web page. This can allow you to play interactive
games with your readers or animate portions of your screen.
Dynamic Fonts
This is a Netscape only feature. Netscape developed this to get around the problem
that designers had with not knowing what fonts would be on a reader’s system.
With dynamic fonts, the fonts are encoded and downloaded with the page, so that
the page always looks how the designer intended it to.
Data binding
This is an IE only feature. Microsoft developed this to allow easier access to databases
from Web sites. It is very similar to using a CGI to access a database, but uses an
ActiveX control to function. This feature is very advanced and difficult to use for
the beginning DHTML writer.
2.2 Web Designing

Website design means planning, creation and updation of websites. It basically
involves information architecture, website structure, user interface, navigation
ergonomics, website layout, colors, contrasts, fonts and photography as well as
icons design. All these website elements combined together form websites. In reality,
website design includes more abstract elements such as usability, ergonomics, layout
traditions, user habits, navigation logic and other things that simplify the using of
websites and help to find information faster.
Web design is the creation of Web pages and sites using HTML, CSS,
JavaScript and other Web languages. Web design is just like design in general: it is
the combination of lines, shapes, texture, and color to create an pleasing or striking
look. The process of designing Web pages, Web sites, Web applications or
multimedia for the Web may utilize multiple disciplines, such as animation,
authoring, communication design, corporate identity, graphic design, human-
computer interaction, information architecture, interaction design, marketing,
photography, search engine optimization and typography.
• Markup languages such as HTML, XHTML and XML
• Style sheet languages such as CSS and XSL
• Client-side scripting such as JavaScript and VBScript
• Server-side scripting such as PHP and ASP
• Database technologies such as MySQL
• Multimedia technologies such as Flash and Silverlight
Web pages and Web sites can be static pages, or can be programmed to be
dynamic pages that automatically adapt content or visual appearance depending
on a variety of factors, such as input from the end-user, input from the Webmaster
or changes in the computing environment such as the site’s associated database
having been modified.
2.2.1 Steps of Web Design

The steps:
37
• Figure out the focus of the website
• What specific features do you wish to have in the website?
• Create a list of sections that the website will have and give them a hierarchy
of importance.
• Write out your content for various sections and finalize it.
• Find a style or design that meets your website’s and your industry’s
requirements.
• Build the website.
• Evaluate the website and make the required changes if there are any.
• Go live – register a domain, find a host, upload the website.
1. The focus of the website: This is the first thing you want to define clearly
before any other step is taken. You need to decide what the main purpose
of the website is.It is important that you define this step as clearly as possible
because a website’s focus has a major impact on the whole project; this is
the ‘foundation’ of the site.
2. Specific Website Features: This builds off of the first step, where now
you look at actual features that you need to implement. For example:
• A shopping cart for an online store
• A password protected section of the website
3. Map out the major sections of the website: With the first two steps
completed, you’re ready to actually start mapping out the major sections
of the website; drawing out quick diagrams of the website is a useful way
of doing this. A diagram can easily show the hierarchy of a website and
how the various sections are related to each other.
4. Write your Final Content: All websites are driven by content; it’s the
content that makes a site effective and successful. As such, this part of the
process is arguably the most important, so you need to pay attention to it.
5. Find a design for the website: At this stage of the process, you are ready
to start looking at the visual aspect of the site – the design. You have a few
options:
• Hire a graphic designer or a web designer
• Come up with your own design if you have some artistic and design
experience.
• Buy a website template and save time and money.
6. Build the website: With the above questions answered and steps
completed, you’ll find the process of building the website(actually writing
out the code), is much easier and you will have reduced the chance of
having to go back and redo things.
7. Evaluate the website, make the required updates or changes: Once

you’ve built the website, you should walk away from it for a day or two.
This will allow you to come back and evaluate it with fresh eyes. It might
also be a good idea to get someone who has not worked on the site, to take
a look as well.
Here are some of the things you should be looking for:
• Good usability in the design.
• Fast loading ‘light’ pages.
• Intelligent use of technology.
• The website’s ability to convey the message of the website quickly if not
instantly.
8. Go Live – Register a Domain, Find a host, Upload the website: If
you’ve passed steps 1 to 7, you know you’re ready to show the world the
website. All that is left to do is go live:
• Register a domain
• Find a hosting company
• Upload the website
2.3 Good Web Design

Designing an effective web site requires more than just gathering relevant information
and posting it on the web. Like a good paper or research presentation, a quality web
project demands as much attention to the selection, organization, and presentation of
material as to the underlying research itself. You should strive, above all, to be both
clear and engaging in every aspect of site design. Without the first, you will quickly
lose your audience. Without the second, you’ll never catch their attention in the first
place.
2.3.1 Principles for good Web design:

• Precedence : Good Web design is about information. When navigating a
good design, the user should be led around the screen by the designer,
called as precedence(Guiding the Eye), and it’s about how much visual
weight different parts of your design have.A simple example of precedence
is that in most sites, the first thing you see is the logo. This is often because
it’s large and set at what has been shown in studies to be the first place
people look i.e. the top left.
You should direct the user’s eyes through a sequence of steps. For example,
you might want your user to go from logoto a primary positioning statement,
next to a punchy image (to give the site personality), then to the main
body text, with navigation and a sidebar taking a secondary position in the
39
sequence.What your user should be looking at is up to you, the Web designer,
to figure out. To achieve precedence you must consider the position, color,
contrast, size, design elements.
• Spacing: Spacing makes things clearer. In Web design there are three
aspects of space that you should consider:
• Line Spacing: When you lay text out, the space between the lines
directly affects how readable it appears. Too little space makes it easy
for your eye to spill over from one line to the next; too much space
means that when you finish one line of text and go to the next your eye
can get lost. So you need to focus on this. You can control line spacing
in CSS with the ‘line-height’ selector.
• Padding: Text in the web site page should not touch other elements.
Images, for example, should not be touching text, neither should borders
or tables. Padding is the space between elements and text. The simple
rule here is that you should always maintain the space there.
• White Space: White Space refers to empty space on a page. White
space is used to give balance, proportion and contrast to a page. A lot of
white space tends to make things seem more elegant.
• Navigation: One of the most frustrating experiences you can have on a
Web site is being unable to figure out where to go or where you are. There
are two things of navigation to keep in mind:
• Navigation — Where can you go?
Buttons to travel around a site should be easy to find and should be well
described. The text of a button should be clear as to where it’s taking
you.
• Orientation — Where are you now?
Here are many ways you can orient a user. In small sites, it’s just a
matter of a big heading or a ‘down’ version of the appropriate button in
your menu. In a larger site, you might make use of bread crumb trails,
sub-headings and a site map for the truly lost.
• Design to Build: Designing has gotten a lot easier since web designers
transitioned to CSS layouts. Few things to consider like::
• Can it actually be done?
• What happens when a screen is resizes?
• Are you doing anything that is technically difficult?
• Could small changes in your design greatly simplify how you build it?
• Typography: Text is the most common element of design. It’s important
to consider things like Font Style, Font size, Spacing, Color, Paragraphing
etc.
• Usability: For a site to be usable you need to consider some aspects of

usability - navigation, precedence, and text. Here are few more important
ones:
• Adhering to Standards: There are certain things people expect,
and not giving them causes confusion. For example, if text has an
underline, users expect it to be a link. Doing otherwise is not good
usability practice.
• Think about what users will actually do: Prototyping is a tool used in
design to actually ‘try’ out a design. This is done because often when
you actually use a design, you notice little things that make a big
difference.
• Think about user tasks: When a user visit to your site what are they
actually trying to do? List out the different types of tasks people might
do, how they will achieve them, and how easy you want to make it for
them. This might mean having really common tasks on your homepage
or it might mean ensuring something like having a search box always
easily accessible.
• Alignment: Keeping things lined up is as important in Web design. It
does not mean that everything should be in a straight line, but rather that
you should go through and tries to keep things consistently placed on a
page. Aligning makes your design more ordered.
• Clarity: Keeping your design crisp and sharp is a main factor considered
in Web design. And when it comes to clarity, it’s all about the pixels.
• Consistency: Consistency means making everything match. Heading sizes,
font choices, colouring, button styles, spacing, design elements, illustration
styles, photo choices, etc. Everything should be themed to make your design
coherent between pages and on the same page. Inconsistencies in a design
are like spelling mistakes in an essay. They just lower the perception of
quality of the site.
2.4 Process of Web Publishing

Once we create our website, we need to do the following to publish our website:
1. Establish the basics. Your website will need two things:
• A unique domain name. Each domain name is registered with a DNS
(Domain Name Server), which identifies a domain name with a unique
Internet Protocol (IP) address.
• Space. Each website must have a web space allocated to it. This is
provided by a web server, many of which are maintained by private
companies.
41
2. Find out if the name you want is available or not. Many websites will
catalogue which domains are available. Or, you can always try typing the
domain you want into the URL field of your browser.
3. Find a website that can show you similar domain names that are available.
Searching a taken domain will turn up similar domains that are still open.
For example, if you want to register the domain name “xyz.com" you’d
see that “xyz.co" is available but “xyz.com" is already registered.
4. Register your domain. Find a domain name registrar and sign up your
domain. (To find a registrar, simply search “domain name registrar.") You’ll
probably have to pay a start-up fee, as well as a yearly fee to keep the
domain registered in your name. Afterward, the registrar will provide you
with access to a control panel for your website.
5. Manage your website. From the control panel, you can check your disk
space and monthly bandwidth space. You can also upload and download
the contents of the website, as well as updating the files and folders of the
website using FTP server address.
2.5 Phases of Website Development

There are numerous steps in the web site design and development process. From
gathering initial information, to the creation of your web site, and finally to
maintenance to keep your web site up to date and current.
The exact process will vary slightly from designer to designer, but the basics
are generally the same as:
• Collection of Information
• Planning
• Designing
• Development
• Testing and Delivery
• Maintenance
Collection of Information: The first step in designing a web site is to
gather information from various sources. This first step is actually the
most important one, as it involves a deep understanding of the company
for which the website is to be developed. It involves a good understanding
of business goals and how the web can be utilized to help you achieve
those goals.Certain things to consider are:
• Purpose: What is the purpose of the web site? Site is build to provide
information, promote a service, sell a product or something else?
• Goals: What is needed to be accomplished by building this web site?
Common goals are either to make money or share information.
• Target Audience: Is there a specific group of people that will help you
reach your goals? It is helpful to identify the “ideal" person you want to
visit your web site. This will later help to determine the best design
style for your site.
• Content: What kind of information will the audience be looking for on
your web site? Are they looking for specific information, a particular
product or service, online ordering…?
Planning
Using the information that is collected from phase one, it is time to put together a
plan for your web site. At this point a site map is developed.The site map contains
a list of all main topic areas of the site, as well as sub-topics, if there are any. This
serves as a guide as to what content will be on the site, and is essential to developing
a consistent, easy to understand navigational system. The end-user of the web site
must be kept in mind when designing your site. A good user interface creates an
easy way to navigate web site. During this phase, web designer will also help you
decide what technologies should be implemented.
Designing
Drawing from the information gathered up to this point, it’s time to determine the
look and style of your site.Target audience is one of the key factors taken into
consideration. A site aimed at teenagers, for example, will look much different
than one meant for a financial institution.Your web designer will create one or
more prototype designs for your web site. This is typically a .jpg image of what the
final design will look like. Either way, your designer should allow you to view
your project throughout the design and development stages. The most important
reason for this is that it gives you the opportunity to express your likes and dislikes
on the site design.In this phase, communication between both you and your designer
is crucial to ensure that the final web site will match your needs and taste.
Development
In developmental stage the web site itself is created. At this time, your web designer
will take all of the individual graphic elements from the prototype and use them to
create the actual, functional site.This is basically done by first developing the home
page, followed by a “shell" for the interior pages. The shell serves as a template for
the content pages of your site, as it contains the main navigational structure for the
web site. Once the shell has been created, your designer will take your content and
distribute it throughout the site, in the appropriate areas.This entire time, your
designer should continue to make your in-progress web site available to you for
viewing, so that you can suggest any additional changes or corrections you would
like to have done.
43
Testing
At this point, web designer will test the web site. They will test things such as the
complete functionality of forms or other scripts, as well last testing for last minute
compatibility issues (viewing differences between different web browsers), ensuring
that your web site is optimized to be viewed properly in the most recent browser
versions.
A good web designer is one who is well versed in current standards for web
site design and development. As part of testing, your designer should check to be
sure that all of the code written for your web site validates. Valid code means that
your site meets the current web development standards.
Once you give your web designer final approval, it is time to deliver the site.
An FTP (File Transfer Protocol) program is used to upload the web site files to
your server. Most web designers offer domain name registration and web hosting
services as well. Once these accounts have been setup, and your web site uploaded
to the server, the site should be put through one last run-through. This is just
precautionary, to confirm that all files have been uploaded correctly, and that the
site continues to be fully functional.
Maintenance
The development of your web site is not necessarily over, though. One way to
bring repeat visitors to your site is to offer new content or products on a regular
basis. Most web designers will be more than happy to continue working together
with you, to update the information on your web site. Many designers offer
maintenance packages at reduced rates, based on how often you anticipate making
changes or additions to your web site.
2.6 Structure of HTML Document

An HTML document has two main parts:
1. Head: The head element contains title and meta data of a web document.
2. Body: The body element contains the information that you want to display
on a web page.
In a web page, the first tag specifically, <html> indicates the markup language
that is being used for this particular document. The <head> tag contains information
about the web page. Lastly, the content appears in the <body> tag.
Well structured HTML document come in these parts:
1. A head that identifies a document as HTML and establishes its title.
2. A body that contains the content for a Web page. This part holds all
displayed text on a page, as well as most links to graphics, multimedia,
locations inside the same file, and to other Web documents.
3. A footer that lables a page by identifying its author, data of creation, and
version number.
<html> <html> tag indicates that this

web page is written in HTML.
<head>
<title> Title of the <title> tag contains the web
web page</title> page title.
</head>
<head> tag contains
information about the web.
<body> <body> tag contains the

Content of the page content of the web page.
</body>
</html> </html> marks the end of

the web page.
Figure 2.1 Structure of HTML Document

Every HTML file is a set of structure tags that divide an HTML file into a
head section and a body section. These two sections are enclosed between an
opening <HTML> tag and end with the closing </HTML> tag. Following is an
example of an HTML file that shows the structure tags that are required within
every XHTML file.
• Doctype Declaration
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//
EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• Opening html tag
<html xmlns="http://www.w3.org/1999/xhtml">
• Head Section
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Untitled Document</title>
</head>
• Body Section
<body>
45
My First Page.
</body>
</html>
• Closing html tag
The head and body sections of an HTML file are contained within the opening
html tag and the closing html tag.The Doctype declaration needs to be done at the
beginning of every XHTML file. It is the only tag that can contain uppercase
text.The title of the webpage and information pertaining to the entire Web page is
contained in the Head section and it also contains any “meta" tags. No information
that is there in the head section will be visible in the browser window except for
the title “My Webpage" that is found between the title tags (<title>My Webpage</
title>).Body Section Contains the contents that are visible in the browser window.
In other words, whatever you find within the body tags is what you will see in the
browser window.
2.7 HTML Elements

HTML documents are defined by HTML elements. An HTML element is everything
from the start tag to the end tag. The start tag is often called as the opening tag. The
end tag is often called as the closing tag.
Start tag <p>Element Content</p> End tag
HTML Element Syntax
• HTML element starts with a start tag or the opening tag
• HTML element ends with an end tag or the closing tag
• The element content is everything between the start tag and the end tag
• Some HTML elements don’t have content
• Empty elements are closed in the start tag
• Most of the HTML elements can have attributes
Example
<html>
<body>
<p>This is a simple paragraph nothing else</p>
</body>
</html>
Explanation of above example
• The <p> element
<p>This is my first paragraph</p>
The <p> element defines a paragraph in the HTML document.The element

has a start tag <p> and an end tag </p>. The element content is: This is my
first paragraph
• The <body> element
<body>
<body>
The <body> element defines the body of the HTML document. The element
has a start tag <body> and an end tag <body>. The element content is
another HTML element (a paragraph)
• The <html> element
<html>
<body>
</body>
</html>
The <html> element defines the whole HTML document.The element has
a start tag <html> and an end tag </html>. The element content is another
HTML element (the body)
Don’t Forget the End Tag

Most browsers wzill display HTML correctly even if you forget the end tag. But
forgetting the end tag can produce unexpected results or errors. Future version of
HTML will not allow you to skip end tags.
Empty HTML Elements

HTML elements without content are called empty elements. Empty elements can
be closed in the start tag.<br> is an empty element without a closing tag (it defines
a line break). Adding a slash to the start tag, like <br />, is the proper way of
closing empty elements, accepted by HTML, XHTML and XML.
2.8 Core Attributes in HTML

An attribute is used to define the characteristics of an element and is placed inside
the element’s opening tag. All attributes are made up of two parts: a name and a
value:
• The name is the property you want to set. For example, the <font> element
in the example carries an attribute whose name is face, which you can use
to indicate which typeface you want the text to appear in.
47
• The value is what you want the value of the property to be. The first
example was supposed to use the Times New Roman typeface, so the
value of the face attribute is Times New Roman.
The value of the attribute should be put in double quotation marks, and is
separated from the name by the equals sign. You can see that a color for the text
has been specified as well as the typeface in this <font> element:
<font face="Times New Roman" color="pink">
The four core attributes are:
• id
• title
• class
• style
The id Attribute:
This attribute can be used to uniquely identify any element within a page. There
are few reasons that you might want to use an id attribute on an element:
• If an element carries an id attribute as a unique identifier it is possible to
identify just that element and its content.
• If you have two elements of the same name within a Web page, you can
use the id attribute to distinguish between elements that have the same
name.
<p id="asp">This paragraph explains what is ASP</p>

<p id="jsp">This paragraph explains what is JSP</p>
This attribute cannot be applied to the following elements:
• base
• head
• html
• meta
• script
• style
• title
This attribute basically specifies a unique alphanumeric identifier to be
associated with an element. Naming an element is important to being able to access
it with a style sheet, a link, or a scripting language. Names should be unique to a
document and should be meaningful, so although id= "p1" is perfectly valid,
id="Paragraph1" might be better. The attribute’s value must begin with a letter in
the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens
(“-"), underscores (“_"), colons (“:"), and periods (“."). The value is case-
sensitive.The following example uses the ID attribute to identify each of the first
two paragraphs of a document:<P ID=firstpr>My 1 st paragraph.</P><P
ID=secondpr>My 2ndparagaph.</P>The paragraphs in the example could have
style rules associated with them through their ID attributes. The following
Cascading Style Sheet defines unique colors for the two paragraphs:
P#firstpr
{
color: pink;
background: none
}
P#secondpr
{
color: purple;
background: none
}
Example
<html>
<head>
<title>ID rule Example </title>
<style type="text/css">
<!—
#ideg {background-color:green;}
—>
</style>
</head>
<body>
<p> hello </p>
<p id="ideg"> welcome </p>
<h1 id="ideg">to HTML </h1>
<p> its interesting </p>
</body>
</html>
Output
49
The title Attribute

The title attribute gives a suggested title for the element. It is often displayed as a
tooltip or while the element is loading. Like the title for the document itself, title
attribute values such as advisory information should be short, yet useful. For
example, <p title="paragraph1"> provides little information of value, whereas <p
title="Web Engineering Appendix A Paragraph 17">provides much more detail.
When combined with scripting, this attribute can provide facilities for automatic
index generation.
• base • basefont
• head • html
• meta • param
• script • title
The style Attribute

The style attribute allows you to specify CSS rules within the element.Because the
style attribute allows style rules to be used directly with the element, it gives up
much of the benefit of style sheets that divide the presentation of an HTML document
from its structure.
An example of this attribute’s use is shown here:
<p style="font-family: Times New Roman;
font-size: 16pt">Important text</p>

• head • html
• meta • param
• script • style
• title
Example
<html>
<body>
<p title="hie" style="font-size:24pt">
Place the cursor over this text. “Hie" will be displayed as tooltip.
</p>
</body>
</html>
Output
The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies
the class of element. This attribute specifies the element to be a member of one or
more classes.This class attribute cannot be applied to the following elements:
51
• head • html
• meta • param
• script • style
• title
Example:
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading
</h1><p>This is a paragraph.
</p>
<p class="important">This is an important paragraph.
</p>
</body>
</html>
2.9 Language Attribute in HTML

The lang attribute specifies the language of the element’s content. The lang attribute
allows you to indicate the main language used in a document, but this attribute was
kept in HTML only for backwards compatibility with earlier versions of
HTML.When included within the <html> tag, the lang attribute specifies the
language you’ve generally used within the document. When used within other tags,
the lang attribute specifies the language you used within that tag’s content. Ideally,
the browser will use lang to better render the text for the user.
Example:
<html lang=en>
<head>
<title>English Language Page
</title>
</head>
<body>
This page is using English Language
</body>
</html>
Example:
<html>
<body>
<p>This is a paragraph.
</p>
<p lang="fr">Ceciest un paragraphe.
</p>
</body>
</html>
2.10 Events in HTML

Events are a feature of HTML documents that allow authors to add interactivity
between the website and it’s visitors, by executing client-side programs when the
visitor (or other program) performs an action. For example, the author can make a
paragraph change the color of its text when the user puts the mouse pointer over it.
2.10.1 List of Keyboard events

• onkeypress: The onkeypress event is executed when a key is pressed and
released while the element is focused.
53
• onkeydown: The onkeydown event is triggered when a key is pressed
down while the element is focused.
• onkeyup: The onkeyup event is fired when a key is released while the
element is focused.
2.10.2 List of Mouse events

• onclick: The onclick event occurs when the mouse button is clicked over
the element.
• ondblclick: The ondblclick event is executed when the pointing device
button is double clicked over the element.
• onmousedown: The onmousedown is triggered when the mouse button is
pressed over the element.
• onmouseup: The onmouseup event is fired when the pointing device button
is released over the element.
• onmouseover: The onmouseover event occurs when the mouse is moved
onto the element.
• onmousemove: The onmousemove event is executed when the pointing
device is moved while it is over the element.
• onmouseout: The onmouseout event is triggered when the mouse is moved
away from the element.
2.10.3 List of Focus events

• onfocus: The onfocus event is fired when an element receives focus either
by the pointing device or by tabbing navigation. This attribute is exclusive
of those elements that can get the focus.
• onblur: The onblur event occurs when the element losses focus either by
the pointing device or by tabbing navigation. This attribute is exclusive of
those elements that can get the focus: HTML input element, HTML select
element, HTML textarea element, and HTML button element.
2.10.4 List of tag specific events

• onload: The onload event is triggered when the user agent finishes loading
a window or all frames within a frameset. This event is exclusive of the
HTML body element and the HTML framset element.
• onunload: The onunload event is fired when the user agent removes a
document from a window or frame. This event is exclusive of the HTML
body element and the HTML framset element.
• onsubmit: The onsubmit event occurs when the form is submitted.
• onreset: The onreset event is executed when the form is reset.
• onselect: The onselect event is triggered when a user selects some text in
the text field.
• onchange: The onchange event is fired when a control losses the input
focus and its value has been modified since gaining focus.
Example:
<html>
<head>
</head>
<body onload=’alert(“Event demo loaded");’>
<form onreset=’alert(“Form reset");’ onsubmit=’alert(“Form submit");’>
<ul>
<li>onblur: <input type="text" value="Click into field and then leave" size="40"
onblur=’alert(“Lost focus");’ />
<br /><br /></li>
<li>onclick: <input type="button" value="Click Me" onclick=’alert(“Button
click");’ /><br /><br /></li>
<li>onchange: <input type="text" value="Change this text then leave" size="40"
onchange=’alert(“Changed");’ />
<br /><br /></li>
<li>ondblclick: <input type="button" value="Double-click Me"
ondblclick=’alert(“Button double-clicked");’ />
<br /><br /></li>
<li>onfocus: <input type="text" value="Click into field" onfocus=’alert(“Gained
focus");’ /><br /><br /></li>
<li>onkeydown: <input type="text" value="Press key and release slowly here"
size="40" onkeydown=’alert(“Key down");’ /><br /><br /></li>
<br /><br /></li>
<li>onkeyup: <input type="text" value="Type and release" size="40"
onkeyup=’alert(“Key up");’ /><br /><br /></li>
<li>onload: Alert presented on initial document load.<br /><br /></li>
<li>onmousedown: <input type="button" value="Click and hold"
onmousedown=’alert(“Mouse down");’ />
<br /><br /></li>
<li>onmousemove: Move mouse over this
<a href="" onmousemove=’alert(“Mouse moved");’>link</a><br /><br /></li>
<li>onmouseout: Position
mouse <a href="" onmouseout=’alert(“Mouse out");’>here</a>
55
and now leave.<br /><br /></li>
<li>onmouseover: Position mouse over this
<a href=""onmouseover=’alert(“Mouse over");’>link</a><br /><br /></li>
<li>onmouseup: <input type="button" value="Click and release"
onmouseup=’alert(“Mouse up");’ /><br /><br /></li>
<li>onreset: <input type="reset" value="Reset Demo" /><br /><br /></li>
<li>onselect: <input type="text" value="" size="40" onselect=’alert(“Selected");’
/><br /><br /></li>
<li>onsubmit: <input type="submit" value="Test Submit" /><br /><br /></li>
<li>onunload: Try to leave document by following this
<a href="http://www.yahoo.com">link</a>.<br /><br /></li>
</ul>
</form>
</body>
</html>
2.11 Block Level and Text Level Elements

HTML elements permitted within the BODY are classified as either block-level
elements or inline elements.One difference between the two groups is that when
rendered visually in a web browser, the content of block-level elements starts on a
new line while the content of inline elements does not. Another difference is that
block-level elements may contain inline elements; some block-level elements may
even contain other block-level elements, while inline elements may only contain
text and other inline elements.
57
The following are defined as block-level elements in HTML:
• ADDRESS - Address
• BLOCKQUOTE - Block quotation
• CENTER - Centered block
• DIR - Directory list
• DIV - Generic block-level container
• DL - Definition list
• FIELDSET - Form control group
• FORM - Interactive form
• H1 - Level-one heading
• H2 - Level-two heading
• H3 - Level-three heading
• H4 - Level-four heading
• H5 - Level-five heading
• H6 - Level-six heading
• HR - Horizontal rule
• ISINDEX - Input prompt
• MENU - Menu list
• NOFRAMES - Frames alternate content
• NOSCRIPT - Alternate script content
• OL - Ordered list
• P - Paragraph
• PRE - Preformatted text
• TABLE - Table
• UL - Unordered list
The following elements may also be considered block-level elements since
they may contain block-level elements:
• DD - Definition description
• DT - Definition term
• FRAMESET - Frameset
• LI - List item
• TBODY - Table body
• TD - Table data cell
• TFOOT - Table foot
• TH - Table header cell

• THEAD - Table head
• TR - Table row
The following elements may be used as either block-level elements or inline
elements. If used as inline elements, these elements should not contain any block-
level elements.
• APPLET - Java applet
• BUTTON - Button
• DEL - Deleted text
• IFRAME - Inline frame
• INS - Inserted text
• MAP - Image map
• OBJECT - Object
• SCRIPT - Client-side script
Example
The <address> tag
The<address>tag is used to surround information, such as the signature of
the person who created the page, or the address of the organization the page is
about. For example,
<address>
ABC Company, Inc.<br />
8787xyz Street<br />
PQR, NB 93459<br />
</address>
can be inserted toward the bottom of every page throughout a Web site.
The <address> tag should be considered logical, although its physical
rendering is italicized text. The HTML specification treats <address> as an
idiosyncratic block-level element. Like other block-level elements, it inserts a blank
before and after the block. It can enclose many lines of text, formatting elements
to change the font characteristics and even images. However, according to the
specification, it isn’t supposed to enclose other block- level elements, although
browsers generally allow this.
Text-Level Elements
These don’t cause paragraph breaks. Text level elements that define character styles
can generally be nested. They can contain other text level elements but not block
level elements.These elements are used to mark up text inside block level elements.
59
Some block level elements exclude certain text level elements, and some text level
elements may only appear inside specific block level elements.
Text-level elements in HTML can be categorized as: physical and logical.
Physical elements, such as <b> for bold and <i> for italic, are used to specify how
the text should be rendered. Logical elements, such as <strong>and <em>, indicate
what the text is, but not necessarily how it should look. Although common
renderings exist for logical text elements, the ambiguity of these elements and the
limited knowledge of this type of document structuring have reduced their use.
Physical Character-Formatting Elements

Sometimes you might want to use bold, italics, or other font attributes to set off
certain text, such as computer code. HTML and XHTML support various elements
that can be used to influence physical formatting. The elements have no meaning
other than to make text render in a particular way.
Physical markup
• TT - Teletype
• I - Italics
• B - Bold
• U - Underline
• STRIKE - Strikeout
• BIG - Larger text
• SMALL - Smaller text
• SUB - Subscript
• SUP - Superscript
The following example code shows the basic use of the physical text-formatting
elements:
<html>
<head>
<title> Physical Text Elements</title>
</head>
<body>
<h1 align="center" >Physical Text Elements</h1>
<hr/>
<p>
This is<b>Bold</b><br/>
This is <i> Italic</i><br/>
This is <tt>Monospaced</tt><br/>
This is <u> Underlined </u><br/>
This is <strike> Strike-through</strike><br/>
This is also<s> Strike-through</s><br/>
This is <big>Big</big><br/>
This is even<big><big>Bigger</big></big><br/>
This is <small> Small </small><br/>
This is even<small><small> Smaller</small></small><br/>
This is <sup> Superscript</sup><br/>
This is<sub> Subscript</sub><br/>
This is <b><i>.<u> Bold, Italic, Underline</b></i></u>
</p>
</body>
</html>
Figure Screen Shot shows the rendering of the physical text elements:
61
Logical Elements
Logical elements indicate the type of content that they enclose. The browser is
relatively free to determine the presentation of that content, although there are
expected renderings for these elements that are followed by nearly all browsers.
Plain and simple, will a designer think <strong> or <b>? As mentioned previously,
HTML purists push for <strong> because a browser for the blind could read strong
text properly. For the majority of people coding Web pages, however, HTML is
used as a visual language, despite its design intentions. Even when logical elements
are used, many developers assume their default rendering in browsers to be static.
<h1> tags always make something large in their minds.
Experts know the beauty and intentions behind logical elements, and with
style sheets logical elements will continue to catch on and eventually become the
dominant form of page design. Even at the time of this writing, a quick survey of
large sites shows that logical text elements are relatively rare. However, to embrace
the future and style sheets, HTML authors should strongly reexamine their use of
these elements.
Logical markup
• EM - Emphasized text
• STRONG - Strongly emphasized
• DFN - Definition of a term
• CODE - Code fragment
• SAMP - Sample text
• KBD - Keyboard input
• VAR - Variable
• CITE - Short citation
The following example uses all of the logical elements in a test document:
<html>
<head>
<title> Logical Text Elements</title>
</head>
<body>
<h1 align="center" >Logical Text Elements</h1>
<hr/>
<p>
<acronym>www<acronym> is an acronym
<abbr>www</abbr> is an abbreviation
This is <em>Emphasis</em><br/>
This is <strong> Strong</strong><br/>

This is <cite> Citation</cite><br/>
This is <code> Code </code><br/>
This is <dfn> Definition</dfn><br/>
This is <kbd> Keyboard</kbd><br/>
This is a<q>Quotation</q><br/>
This is <samp> Sample </samp><br/>
This is <var> Variable </var><br/>
</p>
</body>
</html>
Figure Screen Shot shows the rendering of the logical elements under Internet
Explorer:
63
Figure Screen Shot shows the rendering of the logical elements under Mozilla:
Figure Screen Shot shows the rendering of the logical elements under Opera:
Little differences might occur in the rendering of logical elements. For

example, <dfn> results in Roman text under Netscape, but yields italicized text
under Internet Explorer. <q> wraps quotes around content, but does not change
rendering in Internet Explorer 6 or earlier. You should also note that the <abbr>
and <acronym>tags lack default physical presentation in browsers. Without CSS,
they have no practical meaning, save potentially using the title attribute to display
the meaning of the enclosed text. In short, there is no guarantee of rendering, and
older versions of browsers in particular can vary on inline logical elements,
including common ones such as <em>.
2.12 Linking in HTML

A link is the address to a document or a resource on the web.Links allow users to
click their way from page to page. The HTML <a> tag defines a hyperlink.
Hyperlinks
In web terms, a hyperlink is a reference or you can say an address to a resource on
the web. Hyperlinks can point to any resource on the web: an HTML page, an
image, a sound file, a movie, etc. A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to another document.The most important attribute
of the <a> element is the href attribute, which indicates the link’s destination.
65
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Syntax
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.google.com/">Visit google</a>
This will display like this: Visit google
Clicking on this hyperlink will send the user to Google’s homepage.
Here is the meaning of each part of this example:
<a starts the anchor
Href stands for “hypertext reference"
http://www.google.com/ the URL of the external document
> marks the end of the reference portion of the tag
Visit google the text that will appear and be clickable
</a> ends the anchor
Links and anchors enable you to connect documents to one another. There are
three kinds of connections:
• Connecting two documents in the same directory.
• Connecting two documents in different directories.
• Connecting one part of a document to a particular location within a document.
Connecting two documents in the same directory

For example, if you were writing a file called “a.html" and you wanted people to
construct a link to a file called “b.html", you might write the following:
Click <a href="b.html">here</a> to read another document.
The word “here" will be blue and underlined.
Connecting two documents in different directories

This sort of link works much the same way as connecting documents in the same
directory; you just have to provide some more information. Start the tag the same
way, but rather than inserting just the file name, you need to include the whole URL
where it is located.
Click <a href="http://www.xyz.edu/document.html">here</a> to read another
document.
Connecting one part of a document to a particular location within a document

Sometimes you may want to link from one part of a document to another part of the
same document. For example, to link from the top of a document to its fourth
paragraph:
1. Create a single-word name (no spaces), e.g., “fourth," for the fourth
paragraph.
2. Insert an anchor containing this name at the beginning of the fourth
paragraph:
<a name="fourth"></a>
3. At the top of the document, insert a link to the “fourth" anchor. It would
look like:
<a href="#fourth">link to important stuff</a>
The pound sign (#) in front of the anchor name tells the browser to look
for the link inside the current document. Clicking on the highlighted text
“link to important stuff" would take the reader to the fourth paragraph.
2.13 Images and Anchors

Image links are constructed, by embedding an <img> tag inside of an anchor element
<a>. Like HTML text links, image links require opening and closing anchor tags,
but instead of placing text between these opening and closing tags, the developer
needs to place an image tag.
Below is the HTML code used to make the image work as a link to a page
<a href="xxx.html"><imgsrc="xxx.gif"></a>
If you haven’t entered a border setting you will see a small border around the
image after turning it into a link. To turn off this border, simply add border="0" to
the <img> tag:
<a href="xxx.html"><imgsrc="xxx.gif" border="0"></a>
Images that work as links can show a popup text when you place the mouse
over it. This is done with the alt property in the <img> tag.
<a href="xxx.html"><imgsrc="xxx.gif" border="0" alt="Link to this page"></
a>
67
Example:
In the above screenshot u can see the image, when you click on this image the
url mentioned in href attribute will get open in a new tab because the value of
attribute target is specified as “_blank".
2.14 Anchors Attributes

• Name Attribute: The name attribute specifies the name of an anchor. The name
attribute is used to create a bookmark inside a document. The href or the name
attribute must be present in the <a> tag.
<html>
<body>
<p><a name="top"></a>
Go to the <a href="#bottom">bottom</a> of this document.<br />
<p>To make this work we need to simulate the document being very
long by using many breaks.</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<p><a name="middle">the middle</a></p>

Go to the <a href="#bottom">bottom</a> of this document.<br />
<hr />
<p><a name="bottom" href="#top">return to top</a>
<a href="#middle">go to middle</a></p>
</body>
</html>
69
• Title Attribute
The title attribute specifies extra information about an element.The information is
most often shown as a tooltip text when the mouse moves over the element.
<body>
...some text...
<P>You’ll find a lot more in <A href="chapter2.html" title="Go to chapter
two">chapter two</A>.
<A href="./chapter2.html" title="Get chapter two.">chapter two</A>.
</body>
• Accesskey Attribute
The accesskey attribute specifies a shortcut key to activate or focus an element.
Value provided for access key should be a single letter.
Example:
<a href="http://www.google.com/html" accesskey="g">visit google</a>
<a href="http://www.yahoo.com/css" accesskey="y">visit yahoo</a>
To visit Google use “ALT+g" & for Yahoo “ALT+y"
• Target Attribute
This attribute specifies where to open the linked document.
Syntax
<a target="_blank|_self|_parent|_top|framename">
Attribute Values
Value Description
blank It will open the linked document in a new window or tab
self It will open the linked document in the same frame as it was
clicked (this is default)
parent It will open the linked document in the parent frame
top It will open the linked document in the full body of the window
framename It will open the linked document in a named frame
• Tabindex Attribute
This attribute specifies the tab order of an element when the “tab" button is used
for navigating between the various links.
Example
<html>
<body>
<a href="http://www.yahoomail.com/" tabindex="2">Yahoo Mail!!</a><br>
<a href="http://www.google.com/" tabindex="1">Google</a><br>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
</body>
</html>
2.15 Image Map

An image-map is an image with clickable areas sometimes referred to as “hotspots"
that usually link to another page. It is a graphic image designed in a way that
allows different areas of the main image to be click-able by users. These click-able
areas then link to different destinations that usually relate to the part of the image
the user has clicked on. Aside from being very useful in web development, image
maps are also very useful for images and banners being used on social networking
sites such as facebook, twitter and myspace.
Image maps allow you to make certain areas of an image into links. There are
two types of image maps: server side and client side.
2.15.1 Client side image map

Client-side image maps don’t require a special map server to determine where the
user clicked and what URL should be accessed. Instead, if properly marked-up by
the Web designer, a client-side image map is interpreted by the browser itself,
which simply loads the URL as if a regular hypertext link were clicked. Client-side
maps reside within the HTML document, and use the local user’s browser to perform
71
the translation.The maps work only over the HTTP protocol; an alternative link
needs to be made to enable files to be accessed via alternate protocols.The <map>
tag is used to define an image-map. The name attribute of the <map> element is
required and it is associated with the <img>’s usemap attribute and creates a
relationship between the image and the map.The <map> element contains a number
of <area> elements that defines the clickable areas in the image map.
To create an image map:
1. First, you need an image. Create an image using the usual method (i.e. via
an image editor, then save as a gif or jpeg into your website’s image folder).
2. Use the HTML <map> tag to create a map with a name. Inside this tag,
you will specify where the clickable areas are with the HTML <area> tag
3. Use the HTML <img> tag to link to this image. In the img tag, use the
usemap attribute to define which image map to use.
2.15.2 Server side image map

Server side image maps rely on the internet server provider to provide URL links in
relation to specified areas within an image. The Browser sends the set of coordinates
to the server which in turn interprets those coordinates via a CGI script, and then
returns the proper URL for that area to the browser. A CGI script is a set of
instructions written in unix code. The script always lives within a folder named
“cgi-bin" on the server.
Unlike Client side image maps, Server side maps can be read by all protocols.
However, they are slower, requiring two steps in the process of interpreting each
click (browser-server; server-browser). Furthermore, unlike for normal links, there
is no way for a browser to provide visual feedback to the user by showing where a
portion of an image map leads before the user actually clicks on it.
Defining a server side image map involves two steps:
1. Defining the image source as a map:
<ahref="Image_map_coordinates_description.html"><img border=0
src="./gallery/a.gif" ISMAP></a>
2. A separate html document (“Image_map_coordinates_description.html")
is referred to from within the IMG map. This file contains the coordinate
information supplied by applications.
Server-side maps use separate map files that have to be downloaded as well.
They also depend on the server for translation, creating additional network
traffic.Image maps that run on the server-side depend on a server-side language
like ASP, PHP, or PERL to receive the information, interpret it, and then make an
appropriate decision based upon where the image was clicked. This works because
when you set up an image to be used with a server-side image map the Web browser
will automatically send along where it was that you clicked the image.
For a server side image map, put an image inside a link, and set the ISMAP
attribute on the IMG (just the name, it does not need a value). When the link is
clicked, the browser will request the given link, and add ?x,y on the end of it, as
the click offset from the left,top corner of the image (such as a.html?47,8). If the
user is not using a mouse, then the coordinates will be 0,0.
<a href="a.html"><imgsrc="b.gif" alt="" ismap></a>
Example
<html>
<body>
<img src="abc.jpg" width="145" height="126" usemap="#xyz">
<map name="xyz">
<area shape="rect" coords="0,0,82,126" href="a.htm">
<area shape="circle" coords="90,58,3" href="b.htm">
<area shape="circle" coords="124,58,8" href="c.htm">
</map>
</body>
</html>
In above example, we use the <area> tag in conjunction with the shape and
coord attributes. These accept the following attributes:
Shape Defines a shape for the clickable area. Possible values:
• Default: This covers the entire image, and does not need
the coords attribute.
• Rect: This expects four coordinates. The horizontal position
of the top-left corner, the vertical position (from the top of
the image) of the top-left corner, the horizontal position of
the bottom-right corner and the vertical position of the
bottom-right corner. An example would be:
shape="rect" coords="10,20,75,40"·
• Circle: This expects three coordinates. The horizontal
position of the centre, the vertical position of the centre and
the radius of the circle (percentage radii are taken as a
percentage of the shorter side of the image). An example
would be:
shape="circle" coords="50,80,20"
• Poly: This expects as many pairs of coordinates as you need
to make your polygon. These can make any polygon shapes
you need, and can have sloping lines. All coordinates are
73
specified as horizontal position then vertical position, with
all of them in a long comma separated list. The last pair of
coordinates can optionally match the first. An example would
be:
shape="poly" cords=" 228, 316, 243, 316, 325, 229, 322, 217,
228, 316"
Coords Specifies the coordinates of the clickable area. Coordinates
are specified as follows:
• rect: left, top, right, bottom
• circle: center-x, center-y, radius
• poly: x1, y1, x2, y2, ...
Image maps can be placed anywhere in the document (inside elements where
inline content is allowed), and can be before or after the image that use them.The
AREA element should be treated as a block level element, and must be placed.
Directly inside the MAP element, not inside any of the other block level content
inside it.
2.16 Semantic Linking Meta Information

The challenges for today’s enterprise information integration systems are well
understood. In order to manage and use information effectively within the enterprise,
three barriers that increase the complexity of managing information have to be
overcome: the diverse formats of content, the disparate nature of content and the
need to derive “intelligence" from this content. Current software tools that look at
structuring content by leveraging syntactic search and even syntactic meta data are
not sufficient to handle these problems. What is needed is actionable information
from disparate sources that reveals non-obvious insights and allows timely decisions
to be made. A new concept known as semantic meta data is paving the way to
finally realize the full value of information. Indeed, Tim Berners-Lee’s vision for
the next generation of the Web is termed the “semantic Web," where semantic meta
data plays the pivotal role. By annotating or enhancing documents with semantic
meta data, software programs can automatically understand the full context and
meaning of each document and can make correct decisions about who can use the
documents and how these documents should be used.
Meta data that describes contextually relevant or domain-specific information
about content based on an industry-specific or enterprise- specific custom meta
data model or ontology is known as semantic meta data. For example, if the content
is from the business domain, the relevant semantic meta data could be company
name, ticker symbol, industry, sector, executives, etc., whereas if the content is
from the intelligence domain, the relevant semantic meta data could be terrorist
name, event, location, organization, etc. Meta data elements that offer greater depth
and more insight “about the document" fall under the semantic meta data category.
key
Documents Semantic Network
terms
Figure 2.2:Semantic network of terms that situated in the

Web becomes a semantic web
2.16.1 How would you define the main goals of the Semantic Web?
The Semantic Web is a Web of data. There is a lot of data we all use every day, and
it’s not part of the Web. For example, I can see my bank statements on the web, and
my photographs, and I can see my appointments in a calendar. But can I see my
photos in a calendar to see what I was doing when I took them? Can I see bank
statement lines in a calendar? Why not? Because we don’t have a web of data.
Because data is controlled by applications, and each application keeps it to itself.
The vision of the Semantic Web is to extend principles of the Web from
documents to data. Data should be accessed using the general Web architecture
using, e.g., URI-s; data should be related to one another just as documents (or
portions of documents) are already. This also means creation of a common
framework that allows data to be shared and reused across application, enterprise,
and community boundaries, to be processed automatically by tools as well as
manually, including revealing possible new relationships among pieces of data.
Semantic Web technologies can be used in a variety of application areas; for
example: in data integration, whereby data in various locations and various formats
can be integrated in one, seamless application; in resource discovery and
classification to provide better, domain specific search engine capabilities; in
cataloging for describing the content and content relationships available at a
particular Web site, page, or digital library; by intelligent software agents to facilitate
knowledge sharing and exchange; in content rating; in describing collections of
pages that represent a single logical “document"; for describing intellectual property
rights of Web pages, and in many others.
75
2.16.2 What are the major building blocks of the Semantic Web?
In order to achieve the goals, the most important is to be able to define and
describe the relations among data (i.e., resources) on the Web. This is not like the
usage of hyperlinks on the current Web that connect the current page with
another one: the hyperlinks defines a relationship between the current page and
the target. One major difference is that, on the Semantic Web, such relationships
can be established between any two resources, there is no notion of “current"
page. Another major difference is that the relationship (i.e, the link) itself is
named, whereas the link used by a human on the (traditional) Web is not and
their role is deduced by the human reader. The definition of those relations
allow for a better and automatic interchange of data. RDF, which is one of the
fundamental building blocks of the Semantic Web, gives a formal definition for
that interchange.
“The Semantic Web is a vision: the idea of having data on the Web defined
and linked in a way that it can be used by machines not just for display purposes,
but for automation, integration and reuse of data across various applications"
The Semantic Web is an evolving development of the World Wide Web in
which the meaning (semantics) of information and services on the web is defined,
making it possible for the web to understand and satisfy the requests of people and
machines to use the web content.
At its core, the semantic web comprises a set of design principles, collaborative
working groups, and a variety of enabling technologies. Some elements of
the semantic web are expressed as prospective future possibilities that are yet
to be implemented or realized. Other elements of the semantic web are expressed
in formal specifications. Some of these include Resource Description
Framework (RDF), a variety of data interchange formats (e.g. RDF/XML, N3,
Turtle, N-Triples), and notations such as RDF Schema (RDFS) and the
Web Ontology Language (OWL), all of which are intended to provide a
formal description of concepts, terms, and relationships within a given knowledge
domain.
2.17 Image Preliminaries

Web-based images come in two basic flavors: GIF (Graphics Interchange Format),
as designated by the .gif extension, and JPEG (Joint Photographic Experts Group),
as indicated by the .jpg or .jpeg file extension. A third format, PNG (Portable
Network Graphics), as indicated by the .png file extension, is slowly gaining ground
as a Web format and is supported fairly well in modern browsers.
Table below details the supported image types found in most browsers. While
browsers may support other image types, page authors should use only GIF or
JPEG images to ensure that all users can see them.
File Type File Extension

GIF (Graphics Interchange Format) .gif
JPEG (Joint Photographic Experts Group) .jpg or .jpeg
PNG (Portable Network Graphics) .png
XPM (X Pixelmaps) .xpm
XBM (X Bitmaps) .xbm
GIF Images
GIF is the most widely supported image format on the Web. Originally introduced
by CompuServe, there are actually two types of GIF: GIF 87 and GIF 89a. Both of
them support 8-bit color (256 colors), use the LZW (Lempel-Ziv-Welch) lossless
compression scheme, and generally have the .gif file extension. Transparency and
Animation is supported by GIF 89a. GIF images use a basic form of compression
called run-length encoding. This lossless compression works well with large areas
of continuous color.
JPEG
The other common Web image format is JPEG, indicated by a filename ending
with .jpg or .jpeg. JPEG, which stands for the Joint Photographic Experts Group
(the name of the committee that wrote the standard) is a lossy image format designed
for compressing photographic images that may contain thousands, or even millions,
of colors or shades of gray. As JPEG is a lossy image format, there is some trade-
off between image quality and file size. However, the JPEG format stores high-
quality 24-bit color images in a smaller amount of space than GIF, thus saving disk
space or download time on the Web.
PNG
The Portable Network Graphics (PNG) format is an emerging format that has all of
the features of GIF in addition to several other features. The compression algorithm
for PNG is not proprietary compared to GIFs, which use LZW (owned by Unisys).
PNG’s compression algorithm is slightly better than GIF’s, as shown in Figure 2.3
but this alone is probably not much of a reason to give up GIF images given the
browser compatibility problems that still plague the PNG format. PNG also supports
slightly improved interlacing.
77
Gif PNG
(5 KB) (0.6 KB)
(5.6 KB) (0.7 KB)
(5.8 KB) (0.7 KB)
(33 KB) (12.7 KB)
(35.6 KB) (12.2 KB)
Figure 2.3 : PNG Compression vs. GIF Compression

The main reason is that the browser vendors still don’t consistently support
PNG images. Even when the image format is supported, many features such as
transparency are not fully implemented. Still, few browsers except those based
upon Mozilla and Macintosh Internet Explorer support PNG well enough to rely
on the format, so Web designers are warned to avoid using PNGs unless browser
sensing is utilized.
2.18 Image Download Issues

Many readers find Web page creation frustrating because it always seems to them
that other sites just look better or load faster.
Image Use
The first thing to consider is that the quality of the image being used will affect the
outcome of the page layout. Even when armed with a scanner, digital camera, or
software such as Adobe Photoshop, Adobe Illustrator or Macromedia Fireworks,
you might be a long way from being able to produce aesthetically pleasing Web
pages. Don’t fret, you would never expect that just owning a copy of a word
processor would destine you to produce a huge number of books; it takes skill,
patience, and years of practice.
Straight lines, basic colors, and modest use of imagery should produce a clean
and uncluttered design. Furthermore, the simple design will load very fast! When
you decide to use image on your site, whether for just decoration or for the
information, don’t skimp on quality. If you use the clip art from some free Web
site, your site will reflect this. Fortunately, there are many sites that sell the
professional quality clip-illustrations and photographs relatively at a cheaper price.
While this might save money, don’t just right click your way to a nice new image
free of charge. Web users are sophisticated enough to know when they’re having a
cheap site foisted on them.
Legal Issues with Images

The expense of licensing images and the ease with which images can be copied
have convinced many of the people that they can simply appropriate whatever
images they need. This is basically stealing the work of others. Although there are
stiff penalties for copyright infringement, it can be difficult to enforce these laws.
Also, some of the page designers tend to bend the rules thanks to the legal concept
called fair use, which allows the use of someone else’s copyrighted work under
certain circumstances.
There are four basic questions used to define the fair-use principle:
• First, is the work in question being appropriated for a non profit or
profit use? The fair use defense is less likely to stand up if the borrowed
work has been used to make money for someone other than its copyright
holder.
• Second, is the work creative or factual? A creative work could be a
speculative essay on the impact of a recent congressional debate and a
factual work would be a straightforward description of the debate without
commentary. “Fair use" would cover use of the factual work more than
use of the creative.
• Third, how much of the copyrighted work has been used? It is possible
to use someone else’s images if it is changed from the original. The problem
is determining what constitutes enough change in the image to make it a
new work. Just using a photo editing tool to flip an image or change its
colors is not enough. There is a fine line between using portions of another
person’s work and outright stealing. Be careful of using images from free
Internet clip art libraries. These free images may have been submitted
with the belief that they are free, but some of them may have been
appropriated from a commercial clip art library somewhere down the line.
Be careful with high-quality images of famous individuals and commercial
products. Although such groups often might appreciate people using their
images, the usage is limited to non commercial purposes.
79
• Fourth, what impact does the image have on the economic value of
the work? Although unauthorized use of a single Star Trek related image
might not affect the money earned by Paramount Pictures in a given fiscal
year, Paramount’s lawyers take a dim view of such use. In fact, some of
the entertainment organizations have taken steps to make it very difficult
for Web page designers to use such images.
Images and Download Speed

Web Page designers should always consider download time when adding images to
their pages. Always remember that everyone is not having the latest high-speed
cable connection or that high bandwidth is right around the corner. Here are few
tips for improving download time of pages:
1. Make sure to use the correct format for the job. GIF images are good
for illustrations whereas JPEG images are good for photographs. If you
are going to break this rule of thumb, you may find that your images are
unnecessarily big byte-wise and will take longer to download.
2. Reduce colors if possible. When using GIF images, reducing the number
of colors in the image can reduce the file size.
3. Reduce the number of images in the page. The number of individual
images in a page can affect the load speed regardless of the total number
of bytes transferred.
4. Use the browser’s cache. Once an image has been downloaded once, it
should be there in the browser’s cache. If the same file is used later on, the
browser should be able to reuse the one from the cache.
5. Give a preview. If it is going to take a while to download the image, give
the user something to look at. Interlacing a GIF image or making JPEG
progressive results in images that load incrementally. The user might get
the idea of an image long before it completely downloads. Thumbnails of
images also are a way to let a user take a look at the general idea of an
image before committing to a long download.
6. Use markup correctly. Using alt, height, and width attributes can help a
lot to improve page rendering. The alternative text will give the user
something to read as an image loads.
2.19 Image as Button

Image buttons works same as submit buttons. When a visitor clicks an image
button the form values are sent to the address specified in the action attribute of the
<form> tag.The src attribute specifies the URL of the image to use as a submit
button.
Example
<html>
<body>
<form action="abc.asp">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>
<p>Click on the image, and the input that you entered will be sent to a page on the
server called “abc.asp".</p>
<p>The image input type sends the X and Y coordinates of the click that activated
the image button as default.</p>
</body>
</html>
Output:
Enter your name:
Click on the image, and the input that you entered will be sent to a
page on the server called "abc.asp".
The image input type sends the X and Y coordinates of the click
that activated the image button as default.
After entering the name as ‘pridhi’ you will get the following output:
Input was received as:

fname = pridhi&x=25&y=25
This page was returned to you from the server. The server has
processed your input and returned this answer.
2.20 Introduction to Layout

As we know, HTML was not created with design features in mind. Simple layout
techniques such as centring of text have been implemented. Standard elements
such as <ul> were used as structuring & layout tools. The challenge of designing
for web are significant.
81
2.20.1 Background, Colors and Text
Example 1
<html>
<head><body bgcolor="skyblue">
<title>Different tags are used</title>
<h1><center>Bold,Italic andUnderline tags</h1></center>
</head>
<br>
<br>
<b>This is in BOLDletters</b><br>
<i>This is in ITALICletters</i><br>
<u>This text is underlined</u><br>
<br>
<font size="5" face="arial">Size of this text has been specified using font tag.
</font>
</body>
</html>
Output
Bold, Italic and Underline tags
This is in BOLD letters

This is in Italic letters
This text is underlined
Size of this text has been specified using font tag.
2.20.2 Layout with Tables

Example 1
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="2">
<caption>
Student Table
</caption>
<tr>
<th>Roll No.
<th colspan="2">NAME
<th colspan="2">Phone NO
<th colspan="2">Address
<tr>
<th>&nbsp
<th>FName
<th>LName
<th>Landline
<th>Mobile
<th>House no & city
<th>State
<tr>
<td>09/IT/39
<td>Pridhi
<td>Arora
<td>45432
<td>987654321
<td>xyz faridabad
<td>Haryana
<tr>
<td>09/IT/38
<td>Pawan
<td>Bhadana
<td>23454
<td>123456789
<td>abc faridabad
<td>Haryana
83
</body>
</html>
Output
Student Table
Roll No. NAME Phone No. Address
F Name L Name Landline Mobile House no & city State
09/IT/39 Pridhi Arora 45432 987654321 xyz faridabad Haryana
09/IT/38 Pawan Bhadana 23454 123456789 abc faridabad Haryana
2.20.3 Advanced Layout: Frames and layers

Frames
Frames allow you to divide the web page into several rectangular areas and to
display a separate document in each rectangle. Each of those rectangles is called as
a “frame". Frames divide a browser window into several panes and each pane
contains a separate XHTML or HTML document. One of the advantages that frames
offer is that you can then load and reload single panes without having to reload the
entire contents of the browser window. A collection of frames in the browser window
is known as a frameset. To create a frameset document, <frameset> element is used
instead of the <body> element. The frameset defines the rows and columns your
page is divided into, which in turn specify where each individual frame will go.
Each of the frames is then represented by a <frame> element. The <noframes>
element provides a message for users whose browsers do not support frames.
The <frameset> Element

This tag replaces the <body> element in frameset documents. The <frameset> tag
defines how to divide the browser window into frames. Each frameset defines a set
of rows or columns. If you define frames by using rows then horizontal frames are
created and if you define frames by using columns then vertical frames are created.
The values of the rows and columns indicate the amount of screen area each row
and column will occupy in the browser window. Each frame is indicated by <frame>
tag and it defines what HTML document to put into the particular frame.
Example 1
Following is the example to create four horizontal frames:
<html>
<head>
<title>Frames example</title>
</head>
<frameset rows="10%,70%,10%,10%">
<frame src="top_frame.htm" />
<frame src="main_frame.htm" />
<frame src="middle_frame.htm" />
<frame src="bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames!!
</body>
</noframes>
</frameset>
</html>
Now create four HTML files called top_frame.htm, main_frame.htm,
middle_frame.htm and bottom_frame.htm to be loaded into the frames with some
content.
Output:
top frame.htm
main_frame.htm
middle_frame.htm
bottom_frame.htm
Example 2
<html>
<head>
<title>My first Frames Page</title>
</head>
<frameset cols="120,*">
<frame src="a.htm" name="menu">
<frameset rows="*,50">
85
<frame src="b.htm" name="main">
<frame src="c.htm" name="bottom">
</frameset>
</frameset>
</html>
Output:
a.htm b.htm
c.htm
The <frameset> Element Attributes
1. cols: specifies how many columns are contained and the size of each
column in the frameset. You can specify the width of each column in one
of four ways:
• Absolute values in pixels. For example to create four vertical frames,
use cols= "50, 500, 50, 100".
• A percentage of the browser window. For example to create four vertical
frames, use cols= "10%, 70%, 10%, 10%".
• Using a wildcard symbol. For example to create three vertical frames,
use cols= "10%, *, 10%". In this case wildcard takes remainder of the
window.
• As relative widths of the browser window. For example to create three
vertical frames, use cols="3*,2*,1*". This is an alternative to
percentages. You can use the relative widths of the browser window.
Here the window is divided into sixths: the first column takes up half of
the window, the second takes one third, and the third takes one sixth.
2. rows: This works just like the cols attribute and can take the same values,
but it is used to specify the rows in the frameset. For example to create
three horizontal frames, use rows="10%, 10%, 80%". You can specify the
height of each row in the same way as explained above for columns.
3. border: This specifies the width of the border of each frame in pixels. For
example border="6". A value of zero specifies that no border should be
there.
4. frameborder: This specifies whether a three-dimensional border should

be displayed between frames. This attribute takes value either 1 as yes or
0 as no. For example frameborder="0" specifies no border and
frameborder="1".
5. framespacing: This specifies the amount of space between frames in a
frameset. For example framespacing="15" means there should be 15 pixels
spacing between each frames.
The <frame> Element
This element indicates what goes in each frame of the frameset. This element
is always an empty element, and therefore should not have any content, although
each <frame> element should always carry one attribute, src, to indicate the page
that should represent that frame.
<frame src="a.htm" />
<frame src="a.htm" />
The <frame> Element Attributes
1. src: It indicates the file that should be used in the frame. Its value can be
any URL. For example, src="a.htm" will load an HTML file.
2. name: This allows you to give a name to a frame. It is used to indicate
which frame a document should be loaded into. This is important when
you want to create links in one frame that load pages into a second frame,
in which case the second frame needs a name to identify itself as the target
of the link.
3. frameborder: This attribute specifies whether or not the borders of that
frame are shown; it overrides the value given in the frameborder attribute
on the <frameset> element if one is given, and the possible values are the
same. This can take values either 1 (yes) or 0 (no).
4. marginwidth: allows you to specify the width of the space between the
left and right of the frame’s borders and the frame’s content. The value is
given in pixels. For example marginwidth="10".
5. marginheight: allows you to specify the height of the space between the
top and bottom of the frame’s borders and its contents. The value is given
in pixels. For example marginheight="10".
6. noresize: By default you can resize any frame by clicking and dragging
on the borders of a frame. The noresize attribute prevents a user from
being able to resize the frame. For example noresize="noresize".
7. scrolling: controls the appearance of the scrollbars that appear on the
frame. This takes values either “yes", “no" or “auto". For example
scrolling="no" means it should not have scroll bars.
87
8. longdesc: This allows you to provide a link to another page containing a
long description of the contents of the frame. For example longde sc=
"framedescription.htm"
The <noframes> Element:
If you are using any old browser or any browser which does not support
frames then <noframes> element should be displayed to the user. You must place
a <body> element inside the <noframes> element because the <frameset> element
is supposed to replace the <body> element, but if a browser does not understand
the <frameset> element it should understand what is inside the <body> element
contained in the <noframes> element. You can display some message for your
user having old browsers. For example “Try with some other browser this does
not support frames".
Layer in HTML
The <layer> tag is used to position and animate the elements in a page through
scripting. A layer can be thought of as a separate document that resides on top of
the main one, all existing within one window.
This example creates three overlapping layers. The back one is pink, the middle
one is purple, and the front one is yellow.
<html>
<head>
<title>HTML Layer Tag</title>
</head>
<body>
<p>This example creates three overlapping layers. The back one is pink, the
middle one is purple, and the front one is yellow. </p>
<layer id="layer1" top="250" left="50" width="200"
height="200" bgcolor="pink">
<p>first layer</p>
</layer>
height="200" bgcolor="purple">
<p>second layer</p>
</layer>
height="200" bgcolor="yellow">
<p>third layer</p>
</layer>
</body>
</html>
2.21 Audio Support in Browser

Sound is a vital element of true multimedia Web pages. Sound can be stored in many
different formats.
The MIDI Format

The MIDI (Musical Instrument Digital Interface) is a format for sending music
information between electronic music devices like synthesizers and PC sound cards.
The MIDI format was developed in 1982 by the music industry. Standard MIDI
files provide a common file format used by most musical software and hardware
devices to store song information including the title, track names, and most
importantly what instruments to use and the sequence of musical events, such as
notes and instrument control information needed to play back the song. This
standardization allows one software package to create and save files that can later
be loaded and edited by another completely different program, even on a different
type of computer. Almost every software music sequencer is capable of loading
and saving standard MIDI files.The MIDI files are block oriented files, currently
only 2 block types are defined, header and track data. The MIDI format is very
flexible and can be used for everything from very simple to real professional music
making. MIDI files do not contain sampled sound, but a set of digital musical
instructions that can be interpreted by your PC’s sound card.
The RealAudio Format

The RealAudio format was developed for the Internet by Real Media in 1995.
Video is also supported by this format. The format allows streaming of audio (on-
line music, Internet radio) with low bandwidths. Because of the low bandwidth
priority, quality is often reduced. Sounds stored in the RealAudio format have the
extension .rm, .ram, .rax, .ra.
The main ways that the RealAudio format can be used is:
• Streaming: Internet radio stations can use the RealAudio format to deliver
broadcasts in real-time. There are quite a few audio codecs that can be
used to compress audio making it a flexible system.
• Files Encoded at Variable Bitrates: The RealAudio format makes it possible
to encode audio data in a variety of bitrates for downloading. The advantage
of this is that you can encode audio to suite the application. For instance,
if delivery is needed on a low bandwidth connection then a low bitrate can
be used to create files small enough to download easily.
89
The AU Format
The Au file format is an audio file format introduced by Sun Microsystems. The
format was common on NeXT systems and on early Web pages.The AU format is
supported by many different software systems over a large range of platforms.
Sounds stored in the AU format have the extension .au.
The AIFF Format

The AIFF (Audio Interchange File Format),AIFF files generally end with .AIF or
.IEF extension was developed by Apple. It is also used by Silicon Graphics
Incorporated (SGI). AIFF files are not cross-platform and the format is not supported
by all web browsers.
The SND Format

The SND (Sound) was developed by Apple. SND files are not cross-platform and
the format is not supported by all web browsers. SND files generally have the
extension .snd.
The WAVE Format

The WAVE (waveform) format is developed by IBM and Microsoft. It is supported
by all computers running Windows, and by all the most popular web browsers.
WAVE files have the extension .wav.
The MP3 Format (MPEG)

MP3 files are actually MPEG files. MPEG format was originally developed for
video by the Moving Pictures Experts Group. We can say that MP3 files are the
sound part of the MPEG video format. MP3 is one of the most popular sound
formats for music recording. The MP3 encoding system combines good compression
(small files) with high quality. MP3 files have the extension .mp3, or .mpga (for
MPG Audio).
HTML Audio Tags

Tag Description
<audio> This basically defines sound content
<source> This defines multiple media resources for media
elements, such as <video> and <audio>
The <audio> element allows multiple <source> elements. <source> elements
can link to different audio files. The browser will use the first recognized format.The
<audio> tag defines sound, such as music or other audio streams.
<html>
<body>
<audio controls="controls"loop="loop"preload="none"autoplay="autoplay">
<source src="a.ogg" type="audio/ogg">
<source src="a.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Attributes
Attribute Value Description
Autoplay Autoplay It basically specifies that the audio will start
playing as soon as it is ready
Controls Controls It specifies that audio controls should be
displayed (such as a play/pause button etc).
Loop Loop It specifies that the audio will start over
again, every time it is finished
preload auto It specifies if and how the author thinks
Metadata the audio should be loaded when the page
none loads
Src URL It specifies the URL of the audio file
The <source> tag is used to specify multiple media resources for media
elements, such as <video> and <audio>.This tag allows you to specify alternative
video/audio files which the browser may choose from, based on its media type or
codec support.
2.22 Video Support in Browser

Like audio files, video files can also be compressed to reduce the amount of
data being sent. Because of the degree of compression required by video,
most video codecs use a lossy approach that involves a trade-off between picture/
sound qualities and file size, with larger file sizes obviously resulting in
longer download times. There are many different formats in which the video can
be stored.
The AVI Format

The AVI (Audio Video Interleave) format was developed by Microsoft. The
AVI format is supported by all computers running Windows, and by all the most
popular web browsers. It is a very common format on the Internet, but not always
possible to play on non-Windows computers. Videos of AVI format have the
extension .avi.
91
The Windows Media Format
The Windows Media format is developed by Microsoft. Windows Media is a
common format on the Internet, but Windows Media movies cannot be played on
non-Windows computer without an extra (free) component installed. Some later
Windows Media movies cannot play at all on non-Windows computers because no
player is available. Videos of Windows Media format have the extension .wmv.
The MPEG Format

The MPEG (Moving Pictures Expert Group) format is the most popular format on
the Internet. It is cross-platform, and supported by all the most popular web
browsers.Videos of MPEG format have the extension .mpg or .mpeg.
The QuickTime Format

The QuickTime format is developed by Apple. QuickTime is a common format on
the Internet, but QuickTime movies cannot be played on a Windows computer
without an extra (free) component installed. Videos of QuickTime format have the
extension .mov.
The RealVideo Format

The RealVideo format was developed for the Internet by Real Media. The format
allows streaming of video (on-line video, Internet TV) with low bandwidths. Because
of the low bandwidth priority, quality is often reduced. Videos ofRealVideo format
have the extension .rm or .ram.
The Shockwave (Flash) Format

The Shockwave format was developed by Macromedia. The Shockwave format
requires an extra component to play. This component comes preinstalled with the
latest versions of Netscape and Internet Explorer. Videos of Shockwave format
have the extension .swf.
HTML Video Tags
Tag Description
<video> It defines a video or movie
<source> It defines multiple media resources for media elements,
such as <video> and <audio>
<track> It defines text tracks in mediaplayers
The<video> tag specifies video, such as a movie clip or other video streams.
Attributes
Attribute Value Description
Autoplay autoplay The autoplay attribute is a boolean attribute.
It specifies that the video will start playing
as soon as it is ready
Controls Controls It specifies that video controls should be
displayed (such as a play/pause button etc).
Height Pixels It specifies the height of the video player
Loop Loop It specifies that the video will start over
again, every time it is finished
Muted Muted It specifies that the audio output of the video
should be muted
poster url It specifies an image to be shown while the
video is downloading, or until the user hits
the play button
Preload Auto It specifies if and how the author thinks
Metadata the video should be loaded when the page
none loads
Src url It specifies the URL of the video file
Width Pixels It specifies the width of the video player
Example
<html>
<body>
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="a.mp4" type="video/mp4">
<source src="a.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
The <source> tag is used to specify multiple media resources for media
elements, such as <video> and <audio>.This tag allows you to specify alternative
video/audio files which the browser may choose from, based on its media type or
codec support.
93
2.23 Forms in HTML
An HTML form is a section of a document containing normal content, markup,
special elements called controls (checkboxes, radio buttons, menus, etc.), and labels
on those controls. Users generally “complete" a form by modifying its controls
(entering text, selecting menu items, etc.), before submitting the form for processing
(e.g., to a Web server, to a mail server, etc.). A form is simply an area that can
contain form fields.Forms are a characteristic of the HTML standard that let authors
collect information provided by the visitors. These forms can be useful to collect
personal information, contact information, preferences, opinions, or any kind of
user input the author may need.
A form can be inserted in HTML documents using the HTML form element
which acts as a container for all the input elements. All the information collected
by a form can be submitted to a processing agent (a file containing a script made to
process this information) that’s usually specified in the “action" attribute. To handle
forms’ data you must use a server side script.You can also specify how the data
will be sent in the value of the “method" attribute: “post" (the form’s data is attached
to the body of the form) or “get" (the form’s data is attached to the URL). When
the visitor clicks a submit button, the content of the form is usually sent to a
program that runs on the server.
The <form> tag tells the browser where the form starts and ends. You can add
all kinds of HTML tags between the <form> and <form> tags. This means that a
form can easily include a table or an image along with the form fields.
Forms Controls
These fields can be added to your forms:
• Text field: <input type="text"> defines a one-line input field that a user
can enter text into.
• Password field: <input type="password"> defines a password
field, characters in a password field are masked (shown as asterisks or
circles).
• Hidden field:<input type="hidden">Hidden fields are similar to text fields.
The difference is that the hidden field does not show on the page. Therefore
the visitor can’t type anything into a hidden field.
• Text area: The <textarea> tag defines a multi-line text input control. The
size of a text area can be specified by the cols and rows attributes
• Check box: <input type="checkbox"> defines a checkbox. Checkboxes
let a user select ZERO or MORE options of a limited number of choices.
• Radio button: <input type="radio"> defines a radio button. Radio buttons
let a user select ONLY ONE of a limited number of choices
• Drop-down menu: The <select> element is used to create a drop-down
list. The <option> tags inside the <select> element define the available
options in the list.
• Submit button: <input type="submit"> defines a submit button. A submit
button is used to send form data to a server. The data is sent to the page
specified in the form’s action attribute.
• Reset button: When a visitor clicks a reset button, the entries are reset to
the default values.
Example:
Save the below text with form.html
<html>
<body>
<form>
Enter Name <input type="text">
<br>Enter Password <input type="password">
<br>
Enter Roll No <inputtype="text">
<br>Enter Branch <select>
<option>CSE
<option>ME
<option>ECE
<option>IT
</select>
<br>
Gender
<input type="radio" name="Gen">Male
<input type="radio" name="Gen">Female
<br>
DOB date <select>
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
95
<option>8
<option>9
<option>10
<option>11
<option>12
<option>13
<option>14
<option>15
<option>16
<option>17
<option>18
<option>19
<option>20
<option>21
<option>22
<option>23
<option>24
<option>25
<option>26
<option>27
<option>28
<option>29
<option>30
<option>31
</select>
Month <select>
<option>Jan
<option>Feb
<option>Mar
<option>Apr
<option>May
<option>June
<option>July
<option>Aug
<option>Sep
<option>Oct
<option>Nov
<option>Dec
</select>
Year <select>
<option>1985
<option>1986
<option>1987
<option>1988
<option>1989
<option>1990
<option>1991
<option>1992
<option>1993
<option>1994
</select>
<br>
Address
<textarea rows="4"columns="3">
</textarea>
<br>
Enter Hobbies
<br>
<input type="checkbox" checked>Listening Music
<br>
<input type="checkbox" checked>
Playing Cricket
<br>
<input type="checkbox">
Reading Novels
<br>
<input type="button"value="Submit">
<input type="button" value="Reset">
</form>
</body></html>
Output:
97
Example 2
<html>
<body>
<h2>Contact Form</h2>
<form action="xyz.php" method="post" name="form1" id="form1">
<table border="0">
<tr>
<td>First Name:</td>
<td><input name="firstname" id="firstname" size="40" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input name="lastname" id="lastname" size="40" /></td>
</tr>
<tr>
<td>Company:</td>
<td><input name="company" id="company" size="40" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input name="address" id="address" size="40" /></td>
</tr>
<tr>
<td>City:</td>
<td><input name="city" id="city" size="25" /></td>
</tr>
<tr>
<td>State:</td>
<td><input name="state" id="state" size="2" /></td>
</tr>
<tr>
<td>Country:</td>
<td><input name="country" id="country" size="25" /></td>
</tr>
<tr>
<td>Postal Code:</td>
<td><input name="zip" id="zip" size="10" /></td>
</tr>
<tr>
<td colspan="2"><br />
Enter any comments below:<br />
<textarea name="comments" id="comments" rows="5" cols="45">
</textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<br />
<br /></td>
</tr>
99
</table>
</form>
</body>
</html>
Output
Example3
<html>
<head>
<title>forms</title>
<body>
<b><u>Admission Form</u></b>
<form>
<pre>NAME<input type="text" maxlength=20><br>
AGE<input type="text"><br>
PASSWORD<input type="password"><br>
GENDER<input type="radio" name="r1">male
<input type="radio" name="r1">female<br>
COURSES<input type="radio" name="r2">Btech<br>
<input type="radio" name="r2">Mtech<br>

<input type="radio" nmae="r2">BCA<br>
COUNTRY <select name="COUNTRY">
<option value="Country">Country
<option value="India">India
<option value="America">America
<option value="Australia">Australia
<option value="Canada">Canada
<option value="Japan">Japan
</select>
HOBBIES<input type="checkbox" name="c1">sports<br>
<input type="checkbox" name="c2">technical art<br>
<input type="checkbox" name="c3">robotics<br>
<input type="BUTTON" value="SUBMITT"> <input type="RESET">
</pre>
</form>
</body>
</html>
Output
STYLE SHEETS
101
CHAPTER 3
STYLE SHEETS
3.1 Style Sheets

CSS stands for Cascading Style Sheets. A style sheet is a set of instructions. Each
instruction tells a browser how to draw a particular element on a page. A CSS file
allows you to separate the content from its style. Styles basically define how to
display HTML elements. The HTML is the meaning or content, the style sheet is
the presentation of that document. HTML is used to structure content. CSS is used
for formatting structured content and to refine the presentation of web page by
allowing you to set properties for html elements using a huge variety of values. It’s
an advanced tool for web designers to create professional web sites that cannot be
made using regular html attributes.
3.1.1 CSS Syntax

The CSS syntax consists of a set of rules. Each rule has 3 parts: a selector, a property,
and a value. The selector is basically the HTML element you want to style.Each
declaration consists of a property and a value.The property is the style attribute
that you want to change. Each property has a value.A declaration always ends with
a semicolon, and group of declaration are surrounded by curly brackets:
Example:
h1{color:pink; font-size:10px;}
Here “h1” is a Selector, and we have two declarations: color:pink and font-
size:10px. Color and font-size are property with value specified as pink and 10px
respectively.
3.2 Applying CSS

There are three ways to apply CSS to HTML:
• Inline style
• Internal style sheet
• External style sheet
• Importing a style sheet
3.2.1 Inline Styles
An inline style allows you to change the behaviour of an html tag to achieve a
desired appearance that you wish to have. The change effected by the inline style is
a local one. That is, it applies only to a single tag where the inline style is included.
To use inline styles,the style attribute is used in the relevant tag. The style attribute
can contain any CSS property. If you want to add a style inside an HTML element
all you have to do is specify the desired CSS properties with the style HTML
attribute. The example shows how to change the color and the right margin of a
paragraph:
<p style=”color: pink;margin-right:20px;”>Hie !! We are applying a style to
a paragraph</p>
The example shows how to change the background color and the text color of
a paragraph:
<p style=”background: blue; color: white;”>A new background and font color
with inline CSS</p>
Example1:
<html>
<body>
<h2 style=”font-size:20pt;”> This heading has a 20pt font size</h2>
<p style=”font-style:italics;”>This paragraph has an italic style</p>
<a href=”a.html” style: “font-style:italics; “font-size:14pt;”> This is a link</

a>
<ol style=”background: yellow;”>

<li style:”text-transform:uppercase;”> This text is in uppercase
<li>Second Item
</ol>
</body>
</html>
STYLE SHEETS
103
Example2:
<html>
<head>
<Title>Inline</Title>
</head>
<body bgcolor=”pink”>
<center><H1 Style=”background-color:blue” id=”h1">Inline Style</H1></
Center>
<P Style=”font-size:14pt” “font-weight:bold” “font-style:italic” id=”p1">
This is a type of style setting. Here the fonts size of the paragraph is 14pt.
The font appears bold and the font style appears in italic.</P>
<P>
The different types of styles are <Br>
<Span Style=”font-weight:bold” id=”s1">
Inline Style<Br>
Embeded Style<Br>
Linked Style<Br>
</span>
</p>
<p style=”font-size=16pt” “Color:yellow” id=”p2"> This example describes
the inline style</P>
</body>
</html>
3.2.2 Internal Style Sheet

In an Internal style, the styles can be used to define tag properties that are applied
globally throughout a document. It means if you define a style to H5 element then
all the H5 elements in the whole document will get the same style. An internal style
sheet should be used when a single document has a unique style. You define internal
styles in the head section of an HTML page, by using the <style> tag.
Example to set the background color of page:
<html>
<head>
<style>
body
{
background-color:purple;
}
</style>
</head>
<body>
<h3>Learning CSS</h3>
<p>Hello students! I hope now you know how to change the background
color using CSS.</p>
</body>
</html>
Example to set the text color of different element:
<html>
<head>
<style>
body {color:red;}
h1 {color:purple;}
p.ab {color:blue;}
</style>
</head>
<body>
<h4>This is heading with purple color</h4>
<p>Red color for this paragraph has been defined in the body selector.</p>
<p class=”ab”>This is a paragraph with class=”ab”. This text is blue.</p>
</body>
</html>
Example for text transformation:
<html>
<head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
STYLE SHEETS
105
</head>
<body>
<p class=”uppercase”>This is text in Uppercase.</p>
<p class=”lowercase”>THIS IS TEXT IN LOWERCASE.</p>
<p class=”capitalize”>This is text with intial letter in uppercase.</p>
</body>
</html>
Output:
THIS IS TEXT IN UPPERCASE.
this is text in lowercase.
This Is Text With Initial Letter In Uppercase
Example to specify the font of the text:

<html>
<head>
<style>
p.ab{font-family:”Times New Roman”,calibri,arial;}
p.xy{font-family:calibri,Arial,batang,monotypecorsiva;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class=”ab”>This is a paragraph, shown in the Times New Roman font.
</p>
<p class=”xy”>This is a paragraph, shown in the Calibri font.</p>
</body>
</html>
Output:
CSS font-family
This is a paragraph, shown in the Time New Roman font.
This is a paragraph, shown in the Calibri font.
Example to specify various font properties:

<html>
<head>
<style>
p.a1
{
font:18px monotype corsiva,sans-serif;
}
p.a2
{
font:italic bold 15px Arial,serif;
}
</style>
</head>
<body>
<p class=”a1 “>This is a paragraph with the properties specified for class
“a1”</p>
STYLE SHEETS
107
<p class=”a2">This is a paragraph with the properties specified for class
“a2”</p>
</body>
</html>
Output:
3.2.3 External Style Sheet

Using external style, you can define a style sheet in an external file with .css
extension and then link it to any web page you want. In this way, the changes made
in the style sheet file will affect all the web pages linked to that style sheet file.
This is “write once, run anywhere” philosophy. To create the style sheet file, place
the set of rules inside text file and attach the .css extension to that file. An external
style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. 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>
An external style sheet can be written in any text editor. The file should not
contain any html tags. Your style sheet should be saved with a .css extension. An
example of a style sheet file is shown below:
hr {color:pink;}
p {margin-left:20px;}
Example:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<h2> uppercase heading</h2>

<p> Italic Paragraph</P>
</body>
</html>
mystyle.css file
h2{text-transform: uppercase;}
p{font-style:italic;}
3.2.4 Importing a Style Sheet

<html>
<head>
<style>
@import url(style.css)
</style>
</head>
<body>
<p>
The color of this paragraph is purple, and has uppercase letters which are
underlined</p>
</body>
</html>
Style.css
P{color: purple; text-transform:uppercase;text-decortion:underline;}
3.3 Positioning with style sheets

Positioning allows you to control how the elements are positioned on a page,
including positioning an element behind another. You can position the various
elements with the following properties: top, bottom, left and right. However, these
properties will not work unless the position property is set first. They also work
differently depending on the positioning method.
There are four main positioning options: Absolute, fixed, relative and static.
STYLE SHEETS
109
3.3.1 Absolute Positioning
An absolute position element is positioned relative to the first parent element that
has a position other than static.The absolute class allows you to place the object in
front of or behind the other objects. Absolute positioning consider its starting point
from the upper left corner of the browser pane, this is coordinate 0, 0. Once you
use absolute positioning, this object does not affect any other object in the flow.
Example of absolute positioning
<html>
<head>
<style type=”text/css”>
img
{
position:absolute;
left:100px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<imgsrc=”rk.jpg” width=”195" height=”184" />
</body>
</html>
3.3.2 Fixed Positioning

In this positioning the element is positioned relative to the browser window. In this
case if the document is scrolled, the fixed objects don’t scroll with it.
Example of Fixed positioning
<html>
<head>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class=”pos_fixed”>Some more text</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</
p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</
p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</
p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>
Example of Fixed & Absolute positioning

<html>
<head>
<title>Fixed and Absolute Positioning</title>
<style>
h2
{
position:absolute;
left:30px;
top:30px;
color:purple;
}
fixed
{
position:fixed;
top:90px;
left:40px;
}
</style>
</head>
STYLE SHEETS
111
<body>
<h2>This is text placed in an absolute position</h2>
<fixed>This is text in a fixed position</fixed>
</body>
</html>
3.3.3 Relative Positioning

The element is positioned relative to its normal position, so “right:20” adds 20
pixels to the element’s RIGHT position
Example of Relative positioning
<html>
<head>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class=”pos_left”>This heading is moved left according to its normal
position</h2>
<h2 class=”pos_right”>This heading is moved right according to its normal
position</h2>
<p>Relative positioning moves an element RELATIVE to its original
position.</p>
<p>The style “left:-20px” subtracts 20 pixels from the element’s original left
position.</p>
<p>The style “left:20px” adds 20 pixels to the element’s original left

position.</p>
</body>
</html>
3.3.4 Static Positioning

This is the default value. This is how all objects on a page are positioned by
default. The top, bottom, left and right properties don’t apply to static objects.
Elements are rendered in the order, as they appear in the document flow. These
elements are not affected by the top, bottom, left, and right properties.
3.3.5 Overlapping Elements

When elements are positioned against the normal flow, they can overlap other
elements. The z-index property specifies the stack order of an element that means
which element should be placed in front of, or behind, the others. The z-index
property in CSS controls the vertical stacking order of elements that overlap. An
element can have a positive or negative stack order. An element with greater stack
order will be always in front of an element with a lower stack order. If two positioned
elements overlap, without a z-index specified, the element positioned last in the
HTML code will be shown on top.
Position: Absolute;
Z-Index: 1;
Position: Absolute;
Z-Index: 2;
Figure 3.1 Overlapping elements

Example
img
{
position:absolute;
left:10px;
STYLE SHEETS
113
top:20px;
z-index:-1;
}
Example
<html>
<head>
<style>
h4{ position: relative;

top: 30px;
left: 50px;
z-index: 2;
background-color: pink;}
p { position: relative;
z-index: 1;
background-color: purple;}
</style>
</head>
<body>
<h4>Header Z-Index = 2</h4>
<p>Some text Some text Some text Some text Some text Some text Some
text Some text Some text. This paragraph has a value of z-index as 1, which is less
than the header. So the header has been moved down, using positioning, and is
now resting on top of this paragraph. If we had not defined the z-index, by default
the paragraph would have been on top of the header because it appears later in our
HTML code.</p>
</body>
</html>
Example
<html>
<head>
<title>Overlapping Elements</title>
<style>
img
{
position:absolute;
left:60px;
top:60px;
z-index:-1;
}
h2
{
position:absolute;
left:70px;
top:35px;
color:pink;
}
fixed
{
position:fixed;
top:135px;
left:70px;
}
p
{
position:absolute;
left:70px;
top:150px;
}
</style>
</head>
<body>
STYLE SHEETS
115
<imgsrc=”xyz.png” width=”243" height=”70" alt=””>
<h2>Text in an absolute position</h2>
<fixed>Text in a fixed position</fixed>
<p>This image uses the absolute position and is placed 50 pixels<br>
from the top and 50 pixels from the left with a z-index of -1, <br>
which moves the image behind the text.</p>
</body>
</html>
CHAPTER 4
JAVA SERVER PAGES
4.1 Introduction to JSP

Java Server Pages (JSP) is a technology defined by Sun Microsystems for developing
web pages that support dynamic content which helps developers to insert java
code in HTML pages by making use of special JSP tags, most of which start with
<% and end with %>.A Java Server Pages component is a type of Java servlet that
is designed to fulfil the role of a user interface for a Java web application. Web
developers write JSPs as text files that combine HTML or XHTML code, XML
elements, and embedded JSP actions and commands.Using JSP, you can collect
input from users through web page forms, present records from a database or another
source, and create web pages dynamically.JSP tags can be used for various purposes,
such as retrieving information from a database or registering user preferences,
accessing JavaBeans components, passing control between pages and sharing
information between requests, pages etc.
4.1.1 Need of JSP

Java Server Pages often serve the same purpose as programs implemented using
the Common Gateway Interface (CGI). But JSP offer several advantages in
comparison with the CGI.
• Performance is significantly better because JSP allows embedding Dynamic
Elements in HTML Pages itself instead of having a separate CGI files.
• JSP are always compiled before it is processed by the server unlike CGI/
Perl which requires the server to load an interpreter and the target script
each time the page is requested by the user.
• JSP pages can be used in combination with servlets that handle the business
logic, the model supported by Java servlet template engines.
JAVA SERVER PAGES
117
4.1.2 Advantages of JSP over other technologies
• vs. Active Server Pages (ASP): The advantages of JSP are twofold.
First, the dynamic part is written in Java language, not in Visual Basic or
other MS specific language, so it is more powerful and easier to use. Second,
it is portable to other operating systems and non-Microsoft Web servers.
• vs. Pure Servlets: It is more convenient to write and to modify regular
HTML than to have huge number of println statements that generate the
HTML.
• vs. Server-Side Includes (SSI): SSI is only intended for simple inclusions,
not for “real” programs that use form data and make database connections.
• vs. JavaScript: JavaScript can generate HTML dynamically on the client
but can hardly interact with the web server to perform complex tasks like
database access and image processing etc.
• vs. Static HTML: Regular HTML cannot contain dynamic information.
4.2 JSP Architecture

The web server requires a JSP engine i.e. container to process JSP pages. The JSP
container is responsible for intercepting requests for JSP pages. A JSP container
works with the Web server to provide the runtime environment and other services
that is required by JSP. It knows how to understand and process the special elements
that are part of JSPs.
Following diagram shows the position of JSP container and JSP files in a
Web Application.
Web Server
JSP Files are

Macos stores
here!!
Internet
JSP
Linux OS Servlet Oracle
Engine Database
Windows XP
Figure 4.1 Web server supporting JSP
4.2.1 JSP Processing:

The following steps explain how the web server creates the web page using JSP:
• As with a normal page, a request is sent by the browser to the web server.
• The web server recognizes that the HTTP request is for a JSP page and
forwards the request to a JSP engine. This is done by using the URL or
JSP page which ends with .jsp instead of .html.
• The JSP engine loads the JSP page and converts it into servlet content. In
this conversion all template text is converted to println( ) statements and
all JSP elements are converted to Java code that implements the
corresponding dynamic behaviour of the page.
• The JSP engine compiles the servlet into an executable class and forwards
the original request to a servlet engine.
• Servlet engine, a part of the web server loads the Servlet class and executes
it. During execution, the servlet produces an output in HTML format, which
the servlet engine passes to the web server inside an HTTP response.
• The web server forwards the HTTP response to your browser as static
HTML content.
• Finally web browser handles the dynamically generated HTML page inside
the HTTP response exactly as if it were a static page.
All the above mentioned steps can be shown below in the following diagram:
Client 1. Get file Hie.jsp 2. Read Hie.jsp Translation

Server
with JSP
Container 3. Generate Hieservlet Phase
.java
6. <Html> Hie!! </html>
5. Execute 4. Compile
Request
Hieservlet.class Processing
Phase
Figure 4.2 Processing of a Java server Page

Typically, the JSP engine checks whether a servlet for a JSP file already exists
and whether the modification date on the JSP is older than the servlet. If the JSP is
older than its generated servlet, the JSP container assumes that the JSP hasn’t
changed and that the generated servlet still matches the JSP’s contents. This makes
the process more efficient and faster.
So we can say, a JSP page is really just another way to write a servlet without
having much knowledge of Java programming, except for the translation phase, a
JSP page is handled exactly like a regular servlet.
4.3 JSP Life Cycle

A JSP life cycle can be defined as the entire process from its creation till the
JAVA SERVER PAGES
119
destruction which is similar to a servlet life cycle with an additional step which is
required to compile a JSP into servlet.
The following defines the life cycle of JSP
• Compilation
• Initialization
• Execution
• Cleanup
The three major phases of JSP life cycle are very similar to Servlet Life Cycle
and they are as follows:
INITIALIZATION
Jsplnit
Request lifecycle
Request
Main Logic
JspService()
Response
Shutdown
jspDestroy()
Figure 4.4 Life cycle of JSP

(1) JSP Compilation: When a browser asks for a JSP, the JSP engine first
checks whether it needs to compile the page or not. If the page has never
been compiled, or if the JSP has been modified since it was last compiled,
the JSP engine compiles the page.
The compilation process involves following steps:
1. Parsing the JSP
2. Turning the JSP into a servlet
3. Compiling the servlet
(2) JSP Initialization: jspInit() method is invoked after the page is loaded by
the container before servicing any requests. If you need to perform JSP-
specific initialization, override the jspInit() method:
public void jspInit(){ // Initialization code...}

Initialization is performed only once and as with the servlet init method, you
generally initialize database connections, open files, and create lookup tables in
the jspInit method.
(3) JSP Execution:
This phase of the JSP life cycle represents and handles all interactions with
requests until the JSP is destroyed.Whenever a browser requests a JSP and the
page has been loaded and initialized, the JSP engine invokes the jspService() method
in the JSP.The jspService() method takes an HttpServletRequest and an
HttpServletResponse as its parameters as follows:
void jspService (Http Servlet Request request, Http Servlet Response response)
{ // Service handling code...}
The jspService() method of a JSP is invoked once per a request and is
responsible for generating the response for that request and is also responsible for
generating responses to all seven of the HTTP methods ie. GET, POST, DELETE
etc.
(4) JSP Cleanup:
The destruction phase of the JSP life cycle represents when a JSP is being
removed from use by a container.The jspDestroy() method is equivalent of the
destroy method for servlets. If you need to perform any cleanup, such as releasing
database connections or closing open files, you need to override jspDestroy.
The jspDestroy() method has the following form:
public void jspDestroy(){ // Your code goes here.}
4.4 JSP Tags

4.4.1 The Scriptlet
JSP also allows you to write blocks of Java code.You do this by placing your Java
code between <% and %>characters.This block of code is known as a “scriptlet”.A
scriptlet can contain any number of JAVA language statements, variable or method
declarations, or expressions that are valid in the page scripting language. In Scriplet
tag we can only declare variables not methods and the declaration of the scriplet
tag is placed inside the jspservice() method.
Following is the syntax of Scriptlet:
<% code fragment %>
4.4.2 JSP Declarations
A declaration declares one or more variables or methods that you can use in Java
code later in the JSP file. The code written inside the JSP declaration tag is placed
outside the service() method of auto generated servlet. So it is not allocated memory
JAVA SERVER PAGES
121
at each request. You must declare the variable or method before you use it in the
JSP file. In this we can declare variables as well as methods and the declaration of
the declaration tag is placed inside the jspservice() method.
Following is the syntax of JSP Declarations:
<%! declaration; [ declaration; ]+ ... %>
Example
<%! int i = 0; %>
<%! int a, b, c; %>
4.4.3 JSP Expression

A JSP expression element contains a scripting language expression that is evaluated,
converted to a String, and inserted where the expression appears in the JSP file.
The code palced within the expression tag is written to the output stream of the
response. Basically used to print the values of variables or methods.The expression
element can contain any expression that is valid according to the Java Language
Specification but you cannot use a semicolon to end an expression.
Following is the syntax of JSP Expression:
<%= expression %>
4.4.4 JSP Directives

JSP directives provide directions and instructions to the container, telling it how to
handle certain aspects of JSP processing. The directives are messages that tell the
web container how to translate a JSP page into corresponding servlet.A JSP directive
affects the overall structure of the servlet class. It usually has the following form:
<%@ directive attribute=”value” %>
There are three types of directive tag:
Directive Description
<%@ page ... %> Defines attributes that apply to an entire JSP page.
<%@ include ... %> Includes a file during the translation phase.
<%@ taglib ... %> Declares a tag library, containing custom actions,
used in the page
• The page Directive: The page directive is used to provide instructions to
the container that is applicable to the current JSP page.The page directive
does not produce any visible output when the page is requested but change
the way the JSP Engine processes the page. You may code page directives
anywhere in your JSP page. By convention, page directives are coded at
the top of the JSP page.
Following is the basic syntax of page directive:
<%@ page attribute=”value” %>
Attributes:
Following is the list of attributes associated with page directive: 122
Attribute Description Syntax Example
language Specifies the language used in language=”java” <%@ page
the page,for JSP it can be language=”java”%>
only “java”.
Import Specifies the classes to be import=”package.class” <%@ page import=”
imported java.util.*, java.io.*”%>
Extends Specifies whether the page extends=”package.class” <%@ page extends=”
uses an extended class com.Connect”%>
Session It is used to make a session session=”true|false” <%@ page session=”true”%>
value available to a jsppage,
this attribute has a “boolean”
value and its “true” by default.
Buffer Specifies the pages buffer size buffer=”sizekb|none” <%@ page buffer=”8kb”%>
autoFlush This is used to flush the buffer if autoflush=”true|false” <%@ page autoFlush=”true”%>
it is set to “true” else it will not.
Info This defines a string that can be info=”message” <%@ page info=”This is a
retrieved via the getServletInfo simple jsp file created by
method. xyz on 17 Nov 2012"%>
pageEncoding This defines data type of page pageEncoding=” <%@ page pageEncoding
encoding. ISO-8859-1" =”ISO-8859-1"%>
contentType Specifies the content and mime contentType=” <%@ page contentType=
ZERO TO MASTERY IN WEB DEVELOPMENT
type. MIME-Type” ”text/html; charset=

ISO-8859-1"%>
isErrorPage Specifies whether to use the isErrorPage=”true|false” <%@ page isErrorPage
JAVA SERVER PAGES
exception object,it is set to “true” =”false”%>

to use the exception object,
else it can be set to “false”.
errorPage Specifies the error page location errorPage=”url” <%@ page errorPage=”
for unhandled exceptions. error.jsp”%>
123
• buffer Attribute:
This attribute specifies buffering characteristics for the server output response object.
It sets the buffer size in kilobytes to handle output generated by JSP. The default
size of the buffer is 8kb. You may code a value of “none” to specify no buffering so
that all servlet output is immediately directed to the response object or you may
code a maximum buffer size in kilobytes, which directs the servlet to write to the
buffer before writing to the response object.
To direct the servlet to write output directly to the response output object, use
the following:
<%@ page buffer=”none” %>
Use the following to direct the servlet to write output to a buffer of size not
less than 8 kilobytes:
<%@ page buffer=”8kb” %>
• autoFlush Attribute:
The autoFlush attribute specifies whether buffered output should be flushed
automatically or not when the buffer is filled, or whether an exception should be
raised to indicate that the condition of buffer overflow.A value of true indicates
automatic buffer flushing and a value of false throws an exception. Default value is
true.The following directive causes the servlet to throw an exception when the
servlet’s output buffer is full:
<%@ page autoFlush=”false” %>
This directive causes the servlet to flush the output buffer when its full:
<%@ page autoFlush=”true” %>
Usually, the buffer and autoFlush attributes are coded on a single page directive
as follows:
<%@ page buffer=”16kb” autoflush=”true” %>
• errorPage Attribute:
The errorPage attribute tells the JSP engine which page to display if there is an
error while the current page runs. It is used to define an error page, if an exception
occurs in the current page, it will be redirected to another page. The value of the
errorPage attribute is a relative URL.The following directive displays
Myerrorpage.jsp when all uncaught exceptions are thrown:
<%@ page errorPage=”Myerrorpage.jsp” %>
• isErrorPage Attribute:
The isErrorPage attribute indicates that the current JSP can be used as the error
page for another JSP.The value of isErrorPage is either true or false. The default
JAVA SERVER PAGES
125
value of this attribute is false.For example, the handleError.jsp sets the isErrorPage
option to true because it is supposed to handle errors:
<%@ page isErrorPage=”true” %>
• The import Attribute:

The import attribute serves the same function and behaves like, the Java import
statement. This is used to import class, interface, or all members of a package. The
value for the import option is the name of the package you want to import.
To import java.util.*, use the following page directive:
<%@ page import=”java.util.*” %>
• The language Attribute:

The language attribute indicates the programming language used in scripting the
JSP page. The default value is java. For example, generally Java is used as the
scripting language, your language option looks like this:
<%@ page language=”java” %>
• The session Attribute:

The session attribute indicates whether or not the JSP page uses HTTP sessions. A
value of true indicates that the JSP page has access to a built in session object and
a value of false means that the JSP page cannot access the builtin session
object.Following directive allows the JSP page to use any of the builtin object
session methods such as session.getCreationTime() or session.getLastAccessTime():
<%@ page session=”true” %>
• The include Directive:

The include directive is used to includes the content of any resource it may be jsp
file, html file or text file during the translation phase. This directive tells the container
to merge the content of other external files with the current JSP. You may code
include directives anywhere in your JSP page.
The general usage form of this directive is as follows:
<%@ include file=”relative url” >
• The taglib Directive:

The Java Server Pages API allows you to define custom JSP tags that look like
HTML or XML tags and a tag library is a set of user-defined tags that implement
custom behaviour. TLD (Tag Library Descriptor) file is used to define the tags.
This directive declares that your JSP page uses a set of custom tags, identifies the
location of the library, and provides a means for identifying the custom tags in your
JSP page.
The taglib directive follows the following syntax:

<%@ tagliburi=”uri”>
4.4.5 JSP Actions

JSP action tags are basically used to control the flow between pages and to use Java
Beans.Constructs are used by JSP actions in XML syntax to control the behavior of
the servlet engine. You can dynamically insert a file, reuse JavaBeans components,
forward the user from existing to another page, or generate HTML for the Java
plugin. Instead of using Java code, the programmer uses special JSP action tags to
either link to a Java Bean set its properties, or gets its properties.
Action elements are basically predefined functions and there are following
JSP actions available:
Syntax Purpose
jsp:include Includes a file at the time the page is requested
jsp:useBean Finds or instantiates a JavaBean
jsp:set PropertySets the property of a JavaBean
jsp:getProperty Inserts the property of a JavaBean into the output
jsp:forward Forwards the requester to a new page
jsp:element Defines XML elements dynamically.
jsp:attribute Defines dynamically defined XML element’s attribute.
jsp:body Defines dynamically defined XML element’s body.
4.5 JSP Implicit Objects

JSP Implicit objects are the objects that are created by the container automatically
and the container makes them available to the developers and the developers do
not need to create them explicitly. JSP Implicit Objects are the Java objects that the
JSP Container makes available to developers in each page and developer can call
these objects directly without being explicitly declared. Since these objects are
created automatically by the container and are accessed using standard variables;
hence, they are called implicit objects. JSP Implicit Objects are also called pre-
defined variables. Scripting elements in a JSP page can make use of these JSP
implicit objects and can also be accessed programmatically by JavaBeans and
Servlets. Each object must adhere to a specific Java class or interface definition.
The implicit objects are parsed by the container and inserted into the generated
servlet code. They are available only within the jspService method and not in any
declaration.
JAVA SERVER PAGES
127
JSP support Implicit Objects which are listed below:
4.5.1 JSP Request Object

This object in JSP is used to get the values that are passed to the web server by the
client during an HTTP request. The request object is used to take the value from
the client’s web browser and pass it to the server. This is performed using an HTTP
request such as: headers, cookies or arguments.
• Methods of request Object:
There are numerous methods available for request Object. Some of them
are:
• getCookies()
• getHeader(String name)
• getHeaderNames()
• getAttribute(String name)
• getAttributeNames()
• getMethod()
• getParameter(String name)
• getParameterNames()
• getParameterValues(String name)
• getQueryString()
• getRequestURI()
• getServletPath()
• setAttribute(String,Object)
• removeAttribute(String)
getCookies(): This method of request object returns all cookies that were
sent with the request information by the client. The cookies are returned
as an array of Cookie Objects. Cookies are used to allow web browsers to
hold some small amounts of information or state data associated with a
user’s web browsing. Common applications for cookies include storing
user preferences, automating low security user “sign on” facilities, and
helping collect data used for “shopping cart” type applications.
The following example gets a list of available cookies.
<html>
<body>
<%
Cookie[] myStoredCookies = request.getCookies();
for(int n=0; n <myStoredCookies.length; n++)
{
out.print(myStoredCookies[n].getName() + “ “);
out.print(myStoredCookies[n].getValue() + “<BR>”);
}
%>
</body>
</html>
Output:
JAVA SERVER PAGES
129
getHeader(String name): This method of request object is used to return
the value of the requested header. The returned value of header is a string.
As a parameter header name is passed which is retrieved by the method
getHeaderNames() of the request object that gives all the HTTP header
names in the enumeration form which has to be converted into string form
later for getting the value of the HTTP header from it one by one.
General syntax of getHeader() of request object is request.getHeader(“String”).
<%@ page import = “ java.util.* “ %>
<html>
<body>
<%
Enumeration enum = request.getHeaderNames();
while (enum.hasMoreElements())
{
String string = (String)enum.nextElement();
out.println(string +”:” + request.getHeader(string)+”<br>”);
}
%>
</body>
</html>
Output:
host:localhost:8080
user-agent: Mozilla/5.0 (Windows NT 6.1; rv:13.0) Gecko/20100101 Firefox/
13.0.1
accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-language:en-us,en;q=0.5
accept-encoding:gzip,deflate
connection:keep-alive
cookie:JSESSIONID=e98ae615c498e047443672ba52b4;username=pridhi
cache-control: max-age=0
getHeaderNames(): This method of request object returns all the header

names in the request.This method is used to find the available headers.
The value returned is an enumerator of all header names.
<%@page import=”java.util.*” %>
<html>
<body>
<%
String headername = “”;
for(Enumeration e = request.getHeaderNames(); e.hasMoreElements();)
{
headername = (String)e.nextElement();
%>
<p><%= headername %></p>
<%}%>
Output:
JAVA SERVER PAGES
131
getMethod(): This method of request object is used to return the methods

GET, POST, or PUT corresponding to the requested HTTP method used.
For example:
if(request.getMethod().equals(“POST”))
{
.........
.......
}
In the above example, the method returned by the ‘request.getMethod’ is
compared with POST Method and if the returned method from
‘request.getMethod()’ equals POST then the statement in “if” block executes.
<html>
<body>
<%
String a=request.getMethod();
out.println(a);
%>
</body>
</html>
Output:
GET
getParameter(String name): This method of request object is used to return

the value of a requested parameter. The string value is returned. If the requested
parameter does not exist, then a null value is returned as output. If the requested
parameter exists, then the value of the requested parameter is returned as a string.
Getparameter.html
<html>
<body>
<form action=”getparameter.jsp” method=”post”>
User Name:<input type=”text” size=”20" name=”txtUserName” /><br>
Password:<input type=”password” size=”20" name=”txtPassword” /><br>
<input type=”submit” value=”Submit” name=”B1" />
</form>
</body>
</html>
Getparameter.jsp
<html>
<body>
<%
String username, password;
if(request.getParameter(“txtUserName”) == null)
username = “”;
else
username= request.getParameter(“txtUserName”);
if (request. getParameter (“txtPassword”) == null)
password = “”;
else
password = request.getParameter(“txtPassword”);
%>
Your User Name: <%=username %><br/>
Your Password: <%=password %>
</body>
</html>
Output:
JAVA SERVER PAGES
133
getParameterNames(): This method of request object is used to return

the names of the parameters given in the current request. The names of
parameters returned are enumeration of string objects.
<html>
<body>
<form method=”post”>
User Name: <input type=”text” size=”20" name=”txtUserName” /><br>
Password: <input type=”password” size=”20" name=”txtPassword” /><br>

<input type=”submit” value=”Submit” name=”B1" />
</form>
<%
String ParameterNames = “”;
for(Enumeration e = request.getParameterNames();
e.hasMoreElements();)
{
ParameterNames = (String)e.nextElement();
out.println (ParameterNames + “<br/>”);
}
%>
</body>
</html>
Output:
txtUserName
txtPassword
B1
JAVA SERVER PAGES
135
getParameterValues(String name)
This method of request object was used to return the value of a requested given
parameter. The returned value of the parameter is a string. If there are a number of
values of parameter to be returned, then the method getParameterValues (String
name) of request object can be used by the programmer. The getParameterValues
(String name) method of request object is used to return all the values of a given
parameter’s request. The returned value of parameter is an array of string objects.
If the requested parameter is found, then the values associated with it are returned
as array of string object. If the requested given parameter is not found, then null
value is returned by the method.
<html>
<body>
<form method=”post”>
<p>Select Items: </p>
<input type=”checkbox” name=”checkBoxes” value=”ITEM 1" />ITEM 1.
<input type=”checkbox” name=”checkBoxes” value=”ITEM 5" />ITEM
5.<br/>

<input type=”submit” value=”Show” />
</form>
<p>You selected following items:</p>
<%
if(request.getParameter(“checkBoxes”) != null)
{
%>
<%!String[] ItemNames; %>
<%
ItemNames = request.getParameterValues(“checkBoxes”);
for(int i = 0; i <ItemNames.length; i++)
{
%>
<p> <%= ItemNames[i] %></p>
<%
}
%>
<%
}
%>
</body>
</html>
JAVA SERVER PAGES
137
Output:
getRequestURI(): This method of request object is used for returning the

URL of the current JSP page.
getServletPath(): This method of request object is used to return the part
of request URL that calls the servlet.
<html>
<body>
<%
out.println(“URI Requested is “ + request.getRequestURI());
%>
<br>
<%
out.println(“Path of Servlet is “ + request.getServletPath());
%>
</body>
</html>
setAttribute(String,Object): This method assigns the string’s value as

the ‘value of object’. If the attribute does not exist, then it is created and
assigned to the object.This method sets the value of the attribute for the
request which is retrieved later either in the current JSP page or another
JSP page by passing the request object through the dispatcher method.
The getAttribute(String) method of the request object is used to retrieve
the set value of the attribute.
Setattribute.jsp
<html>
<body>
JAVA SERVER PAGES
139
<%
request.setAttribute(“AttributeName”,”This is the Attribute value.”);
String strViewPage=”setattribute1.jsp”;
RequestDispatcher dispatcher = request.getRequestDispatcher(strViewPage);
if (dispatcher != null)
{
dispatcher.forward(request, response);
}
%>
</body>
</html>
Setattribute1.jsp
<html>
<body>
<%
out.println(request.getAttribute(“AttributeName”));
%>
</body>
</html>
Output:
removeAttribute(String): This method is used to remove the attribute.

This method takes attribute name as a string parameter that has to be
removed. After applying this method you can’t access the attribute. If you
specify the method for getting the value of the attribute which has been
removed, you will get the null value.
Removeattribute.jsp
<html>
<body>
<%
request.setAttribute(“UName”, “pridhi”);
request.setAttribute(“Password”, “arora”);
String pageName = “removeattribute1.jsp”;
Request Dispatcher request Dispatcher = request. get Request Dispatcher
(page Name);
if(requestDispatcher != null)
{
requestDispatcher.forward(request, response);
}
%>
</body>
</html>
Removeattribute1.jsp
<%
out.println(“User Name: “ + request.getAttribute(“UName”) + “<br/>”);
out.println(“Password: “ + request.getAttribute(“Password”) + “<br/>”);
request.removeAttribute(“Password”);
out.println(“Your name: “ + request.getAttribute(“UName”) + “<br/>”);
out.println(“Your password: “);
if(request.getAttribute(“Password”) == null)
out.println(“\’Password\’ attribute is removed.”);
else
out.println(request.getAttribute(“Password”));
%>
Output:
JAVA SERVER PAGES
141
4.5.2 JSP Response Object

Response is a process to responding against it request. Response Object in JSP is
used to send information, or output from web server to the user or the client.
Response Object sends output in form of stream to the browser. This can be
redirecting one file to another file, response object can set cookie, set ContentType,
Buffer size of page, caching control by browser, CharSet, expiration time in
cache.Using ‘response’ object, reply is sent back to the browser or the client. It is
an implicit object of “HttpServletResponse” class and using this object,we can set
or modify the response parameters. The response object handles the output of the
client. The response object is generally used by cookies and with HTTP Headers.
The response object handles the output to the client. This object can be used
for creating HTTP Headers, creating cookies, setting content type and redirecting
workflow.
Methods of response object
• setContentType()
• addCookie(Cookie cookie)
• addHeader(String name, String value)
• containsHeader(String name)
• setHeader(String name, String value)
• sendRedirect(String)
• sendError(intstatus_code)
setContentType():
This method of response object is used to set the MIME type(Multipurpose Internet
Mail Extension) and character encoding for the page.
General syntax of setContentType() of response object is as follows:
response.setContentType();
For example:
response.setContentType(“text/html”);
The above statement is used to set the content type as text/html dynamically.
addCookie(Cookie cookie):
This method of response object is used to add the specified cookie to the response.
The addcookie method is used to write a cookie to the response. If the user wants
to add more than one cookie, then using this method by calling it as many times as
the user wants will add cookies.
General syntax of addCookie() of response object is as follows:
response.addCookie(Cookie cookie)
addHeader(String name, String value):
This method of response object is used to write the header as a pair of name and
value to the response. If the header is already present, then value is added to the
existing header values.
General syntax of addHeader() of response object is as follows:
response.addHeader(String name, String value)
Here the value of string is given as second parameter and in below example we
provided “xyz” and this gets assigned to the header given in first parameter as
string name and in example its “Author”.
For example:
response.addHeader(“Author”, “xyz”);
containsHeader(String name):
This method of response object is used to check whether the response already
includes the header given as parameter. If the named response header is set then it
returns a true value. If the named response header is not set, the value is returned as
false. Thus, the containsHeader method is used to test the presence of a header
before setting its value. The return value from this method is a Boolean value of
true or false.
General syntax of containsHeader() of response object is as follows:
response.containsHeader(String name)
Return value of the above containsHeader method is a Boolean value true or false.
JAVA SERVER PAGES
143
setHeader(String name, String value):
This method of response object is used to create an HTTP Header with the name
and value given as string. If the header is already present, then the original value is
replaced by the current value given as parameter in this method.
General syntax of setHeader of response object is as follows:
response.setHeader(String name, String value)
For example:
response.setHeader(“Content_Type”,”text/html”);
sendRedirect(String):
This method of response object is used to send a redirect response to the client
temporarily by making use of redirect location URL given in parameter. Thus the
sendRedirect method of the response object enables one to forward a request to a
new target. But one must note that if the JSP executing has already sent page content
to the client, then the sendRedirect method of response object will not work and
will fail.
General syntax of sendRedirect of response object is as follows:
response.sendRedirect(String)
In the above the URL is given as string.
response.sendRedirect(“http://www.abc.net/error.html”) ;
<%@ page language=”java” %>
<%
response.sendRedirect(“http://yahoo.com”);
(“YouCanSpecifyYourPage.jsp”);
%>
<html>
<body>
This page redirects to specified URL location
</body>
</html>
sendError(intstatus_code):
This method of response object is used to send an error response to the client
containing the specified status code given in parameter.
General syntax of sendError of response object is as follows:
response.sendError(intstatus_code)
re.html
<html>
<body>
<form method = “post” action = “re.jsp”>
Enter your name<input type = “text” name = “name”><br>
Enter your password<input type=”password” name = “pwd”><br><br>
<input type = “submit” name = “submit” value = “submit” >
</form>
</body>
</html>
re.jsp
<%
String name = request.getParameter(“name”);
String password = request.getParameter(“pwd”);
if(name.equals(“xyz”) &&password.equals(“abcde”))
{
response.sendRedirect(“rrs.html”);
}
else
{
response.sendRedirect(“rrf.html”);
}
%>
Rrs.html
<html>
<head>
<title>Successful Login</title>
</head>
<body>
Hello xyz
</body>
</html>
JAVA SERVER PAGES
145
Rrf.html
<html>
<head>
<title>Failed Login</title>
</head>
<body>
LOGIN UNSUCCESSFULL.You are not xyz
</body>
</html>
4.5.3 JSP Out Object

Out Implicit object denotes the Output stream in the context of page. The class or
the interface name of the object out is “jsp.JspWriter”. This object is instantiated
implicitly from JSP Writer class and can be used for displaying anything within
delimiters.
• Methods in out object
• print
• println
• clear
• clearBuffer
• flush
• isAutoFlush
• getBufferSize
• getRemaining.
print( )
This method of out object writes the value to the output without a newline character.
Example
If a JSP program has the following statements :
Out.print(“welcome”);
Out.print(“IT”);
Output
Welcome IT
Println( )
This method of out object writes the value to the output with a newline character.
Out.println(“welcome”);
Out.println(“IT”);
Output
Welcome
IT
clear ( )
This method of out object is used to clear the output buffer. This method does not
write any contents to the client. An exception is thrown by this method if the buffer
was flushed.
Syntax : out.clear() ;
clearBuffer ( )
This method of out object is used to clear the output buffer. This method does not
write any contents to the client. The only difference between the ‘clear’ method of
out object and ‘clearBuffer’ method is
• ‘clear’ method throws an exception when the buffer is flushed.
• ‘clearBuffer’ method does not throw an exception when the buffer is
flushed.
flush ( )
Two methods of out object, ‘clear’ and ‘clearBuffer’ are used to clear the output
buffer without writing any contents to the client. The ‘flush’ method of out object
is used to flush the buffer by writing the contents to the client.
isAutoFlush ( )
This method of ‘out’ object returns a ‘true’ value if the output buffer is automatically
flushed otherwise returns ‘false’.
Syntax: out.isAutoFlush();
getBufferSize( )
This method of ‘out’ object is used to return the size of the buffer. The returned
value of the size of the buffer is in bytes. If the output is not buffered, then the
“getBufferSize” method returns a 0 byte.
getRemaining( )
This method of out object is used to return the number of empty bytes in the buffer.
Syntax : out.getRemaining();
Example:
<%@ page buffer=”16kb” autoFlush=”true” %>
<table border= 2>
JAVA SERVER PAGES
147
<%
out.println(“<tr><td>Buffer Size : </td><td>” + out.getBufferSize()+”</td></tr>”);
out.println(“<tr><td>Is AutoFlush Enable</td><td> “ + out.isAutoFlush()+”</td></
tr>”);
out.println(“<tr><td>Remaining Buffer Size </td><td>” + out.getRemaining()+”</
td></tr>”);%>
</table>
4.5.4 The Session Object:

The session object is used to track client session between client requests.HTTP is
a “stateless” protocol which means each time a client retrieves a Web page from
the server, the client opens a separate connection to the Web server and the server
automatically does not keep any record of previous client request.There are
following three ways to maintain session between web client and web server:
(1) Cookies:A webserver can assign a unique session ID to each web client
as a cookie and for subsequent requests from the client they can be
recognized using the recieved cookie.This may not be an effective way
because many time browser does not support a cookie.
(2) Hidden Form Fields: A web server can send a hidden HTML form field
along with a unique session ID as follows:<input type=”hidden”
name=”sessionid” value=”12345">This means that, when the form is
submitted, the specified name and value are automatically included in the
GET or POST data. Each time when web browser sends request back,
then session_id value can be used to keep the track of different web
browsers.
(3) URL Rewriting: You can append some extra information on the end of
each URL that identifies the session, and the server can associate that
session identifier with data it has stored about that session.For example,
with http://abc.com/file.htm;sessionid=12345, the session identifier is
attached as sessionid=12345 which can be accessed at the web server to
identify the client.URL rewriting can be used where a cookie is disabled.
In this session ID information is embedded in the URL, which is recieved
by the application through Http GET requests when the client clicks on
the links embedded with a page.
Example:
encodeURL.jsp
<html>
<head>
<title> How to use encodeURL in jsp
</title>
</head>
<body>
<form method = “post” action = “EncodeURLProgram.jsp”>
Enter your name : <input type = “text” name = “name”><br>
Enter your password : <input type=”password” name = “pwd”><br>
<input type = “submit” name = “submit” value = “submit” >
</form>
</body>
</html>
EncodeURLProgram.jsp
<%@ page session =”true” %>
<%
String password = request.getParameter(“pwd”);
if(name.equals(“Williams”) &&password.equals(“abcde”))
{
session.setAttribute(“username”,name);
String string =
JAVA SERVER PAGES
149
response. encode URL (“NextPageAfterFirst. jsp?name=+name+& password=+
password”);
%><p>Please click here to go forward : </p>
<a href =’<%= string %>’>WelcomeEncodeURL.jsp</a>
<%}
else
{
String string =
response.encodeURL(“encodeURL.jsp?name=+name+&password=+password”);%>
<p>You have entered a wrong value : Click here to go back : </p>
<a href =’<%= string %>’>encodeURL.jsp</a>
<% }
%>
NextPageAfterFirst.jsp
<html>
<head>
<title>Welcome in In the program of URL rewriting
</title>
</head>
<body>
Hello <%= session.getAttribute(“username”) %>
</body>
</html>
• Methods of session object

• getCreationTime
• getLastAccessedTime·
• getId
• invalidate()
• getMaxInactiveInterval
JAVA SERVER PAGES
151
• setMaxInactiveInterval()
• removeAttribute(String name)
• setAttribute(String, object)
getCreationTime (): This method of session object is used to return the session
created time. The returned time value would be in milliseconds, the time value is
midnight January 1, 2013 GMT.
General syntax of getCreationTime of session object is as follows:
session.getCreationTime()
The above method returns value of time in milliseconds.
For example:
out.println(“Created Time of Session is: “ + session.getCreationTime());
The above statement would display
Created Time of Session is: 974154073972
getLastAccessedTime ( ) :
This method of session object is used to return the latest time of the client request
associated with the session. By using this method, you can determine the last time
the session was accessed before the current request.
General syntax of getLastAccessedTime of session object is as follows:
session.getLastAccessedTime()
The above method returns the value of time in milliseconds.
For example:
out.println(“Last Accessed Time of Session is: “ + session.getLastAccessedTime());
The above statement would display:
Last Accessed Time of Session is: 953044321813
getId( ):
This method of session object is used to return the unique identifier associated
with the session.
General syntax of getID of session object is as follows:
session.getId()
For example:
out.println(“The Session ID is: “ + session.getId());
The Session ID is: A1BQWTBBBBBBKSY2HJKQBBB
The above statement denotes the unique identifier associated with the current
session.
invalidate():
This method of session object is used to discard the session and releases any objects
stored as attributes. This method helps to reduce memory overhead and achieves
improvement in performance. It is always a good practice to explicitly remove or
invalidate sessions using session.invalidate() method.
General syntax of invalidate of session object is as follows:
session.invalidate()
getMaxInactiveInterval( ):
This method of session object is used to return the maximum amount of time the
JRun keeps the session open between client accesses. This returns the maximum
amount of time, in seconds, that a session can be inactive before it is deleted. The
returned value of time is in seconds. Thus, by using this method the user determines
how long it will take a session for it to time out. The default timeout period for
sessions defined by the servlet container is determined using the
getMaxInactiveInterval method. The returned value from this method is seconds
and thus, an integer.
General syntax of getMaxInactiveInterval of session object is as follows:
session.getMaxInactiveInterval()
The above method returns value of time in seconds.
For example:
out.println(“Maximum Inactive Interval of Session in Seconds is : “
+session.getMaxInactiveInterval());
Maximum Inactive Interval of Session in Seconds is : 2000
The above denotes the time in seconds.
setMaxInactiveInterval():
This is another method that a developer can use to set the timeout explicitly for
each session. A user can use this method to set the default timeout.
General syntax of setMaxInactiveInterval of session object is as follows:
session.setMaxInactiveInterval(time)
In the above the time given in parameter is in seconds.For example:
session. setMaxInactiveInterval(600);
In the above statement, the inactivity period for the session would be set to
10minutes.The parameter 600 given in the method would be in seconds.
JAVA SERVER PAGES
153
removeAttribute:
This method of session object is used to remove the attribute and value from the
session.
General syntax of removeAttribute of session object is as follows:
session.removeAttribute(String)
For example:
session.removeAttribute(“ABC”);Example ABC given in parameter of
removeAttribute method is a string.
setAttribute(String, object):
This method of session object is used to set the object to the named attribute. This
method is used to write an attribute and value to the session. If the attribute does
not exist, then it is created and then the object is associated with this.
General syntax of setAttribute of session object is as follows:
session.setAttribute(String, object)
For example:
String a = request.getParameter(“test”);
session.setAttribute(“test”, abc);
In the above example, the first parameter passed to the method setAttribute test
denotes a string and the second parameter abc denotes the object. By passing these
to the setattribute method, the object abc is set with the string test.
<%@page import = “java.util.*” session=”true”%>
<html>
<%
Integer counter = (Integer)session.getAttribute(“counter”);
if (counter == null)
{counter = 1;}
else
{
counter = counter+1;
}
session.setAttribute(“counter”, counter);
%>
<br/>
Session ID:<%=session.getId()%>
<br/>
Session creation time:<%=new Date(session.getCreationTime())%>
<br/>
Last accessed time:<%=new Date(session.getLastAccessedTime())%>
<br/>
visited<%=counter%> times
<br/>
<% if(session.isNew())
{
out.println(“You have created a new session”);
}
else
{
out.println(“Session already exists”);
}
%>
</body>
</html>
JAVA SERVER PAGES
155
4.5.5 The Application Object

Application object is used to share data with all pages in an application. It means the
“application” object can be accessed by any JSP present in the application. The
interface of “application” object is Javax.servlet.http.ServletContext.
Methods of implicit object application
• getAttribute(String name)
• getAttributeNames
• setAttribute(String objName, Object object)
• removeAttribute(String objName)
• getMajorVersion()
• getMinorVersion()
• getServerInfo()
• getInitParameter(String name)
• getInitParameterNames
• log(Message)
getAttribute(String name): This method returns the ‘object’ stored in
attribute name that you specified. If the specified parameter does not exist,
it will return ‘null’ value.
Example: application.getAttribute(“abc”);
getAttributeNames(): This method returns all the attributes available
within the application. The return type of this method is Enumeration.
Example: Enumeration e;
e = application. getAttributeNames();
setAttribute(String objName, Object object)
This method stores the ‘object’ in the object name provided(String objname)
in the application.
Example : application.setAttribute(“Variable”, abc);
removeAttribute(String objName)
This method is used to remove the specified attribute (String
objName) from the application.
Example : application.setAttribute(“password”,password);
application.removeAttribute(“password”);
getMajorVersion()
This method is used to return the major version of the Servlet API for the
JSP Container.
Example: out.println(“Major Version:” + application. get Major Version
());
Output : Major Version:2
The above statement gives 2 as the major version of the Servlet API in use
for the Application object.
getMinorVersion()
This method is used to return the minor version of the Servlet API for the
JSP Container.
Example: out.println(“Minor Version:”+ application. getMinorVersion());
Output : Minor Version:1
The above statement gives 1 as the minor version of the Servlet API in use
for the Application object.
getServerInfo():
This method of Application object is used to return the name and version
number of the JRun servlet engine. Information about the JSP Container,
such as, the name and product version, are returned by the method
getServerInfo of Application object.
Example: out.print(“Server Information:”+ application. getServerInfo());
getInitParameter(String name):
This method of Application object is used to return the value of an
initialization parameter. If the parameter does not exist, then null value is
returned.
JAVA SERVER PAGES
157
Example : String xyz = application.getInitParameter(“eURL”);
In the above example, the value of initialization parameter “eURL” is
retrieved and stored in string “xyz”.
getInitParameterNames() :
This method of Application object is used to return the name of all
initialization parameter of the application. The returned value is an
enumeration.
Example: Enumeration e;
e=application. getInitParameterNames();
log(Message):
This method of Application object is used to write a text string to the JSP
Container’s default log file. General syntax of log method of Application
object is as follows :.
application.log(Message);
<%@ page import=”java.io.*,java.util.*” %>
<html>
<body>
<%
Integer hitsCount = (Integer)
application.getAttribute(“hitCounter”);
if( hitsCount ==null || hitsCount == 0 )
{out.println(“Welcome to my website!”);
hitsCount = 1;
}
else
{out.println(“Welcome back to my website!”);
hitsCount += 1;
}
application.setAttribute(“hitCounter”,hitsCount);%>
<center>
<p>Total number of visits: <%= hitsCount%></p>
</center>
<%
out.println(“Major version: “ +application.getMajorVersion());
out.println(“Minor version: “ + application.getMinorVersion());

out.println(“User init parameter: “ +application.getInitParameter(“user”));'
out.println(“Server Information:”+application.getServerInfo());
%>
</body>
</html>
4.5.6 The Exception Object

When you are writing JSP code, a programmer may leave coding errors which can
occur at any part of the code. You can have following type of errors in your JSP
code:
• Checked exceptions: A checked exception is an exception that is a user
error or a problem that cannot be foreseen by the programmer. For example,
if a file is to be opened, but the file cannot be found or located, an exception
occurs. These exceptions cannot simply be ignored at the time of
compilation.
• Runtime exceptions: A runtime exception is an exception that occurs
that probably could have been avoided by the programmer. As opposed to
checked exceptions, runtime exceptions are ignored at the time of
compilation.
• Errors: These are not exceptions at all, but actually are the problems that
arise beyond the control of the user or the programmer. Errors are typically
ignored in your code because you can rarely do anything about an error.
For example, if a stack overflow occurs, an error will arise. They are also
ignored at the time of compilation.
JAVA SERVER PAGES
159
• Methods
public String getMessage()
This method returns a detailed message about the exception that has occurred.
This message is initialized in the Throwable constructor.
publicThrowablegetCause()
This method basically returns the cause of the exception as represented by a
Throwable object.
public String toString()
This method returns the name of the class concatenated with the result of
getMessage()
<html>
<body>
<%
try{
int i = 1;
i = i / 0;
out.println(“The answer is “ + i);
}
catch (Exception e){
out.println(“An exception occurred: “ + e.getMessage());
}
%>
</body>
</html>
Example:
e.jsp
<html>
<body>
<form action=”e1.jsp” method=”post”>
Enter your age ( in years ) :
<input type=”text” name=”age” />
<input type=”submit” value=”Submit” />
</form>
</body>
</html>
e1.jsp
<%@ page errorPage=”e2.jsp” %>
<html>
<body>
<%
int age;
age = Integer.parseInt(request.getParameter(“age”));
%>
<p>Your age is : <%= age %> years.</p>
<p><a href=”e.jsp”>Back</a>.</p>
</body>
</html>
e2.JSP
<%@ page isErrorPage=”true” %>
<html>
<body>
<%= exception %>
</body>
</html>
ACTIVE SERVER PAGES
161
CHAPTER 5
ACTIVE SERVER PAGES
5.1 ASP (Active Server Pages)

Introduced in 1996, Active Server Page is a server side technology from
Microsoft, enables us for making dynamic and interactive web pages. An Active
Server Page is an HTML page that contains one or more scripts (small embedded
programs) which is processed on a Microsoft Web server before the page is sent to
the user.
The default scripting language used for writing ASP is VBScript, although
you can use other scripting languages like JScript (Microsoft’s version of
JavaScript).
ASP pages have the extension .asp instead of .htm or .html, when a page with
the extension .asp is requested by a browser the web server knows to interpret the
ASP contained within the web page before sending the HTML produced to the
browser. This way all the ASP is run on the web server and no ASP will ever be
passed to the web browser.
Any web pages containing ASP cannot be run by just simply opening the
page in a web browser. The page must be requested through a web server that
supports ASP, this is why ASP stands for Active Server Pages, no server, no active
pages. Active Server Pages is Microsoft’s solution to server-side scripting. With
simple HTML pages, the client (a web surfer) requests a web page from a server
(some www.abc.com). The server just sends the file to the client, and the page is
shown on the client’s browser. With Active Server Pages, the server gets a chance
to alter the file before sending it to the user. So, for every request for a file with an
.ASP extension, the server runs the file through a DLL called ASP.DLL, which
parses the ASP commands. If you are running a Microsoft Web server, to run an
ASP file, all you need to do is create a file on the webserver with an .ASP extension.
When the browser requests the file, the webserver is smart enough to preprocess
the file before sending it to the client.
Client request
an ASP File
Client
Web
Server
Server returns the
HTML text to the client
Server locates the ASP. file

on the hard disk and then parses
it, removes all the Asp script
and replaces it with the HTML text.
Figure 5.1 Client Server interaction for ASP file

Following steps are performed when browser requests an ASP Page from the
server:
(a) Web browser (client) locates the web server by the first part of the URL
(Uniform Resource Locator) i.e. www.xyz.com
(b) Client then requests the ASP page specified by the second part of URL i.e
/filename.asp
(c) Web server reads the ASP file and processes the script or code
(d) After the ASP page has been processed completely by the web server, it is
converted to an HTML text to be sent to the client.
(e) Client receives the HTML sent by the server, renders it and displays on
client computers.
Microsoft recommends the use of the server-side ASP rather than a client-
side script, where there is a choice, because the server-side script will result in an
easily displayable HTML page. Client-side scripts for example, with JavaScript
may not work as intended on older browsers.
As ASP was first introduced by Microsoft on it’s web server,
Internet Information Services (IIS), that runs on all versions of Windows
from NT4, including Windows 7, Vista, XP Pro, and Windows Server OS’s like
Windows 2000, 2003, 2008, it is this web server that ASP pages usually run best
on. If you have Windows NT 4.0 Server installed, you can download IIS 3.0 or IIS
4.0, both of which support ASP development. If you have Windows 2000, you can
use IIS 5.0.For those of you running Windows and wish to play around with ASP
on your own system you will need to install Microsoft’s Internet Information
Services (IIS). IIS or its micro version Personal Web Server (PWS) comes free
with Windows.
ACTIVE SERVER PAGES
163
You can have your ASP code connect to a database (SQL, Access, Oracle,
Informix, or any ODBC-compliant database) and dynamically insert the data into
your HTML pages. This leads to some very powerful possibilities including
ECommerce, customizable sites, data entering / retrieving systems run over the
Internet, and a slew of other possibilities.
What is an ASP File?
• An ASP file is similar to an HTML file
• This file can contain text, HTML, XML, and scripts
• Scripts contained in an ASP file are executed on the server
• This file has the file extension “.asp”
How Does ASP Differ from HTML?
• When an HTML file is requested by browser, the server returns the file
• When an ASP file is requested by the browser, IIS passes the request to
the ASP engine. The ASP engine reads the ASP file, line by line, and
executes the scripts in the file. Finally, the ASP file is returned to the
browser as HTML file
What can ASP do for you?
• You can dynamically edit, change, or add any content of a Web page
• You can respond to user queries or data submitted from HTML forms
• Data or databases can be accessed and result is returned to the browser
• ASP provide simplicity and speed as comparative to CGI and PERL
• It provides security as ASP code cannot be viewed from the browser
5.1.1 The ASP Process

There are basically five stages associated with the ASP process:
(a) Request: Web browser contacts the server for the page it wants to access
(b) Pre-processing: The asp.dll file does some initial processing on the
requested script
(c) Execution: Scripting engine executes the instruction or statements in the
script
(d) Translation: Result of execution is translated into HTML to be sent to the
web browser
(e) Display: The HTML is sent back to the browser, which processes the tags
and displays the page.
Request
Client
Asp.dllpre- Scripting
processing engine
execution
HTML text
for display Translation to
HTML
Figure 5.2 ASP process
5.2 Basic Syntax Rules

Let’s start with a simple code that sends the text “Learning ASP” to the browser:
<html>
<body>
<%
response.write(“Learning ASP”)
%>
</body>
</html>
Explanation of above code:
ASP file can contain server scripts, surrounded by the delimiters <% and %>.
The <% is called an opening tag, and the %> is called a closing tag. In between
these tags are the server side scripts. You can insert server side scripts anywhere in
your Web page even inside HTML tags. Server scripts are executed on the server,and
can contain any expressions, statements, procedures, or operators valid for the
scripting language.The response.write command is used to write output to a browser.
There is also a shorthand method for the response.write command. The
following example also sends the text “Learning ASP” to the browser:
<html>
<body>
<%
=” Learning ASP “
%>
</body>
</html>
VBScript is the default scripting language for ASP, so if you want to specify
a different scripting language you have to state which scripting language you will
ACTIVE SERVER PAGES
165
be using at the beginning of your code. Below is the line of code that must be your
first line of ASP code or else your page will break and you’ll get a error message.
<%@ Language=”javascript” %>
<% Remaining of your ASP Code....%>
Example
<%@ language=”javascript”%>
<html>
<body>
<%
Response.Write(“Learning ASP “)
%>
</body>
</html>
5.2.1 Variables in Asp and its scope

A variable is used to store information. A variable declared outside a procedure can
be accessed and changed by any script in the ASP file. A variable declared inside a
procedure is created and destroyed every time the procedure is executed. No scripts
outside the procedure can access or change the variable. To declare variables
accessible to more than one ASP file, declare them as session variables or application
variables.
Session Variables
Session variables are used to store information about ONE single user, and are
available to all pages in one application. Typically information stored in session
variables are name, id, and preferences.
Application Variables
Application variables are also available to all pages in one application. Application
variables are used to store information about ALL users in one specific application.
In ASP you declare a variable with the use of the Dim keyword, which means
for Dimension. Dimension in english refers to the amount of space something
takes up in the real world, but in computer terms it refers to space in computer
memory.
Example
<%
‘Single Variable Declarations
Dim Variable1
Dim Variable2
‘Multiple Variable Declarations
Dim Variable6, Variable7, Variable8
%>
5.2.2 Procedures in ASP

A procedure is a sequence of instructions. In ASP you can call a JavaScript procedure
from a VBScript and vice versa.
Example:
<html>
<head>
<%
sub vbprocedure(number1,number2)
response.write(number1+number2)
end sub
%>
</head>
<body>
<p>Result: <%call vbprocedure(3,4)%></p>
</body>
</html>
Insert the <%@ language=”language” %> line above the <html> tag to write
the procedure/function in another scripting language:
<%@ language=”javascript” %>
<html>
<head>
<%
function jsprocedure(number1,number2)
{
Response.Write(number1*number2)
}
%>
</head>
<body>
<p>Result: <%jsprocedure(3,4)%></p>
ACTIVE SERVER PAGES
167
</body>
</html>
5.3 ASP Objects

ASP objects lets you interact with both the server and the browser, and you’ll
routinely use one or more objects within your ASP scripts.
5.3.1 Response Object

The ASP Response object is used to send output to the user from the server. Its
collections, properties, and methods are explained below:
Collections
Collection Description
Cookies Sets a value of cookie. If the cookie does not exist, it
will be created, and will store the value that is specified
A collection is similar to a data structure or array. Individual items in the
collections are accessed via a unique key assigned to that item.
Properties
Property Description
Buffer It specifies whether to buffer the output of page or not
CacheControl Sets whether a proxy server can cache the ASP output or
not
ContentType Sets the HTTP content type for the Response object
Expires Sets the time in minutes a page will be cached on a browser
before it expires
ExpiresAbsolute Sets a date and time when a page cached on a browser will
expire
Methods
Method Description
AddHeader Adds a new HTTP header to the existing and a value to the
HTTP response
AppendToLog Appends a string to the end of the server log entry
Clear Clears buffered HTML output if any
End Processing is stopped as it is encountered, and current result
is returned
Flush Sends buffered HTML output immediately
Redirect Redirects the user to a different URL that is specified
Write Writes a string that you specified to the output
ASP Buffer Property

This property tells whether to buffer that means to temporarily store the output
page being sent to the browser. A response is not sent to the browser until all scripts
are processed, or the Flush or End methods are called. The Buffer property cannot
be set or changed after the server has sent output to the browser so, you need to set
the Buffer property on the first line of the ASP page. If the Buffer is set to true, then
the server will temporarily store the output. If it is set to False, then no buffering
occurs.
In the below code, there is no output because the loop does not finish and the
Buffer will not empty until the script has finished. If the buffer was set to False,
then the Response.Write would write the number to the browser every time it went
through the loop.
Code:
<%
Response.Buffer = TRUE
x=0
Do
x = x+1
Response.Write x & “<BR>”
Loop
%>
ASP CacheControl Property

This property sets whether a proxy server can cache the output generated by ASP
or not. By default, a proxy server will not keep a cache copy.The CacheControl
property allows a proxy server to cache an Actice Server Page. A proxy server is
used to speed up the accessing of a web page by keeping a local copy of the web
page in a cache. The CacheControl property can only be set equal to “Public” or
“Private”. If the CacheControl property is set equal to”Public”, then caching can
occur. If the CacheControl property is set equal to “Private”, then caching cannot
occur.
<% Response.CacheControl = “Public” %>
<% Response.CacheControl = “Private” %>
ASP ContentType Property

This property sets the HTTP content type for the response object or for the output.
If an ASP page has no ContentType property set, the default content-type header
would be:
ACTIVE SERVER PAGES
169
content-type:text/html
Some other ContentType values:
<%response.ContentType=”text/HTML”%>
<%response.ContentType=”image/GIF”%>
<%response.ContentType=”image/JPEG”%>
<%response.ContentType=”text/plain”%>
ASP Expires Property

This property sets a length of time in minutes before a response page cached on the
browser expires. The first line of code causes the page to be refreshed (reloaded)
every time it is accessed, rather than being stored in a cache. In the second line of
code, if the user returns to this page before the 15 minutes are up, the cached
version of the page will be displayed.
<% Response.Expires = 0 %>
<% Response.Expires = 15 %>
ASP ExpiresAbsolute Property

This property sets the date and time when a response page cached on the
browser will expire. If the time is not given, then the page will expire exactly at
midnight on the given date. If the date is not given, then the page will expire at the
given time on the same day that the script is run.
The following code specifies that the page will expire at 6:00 PM on Nov
17th of 2013. You must use a 24 hour clock for the time and four digits for the
year.
<% Response.ExpiresAbsolute=#Nov 17, 2013 18:00:00# %>
ASP AddHeader Method

This method adds a new named HTTP header with a specific value to the HTTP
response. Once header has been added, it cannot be removed. This method must be
called before any output is sent to the client unless the Response.Buffer is set to
true. There are two mandatory arguments.
Name
Its the name of the new header variable. The name cannot contain any
underscores( _).
Value
Its the initial value of the new header variable.
Code:
<%
Response.AddHeader “MyNewHeader”, “ERROR”

%>
ASP AppendToLog Method
This method adds or appends a string to the end of the entry of the Web server
log for this request.There is one mandatory argument.
String
This argument is the string to be appended. The string can have a maximum
length of 80 characters. It cannot contain commas because the log is comma-
delineated.
Code:
<%
Response.AppendToLog(“Error in Processing”)
%>
Output is appended to the end of the IIS log file:
10.78.176.37, - , 03/20/97, 7:55:20, W3SVC, SALES1, 10.78.176.37, Error
in Processing
ASP Clear Method

This method clears or erases any buffered HTML output. It does not erase the
response headers, erases only the body. If the buffer does not exist, because
Response.Buffer was set to False, a runtime error will occur.
Note that in ASP version 2.0, the default value for Response.Buffer is set to
False, however in ASP version 3.0, it is set to True.
Code:
<%
Response.Clear
%>
<%
response.Buffer=true
%>
<html>
<body>
<p>This is some text I want to send to the user.</p>
<p>No, I changed my mind. I want to clear the text.</p>
<%
response.Clear
ACTIVE SERVER PAGES
171
%>
</body>
</html>
Output:
(nothing will be displayed)
ASP End Method

This method orders the web server to stop processing the script. The current results
are returned to user and no further processing occurs. If Response.Buffer is set to
True, Response.End will flush the buffer and then end.
False, however in ASP version 3.0, it is set to True.
In the example, the second Response.Write will not be displayed in the output.
Code:
<%
Response.Write “Hello World”
Response.End
Response.Write “Is this the End?”
%>
Output:
Hello World
ASP Flush Method

This method immediately sends all current buffered page content to the client if
the Response.Buffer property is set to True. If the buffer does not exist, because
Response.Buffer is set to False, a runtime error will occur.
False, however in ASP version 3.0, the default value for Response.Buffer is set to
True.
Code:
<%
Response.Flush
%>
<%
Response.Buffer=true
%>
<html>
<body>
<p>I write some text, but I will control when the
text will be sent to the browser.</p>
<p>The text is not sent yet. I hold it back!</p>
<p>OK, let it go!</p>
<%
Response.Flush
%>
</body>
</html>
Output:
I write some text, but I will control when the
text will be sent to the browser.
The text is not sent yet. I hold it back!
OK, let it go!
ASP Redirect Method
This method redirects the user to a different URL.
<%
Response.Redirect “http://www.abc.com”
%>
ASP Write Method
This method writes a specified string to the output.
<%
Response.Write “Hello World”
%>
Output:
Hello World
5.3.2 ASP Request Object

When a browser asks for a page from a server, it is called a request. The Request
object is used to get information from a user (visitor). This object provides access
to all of the information that is passed as a request from the browser to the server.
Its collections, properties, and methods are explained below:
ACTIVE SERVER PAGES
173
Collections
Cookies Contains(stores) all the cookie values sent in a HTTP request
Form Contains all the form input values of a form that uses the
post method
QueryString Contains all the variable values in a HTTP query string
Properties
TotalBytes Returns the total number of bytes sent by the client in the
body of the request
Methods
Method Description
BinaryRead Retrieves the data that is sent to the server from the client
as part of a post request and stores it in a safe array
ASP Total Bytes Property

This property is a read only property that returns the total number of bytes the
client sent in the body of the request.
File1.html
<html>
<head>
</head>
<body>
<form action=”File2.asp” method=”post”>
Name:<input type=”text” name=”name” maxlength=”30"><br>
age: <input type=”text” name=”age” maxlength=”10"><br>
<input type=”submit” name=”submit” value=”submit”><br>
</form>
</body>
</html>
File2.asp
<%
Dim ByteCount
ByteCount = Request.TotalBytes
Response.Write(“ByteCount = “ &ByteCount& “ bytes”)
%>
Output
It depends on the data that is entered into the form.
For example, if Name=pawan, Age=30.
ByteCount = 39 bytes
ASP Binary Read Method

This method is used to retrieve the data sent to the server from the client as part of
a POST request. It will store the data in a safe array. It an array that stores information
about the number of dimensions and the bounds of its dimensions.
Request.BinaryRead(count)
Count: Specifies how many bytes to read from the client
<%
dim p,q
p=Request.TotalBytes
q=Request.BinaryRead(p)
%>
5.3.3 ASP Application Object

A group of ASP files that work together to perform some purpose is called an
application. The Application object is used to tie these files together.
The Application object is used to store and access variables from any page,
just like the Session object. The difference is that ALL users share ONE Application
object (with Sessions there is ONE Session object for EACH user).
The Application object holds information that will be used by many pages in
the application (like database connection information). The information can be
accessed from any page. The information can also be changed in one place, and
the changes will automatically be reflected on all pages.
The Application object’s collections, methods, and events are described below:
Collections
Contents Contains all the items appended to the application through
a script command
ACTIVE SERVER PAGES
175
Methods
Method Description
Contents.Remove Deletes an particular item from the Contents
collection
Contents.RemoveAll() Deletes all items from the Contents collection
Lock Does not allow other users to modify the variables in
the Application object
Unlock Allows other users to modify the variables in the
Application object
Events
Event Description
Application_OnEnd Occurs when all sessions are over that were created
by user, and the application ends
Application_OnStart Occurs before the first new session is created (when
the Application object is first referenced)
ASP Contents.Remove Method

This method deletes an item from the Contents collection.
Examples for the Application Object
<%
Application(“t1”)=(“First test”)
Application(“t2”)=(“Second test”)
Application(“t3”)=(“Third test”)
Application.Contents.Remove(“t2”)
for each x in Application.Contents
Response.Write(x & “=” &Application.Contents(x) & “<br>”)
next
%>
Output:
t1=First test
t3=Third test
ASP Contents.RemoveAll Method
This method deletes all items from the Contents collection.
<%
Application.Contents.RemoveAll()
%>
ASP Lock and Unlock Methods
Lock Method
This method prevents other users from modifying the variables in the Application
object (used to ensure that only one client at a time can modify the Application
variables).
Unlock Method
This method enables or allows other users to modify the variables stored in the
Application object (after it has been locked using the Lock method).
<%
Application.Lock
Application(“visits”)=Application(“visits”)+1
Application.Unlock
%>
This page has been visited
<%=Application(“visits”)%> times!!
ASP Application_OnStart and Application_OnEnd Events

• Application_OnStart Event
This event occurs before the first new session is created (when the Application
object is first referenced).This event occurs after the Web server is restarted or
after the Global.asa file is edited.This event is placed in the Global.asa file.
• Application_OnEnd Event
The Application_OnEnd event occurs when the application ends (when the web
server stops).This event is placed in the Global.asa file.
Example
Global.asa:
<script language=”vbscript” runat=”server”>
Sub Application_OnEnd()
Application(“totvisitors”)=Application(“visitors”)
End Sub
SubApplication_OnStart
Application(“visitors”)=0
End Sub
ACTIVE SERVER PAGES
177
SubSession_OnStart
Application.Lock
Application(“visitors”)=Application(“visitors”)+1
Application.UnLock
End Sub
SubSession_OnEnd
Application.Lock
Application(“visitors”)=Application(“visitors”)-1
Application.UnLock
End Sub
</script>
To display the number of current visitors in an ASP file:
<html>
<head>
</head>
<body>
<p>
There are <%response.write(Application(“visitors”))%>
online now!!
</p>
</body>
</html>
The Global.asa file is an optional file that can contain declarations of objects,
variables, and methods that can be accessed by every page in an ASP application.
All valid browser scripts (JavaScript, VBScript, JScript, PerlScript, etc.) can be
used within Global.asa.This file must be stored in the root directory of the ASP
application, and each application can only have one Global.asa file.The Global.asa
file can contain only the following:
• Application events
• Session events
• <object> declarations
• TypeLibrary declarations
• the #include directive
5.3.4 ASP Session Object

When you are working with an application on your computer system, you open it,
do some changes and then you close it. This is much like a Session. The computer
knows who you are. It knows when you open the application and when you close
it. However, on the internet there is a problem, the web server does not know who
you are and what you do, because the HTTP address doesn’t maintain state. ASP
solves this problem by creating a unique cookie for each user. The cookie is sent to
the user’s computer and is stored on the computer system and it contains information
that identifies the user. This interface is called the Session object. Variables stored
in Session object contains the information about one single user, and are available
to all pages in one application. Common information stored in session variables is
name, id, and preferences. The server creates a new Session object for each new
user or visitor, and destroys the session object when the session expires.
The Session object’s collections, properties, methods, and events are explained
below:
Collections
Method Description
Contents Contains all the items that are appended to the session
through a script command
Properties
SessionID Provides a unique id for each user. This unique id is
generated by the server
Timeout Specifies the timeout period in minutes for the session
object in this application
Methods
Method Description
Abandon Destroys or kills a user session
Contents.Remove Deletes an particular item from the Contents
collection
Contents.RemoveAll() Deletes all the items from the Contents collection
Events
Event Description
Session_OnEnd It occurs when a session ends
Session_OnStart It occurs when a session starts
ACTIVE SERVER PAGES
179
ASP SessionID Property
This property returns a unique id for each user. This unique id is generated by the
server.
<%
Response.Write(Session.SessionID)
%>
Output:
772766038
ASP Timeout Property

This property specifies or returns the timeout period for the session object for this
application, in minutes. If the user does not refresh or request a page within the
timeout period, the session will end by itself.
<%
response.write(“<p>”)
response.write(“Default Timeout is: “ &Session.Timeout)
response.write(“</p>”)
Session.Timeout=30
response.write(“Timeout is now: “ &Session.Timeout)
response.write(“</p>”)
%>
Output:
Default Timeout is: 20
Timeout is now: 30
ASP Abandon Method

This method destroys or kills a user session.
Example
File1.asp:
<%
Session(“name”)=”pawan”
Session.Abandon
Response.Write(Session(“name”))
%>
Output:
pawan
File2.asp:
<%
Response.Write(Session(“name”))
%>
Output:
(none)
ASP Contents.Remove Method
This method deletes an item from the Contents collection.
Example 1
<%
Session(“t1”)=(“First test”)
Session(“t2”)=(“Second test”)
Session(“t3”)=(“Third test”)
Session.Contents.Remove(“t2”)
for each x in Session.Contents
Response.Write(x & “=” &Session.Contents(x) & “<br>”)
next
%>
Output:
t1=First test
t3=Third test
ASP Contents.RemoveAll Method
This method deletes all the items from the Contents collection.
<%
Session.Contents.RemoveAll()
%>
ASP Session_OnStart and Session_OnEnd Events
• Session_OnStart Event: The Session_OnStart event occurs when the
server creates a session.This event is placed in the Global.asa file.
• Session_OnEnd Event: The Session_OnEnd event occurs when the
session ends (abandoned or times out).This event is placed in the Global.asa
file.
5.3.5 ASP Server Object
This object is used to access properties and methods on the server.Its properties
and methods are explained below:
ACTIVE SERVER PAGES
181
Properties
ScriptTimeout Specifies or returns the maximum number of seconds
a script can run before it is terminated
Methods
Method Description
CreateObject Creates an instance of an object
Execute Executes an ASP file from another ASP file
GetLastError() Returns an ASPError object that describes the error
that occurred
Transfer Sends or transfers all the information created in one
ASP file to other ASP file
URLEncode Applies URL encoding rules to a specified string
ASP ScriptTimeout Property

This property specifies or returns the maximum number of seconds a script can run
before it is terminated. Default time is 90 seconds
Example 1
Set the script timeout:
<%
Server.ScriptTimeout=200
%>
Example 2
Retrieve the current value of the ScriptTimeout property:
<%
response.write(Server.ScriptTimeout)
%>
ASP Execute Method

This method executes an ASP file from inside another ASP file. After executing
the called .asp file, the control is returned to the original .asp file.
File1.asp:
<%
response.write(“I am in File 1!<br>”)
Server.Execute(“file2.asp”)
response.write(“I am back in File 1!”)
%>
File2.asp:
<%
response.write(“I am in File 2!<br>”)
%>
Output:
I am in File 1!
I am in File 2!
I am back in File 1!
ASP GetLastError() Method

This method returns an ASPError object that describes the error condition that
occurred.
Syntax
Server.GetLastError()
ASP Transfer Method

This method sends or transfers all the state information (all application/session
variables and all items in the request collections) created in one ASP file to a second
ASP file. When the second ASP page completes its tasks, it will NOT return to the
first ASP page as in case of the Execute method.
Example
File1.asp:
<%
response.write(“Line 1 in File 1<br>”)
Server.Transfer(“file2.asp”)
%>
File2.asp:
<%
%>
Output:
Line 1 in File 1
Line 1 in File 2
Line 2 in File 2
ACTIVE SERVER PAGES
183
5.3.6 ASP ASPError Object
This object displays information about errors in the scripts.The ASPError object is
used to display detailed information of any error that occurs in scripts in an ASP
page.The ASPError object’s properties are explained below (all properties are read-
only):
Properties
ASPCode Displays an error code that has been generated by
IIS
ASPDescription Displays a detailed description of the ASP related error
Category Displays the source of the error that means was the error
generated by ASP? By a scripting language? By an object?
Column Displays the column position within the file that generated
the error
Description Displays a short description of the error
File Displays the name of the ASP file that generated the error
Line Displays the line number where the error was detected
Number Displays the standard COM error code for the error
Source Displays the actual source code of the line where the error
occurred
ASPCode
This property returns an error code generated by IIS.
ASPDescription
This property returns a detailed description of the error.
Category
This property returns the source of the error (Was the error generated by IIS? A
scripting language?Or a component?).
Column
This property returns the column position within the ASP file that generated the
error.
Description
This property returns a short description of the error.
File
This property returns the name of the ASP file that generated the error.
Line
This property returns the number of the line within the ASP file that generated the
error.
Number
This property returns the standard COM error code for the error.
Source
This property returns the actual source code of the line where the error occurred.
Syntax
ASPError.ASPCode()
ASPError.ASPDescription()
ASPError.Category()
ASPError.Column()
ASPError.Description()
ASPError.File()
ASPError.Line()
ASPError.Number()
ASPError.Source()
Example
<%
dim objErr
set objErr=Server.GetLastError()
response.write(“ASPCode=” &objErr.ASPCode)
response.write(“<br>”)
response.write(“ASPDescription=” &objErr.ASPDescription)
response.write(“Category=” &objErr.Category)
response.write(“Column=” &objErr.Column)
response.write(“Description=” &objErr.Description)
response.write(“File=” &objErr.File)
ACTIVE SERVER PAGES
185
response.write(“Line=” &objErr.Line)
response.write(“Number=” &objErr.Number)
response.write(“Source=” &objErr.Source)
%>
5.4 Retrieving the content of HTML Forms

Forms are used to get the inputs from the user which is then processed by some
server side scripts. To read the values of the form fields, REQUEST object is used.
The method attribute of the form tag specifies how to send form-data(the form-
data is sent to the page that is specified in the action attribute of the form tag).The
form-data can be sent as URL variables (with method=”get”) or as HTTP post
transaction (with method=”post”).When value of method attribute is provided as
POST, it appends form-data inside the body of the HTTP request and no size
limitation is there. When value of method attribute is provided as GET, it appends
form-data into the URL in name/value pairs and the length of a URL is limited to
about 3000 characters. Get is never used to send sensitive data as it will be visible
with the URL. In this form field values are passed through querystring. The
querystring is a string that is appended to the end of URL.
http://someserver.com/somefile.asp?name=pridhi & favourite
chocolate=temptation
querystring is everything to the right of and including the question mark(?).
the form information is passed as a series of name value pairs. In the above
querystring, the control name is “name” and value entered is pridhi. Similarly the
second textbox name is “favourite chocolate” and value entered is temptation.
If you create the form with method value as GET, the form field values are
retrieved or collected using request.querystring. If method value is provided as
POST, the form field values are retrieved or collected using request.form
Example:
Request.querystring(“text1”)
Request.form(“text1”)
Where “text1” is the name of control of a form from which you want to
retrieve the value.
In the example below we created a html form named studentdetails in which
user is supposed to enter the field values and using asp we processed the entered
values and then displayed output to the user.
Studentdetails.html
<html>
<body>
<form method= “get” action=”form1.asp”>
<b> STUDENT INFORMATION FORM </b>
Name: <input type=”text” name=”text1"><br>
Rollno: <input type=”text” name=”text2"><br>
Branch:<select name=”branch”>
<option value= “computer science”>CSE
<option value= “Information Technology”>IT
<option value= “Electronics”>ECE
<option value= “Mechanical”>ME
</select>
<input type=”submit” value=”Click to Submit”>
</form>
</body>
</html>
STUDENT INFORMATION FORM
Name:
Rollno:
Branch:
CSE
Click to Submit
The form1.asp will be called as soon as the user clicks on the button and
contains the scripts that will process the input that user entered in the form
Form1.asp
<% @language=”VBscript” %>
<%option explicit%>
<html>
<body>
<%
Dim name,rollno,branch
Name=request.querystring(“text1”)
Rollno=request.querystring(“text2”)
ACTIVE SERVER PAGES
187
Branch=request.querystring(“branch”)
Response.write(“your name is” &name & “<br>”)
Response.write(“Rollno is” &rollno& “<br>”)
Response.write(“branch is” &branch & “<br>”)
%>
</body>
</html>
Your name is Pridhi
Rollno is 05/IT/39
Branch is Information Technology
5.5 Troubleshooting
Troubleshooting is a form of problem solving most often applied to repair of failed
products or processes. It is a logical, systematic search for the source of a problem
so that it can be solved, and so the product or process can be made operational
again. Troubleshooting is needed to develop and maintain complex systems where
the symptoms of a problem can have many possible causes. Troubleshooting is
used in many fields such as engineering, system administration, electronics,
automotive repair, and diagnostic medicine. Troubleshooting requires identification
of the malfunction(s) or symptoms within a system. Then, experience is commonly
used to generate possible causes of the symptoms. Determining which cause is
most likely is often a process of elimination - eliminating potential causes of a
problem. Finally, troubleshooting requires confirmation that the solution restores
the product or process to its working state.
In general, troubleshooting is the identification of, or diagnosis of “trouble”
in a [system] caused by a failure of some kind. The problem is initially described
as symptoms of malfunction, and troubleshooting is the process of determining
the causes of these symptoms.
A system can be described in terms of its expected, desired or intended
behaviour (usually, for artificial systems, its purpose). Events or inputs to the system
are expected to generate specific results or outputs. (For example selecting the
“print” option from various computer applications is intended to result in a hardcopy
emerging from some specific device). Any unexpected or undesirable behavior is
a symptom. Troubleshooting is the process of isolating the specific cause or causes
of the symptom. Frequently the symptom is a failure of the product or process to
produce any results. (Nothing was printed, for example).
CHAPTER 6
COOKIES
6.1 Introduction to Cookie

A cookie is a small file that the server stores on the user’s computer. Each time the
same computer requests a page with a browser, it will send the cookie also with the
request. A cookie is often used to identify a user. It’s basically a piece of text that a
Web server can embed on a user’s hard disk. Cookies allow a Web site to store
information on a user’s machine and later retrieve it whenever required. The pieces
of information are stored as name-value pairs.
For example, a Web site might generate a unique ID number for each user and
store the ID number on each user’s machine using a cookie file.
For example, I have visited goto.com, and the site has placed a cookie on my
computer system. The cookie file for goto.com contains the following information:
UserID A9A3BECELKM0563982D www.goto.com/
Goto.com has stored on my computer a single name-value pair. The name of
the pair is UserID, and the value is A9A3BECELKM0563982D. The first time I
visited goto.com, the site assigned me a unique ID value and stored it on my
computer system.
Amazon.com stores a bit more information on my computer system. When I
look at the cookie file Amazon has created on my system, it contains the following:
session-id-time 954242000 amazon.com/ session-id 002-41135256-
798625846 amazon.com/ x-main eKQIfwnxuF7qtmX52x6VWAJHXh@Ih6Uo5H
amazon.com/ ubid-main 077-926653437-9648775324 amazon.com/
It appears that Amazon stores a main user ID, an ID for each session, and the
time the session started on my system (as well as an x-main value, which could be
anything).
COOKIES
189
A name-value pair is simply a named piece of data. It’s not a program, and it
cannot “do” anything. A Web site can retrieve only the information that it has
placed on your computer system. It cannot retrieve information from other cookie
files, nor any other information from your system.
6.1.1 How does cookie data move?

The data moves in the following manner:
• When you type the URL of a Web site into your browser, your browser
sends a request to the Web site server for the page. For example, when you
type the URL http://www.amazon.com into your browser, your browser
will contact Amazon’s server and request its home page.
• When the browser does this, it will look on your system for a cookie file
that Amazon has set. If it finds an Amazon cookie file, your browser will
send all of the name-value pairs in the file to Amazon’s server along with
the URL. If it finds no cookie file, it will send no cookie data.
• Amazon’s Web server receives the cookie data along with the request for
a page. If name-value pairs are received, Amazon can use them.
• If no name-value pairs are received, Amazon knows that you have not
visited before. The server creates a new ID for you in Amazon’s database
and then sends name-value pairs to your system in the header for the Web
page it sends. Your system stores the name-value pairs on your hard disk.
• The Web server can change name-value pairs or add new pairs whenever
you visit the site and request a page.
6.1.2 How do Web sites use cookies?

A cookie allows a site to store state information on your system. This information
lets a Web site remember what state your browser is in. An ID is one simple piece
of state information, if an ID exists on your system, the site knows that you have
visited before. The state is, “Your browser has visited the site at least one time,”
and the site knows your ID from that visit.
Web sites use cookies in many different ways. Here are some of the common
examples:
Sites can accurately determine how many people actually visit the site. Using
cookies, sites can determine how many visitors arrive, how many are new versus
repeat visitors and how often a visitor has visited the site. Sites can store user
preferences so that the site can look different for each visitor (often referred to as
customization). For example, when you visit msn.com, it offers you the ability to
“change content/layout/color.” It also allows you to enter your zip code and get
customized weather information. When you enter your zip code, the following
name-value pair gets added to MSN’s cookie file:
WEAT CC=NC%5FRaleigh%2DDurham®ION= www.msn.com/

E-commerce sites can implement things like shopping carts and quick checkout
options. The cookie contains an ID and lets the site keep track of different things
that you add to your cart. Each item you add to your shopping cart is stored in the
site’s database along with your ID value that is assigned to you. When you check
out, the site knows what is in your cart by retrieving all of your selections from the
database. It would be not possible to implement a convenient shopping mechanism
without cookies or something like them.
6.2 Cookies in JSP

6.2.1 How to Create a Cookie?
The “response.addcookies” command is used to create cookies in JSP.In the example
below, we will create a cookie named “firstname” and assign the value “Pawan” to
it:
<%
response.addcookies(“firstname”)=”Pawan”
%>
6.2.2 How to Retrieve a Cookie Value?

The “Request.getCookies” command is used to retrieve a cookie value.In the
example below, we retrieve the value of the cookie named “firstname” and display
it on a page:
<%
fname=Request.Cookies(“firstname”)
response.write(“Firstname=” &fname)
%>
Output:Firstname=Pawan
6.2.3 Example of creating and reading a cookie

//File: createcookie.jsp
<html>
<head>
<title>Setting a Cookie</title>
</head>
<body>
<h1>Setting a Cookie</h1>
<%
COOKIES
191
Cookie cookie17 = new Cookie(“message”, ”Hello!”);
cookie17.setMaxAge(24 * 60 * 60);
response.addCookie(cookie17);
%>
<a href=”readcookie.jsp”/>Read the cookie value</A>

</body>
</html>
//File: readcookie.jsp
<html>
<head>
<title>Reading a Cookie</title>
</head>
<body>
<h1>Reading a Cookie</h1>
<%
Cookie[] cookies = request.getCookies();
for(int loopIndex = 0; loopIndex < cookies.length; loopIndex++)

{
if (cookies[loopIndex].getName().equals(“message”))
{
out.println(“The cookie says ” + cookies[loopIndex].getValue());
}
}
%>
</body>
</html>
Output:
After clicking the link “Read the Cookie”, you will be displayed with the
cookie value.
Another Example of creating and reading a cookie

<%@ page import=”java.util.*” %>
<%
Cookie[] cookies17 = request.getCookies();
COOKIES
193
if (cookies17 == null)
cookies17 = new Cookie[0];
Date thisVisit = new Date();
// add data cookie to session
Cookie a = new Cookie(“lastVisit”,””+thisVisit);
response.addCookie(a);
// add cookie to session
String value = request.getParameter(“value”);
Cookie added = null;
if (name!=null && value!=null &&name.length()>0)
{
added = new Cookie(name,value);
response.addCookie(added);
}
%>
<html>
<head>
<title>Cookie List</title>
</head>
<body>
<h1>Cookie List</h1>
This visit: <%= thisVisit %><br>
Number of cookies: <%= cookies.length %><br>
<h2>Cookies</h2>
<%
for (int i=0; i<cookies.length; i++) {
out.println(cookies[i].getName()+”:\t”+
cookies[i].getValue()+”<BR>”);
// check if added cookie already present
if (added!=null &&added.getName().equals(cookies[i].getName()))
added = null;
}
if (added != null)
out.println(“new cookie: “+added.getName()+”:\t”+

added.getValue()+”<BR>”);
%>
<h2>New cookie</h2>
<form>
<p>Name: <input type=’text’ name=’name’></p>
<p>Value: <input type=’text’ name=’value’></p>
<input type=’submit’ value=’Add new value’>
</form>
</body>
</html>
6.3 Cookies in ASP

6.3.1 How to Create a Cookie?
The “Response.Cookies” command is used to create cookies in Asp. In the example
below, we will create a cookie named “firstname” and assign the value “Pridhi” to
it:
<%
Response.Cookies(“firstname”)=”Pridhi”
%>
COOKIES
195
It is also possible to assign properties to a cookie, like setting a date when the
cookie should expire:
<%
Response.Cookies(“firstname”)=”Pridhi”
Response.Cookies(“firstname”).Expires=#July 8,2013#
%>
6.3.2 How to Retrieve a Cookie Value?

The “Request.Cookies” command is used to retrieve a cookie value.In the example
below, we retrieve the value of the cookie named “firstname” and display it on a
page:
<%
fname=Request.Cookies(“firstname”)
response.write(“Firstname=” &fname)
%>
Output:Firstname=Pridhi
6.3.3 A Cookie with Keys

If a cookie contains a collection of multiple values that means the cookie has Keys.In
the example below, we will create a cookie collection named “user”. The “user”
cookie has Keys that contains information about a user:
<%
Response.Cookies(“user”)(“firstname”)=”Pridhi”
Response.Cookies(“user”)(“lastname”)=”arora”
Response.Cookies(“user”)(“country”)=”India”
Response.Cookies(“user”)(“age”)=”25"
%>
6.3.4 Read all Cookies

Look at the following code:
<%
Response.Cookies(“firstname”)=”ABC”
Response.Cookies(“user”)(“firstname”)=”Pridhi”
Response.Cookies(“user”)(“lastname”)=”Arora”
Response.Cookies(“user”)(“country”)=”India”
Response.Cookies(“user”)(“age”)=”25"
%>
Assume that your server has sent all the cookies above to a user.
Now we wish to read all the cookies sent to a user. The example below shows
how to read (note that the code below checks if a cookie has Keys with the HasKeys
property):
<html>
<body>
<%
dim a,b
for each ainRequest.Cookies
if Request.Cookies(a).HasKeys then
for each b in Request.Cookies(a)
response.write(a & “:” & b & “=” &Request.Cookies(a)(b))
next
else
Response.Write(a & “=” &Request.Cookies(a) & “<br>”)
end if
response.write “</p>”
next
%>
</body>
</html>
Output:
firstname=ABC
user:firstname=Pridhi
user:lastname=Arora
user:country=India
user:age=25
6.3.5 Example for Creating and Reading cookie

<%
dimnumvisits
numvisits=request.cookies(“NumVisits”)
COOKIES
197
if numvisits=”” then
response.cookies(“NumVisits”)=1
response.write(“Welcome! This is the first time you are visiting this Web
page.”)
else
response.cookies(“NumVisits”)=numvisits+1
response.write(“You have visited this “)
response.write(“Web page “ &numvisits)
ifnumvisits=1 then
response.write” time before!”
else
response.write” times before!”
end if
end if
%>
After Refreshing:
EXTENSIBLE MARKUP LANGUAGE
199
CHAPTER 7
7.1 What is XML?

Extensible Markup language (XML) is one of the most misunderstood concepts in
the area of computers today. It is successfully used all around but many people do
not really seem to understand what XML is and where it needs to be used. Unlike
a programming language like C, C++, Java or a DBMS like oracle, MYSQL it is
not easy to imagine the end use and application of XML. Now, let’s try to clear our
concept that why XML is actually used, for this we will consider a example from
our daily life.
Imagine that two people wants to communicate with each other but they both
speak different language One can only speak and understand English language
while the other can speak and understand only Hind language (Problem show in
figure 7.1). In this case we need some sort of intermediary who can translate between
these two languages and thus convey message to each other. Now the question is,
who this translator is going to be and how would this translator function. There
are basically two primary approaches
(A) When communicating the thoughts of the person who speaks only in Hindi,
translate them to English and then pass on the message to the person who
understands only English. The translator would perform an opposite task
in other direction of communication as well. (This approach is shown in
figure 7.2)
(B) We can have a common language that both person should learn and know.
It should be universally acceptable and should work for different
communicating pairs. In this no translation is needed.
How do we
communicate
with each other?
I know only I know only

English Language Hindi Language
Figure 7.1 Problem of communication in human conversation.
Translator would
translate for us

Figure 7.2 Approach that uses translator for communication
We will now
communicate in
common
language
and common and common
language language
Figure 7.3 Both the parties will use common language

that is universally acceptable
After analysing two approaches, we can conclude that the first approach
provides a quick and dirty solution as communicating parties do not bother about
other’s language and they are free to use their native language and it’s the
responsibility of translator to communicate their thoughts correctly. In the second
approach, every communicating party needs to learn a new common language. In
long term this approach is superior and far better. Now let’s relate this to XML.
XML and Application Communication Incompatibilities

Consider situation where two applications X and Y on different network, wants to
communicate with each other. Is there any language that needs to be used for
communication as in case of human conversation?
We are here talking about the overall platform and architecture of these two
application. The situation is described in figure 7.4
201
How do we
Application communicate Application
X with each Y
other?
I am a J2EE I am a Mainframe
application using DB2 application using oracle
database on Linus OS database on MVS
Operating System
Figure 7.4 Incompatibity problem between Applications.

XML can be used to exchange data across the internet. It can be used to
create data structure that can be shared among incompatible system. XML is a
common meta language that will allow data to be transformed from one format to
the other. XML can be used for web as well as non-web applications.
XML can be used to exchange data between compatible/incompatible
applications in web/ non-web applications.
Application X Application Y
XML
Figure 7.5 XML used as data exchange mechanism

between various applications
This approach is similar to the second approach that we discussed in which
everyone should learn a common language. Thus XML for applications seems to
be similar to common language for humans. Before the introduction of XML data
was exchanged between various applications but XML simplifies the process of
data exchange between two or more applications.
STEP 1:- Application program reads data from a database.
Import java.io.*;
Classstudent
RollNo Name {
Int RollNo.;
1 Pawan String Name;
2 Pridhi ...
3 Ritu ...
4 Tanya }
5 Vijay
Student Database Application Program
STEP2: Same Application Program writes this data to create an XML file
out of it.
Import java.io.*; <?Xmlversionh="1.0".....>

Classstudent <stud_list>
{ <student>
Int RollNo.; <student_rollno>1
String Name; </student_rollno>
... <name>pawan/name>
... </student>
} ...
...
</stud_list>
Application Program XML File

STEP 3: Another Application program reads this file and produce HTML
document that browser displays
203
Figure 7.6 Role of HTML and XML

XML stands for EXtensible Markup Language, which became a W3C
Recommendation on 10. February 1998. XML is a markup language which is like
HTML. XML and HTML both use tags. But there are some differences between
them:
HTML was designed for how to display data. And XML was designed for
how to store or carry data. HTML tags are predefined. But XML tags are not
predefined.
XML can be used to simplify data storage and sharing and was created to
structure, store, and transport information. With XML, data is separated from
HTML. So you can create HTML layouts for displaying data. When the data
changes, you don’t have to recreate your HTML file. With XML, data can also be
easily exchanged between computer and database systems, even they are
incompatible in any other ways. Because XML data is stored in text format, this
makes it easier to export data from a system to an XML file, and then import it into
another system.
Example:
The following example is a note to Preet, from Pridhi, stored as XML:
<? xml version=”1.0" ?>
<note>
<to>Preet</to>
<from>Pridhi</from>
<heading>Reminder</heading>
<body>Meeting on Monday at 3pm</body>
</note>
The note above is quite self-descriptive. It has the information of sender and
the receiver; it also has a heading and a message body. Don’t expect that XML
files will be displayed as HTML pages. The XML document will be displayed
with color-coded root and child elements. A plus (+) or minus sign (-) to the left of
the elements can be clicked to expand or collapse the element structure. This XML
document does not DO anything. It is just the information that is wrapped in the
tags. Someone must write a piece of software to send, receive or display it.
7.1.1 How Can XML be used?

XML is used in many aspects of web development, often to simplify data storage
and sharing.
• XML Separates Data from HTML
If you need to display dynamic data in your HTML document, it will take a lot
of work to edit the HTML document each time the data is changed. With
XML, data can be stored in separate XML files. This way you can concentrate on
using HTML/CSS for display and layout, and be sure that changes in the data will
not require any changes to the HTML document. With a few lines of code of
JavaScript, you can read an external XML file and update the data content of your
web page.
• XML Simplifies Data Sharing
In the real world, computer systems and databases contain data in incompatible
formats. XML data is stored in plain text format, because of this it provides a
software- and hardware-independent way of storing data.
• XML Simplifies Data Transport
It’s a time-consuming task for developers to exchange data between incompatible
systems over the Internet. Exchanging data as XML greatly reduces this complexity,
since the data can be read by different incompatible applications.
• XML Simplifies Platform Changes
Upgrading to new systems whether its hardware or software platforms, it is always
time consuming task. Large amounts of data must be converted and incompatible
data is often lost.
XML data is stored in plain text format and because of this it is easier to expand or
upgrade to new operating systems, new applications, or new browsers, without
losing data.
7.1.2 What is an XML Element& Attribute?

XML element
XML elements are represented by tags. An XML element is everything from the
element’s start tag to the element’s end tag. Elements usually consist of an opening
205
tag and a closing tag, but they can consist of just one tag. Opening tags consist of <,
followed by the element name, and ending with >. Closing tags are the same but
have a forward slash inserted between the less than symbol and the element name.
An element can contain:
• other elements
• text
• attributes
• or a mixture of all of the above...
XML Attributes
XML elements can have attributes, just like HTML. Attributes provide additional
information about an XML element.
XML Elements vs. Attributes
Take a look at these examples:
<person sex=”female”>
<firstname>ABC</firstname>
<lastname>XYZ</lastname>
</person>
<person>
<sex>female</sex>
<firstname>ABC</firstname>
<lastname>XYZ</lastname>
</person>
In the first example sex is an attribute. In the last, sex is an element. Both
examples provide the same information. There are no defined rules about when to
use as attributes or when to use as an elements.
7.2 XML Tree

The great benefit about XML is that the document itself describes the structure of
data. If you ever researched your family history, you have probably come across a
family tree. At the top of the tree is some early ancestor and at the bottom of the
tree are the latest children. With a tree structure you can see which children belong
to which parents, which grandchildren belong to which grandparents and many
other such relationships. The thing about XML is that it also fits nicely into this
tree structure, often referred to as an XML Tree.
XML documents form a tree structure that starts at “the root” and branches to
“the leaves”.
An Example XML Document

XML documents use a self-describing and simple syntax:
<? xml version=”1.0" ?>
<note>
<to>Preet</to>
<from>Pridhi</from>
</note>
• The first line in above example is the XML declaration. It defines the XML
version that we are using i.e.1.0.
• The next line describes the root element of the document (like saying: “this
document is a note”)
<note>
• The next 4 lines describe 4 child elements of the root (to, from, heading,
and body):
<to>Preet</to>
<from>Pridhi</from>
• And finally the last line defines the end of the root element:
</note>
XML documents must contain a root element. This element is “the parent” of
all other elements that are there in the document.
All elements can have sub elements and are called as child elements:
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
The terms parent, child, and sibling are used to describe the relationships
between elements. Parent elements have children. Children on the same level are
called siblings (brothers or sisters).
Example:
<inventory>
207
<drink>
<Real Juice>
<price>30</price>
<amount>250ml</amount>
</Real juice>
<pepsi>
<price>25</price>
<amount>500ml</amount>
</pepsi>
</drink>
<snack>
<chips>
<price>20</price>
<amount>60gms</amount>
</chips>
</snack>
</inventory>
The root element in the example is <inventory>. All other elements in the
document are contained within <inventory>.
The <chips> element has 2 children: <amount> and <price>.
Inventory
Drink Snack
Chips
Real Juice Pepsi
Price Amount
Price Amount Price Amount
7.3 XML Syntax Rules

·All XML Elements Must Have a Closing Tag
In HTML, some elements do not have to have a closing tag:
<p>This is a paragraph.
<br>
In XML, it is illegal not to have the closing tag. All elements must have a
closing tag:
<p>This is a paragraph.</p>
<br />
• XML Tags are Case Sensitive
The tag <note> is different from the tag <Note>.
Opening and closing tags must be written with the same case:
<Message>This is incorrect</message>
<message>This is correct</message>
• XML Elements Must be Properly Nested
In HTML, Improperly nested elements works:
<b><i>This text is bold and italic</b></i>
In XML, all elements must be properly nested within each other:
<b><i>This text is bold and italic</i></b>
• XML Documents Must Have a Root Element
XML documents must contain one element that is the parent of all other elements.
This element is called the root element.
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
• XML Attribute Values must be quoted
XML elements can have attributes in name/value pairs just like as in HTML. In
XML, the attribute values must always be quoted.
Study the two XML documents below. The first one is incorrect, the second is
correct:
<note date=17/11/2013>
<to>Preet</to>
<from>Pridhi</from>
</note>
<note date=”17/11/2013">
<to>Preet</to>
209
<from>Pridhi</from>
</note>
The error in the first document is that the date attribute in the note element is
not quoted.
• Comments in XML
The syntax for writing comments in XML is similar to that of HTML.
<!— This is a comment —>
• White-space is preserved in XML
HTML truncates multiple white-space characters to one single white-space:
HTML: Hello Pawan
Output: Hello Pawan
With XML, the white-space in a document is not truncated.
7.4 Well Formed & Valid XML Document

• XML with correct syntax is”Well Formed” XML.
• XML validated against a DTD is “Valid” XML.
Well Formed XML Documents
A “Well Formed” XML document has correct XML syntax.
Valid XML Documents
A “Valid” XML document is a “Well Formed” XML document, which also
conforms to the rules of a Document Type Definition (DTD).
7.5 Introduction to DTD

Consider an XML document that captures bank account information. We will capture
data such as account number, holder’s name, opening balance, type of account etc.
however at the same type we also wish to ensure that this XML document does not
contain any other irrelevant information such as information about student, books,
projects or any data that is not required here in this particular XML document. This
is where the DTD comes to rescue.
A DTD allows us to validate the content of an XML document.
A Document Type Definition (DTD) defines the legal building blocks of an
XML document. It defines the document structure with a list of legal elements and
attributes. A DTD allows you to create rules for the elements within your XML
documents. Although XML itself has rules, the rules defined in a DTD are specific
to your own needs. The DTD is declared at the top of your XML document. The
actual contents of the DTD can be included within your XML document or included
in another document and linked to (or both). It means a DTD can be declared
inline inside an XML document, or as an external reference.
A DTD is a way to ensure that an XML document uses elements correctly. It
contains a set of rules. When your XML document is processed, it is compared to

its associated DTD to be sure it is structured correctly and all tags are used in the
proper manner.
A DTD:
·Always contains rules that define elements.
·Always contains rules that define the relationship between elements.
·May contain rules that define attributes for elements, although not all elements
have attributes.
·May contain rules that define entities.
·May contain rules that define notations
XML document DTD file

...contains rules that
...contains data... apply to the data...
Figure 7.7 Relationship between an XML document and a DTD file
Program A
XML Program B
Document
Program C
Validate the contents of the
XML document and then
uses this document
Figure 7.8 Situation in the absence of DTD

211
Program A
XML Program B
Document
Validate Program C
No need to validate
DTD this document
Figure 7.9 Situation in the presence of DTD
7.5.1 Types of DTD:

There are two type of DTDs, internal DTD and external DTD
Internal DTD Declaration

You can insert DTD data within your DOCTYPE definition in an individual XML
document. DTDs inserted this way are used in that specific XML document only.
This might be the approach to take if you want to validate the use of a small number
of tags in a single document or to make elements that will be used only for one
document.
If the DTD is declared inside the XML file, it should be wrapped in a
DOCTYPE definition with the following syntax:
<! DOCTYPE root-element [element-declarations]>
Example XML document with an internal DTD:
<?xml version=”1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Preet</to>
<from>Pridhi</from>
</note>
The DTD above is interpreted like this:
• !DOCTYPE note defines that the root element of this document is note
• !ELEMENT note defines that the note element contains four elements:
“to,from,heading,body”
• !ELEMENT to defines the to element to be of type “#PCDATA”
• !ELEMENT from defines the from element to be of type “#PCDATA”
• !ELEMENT heading defines the heading element to be of type "#PCDATA”
• !ELEMENT body defines the body element to be of type “#PCDATA”
*PCDATA
PCDATA means parsed character data. PCDATA is text that will be parsed by a
parser. Tags inside the text will be treated as markup and entities will be expanded.
*CDATA
CDATA means character data. CDATA is text that will NOT be parsed by a parser.
Tags inside the text will NOT be treated as markup and entities will not be expanded.
A parser is a software tool that checks to be sure a document follows a particular
syntax. XML parsers come in two varieties:
• A non-validating parser checks a document to be sure XML syntax rules
are followed and builds a document tree from the element tags.
• A validating parser checks the syntax, builds the tree, and compares the
use of element tags to be sure they conform with the rules specified in the
document’s associated DTD.
Parsers can be either external programs or part of the editing tool or browsing
tool.
External DTD Declaration
If the DTD is declared in an external file, it should be wrapped in a DOCTYPE
definition with the following syntax:
<! DOCTYPE root-element SYSTEM “filename”>
DTDs are stored as ascii text files with the extenstion .dtd. Each file begins
with a DOCTYPE definition and includes a series of element definitions, attribute
lists, entity defintions and notation definitions.
213
<!DOCTYPE note SYSTEM “note.dtd”>
<note>
<to>Preet</to>
<from>Pridhi</from>
</note>
And this is the file “note.dtd” which contains the DTD:
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
7.5.2 Limitations of DTD

• Non XML Syntax: Syntax of DTD is different from that of XML
• One DTD per XML Document: We cant use multiple DTD’s to validate
single XML Document
• Weak Data types: Defines very basic data types that are not sufficient in
many real life applications
• Inheritance not possible: DTD’s do not allow the designer to create some
data types and extend them as desired.
• Overriding a DTD: An internal DTD can override a external DTD. This
sometimes provides flexibility but also creates confusion and leads to
clumsy designs.
7.5.3 Advantages of using DTD

• With a DTD, each of your XML files can carry a description of its own
format.
• With a DTD, independent groups of people can agree to use a standard
DTD for interchanging data.
• Your application can use a standard DTD to verify that the data you receive
from the outside world is valid.
• You can also use a DTD to verify your own data.
7.6 Introduction to Schema

XML Schema is an XML-based alternative to DTD. The difference between the
DTD and the schema is that in case of DTD the syntax is different with respect to
XML document but in case of schema the syntax is same as that of the XML. An
XML schema describes the structure of an XML document. The XML Schema
language is also referred to as XML Schema Definition (XSD). The purpose of an
XML Schema is to define the legal building blocks of an XML document, just like
a DTD.
An XML Schema:
• defines elements that can appear in a document
• defines attributes that can appear in a document
• defines which elements are child elements
• defines the order of child elements
• defines the number of child elements
• defines whether an element is empty or can include text
• defines data types for elements and attributes
• defines default and fixed values for elements and attributes
7.6.1 Why Use XML Schemas?

• XML Schemas Support Data Types
One of the greatest strength of XML Schemas is the support for data types. With
support for data types:
• It is easy to describe allowable document content
• It is easy to validate the correctness of data
• It is easy to work with data from a database
• It is easy to define data facets (restrictions on data)
• It is easy to define data patterns (data formats)
• It is easy to convert data between different data types
• XML Schemas use XML Syntax
Another great strength about XML Schemas is that they are written using the syntax
of XML. Few benefits of that XML Schemas are written in XML:
• No need to learn a new language
• XML editor can be used to edit the Schema files
• XML parser can be used to parse the Schema files
• You can transform your Schema with XSLT
215
• XML Schemas Secure Data Communication
When sending data from a sender to a receiver, it is essential that both parts have
the same “expectations” about the content. With XML Schemas, the sender can
describe the data in a way that the receiver will understand.
A date like: “03-11-2013” will, in some countries, be interpreted as
3.November and in other countries as 11.March.
However, an XML element with a data type like this:
<date type=”date”>2013-03-11</date>
ensures a mutual understanding of the content, because the XML data type
“date” requires the format “YYYY-MM-DD”.
• XML Schemas are Extensible
XML Schemas are extensible, because they are written in XML. With an extensible
Schema definition you can:
• Reuse your Schema in other Schemas
• Create your own data types derived from the standard types
• Reference multiple schemas in the same document
This XML document (note.xml) has a reference to an XML Schema:
<note>
xmlns=”http://www.xyz.com”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://www.xyz.com note.xsd”>
<to>Preet</to>
<from>Pridhi</from>
</note>
Namespaces are a way of using elements from more than one DTD within the
same XML document. Sometimes you may be working with material that draws
on several sets of element tags. For example, you might have an online store selling
tropical fish and you’d like to use the <SOURCE> tag to identify both the
geographic location from which each species comes and the wholesaler from whom
you buy it. Namespaces are a way to do this. An XML namespace is a collection of
names, identified by a URI reference, which are used in XML documents as element
types and attribute names. In the beginning of your document (or at the start of a
particular element of your document), you identify the namespaces you’ll be using
and where the tag information is located. Then, when you use the tag to identify an
element in your document, you precede it with the appropriate namespace name.
Declaring Namespaces
At the beginning of your document, you’ll want to identify the namespaces you are
using in your document. This process is called declaring the namespace. In this
example, you are creating a namespace called “sales.” The URI for sales is the
mythical fishworld.org/schema:
<document xmlns:SALES=’http://fishworld.org/schema’>
Using Namespaces
When you use the tag to create the element that is defined in one of the namespaces,
the namespace is the first part of the tag, like this:
<SALES: SOURCE>Fish-o-Rama Wholesalers and Suppliers to the Trade</
SOURCE>
When you use your own tag you just use the tag name, like this:
<SOURCE>Mexico, Central America</SOURCE>
The following fragment:
specifies the default namespace declaration. This declaration tells the schema
validator that all the elements used in this XML document are declared in the
“http://www.xyz.com” namespace.
Once you have the XML Schema Instance namespace available:
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
you can use the schemaLocation attribute. This attribute has two values,
separated by a space. The first value is the namespace to use. The second value is
the location of the XML schema to use for that namespace:
xsi:schemaLocation=”http://www.xyz.com note.xsd”
An XML Schema (note.xsd)
The following example is an XML Schema file called “note.xsd” that defines
the elements of the XML document above (“note.xml”):
<xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema”
targetNamespace=”http://www.xyz.com”
xmlns=”http://www.w3schools.com”>
217
<xs:element name=”note”>
<xs:complexType>
<xs:sequence>
<xs:element name=”to” type=”xs:string”/>
<xs:element name=”from” type=”xs:string”/>
<xs:element name=”heading” type=”xs:string”/>
<xs:element name=”body” type=”xs:string”/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
The note element is of complex type as it contains other elements. The other
elements (to, from, heading, body) are simple types because they do not contain
other elements. A simple element is an XML element that can contain only text. It
cannot contain any other elements or attributes. If an element has attributes, it is
considered to be of a complex type. A complex element is an XML element that
contains other elements and/or attributes.
The following fragment:
xmlns:xs=”http://www.w3.org/2001/XMLSchema”
indicates that the elements and data types used in the schema come from the
“http://www.w3.org/2001/XMLSchema” namespace. It also specifies that the
elements and data types that come from the “http://www.w3.org/2001/
XMLSchema” namespace should be prefixed with xs:
This fragment:
targetNamespace=”http://www.xyz.com”
indicates that the elements defined by this schema (note, to, from, heading,
body.) come from the “http://www.XYZ.com” namespace.
This fragment:
indicates that the default namespace is “http://www.xyz.com”.
7.7 Displaying XML with CSS

CSS stands for Cascading Style Sheets. Styles define how to display HTML elements.
Styles are stored in Style Sheets. External Style Sheets can save a lot of work.
External Style Sheets are stored in CSS files. Multiple style definitions will cascade
into one.
A Cascading Style Sheet is a file that contains instructions for formatting the
elements in an XML document.
Creating and linking a CSS to your XML document is one way to tell browser
how to display each of document’s elements. An XML document with an attached
CSS can be open directly in Internet Explorers. You don’t need to use an HTML
page to access and display the data.
There are two basic steps for using a css to display an XML document:
• Create the CSS file.
• Link the CSS sheet to XML document.
With CSS (Cascading Style Sheets) you can add display information to an
XML document.
Example 1:
Save the code with a.css
tutorials
{
margin:10px;
background-color:pink;
font-family:verdana,helvetica,sans-serif;
}
name
{
font-weight:bold;
}
url
{
display:block;
color:blue;
font-size:small;
font-style:italic;
}
We will use the above code for a xml file named b.xml
219
Save the code with b.xml
<?xml-stylesheet type=”text/css” href=”a.css”?>
<tutorials>
<tutorial>
<name>XML Tutorial</name>
<url>http://www.abc.com</url>
</tutorial>
<tutorial>
<name>HTML Tutorial</name>
<url>http://www.xyz.com</url>
</tutorial>
</tutorials>
Output:
Output without using the css file:
Example2:
Save the code with x.css
CATALOG
{
background-color: pink;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: purple;
font-size: 20pt;
}
221
ARTIST
{
color: green;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
Display: block;
color: #000000;
margin-left: 20pt;
}
Save the code with y.xml

<?xml version=”1.0" encoding=”ISO8859-1" ?>
<?xml-stylesheet type=”text/css” href=”x.css”?>
<CATALOG>
<CD>
<TITLE>Junoon</TITLE>
<ARTIST>Amrinder Gill</ARTIST>
<COUNTRY>India</COUNTRY>
<COMPANY>ABC</COMPANY>
<PRICE>1000</PRICE>
<YEAR>2011</YEAR>
</CD>
<CD>
<TITLE>Meri Kahani</TITLE>
<ARTIST>Atif Aslam</ARTIST>
<COMPANY>Acaustic Music Records</COMPANY>
<PRICE>990</PRICE>
<YEAR>2008</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>XYZ</ARTIST>
<COMPANY>ABC</COMPANY>
<PRICE>980</PRICE>
<YEAR>1982</YEAR>
</CD>
</CATALOG>
Output:
223
Output without using the css file:
7.8 XSL (EXtensible Stylesheet Language)

XSL describes how the XML document should be displayed!
CSS = Style Sheets for HTML
XSL = Style Sheets for XML
XSL consists of three parts:

XSLT - a language for transforming XML documents
XPath - a language for navigating in XML documents
XSL-FO - a language for formatting XML documents
Options for displaying XML
HTML
XSL XSL Document Web
Transformation Transformation Browser
spec.
CSS XML KSL

Stylesheet Document Stylesheet
XML-Enabled XSL Display

Web Browser Engine
Figure 7.10: Options for Displaying XML
7.8.1 XSLT (XSL Transformations)

XSLT, which stands for Extensible Styles Language Transformations, enables you
to transform XML documents into another form. It is a language that is used to
transform an XML document into another XML document, or another type of
document that is recognized by a browser, like HTML and XHTML. Using XSLT
you can transform source XML documents to another XML documents, to HTML
documents (for browsers) or to text format. Normally this transformation is done
by transforming each XML element into an (X)HTML element. With XSLT you
can add/remove elements and attributes to or from the output file. You can also
rearrange and sort elements, perform tests and make decisions about which elements
to hide and which to display. XSLT uses XPath to find information in an XML
document. XPath is used to navigate through elements and attributes in XML
documents.
How does it Work?

In the transformation process, XSLT uses XPath to define parts of the source
document that should match one or more predefined templates. When a match is
found, XSLT will transform the matching part of the source document into the
result or output document.
A transformation can take place in one of three locations:
• On the server
• On the client (for example, our web browser)
225
• With a standalone program
Start with a Raw XML Document
Example 1
We want to transform the following XML document (“catalog.xml”) into
XHTML:
<?xml-stylesheet type=”text/xsl” href=”catalog.xsl”?>
<catalog>
<book>
<title>DBMS</title>
<author>Pridhi</author>
<price>500</price>
<year>2007</year>
</book>
<book>
<title>DSA</title>
<author>Sheelu</author>
<price>990</price>
<year>2008</year>
</book>
<book>
<title>DOS</title>
<author>Ritu</author>
<price>890</price>
<year>2010</year>
</book>
</catalog>
Create an XSL Style Sheet

Then you create an XSL Style Sheet (“catalog.xsl”) with a transformation
template:
<xsl:stylesheet version=”1.0" xmlns:xsl=”http://www.w3.org/1999/XSL/
Transform”>
<xsl:template match=”/”>
<html>
<body>
<h2>My Book Collection</h2>
<table border=”1">
<tr bgcolor=”#9acd32">
<th>Title</th>
<th>Author</th>
<th>Price</th>
<th>Year</th>
</tr>
<xsl:for-each select=”catalog/book”>
<tr>
<td><xsl:value-of select=”title”/></td>
<td><xsl:value-of select=”author”/></td>
<td><xsl:value-of select=”price”/></td>
<td><xsl:value-of select=”year”/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Explanation of above example:
• The <xsl:template> Element

An XSL style sheet consists of one or more set of rules that are called as templates.
It basically contains rules to apply when a specified node is matched. The
<xsl:template> element is used to build templates.
The match attribute is used to associate a template with an XML element.
The match attribute can also be used to define a template for the entire XML
document. The value of the match attribute i.e. match=”/” defines the whole
document and it is an XPath expression.
227
Since an XSL style sheet is an XML document, it always begins with the XML
declaration: <?xml version=”1.0"?>
The next element, <xsl:stylesheet>, defines that this document is an XSLT
style sheet document ,along with the version number and XSLT namespace
attributes.
The <xsl:template> element defines a template. The match=”/” attribute
associates the template with the root of the XML source document.
The content inside the <xsl:template> element defines some HTML to write
to the output.
The last two lines define the end of the template and the end of the style
sheet.
• The <xsl:value-of> Element

The <xsl:value-of> element is used to extract the value of a selected node or you
can say this element allows you to retrieve the value from a node. The <xsl:value-
of> element can be used to extract the value of an XML element and add it to the
output stream of the transformation. The select attribute in the example above,
contains an XPath expression. An XPath expression works like navigating a file
system; a forward slash (/) selects subdirectories.
• The <xsl:for-each> Element

The XSLT <xsl:for-each> element allows you to loop through multiple nodes that
match the selection criteria. This in turn, enables you to retrieve data from these
nodes. This element allows you to do looping in XSLT. The XSL <xsl:for-each>
element can be used to select every XML element of a specified node-set.
Filtering the Output

We can also filter the output from the XML file by adding a criterion to the select
attribute in the <xsl:for-each> element.
<xsl:for-each select=”catalog/cd[author=’pridhi’]”>
Legal filter operators are:
• = (equal)
• != (not equal)
• < less than
• > greater than
The <xsl:sort> Element
The <xsl:sort> element is used to sort the output.
To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each>
element in the XSL file.
<xsl:for-each select=”catalog/book”>
<xsl:sort select=”author”/>
<tr>
<td><xsl:value-of select=”title”/></td>
<td><xsl:value-of select=”author”/></td>
</tr>
</xsl:for-each>
Example 2
Step 1 (XML file): Create an XML file with the following content and save it
with “p.xml”
<?xml version=”1.0" encoding=”UTF-8" standalone=”yes”?>
<?xml-stylesheet type=”text/xsl” href=”q.xsl”?>
<tutorials>
<tutorial>
<name>XML Tutorial</name>
<url>http://www.abc.com/xml/tutorial</url>
</tutorial>
<tutorial>
<name>HTML Tutorial</name>
<url>http://www.xyz.com/html/tutorial</url>
</tutorial>
</tutorials>
Step 2 (XSL file): Create a file with the following content and save it as
“q.xsl” into the same directory as the XML file.
<xsl:stylesheet version=”1.0" xmlns:xsl=”http://www.w3.org/1999/XSL/
Transform”>
<xsl:template match=”/”>
<html>
<head>
<title>XML XSL Example</title>
body
229
{
margin:10px;
background-color:#ccff00;
font-family:verdana,helvetica,sans-serif;
}
.tutorial-name
{
display:block;
font-weight:bold;
}
.tutorial-url
{
display:block;
color:#636363;
font-size:small;
font-style:italic;
}
</style>
</head>
<body>
<h2>Easy to learn Tutorials</h2>
<p>Hey, check out these tutorials!</p>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match=”tutorial”>
<span class=”tutorial-name”><xsl:value-of select=”name”/></span>
<span class=”tutorial-url”><xsl:value-of select=”url”/></span>
</xsl:template>
</xsl:stylesheet>
Output:
Without using XSL file

231
7.8.2 XPATH
XPath is a language for finding information in an XML document. If you have an
XML document that contained a bunch of your favorite books, each with author
children elements, you can use a one line XPath expression to find all the authors
of your favorite books! XPath can locate any type of information in an XML
document with one line of code. These one lines are referred to as “expressions,”
and every piece of XPath that you write will be an expression.
In XPath, there are seven kinds of nodes: element, attribute, text, namespace,
processing-instruction, comment, and document nodes.
XML documents are treated as trees of nodes. The topmost element of the
tree is called the root element.
<book> (root element node)
<author>pridhi</author> (element node)
Selecting Nodes
Path expressions are used by XPath to select nodes in an XML document.
The node is selected by following a path or steps. The most useful path expressions
are listed below:
Expression Description
Nodename It Selects all nodes with the name “nodename”
/ It Selects from the root node
// It Selects nodes in the document from the current node
that match the selection no matter where they are
. It Selects the current node
.. It Selects the parent of the current node
@ It Selects attributes
In the table below we have listed some path expressions and the result of the
expressions:
Path Expression Result
Inventory Selects all nodes with the name “Inventory”
/inventory Selects the root element inventory. Note: If the path starts
with a slash ( / ) it always represents an absolute path to
an element!
inventory/drink Selects all drink elements that are children of inventory
//drink Selects all drink elements no matter where they are in
the document
inventory//drink Selects all drink elements that are descendant of the
inventory element, no matter where they are under the
inventory element
//@lang Selects all attributes that are named lang
XPath Operators
An XPath expression returns either a node-set, a string, a Boolean, or a number.
Below is a list of the operators that can be used in XPath expressions:
Operator Description Example Return value
+ Addition 6+6 12
- Subtraction 6–2 4
* Multiplication 6*3 18
Div Division 8 div 4 2
= Equal price=5.80 true if price is 5.80false if
price is 5.90
!= Not equal price!=5.80 true if price is 5.90false if
price is 5.80
< Less than price<5.80 true if price is 5.00false if
price is 5.80
<= Less than or equal to price<=5.80 true if price is 5.00false if
price is 5.90
> Greater than price>5.80 true if price is 5.90false if
price is 5.80
>= (Greater than or equal to Price) = 5.80 true if price is 5.90false if
price is 5.70
Or Or price=5.80 or price true if price is
=5.70 5.80false if price is 5.50
And and price>5.00 and true if price is 5.80false if
price<5.90 price is 5.50
Mod Modulus (division 5 mod 2 1
remainder)
7.8.3 XSL-FO (Extensible Stylesheet Language Formatting Objects)

XSL-FO is about formatting XML data for output.
XSL-FO Document Structure
<?xml version=”1.0" ?>
<fo:root xmlns:fo=”http://www.w3.org/1999/XSL/Format”>
<fo:layout-master-set>
233
<fo:simple-page-master master-name=”A4">
<!— Page template goes here —>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference=”A4">
<!— Page content goes here —>
</fo:page-sequence>
</fo:root>
XSL-FO Areas
XSL-FO uses rectangular boxes (areas) to display output. All output (text, pictures,
etc.) will be formatted into these boxes and then will be displayed. Following areas
are
• Pages
• Regions
• Block areas
• Line areas
• Inline areas
XSL-FO Pages
XSL-FO output is formatted into pages. Printed output will generally go into many
separate pages. Browser output will often go into one long page. XSL-FO Pages
contain many Regions.
XSL-FO Regions
Each XSL-FO Page contains a number of Regions:
• region-body (body of the page)
• region-before (header of the page)
• region-after (footer of the page)
• region-start (left sidebar)
• region-end (right sidebar)
XSL-FO Regions contain many Block areas.
XSL-FO Block Areas

XSL-FO Block areas define small block elements and they are the ones that normally
starts with a new line like paragraphs, tables and lists. XSL-FO Block areas can
contain many other Block areas, but most often they contain Line areas.
XSL-FO Line Areas

XSL-FO Line areas define text lines inside Block areas. XSL-FO Line areas contain
many Inline areas.
XSL-FO Inline Areas

XSL-FO Inline areas define text inside Lines (bullets, single character, graphics,
and more).
XSL-FO Example
<?xml version=”1.0" ?>
<fo:root xmlns:fo=”http://www.w3.org/1999/XSL/Format”>
<fo:layout-master-set>
<fo:simple-page-master master-name=”A4">
<fo:region-body />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference=”A4">
<fo:flow flow-name=”xsl-region-body”>
<fo:block>Hello Friends</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
The output from this code would be something like this:
Hello Friends
7.9 Relationship between HTML, SGML and XML

SGML (Standard Generalized Markup Language) is language which was published
as an international standard (ISO 8879) in 1986.
To understand the relationship between HTML, SGML and XML you should
know three things:
• SGML is basis for both HTML and XML.
• XHTML is XML. “XHTML 1.0 is a reconstruction of HTML 4.01 in XML,
235
and combines the strength of HTML 4 with the power of XML.”
• XML is NOT a language. XHTML 1.0 uses the tags of HTML 4.01 but
implements the rules of XML.
The Document
Generally, a typical document is prepared in three layers:
• structure
• Content
• Style
Structure
Structure is a collection of documents title, author, paragraphs, topics, chapters,
head, body etc.
Content
Content is the actual information that contains title, author, paragraphs etc.
Style
With the help of Style the content within the structural elements are displayed such
as font color, type and size, text alignment etc.
Markup
Normally, HTML, SGML, and XML all markup content use tags. The main
difference is that SGML and XML manage the relationship between content and
structure.Structural tags that markup the content are not predefined and style is
kept completely separate. HTML is a combination of content marked up with both
structural and stylistic tags. Moreover, HTML tags are predefined by the HTML
language.
It is important to know that if structure, content and style are combined then
you are bound to only one form of presentation. When the structure and content
are used separately from style, only one file can be represented in multiple forms.
XML can be transformed to HTML/XHTML and displayed on the Web, or the
information can be transformed and published to paper, and the data can be read
by any XML aware browser or application.
SGML (Standard Generalized Markup Language)

Earlier, “marked up” documents in proprietary was only recognized by electronic
publishing applications such as Microsoft Word, Adobe PageMaker or QuarkXpress.
The document markup for both structure and style was combined with the content
and was published to only one media, the printed page.
These programs and their proprietary mark up were not able to define the
view of the information for any other media besides paper, as well as not able to
describe the actual content of the document beyond paragraphs, headings and titles.
The file format could not be read or exchanged with other programs, it was useful
only within the application that created it.
Because SGML is a nonproprietary international standard so it helps you to
create documents that are independent of any specific hardware or software. The
document structure is described in a file called the DTD (Document Type
Definition). The DTD defines the relationships between a document’s elements
creating a consistent, logical structure for each document.
SGML is used by defense contractors and electronic publishing industry for
more than a decade and is very useful for managing large-scale, long-term
information management needs. Because SGML is very large, powerful, and
complex so it is difficult to learn and understand and is not well suited for the Web
environment.
XML (Extensible Markup Language)

XML is a “restricted form of SGML” which minimizes the complexity of SGML.
Like SGML, XML also maintains the flexibility of describing customized markup
languages with a user-defined document structure (DTD) in a non-proprietary file
format for both storage and exchange of text and data both on and off the Web.
It is mentioned earlier that XML separates structure and content from style
and the structural markup tags can actually describe the content because they can
be customized for each XML based markup language. Math Markup Language
(MathML) is ver good example as an XML application for representing
mathematical notation and having both its structure and content.
Until MathML, the ability to communicate mathematical expressions on the
Web was limited to mainly displaying images (JPG or GIF) of the scientific notation
or posting the document as a PDF file. MathML allows the information to be
displayed on the Web, and this information is available for searching, indexing, or
reuse in other applications.
HTML (Hypertext markup Language)

HTML is a single, predefined markup language that allows Web designers to use
it’s syntax and structure. The HTML standard was not designed for other platforms
such as Web TV’s, mobile phones or PDAs. The structural markup helps little to
describe the content beyond paragraph, list, title and heading.
XML allows the people to create their own markup languages for exchanging
information. The authors creat their own tags which can be descriptive of the
content and documents are displayed using style sheets (CSS and XSL). With the
use of XML’s consistent syntax and structure, documents can be converted and
published to multiple forms of media and content can be exchanged between other
XML applications.
237
HTML played an important role for Web but the Web requires more robust,
flexible languages to support it’s expanding forms of communication and data
exchange.
In Conclusion
XML will never completely replace SGML because SGML is still considered better
for long-time storage of complex documents. However, XML has already replaced
HTML as the recommended markup language for the Web with the creation of
XHTML 1.0.
XHTML has not made the HTML that currently exists on the Web obsolete;
HTML 4.01 is the last version of HTML. XHTML (an XML application) is the
foundation for a universally accessible, device independent Web.
INDEX
A ASP AddHeader method, 169

A bottom-up approach, 12 ASP AppendToLog method, 170
Absolute positioning, 109 ASP Application object, 174
Accesskey attribute, 69 ASP ASPError object, 183
Active server page, 161 ASP binary read method, 174
addCookie(Cookie cookie), 142 ASP buffer property, 168
addHeader(String name, String value), ASP CacheControl property, 168
142 ASP clear method, 170
Advanced search interface, 21 ASP contents.Remove method, 175, 180
AIFF format, 89 ASP Contents.RemoveAll method, 180
Alphabetical organization scheme, 9 ASP content type property, 168
Ambiguity, 7 ASP end method, 171
Ambiguous organization schemes, 8, 10 ASP execute method, 181
Anchor tags, 66 ASP expires property, 169
Anchors attributes, 67 ASP expiresAbsolute property, 169
Application object, 155 ASP file, 163
Application variables, 165 ASP flush method, 171
Application_OnEnd event, 176 ASP GetLastError() method, 182
Application_OnStart event, 176 ASP process, 163
Architectural page mock-ups, 31 ASP request object, 167, 172
ASP, 161 ASP scriptTimeout property, 181
ASP abandon method, 179 ASP server object, 180
ASP session object, 178 D

ASP sessionID property, 179 Declaration tag, 120
ASP timeout property, 179 Design sketches, 32
ASP total bytes property, 173 DHTML, 34, 35
ASP transfer method, 182 Document rype definition (DTD), 209
AU format, 89 DOM, 34
Audience-specific organization scheme, Dynamic HTML, 34
11
AutoFlush attribute, 124
AVI format, 90
E
Elements, 45
Embedded/Integrated navigation systems,
B 15
Block-level elements, 56 ErrorPage attribute, 124
Blueprints, 30 Events in HTML, 52
Browsing, 22 Exact organization schemes, 8
Buffer attribute, 124 Exception object, 158
Existence searching, 19
C Extensible Markup language (XML), 199
Casual browsing, 2 External DTD, 212
Chronological organization schemes, 9 External style sheet, 102, 107
Class, 47
Clear ( ), 146 F
ClearBuffer ( ), 146 Familiar query language, 21
Client-side image maps, 70 Fielded searching, 21
cohesive organization system, 14 Fixed positioning, 109
Comprehensive searching, 19 Flip charts, 27
Conceptual design, 27 Flush ( ), 146
ContainsHeader(String name), 142 Focus events, 53
Contextual navigation system, 16 Frames, 83
Cookie, 188 Functional metaphors, 29
Core attributes, 46
Create cookies, 190
G
CSS, 101, 34
Geographical organization schemes, 9
INDEX
241
getAttribute(String name), 155 Hypertext model, 13
getAttributeNames(), 155, 156 Hypertext system, 13
getBufferSize( ), 146
getCookies(), 128
I
getCreationTime (), 151 id, 47
getHeader(String name), 129 Image buttons, 79
getHeaderNames(), 130 Image links, 66
getId( ), 151 Image preliminaries, 75
getInitParameter(String name), 156 Image-map, 70
getInitParameterNames(), 157 Import attribute, 125
getLastAccessedTime ( ), 151 Importing a style sheet, 102
getMajorVersion(), 156 Include directive, 125
getMaxInactiveInterval( ), 152 Indexing the entire site, 25
getMethod(), 131 Information architect, 1
getMinorVersion(), 156 Information architecture, 1
getParameterNames(), 133 Inline style, 102
getParameterValues(String name), 135 Internal DTD, 211
getRemaining( ), 146 Internal style, 103
getRequestURI(), 137 Internal style sheet, 102
getServerInfo(), 156 invalidate(), 152
getServletPath(), 137 isAutoFlush ( ), 146
GIF images, 76 isErrorPage attribute, 124
Global (site-wide) Navigation System, 15
Grouping content, 26
Grouping information, 6
J
JavaServer Pages (JSP), 116
Guides, 16
JPEG, 76
JSP actions, 126
H JSP architecture, 117
Heterogeneity, 7 JSP directives, 121
Hierarchical structure, 11 JSP engine, 117
HTML document, 43 JSP expression, 121
HTML form, 93 JSP implicit objects, 126
Hybrid organization scheme, 11 JSP life cycle, 118
Hyperlink, 64 JSP out object, 145
JSP processing, 117 N

JSP request object, 127 Name attribute, 67
JSP response object, 141 Navigation, 15
JSP tags, 120 Navigation aystems, 15
Navigation, 39
K
Keyboard events, 52 O
Known item searching, 2, 19 Organisation structure, 11
Organization schemes, 8
L Organization structure, 8
Labelling information, 6 Organizational metaphors, 30
Lang attribute, 52 Overlapping elements, 112
Language attribute, 125
Layer in HTML, 87 P
Layout, 80 Page directive, 121
Legal issues with images, 78 Physical markup, 59
Link, 64 PNG, 76
Local navigation systems, 15 Positioning, 108
Lock method, 176 Precedence, 38
Log(Message), 157 Principles for good web design, 38
Logical elements, 61 print( ), 145
Logical markup, 61 Println( ), 145
Longer queries, 21 Procedures in ASP, 166
public String getMessage(), 159
M publicThrowablegetCause(), 159
Methods in out object, 145
Methods of request object, 127 Q
Methods of session object, 150 QuickTime format, 91
MIDI format, 88
MP3 format, 89
R
MPEG format, 91
Reading a cookie, 192
RealAudio format, 88
RealVideo format, 91
INDEX
243
Relative positioning, 111 Structure of HTML document, 43
removeAttribute, 153 Structuring information, 6
removeAttribute(String objName), 156 Style, 47
removeAttribute(String), 140 Supplemental/Remote navigation system,
16
S
Scriplet tag, 120 T
Search interface, 20 Tabindex attribute, 70
Searching, 15, 21 Tag specific, events, 53
Searching, 22 Taglib directive, 125
Searching systems, 18 Target attribute, 69
Selectively indexing, 26 Task-oriented organization scheme, 10
Semantic network, 74 Text level elements, 56
Semantic web, 73 Title attribute, 69
sendError(intstatus_code), 143 Title, 47
sendRedirect(String), 143 Topical organization scheme, 10
Server side image maps, 71 Troubleshooting, 187
Session attribute, 125 Types of metaphor, 29
Session object, 147 Types of navigation systems, 15
Session variables, 165 Typography, 39
session. setMaxInactiveInterval(600), 152
setAttribute(String, object), 153 U
setAttribute(String,Object), 138 Unlock method, 176
setContentType(), 142 URL rewriting, 148
setHeader(String name, String value), 143
setMaxInactiveInterval(), 152
V
Shockwave (Flash) Format, 91 Valid XML, 209
Simple / Basic search interface, 21 Visual metaphors, 29
Site index, 16
Sitemap, 16
SND format, 89
W
WAVE format, 89
Spacing, 39
Web publishing, 40
Static positioning, 112
Website design, 36
Steps of web design, 36
Website development, 41 XML schema, 214

Well formed XML, 209 XML tree, 205
White boards, 27 XPath, 223
Windows media format, 91 XPATH, 231
XSL, 223
X XSL-FO, 223, 232

XML attributes, 205 XSL-FO Areas, 233
XML element, 204 XSLT, 223

Rajiv Jain, Vei Publishing - Zero To Mastery In Web Development- No.1 Web Development Book To Become Zero To Hero In Web Development, This Amazing Web Development Book Covers A-Z Web ... (Zero To Mast.pdf

Uploaded by

Copyright:

Available Formats

You might also like

Rajiv Jain, Vei Publishing - Zero To Mastery In Web Development- No.1 Web Development Book To Become Zero To Hero In Web Development, This Amazing Web Development Book Covers A-Z Web ... (Zero To Mast.pdf

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rajiv Jain, Vei Publishing - Zero To Mastery In Web Development- No.1 Web Development Book To Become Zero To Hero In Web Development, This Amazing Web Development Book Covers A-Z Web ... (Zero To Mast.pdf

Uploaded by

Copyright:

Available Formats

Zero to Mastery in

Vayu Education of India

2/25, Ansari Road, Darya Ganj, New Delhi-110 002

First Edition: 2022

VAYU EDUCATION OF INDIA

1.10.2 Searching your website 18

Chapter 2: Dynamic HTML and Web Designing 34

Chapter 3: Style Sheets 101

3.2.4 Importing a Style Sheet 108

Chapter 4: Java Server Pages 116

Chapter 5: Active Server Pages 161

Chapter 6: Cookies 188

Chapter 7: Extensible Markup Language 199

7.5.3 Advantages of using DTD 213

1.1 Role of Information Architect

1.1.1 Need of Information Architect

1.1.2 Need of Information Architecture

• It is necessary because relevant knowledge cannot be obtained from the

1.1.3 Main responsibilities of Information Architect

1.1.4 The Consumer’s perspective

1.1.6 Who should be the information Architect?

• Insider gets diverted from his original responsibilities assigned to him.

1.2.1 Need of Team

1.3 Organizing Information

1.4 Organizational Challenges

support, human resources and information systems. To design usable and

1.5 Organizing Websites and Intranets

1.5.1 Organization schemes

This grouping of related items supports an associative learning process

1.5.2 Organisation Structure

The Relational Database Model: A Bottom-up Approach

Figure. 1.1: In hypertext systems, content chunks are

1.6 Creating Cohesive Organizaton Systems

Navigation and Searching

1.8 Types of Navigation Systems

1.8.2 Supplemental/ Remote Navigation System

1.9 Designing Elegant Navigation Systems

1.10 Searching Systems

1.10.2 Searching your website

videos, reviews, fan club information, paraphernalia, interviews, books,

1.11 Designing the Search Interface

Familiar Query Language

Reusable Result Sets

1.11.2 Searching and browsing systems should be closely integrated

1.11.3 Searching should conform to the site’s Look and feel

1.11.4 Search Options Should Be Clear

1.11.5 Choose a search Engine That Fits Users’ Needs

1.11.6 Display search Results sensibly

1. How much information should be displayed for each retrieved

1.11.8 Other Considerations

1.12 Indexing the Right Stuff

1.12.1 Indexing the entire site

1.12.2 Selectively indexing the right content

1.13 To Search or Not to Search

1.14 Grouping Content

1.15 Conceptual Design

1.15.1 Brainstorming with White Boards and Flip Charts

Sample White Board Scribblings

Where do these go: