Web Design and Internet Based Applications PDF

Web Design and Internet based Applications
Board of Studies
Prof. H. N. Verma Prof. M. K. Ghadoliya

Vice- Chancellor Director,
Jaipur National University, Jaipur School of Distance Education and Learning
Jaipur National University, Jaipur
Dr. Rajendra Takale
Prof. and Head Academics
SBPIM, Pune
___________________________________________________________________________________________
Subject Expert Panel
Dr. Ramchandra G. Pawar Ashwini Pandit

Director, SIBACA, Lonavala Subject Matter Expert
Pune
___________________________________________________________________________________________
Content Review Panel
Gaurav Modi Shubhada Pawar

Subject Matter Expert Subject Matter Expert
___________________________________________________________________________________________
Copyright ©
This book contains the course content for Web Design and Internet based Applications.
First Edition 2013
Printed by
Universal Training Solutions Private Limited
Address
05th Floor, I-Space,
Bavdhan, Pune 411021.
All rights reserved. This book or any portion thereof may not, in any form or by any means including electronic
or mechanical or photocopying or recording, be reproduced or distributed or transmitted or stored in a retrieval
system or be broadcasted or transmitted.
___________________________________________________________________________________________
Index
I. Content....................................................................... II
II. List of Figures......................................................... VII
III. List of Tables........................................................VIII
IV. Abbreviations..........................................................IX
V. Case Study.............................................................. 176
VI. Bibliography.......................................................... 181
VII. Self Assessment Answers................................... 184
Book at a Glance
I
Contents
Chapter I........................................................................................................................................................ 1
Internet and Internet Connectivity............................................................................................................. 1
Aim................................................................................................................................................................. 1
Objectives....................................................................................................................................................... 1
Learning outcome........................................................................................................................................... 1
1.1 Introduction............................................................................................................................................... 2
1.2 Internet...................................................................................................................................................... 2
1.3 Growth of the Internet............................................................................................................................... 3
1.4 Safeguards................................................................................................................................................. 5
1.5 Client Server System................................................................................................................................. 5
1.5.1 Servers Should be Powerful and Reliable................................................................................. 6
1.5.2 Intricacies Involved................................................................................................................... 6
1.5.3 Active Close and Active Open.................................................................................................. 7
1.5.4 Sockets...................................................................................................................................... 7
1.6 Internet Domains and Addresses Name System....................................................................................... 7
1.7 TCP/IP Internet Domain Names............................................................................................................... 8
1.7.1 Official and Unofficial Internet Domain Names...................................................................... 8
1.7.2 Mapping Domain Names to Addresses................................................................................... 10
1.7.3 Domain Name Resolution....................................................................................................... 10
1.7.4 Name Caching..........................................................................................................................11
1.7.5 Time to Live............................................................................................................................ 12
1.7.6 Abbreviation of Domain Names............................................................................................. 12
1.8 Dialup Networking.................................................................................................................................. 12
1.8.1 Access Criteria........................................................................................................................ 13
1.9 The Internet Service Provider (ISP)........................................................................................................ 13
1.10 Newer Technologies.............................................................................................................................. 14
Summary...................................................................................................................................................... 15
References.................................................................................................................................................... 15
Recommended Reading.............................................................................................................................. 16
Self Assessment............................................................................................................................................ 17
Chapter II.................................................................................................................................................... 19
Introduction to Web Design....................................................................................................................... 19
Aim............................................................................................................................................................... 19
Objectives..................................................................................................................................................... 19
Learning outcome......................................................................................................................................... 19
2.1 What is Web Designing?......................................................................................................................... 20
2.2 Web Design Basics.................................................................................................................................. 20
2.3 Elements of Good Design....................................................................................................................... 21
2.3.1 The Elements of Design.......................................................................................................... 22
2.3.2 The Principles of Design......................................................................................................... 25
2.3.3 The Web is Not Print............................................................................................................... 28
Summary...................................................................................................................................................... 31
References.................................................................................................................................................... 31
Self Assessment . ......................................................................................................................................... 33
Chapter III................................................................................................................................................... 35
Basics of Web Designing . .......................................................................................................................... 35
Aim............................................................................................................................................................... 35
Objectives..................................................................................................................................................... 35
3.1 Introduction . .......................................................................................................................................... 36
II
3.2 Methodology........................................................................................................................................... 36
3.3 Getting Started with Web Designing ..................................................................................................... 37
3.4 Step 1: HTML......................................................................................................................................... 37
3.5 Step 2: WYSIWYG Editors.................................................................................................................... 38
3.6 Recommendations for Software and Tool for Designing Web............................................................... 40
3.7 Step 3: Hosting........................................................................................................................................ 40
3.7.1 Free Host Servers.................................................................................................................... 40
3.7.2 Paid Host Servers.................................................................................................................... 41
3.8 Step 4: Publish (upload).......................................................................................................................... 41
Summary .................................................................................................................................................... 43
References.................................................................................................................................................... 43
Self Assessment . ......................................................................................................................................... 44
Chapter IV................................................................................................................................................... 46
Internet Services.......................................................................................................................................... 46
Aim............................................................................................................................................................... 46
Objectives..................................................................................................................................................... 46
4.1 Introduction: The Internet....................................................................................................................... 47
4.2 World Wide Web (WWW)...................................................................................................................... 47
4.3 Web Browsing......................................................................................................................................... 48
4.3.1 Browser Software Access The Web........................................................................................ 48
4.3.2 Start Up a Web Browser......................................................................................................... 48
4.3.3 Using the Web Browser.......................................................................................................... 48
4.3.4 Bookmarks.............................................................................................................................. 49
4.3.5 Cookies................................................................................................................................... 50
4.3.6 Browser in Detail.................................................................................................................... 50
4.3.7 The Elements of Web Navigation........................................................................................... 52
4.3.8 Searching................................................................................................................................ 54
4.4 News groups............................................................................................................................................ 56
4.4.1 News Group Hierarchies......................................................................................................... 56
4.4.2 Types of Newsgroups.............................................................................................................. 56
4.4.3 How Newsgroups Work?........................................................................................................ 57
4.4.4 Binary Newsgroups................................................................................................................. 57
4.5 Mailing Lists........................................................................................................................................... 57
4.6 Chat Rooms............................................................................................................................................. 57
4.7 E-Mail..................................................................................................................................................... 58
4.7.1 E-Mail Operation:................................................................................................................... 59
4.8 Internet Fax............................................................................................................................................. 60
4.9 File Transfer Protocol (FTP)................................................................................................................... 61
4.9.1 FTP Commands...................................................................................................................... 61
4.9.2 FTP File Types........................................................................................................................ 61
4.9.3 FTP Login............................................................................................................................... 61
4.10 TELNET 63
Summary...................................................................................................................................................... 65
References.................................................................................................................................................... 65
Self Assessment............................................................................................................................................ 67
Chapter V..................................................................................................................................................... 69
HTML.......................................................................................................................................................... 69
Aim............................................................................................................................................................... 69
Objectives..................................................................................................................................................... 69
III
5.1 Introduction............................................................................................................................................. 70
5.2 HTML .................................................................................................................................................... 70
5.3 Formatting............................................................................................................................................... 71
5.3.1 Text Formatting....................................................................................................................... 71
5.3.2 Citations, Quotations, and Definition Tags............................................................................. 72
5.3.3 Character Entities.................................................................................................................... 73
5.4 Hyperlinks............................................................................................................................................... 73
5.5 URLs....................................................................................................................................................... 73
5.6 Background Graphics.............................................................................................................................. 74
5.6.1 Background Colour................................................................................................................. 74
5.7 External Images, Sounds, and Animations............................................................................................. 74
5.8 Frames..................................................................................................................................................... 75
5.9 Tables...................................................................................................................................................... 77
5.9.1 Tables for Non tabular Information........................................................................................ 80
5.10 Lists....................................................................................................................................................... 81
5.11 Forms.................................................................................................................................................... 84
5.12 Image maps........................................................................................................................................... 88
5.12.1 The Usemap Attribute in An IMG Element.......................................................................... 88
5.13 The Common Gateway Interface (CGI)............................................................................................... 89
5.13.1 Server-Side Processing......................................................................................................... 89
5.13.2 Structure of a CGI Script...................................................................................................... 90
5.13.3 CGI For Mail........................................................................................................................ 91
5.13.4 Security................................................................................................................................. 91
5.14 Cascading Style Sheets (CSS).............................................................................................................. 92
5.14.1 Adding CSS to HTML Documents....................................................................................... 92
Summary.................................................................................................................................................... 102
References.................................................................................................................................................. 102
Recommended Reading............................................................................................................................ 102
Self Assessment.......................................................................................................................................... 103
Chapter VI................................................................................................................................................. 105

Client and Serverside Scripting............................................................................................................... 105
Aim............................................................................................................................................................. 105
Objectives................................................................................................................................................... 105
Learning outcome....................................................................................................................................... 105
6.1 Introduction........................................................................................................................................... 106
6.2 Java Server Pages (JSP)........................................................................................................................ 106
6.2.1 JSP Environment................................................................................................................... 108
6.2.2 Using JSP Tags...................................................................................................................... 108
6.2.3 Javabeans...............................................................................................................................110
6.2.4 Implicit Objects......................................................................................................................111
6.3 JavaScript...............................................................................................................................................111
6.3.1 Elements of JavaScript...........................................................................................................112
6.3.2 JavaScript Objects:................................................................................................................115
6.3.3 Document Object Model (Dom)............................................................................................115
6.4 Web Technologies................................................................................................................................. 132
Summary.................................................................................................................................................... 134
References.................................................................................................................................................. 134
Self Assessment.......................................................................................................................................... 136
IV
Chapter VII............................................................................................................................................... 138
Web 2.0....................................................................................................................................................... 138
Aim............................................................................................................................................................. 138
Objectives................................................................................................................................................... 138
7.1 Introduction: Web 2.0........................................................................................................................... 139
7.2 The Internet as a Platform..................................................................................................................... 139
7.3 Social Networks and User Participation............................................................................................... 140
7.4 Significance of Web 2.0........................................................................................................................ 140
7.5 Web 2.0 in the Workplace: Enterprise 2.0............................................................................................. 141
7.6 Hackers have Changed.......................................................................................................................... 142
7.7 Organisations are not Prepared for Web 2.0 Threats............................................................................ 144
7.8 How Security Challenges Change with Web 2.0?................................................................................ 144
7.9 Compromised Websites......................................................................................................................... 145
7.10 Malware Access.................................................................................................................................. 146
7.10.1 New Client-Side Technologies .......................................................................................... 146
7.10.2 XML Syndication : Feeds for Wikis and Blogs.................................................................. 146
7.11 About Trackbacks................................................................................................................................ 147
7.11.1 Mashups.............................................................................................................................. 147
7.11.2 Data Leak Vulnerabilities.................................................................................................... 148
7.12 Blue Coat Web 2.0 Layered Security Solutions.................................................................................. 148
7.13 Preventing Malware: Layered “Defense in Depth”............................................................................ 149
7.14 Dynamic URL Filtering with WebPulse and WebFilter...................................................................... 150
7.14.1 WebPulse Ecosystem URL Categorising............................................................................ 151
7.14.2 Web Filter: Filtering & Blocking Unwanted Web Content................................................. 151
Summary.................................................................................................................................................... 154
References.................................................................................................................................................. 154
Self Assessment.......................................................................................................................................... 156
Chapter VIII.............................................................................................................................................. 158

Dreamweaver............................................................................................................................................. 158
Aim............................................................................................................................................................. 158
Objectives................................................................................................................................................... 158
8.1 Introduction........................................................................................................................................... 159
8.2 Getting Started...................................................................................................................................... 159
8.3 Site Management.................................................................................................................................. 160
8.3.1 Restricting Access to Your Pages.......................................................................................... 161
8.4 Creating a New Folder.......................................................................................................................... 162
8.5 Creating a New Page............................................................................................................................. 163
8.5.1 Entering Text......................................................................................................................... 163
8.5.2 Page Title.............................................................................................................................. 164
8.5.3 Saving and Testing Your Page.............................................................................................. 164
8.5.4 Inserting Images.................................................................................................................... 164
8.6 Editing Images...................................................................................................................................... 165
8.7 Adding Links within the Page, to other Pages and to Files.................................................................. 166
8.7.1 Linking within the Page........................................................................................................ 166
8.8 Tables.................................................................................................................................................... 167
8.9 Linking to Other Resources.................................................................................................................. 168
8.10 HTML Editing in Code View.............................................................................................................. 169
8.10.1 Adding Text......................................................................................................................... 169
8.10.2 Creating Lists...................................................................................................................... 170
8.10.3 Linking to Sites................................................................................................................... 170
8.10.4 Adding Comments.............................................................................................................. 170
V
8.10.5 Roundtrip HTML Overview............................................................................................... 171
8.10.6 Cleaning up HTML............................................................................................................. 171
8.10.7 Clean up Word HTML........................................................................................................ 171
Summary.................................................................................................................................................... 173
References.................................................................................................................................................. 173
Self Assessment.......................................................................................................................................... 174
VI
List of Figures
Fig. 1.1 Growth of internet............................................................................................................................. 3
Fig. 1.2 A hierarchical illustration of the example.......................................................................................... 8
Fig. 1.3 The DNS top level hierarchy............................................................................................................. 9
Fig. 1.4 Domain name resolution...................................................................................................................11
Fig. 1.5 Accessing internet through dialup................................................................................................... 12
Fig. 2.1 Web design....................................................................................................................................... 21
Fig. 2.2 Elements of good design.................................................................................................................. 21
Fig. 2.3 Element design ............................................................................................................................... 22
Fig. 2.4 Principles of design......................................................................................................................... 25
Fig. 2.5 Working with customers.................................................................................................................. 29
Fig. 2.6 Design techniques............................................................................................................................ 30
Fig. 3.1 Elements of web design . ................................................................................................................ 36
Fig. 3.2 WYSIWYG Editors......................................................................................................................... 39
Fig. 3.3 Publish............................................................................................................................................. 42
Fig. 4.1 World Wide Web.............................................................................................................................. 47
Fig. 4.2 A browsing service using client server interaction.......................................................................... 49
Fig. 4.3 Email operation................................................................................................................................ 60
Fig. 4.4 FTP operation.................................................................................................................................. 62
Fig. 4.5 Telnet session................................................................................................................................... 63
Fig. 5.1 Browser output for the simple program........................................................................................... 70
Fig. 5.2 Computer output tags...................................................................................................................... 72
Fig. 5.3 Browser output for different computer tags.................................................................................... 72
Fig. 5.4 Vertical frame set............................................................................................................................. 76
Fig. 5.5 Horizontal frame set........................................................................................................................ 76
Fig. 5.6 Mixed frame set............................................................................................................................... 77
Fig. 5.7 Inline frames.................................................................................................................................... 77
Fig. 5.8 Browser output of table with caption.............................................................................................. 78
Fig. 5.9 Output for the program.................................................................................................................... 81
Fig. 6.1 A web server that supports JSP files.............................................................................................. 106
Fig. 6.2 JSP parsing by web server............................................................................................................. 107
Fig. 7.1 An enterprise without boundries.................................................................................................... 141
Fig. 7.2 S
SL Provides a Private Link for Legitimate Applications, and Malware,
Confidential Data, Unsanctioned Traffic....................................................................................... 147
Fig. 7.3 ProxyAV plus ProxySG = Layered Malware Defense.................................................................. 148
Fig. 7.4 WebPulse ecosystem..................................................................................................................... 151
VII
List of Tables
Table 1.1 Examples of domain........................................................................................................................ 9
Table 4.1 Browser functions......................................................................................................................... 51
Table 4.2 Internet Explorer Key Sequence................................................................................................... 52
Table 5.1 Common file types and their extensions....................................................................................... 75
Table 5.2 Table elements description............................................................................................................ 79
Table 5.3 Table attribute description............................................................................................................. 79
Table 6.1 Different attributes...................................................................................................................... 109
Table 6.2 Implicit objects.............................................................................................................................111
Table 6.3 Most used event handlers.............................................................................................................118
Table 6.4 Typical output from the browser................................................................................................. 128
VIII
Abbreviations
DARPA - Department of Defence Advanced Research Projects Agency
ISOC - Internet Society
NOS - Network Operating System
DNS - Domain Name Service
IP - Internet Protocol
TTL - Time to Live
ISP - Internet Service Provider
FDM - Frequency Domain Multiplexing
ASDL - Asymmetric Digital Subscriber Line
WWW - World Wide Web
HTTP - Hyper Text Transfer Protocol
HTML - HyperText Markup Language
W3C - World Wide Web Consortium
URL - Uniform Resource Locator
IRC - Internet Relay Chat
FTP - File Transfer Protocol
GUI - Graphic User Interface
CSS - Cascading Style Sheets
IIS - Internet Information Server
JSP - Java Server Pages
DOM - Document Object Model
RSS - Real Simple Syndication
CSS - Cascading Style Sheets
AIR - Adobe Integrated Runtime
FBI - Federal Bureau of Investigation
GTISC - Georgia Tech Information Security Centre
C&C - Command & Control
MMC - Malicious Mobile Code
HMRC - Her Majesty’s Revenue and Customs
SWG - Secure Web Gateway
DRTR - Dynamic Real-Time Rating
BCWF - Blue Coat Web Filter
ASP - Active Server Pages
NPCS - Networked PC Service
IX
Chapter I
Internet and Internet Connectivity
Aim
The aim of this chapter is to:
• introduce internet
• elucidate the emergence of internet
• explain the growth of internet
Objectives
The objectives of this chapter are to:
• recognise internet domain names
• determine internet domains and address name system
• elucidate client server system
Learning outcome
At the end of this chapter, you will be able to:
• differentiate between official and unofficial internet domain names
• identify the newer technologies used
• understand dialup networking
1
1.1 Introduction
The Internet is a loose interconnection of thousands of computer networks reaching millions of people all over the
world. Although, its original purpose was to provide researchers with access to expensive hardware resources, the
Internet has demonstrated such speed and effectiveness as a communications medium that has gone beyond the
original mission. The original mission was actually meant for scientists to share information among themselves. It
has, in recent years, grown so large and powerful that it is now an information and communication tool that anybody
cannot afford to ignore.
1.2 Internet
The Internet Ocean was created in 1969 with the birth of ARPANET, an experimental project of the U.S. Department
of Defence Advanced Research Projects Agency (DARPA). It had a simple vision, to explore experimental networking
technologies that would link researchers with remote resources such as large computer systems and databases. The
success of ARPANET helped cultivate numerous other networking initiatives, which grew up intertwined; 25 years
later, these have evolved into an ever expanding, complex organism comprising tens of millions of people and tens
of thousands of networks.
Most users describe the Internet (or the “Net”) as a “network of networks”; it appears to stretch forever. It doesn’t
just connect you and another computer; it connects you and all other Internet-connected computers. Don’t think of
the Internet as just a bunch of computers, though. It is a perpetually expanding universe with its own geography,
“weather,” and dynamic cultures. In this cyber-sphere, people in geographically distant lands communicate across
time zones without ever seeing each other and information is available 24 hours a day from thousands of places. As
a result, the Internet is overflowing with useful resources and with people climbing aboard.
According to the Internet Society (ISOC), a professional organisation of Internet developers, influencers, and users,
as of in early 2005, the Internet reached more than 100 countries consisting of 1 million networks and 325 million
computers.
The bulk of Internet computers and networks still belong to the research and education communities. This is not
surprising, because the Internet arose from a physics laboratory. However, many universities are teaming up with
businesses to develop online catalogs and archives. And, according to a journal survey, 31 percent of the networks
belong to businesses. Of the number of registered but not necessarily connected networks, 51 percent were commercial.
There’s definitely a rising trend in commercial activity. Many businesses have realised that they can link their
enterprise networks to the Internet and gain instant access to their customers. Some market research indicates that
online services in general make up almost a billion-dollar industry, with an estimated 25 percent per year growth.
The types of resources accessible via the Internet are growing at an astounding rate. The term resource describes
anything you can access on the Internet, no matter where it’s physically located.
Examples of some Internet resources are:

• An online newspaper= www.thehindu.com
• Weather information= www.weather.com
• Radio= www.broadcast.com
• Online Book store= www.amazon.com
• Music clips= www.mp3.com
• Search by topic= www.google.com
• Exam results= www.ouresults.com and many more
2
1.3 Growth of the Internet
350,000,000
300,000,000
250,000,000
200,000,000
150,000,000
100,000,000
50,000,000
0
Jan-94
Jan-95
Jan-96
Jan-97
Jan-98
Jan-99
Jan-00
Jan-01
Jan-02
Jan-03
Jan-04
Jan-05
Fig. 1.1 Growth of internet
It’s hard to imagine how the Internet has grown so fast and been so successful without some ambitious organisation or
individual managing the project. Yet no one has a monopoly on access to or use of the Internet; there’s no monolithic
empire called Internet, Inc., controlling accounts and application development or roping off the backstage parts of
cyberspace.
One of the reasons for the Internet to be so successful is the commitment of its developers to make Internet technology
an “open system”. That is virtually any machine can access the Internet. It is a machine independent technology.
Standards that the Internet uses are known as the TCP/IP protocol suite.
Standards play a big part in everyday life. Camera film always fits in your camera, and loose paper bought at the
stationary shop fits in your folder. Libraries catalog books according to a universal standard system, so that once
you learn it; you can walk into any library in the world and find the books you need.
On the contrary, things that don’t conform to standards can make your life miserable. Standards are just as important
in the computer and networking world. Without open standards, only computers from the same vendor could talk
to one another. Computers and networks that conform to the same communications standards are able to converse
with each other regardless of brand.
The Internet system does not have a central system. Rather, all the networks and computers act as one-to-one in the
exchange of information and communication among themselves. The technology that makes it happen is known as
“internetworking”; it creates universality among heterogeneous systems, enabling the networks and computers to
communicate. It is an example of distributed system.
Fundamentally, the exchange of information in a network revolves around the concept of a packet, a basic building
block or a digital brick. All information and communication transmitted on the Internet are broken into packets, each
of which is considered an independent entity. The packets are then individually routed from network to network
until they reach their destination, where they are reassembled and presented to the user or computer process.
3
This method of networking is very flexible and robust. It allows diverse computers and systems to communicate
by means of networking software, not by hardware. If a network goes “down” meaning it isn’t available to transfer
information the packets can be rerouted to other networks in many cases. This dynamic alternate routing of information
creates a very reliable means of communication. Indeed, that was the intention of the network engineers developing
this technology. They wanted a network that would continue to function even if parts of it were damaged.
While most beginners probably don’t care about these standards and technical details, an understanding of the
underlying infrastructure will help in learning to use the Internet properly and in taking full advantage of its powerful
capabilities. It is very fascinating how separate computers and networks fit together will give the net culture the
sharing, cooperative spirit that is inherent in the Internet.
Open standards enable businesses and individuals to compete on a level playing field in developing networking
software and products. But “open networking” extends beyond the development of networking protocols and
products. Once you, an Internet user, you have access to the same resources as the rest of the millions of Internet
users, wherever you are located.
The phrase “Right to know” often comes up in discussions about the Internet, which is, indeed, a truly democratic
forum. The network doesn’t care if you’re a millionaire, a farmer or a big scientist - your requests and comments
are handled in the same way, not on your social or financial status!
It’s also never been so easy to be both a consumer and a producer of services. If you’re ambitious enough and aspire
to be an entrepreneur who provides commercial services or Internet access, there’s nothing to prevent you (of course
you have to fulfil some formalities). Once your network is directly hooked into the Internet, all the computers on
that network are accessible from every other Internet-connected computer.
This environment empowers the individual; it encourages and stimulates participation, imagination, and innovation.
There are many successful Indian names are also there who have leveraged the Internet to do great heights.
If you do not have access to a high-speed Internet connection or to a large multi-user computer, that’s not a problem.
Already there are people offering rental space on their Internet-connected computers and disks. You can lease “office
space” from “office parks” in cyberspace and set up shop. Your virtual storefront may be thousands of miles and
two countries away, but it’s probably a few seconds hyper drive from every location. Such a convenience is a given
on the Internet.
The Internet has had a positive effect on the democratisation of society, making it more difficult to bottle up and
suppress information. Network support of global freedom of information contributes to freedom of thought and to
social and political freedom. The advantages of Internet in a nutshell are as follows:
• Communication tool: Data, voice, video can be instantly exchanged thanks to high-speed networks.
• Teaching aid: Many complex concepts were easily explained using graphics. Wealth of knowledge. Business
tool: E-commerce has totally changed the way we were doing business
• Information tool: Ocean full of information on any particular topic thanks to the powerful search engines.
E-governance: Many government organisations already started using for collection of revenue, tax and so on;
Imagine earlier- even to pay electricity bill it was total one day’s job sometimes!
• Travel: Internet is useful for advance reservation, tour planning and so on. Medical & health: A specialist
doctor’s services can be availed over net
The possibilities with the Internet are endless. Some believe that it is only a matter of time before the Internet
displaces the telephone and television as the preeminent media for long distance communication.
4
With all goodies about the Internet there is a need for regulation of the Internet for a number of reasons:
• To provide common standards and security for the global use of community.
• To provide protection (copyright) for knowledge providers.
• To balance freedom of speech against offensive and libelous use.
• To encourage educational and social beneficial uses.
• To protect against anti-social uses by criminals and by terrorists.
• To protect countries, languages and cultures, ensuring access for rich and poor individuals and countries.
The Internet in its current state has certain shortcomings also including:
• Insecure transactions though secure protocols are being considered
• Protocols that provide minimal or non-existent guarantees of service quality.
• No mechanisms for protecting the intellectual property
• No support for interpolation or data interchange standard.
1.4 Safeguards
As you use the Internet, sometimes you may run into problems. Popup windows may appear on your screen. Strange
email messages might come asking for bank information. You wonder if it is OK to order things with your credit
card. You might begin wonder if it is safe to use the Internet at all.
The truth is that it is not safe to use the Internet if you are not aware of potential problems, don’t take preventative
measures, don’t use caution, and don’t take responsibility for your actions.
The following are few tips:

• Protect yourself from security issues: Keep your computer’s operating system updated. For example, if you are
using Microsoft Windows, visit windowsupdate.microsoft.com and follow the instructions. You can also keep the
automatic update feature of your computer turned on so that security updates are downloaded automatically.
• Install or use Spam protection: Visit the Web site of your Internet Service Provider (the one who gives you Internet
connection) and look for information they have about preventing spam and viruses from reaching your email.
• Enable popup blocking features of your Web browser (see the Help section of your Web browser) or install popup
blocking software: Popups can be annoying and can also lure you into scams or other problems. Your Internet
Service provider may also have special assistance or software for you to use to block popup windows.
• Enable cookie protection in your Web browser: (Cookie is a piece of information that is automatically conversed
with webserver whenever someone visits a web site. Some times it may carry very sensitive information about
your system!) You shouldn’t be afraid of cookies—they are useful for many ways but consider accepting cookies
from only known, trusted Web sites.
• Protect yourself from potential loss of data and create backup copies of your data regularly: If your computer
crashes or if there is a fire or flood in your home, you don’t want to lose important personal information. Copy
information you don’t want to lose onto a disk and store the disk in a secure place away from your computer.
Be sure to password protect the disk if it contains sensitive information or keep the disk in a safe place.
1.5 Client Server System

The Internet is based on client server model. To accomplish a given task there must be a client server pair. There
are many ways in which the client server model can operate. The most common being socket interface.
5
Before the advent of networking concepts, mainframe computers extended their power to individual computers
through terminal connections and they were sharing the mainframe on time slot basis. A typical multi-user operating
system on the mainframe was taking care of all this. Those were days when all the computer power in one central
location called mainframe that catered the needs of every other through dumb terminal. There wasn’t any computing
power in the terminal systems except displaying the output.
Eventually, however, some of the hardware personnel discovered that personal computers (PCs) provided more power
at substantially less cost than the mainframe, and the actual computing was shifted down to the user terminal. The
powerful mainframe computer was left to do nothing but supply data (and sometimes program) files to the PCs. Thus,
earlier dumb terminals have become intelligent terminals. PCs that could manage the shared resources required by
the system replaced the costly mainframe. Because the special PC served the needs of the other PCs, it was called
a SERVER. The corresponding term for the desktop PC is client. This form of network link is, consequently, called
a client-server model. The server in a client-server network runs special software (the network operating system
NOS).
1.5.1 Servers Should be Powerful and Reliable

Typically, the server is a special PC more powerful than the rest in the network. The most important feature of a
server is storage. Because its file space is shared by many perhaps hundreds of PCs, it requires huge amounts of
mass storage. In addition, the server is designed to be more reliable because all the PCs in the network depend on
its proper functioning. If it fails, the entire network suffers.
Servers are designed to be fault-tolerant. That is, they will continue to run without interruption despite a fault, such as
the failure of a hardware subsystem. Most servers use the special powerful microprocessors, not from need but because
the price difference is less once the additional ruggedness and storage are factored in and because most hardware
personnel think that the single most important PC in a network should be the most powerful in all aspects.
There are several ways that a computer can ask for the services of another computer. A computer runs a program
to either request a service from another computer or provide a service to another computer. This means the two
computers, connected by an Internet, must each run a program, one to provide a service and the other to request
a service. Thus, if we want to use the services available on the Internet, application programs, running at both
end computers and communicating with each other are needed. In an Internet it is the application programs that
communicate with each other, not computers or users.
1.5.2 Intricacies Involved

Enabling communications between two application programs, one running at local site and other running at remote
site seem simple but there are many intricacies involved:
• Should both applications provide services and request services? Normally client program running on local
machines request services, server program at the remote machine provides the service.
• Should application program provide services only to specific clients or all?
• Normally server provides service for any client not a particular client
• When should a client program run and when should a server program run?
• Generally the server program, which provides service, should run all the time because it doesn’t know when
its services will be requested.
• Should there be one application program for each type of service or one universal application program that can
cater to different requests?
In the Internet there are different types of services. All standardised services will have different application programs
where as services, which are customised should have one generic application program.
6
1.5.3 Active Close and Active Open
A client program is initiated by the user (or it can be another application program) and terminates when the service
is complete. A client opens the communication channel using the IP address of the remote host and the well-known
port address of the specific server program running on the machine. Thus, the channel becomes active open. After
becoming active open client requests and subsequently receives the needed response from the server. The request-
response may be repeated several times but still it is called a finite process and eventually comes to an end. At that
instant the client closes the communication channel becomes active close.
A server program on the other hand is an infinite program. When it starts, it runs infinitely unless a problem arises.
It waits for incoming requests from clients, when a request arrives, it responds to the request in two different ways
namely iteratively or concurrently.
Running clients iteratively means running them one by one. One client must start, run, and terminate before the
machine can start another client. Most computers today allow concurrent clients that are two or more clients can
run at the same time.
The server can use connectionless or connection-oriented services. An iterative server normally uses UDP
connectionless service. The server uses one single port (generally a well-known port). All the packets arriving at
this port wait in line to be served.
In connection oriented concurrent server TCP is used. In this situation, many ports are needed but a server can use
only one well-known port and several ephemeral port. A client can make its initial approach to this port via well-
known port. Once a connection is established, the data transfer takes place via ephemeral port. The well-known port
is always reserved for making a new connection with the client.
1.5.4 Sockets
When two processes communicate with each other, they need a socket at both ends. A socket is nothing but a special
type of structure. A typical example has five fields:
• Family: This field defines the protocol group IP4, IP6, UNIX protocols and so on.
• Type: This field defines the type of socket. There are three types of sockets. One is stream socket other is pocket
socket and a raw socket.
• Protocol: This field is set to zero for TCP and UDP.
• Local Socket Address: It defines a combination of IP address and port address.
• Remote Socket Address: This is combination of remote IP address and port address of remote application.
1.6 Internet Domains and Addresses Name System

The Domain Name Service (DNS) is a network service that translates domain names to IP addresses. It helps Internet
users to use the net more easily by allowing them to specify meaningful names to web sites and/or other users they
want to communicate with.
When computers talk to each other via the Internet, they use the IP protocol. The Internet Protocol (IP) distinguishes
hosts from each other by an IP address, which is a string of numbers appended to each other and separated by periods.
An example of such a string might be 197.15.3.2.
The IP addresses are unique, which means that each host has its own IP address, which is different from all other IP
addresses in the world. However, these IP address numbers are hard to remember and we prefer to use meaningful
names instead, which we are used to in the everyday life.
7
The DNS is needed by applications to convert humans’ meaningful names into computer meaningful names (IP
addresses) and provide the final user an easier way to communicate via the Internet. Humans prefer names while
computer prefer numbers. Each computer name consists of a sequence of alphanumeric segments separated by
periods. For example, a computer name might be: www.yahoo.com
A computer name is also called a ‘Domain Name’. Domain names are hierarchical, with the most significant part
of the name on the right. The left-most segment of a name (www in the example) is the name of an individual
computer. Other segments of the full name identify the group that owns the individual name. In the above example,
the individual name World Wide Web is owned by the yahoo group of names, which is itself owned by the com
group (which holds a lot of company names).
The Domain Name System does not specify the exact number of segments in a name. Each organisation can choose
its own names hierarchy and specify as many segments as it needs. However, all names should be under familiar
top-level domains.
www.osmania.ac.in
in root
ac
staff.ormania.ac.in
ormania
staff
Fig. 1.2 A hierarchical illustration of the example
1.7 TCP/IP Internet Domain Names

The mechanism that implements a machine name hierarchy for TCP/IP Internet is called the Domain Name System
(DNS). DNS has two independent aspects:
• It specifies the name syntax and rules for delegating authority over names
• It specifies the implementation of a distributed computing system that efficiently maps names to addresses.
The domain name system uses a hierarchical naming scheme known as domain names. A domain name consists of
a sequence of sub-names separated by a delimiter character, the period. The domain calls each section a label.
The domain name mail.yahoo.com contains three labels: mail, yahoo, and com. Any suffix of a label in a domain
name is also called a domain. In the above example the lowest level domain is yahoo.com, the second level domain
is mail.yahoo.com and the top level domain is com. Writing domain names with the local label first and the top
domain last makes it possible to compress messages that contain multiple domain names.
1.7.1 Official and Unofficial Internet Domain Names

Most users of the domain technology follow the hierarchical labels used by the official Internet domain system.
There are two reasons:
• The Internet scheme can accommodate a wide variety of organisations, and
• Allows each group to choose between geographical or organisational naming hierarchies.
Most sites follow the Internet scheme so they can attach their TCP/IP installations to the global Internet without
changing names.
8
The Internet authority has chosen to partition its top level into the following domains:
Domain Name Meaning

.COM Commercial organisations
.EDU Educational institutions
.GOV Government institutions
.MIL Military groups
.NET Major network support centers
.ORG Organisations other than those above
.ARPA Temporary ARPANET domain
.INT International organisations
Country code Each country (.in for India, .au for Australia etc)
Table 1.1 Examples of domain
Root
com edu gov mil net org arpa int country

code
Fig. 1.3 The DNS top level hierarchy
The top-level names permit two completely different naming hierarchies: geographic and organisational. The
geographic scheme divides the universe of machines by country. Each country is assigned its own top-level domain
with the country’s international 2-letter identifier as its label.
As an alternative to the geographic hierarchy, the top-level domain also allows organisations to be grouped by
organisational type. An organisation chooses how it wishes to be registered and request approval. The central authority
reviews the application and assigns the organisation a sub domain under one of the existing top-level domains.
The domain name system is quite general because it allows multiple naming hierarchies to be embedded in one
system. In order to allow clients to distinguish among multiple kinds of entries, each named item stored in the system
is assigned a type the specifies whether it is the address of a machine, a mailbox, a user, and so on.
When a client asks the domain system to resolve a name, it must specify the type of answer desired. For example,
when an electronic mail application uses the domain system to resolve a name, it specifies that the answer should
be the address of a mail exchanger.
9
In addition to specifying the type of answer sought, the domain system allows the client to specify the protocol
family to use.
The domain system partitions the entire set of names by class, allowing a single database to store mappings for
multiple protocol suites. The syntax of a name does not determine what type of object it names or the class of protocol
suite. In particular, the number of labels in a name does not determine whether the name refers to an individual
object or a domain.
1.7.2 Mapping Domain Names to Addresses

The domain name scheme includes an efficient, reliable, general purpose, distributed system for mapping names
to addresses. The system is distributed in the sense, meaning that a set of servers operating at multiple sites co-
operatively solve the mapping problem. It is efficient in the sense that most names can be mapped locally; only a
few require Internet traffic. It is general purpose because it is not restricted to machine names.
Finally, it is reliable in that no single machine failure will prevent the system from operating correctly.
The domain mechanism for mapping names to addresses consists of independent, co-operative systems called name
servers. A name server is a server program that supplies name-to-address translation, mapping from domain names
to IP number addresses. The client software, called a name resolver, uses one or more name servers when translating
a name. The easiest way to understand how domain servers work is to imagine them arranged in a tree structure that
corresponds to the naming hierarchy.
The root of the tree is a server that recognises the top-level domains and knows which server resolves each domain.
Given name to resolve, the root can choose the correct server for that name. At the next level, a set of name servers
each provides answers for one top-level domain (example, edu). A server at this level knows, which servers can
resolve each of the sub domains under its domain.
The conceptual tree continues with one server at each level for which a sub domain has been defined. The servers
may be located at arbitrary locations on an Internet. The server uses the Internet for communication.
1.7.3 Domain Name Resolution

Domain name resolution proceeds top-down, starting with the root name server and proceeding to servers located
at the leaves of the tree. There are two ways to use the domain server system:
• Contacting name servers one at a time
• Asking the name server system to perform the complete translation
In either case, the client software forms a domain name query that contains the name to be resolved, a declaration
of the class name, the type of answer desired, and a code that specifies whether the name server should translate the
name completely. It sends the query to a name server for resolution.
When a domain name server receives a query, it checks to see if the name lies in the sub domain for which it is an
authority. If so, it translates the name to an address according to its database, and appends an answer to the query
before sending it back to the client. If the name server cannot resolve the name completely, it checks to see what
type of interaction the client specified. If the client requested complete translation, the server contacts a domain
name server that can resolve the name and returns the answer to the client.
If the client requested non-recursive resolution, the name server cannot supply an answer. It generates a reply that
specifies the name server the client should contact next to resolve the name. A client must know how to contact at
least one name server. To ensure that a domain name server can reach others, the domain system requires that each
server know the address of at least one root server. In addition, a server may know the address of a server for the
domain immediately above it.
10
Domain name servers use a well-known protocol port for all communication, so clients know how to communicate
with a server once they know the IP address of the machine in which the server executes. There is no standard way
for hosts to locate a machine in the local environment on which a name server runs; that is left to whoever designs
the client software.
In some systems, the address of the machine that supplies domain name service is bound into application programs
at compile time, while in others, the address is configured into the operating system at start-up. In others, the
administrator places the address of a server in a file on secondary storage.
client
Wide
Local Area Area
DNS DNS DNS
client
client
Fig. 1.4 Domain name resolution
It may seem natural to resolve queries by working down the tree of the name servers, but it can lead to inefficiencies
for three reasons:
• Most name resolution refers to local names, those found within the same subdivision of the name space as the
machine from which the request originates. Tracing a path to contact the local authority would be inefficient.
• If each name resolution always started by contacting the topmost level of the hierarchy, the machine at that
point would become overloaded.
• Failure of machines at the topmost levels would prevent name resolution, even if the local authority could
resolve the name.
These ideas lead to a two-step name resolution mechanism that preserves the administrative hierarchy but permits
efficient translation.
In the two-step name resolution process, resolution begins with the local name server. If the local server cannot
resolve a name, the query must then be sent to another server in the domain system.
1.7.4 Name Caching

The cost for lookup for non-local names can be extremely high if resolvers send each query to the root server. Even
if queries could go directly to the server that has authority for the name, name lookup can present a heavy load to
an Internet.
Therefore, to improve the overall performance of a name server system, it is necessary to lower the cost of lookup
for non-local names. Internet domain name servers use name caching to optimise search costs. Each server maintains
a cache of recently used names as well as a record of where the mapping information for that name was obtained.
When a client asks to resolve a name, the server first checks to see if it has authority for the name according to the
standard procedure. If not, the server checks its cache to see if the name has been resolved recently. Servers report
cached information to clients, but mark it as a non authoritative binding, and give the domain name of the server,
S, from which they obtained the binding. The local server also sends along additional information that tells the
client the binding between S and an IP address. Therefore, clients receive answers quickly, but there is a chance
that information may be out-of-date/inaccurate.
11
If efficiency is important, the client will choose to accept the non- authoritative answer and proceed. If accuracy is
important, the client will choose to contact the authority and verify that the binding between name and address is
still valid.
1.7.5 Time to Live

Name to address binding changes, therefore to keep the cache correct, servers time each entry and dispose of entries
that exceed a reasonable time. Servers do not apply a single fixed time out to all entries, but allow the authority
for an entry to configure its time-out. Whenever an authority responds to a request, it includes a time to live (TTL)
value in the response that specifies how long it guarantees the binding to remain. Authorities can reduce network
overhead by specifying long time-outs for entries that they expect to remain unchanged, while improving correctness
by specifying short time-outs for entries that they expect to change frequently.
Caching is important in host as well as in local domain name servers The host downloads the complete database
of names and addresses from a local domain server at start-up, maintains its own cache of recently used names,
and uses the server only when names are not found. A host that maintains a copy of the local server database must
check with the server periodically to obtain new mappings, and the host must remove entries from its cache after
they become invalid.
Keeping a copy of the local server’s database has several advantages:

• It makes resolution on local hosts extremely fast because no network activity is involved.
• The local site has protection in case the local name server fails.
• It reduces the computational load on the name server, and makes it possible for a given server to supply names
to more machines.
1.7.6 Abbreviation of Domain Names

Abbreviation provides a method shortening names when the resolver can supply part of the name automatically.
As in the telephone number hierarchy, when we make a call within the local area, we do not add the STD code. For
example, within the department of mathematics in Osmania University, the abbreviate name oumath is equivalent
to math.osmania.ac.in
Most client software implements abbreviation with a domain suffix list. The net master configures a list of suffixes
that can be appended. An abbreviation is not part of the DNS but exists in many clients software’s to make local
names easy for the users.
In short the hierarchical naming systems let us use a lot of names without one site of administration. The DNS offers
a hierarchical naming scheme.
The DNS uses distributed search in which domain name servers map each name to an IP address. Client begins with
the local resolver. If the name is not found the name resolving is done through a tree of servers.
1.8 Dialup Networking

In dialup networking, the existing telephone lines are used to get Internet connectivity. The block diagram is as
shown:
ISP
modem modem
telephone
lines
user
web server
Fig. 1.5 Accessing internet through dialup
12
The technology most often used to access internet services is dialup networking. Most ISPs offer this kind of
telephone-based service. To use dialup access, a computer must have a modem that connects to the phone lines.
The modem is known as one type of data communication equipment. Once properly configured, it instructs the
modem to call to number provided by the ISP. At the ISP end there exists another modem, which answers the call
and agrees to send Internet packets.
1.8.1 Access Criteria

Once gets connected, the dialup Internet access appears to provide users the same kind of service as a dedicated
/ leased circuit (like broad-band). However there are some fundamental differences between dialup access and
dedicated access. A dedicated access has more bandwidth and instant connection to the net. In the dialup access
there is a tedious procedure of establishing the connection to the web through modem dialing. The user has to wait
for modem to dial the required number and wait for ISP’s response every time he/she wishes to logon to the net.
Once ISP’s modem and user’s modem gets synchronised then only the user can start browsing through another
application software called web browser.
• In dialup connection the user dials the number provided by the ISP
• If the web server is not engaged lifts the phone. The carrier detect (CD) lamp on the user modem lits indicating
that it has established the contact with the remote host
• After asking user id and password the system logged on to the Internet.
The protocol for routing these packets through the modem is called the Point-to-Point Protocol (PPP). The basic
idea is simple – the users’ computer’s TCP/IP stack forms its TCP/IP data grams normally, and then the datagrams
are handed to the modem for transmission. The ISP receives each datagram and routes it appropriately onto the
Internet. The same process occurs to get data from the ISP to the users’ computer.
1.9 The Internet Service Provider (ISP)

A company that provides Internet access is known as an Internet service provider (ISP). Like any company, an ISP
charges for its services. In general, ISPs levy two types of fees:
• A charge for using the Internet.
• A charge for a physical connection to the Internet.
All customers of an ISP must pay the first type, a charge for the Internet use. User charges are usually billed at flat
rate. That is, the ISP charges each customer a fixed rate per month, independent of the number of minutes a customer
uses the service, the destinations with which the customer communicates, or the amount of data transferred. In return
for the use charges, the ISP agrees to forward packets from customer’s computers to destinations on the Internet
and from the computers on the Internet back to the customer’s computer.
Although user charges are billed at a fixed rate, ISPs do discriminate among classes for users. For example, an ISP
charges more to a business that transfers large volumes of data daily than an individual who has a single computer
and uses the Internet casually. In addition, the ISP may make the rate depend on the type of physical connection a
customer has – a customer whose connection is capable of transferring larger volumes of data is charged more than
a customer with a lower-capacity connection.
The second type, a charge for a connection, applies only to customers who have a separate, dedicated connection
between their site and the ISP.
13
1.10 Newer Technologies

The following points made to develop newer technologies:
• The technology must accommodate large number of connections and must be inexpensive.
• Provide high-speed connectivity economically.
• Till recently only leased digital circuit was used for high-speed connection. The customers used pay some large
amount as installation charges and then monthly fee depending on bandwidth.
• For most people dialup connection was least expensive but not instant access
Cable modem
Makes use of already laid cables meant for TV viewing. A cable modem has a small electronic box that connects
customer’s computer to the cable system. In addition to the cable modem at each customer’s site, the cable company
needs cable modems at its end. The modems carry the data traffic over the cable TV’s coaxial lines without interfering
with other TV channels. This is made possible by using FDM (Frequency domain multiplexing) technique (that is
how several TV channels coexist on a single coaxial cable).
• They are faster than dialup connection.
• Provides continuous and instant connection.
• Cheaper than leased lines.
• No extra wiring is needed.
• As the number of users grows there is a performance penalty.
Asymmetric digital subscriber line (ASDL)

Asymmetric digital subscriber line was invented to provide high-speed access over the existing telephone lines.
ASDL should not be confused with dialup access because the former does not use modem. Instead, it uses only the
wiring. These telephone wires carry digital signals without affecting the telephone signals and vice versa.
• Uses existing telephone wires.
• Allows simultaneous use of Internet and phone
• ADSL provides high data rates comparable with that of cable modem.
• Each user has separate pair of wires and thus no sharing of bandwidth.
• Continuous and instant connection.
• Cheaper than leased lines.
Wireless technology
To provide remote areas engineers have developed wireless access technology. They use same technology as cell
phone but need not dial a number to access the Internet. The transmitter runs all the time and thus providing continuous
and instant access. More over wireless technology offers high data transfer rates like cable modem and ADSL.
14
Summary
• The Internet is a loose interconnection of thousands of computer networks reaching millions of people all over
the world.
• The Internet Ocean was created in 1969.
• One of the reasons for the Internet is so successful is the commitment of its developers to make Internet
technology an “open system”.
• Standards that the Internet uses are known as the TCP/IP protocol suite.
• The Internet system does not have a central system.
• All information and communication transmitted on the Internet are broken into packets, each of which is
considered an independent entity.
• The Internet has had a positive effect on the democratisation of society, making it more difficult to bottle up
and suppress information.
• The Internet is based on client server model.
• A client program is initiated by the user (or it can be another application program) and terminates when the
service is complete.
• An iterative server normally uses UDP connectionless service.
• When two processes communicate with each other, they need a socket at both ends.
• A socket is nothing but a special type of structure.
• The Domain Name Service (DNS) is a network service that translates domain names to IP addresses.
• The IP addresses are unique, which means that each host has its own IP address, which is different from all
other IP addresses in the world.
• Domain names are hierarchical, with the most significant part of the name on the right.
• The mechanism that implements a machine name hierarchy for TCP/IP Internet is called the Domain Name
System (DNS)
• Any suffix of a label in a domain name is also called a domain.
• The Internet scheme can accommodate a wide variety of organisations, and allows each group to choose between
geographical or organisational naming hierarchies.
• The geographic scheme divides the universe of machines by country.
• The domain name scheme includes an efficient, reliable, general purpose, distributed system for mapping names
to addresses.
• The domain mechanism for mapping names to addresses consists of independent, co-operative systems called
name servers.
• In the two-step name resolution process, resolution begins with the local name server.
• Abbreviation provides a method shortening names when the resolver can supply part of the name
automatically.
• In dialup networking, the existing telephone lines are used to get Internet connectivity.
• To use dialup access, a computer must have a modem that connects to the phone lines.
• The protocol for routing these packets through the modem is called the Point-to-Point Protocol (PPP).
• A company that provides Internet access is known as an Internet service provider (ISP).
References
• Soper, E. M., 2004. Absolute Beginner’s Guide to A+ Certification, Que Publishing.
• Young, L. M., 2002. Internet: The Complete Reference, 2nd ed. McGraw-Hill Prof Med/Tech.
• Internet Connections, [Online] Available at: <http://www.edb.utexas.edu/minliu/multimedia/PDFfolder/
InternetConnections.pdf> [Accessed 22 June 2012].
15
• Basic Internet Setup, [Online] Available at: < http://images.apple.com/support/panther/en/tutorials/pdf/internet.

pdf>, [Accessed 22 June 2012].
• Prof. Sengupta, I., Lecture -1 Introduction To Internet, Department of Computer Science & Engineering ,IIT
Kharagpur, [Video Online] Available at: <http://www.youtube.com/watch?v=YOXwcbwSEUo> [Accessed 22
June 2012].
• Dr. Bose, R., Lecture 2 - Types of Wireless Communication, Department of Electrical Engineering, IIT Delhi.,
[Video Online] Available at: <http://www.youtube.com/watch?v=QHDxbbc1GWs> [Accessed 22 June
2012].
Recommended Reading
• Levine, R. J., Young, L. M., 2011. The Internet for Dummies, 13th ed. John Wiley & Sons.
• Scott Mueller, 2011. Upgrading and Repairing PCs, 20th ed. Que Publishing.
• Biafore, B., 2011. QuickBooks 2012: The Missing Manual, O’Reilly Media, Inc.
16
Self Assessment
1. The Internet Ocean was created in _______.
a. 1960
b. 1979
c. 1969
d. 1970
2. Standards that the Internet uses are known as the ____________ suite.
a. APRNET
b. DARPA
c. HTML
d. TCP/IP protocol
3. Which of the following is an advantage of internet?

a. Communication tool
b. Travel
c. Teaching aid
d. Social discrimination
4. Which of the following is not one of the precautions that should be taken to protect system from problems?
a. Install or use Spam protection
b. Interpolation or data interchange standard
c. Enable popup blocking features of your Web browser
d. Enable cookie protection in your Web browser
5. Which of the following is a basis of internet?

a. Client server system
b. Communication
c. Data storage
d. Travel
6. The most important feature of a server is ____________.

a. data
b. communication
c. teaching aid
d. storage
7. Which of the following statements is false?

a. Servers are designed to be fault-tolerant.
b. Most servers use the special powerful microprocessors.
c. A computer runs a program to either request a service from another computer or provide a service to another
computer.
d. A client program is initiated by the service (or it can be another application program) and terminates when
the users are complete.
17
8. When two processes communicate with each other, they need a ____________ at both ends.
a. Sockets
b. UDP
c. Server
d. Protocol
9. The ________ is a network service that translates domain names to IP addresses.

a. UDP
b. DNS
c. TCP
d. Local socket address
10. Which of the following sentence is false?

a. A computer name is also called an IP address.
b. Domain names are hierarchical, with the most significant part of the name on the right.
c. The Domain Name System does not specify the exact number of segments in a name.
d. The mechanism that implements a machine name hierarchy for TCP/IP Internet is called the Domain Name
System (DNS).
18
Chapter II
Introduction to Web Design
Aim
• explain concept of web designing
• enlist technology used in web designing
• discuss web designing basic
Objectives
• explain element of good design
• describe lines and line work in web designing
• elaborate shapes and colours in web designing
Learning outcome
• understand texture in web designing
• identify direction while designing
• understand the principle of designing
19
2.1 What is Web Designing?

The Internet has redefined the borders of our modern world. Big or small companies now have customers all across
the globe. Small or Big businesses houses, groups and non-profit organisations are providing an infinite array of
information to a widespread audience. The possibilities are endless through effective and efficient Web Design.
Web Design is an art of content presentation to an end user through World Wide Web. The efficient web design
helps your company in bringing enquiries that generate sales and add asset to business.
In the digital world websites emerge as a significant tool that not only help the companies to find their target audience
but also help in tapping desired customers while seating remotely.
Website has become the medium of communication or interaction for Business houses. You can establish your
corporate identity globally and remain in contact with your customer throughout day and night. This information
technology based communication design helps you to place your products to global customer with details of the
placed products relatively at low cost websites
Website utilises multiple disciplines such as animation, graphics, interaction design and information architecture
while giving digital corporate identity to your business. The amalgamated features help in interacting with unknown
audience in effective and efficient manner. Websites are often considered as the interactive marketing strategy to
pull out the hidden customer around the global arena.
Each of the websites planned in a precise manner to cater specific need. The people who view the website for a
specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly
defined purpose or goal of the site helps in understanding of what visitors want. It gives a way in identifying the
target audience. So company, who is developing website must be precise, on the target and object oriented in order
to get maximum of what they are putting.
The technologies being used during web designing are:

• 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, MSSQL)
• Multimedia technologies (such as Flash and Silverlight)
Based on the requirements of the company website can be made in static or dynamic depending on the nature of
the site.
2.2 Web Design Basics

Web design uses all the same elements as print design. You need to explore the space and layout, handle fonts and
colours, and put it all together in a format that puts your message across.
20
Elements
of Good
Design
Web Design Fonts and
Software Typography
Accessibility Web How to Use

and Usability Design Colour
Tackling Web Graphics and

Navigation Images
Web Layout
Basics
Fig. 2.1 Web design
2.3 Elements of Good Design

Good Web design is the same as good design. If you understand the elements that make up good design, you will
have a Web page that works well. These elements of good design apply whether you are writing a Web page, a
business card, or a t-shirt and once you understand them you will have the skills to be a great designer.
Elements of Principles of The web is

design design not print
Fig. 2.2 Elements of good design
21
2.3.1 The Elements of Design

The elements of design are the building blocks of design. These elements are what make up every page you build.
And understanding the basic elements you’ll be able to put together more powerful Web pages.
There are five basic elements of every design:

• Lines and linework
• Shape
• Texture
• Colour
• Direction
Lines and
linework
Shape
Texture
Colour
Direction
Fig. 2.3 Element design
Lines and line work

Lines include borders and rules. They can be horizontal or vertical and help delineate the spaces around elements
on Web pages.
• Linework increases the readability of the design.
• Lines are a basic element of design. They add to the style of a design and can enhance the comprehension and
readability of a design.
• Lines can be used as a border around elements or a divider between elements.
• Use of Lines in Design are as follows:
borders around elements
dividing lines between elements
countours around elements
decoration
22
• How to include lines in web design?
The <hr /> tag places horizontal lines in Web page documents. You can then style the <hr/> tag to get better
looking lines.
CSS provides many ways to add borders to elements. With borders on one or two sides of an element, you
can create lines that are a little more interesting than a simple boxy border.
Images can be used as lines and borders to create more decorative effects.
Shape
Shapes make up any enclosed contour in the design.
• Shapes on most Web pages are square or rectangular. But they don’t have to be.
• You can use images to generate other shapes within your designs.
• Shapes are a basic element of design. They are made up of closed contours and three dimensional objects placed
in the design.
• Shapes are used to convey meaning and organise information.
• Shapes can be 2-dimensional or 3-dimensional.
• There are three basic types of shapes:
geometric shapes
natural shapes
abstract shapes
• Use of Shapes in Design:
add interest to a design
sustain interest
organise or separate elements
direct the eye through the design
• Geometric Shapes: Geometric shapes are what most people think of when they think of shapes. Most geometric
shapes on Web pages are created through layout and CSS. Some common geometric shapes you see on Web
pages are:
squares and rectangles
circles
triangles
diamonds
• Natural Shapes: Natural shapes are shapes that are found in nature, but they are also shapes of man-made items.
Most natural shapes in Web pages are created with images. Some examples of natural shapes are:
leaves
puddles
• Abstract Shapes: Abstract shapes are those that have a recognisable form but are not “real” in the same way that
natural shapes are. For example, a stick-figure drawing of a dog is an abstract dog shape, but another dog in a
photo is a natural shape. Abstract shapes in Web designs are usually added through images. Some examples of
abstract shapes are:
alphabet glyphs
icons
symbols
23
Texture
Texture gives a design a feeling of surface. Texture on Web pages is all visual, but you can use natural textures or
artificial to get the effect in your designs.
• Texture is what gives a design the feeling of a surface.
• It is the tactile sense of the elements in the design.
• In Web design, texture is visual, but it provides the illusion of physical texture. Some common textures are:
rough
smooth
hard
soft
• Use of texture in design:
backgrounds
emphasis
stylised designs like engravings or etchings
• How to include Texture in Web Designs:
The most common way to incorporate texture into Web designs is with the background-image style
property.
You can put background images on most block-level elements, which allows you to add texture throughout
your Web pages.
Don’t forget that even things you don’t put backgrounds on can have or approximate texture.
For example, any images you have will have texture within the images.
And the combination of elements on a page can combine together to look textured.
Colour
Colour is the one design element that most Web designers are acutely aware of. But remember that colour is not a
required element of any design.
• In fact, a good plan in design is to create the design without colour first, then add as little colour as you can to
enhance the design.
• Colour is a basic element of design, but what many designers don’t realise is that it’s not a required element.
• Some of the best designs are done with only black and white or just a touch of one colour.
• Use of colour in design:
backgrounds
text and foregrounds
images
accents
• How to include colour in web designs: Colour is very easy to add to Web pages. There are many style properties
that add colour, including:
colour - for foreground colour, like fonts and text
background-colour - does what it sounds like, changes the background colour of the element
border-colour - to change the colour of borders around elements
• You can also add colour to your design through your images.
• JPEG images for photographs and images with millions of colours and GIFs for flat colour images.
24
Direction
Direction gives your Web designs motion.
• In most designs there is a sense of movement in a direction across the design.
• Good designs lead the eye through the design in a deliberate fashion so that the viewer sees what the designer
wants.
• Direction in design provides mood and atmosphere.
• Direction gives the illusion of movement within a design.
• There are three basic directions in design:
horizontal
vertical
diagonal
• Use of direction in design: In Web design, direction is most often portrayed by the images on the page. But you
can impose direction through the placement of elements on the page, and with lines especially when they have
arrow heads on them.
• How to include direction in web designs: Incorporate direction in your Web designs in the following ways:
Look at your images to determine what direction the subjects are facing. If the people in the picture are
looking to the right, then you should place the image on the left side of the page. Otherwise the direction
of the eyes in the photo will direct your readers’ eyes away from the page.
Use your layout to suggest direction. Position dense elements, like photos, in horizontal, vertical, or diagonal
lines. While less dense elements, like text, surround them.
 Use lines, either images or HR tags, to suggest movement and direction.
2.3.2 The Principles of Design

The basic principles of design are true for Web design as well as other design.
• They show you how to put together design elements in an effective manner.
• Design is more than just slapping HTML tags up onto a page, and using these principles will help you build
more pleasing and useful designs.
Balance
Contrast
Emphasis
Rhythm
Unity
Fig. 2.4 Principles of design
25
Balance
Balance is the distribution of heavy and light elements on the page.
• Larger, darker elements appear heavier in the design than smaller, lighter elements.
• The principle of balance shows you how to lay out your pages so that they work.
• Balance in design is the distribution of elements across the design.
• Balance is a visual interpretation of gravity in the design. Large, dense elements appear to be heavier while
smaller elements appear to be lighter.
• You can balance designs in three ways:
symmetrical balance
asymmetrical balance
discordant or off-balance
• Use of balance in design: Balance in Web design is found in the layout.
The position of elements on the page determines how balanced the page appears.
One big challenge with achieving visual balance in Web design is the fold.
You may design a layout that is perfectly balanced in the initial view, but when the reader scrolls the page,
it can come out of balance.
• How to include balance in web designs?: The most common way to incorporate balance into Web designs is
in the layout.
You can also use the float style property to position elements and balance them across the page.
A very common way to balance a layout symmetrically is to center the text or other elements on the page.
Most Web pages are built on a grid system, and this creates a form of balance for the page right away.
Customers can see the grid, even if there aren’t any visible lines.
Web pages are well suited to grid designs because of the square nature of Web shapes.
• Symmetrical Balance: Symmetrical balance is achieved by placing elements in a very even fashion in the
design.
If you have a large, heavy element on the right side, you’ll have a matching heavy element on the left.
Centering is the easiest way to get a symmetrically balanced page. But be careful, as it can be difficult to
create a centered design that doesn’t look flat or boring.
If you want a symmetrically balanced design, it’s better to create the balance with different elements - such
as an image on the left and a large block of heavier text to the right of it.
• Asymmetrical Balance: Asymmetrically balanced pages can be more challenging to design - as they don’t have
elements matched across the centreline of the design.
For example, you might have a large element placed very close to the centreline of the design.
To balance it asymmetrically, you might have a small element farther away from the centreline.
If you think of your design as being on a teeter-totter or seesaw, a lighter element can balance a heavier one
by being further away from the center of gravity.
You can also use colour or texture to balance an asymmetrical design.
• Discordant or Off-Balance: Sometimes the purpose of the design makes an off-balance or discordant design
work well.
Designs that are off-balance suggest motion and action. They make people uncomfortable or uneasy.
If the content of your design is also intended to be uncomfortable or make people think, a discordantly
balanced design can work well.
26
Contrast
When most people think of contrast, they typically think of colours or black and white. But there is more to contrast
than colour.
• You can have contrasting shapes (square vs. circle), or contrasting sizes (large vs. small), or contrasting textures
(smooth vs. rough).
• Contrast in design is an accentuation of the differences between elements in a design.
• Most people think of contrast only as it applies to colours, but contrast can work with any design element.
• For example, if you have a group of lines that are all the same size, there is no contrast. But if one is a lot longer
than the others, it contrasts with them.
• Use of contrast in design: When applying contrast to Web designs, think beyond colour. Colour contrast can
easily be overdone. But by using more subtle differences in contrastin font sizes, layout shapes, images, and text
styles (like lists versus long blocks of prose) you can take advantage of contrast without blasting your readers
with a loud contrasting colour scheme.
• How to include contrast in web designs?: Contrast in Web design can be implemented in many ways:
Change the fonts
Font size,
Font weight,
Font family can all provide contrast to your text
Headlines provide a lot of contrast to surrounding text.
Links provide great contrast in text.
The colour change and the addition of an underline work well to contrast from the surrounding text.
Use different sized images and elements.
If you have a section of text that is the primary focus of a page, you might make it large and all the surrounding
elements and images small.
Use contrasting colours or change the darkness and lightness of your colours.
Emphasis
Emphasis is what the eye is drawn to in a design.
• It’s tempting to give everything equal emphasis or try to emphasise everything in a design, but this ends up
making the design bland and flat.
• Instead, as a designer you should determine the hierarchy of the page and then apply the emphasis to the elements
based on that hierarchy.
• Emphasis in design provides the focal point for the piece.
• It is a way of making the element that is most important stand out in the design. Emphasis is sometimes called
dominance.
• Use of emphasis in design: One of the biggest mistakes designers can make is trying to make everything in the
design stand out. When everything has equal emphasis at best it can make the piece appear busy, and at worst
the design will be boring and unappealing.
• Instead, focus on creating a visual hierarchy in your designs.
• If you’ve worked to create a semantic flow to your HTML markup, that will be easier. Because your Web page
will already have a hierarchy, all your design needs to do is put the emphasis on the correct elements - such as
the H1 element for the most emphasis and so on.
• How to include emphasis in web designs?: Emphasis in Web design can be implemented in many ways:
Using semantic markup will provide some emphasis, even without any styles.
Change the size of fonts or images to emphasise or de-emphasise them in the design.
Using contrasting colours can provide emphasis.
27
Rhythm
Rhythm is also called repetition. Rhythm brings an internal consistency to your Web designs.
• Patterns are easy for humans to comprehend, and repetition provides patterns that make your site easier to
comprehend.
• Rhythm allows your designs to develop an internal consistency that makes it easier for your customers to
understand.
• Once the brain recognises the pattern in the rhythm it can relax and understand the whole design.
• Repetition rarely occurs on its own and so it embues a sense of order onto the design. And because of this,
repetition attracts attention and prompts customers to investigate further.
• Use of rhythm in design: Nearly anything in a Web design can be repeated to create a rhythm to your designs.
You can repeat a headline multiple times for emphasis, repeat an image across the top of your design, create a
patterned background with repetitive elements, or repeat a style throughout the pages of your site to provide
consistency.
• How to include rhythm in web designs?: Rhythm in Web design can be implemented in many ways:
Repeat the actual text in your HTML.
Add images multiple times.
Use the background-repeat property to repeat a background image horizontally or vertically.
Repeat the navigation elements of your design across the pages of your site.
Unity
Unity is also called proximity. It is the principle of keeping like elements together and diverse elements further
apart.
• Unity pulls elements together.
• Unity provides cohesiveness to your designs.
• It is what pulls the elements together.
• Elements that are positioned close to one another are related while elements that are farther apart are less
related.
• Unity looks at how close or far apart various elements on the page are to one another.
• The closer two elements are, the stronger the relationship is between the two elements.
• Using the design principle of unity, you can assign your content into logical groups that make it easier for your
readers to navigate through your designs.
• Use of unity in design: Unity in design is achieved primarily through placement in your layout. But it can also
be achieved through margin and padding changes to the elements.
• Another way to use unity in web design is to separate your text into groups using headlines.
• The headline adds some visual contrast, and by grouping it with the text below it, it is clearly related to that
content.
• How to include unity in web designs?: Unity in Web design can be implemented in many ways:
Adjust the layout of elements to place them close or far away.
Change the spacing around text.
Play with the box properties to affect margins and padding.
2.3.3 The Web is Not Print

Many Web designers come to the Web with a print background.
• Either they were print designers, or they are just used to the control that a print world gives.
• When you print something, it provides permanence and stability. You don’t have this on the Web.
• The problem is, that it’s easy to forget.
28
• When you build your Web page and test it in your browser, you get it looking exactly how you want it to
look.
• But then you test it in a different browser, and it looks different. And if you move to a different platform, it will
look differently again.
• As you’re a designer, you’ll need to work with customers.
• You will be doing them and yourself a disservice if you don’t explain the difference between print and the
Web.
• Especially if you bring your portfolio as print outs. This is a common problem, where the customer expects the
printout to represent exactly what the page will look like.
Working with customers
Know what
your customer
uses
Setting
Expectations
Printouts as a
Portfolio
Fig. 2.5 Working with customers
Printouts as a portfolio
It is always important to have a portfolio, but remember that the Web is not print, and bringing a print out is not a
strong representation of your Web site design skills.
Setting expectations
Be up-front with your customers. If they want their page to have very specific layout, font, and design elements, be
sure to explain the tradeoffs such as download speed and maintenance before simply building them a completely
graphical page.
Know what your customer uses

If you’re a big Netscape on the Mac fan, and your client only uses Internet Explorer for Windows, you should keep
this in mind in your designs. Your page could look very different to them.
29
Design techniques
Design technique includes:
Know your
audience
Test
Don't forget
resolution
Fig. 2.6 Design techniques
Know your audience

Know the characteristics of the audience of the site you’re building. If they are propellor-heads, they might browse
in Unix on a 21 inch monitor. Or if they are more conservative they might have a 12 inch monitor running Internet
Explorer 3. If you design a site that suits your audience, your customer won’t be complaining to you later.
Test
Test your designs in every browser and OS combination that you can get your hands on. Emulators work if you
have no other choice, but there is no substitute for hands on experience.
Don’t forget resolution

Browsers and OS are important, but if your readers and customers are browsing on a smaller screen than you design
on, they could be unpleasantly surprised.
30
Summary
• The Internet has redefined the borders of our modern world. Big or small companies now have customers all
across the globe.
• Web Design is an art of content presentation to an end user through World Wide Web.
• The efficient web design helps your company in bringing enquiries that generate sales and add asset to
business.
• Website utilises multiple disciplines such as animation, graphics, interaction design, and information architecture
while giving digital corporate identity to your business.
• Lines include borders and rules. They can be horizontal or vertical and help delineate the spaces around elements
on Web pages.
• Linework increases the readability of the design.
• Lines are a basic element of design. They add to the style of a design and can enhance the comprehension and
readability of a design.
• Lines can be used as a border around elements or a divider between elements.
• Shapes on most Web pages are square or rectangular. But they don’t have to be. You can use images to generate
other shapes within your designs.
• Shapes are a basic element of design. They are made up of closed contours and three dimensional objects placed
in the design.
• Geometric shapes are what most people think of when they think of shapes. Most geometric shapes on Web
pages are created through layout and CSS.
• Natural shapes are shapes that are found in nature, but they are also shapes of man-made items.
• Abstract shapes are those that have a recognisable form but are not “real” in the same way that natural shapes
are.
• Texture gives a design a feeling of surface. Texture on Web pages is all visual, but you can use natural textures
or artificial to get the effect in your designs.
• Colour is the one design element that most Web designers are acutely aware of. But remember that colour is
not a required element of any design.
• JPEG images for photographs and images with millions of colours and GIFs for flat colour images.
• Direction in design provides mood and atmosphere.
• Direction gives the illusion of movement within a design.
• Design is more than just slapping HTML tags up onto a page, and using these principles will help you build
more pleasing and useful designs.
• Balance is the distribution of heavy and light elements on the page.
• Symmetrical balance is achieved by placing elements in a very even fashion in the design.
• Asymmetrically balanced pages can be more challenging to design - as they don’t have elements matched across
the centreline of the design.
References
• Stev, M. J., 2008. Web designing [Online] Available at: <http://technet.microsoft.com/en-us/magazine/2008.03.
securitywatch.aspx> [Accessed 22 June 2012].
• Thamos, J., 2011 . Web in Multimedia [Video Online] Available at: <http://www.youtube.com/
watch?v=bq1fXrxn9jM> [Accessed 22 June 2012].
• EdzJohnson, 2009. Web designing [Video Online] Available at: <http://www.youtube.com/
watch?v=GOfhmzNLWzY> [Accessed 22 June 2012].
• Bharat, O. and Broder, A., 1998. A technique for measuring the relative size and overlap of public web search
engines. John Wiley and Sons.
31
• Broder, A., Glassman, S., Manasse, M. and G. Zweig., 1997. Syntactic clustering of the web. Cengage
Learning.
• Jennifer, K., 1997. Web Design / HTML [Online] Available at : <http://webdesign.about.com/> [Accessed 22
June 2012].
Recommended Reading
• Posey, B., 2008. A content-based image browser for the world wide web, Syngress.
• Piter, A., 2008. An image and video search engine for the world-wide web, Syngress.
• Jacob, S., 2008. An image search engine for the world wide web, Dreamtech Press.
32
Self Assessment
1. Which of the following increases the readability of the design?
a. Shapes
b. Direction
c. Linework
d. Lines
2. _______ add to the style of a design and can enhance the comprehension and readability of a design.
a. Shapes
b. Direction
c. Linework
d. Lines
3. ___________ can be used as a border around elements or a divider between elements.

a. Shapes
b. Direction
c. Linework
d. Lines
4. Which of the following statements is true?

a. Shapes on most Web pages are square or rectangular.
b. Balance on most Web pages are square or rectangular.
c. Direction on most Web pages are square or rectangular.
d. Lines on most Web pages are square or rectangular.
5. ____________ in design provides mood and atmosphere.

a. Shapes
b. Direction
c. Linework
d. Lines
6. ____________ gives the illusion of movement within a design.

a. Shapes
b. Direction
c. Linework
d. Lines
7. _________ is more than just slapping HTML tags up onto a page.

a. Design
b. Balance
c. Symmetrical
d. Emphasis
33
8. ________ is the distribution of heavy and light elements on the page.

a. Design
b. Balance
c. Symmetrical
d. Emphasis
9. ___________balance is achieved by placing elements in a very even fashion in the design.

a. Design
b. Balance
c. Symmetrical
d. Emphasis
10. ________ is what the eye is drawn to in a design.

a. Design
b. Balance
c. Symmetrical
d. Emphasis
34
Chapter III
Basics of Web Designing
Aim
• enlist the basic element of web designing
• elucidate HTML
• elaborate editor
Objectives
• explain hosting
• describe publishing
• elaborate steps of web designing
Learning outcome
• understand HTML documents
• identify WYSIWYG editor
• recognise free host servers
35
3.1 Introduction
There are four basic things that are to be followed while designing web sites, they are as follows:
HTML
Publish Web design Editor
Hosting
Fig. 3.1 Elements of web design
HTML
It is an introduction to the computer language which forms the heart of web pages. Although, it’s not absolutely
necessary to know this stuff, you should still read this page to get an idea of how it works.
Editors
Tools used to create websites
Hosting
How to find a home (host server) for your website?
Publish
How to upload your site to the internet so that viewers can visit it
3.2 Methodology
There are two very different ways to make a website.
• The quickest and easiest way to make a site is to use an on-line “wizard” supplied by your internet service
provider (ISP) or some other organisation.
• To use this method, visit the internet address given to you by the organisation providing the service. There you
will be guided through a series of simple steps which will result in a site being constructed for you.
• The advantage of this method is that you don’t need any skills other than using your browser. The drawback is
that you are very limited in what you can do with this kind of website.
• The other approach is to construct a website on your own computer, then “upload” it to the internet so that other
people can access it.
36
Note
• As the internet is such a complicated environment, these introductory tutorials tend to over-simplify explanations
of how things work.
• You shouldn’t take all our examples and illustrations too literally, but the information is conceptually sound.
• In time, you can choose to make the effort and build up a more technically accurate understanding.
3.3 Getting Started with Web Designing

It can all look very intimidating for the beginner, but if you know how to surf the internet and use a word processor
then you should have no trouble making a website.
• However, the single biggest mistake we see from beginners is trying to do too much too soon.
• Whatever you’re level of experience with computers and the internet, it’s absolutely critical that you take things
slowly and don’t get ahead of yourself.
• Website construction is a minefield. If you have a map you will be fine, but if you think it looks easy and go
charging in you will end up coming apart!
• Many software applications will tell you that web design is easy. It’s common to see claims such as “Make your
own website in minutes no experience necessary!”
• In our opinion these claims are misleading you simply can’t learn enough in a few minutes to have any chance
of success.
• You can learn the basics in an hour or so, but you will need a lot longer if you want to be any good.
• People often ask us to recommend a computer program, which will allow them to create fantastic websites.
• They sometimes show us a website they like and say “I want a program that will make sites like this.”
• This scenario is somewhat like taking a photo of a house into a hardware shop and saying “I want a hammer
which will make a house like this”.
• So here’s the first reality check: There is no such thing as a program which makes good sites. Although some
programs are more helpful than others, in the end it’s up to you.
• Good websites aren’t impressive because they were made with a good program; they are impressive because
they were made by an experienced person.
• To make a great site you need to do a great deal of learning. There are no shortcuts.
3.4 Step 1: HTML

At the heart of web page design is a computer language called “HTML”.
• Although, many new languages and technologies are superseding HTML, it still forms the foundation of virtually
all websites.
• For this study, we will simplify the situation and pretend that all web pages use only HTML.
• You don’t actually need to know anything at all about HTML and if your ambitions aren’t high then you can
get away without it.
• However, if you’re even slightly serious about making a good website then it will help you a lot if you understand
a few basics.
• Don’t be put off it’s not as intimidating as it sounds.
• If you really can’t be bothered, there are other options available.
HTML documents
A web page is an “HTML Document”. This is a file format, which usually uses the extension “.html” or “.htm”.
• For example, if you use Microsoft Word, you will usually save your files with the extension “.doc”.
• However you can also save your files with many other extensions such as “.txt”, “.wps” and so on. Amongst
the options is “.html”.
37
• HTML documents are actually just plain text, but contain snippets of code, which carry vital information about
how the page should be displayed.
• You can create such a document using any text editor even a very simple one like Windows Notepad.
• In fact many web designers prefer to use simple text editors.
• This is what a very simple HTML document looks like:
<html>
<head>
<title>A Simple Web Page</title>
</head>
<body>
This is about as simple as a web page can get.
</body>
</html>
• To view an HTML document, you must use a browser or similar software.

• The browser opens the HTML document in the background and “decodes” it before showing it to you.
• What you see is your browser’s interpretation of how the web page should look
• Note: this is actually an important point - it’s why you should test your site using a variety of browsers.
• To see what the above example document looks like, click here, then click your browser’s back button to return
and continue.
• We won’t go into any more detail at the moment, but at the end of this tutorial we’ll show you how to learn
more about HTML.
3.5 Step 2: WYSIWYG Editors

WYSIWYG means “What You See Is What You Get”.
• WYSIWYG web-page editors are similar to word processors and they allow you to construct a web page without
using HTML instructions.
• You simply type in your text, add pictures, etc, using familiar toolbars and menus.
• The editor makes the HTML code in the background.
38
Fig. 3.2 WYSIWYG Editors
(Source: http://www.mediacollege.com/internet/design/dreamweaver01.gif)
• Some well-known WYSIWYG web-page editors:

Adobe Dreamweaver
Microsoft FrontPage
Microsoft Publisher
• The screenshot on the right is from Dreamweaver.
• Using the tools provided, you can add text, images and other elements directly onto the page.
• These editors have obvious advantages such as speed and ease of use. However, there is a trade-off: They are
not 100% reliable.
• If you examine the HTML code, you are likely to find mistakes and unwanted extra code.
• They also tend to be deceptive you may think you’re producing a fantastic page but find that it looks very
different once you publish it.
• Remember that these editors usually use an approximation of how the page will look.
• To see your page as it really is you need to view it in a browser.
• For these (and other) reasons, some professional web designers refuse to use WYSIWYG editors. Instead, they
use simple text editors and compose the entire HTML manually.
• However, it’s becoming more common to use a mixture of both methods.
• A good WYSIWYG editor will give you the option to edit the HTML code manually.
39
• At the bottom of the Dreamweaver screenshot there is a panel, which shows the HTML code for the page being
worked on. As you edit the page in WYSIWYG mode, the HTML automatically updates.
• Likewise, you can edit the HTML code and the WYSIWYG view will be updated.
3.6 Recommendations for Software and Tool for Designing Web

Finding the right software isn’t easy. If possible you should try a number of different options most good editors
have free trial versions available. Here’s what we think about a few leading contenders:
• Adobe Dreamweaver is our tool of choice.
• It is widely considered to be at least best equal in the field of professional web design. It’s also perfectly suitable
for the novice.
• Adobe Contribute is a lower-cost sibling of Dreamweaver.
• It allows you to maintain and update your website as well as collaborate with other people who work with
you.
• Microsoft FrontPage is a good program for beginners, but be warned: this program has a whole range of flaws
and does not have a good reputation in professional circles.
• Although it is a specialist web development program and is much cheaper than many of its competitors, there
are free programs available which offer essentially the same functionality without the hassles.
• Ironically we use FrontPage quite a lot; because people often send us FrontPage files to work on one of the
drawbacks - FrontPage websites often can’t be edited with other programs.
• Believe it when we say FrontPage causes far more than its fair share of grief.
• Microsoft Publisher was originally designed for print media but has evolved to include web design.
• It has the advantage of being relatively cheap, versatile and familiar.
• Many people use it simply because they already have it installed. However it is not a specialist HTML editor
and doesn’t perform well. We don’t recommend it.
• Microsoft Word is similar to Publisher in that it was never originally designed for internet work. Although it
can read and edit HTML documents, it does so very badly indeed.
• If at all possible, avoid it like the plague.
• There are numerous free HTML editors available. Search the internet, visit web design newsgroups and spend
some time deciding.
3.7 Step 3: Hosting

Once you’ve created your web site and you can see that it works properly on your computer, you need to “publish”
it to the internet so that other people can see it.
• Essentially you just need to copy the web pages from your computer to your host server.
• Naturally, the first thing you’ll need to do is to find a host server.
• There are many options available and finding the right solution isn’t always easy.
• There are two main categories of hosting options: Free and Paid.
3.7.1 Free Host Servers

There are plenty of places on the internet which will host your site for free. Not surprisingly, there are catches.
These may include:
• Advertising banners: Most free services make their money by inserting advertisements into your pages. The
advertisements may also appear in pop-up windows which activate whenever someone visits your site.
• No domain hosting and ugly URLs: Free hosting doesn’t usually allow you to use a domain name (Example,
http://www.myname.com). You will instead be assigned an address which could be very long and difficult to
remember.
40
• No support: If anything goes wrong or if you need any help, don’t hold your breath. Chances are no-one
cares.
• Limited features: You will find that certain features aren’t allowed.
• No guarantee of service: From time to time free hosts simply shut down, either temporarily or permanently.
More often, certain features they offer are discontinued or they start charging for them.
• Your best bet is to see what your ISP has to offer. Most ISP’s have some sort of free web hosting option with
their dial-up accounts.
3.7.2 Paid Host Servers

If the free services don’t meet your needs then you will be looking for a professional hosting service. Prices and
features vary widely so shop around. Note that you don’t have to use a host which is geographically near you - you
can have your site hosted on the other side of the world.
Features of paid host servers:

• FTP Access: This is the most common method of publishing your files to the host server and is offered on almost
all serious hosting options. Make sure you know exactly how to access your host.
• Technical Support: This is most important - does your service provider offer help installing and running your
site? Does this cost extra?
• E-Mail: Exactly what e-mail facilities are included? Can you have multiple email addresses?
• Statistics: Most hosts provide free statistics to see how many people are visiting your site.
• CGI, PHP, etc: These are advanced features which allow you to add bells and whistles such as forms, dynamic
content, discussion forums, etc. Not for the novice, but not so complicated that you can’t learn. Many hosts
have ready-made CGI features which you can add to your site with minimal fuss, or they may be able to add
them for you.
• FrontPage Extensions: If you insist on using Microsoft FrontPage, then you’ll need FrontPage extensions. This
is a set of files and protocols which allow beginners to use advanced features similar to those offered by CGI.
When used very carefully they can be a handy tool. However, FrontPage extensions have many limitations and
are prone to inexplicable failure - use them at your own risk!
3.8 Step 4: Publish (upload)

The final stage of construction is the upload.
• Using a file transfer program, you copy the entire website structure to the appropriate folder on the host
server.
• The window below is from the popular program WS_FTP LE, available from www.ipswitch.com.
41
Fig. 3.3 Publish

(Source: http://www.supersmartnet.com/Thread-Website-Tutorial.html)
• If you’re familiar with file management systems such as MS Windows Explorer, then you won’t have any
difficulty with this package.
• The left window displays the site on your local drive; the right window displays the site on your host server.
• You simply guide the program to the appropriate folders and use the left/right arrows to transfer selected
files.
• Some site authoring applications have the option to publish directly to the web. This may be largely automated,
such as the “Publish” command in FrontPage or the “Synchronise” command in Dreamweaver.
• These commands can identify files which have been modified since you last published and tell you which ones
need to be updated.
• If you have a large site, this can be a huge time-saver.
42
Summary
• HTMLis an introduction to the computer language, which forms the heart of web pages. Although, it’s not
absolutely necessary to know this stuff, you should still read this page to get an idea of how it works.
• The quickest and easiest way to make a site is to use an on-line “wizard” supplied by your internet service
provider (ISP) or some other organisation.
• A web page is an “HTML Document”. This is a file format, which usually uses the extension “.html” or
“.htm”.
• HTML documents are actually just plain text, but contain snippets of code, which carry vital information about
how the page should be displayed.
• WYSIWYG means “What You See Is What You Get”.
• WYSIWYG web-page editors are similar to word processors and they allow you to construct a web page without
using HTML instructions.
• Adobe Contribute is a lower-cost sibling of Dreamweaver.
• Microsoft FrontPage is a good program for beginners, but be warned: this program has a whole range of flaws
and does not have a good reputation in professional circles.
• Most free services make their money by inserting advertisements into your pages. The advertisements may also
appear in pop-up windows which activate whenever someone visits your site.
References
• Thomas, O., 2011. Multimedia Secrets, John Wiley and Sons.
• Gibson, D., 2010. Guide to Multimedia, Enterprise Administration, Cengage Learning.
• Henderson, T. and Dvorak, R., 2008. Multimedia: Faster, more manageable and secure, but still missing the
virtual link [Online] Available at: <http://www.networkworld.com/reviews/2008/022108-windows-2008-server-
test.html> [Accessed 22 June 2012].
• Johansson, M. J., 2008. Using SCW on Multimedia [Online] Available at: <http://technet.microsoft.com/en-us/
magazine/2008.03.securitywatch.aspx> [Accessed 22 June 2012].
• Webster, J., 2011. Multimedia [Video Online] Available at: <http://www.youtube.com/watch?v=bq1fXrxn9jM>
[Accessed 22 June 2012].
• EdzJohnson., 2009. Web Designing [Video Online] Available at: <http://www.youtube.com/
Recommended Reading
• Posey, B., 2008. The real MCTS/MCITP Exam 70-649: Upgrading your MCSE on Windows server 2003 to
Windows server 2008 prep kit, Syngress.
• Piltzecker, A., 2008. The Best Damn Multimedia Book Period, Syngress.
• Seguis, S., 2008. Microsoft Windows Server 2008 Administration in Simple Steps, Dreamtech Press.
43
Self Assessment
1. __________ is the most common method of publishing your files to the host server and is offered on almost
all serious hosting options.
a. FTP Access
b. Technical support
c. Microsoft FrontPage
d. HTML
2. Which of the following department is most important, which checks whether your provider offer helps installing
and running your site? Does this cost extra?
a. FTP Access
d. HTML
3. ___________ Contribute is a lower-cost sibling of Dreamweaver.

a. Adobe
b. HTML
c. WYSIWYG
d. ISP
4. __________ is a good program for beginners, but be warned that this program has a whole range of flaws and
does not have a good reputation in professional circles.
a. FTP Access
d. HTML
5. _____________ web-page editors are similar to word processors and they allow you to construct a web page
without using HTML instructions.
a. Adobe
b. HTML
c. WYSIWYG
d. ISP
6. Which of the following statements is true?

a. WYSIWYG means “When You See Is When You Get”.
b. WYSIWYG means “Which You See Is Will You Get”.
c. WYSIWYG means “What You See Is What You Get”.
d. WYSIWYG means “Who You See Is Which You Get”.
7. To view an ___________ document, you must use a browser or similar software.

a. Adobe
b. HTML
c. WYSIWYG
d. ISP
44
8. The ___________ opens the HTML document in the background and “decodes” it before showing it.
a. Browser
b. Web page
c. ISP
d. HTML
9. A _________ is an “HTML Document”.

a. Browser
b. Web page
c. ISP
d. HTML
10. The quickest and easiest way to make a site is to use an on-line “wizard” supplied by your ____________ or
some other organisation.
a. Browser
b. Web page
c. ISP
d. HTML
45
Chapter IV
Internet Services
Aim
• introduce the web of internet
• elucidate World Wide Web
• explain the browser software
Objectives
• recognise the elements of web navigation
• determine browser in details
• elucidate the term bookmarks
Learning outcome
• understand new group hierarchies
• identify the type of new groups
• understand e-mail operations
46
4.1 Introduction: The Internet
The Internet is not confined to just web browsing. It has several other services, which are equally popular. The
following diagram shows the various services offered by the Internet.
email
FTP
World Wide Web
I.M.
Telnet Chat
P2P
Gopherspace
Fig. 4.1 World Wide Web
4.2 World Wide Web (WWW)

The World Wide Web (abbreviated as the Web or WWW) is a system of Internet servers that supports hypertext
to access several Internet protocols on a single interface. Almost every protocol type available on the Internet is
accessible on the Web. This includes e-mail, FTP, Telnet, and Usenet News. In addition to these, the World Wide
Web has its own protocol: Hyper Text Transfer Protocol, or HTTP.
The World Wide Web provides a single interface for accessing all these protocols. This creates a convenient and user-
friendly environment. It is no longer necessary to be conversant in these protocols within separate, command-level
environments. The Web gathers together these protocols into a single system. Because of this feature, and because
of the Web’s ability to work with multimedia and advanced programming languages, the Web is the fastest-growing
component of the Internet.
The operation of the Web relies primarily on hypertext as its means of information retrieval. HyperText is a document
containing words that connect to other documents. These words are called links and are selectable by the user. A
single hypertext document can contain links to many documents. In the context of the Web, words or graphics may
serve as links to other documents, images, video, and sound. Links may or may not follow a logical path, as each
connection is programmed by the creator of the source document. Overall, the Web contains a complex virtual web
of connections among a vast number of documents, graphics, videos, and sounds.
Producing hypertext for the Web is accomplished by creating documents with a language called HyperText Markup
Language, or HTML. With HTML, tags are placed within the text to accomplish document formatting, visual
features such as font size, italics and bold, and the creation of hypertext links. Graphics and multimedia may also be
incorporated into an HTML document. HTML is an evolving language, with new tags being added as each upgrade
of the language is developed and released. The World Wide Web Consortium (W3C), coordinates the efforts of
standardising HTML. The W3C now calls the language XHTML and considers it to be an application of the XML
language standard.
47
The World Wide Web consists of files, called pages or home pages, containing links to documents and resources
throughout the Internet. The Web provides a vast array of experiences including multimedia presentations, real-time
collaboration, interactive pages, radio and television broadcasts, and the automatic “push” of information to a client
computer. Programming languages such as Java, JavaScript, Visual Basic, Cold Fusion and XML are extending the
capabilities of the Web.
A growing amount of information on the Web is served dynamically from content stored in databases. The Web is
therefore not a fixed entity, but one that is in a constant state of development and flux.
4.3 Web Browsing

With your web browser as your ship, you can navigate through an ocean of information on the web. A browsing
service permits users to view information from remote computers without knowing the names of the individual
file names. In order to use the Internet, you need to access to some computer that has access to the Internet. This
computer might be:
• Your personal computer at home, connected to the Internet through an Internet Service Provider (ISP).
• A computer or workstation at your school or place of employment that is connected to the Internet.
• A computer at a library or Internet cafe, which is available for public use
• A handheld device that accesses the Internet through wireless signals.
• A computer or your home or office that uses Internet connections such as a cable modem, DSL, or some other
means.
• A terminal at your school or place of work that is connected to a main computer via Web browsers.
4.3.1 Browser Software Access The Web

The World Wide Web uses client-server interaction. The browser program acts as a client that uses the Internet to
contact a remote server for a copy of the requested page on the web. Browser software can display audio, video,
text and graphics. When a document appears on the screen, some of the items contain a link to another document.
It permits the user to navigate through document’s hypertext media with the help of mouse.
Browsers interact with user in two ways. The browser’s primary form of interaction occurs when the browser obtains
an item that the user has requested; the browser displays the contents of the web site requested. The displayed
document may contain integrated menus and embedded text called hypertext. The other form of interaction occurs
when the displayed documents contain several other hyper links. The user has choice going further deep into the
content at his will.
An identifier used to specify a particular page of WWW information is called Uniform Resource Locator (URL).
When a browser displays a page it also displays the URL of the page in the address bar of the browser. An URL
is analogous to a telephone number - a short string that identifies uniquely among millions of web pages. Given a
valid URL, a browser can go directly to the page without passing through other documents.
4.3.2 Start Up a Web Browser

Once you have access to an Internet-connected computer, you can access the Web if that computer has Web browser
software installed. Two popular Web browsers are Netscape Navigator and Microsoft Internet Explorer. Small
handheld devices may have their own versions of these
Web browsers or have a special Web browser that operates on them. Find out what Web browser the computer has
and start it up. If you have a Web browser, you can access much of the Internet’s content on Web sites.
4.3.3 Using the Web Browser

You use the Web browser typically through manipulating it with your mouse and cursor, and entering information
from your keyboard.
48
To open a Web address (URL), use your browser’s menu and chose File->Open Location. You might also be able
to click on the text in the “Address” box at the top of your browser, alter or enter a URL there, and press the Return
key.
Your browser
connects to a server
and requests a page
The server sends

back the requested
page
your machine server machine
running a web running a web
browser server
Fig. 4.2 A browsing service using client server interaction
To find out more ways to access a Web site, you can look in your browser’s documentation about how you can “open
a URL” or “point your browser to a URL” or “bring up a Web site”. Use your browser’s Help or online documentation
to learn more about your browser, such as how to bookmark information or create folders of “favourites.”
At the most basic level possible, the following diagram shows the steps that brought that page to your screen:
• Browser formed a connection to a Web server, requested a page and received it.
• When you type a URL into a browser, say “http://www.google.com/web-server.htm” the following steps
occur:
• The browser breaks the URL into three parts:
The protocol (“http”)
The server name (“www.google.com”)
The file name (“web-server.htm”)
• The browser communicates with a name server to translate the server name, “www.google.com” into an IP
address, which it uses to connect to that server machine.
• The browser then forms a connection to the Web server at that IP address on port 80 (well known port for
http).
• Following the HTTP protocol, the browser sends a GET request to the server, asking for the file “http:// www.
google.com”
• The server sends the HTML text for the Web page to the browser. The browser reads the HTML tags and formats
the page onto the screen.
• Note here the browser running client software and web server running server software.
4.3.4 Bookmarks
To move quickly to a user’s favourite URL, browsers have special mechanism called hot list or bookmark. This
mechanism allows maintaining one’s own favourite sites and upon clicking bookmarks button browser displays the
list in the form of a pull down menu. The user can pick any one from the list.
The advantage is convenience and fast. Every time a user need not type the entire URL address in the address bar.
49
The bookmarks are permanent. Once user saves an URL in the bookmark list they are stored permanently even after
the system gets shutdown. By running add/remove bookmarks utility option of the browser the user can maintain
his favorite list.
4.3.5 Cookies
Cookies provide capabilities that make the web much easier to navigate. The designers of almost every major site
use them because they provide a better user experience and make it much easier to gather accurate information
about the site’s visitors. They started receiving tremendous media attention back in 2000 because of Internet privacy
concerns, and the debate still rages.
A cookie is a piece of text that a Web server can store on a user’s hard disk. Cookies allow a Web site to store
information on a user’s machine and later retrieve it. The pieces of information are stored as name-value pairs.
Using cookies, sites can determine:

• How many visitors arrive?
• How many are new vs. repeat visitors?
• How often a visitor has visited?
• Sites can store user preferences
• E-commerce sites can implement things like shopping carts
In e-commerce cookies allows selling your information to others who might want to sell similar products to you.
That is the fuel that makes telemarketing and junk mail possible. An undesirable side effect!
4.3.6 Browser in Detail

Whichever Web browsers you have, spend some time getting to know it. Learn about some customisations that
can save your time and make it easier for you to surf the Web. Microsoft Internet Explorer is the most used Web
browser.
Customise your web browser

There are so many things, which a browser can do (see the fig.4.3). In the presentation option you can over ride
many specifications, which a web designer has chosen for transmission of his web page. For example choose a font
scheme to override Web “designers” who fix the font size to be too small:
Choose the menu Tools->Internet Options. Choose the Accessibility box (lower right-hand corner). Click the boxes
for “Ignore font styles specified on Web pages”
50
Basic Web Browser Functions
• open
• find
Navigation Aids • history
• back.forward
• Hotlinks/bookmarks
• print
• save as
• view sources
• mail
Services
• open
• reload
• help
• stop
• font
• colours
User Presentation Options
• size
• images on/off
• links to other pages
• inline images
• sounds
Pages can contain a variety of information
• movies
• forms
• navigation buttons
Table 4.1 Browser functions
Set your own font style in menu Tools->Internet Options, Fonts box. Choose your own font sizes in menu View-
>Text Size.
Set your own start page; or use a blank page (setting a blank page to be your start page--this saves a lot of time
when your Web browser launches as it does not have to load a Web page from the Internet.). The Web browser
manufacturer who usually sets it to a very graphically busy page like msn.com sets the default Web page when you
first install your Web browser. Every time you launch a Web browser, this page has to load.
If you want to set your start page to be a specific Web page, bring that page up in the Web browser. This page could
be an HTML file stored on your hard drive.
Refuse cookies except from sites you approve. A cookie is a file that is downloaded to your hard drive as a result
of visiting a Web site. Every Web page or image you see in your Web browser has to be downloaded to your disk
in a temporary area on your hard drive; otherwise you wouldn’t be able to see it at all. But cookies are special little
files that can be used to track sites that you visit. Many people like to clean them out or control when they are used.
Use cookie management built into your browser. Internet Explorer has some good features for controlling cookies.
Here is how to set them:
51
Choose the Internet Explorer menu option Tools->Internet Options

• Choose Privacy tab
• Choose Advanced box
• Check “Override automatic cookie handling”
• Check Block in First-party Cookies
• Check Block in Third-party Cookies
• Check Always allow session cookies
• Check OK
In Privacy tab, select Edit to handle cookies for individual Web sites Enter the domain names of trusted Web sites
that save information form you from session to session or require cookies in order to operate properly. For example:
osmania.ac.in, yahoo.com, and so on Check OK
• Customising browser’s toolbar: menu View->Toolbars->Customise... explore the options
• Use key sequences to save time
For each of these, make sure the Web browser of interest is the active window (indicated by highlighted title bar;
click on a window to make active).
The following are few key sequences worth remembering:
Internet Explorer Key Sequence

Ctrl/N Launch another Web browser
Ctrl/F Search for a text string on a Web page (the F stands for “Find”)
Ctrl/W Close a Web browser
Ctrl/H Bring up your history in a side panel; shows pages you have visited
Bring up your favorites in a side panel; shows pages you have
Ctrl/I
“bookmarked” to quickly visit again
Save a page URL to your favourites Stop the Music! (Some Web
Ctrl/D
“designers”
cause a music file to automatically start when you visit a Web page;
Esc
also stops loading graphics.)
Tab Move to next field in a Web form.
Tab Move to next link on Web page
Alt/D Move to the address box
This will cause the link to open in a new
Shift/click on hypertext link
Web browser
Table 4.2 Internet Explorer Key Sequence
Stop the popup windows

You may discover that when visiting or leaving some Web sites, a new window, usually containing an advertisement,
will appear on your computer. These are called popup windows and sometimes they can be irritating and make using
the Web efficiently almost impossible.
52
4.3.7 The Elements of Web Navigation
Indexes and search engines of various kinds have greatly facilitated access to the wealth of information on the Internet.
There are three general types of sites that can help you find information on subjects that you’re interested in:
Directory Sites
These sites put web sites into a structure of predefined categories after a review by a human being. You should start
with a directory site if you are looking for a category of information, like the Environment, Gardening, or Photography,
or for a well-known site likely to be in their directory. They can be a good place to search first followed by a wider
investigation with a general search engine if necessary.
Search Engines
Search engines automatically scan millions of web sites across the Internet, and then provide you with search access
to the resulting database. These databases are larger than those of directory sites, but don’t use any human quality
control. You should use a search engine when you are looking for detailed information, when you want to search
the largest number of web pages, and when you want to use advanced search features.
Specialised Search Sites

These sites provide specialised search functionality such as meta-searches (searching several engines at once),
multimedia searches, legal information searches, and other capabilities.
There are four directions you can surf, and five basic techniques.
• Directions: From any page you can surf in one of four directions:
• Back: Go back to the previous page -- press the Back button, right-click on the window and select “Back”, or
press <alt><left arrow>.
• Forward: Go forward to a new page after going back -- press the Forward button, right-click on the window
and select “Forward”, or press <alt><right arrow>.
• Link: Click a link and jump to a new page.
• Jump: Select a new page from an external source such as your bookmarks.
• Techniques: The five basic surfing techniques are described as follows:
• Surfing: You don’t have to wait for a page to load to either click a link, press the back button, or select a new
link from your bookmarks. You can take action whenever you are ready. Jumping ahead of the browser is
recommended if the link you want is already loaded but the rest of the page is lagging behind. When you click
on a link as soon as it is available, you speed up and enjoy the feeling of surfing from wave to wave.
• Chains: After you click on several links and proceed through several pages, you create a chain of web sites
accessible with the down-arrow beside your browser’s Back button. You can click on the browser Back button
to return to a previous page and read it again, and then repeatedly click forward to return to the last page without
the trouble of finding the links you used last time. If you click a new link from any page, you start a new chain
from that point on.
• Reloading: You can stop and then reload a page at any time if it is having problems loading or to ensure you
have the latest copy of a page that updates regularly. Click the Refresh button/or right-click on the window and
select “Refresh”, press <ctrl>-r, or press F5.
• Stopping: You can stop the load of any page at any time by clicking Stop on the toolbar or pressing <Esc>. The
browser will display as much of the page as it loaded, and all of the displayed links will be operational.
• Restarting: If a page seems to be taking a long time to load, don’t hesitate to stop the connection and then select
the link again. As long as the messages in the bottom border show that some parts of the page are loading then
you should let it continue, but if nothing happens for more than a minute then something is likely stalled, and you
should stop and reload the page again. HTTP connections often get dropped on busy web sites, and requesting
the page again will often load it quickly on a new connection.
53
4.3.8 Searching
When should one use a search engine?
• When you have a narrow or obscure topic or idea for research
• When you are looking for a specific site
• When you want to search the full text of millions of pages • When you want to retrieve a large number of
documents on your topic
• When you want to search for particular types of documents, file types, source locations, languages, date last
modified and so on.
• When you want to take advantage of newer retrieval technologies such as concept clustering, ranking by
popularity, link ranking, and so on
Google search engine is useful when:

• You are looking for a specific fact/person/event/narrow topic
• Your topic is made up of multiple ideas
• You like Google’s specialised features such as spell checking, phone book and flight lookups, stock prices and
so on.
• You want to take advantage of Google’s advanced search interface that lets you fill out a form to do a search
targeted to your needs
Google is a general search engine that is everyone’s favourite these days. It ranks results by the number of links
from pages also ranked high by the service. This unique ranking system can be quite effective.
Google Features
• Returns results ranked by the number of links from a high number of pages ranked high by the service; the
number of links to them also determines high-ranking pages.
• In determining relevancy ranking, the engine also looks at various textual clues including linking text.
• Suggests an alternative searches when search terms are misspelled.
• Search results include sites from the Open Directory Project, offering an interesting mix of sites from the wider
Web and those chosen by editors for inclusion into the directory the Google Web Directory.
• Requires no syntax: By default it has AND association that is you need not put AND between two words OR
searching is supported if “OR” is typed in CAPS, example, university OR college; works only with multiple
single words.
• For more refined searches, use quotations for exact phrases (“El Nino”)
• A minus sign (-) for which doesn’t have that phrase
• Results include the text from the source document that matches your query
Searches the deep Web for such information as:

Files in Portable Document Format, Microsoft Word, Excel, and PowerPoint, Rich Text Format and PostScript
• Images, from the Advanced Web Search interface or from Google Image Search
• Maps from Yahoo! or MapBlast (enter an address)
• Phone book entry (enter first and last name, and city or zip)
• Stock prices (enter a company’s ticker symbol)
54
Limitations
New web pages will not appear in your results, as it takes time for the creators of other Web pages to link to new
resources. People who maintain web pages can manipulate Google results. Hackers and others sometimes attempt
to associate words with a link to a specific Web site to make a political or other point. For example, the search terms
“miserable failure” point to the official George Bush site. This site may become the number one hit on Google, even
though the words are not relevant to it.
Few search examples:

Concept search
Query: I’d like to learn more about Richard Nixon’s resignation.
Type: Nixon resignation [Google defaults to Boolean AND logic]

Examine the results for relevancy
Note the related categories from the Google Web Directory listed at the top of the results screen
Phrase Search
Query: I’d like to see information on the movie Gone with the Wind.
Type “Gone with the Wind” and press Enter/or click search button [search criteria in quotes, capitalisation is not
necessary] See the results
Field Search
Field searching is a way to narrow the search to specific parts of the document or record. Google offers a variety of
ways to use field searching to better focus your results. First, let’s try a simple search that is not a field search.
Query: I’d like to see information on slavery.
This is isn’t the wisest search to do in a large, full-text database like Google because it brings back too many
results.
Let’s look into ways to focus our results by using field searching. We will try these searches using Google’s basic
search box. Keep in mind that most of Google’s field search options are also available on their Advanced Search
form that is even easier to use.
intitle:slavery will look for slavery in the title field embedded within the HTML document.
Inurl slavery will look for slavery in the URL of the file,
Query: I’d like information about the Mars rover missions from the NASA site.
Search: +”Mars rover” +site:nasa.gov
55
4.4 News groups

A newsgroup is a repository, for messages posted from many users at different locations. The term is somewhat
confusing, because it is usually a discussion group. Newsgroups are technically distinct from, but functionally similar
to, discussion forums on the World Wide Web. Newsreader software is used to read newsgroups.
4.4.1 News Group Hierarchies

Newsgroups are often arranged into hierarchies, theoretically making it simpler to find related groups. The term
top-level hierarchy refers to the hierarchy defined by the prefix prior to the first dot.
The most commonly known hierarchies are the usenet hierarchies. So for instance newsgroup rec.arts.sf.starwars.
games would be in the rec.* top level usenet hierarchy, where the asterisk (*) is defined as a wildcard character.
There were seven original major hierarchies of usenet newsgroups, known as the “Big 7”:
• comp.*—Discussion of computer-related topics
• news.*—Discussion of Usenet itself
• sci.*—Discussion of scientific subjects
• rec.*—Discussion of recreational activities (e.g. games and hobbies)
• soc.*— Socialising and discussion of social issues.
• talk.*— Discussion of contentious issues such as religion and politics.
• misc.*—Miscellaneous discussion—anything which doesn’t fit in the other hierarchies.
These were all created in 1986–1987, prior to which all of these newsgroups were in the net.* hierarchy. At that
time there was a great controversy over what newsgroups should be allowed. Among those that the usenet (who
effectively ran the Big 7 at the time) did not allow hierarchies concerning recipes, drugs, and sex.
This resulted in the creation of an alt.* (short for “alternative”) usenet hierarchy where these groups would be
allowed. Over time the laxness of rules on newsgroup creation in alt.* compared to Big 7 meant that many new
topics that could, given time, gain enough popularity to get a Big 7 newsgroup had newsgroups instead created in
alt.*. This resulted in a rapid growth of alt.* which continues to this day.
4.4.2 Types of Newsgroups

Typically, a newsgroup is focused on a particular topic such as “shellfish”. Some newsgroups allow the posting of
messages on a wide variety of themes, regarding anything a member chooses to discuss as on-topic, while others
keep more strictly to their particular subject, frowning on off-topic postings. The news admin (the administrator of
a news server) decides how long articles are kept before being expired (deleted from the server). Usually they will
be kept for one or two weeks, but some admins keep articles in local or technical newsgroups around longer than
articles in other newsgroups.
Newsgroups generally come in either of two types, binary or text. There is no technical difference between the
two, but the naming differentiation allows users and servers with limited facilities the ability to minimise network
bandwidth usage. Generally, Usenet conventions and rules are enacted with the primary intention of minimising
the overall amount of network traffic and resource usage.
Newsgroups are much like the public message boards on old bulletin board systems. For those readers not familiar
with this concept, envision an electronic version of the corkboard in the entrance of your local grocery store.
There are currently well over 100,000 Usenet newsgroups, but only 20,000 or so of those are active. Newsgroups
vary in popularity, with some newsgroups only getting a few posts a month while others get several hundred (and
in a few cases several thousand) messages a day.
56
Weblogs have replaced some of the uses of newsgroups [especially because, for a while, they were less prone to
spamming(un-wanted messages)].
4.4.3 How Newsgroups Work?

Various organisations and institutions host newsgroup servers. Most Internet Service Providers (ISPs) host their
own News Server, or rent access to one, for their subscribers. There are also a number of companies who sell access
to premium news servers.
Every host of a news server maintains agreements with other news servers to regularly synchronise. In this way
news servers form a network. When a user posts to one news server, the message is stored locally. That server then
shares the message with the servers that are connected to it if both carry the newsgroup, and from those servers to
servers that they are connected to, and so on.
4.4.4 Binary Newsgroups

While Newsgroups were not created with the intention of distributing binary files, they have proven to be quite
effective for this. Due to the way they work, a file uploaded once will be spread and can then be downloaded by an
unlimited number of users. More useful is the fact that every user is drawing on the bandwidth of their own news
server. This fact means that opposed to a P2P technology, the user’s download speed is under their own control,
as opposed to under the willingness of other people to share files. In fact this is another benefit of Newsgroups: it
is usually not expected that users share. If every user makes uploads then the servers would be flooded, thus it is
acceptable and often encouraged for users to just leech.
Files can be attached to a post, but there is a very small limit in the size of the file, which can be attached. As such
people have come up with methods to encode a file into text, which is posted as a post rather than attached to a
post. There is a limit to how large a single post may be as well, so methods were developed to chain multiple posts
together. The newsreader then intelligently joins the posts and decodes it into a binary file. A number of websites
exist for the purpose of keeping an index of the files posted to binary Newsgroups.
4.5 Mailing Lists

A mailing list is a collection of names and addresses used by an individual or an organisation to send material
to multiple recipients. The term is often extended to include the people subscribed to such a list, so the group of
subscribers are referred to as “the mailing list”, or simply “the list”.
At least two quite different types of mailing lists can be defined: the first one is closer to the literal sense, where a
“mailing list” of people is used as a recipient for newsletters, periodicals or advertising. Traditionally this was done
through the postal system, but with the rise of e-mail, the electronic mailing list became popular.
When similar or identical material is sent out to all subscribers on a mailing list, it is often referred to as a mailshot.
Mailing lists are often rented or sold. If rented the renter agrees to use the mailing list for only the agreed upon
times. The mailing list owner typically enforces this by “salting” the mailing list with fake addresses.
4.6 Chat Rooms

A chat room is an online forum where people can chat online (talk by broadcasting messages to people on the same
forum in real time). Sometimes these venues are moderated either by limiting who is allowed to speak (not common) or
by having moderation volunteers patrolling the venue watching for disruptive or otherwise undesirable behavior.
Chat systems include Internet Relay Chat (or IRC, where rooms are called “channels”), There are several proprietary
systems on the Microsoft Windows and Java platforms. Some chat rooms go beyond text messages incorporating 2D
and 3D graphics referred as visual chat or virtual chat. These environments are capable of incorporating elements
such as games and educational material most often developed by individual site owners, who in general are simply
more advanced users of the systems.
57
Some chat room sites incorporate audio and video communications. People may chat in audio and watch each other
there. Lesser known is the UNIX based talker. Chatrooms are often confused (especially by the popular media)
with discussion groups, which are similar but do not take place in real time and are usually run over the World
Wide Web.
Recently much chat room and instant messaging technology has begun to merge as the dominance of the big three
instant messaging providers (AOL, Yahoo and MSN) have tied chat rooms directly into their instant messaging
interfaces. This centralisation trend is likely to continue to dominate the chat world as these providers begin to
merge their services and cooperate in their IM and chat protocols.
4.7 E-Mail
Electronic mail was originally designed to allow a pair of individuals to communicative via computer. The first
electronic mail software provided only a basic facility: it allowed a person using one computer to type a message
and send it across the Internet to a person using another computer.
Current Electronic mail systems provide services that permit complex communication and interaction. For example,
Electronic mail can be used to:
• Send a single message to many recipients.
• Send a message that includes text, audio, video or graphics.
• Send a message to a user on a network outside the Internet.
• Send a message to which a computer program responds.
Researchers working on early computer networks realised that networks can provide a form of communication among
individuals that combines the speed of telephone communication with permanence of postal mail. A computer can
transfer small notes or large documents across a network almost instantaneously. The Designers called the new form
of communication electronic mail often abbreviated as email. The concept of Email has become extremely popular
in the Internet as well as on most other computer networks.
To receive electronic mail, a user must have a mailbox, a storage area, usually on disk, that holds incoming email
messages until the user has time to read them. In addition, the computer on which a mailbox resides must also run
email software. When a message arrives, email software automatically stores it in the user’s mailbox. An email
mailbox is private in the same way that postal mailboxes are private: anyone can send a message to a mailbox; only
the owner can examine mailbox contents or remove messages.
Like a post office mailbox each email mailbox has a mailbox address. To send email to another user, one must know
the recipients mail box address. Thus,each individual who participates in electronic mail exchange has a mailbox
identified by a unique address xyz@yahoo.com
Any User can send mail across the Internet to another user’s mailbox if they know the mailbox address.
Only the owner can examine the contents of a mail box and extract messages.
To send electronic mail across the Internet, an individual runs an email application program on their local computer.
The local application operates similar to a word processor-- It allows a user to compose and edit a message and to
specify a recipient by giving a mailbox address.
58
Once the user finishes entering the message and adds attachments, email software sends it across the Internet to the
recipient’s mailbox. When an incoming email message arrives, system software can be configured to inform the
recipient. Some computers print a text message or highlight a small graphic on the users display (example, a small
picture of letters in a postal mail box). Other computers sound a tone or play a recorded message. Still other computers
wait for the user to finish viewing the current application before making an announcement. Most systems allows a
user to suppress notification altogether, in which case the user must periodically check to see if email has arrived.
Once email has arrived, a user can extract messages from his or her mailbox using an application program. The
application allows a user to view each message, and optionally, to send a reply. Usually, when an email application
begins, it tells the user about the messages waiting in the mailbox. The initial summary contains one line for each
email message that has arrived; the line gives the sender’s name, the time the message arrived, and the length of the
message. After examining the summary, a user can select and view messages on the list. Each time a user selects a
message from the summary, the email system displays the message contents. After viewing a message, a user must
choose an action. The user can send a reply to whoever sent the message, leave the message in the mail box so it
can be viewed again, save a copy of the message in the file, or discard the message.
A computer connected to the Internet needs application software before users can send or receive electronic mail.
Email software allows a user to compose and send message or to read messages that have arrived.
A user can send a reply to any message.
Usually, the sender only needs to supply information for the TO and SUBJECT lines in a message header because
email software fills in the date and the senders mailbox address automatically. In a reply, the mail interface program
automatically constructs the entire header. It uses the contents of the FROM field in the original message as the
contents of the TO field in the reply. It also copies the subject field from the original message to a reply. Having
software fill in the header lines is convenient, and also makes it difficult to forge email.
In practice, most email systems supply additional header lines that help identify the sending computer, give the
full name of the person who sent the message, provide a unique message identifier that can be used for auditing
or accounting, and identify the type of message (Example, text or graphics). Thus, email messages can arrive with
dozens of lines in the header. A lengthy header can be annoying to a recipient who must skip past it to find the body
of a message. Software used to read email can make it easier for the recipient by skipping most header lines.
Although, most email messages contain many lines of header, software generates most of the header automatically.
User-Friendly software hides unnecessary header lines when displaying an email message.
4.7.1 E-Mail Operation:

A computer communication always involves interaction between two programs called a client and a server. E-mail
systems follow the client server approach: Two programs co operate to transfer an email message from the sender’s
computer to the recipient’s mail box (transfer requires two programs because an application running on one computer
cannot store data directly in a mailbox on another computer’s disk). When a user sends an email message, a program
on the sender’s computer become a client. It contacts an email server program on the recipient’s computer and
transfers a copy of the message. The server stores the message in the recipient’s mailbox.
59
sender’s recipient’s
computer mail box
e-mail e-mail
client server
TCP/IP used to
transfer message
Internet
Fig. 4.3 Email operation
Client software starts automatically as a user finishes composing an email message. The client uses the recipients
email address to determine which remote computer to contact. The client uses TCP to send a copy of the email
message across the Internet to the server. When the server receives a message, it stores the message in the recipient’s
mailbox and informs the recipient that email has arrived.
The interaction between a client and a server is complex because at any time computers or the Internet connecting
them can fail (example, someone can accidentally turn off one of the computers). To ensure that email will be
delivered reliably, the client keeps a copy of the message during the transfer. After the server informs the client that
the message has been received and stored on the disk, the client erases its copy.
A computer cannot receive e-mail unless it has an e-mail server program running. On large computers, the system
administrator arranges to start the server when the system first begins, and leaves the server running at all times.
The server waits for an email message to arrive, stores the message in the appropriate mailbox on disk, and then
waits for the next message.
A user who has a personal computer that is frequently powered down or disconnected from the Internet cannot
receive email while the computer is inactive. Therefore, most personal computers do not receive email directly.
Instead, a user arranges to have a mailbox on a large computer with a server that always remains ready to accept
an email message and store it in the users mailbox. For example, a user can choose to place their mailbox on their
company’s main computer, even if they use a personal computer for most work. To read email from a personal
computer, a user must contact the main computer system and obtain a copy of their mailbox.
4.8 Internet Fax

Fax (facsimile) is a simple form of digital transmission for transmission of images over voice grade telephone
system. Each fax machine consists of four main components: a printer, scanner, dial-up modem and an embedded
(dedicated) computer system, which coordinates the former three components.
While sending the machine uses modem to dial a number and wait for another modem to answer. Most fax machines
are designed to answer after three ring tones. Once modem answers they get synchronised and the sending machine
can use its scanner to scan the page line by line, digitises the image into electrical signals and transmits across the
telephone lines.
60
At the receiving end incoming digitised values are sent to the printer to create a copy of the transmitted page.
Now with the advent of the Internet computers can be used to send a fax. The two-fax machines can be modified
to communicate across the Internet or a file document can be sent from a computer to a fax machine. Since
Internet handles digital information more efficiently the future fax machines are going to be based on the Internet
technology.
4.9 File Transfer Protocol (FTP)

Although services like email, Internet fax can be utilised for sending files over the net they are not designed for
handling large volumes of data. For sending large volumes of data reliably over the net File Transfer Protocol (FTP)
is preferred instead.
FTP works in interactive environment. Just type ftp at the DOS command prompt to enter into ftp interactive session.
FTP responds to each command the user enters. For example, when a session begins, the user enters a command to
identify a remote computer. FTP then establishes a connection to the remote computer. In the same way, to terminate
a session user tells FTP to relinquish its connection.
4.9.1 FTP Commands

There are around 58 separate commands but the average user need to know only three following basic commands
• open <name of the ftp computer>: for connecting to a remote computer.
• get <filename>: for retrieve a file from the computer.
• bye: Terminate the connection and leave the ftp session.
ftp can be used not only to retrieving files but also for uploading/sending file by using send command. Once a
connection has established just type the command send along with the file name to be sent. A copy of the file will be
transferred to the remote computer. Of course, the FTP on the remote site must be configured to allow file storage.
Many Internet sites that run ftp allow storage.
4.9.2 FTP File Types

FTP understands only two basic file formats. It classifies each file as either a text file or a binary file. Text file supports
ASCII encoding. FTP has commands to convert a non ASCII text file to ASCII text file. FTP uses classification of
binary files for all non text files. For example the following type of files should be specified as binary files.
• A computer program
• Audio data
• A graphic or video image.
• A spread sheet
• A word processor document
• Compressed files
The compressed file refers to a file, which has been processed to reduce its size by running file compress utility. By
using file uncompressing utilities like unzip the original file can be reconstructed.
Choosing between binary and ASCII transfer can be sometimes difficult. When you are unsure about the type of the
file choose binary option for transferring the file. If a user requests FTP to perform a transfer using incorrect type
the resulting transferred copy may be damaged.
4.9.3 FTP Login

The user must login into the ftp site as an authentic user before performing any ftp based transactions. Usually the
user will be provided with login name and password. This way the site is protected from malicious users and keeps
the data secure.
61
To make files available to the general public, a system administrator can configure FTP to honor anonymous FTP.
It works like standard FTP, except that it allows anyone to access public files. To use anonymous FTP, a user enters
the login as anonymous and the password as guest.
Few sites may prompt for the user’s email address just in case of any errors like log failures so that those error
messages can be emailed. Most users invoke FTP through a web browser so that the ftp transactions can be made
in a graphic user interface (GUI) environment. FTP operation FTP operation is also based on client server model.
Remote User
computer computer
FTP FTP
server client
TCP/IP
communication
File
Internet
Fig. 4.4 FTP operation
The user invokes a local FTP program or enters a URL that specifies FTP. The local FTP program or the user’s browser
becomes an FTP client that uses TCP to contact an FTP server program on the remote computer. Each time the user
requests a file transfer, the client and server program interacts to send a copy of the data across the Internet.
The FTP server locates the file that the user requested, and uses TCP to send a copy of the entire contents of the
file across the Internet to the client as the client program receives data, it writes the data into a file on the user’s
local disk. After the file transfer completes, the client and server programs terminate the TCP connection used for
the transfer.
Here is an example typical FTP session:
$ ftp plaza.aarnet.edu.au
Connected to plaza.aarnet.edu.au.
220 plaza.aarnet.EDU.AU FTP server (Version wu-2.4(2) Fri Apr 15 14:04:20 EST 1994) ready.
Name (plaza.aarnet.edu.au:jphb): ftp
Guest login ok, send your complete e-mail address as password.
This is the AARNet Archive Server, Melbourne, Australia.
The disk that failed back in September is still not back on-line.
As a consequence of this, we are only shadowing files modified in-the last 100 days on many of the more popular
archives. We apologise for this inconvenience.
62
Local time is Tue Jun 4 17:46:00 1996
Please read the file /info/welcome-ftpuser
it was last modified on Fri Apr 22 14:47:05 1994 - 774 days agoGuest login ok, access restrictions apply.
ftp> pwd
“/” is current directory.
Transfer complete.
bytes received in 0.018 seconds (11 Kbytes/s)
ftp> cd rfc
CWD command successful.
ftp> get rfc1048.txt.gz
PORT command successful.
Opening ASCII mode data connection for rfc1048.txt.gz (5141 bytes).
Transfer complete.
local: rfc1048.txt.gz remote: rfc1048.txt.gz
1 bytes received in 1.6 seconds (3.2 Kbytes/s)
ftp> quit
4.10 TELNET
The Telnet protocol is often thought of as simply providing a facility for remote logins to the computer via the
Internet. This was its original purpose although it can be used for many other purposes.
It is best understood in the context of a user with a simple terminal using the local telnet program (known as the
client program) to run a logic session on a remote computer where his communications needs are handled by a
telnet server program on the remote computer. It should be emphasised that the telnet server can pass on the data it
has received from the client to many other types of process including a remote login server.
Remote Remote
computer timesharing
computer
Client server
TCP/IP
User’s Monitor, Internet

keyboard, mouse
Fig. 4.5 Telnet session
Once connection has been established between the client and server, the software allows the user to interact directly
with the remote computer’s operating system. For all users’ inputs the server sends output and displays on user’s
screen.
63
After a user logs out of the remote computer, the server on the remote computer terminates the Internet connection
informs the client that the session has expired and control of the keyboard, mouse and display returns to the local
computer.
The remote access by telnet has three significant reasons. It makes computation remote from the user. Instead of
sending a data file or a message from one computer to another, remote access allows a program to accept input,
process it and send back the result to the remote user.
Secondly, once user logs in to the remote computer the user can execute any kind of program residing in the remote
server. Finally users working in heterogeneous platforms telnetting may become a common interface for different
machines.
Here’s an example of a telnet session to osmania

$ telnet
telnet> toggle options
Will show option processing.
telnet> open osmania
Trying 202.54.70.200
Connected to linux osmania
Escape character is ‘^]’.
64
Summary
• The Internet is not confined to just web browsing.
• The World Wide Web (abbreviated as the Web or WWW) is a system of Internet servers that supports hypertext
to access several Internet protocols on a single interface.
• The World Wide Web provides a single interface for accessing all these protocols.
• The operation of the Web relies primarily on hypertext as its means of information retrieval.
• The Web contains a complex virtual web of connections among a vast number of documents, graphics, videos,
and sounds.
• Producing hypertext for the Web is accomplished by creating documents with a language called HyperText
Markup Language, or HTML.
• The World Wide Web consists of files, called pages or home pages, containing links to documents and resources
throughout the Internet.
• A browsing service permits users to view information from remote computers without knowing the names of
the individual file names.
• The World Wide Web uses client-server interaction.
• Cookies provide capabilities that make the Web much easier to navigate.
• A cookie is a piece of text that a Web server can store on a user’s hard disk.
• A cookie is a file that is downloaded to your hard drive as a result of visiting a Website.
• Indexes and search engines of various kinds have greatly facilitated access to the wealth of information on the
Internet.
• Field searching is a way to narrow the search to specific parts of the document or record.
• Google offers a variety of ways to use field searching to better focus your results.
• Newsgroups are often arranged into hierarchies, theoretically making it simpler to find related groups.
• Newsgroups generally come in either of two types, binary or text.
• A chat room is an online forum where people can chat online (talk by broadcasting messages to people on the
same forum in real time).
• A computer communication always involves interaction between two programs called a client and a server.
• Fax (facsimile) is a simple form of digital transmission for transmission of images over voice grade telephone
system.
• The compressed file refers to a file, which has been processed to reduce its size by running file compress
utility.
• Instead of sending a data file or a message from one computer to another, remote access allows a program to
accept input, process it and send back the result to the remote user.
References
• Totok, A., 2009. Modern Internet Services, Alexander Totok.
• Smirnov, I. M., 2001. Quality of Future Internet Services: Second COST 263 International Workshop, QofIS
2001.Coimbra, Portugal, September 24-26, 2001: Proceedings, Springer.
• Getting Started with Internet Services, [Online] Available at: < http://download.support.xerox.com/pub/docs/
DC340ST/userdocs/any-os/en/DC_220_230_332_340_GS_with_Internet_Serv.pdf > [Accessed 20 June
2012].
• Hamilton, J., On Designing and Deploying Internet-Scale Services, [Online] Available at: <http://www.mvdirona.
com/jrh/talksAndPapers/JamesRH_Lisa.pdf> [Accessed 20 June 2012].
65
• Prof. Sengupta, I., Lecture -9 Client Server Concepts DNS,Telnet,Ftp, Department of Computer Science &
Engineering ,IIT Kharagpur, [Video Online] Available at: <http://www.youtube.com/watch?v=eA9mnY1Z2so>
• technoblogical, 2011. What is FTP, [Video Online] Available at: <http://www.youtube.com/watch?v=hiQrYptlZ08>
Recommended Reading
• Prasad, R. A., Buford, F. J., Gurbani, V. K., 2011. Future Internet Services and Service Architectures, River
Publishers.
• Surhone, M. L., Tennoe, T. M., Henssonow, F. S., 2010. Internet Services, VDM Publishing.
• Sample, T. J., 2008. Geospatial Services and Applications for the Internet, Springer.
66
Self Assessment
1. Which of the following is a system of internet servers that supports hypertext to access several internet protocols
on a single interface?
a. HTTP
b. HTML
c. FTP
d. WWW

a. The operation of the Web relies primarily on hypertext as its means of information retrieval.
b. Microsoft Text is a document containing words that connect to other documents.
c. A single hypertext document can contain links to many documents.
d. The Web contains a complex virtual web of connections among a vast number of documents, graphics,
videos, and sounds.
3. The World Wide Web consists of files, called ____________.

a. bookmarks
b. XHTML
c. home pages
d. W3C
4. A _____________ permits users to view information from remote computers without knowing the names of
the individual file names.
a. browsing service
b. computer
c. service provider
d. URL
5. What is the full form of URL?

a. United Research Locator
b. Uniform Reform Location
c. Uniform Research Location
d. Uniform Resource Locator
6. ___________ provide capabilities that make the web much easier to navigate.
a. Server
b. Bookmark
c. HTTP protocol
d. Cookies
7. Which of the following is not one of the basic surfing techniques?

a. Link
b. Surfing
c. Chains
d. Reloading
67
8. Newsgroups generally come in either of two types, binary or _________.

a. tertiary
b. secondary
c. decimal
d. text
9. Which of the following is included in chat system?

a. IRC
b. 2D
c. UNIX
d. AQL
10. ___________ is a simple form of digital transmission for transmission of images over voice grade telephone
system.
a. FTP
b. Fax
c. DOS
d. GUI
68
Chapter V
HTML
Aim
• introduce the term HTML
• elucidate formatting and URL
• explain the hyper links and character entities
Objectives
• recognise the form usage on the server
• determine tabular formation
• elucidate background graphics
Learning outcome
• understand Common Gateway Interface
• identify the structure of a CGI script
• understand usemaps
69
5.1 Introduction
Some of the important facts about HTML are as follows:
• HTML stands for Hyper Text Markup Language.
• An HTML file is a text file containing small markup tags.
• The markup tags tell the Web browser how to display the page.
• An HTML file must have an htm or html file extension.
• An HTML file can be created using a simple text editor.
• HTML documents are text files made up of HTML elements.
• HTML elements are defined using HTML tags.
• HTML tags are surrounded by the two characters < and > the surrounding characters are called angle
brackets.
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag.
• The text between the start and end tags is the element content.
• HTML tags are not case sensitive, <b> means the same as <B>.
• However the World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation,
and XHTML (the next generation HTML) demands lowercase tags.
5.2 HTML
Each HTML document consists of head and body tags. The head contains the title, and the body contains the actual
text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are
programmed according to HTML specifications. The following is a simple HTML program:
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<h1>HTML is Easy To Learn</h1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short it is
still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
Fig. 5.1 Browser output for the simple program
70
5.3 Formatting
5.3.1 Text Formatting

Headings: <hk> …</hk> (‘k’ is a number from 1 to 6) Use heading tags for headings only. Don’t use them for
making text bold. There are separate commands for that purpose.
<h1> ----text----- </h1>

<h2> ---- text ---- </h2>
<h3> ---- text ---- </h3>
<h4> ----- text --- </h4>
<h5> ----- text --- </h5>
<h6> ------ text -- </h6>
<p> Paragraph: As earlier mentioned browser creates a paragraph. A blank line is added before and after the each
paragraph. You can enter a paragraph in the browser output by including the:
ALIGN=alignment attribute in your source html file.
<P ALIGN=CENTER> This is a centered paragraph.</P>
<br>Line breaks: The browser simply ignores white spaces, new lines present in the body of the text of a
paragraph. However by placing <br> command a new line is forced from that point in that paragraph (but not new
paragraph!)
<!.. ..>Comments: For documentation purpose insert your comments

in <!..>
<! ………..comments…………>
<b> Defines bold text
<big> Defines big text
<em> Defines emphasised text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
71
Fig. 5.2 Computer output tags
<code> Defines computer code text

<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
Fig. 5.3 Browser output for different computer tags
5.3.2 Citations, Quotations, and Definition Tags

<abbr> Defines an abbreviation.<abbr>
title=”Hyper Text Markup Language”>HTML</abbr>
<acronym> Defines an acronym. The title attribute is used to show the
spelled-out version when holding the mouse pointer over the acronym or
abbreviation
<address> Defines an address element
<bdo> Defines the text direction. bi-directional override (bdo)
<bdo dir=”rtl”>Hello World!</bdo> <! ..Right to left..>
Browser output = !dlroW olleH
<blockquote> Defines a long quotation
72
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
5.3.3 Character Entities

Few characters like the ‘< ‘character, have a special meaning in HTML, and therefore cannot be used in the normal
text. We have to use character entities in order to display these characters. They can also be called by &#asci number
in decimal &nbsp non-breaking space &#160. Normally HTML will truncate spaces in your text. To add spaces to
your text, use the &nbsp character entity.
&lt < less than; <

&gt > greater than; >
&amp & ampersand; &
&quot “ quotation mark; "
&apos ‘ apostrophe
5.4 Hyperlinks
Hyperlinks are created using anchor tags.
Anchor tag a with href attribute
<a href=”http://www.apboi.ac.in/”>Visit Board of Intermediate</a>
In the browser it would look like as a hyperlink to http://www.apboi.ac.in for that text – Visit Board of Intermediate
-. Whenever user places his mouse pointer and clicks on that text, the web page with specified URL will be opened.
If any sub folders are there in the specified URL, include them in the href definition with slashes. In such cases the
browser makes more than one request. The first one for the main URL and the next one for the sub folder within
the URL*.Visit Board of Intermediate
5.5 URLs
A URL includes the type of resource being accessed (Example, Web, gopher, FTP), the address of the server, and
the location of the file. The syntax is:
scheme://host.domain [:port]/path/ filename

Where scheme is one of the following:
file a file on your local system

ftp a file on an anonymous FTP server
http a file on a World Wide Web server
gopher a file on a Gopher server
WAIS a file on a WAIS server
news a Usenet newsgroup
telnet a connection to a Telnet-based service
The port number can generally be omitted.
Target attribute
The following code will open the URL in a new browser window
<a href=”http://www.apboi.ac.in/” target =“_blank”>Visit Board of intermediate</a>
73
Name attribute
Using named anchors we can create links that can jump directly into a specific section on a page within the
document.
<a name=”go to second chapter>”4.2 Formatting</a>
5.6 Background Graphics

If you want to include a background, make sure your text can be read easily when displayed on top of the image.
Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly).
You create the background image as you do any image.
However you only have to create a small piece of the image. Using a feature called tiling; a browser takes the image
and repeats it across and down to fill your browser window. In sum you generate one image, and the browser replicates
it enough times to fill your window. This action is automatic when you use the background tag shown below.
The tag to include a background image is included in the <BODY> statement as an attribute:
<BODY BACKGROUND=”filename.gif”>
The filename.gif should be in current directory.
If the image source is on web specify its location along with its URL. Most of the browsers support gif and jpeg
image files.
5.6.1 Background Colour

You change the colour of text, links, visited links, and active links (links that are currently being clicked on) using
further attributes of the <BODY> tag. For example:
<BODY BGCOLOUR=”#000000” TEXT=”#FFFFFF”

LINK=”#9690CC”>
This creates a window with a black background (BGCOLOUR), white text (TEXT), and silvery hyperlinks
(LINK).
The colour numbers are in hexadecimal notation. In HTML each colour is given an unique number. The six-digit
number and letter combinations represent colours by giving their RGB (red, green, blue) value. The six digits are
actually three two-digit numbers in sequence, representing the amount of red, green, or blue as a hexadecimal value
in the range 00-FF. For example, 000000 is black (no colour at all), FF0000 is bright red, 0000FF is bright blue, and
FFFFFF is white (fully saturated with all three colours).
5.7 External Images, Sounds, and Animations

You may want to have an image open as a separate document when a user activates a link on either a word or a
smaller, inline version of the image included in your document. This is called an external image, and it is useful if
you do not wish to slow down the loading of the main document with large inline images.
To include a reference to an external image, enter:

<A HREF=”MyImage.gif”>link anchor</A>
You can also use a smaller image as a link to a larger image. Enter:
<A HREF=”LargerImage.gif”><IMG SRC=”SmallImage.gif”></A>
The reader sees the SmallImage.gif image on the browser and clicks on it to open the LargerImage.gif file.
Use the same syntax for links to external animations and sounds. The only difference is the file extension of the
linked file. For example,
74
<A HREF=”Titanic.mov”>link anchor</A>
<!..specifies a link to a movie. ..>
Some common file types and their extensions are:
plain text .txt

HTML document .html
GIF image .gif
TIFF image .tiff
X Bitmap image .xbm
JPEG image .jpg or .jpeg
PostScript file .ps
AIFF sound file .aiff
AU sound file .au
WAV sound file .wav
QuickTime movie .mov
MPEG movie mpeg or .mpg
Table 5.1 Common file types and their extensions
5.8 Frames
Using frames multiple html documents can be displayed in same browser window. Each individual html document
is called frame and each frame is independent to each other.
• The <frame> tag defines what HTML document to put into each frame
• The <frameset> tag defines how to divide the window into frames
• Each frameset defines a set of rows or columns
• The values of the rows/columns indicate the amount of screen area each row/column will occupy
• The attribute src can be an URL/ or any valid html source file
• The 100% frameset represents the total browser window area
• <noframes> defines no frame section for the browsers which do not handle frames.
75
Fig. 5.4 Vertical frame set
Fig. 5.5 Horizontal frame set
76
Fig. 5.6 Mixed frame set
Fig. 5.7 Inline frames
5.9 Tables
Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who use
the table tags to present their regular Web pages.
A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In
the following table, the first column contains the header information, each row explains an HTML table tag, and
each cell contains a paired tag or an explanation of the tag’s function.
77
General Table Format:
<TABLE>

<CAPTION> caption contents </CAPTION>

TR>

<TH> first header cell contents </TH>
<TH> last header cell contents </TH>
</TR>

<TR>

<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
</TR>

<TR>

<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
</TR>

</TABLE>
Fig. 5.8 Browser output of table with caption
78
Table Elements
Elements Description
<TABLE> ... Defines a table in HTML. If the BORDER attribute is present, your browser
</TABLE> displays the table with a border.
<CAPTION> ... Defines the caption for the title of the table. The default position of the title is
</CAPTION> centered at the top of the table. The attribute ALIGN=BOTTOM can be used to
position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.
<TR> ... </TR> Specifies a table row within a table. You may
define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT)
and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end
of this table for more information.
<TH> ... </TH> defines a table header cell. By default the text in this cell is bold and centered.
Table header cells may contain other attributes to determine the characteristics
of the cell and/or its contents. See Table Attributes at the end of this table for
more information.
<TD> ... </TD> Defines a table data cell. By default the text in this cell is aligned left and
centered vertically. Table data cells may contain other attributes to determine
the characteristics of the cell and/or its contents. See Table Attributes at the end
of this table for more information.
Table 5.2 Table elements description
Table Attributes
NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment
set in a <TR> ... </TR>.
Attribute Description
ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.
COLSPAN=n The number (n) of columns a cell spans.
ROWSPAN=n The number (n) of rows a cell spans.
NOWRAP Turn off word wrapping within a cell.
Table 5.3 Table attribute description
The above code can be used as template for constructing any type of table adding new rows or cells as necessary.
The <TABLE> and </TABLE> tags must surround the entire table definition.
The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined
by the <TR> and </TR> tags.
Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. Each row of
a table is, essentially, formatted independently of the rows above and below it. There are some additional elements
like <thead>,<tbody> and <tfoot> which are seldom used, because of bad browser support.
79
5.9.1 Tables for Non tabular Information

Some HTML authors use tables to present non-tabular information. For example, because links can be included in
table cells, some authors use a table with no borders to create “one” image from separate images. Browsers that
can display tables properly show the various images seamlessly, making the created image seem like an image map
(one image with hyper linked quadrants).
Using table borders with images can create an impressive display as well. Experiment and see what you like.
Example: Try this
<html>
<body>
<table border=”1”>
<caption><b>Table with different attributes</b></caption>
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td bgcolour=”cyan”>This cell contains a table:
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolour=”red”>
This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td bgcolour=”yellow”>
HELLO</td>
</tr>
</table></body></html>
80
Fig. 5.9 Output for the program
5.10 Lists
Lists display the content in a compact tight format and increase the comprehension of the presentation content.
There are three types of lists.
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered
list starts with the <ul> tag. Each list item starts with the <li> tag. Inside a list item you can put paragraphs, line
breaks, images, links, other lists and so on.
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol>
tag. Each list item starts with the <li> tag. Inside a list item you can put paragraphs, line breaks, images, links, other
lists and so on.
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with
the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd>
tag. Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists,
etc. They get properly indented. Try the following program: ypical outputs are shown in boxes
81
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type=”A”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>

<ol type=”a”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
82
<h4>Roman numbers list:</h4>
<ol type=”I”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>

<ol type=”i”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Disc bullets list:</h4>

<ul type=”disc”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>

<ul type=”circle”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
83
<h4>Square bullets list:</h4>

<ul type=”square”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>A Definition List:</h4>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body></html><!.. This program types of list elements…>
5.11 Forms
Forms can be used to gather information from users. To be able to use forms, the server on which your site is located
must provide CGI capabilities. CGI is a system of files that process data received from forms. The popular CGI
scripts are perl, php
Form Attributes
There are two form attributes such as, method & action There are two methods used by browsers to send information
to a server. They are Post and Get. These are specified in code as:
• <form method=”POST”>
• <form method=”GET”>
Action tells the browser what CGI program to use and where it is located. A form tag with both attributes would
be coded as:
84
<form method=”POST” action=”cgi-bin/demo_html40.pl”>
The code tells the browser to use the post method, and to use the CGI program, demo_html40.pl, located in the
cgi-bin (directory or folder) located on the server.
Input
To query the web or submit information to the web, Forms provide a very user-friendly interface. The most used
form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input
types are explained below. The input tag and its attributes:
• Text, name:
<input type=”text” name=”firstname”>
• Radio, name, value:
<input type=”radio” name=”sex” value=”male”> Male
• Checkbox, name:
<input type=”checkbox” name=”bike”>I have a bike
• Type, value:
<input type=”submit” value=”Submit”>
• Drop-down box Drop-down box is a selectable list ;
<select name>
<option value>
• Textarea
<textarea>defines a multi line text control</textarea>
Examples:
Text, name Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form>
First name:
<input type=”text” name=”firstname”>
<br>
Last name:
<input type=”text” name=”lastname”>
</form>
85
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
<input type=”radio” name=”sex”
value=”male”> Male
<br>
<input type=”radio” name=”sex”
value=”female”> Female
</form>
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form>
<input type=”checkbox” name=”bike”>
I have a bike
<br>
<input type=”checkbox” name=”car”>
I have a car
</form>
The Form’s Action Attribute and the Submit Button

When the user clicks on the “Submit” button, the content of the form is sent to another file. The form’s action
attribute defines the name of the file to send the content to the web server. The file defined in the action attribute
usually does something with the received input. If you type some characters in the text field above, and click the
“Submit” button, you will send your input to a page called “html_form_action.asp”. That page will show you the
received input.
<form name=”input”
action=”html_form_action.asp”
method=”get”>
Username:
<input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>
86
Drop-down box
<html>
<body>
<form>
<select name=”cars”>
<option value=”Maruti”>Maruti
<option value=”Santro”>Santro
<option value=”Toyota”>Tayota
<option value=”Hundai”>Hundai
<option value=”Honda City”>Honda City
</select>
</form></body></html>
Textarea (a multi line text control)

<html>
<body>
<p>
Please enter your comments
In not more than ten lines
</p>
<textarea rows=”10” cols=”30”>
</textarea>
</body>
</html>
87
5.12 Image maps

Imagemaps (client-side, server-side) have been one of the major innovations in web interactivity. They are a very
popular navigation aid. These clickable graphics can be used to help create a site identity and give visual impact.
Unfortunately they also can add considerably to download time.
Often imagemaps are used so that sites and their designers can show off some ‘cool’ graphics - Navigating such
sites is a pain - having waited a considerable time for the image to download, the first hurdle to overcome is often
figuring out what they mean. Imagemaps allow users to click on a particular spot in an image to retrieve another
HTML document or to run a specified script Client-Side Imagemaps With client-side image maps, the MAP that
relates parts of the image to different URLs is stored in the current file. This saves a round trip to the server, and
should present documents to you faster. Since the MAP information is stored in the document you are viewing, the
destination URLs can be displayed in the status area as you pass the mouse over the image map.
<MAP NAME=”name”>
<AREA [SHAPE=”shape”] COORDS=”x,y,...” [HREF=”reference”]
[NOHREF]>
</MAP>
The name
specifies the name of the map so that it can be referenced by an IMG element.
The shape
gives the shape of this area. Currently the only shape defined is “RECT”.
The COORDS attribute

gives the coordinates of the shape, using image pixels as the units. For a rectangle, the coordinates are given as
“left, top, right, bottom”.
The NOHREF attribute

indicates that clicks in this region should perform no action. An HREF attribute specifies where a click in that area
should lead.
5.12.1 The Usemap Attribute in An IMG Element

It indicates that it is a client-side image map. It can be combined with the ISMAP attribute to indicate that the image
can be processed as either a client-side or server-side image map. The argument specifies which map to use with
the image, imagename. The proposed spec on image maps allows for the option to include ALT text in the IMG
element.
<IMG SRC=”imagename” [USEMAP=”# name”] [ALT=”text”]>
Serverside image maps:

INPUT <A HREF = “banner.map”>
<IMG SRC = “banner.gif”
ALT = “The Web Developer’s Virtual Library”
ISMAP></A>
If the ISMAP attribute is present in the IMG tag, and the image tag is within an anchor, the image will become a
“clickable image”. The pixel coordinates of the cursor will be appended to the URL (after a “?”) specified in the
anchor if the user clicks within the ismap image. You’ll need to specify a ‘map’ file, similar to the following (server-
dependent): default http://xyz.com/
88
rect http://Xyz.com/Location/Maps/ 0, 0 459,29
rect http://Xyz.com/Gallery/ 0,30 67,59
rect http://Xyz.com/Authoring/Graphics/ 60,30 139,59
rect http://Xyz.com/Vlib/Internet/Jobs.html 140,30 179,59
rect http://Xyz.com/Reference/Library/ 180,30 239,59
rect http://Xyz.com/URLy.html 240,30 285,59
rect http://Xyz.com/Location/Search/ 286,30 341,59
rect http://Xyz.com/avcs/Stats/Top/ 342,30 397,59
rect http://Xyz.com/avcs/HTML/Tutorial/ 397,30 479,59
5.13 The Common Gateway Interface (CGI)

CGI is not a language. It’s a simple protocol that can be used to communicate between Web forms and your program.
A CGI script can be written in any language that can read STDIN(e.g. keyboard), write to STDOUT(Example,
Monitor), and read environment variables, that is virtually any programming language, including C, Perl, or even
shell scripting can be written for CGI.
5.13.1 Server-Side Processing

The Common Gateway Interface, or CGI, permits interactivity between a client and a host operating system through
the World Wide Web via the Hyper Text Transfer Protocol (HTTP). It’s a standard for external gateway programs
to interface with information servers, such as HTTP or Web servers. A plain HTML document that the Web server
delivers is static, which means it doesn’t change. A CGI program, on the other hand, is executed in real-time, so
that it can output dynamic information perhaps a weather reading, or the latest results from a database query. CGI
allows someone visiting your Web site to run a program on your machine that performs a specified task.
Gateways are programs, which handle information requests and return the appropriate document or generate a
document on the fly. Your server can serve information, which is not in a form readable by the client (Example, an
SQL database), and act as a mediator between the two to produce something, which clients can use.
Gateways can be used for a variety of purposes, the most common being the handling of FORM requests for
HTTP. An HTTP server is often used as a gateway to a legacy information system; for example, an existing body
of documents or an existing database application. The Common Gateway Interface is a convention between HTTP
server implementers about how to integrate such gateway scripts and programs.
Gateway programs, or scripts, are executable programs, which can run by themselves. They have been made
external programs in order to allow them to run under various (possibly very different) information servers
interchangeably.
Gateways conforming to this specification can be written in any language, which produces an executable file.
Some of the more popular languages to use include: C or C++, Perl, PHP and many others. It doesn’t matter what
language the program is written in, as long as you have the permission and resources to run it on your machine and
the program is written correctly.
Here is a simple example demonstrating the Common Gateway Interface. This example uses the Perl language
because of its portability and relative ease of use. When we explain operating system commands we will generally
speak UNIX. Remember UNIX is Case sensitive! Some servers allow your CGI programs to be anywhere in
your web directories, so long as the file name ends in “.cgi”. Others require you to put them only in the “/cgi-bin”
directory. Check with your system administrator. Now, create a file called Hello.cgi: Using chmod command make
this file executable.
89
#!/usr/bin/perl
$t = “Hello World!”;
print <<EOT;
Content-type: text/html
<Title> $t </Title>
<H1> $t </H1>
EOT
The first line must contain the path to your Perl interpreter. Scalar variables names in Perl start with the “$” character.
“$t” contains some text to be used later.
The print statement prints everything following until the “EOT”. Text printed to “standard output” goes to the server
and thence to the browser.
The first line printed is an HTTP header to tell the browser that an HTML file is coming. (HTTP header lines must
always be separated by a blank line from actual data).
The data sent is a valid HTML document. The Perl interpreter replaces “$t” with “Hello World!”.
Create a link to it like this:
<a href=”Hello.cgi”>Hello.cgi</a>
Click on Hello.cgi file, and if all’s well, the script should respond with “Hello World!”
5.13.2 Structure of a CGI Script

Here’s the typical sequence of steps for a CGI script:
• Read the user’s form input.
• Do what you want with the data.
• Write the HTML response to STDOUT.
When the user submits the form, your script receives the form data as a set of name-value pairs. The names are what
you defined in the INPUT tags (or SELECT or TEXTAREA tags), and the values are whatever the user typed in or
selected. (Users can also submit files with forms).
This set of name-value pairs is given to you as one long string, which you need to parse. It’s not very complicated,
and there are plenty of existing routines to do it for you.
The long string is in one of these two formats:

“name1=value1&name2=value2&name3=value3”
“name1=value1;name2=value2;name3=value3”
So just split on the ampersands or semicolons, then on the equal signs. Then, do two more things to each name and
value:
Convert all “+” characters to spaces, and Convert all “%xx” sequences to the single character whose ascii value is
“xx”, in hex. For example, convert “%3d” to “=”.
This is needed because the original long string is URL-encoded, to allow for equal signs, ampersands, and so forth
in the user’s input. So where do you get the long string? That depends on the HTTP method the form was submitted
with: Get /Post
90
For GET submissions, it’s in the environment variable
QUERY_STRING.
For POST submissions, read it from STDIN. The exact number of bytes to read is in the environment variable
CONTENT_LENGTH.
(POST is more general-purpose, but GET is fine for small forms.)

Sending the Response Back to the User
First, write the line Content-type: text/html

plus another blank line, to STDOUT. After that, write your HTML response page to STDOUT, and it will be sent
to the user when your script is done. That’s all there is to it.
Yes, you’re generating HTML code on the fly. It’s not hard; it’s actually pretty straightforward. HTML was designed
to be simple enough to generate this way. Hello world in another way
#include <stdio.h>
void main() {
printf(“Content-type: text/html\n\n”) ;
/** Print the HTML response page to STDOUT. **/
printf(“<html>\n”) ;
printf(“<head><title>CGI Output</title></head>\n”) ;
printf(“<body>\n”) ;
printf(“<h1>Hello, world.</h1>\n”) ;
printf(“</body>\n”) ;
printf(“</html>\n”) ;
exit(0) ;
}
Perl example:
# Print the HTML response page to STDOUT
print <<EOF ;
<html>
<head><title>CGI Results</title></head>
<body>
<h1>Hello, world.</h1>
</body>
</html>
EOF
exit ;
5.13.3 CGI For Mail

One of the most common uses of a CGI script is to send mail form data to an email address. Upon completion the
user will receive a feedback indicating that mail has been successfully delivered!
5.13.4 Security
A CGI script is a program that anyone in the world can run on your machine. So accordingly be watchful about
security lapses in the program code. Never trust the user data input. Don’t put user data in a shell command without
verifying the data carefully; It’s easy for a hacker to send any form variables to your script, with any values (even non-
printable characters). Your security shouldn’t rely on fields having certain values, or even existing or not existing.
91
5.14 Cascading Style Sheets (CSS)

CSS is a standard for formatting Web pages that goes well beyond the limitations of HTML. Promulgated by the
World Wide Web Consortium (W3C), the Internet’s standards body, CSS extends HTML with more than 70 style
properties that can be applied to HTML tags. With CSS, Web developers have at their disposal a wealth of additional
formatting options for colour, spacing, positioning, borders, margins, cursors and much, much more.
5.14.1 Adding CSS to HTML Documents

HTML gives you the developer a certain level of control over the formatting of a document. You can set headings
<h1>, <h2>...and so on), make text bold <b> or italic <i>, define lists (<ul>, <ol>), and so forth. However, this level
of control is fairly limited. For example, developers have no control over the absolute positioning of items on the
page, and are limited in their ability to control size, spacing, and colour of page elements. Seeking to surpass these
limitations, developers have resorted to workarounds such as converting text to graphics, creating complicated table
layouts, using images for white space control, and using proprietary HTML extension and add-ons.
CSS shatters the HTML barrier by putting at the developer’s disposal a set of additional properties specifically
geared towards page formatting and layout. These properties are applied to the document without modifying the
underlying HTML. Browsers that are not CSS-compliant will still see the page in its unaltered HTML state, while
browsers that support CSS will see the page in all its CSS-enhanced presentation.
There are two steps to adding CSS styles to an HTML document:
Declaring the styles and applying the styles to HTML elements: For example, “I want some blue, bold, italic text”
would be a simple declaration
OR I want my entire document subheading to be blue, bold, and italic would be an application of the style.
Unfortunately, we have to do a bit more than simply utter a few statements in front of the monitor -- at least until
voice recognition and HTML editing technologies get more sophisticated. We need to understand the syntax of
declaring CSS styles and the different ways in which we can apply these styles to our HTML documents.
You can add CSS properties to your documents in four ways:
Using Inline Styles

• To use an inline style, you add a <STYLE> attribute to a specific instance of an HTML element. The following
syntax:
• <b style=”colour: #FF0000”>Colour Me RED</b>.
• Which would render like this: Colour Me RED In red colour
• An inline style may be applied to any HTML element and modifies only the specific instance (occurrence in
the document) of the element to which you apply it. In the example above, only that instance of <b> would be
RED-- the rest of the <b> tags in the document would be unaffected.
• Using lots of inline styles to format a document allows for great precision, but very tedious to code. If you have a
lot of styles, the inline style method can also result in a fair amount of unnecessary coding. Inline styles are also
somewhat difficult to maintain, because the CSS properties are scattered around many pages in your web site.
Using Embedded Style Sheets

To use an embedded style sheet, you define a style block (delimited by the <style type=”text/css”> and </style>
tags), which should be placed in the HEAD section of the document. This block consists of a set of style rules, where
each rule defines a style for an HTML element or group of elements. A style rule has two parts:
• A selector that identifies a HTML element or group of elements.
• A declaration of the style properties to be applied to that selector
92
The generic syntax for a style rule is as follows:
selector {property: value; property: value;} When using embedded style sheets it is best to surround the selections
and properties with the comment tags. This keeps older browsers from reading them and displaying your style sheet
coding.
Using linked style sheets

You can keep your style sheets in a separate file and link to ir from a document or set of documents, using a <link>
tag in the HEAD section of the linking document, as follows:
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”stylesheets.css”>.
The linked style sheet (stylesheet.css) consists of a set of style rules, exactly like an embedded style sheet, except
that the style rules are not enclosed in <style type=”text/css”></style> and comment  tags. Linking to an
external sheet allows the developer to apply a set of rules across a group of HTML documents, thus extending the
benefits of embedded style sheets to a set of pages.
Using imported style sheets

An external style sheet may also be imported into a document by using the @import property in a style sheet: @
import: url(stylesheets.css). The @import tag should appear at the beginning of a style block or on a linked sheet,
before any declarations. Rules in imported style sheets are applied before other rules defined for the containing style
sheet, putting them at the bottom of the “pecking order’ of the imported sheet.
CLASS as selector
If you expect to have formatting variations for different instances of a single element, or you would like to have
different elements share the same format, using a class name as a selector is a good approach. This is often referred
to as “sub-classing” an element. CLASS is an HTML attribute that has no display characteristics and that you can
apply to any element, like this: <b class=”clsRed”>Classy, red, and bold</b>. The style rule for clsRed could be
declared as follows:
<style type=”text/css”>

</style>
Note that the selector begins with a period (.), which is the required syntax for class names as selectors. If we add
the above rule to the style sheet, every element to which we assign a class name of clsRed will have red text. If an
element doesn’t have this class name, even it iis of the same type as another element that does, it will not have this
style applied result. Classy, red and bold displayed in red colour
After knowing how to apply cascading style sheet elements, lets only use the embedded style sheets in this unit.
That means you will use CSS for each page of your site. Later on you may want to take all those embedded tags
and turn them into one complete LINKED style sheet for better control of your site.
Cascading style sheet tags

The list below is some of the more commonly used CSS tags. (For a complete listing visit ttp://msdn.microsoft.
com/workshop/author/css/cssie4. asp)
font-family (enter name of font, if more than one, separate by commas)

font-style (italic or normal)
font-size (small, smaller, large, larger, pints, em)
font-weight (points, em, percentage of default)
colour (#hex code ex: #FEDCBA98)
93
letter-spacing (places white space between letters)

text-decoration (used to take the underline out of links, overline, linethrough,
or none)
text-align (used to justify, right, left or center text)
text-indent (moves the first letter of each paragraph in x amount of
pixels)
line-height (places space between the lines of text)
margin-right (moves the text and graphics to the right
margin-left (moves the text and graphics to the left)
…………See the power!
Here is how a paragraph using all of the CSS tags that are listed above
would look. This embedded style coding would be placed in the HEAD
section of the page that you are embedding this style.
<style type=”text/css”>

</style>
Thus Web browser merges the contents of your Web documents (in an
HTML file) with the specification (in a CSS file) of how the HTML
elements should look. The result in the browser window is your content,
but altered in appearance by the style sheet.
Style Sheet Use for Information Producers

Because any HTML document can link to a style sheet, a style sheet gives you a single place to specify the appearance
of an entire set of Web pages. Thus, you can use style sheets to efficiently create a consistent look and feel for your
Web pages and change this look and feel quickly and easily.
For example, many HTML writers like to indent the first line of each paragraph by five spaces. To do this, they
would place the entity five times at the start of each paragraph. This worked fine for pages generated by
HTML editors, or even on a small scale for hand-prepared HTML pages.
But what if the web designer decided that the paragraphs should not have the first line of each paragraph indented?
It would be a laborious process to have to go through all the pages of the web to remove the entities. Instead,
you could put this line in your style sheet to indent every paragraph in your document by 10 pixels:
P {text-indent: 10px;}
Style sheet use for consumers

The people who use your Web pages will need to have the latest versions of the popular Internet Explorer (3.0 or
above) or Netscape Navigator (4.0 or above) in order to see the style effects. If your users don’t have these style-
enabled browsers, they won’t see all the effects you create. Therefore, in using style sheets, like many other kinds
of new HTML elements that have come before, you will need to be sensitive to users who do not have the most
current Web browser software. With a little common sense and creativity, however, you’ll find that you can still
meet the needs of users who cannot use the style sheets.
94
In fact, by using style sheets, you can avoid much of the kind of syntax gymnastics that HTML writers have had to
put into their pages to make things “look right.” The result is that your HTML pages can be leaner and cleaner. You
can separate style from substance. Instead of diddling with your Web pages to make them look a certain way, you
can focus more on what your Web pages mean.
With style sheets, you have the ability to fiddle with the appearance of every HTML element in your document. For
aesthetic reasons, resist this urge.
Name your classes after the meaning they serve, not their appearance. Think carefully about how you name style
sheets. You can reference several style sheets in the same document, so you can create a set of modular style sheets
that can be used by different collections of documents.
Over a period of time you will Create Your Own Style!
Study the following example and see how CSS adds to the content of html
It is a LINK element in the head of the document like this

<LINK rel=”stylesheet” href=”mystyle.css” type=”text/css”> merges stylesheet with html.
The CSS file in this example alters the appearance of every H1 element in HTML files that reference it. The H1
elements appear in green. The font is changed to “rockwell,” but if that is not available on the user’s browser software,
some other font of the “serif” family will be used.
The CSS file in this example creates two classes of the P(paragraph) element: the warning class and the danger
class. Note that the actual class name is “warning,” not “P.warning.” The “P.warning” syntax is used in the CSS file
to identify the element (P) and the class (warning).
In your HTML document, all you need to do is use a P element with the class attribute set to “warning,” like this:
<P class=”warning”>This is a warning</P>
95
A CSS file “mystyle.css” contains An HTML file “hellostyle.html” Displayed in a Web browser,
this contains this hellostyle.html looks something
like this:
H1 { <HTML> <HEAD> Our Exciting Story
font-family: rockwell, serif; <TITLE> Style Sheet
colour: green; } Demonstration </TITLE> We started to dock at the station
<LINK rel=”stylesheet” before we realised what was
P.danger { colour: red; font- href=”mystyle.css” happening.
weight: bold; text-decoration: type=”text/css”> Alien approaching!
underline; } </HEAD> The capsule on the weird
<BODY> craft started emitting a beam of
<H1> Our Exciting Story some sort.
P.warning { colour: purple; </H1> Destruction imminent!
font-weight: bold; } <P> We started to dock at the
station before we realised
what was happening. </P>
<P class=”warning”> Alien
approaching! </P>
<P> The capsule on the weird
craft started emitting a beam
of some sort. </P>
<P class=”danger”>
Destruction imminent! </P>
</BODY> </HTML>
A html example using back ground colour

<html>
<head>
<title>My first program</title></head>
<body bgcolour=”yellow”>
<h2>Look: Coloured Background!</h2>
The content of the body element is displayed in your browser.
</body>
</html>
HTML code headings and horizontal rule

<html>
<head>
<title>Headings & Horizontal rule</title></head>
<body>
<hr>
<h1>This is heading 1</h1>
<hr size=19 >
<hr size=19 NOSHADE >
Don’t use heading tags for the
text to display in bold or something like that
96
</body>
</html>
Image file as background. If the image is smaller than browser

screen then the image Tiles.
<html>
<head>
<title>Page with background image</title></head>
<body background=”background.jpg”>

<h1> A background image!</h1>
<p>gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat (tile)itself
</p>
</body>
</html>
Various text manipulation tags

<html>
<head>
<title>Text Formatting</title></head>
<body>
<b>This text is bold</b>
<br>
<strong>
This text is strong
</strong>
<br>
<big>
This text is big
</big>
<br>
<em>
This text is emphasised
</em>
<br>
<i>
This text is italic
</i>
<br>
<small>
This text is small
</small>
<br>
This text contains
<sub>
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup>
97
<hr>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<hr>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
<hr>
</body>
</html>
Program with hyper links

<html>
<body>
<p>
<a href=”http://www.boiap.ac.in”>
Visit BOI</a> is a link to BOARD OF INTERMEDIATE on the web
</p>
<p>
<a href=”http://www.osmania.ac.in”>
This text</a> is a link to Osmania University on the World Wide Web.
</p>
<hr>
<p>
You can also use an image as a link:
<a href=”toppage.htm”>
<img border=”0” src=”buttonnext.gif” width=”65” height=”38”></a>

</p>
</body></html>
Frameset tags
Before writing code for mixed frameset, create three different html
files frame_A, frame_B and frame_C with code depicted in the
following table and place them all in the same directory
table
Code for mixed frameset

<html>
<head>
<title>Mixed frameset Example</title></head>
<frameset rows=”50%,50%”>
<frame src=”frame_a.htm”>
<frameset cols=”25%,75%”>
<frame src=”frame_b.htm”>
98
<frame src=”frame_c.htm”>
</frameset>
</frameset>
</html>
Inline images
<html>
<body>
<iframe src=”http://yahoo.com”></iframe>
<p>Few browsers may not support iframes.</p>
<p> iframe will not be visible for such browser.</p>
</body></html>
Table example
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<tr>
<td>1000</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
</table>
<h4>Two rows and three columns :</h4>
<tr>
<td>XXXX</td>
<td>YYYY</td>
<td>ZZZZ</td>
</tr>
<tr>
<td>4000</td>
<td>5000</td>
<td>6000</td>
</tr>
</table>
</body></html>
99
Table with different tags

<html>
<body>
<tr>
<td>
<p>This is a paragraph</p>
<p><i>Another paragraph!</i></p>
</td>
<td>A table inside a table:
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
<tr>
<td>CCC</td>
<td>DDD</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Differentiate
<ul>
<li>Frames</li>
<li>Tables</li>
<li>Iframes</li>
</ul>
</td>
<td><b>HELLO WORLD</b></td>
</tr>
</table>
</body>
</html>
X). Simple forms

<html>
<body>
<form>
Username:
<input type=”text” name=”user”>
<br>
Password:
<input type=”password” name=”password”>
</form>
<p>
See the difference between text
and password forms
</p>
</body>
</html>
100
Forms with mailto option
<html>
<body>
<form action=”MAILTO:xyz@yahoo.com” method=”post”
enctype=”text/plain”>
<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type=”text” name=”name”
value=”yourname” size=”20”>
<br>
Mail:<br>
<input type=”text” name=”mail”
value=”yourmail” size=”20”>
<br>
Comment:<br>
<input type=”text” name=”comment”
value=”yourcomment” size=”40”>
<br><br>
<input type=”submit” value=”Send”>
<input type=”reset” value=”Reset”>
</form>
</body>
</html>
Image maps with clickable area

<html>
<body>
<p>
Click on one of the planets to watch it closer:
</p>
<img src=”planets.gif”
width=”145” height=”126”
usemap=”#planetmap”>
<map id=”planetmap” name=”planetmap”>
<area shape=”rect”
coords=”0,0,82,126”
alt=”Sun”
href=”sun.htm”>
<area shape=”circle”
coords=”90,58,3”
alt=”Mercury”
href=”mercur.htm”>
<area shape=”circle”
coords=”124,58,8”
alt=”Venus”
href=”venus.htm”>
</map>
</body>
</html>
101
Summary
• HTML tags normally come in pairs.
• HTML tags are not case sensitive.
• Each HTML document consists of head and body tags.
• A URL includes the type of resource being accessed (Example, Web, gopher, FTP), the address of the server,
and the location of the file.
• Using a feature called tiling; a browser takes the image and repeats it across and down to fill your browser
window.
• Most of the browsers support gif and jpeg image files.
• The six-digit number and letter combinations represent colours by giving their RGB (red, green, blue) value.
• Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who
use the table tags to present their regular Web pages.
• Some HTML authors use tables to present non-tabular information.
• Lists display the content in a compact tight format and increase the comprehension of the presentation
content.
• To be able to use forms, the server on which your site is located must provide CGI capabilities.
• There are two methods used by browsers to send information to a server. They are Post and Get.
• Checkboxes are used when you want the user to select one or more options of a limited number of choices.
• Imagemaps allow users to click on a particular spot in an image to retrieve another HTML document or to run
a specified script Client-Side Imagemaps.
• CGI is not a language. It’s a simple protocol that can be used to communicate between Web forms and your
program.
• One of the most common uses of a CGI script is to send mail form data to an email address.
• CSS is a standard for formatting.
• CSS shatters the HTML barrier by putting at the developer’s disposal a set of additional properties specifically
geared towards page formatting and layout.
• Because any HTML document can link to a style sheet, a style sheet gives you a single place to specify the
appearance of an entire set of Web pages.
References
• Willard, 2009. Html: A Beginner’S Guide, Tata McGraw-Hill Education.
• Musciano, C., Kennedy, B., 2006. Html & Xhtml: The Definitive Guide, 6th ed. O’Reilly Media, Inc.
• Introduction to HTML, [Online] Available at: <www.nios.ac.in/webdesign/html.pdf> [Accessed 22 June
2012].
• W3SCHOOLS.Com, Introduction to HTML, [Online] Available at: < http://www.w3schools.com/html/html_
intro.asp> [Accessed 22 June 2012].
• jimmyrcom, 2nd Feb 2008. Learn HTML and CSS Tutorial. How-to make website from scratch, [Video Online]
Available at: <http://www.youtube.com/watch?v=GwQMnpUsj8I> [Accessed 22 June 2012].
• derekbanas, 9th May 2010. Learn XML Tutorial Part 1, Available at: < http://www.youtube.com/
watch?v=qgZVAznwX38> [Accessed 22 June 2012].
Recommended Reading
• Shelly, B. G., Woods, M. D., 2008. HTML: Complete Concepts and Techniques, 5th ed. Cengage Learning.
• Powell, A. T., 2001. HTML: The Complete Reference, 3rd ed. Osborne/McGraw-Hill.
• Freeman, E., Freeman, E., 2005. Head First Html with CSS & XHTML, O’Reilly Media, Inc.
102
Self Assessment
a. HTML stands for Hyper Text Markup Language.
b. An HTML file is a text file containing small markup tags.
c. An HTML file must have an htm or html file extension.
d. HTML tags are case sensitive.
2. Each HTML document consists of _______ and body tags.

a. words
b. head
c. tail
d. browser
3. Hyperlinks are created using ________ tags.

a. anchor
b. space
c. display
d. case sensitive
4. Which of the following is not included in URLs?

a. Type of resource being accessed
b. The address of the server
c. The location of the file
d. Sample computer code
5. Which of the following is used to display multiple html documents in same browser window?
a. Form
b. Hyperlink
c. Frame
d. URL
6. Some HTML authors use ___________ to present non-tabular information.

a. tables
b. frames
c. forms
d. links
7. ___________ is a system of files that process data received from forms.

a. POST
b. GET
c. CGI
d. GCI
103
8. The two methods used by browsers to send information to a server are ___________ and Get.
a. frames
b. post
c. form
d. imagemaps
9. ___________are clickable graphics which can be used to help create a site identity and give visual impact.
a. Frames
b. Forms
c. Imagemaps
d. Hyperlinks
10. Which of the following is a simple protocol that can be used to communicate between Web forms and your
program?
a. POST
b. GET
c. CGI
d. GCI
104
Chapter VI
Client and Serverside Scripting
Aim
• introduce client and serverside scripting
• elucidate java server pages
• explain the JSP tags
Objectives
• recognise data types
• determine elements of java script
• elucidate java script
Learning outcome
• understand java script objects
• identify the various programs used for various commands
• understand different web technologies
105
6.1 Introduction
Java Server Pages (JSP) technology provides an easy way to create dynamic web pages and simplify the task of
building web applications that work with a wide variety of web servers, application servers, browsers and development
tools. JSP was developed by Sun Microsystems to allow server side development. JSP files are HTML files with
special Tags containing Java source code that provide the dynamic content. These were known as CGI server side
applications.
6.2 Java Server Pages (JSP)

JSP was developed by Microsoft to allow HTML developers to easily provide dynamic content supported as standard
by Microsoft’s free Web Server, Internet Information Server (IIS). JSP is the equivalent from Sun Microsystems,
a comparison of ASP.
JSP and ASP are fairly similar in the functionality that they provide. JSP may have slightly higher learning curve.
Both allow embedded code in an HTML page, session variables and database access and manipulation. Whereas
ASP is mostly found on Microsoft platforms that isWindows NT, JSP can operate on any platform that conforms to
the J2EE specification. JSP allow component reuse by using Java beans and EJBs. ASP provides the use of COM
/ ActiveX controls.
Web
Client Typical Web server server
supporting JSP
Mac OS
Internet
Linux JSP
Servlet
Engine Oracle
JSP files Database
stored here Urix
(Apache Web server)
Windows 98
Fig. 6.1 A web server that supports JSP files.
Notice that the web server also is connected to a database.
JSP source code runs on the web server in the JSP Servlet Engine. The JSP Servlet engine dynamically generates
the required HTML code and sends the HTML output to the client’s web browser.
JSP is easy to learn and allows developers to quickly produce web sites and applications in an open and standard
way. JSP is based on Java, an object oriented language. JSP offers a robust platform for web development.
Main reasons to use JSP:

• Multi platform
• Component reuse by using Javabeans and EJB.
106
Advantages of Java
You can take one JSP file and move it to another platform, web server or JSP Servlet engine. HTML and graphics
displayed on the web browser are classed as the presentation layer. The Java code (JSP) on the server is classed as
the implementation. By having a separation of presentation and implementation, web designer’s work only on the
presentation and Java developers concentrate on implementing the application.
Web Server
Web browser JSP

1. Web browser request 2. JSP request send to Web browser file
3. Send to JSP Servlet Engine
9. HTML sent to browser

JSP Servlet Engine
4. Parse JSP file

Internet
5. Generate Servlet Source
Code
6. Compile Servlet source

code into class
7. Instantiate Servlet
8. HTML: (Servlet Output)
Fig. 6.2 JSP parsing by web server
JSPs are built on top of SUN’s servlet technology. JSPs are essentially an HTML page with special JSP tags embedded.
These JSP tags can contain Java code. The JSP file extension is .jsp rather than .htm or .html. The JSP engine parses
the .jsp and creates a Java servlet source file. It then compiles the source file into a class file; this is done the first
time and this why the JSP is probably slower the first time it is accessed. Any time after this the special compiled
servlet is executed and is therefore returns faster.
• The user goes to a web site made using JSP.(ending with .jsp). The web browser makes the request via the
Internet.
• The JSP request gets sent to the Web server.
• The Web server recognises that the file required is special (.jsp), therefore passes the JSP file to the JSP Servlet
Engine.
• If the JSP file has been called the first time, the JSP file is parsed, otherwise go to step 7.
• The next step is to generate a special Servlet from the JSP file. All the HTML required is converted to println
statements.
• The Servlet source code is compiled into a class.
• The Servlet is instantiated, calling the init and service methods.
• HTML from the Servlet output is sent via the Internet.
• HTML results are displayed on the user’s web browser.
107
6.2.1 JSP Environment

• JDK 1.3 minimum required
• JSP environment preferably with J2EE reference implementation Tomcat option
• Set TOMCAT_MOME = C:\tomcat
• To start server goto \tomcat\bin and execute startup
• Create your first program under the directory \tomcat\webapps\ (all your programs should reside here!)
• Call it via the browser: type http://localhost:8080/firstjsp.jsp
6.2.2 Using JSP Tags

Declaration tag ( <%! %> )
This tag allows the developer to declare variables or methods. Before the declaration you must have <%! And at the
end of the declaration, the developer must have %> Code placed in this tag must end in a semicolon ( ; ). Declarations
do not generate output so are used with JSP expressions or scriptlets. For Example:
<%! private int counter = 0 ;
private String get Account ( int accountNo) ;
%>
Expression tag ( <%= %>)

This tag allows the developer to embed any Java expression and is short for out.println().
A semicolon ( ; ) does not appear at the end of the code inside the tag.
<%= new java.util.Date() %>//(To show the current date and time)
Directive tag ( <%@ directive … %>)

A JSP directive gives special information about the page to the JSP Engine. There are three main types of
directives:
• Page – processing information for this page.
• Include – files to be included.
• Tag library – tag library to be used in this page.
Directives do not produce any visible output when the page is requested but change the way the JSP Engine processes
the page. For example, you can make session data unavailable to a page by setting a page directive (session) to
false.
Page directive: This directive has 11 optional attributes that provide the JSP Engine with special processing
information. The following table lists the 11 different attributes with a brief description:
Language language the file uses. <%@ page language = “java” %>
extends Superclass used by the JSP engine for the translated Servlet.
<%@ page extends =“com.taglib…” %>
import Import all the classes in a java package into the current JSP page. This allows the
JSP page to use other java classes.
<%@ page import = “java.util.*” %>
session Does the page make use of sessions. By default all JSP pages have session data
available. There are performance benefits to switching session to false. Default is
set to true.
108
buffer Controls the use of buffered output for a JSP page. Default is 8kb. <%@ page buffer
= “none” %>
autoFlush Flush output buffer when full.
<%@ page autoFlush = “true” %>
isThreadSafe Can the generated Servlet deal with multiple requests? If true a new thread is started
so requests are handled simultaneously.
info Developer uses info attribute to add
information/document for a page. Typically used to add author, version, copyright
and date info.
<%@ page info =“it&webdesign, copyright 2005. “ %>
errorPage Different page to deal with errors. Must be URL to error page. <%@ page errorPage
= “/error/error.jsp” %>
IsErrorPage This flag is set to true to make a JSP page a special Error Page. This page has access
to the implicit object exception.
contentType Set the mime type and character set of the JSP.
Table 6.1 Different attributes
Include directive: Allows a JSP developer to include contents of a file inside another. Typically include files are used
for navigation, tables, headers and footers that are common to multiple pages.
<%@ include file = “include/privacy.html %>This includes the html from privacy.html found in the include directory
into the current jsp page.
<%@ include file = “navigation.jsp %> To include a navigation menu
(jsp file) found in the current directory.
Tag Lib directive: A tag lib is a collection of custom tags that can be used by the page.
<%@ taglib uri = “tag library URI” prefix = “tag Prefix” %>
Custom tags were introduced in JSP 1.1 and allow JSP developers to hide complex server side code from web
designers.
Scriptlet tag ( <% … %> )

Between <% and %> tags, any valid Java code is called a Scriptlet. This code can access any variable or bean
declared.
To print a variable:
<% String username = “board_of_Intermediate” ;
out.println ( username ) ;
%>
Action tag
There are three main roles of action tags:
• enable the use of server side Javabeans
• transfer control between pages
• browser independent support for applets.
109
6.2.3 Javabeans
A Javabean is a special type of class that has a number of methods. The JSP page can call these methods so can leave
most of the code in these javabeans. For example, if you wanted to make a feedback form that automatically sent
out an email. By having a JSP page with a form, when the visitor presses the submit button this sends the details to
a Javabean that sends out the email. This way there would be no code in the JSP page dealing with sending emails
(JavaMail API) and your Javabean could be used in another page (promoting reuse).
To use a Javabean in a JSP page use the following syntax:

<jsp : usebean id = “ …. “ scope = “application” class = “com…” />
The following is a list of Javabean scopes:
page – valid until page completes.

request – bean instance lasts for the client request
session – bean lasts for the client session.
application – bean instance created and lasts until application ends.
Code examples:
helloworld.jsp
<html>
<head>
<title>My first JSP page
</title>
</head>
<body>
<%@ page language=”java” %>
<% System.out.println(“Hello World”); %>
</body>
</html>
**
The following example will declare two variables; one string used to stored the name of a website and an integer
called counter that displays the number of times the page has been accessed. There is also a private method declared
to increment the counter. The website name and counter value are displayed.
<HTML>
<HEAD>
<TITLE> JSP Example 2</TITLE>
</HEAD>
<BODY> JSP Example 2
<BR>
<%!
String sitename = “boiap.ac.in”;
int counter = 0;
private void increment Counter()
{
counter ++;
}
%>
Website of the day is
<%= sitename %>
<BR>
page accessed
110
<%= counter %>
</BODY></HTML>
6.2.4 Implicit Objects

So far we know that the developer can create Javabeans and interact with Java objects. There are several objects
that are automatically available in JSP called implicit objects.
The implicit objects are:
Variable Of type
Request Javax.servlet.http.httpservletrequest
Response Javax.servlet.http. httpservletresponse
Out Javax.servlet.jsp.JspWriter
Session Javax.servlet.http.httpsession
PageContent Javax.servlet.jsp.pagecontext
Application Javax.servlet.http.ServletContext
Config Javax.servlet.http.ServletConfig
Page Java.lang.Object
Table 6.2 Implicit objects
Page object
Represents the JSP page and is used to call any methods defined by the servlet class.
Config object
Stores the Servlet configuration data.
Request object
Access to information associated with a request. This object is normally used in looking up parameter values and
cookies.
This following code snippet is storing the parameter “dev” in the string devStr. The result is displayed
underneath.
<% String devStr = request.getParameter(“dev”); %>

Development language = <%= devStr %>
6.3 JavaScript
JavaScript is a compact, object-based scripting language for developing client and server Internet applications.
JavaScript statements can be embedded directly in an HTML page. These statements can recognise and respond to
user events such as mouse clicks, form input, and page navigation. For example, you can write a JavaScript function
to verify that users enter valid information into a form. Without any network transmission, an HTML page with
embedded JavaScript can interpret the entered text and alert the user with a message dialog if the input is invalid.
Or you can use JavaScript to perform an action (such as play an audio file, execute an applet, or communicate with
a plug-in) in response to the user opening or exiting a page.
111
Using JavaScript, even less-experienced developers will be able to direct responses from a variety of events, objects,
and actions. It provides anyone who can compose HTML with the ability to change images and play different sounds
in response to specified events, such as a users’ mouse click or screen exit and entry.
Java script is multi functional in the sense that it can be used at client side scripting as well as server side
scripting.
JavaScript code is typically embedded into an HTML document using the SCRIPT tag. It can be placed inside
comment fields to ensure that old browsers that do not recognise JavaScript do not display your JavaScript code.
The markup to begin a comment field is .
<script language=”JavaScript”>

</script>
Attribute of the SCRIPT tag, SRC, can be used to include an external file containing JavaScript code rather than
code embedded into the HTML:
<script language=”JavaScript” src=”funfunctions.js”></script>
6.3.1 Elements of JavaScript

• Variables: Name of the memory location on which code is going to act upon. A changeable value during the
execution of program. Example: sum may possess a value of 100. It is a loosely typed language i.e. one type of
data can be automatically converted into other types implicitly according to the need.
• Operators: Arithmetic and logical operators. +,-, || ,&& and so on.
• Expressions: Any combination of variables, operators, and statements which evaluate to some result.
• Statements: Conditional, iterative statements. Ex: if(expression) {……}; while(expression){…} and so on.
• Objects: An object has some set of values and methods to accessing it. Can be broadly categorised into browser
objects, built-in objects and user defined objects.
• Functions and Methods: A method is simply a function which is contained in an object. For instance, a function
which closes the current window, named close(), is part of the window object; thus, window.close() is known
as a method.
Variables
A JavaScript identifier, or name, must start with a letter or underscore (“_”); subsequent characters can also be
digits (0-9). Because JavaScript is case sensitive, letters include the characters “A” through “Z” (uppercase) and the
characters “a” through “z” (lowercase). As a good programming practice variable names are chosen to be meaningful
regarding the value they hold. For example, a good variable name for containing the total price of goods orders
would be total_cost.
A variable may be scoped as either global or local. A global variable may be accessed from any JavaScript on the
page. A local variable may only be accessed from within the function in which it was assigned.
Commonly, you create a new global variable by simply assigning it a value:
newValue=5;
However, if you are coding within a function and you want to create a local variable which only scopes within that
function you must declare the new variable using the var statement:
112
function newFun()
{ var loop=1; // local variable
total=0; // Global variable
...additional statements...
}
In the example above, the variable loop will be local to newFunction(), while total will be global to the entire
page.
Data types
• Numbers Can be integers or Real numbers. Ex: 5 (integer), 5.15
• Booleans True or False. not usable as 1 and 0. In a comparison, any expression that evaluates to 0 is taken to
be false, and any statement that evaluates to a number other than 0 is taken to be true.
• Strings “Hello World!” Strings are enclosed in quotes. Use single quotes to type strings that contain double
quotation marks inside their strings and vice versa.
• Objects myObj = new Object();
• Null Means void, nothing - not even zero!
• Undefined A value that is undefined.
Operators
Take one or more variables to return a new value. The operator, which performs on a single variable, is called unary
operator and operator, which performs on two variables, are called binary operator.
• Arithmetic operators: +,-,*,/,% are binary operators ( they perform on two operands) for addition, subtraction,
multiplication, division, and modulus respectively. Modulus operand returns the remainder after division. Ex:
11%3 = 2; 12 % 3 = 0.
++ , -- are Unary increment and decrement operators. This operator only takes one operand. The operand’s value
is increased / decreased by 1. The value returned depends on whether the ++ or -- operator is placed before or
after the operand; e.g. ++x will return the value of x following the increment (pre increment) whereas x++ will
return the value of x prior to the increment (post increment).
There is one operator, which can be used as unary as well as a binary operator. The operator - when used as
Unary negation: returns the negation of operand.
• Logical Operators: && , || are AND , OR binary operators respectively. Returns the Boolean output of the two
operands
! “NOT” an unary operator returns true if the negation of the operand is true (Example, the operand is false).
Comparison Operators:
= = “Equal to” returns true if operands are equal.
!= “Not equal to” returns true if operands are not equal.
“Greater than” returns true if left operand is greater than right operand.
>= “Greater than or equal to” returns true if left operand is greater than or equal to right operand.
< “Less than” returns true if left operand is less than right operand.
<= “Less than or equal to” returns true if left operand is less than or equal to right operand
113
Assignment Operators:
= Assignment operator. Ex: z = x+y
+= Short hand for addition and assignment that is a +=b is same as a=a+b;
Short hand operands are permissible with all arithmetic and logical binary operators.
Statements:
Statements are organised as either conditionals, loops, object manipulations, and comments.
Conditional statements:
if (condition) { statements1; }
else { statements2; }
switch (expression){
case (first match):
statement;
break;
case (second match) :

statement;
break;
…….
…….
default (if no match): statement;
}
Loop statements:
for (initial-statement; test; increment) { statements; }
do { statements;} while (condition)
while (condition) { statements; }
break Aborts execution of the loop, drops out of loop to the next statement following the loop.
continue Aborts this single iteration of the loop, returns execution to the loop control, meaning the condition specified
by the loop statement. Loop may execute again if condition is still true.
Object manipulation:
for...in for...in statement is used to cycle through each property of an
object or each element of an array.
with The with statement serves as a sort of shorthand, allowing to execute a series of statement who all assume a
specified object as the reference.
Ex: with (object) {statements; }
Comments:
// for single comment
/* block of comments */
• Functions:Increases modularity: There are several advantages if you adopt modular approach towards the
development of software. If the software that you are going to develop is visualised as several small groups of
statements called modules (rather than a single large block of code statements) then the individual modules can
be assigned to different programmers. This causes great reduction in development time. Frequently used tasks
can be made as subroutines. Whenever found needed, call them. In JavaScript a function definition does this.
This way it also increases the code comprehension and easy to localise the problems that may arise during its
usage.
114
• Reusability: Avoids duplicated effort. Programmer need not start from scratch. Make use of existing components
that are time tested and build
over them.
Reliable software: In software engineering point of view reliable

software comprised of highly cohesive modules.
Function definition:
function funcName(arg1,arg2,….argn){
statements;
}
[arg1,arg2, ….., argn] are parameter list, they are going to be input to the function and the function processes them.
There may be functions that may not have any parameter list. It is represented by empty brackets () after the function
name indicating that it does not have any parameters to take.
It’s best to define the functions for a page in the HEAD portion of a document. Since the HEAD is loaded first, this
guarantees that functions are loaded before the user has a chance to do anything that might call a function. Alternately,
some programmers place all of their functions into a separate file, and include them in a page using the SRC attribute
of the SCRIPT tag. Either way, the key is to load the function definitions before any code is executed.
function blinkbold(message) {
document.write(“<blink><strong>”+message+”</strong></blink>”);
}
It is invoked by simply specifying it along its parameters.

Blinkbold(“Blink Boldly!”);
Every function in JavaScript can return at the most one value.
function to_power_of(x,y) {
total=1;
for (j=0; j<y; j++)
{ total = total*x; }
return total; //result of x raised to y power
}
It is invoked by
result = to_power_of(4,3);
One more interesting point! In JavaScript most of the times functions are called by event handlers
6.3.2 JavaScript Objects:

In object-oriented design, objects are comprised of properties (variables with values) and methods (functions)
relevant to those properties. They are tightly bonded together and are treated under single class. In real life also we
can think this world comprised of objects. Every object has its own properties and its own well-defined functions
(methods).
6.3.3 Document Object Model (Dom)

In JavaScript you may create your own objects for storing data. More commonly, though, you will use the many
“built-in” objects, which allow working with, manipulating, and accessing the Web page and Web browser. This
set of pre-existing objects is known as the “Document Object Model”. DOMs are not just for JavaScript. Any other
programming language can access them. Netscape and Microsoft have developed their own individual DOM’s,
which are not entirely compatible. Thus JavaScript is actually made up of JavaScript, the language, and the DOM,
or object model, which JavaScript can access.
115
JavaScript Objects:
There are three types of JavaScript Objects:
• Browser Objects
• Utility Objects
• User defined Objects
• Browser Objects:
These are defined in DOM. Whenever html tags <script> …. </script> are encountered, browser makes use of these
pre defined objects.
Browser objects:
• Document: The document use to access the current contents of html content.
• Form: Holds the current contents form information of the html document.
• Frame: Refers to frame(s) in the browser window.
• History: Information about the previous sites, which the browser has visited.
• Location: Current web page’s URL and its port.
• Navigator: Information about the script, which the browser is currently executing.
• Window: Refers to current browser window.
Each of these objects has their own properties, which defines the current state of the object. These objects can be
accessed by using . (dot) operator. For ex: objectname.propertyname
document.bgcolr // Back ground color of the current web page

location.hostname // Name of the ISP provider
Each of these objects also have their associated methods. They are also accessed by using . (dot) operator.
docoment.writeln // Writes text to the current web page with a carriage return
history.go // Navigates the browser to a location stored in the history file.
window.alert // Displays an alert box

window.open // Opens a new browser window
Utility Objects:
These objects are used in processing of the data. The following are few frequently used objects
string object: Used for creating new strings
var str new string(“a new string”) // with string object and new
operator
var str “a new string” // a new string is created without new operator
The above two statements are identical because JavaScript recognises any string as a string object
string object properties: length

Ex: str.length // returns the length of the string that str has
116
string object methods:
big() Surrounds the string with html <big>…</big> tag
blink() Surrounds the string with html <blink>…</blink> tag
bold() Surrounds the string with html <bold>…</bold> tag
charat(n) Returns the character at the specified ‘n’ index
italics() Surrounds the string with html <I>…</I> tag
tolowercase() Makes the entire string to lower case
touppercase() Makes the entire string to upper case
math object:
Using math object various math operations can be performed. math object properties:
• • E Euler’s constant base of the natural logarithms
• • LN10 The natural logarithm of 10 (base 2)
• • LN2 The natural logarithm of 2 (base 2)
• • PI The value of pie i.e. 22/7
math object methods:

abs() Calculates the absolute value
ceil() Returns the lowest integer greater than or equal to the given
number
cos() Cosine of the given number
floor() Returns the lowest integer less than or equal to the given number
pow(x,n) Calculates xn
random() Return a random number between zero and one
sin() Sine of a given number
sqrt() Square root of a given number
tan() Tangent of a given number
date object: Makes use of system clock
date object methods:
getDate() Returns day of the month
setDate() Sets date of the month
getHours() Returns hours of the day
setHours() Sets hour of the day
getTime() Returns lapsed time from 1-1-1970 in milli seconds
SetTime() Sets time in milli seconds lapsed from 1-1-1970
User defined objects:

JavaScript allows creating user-defined objects
function stud (sname, srollno, sgroup, srank) {
this.sname=sname;
this.srollno=srollno;
this.sgroup=sgroup;
this.srank=srank;}
The above definition creates an object under the name stud. The instance of the object is created in the following
way….
Student1 = new stud (“Ram”, 1234, “mpc”,104);

Student2 = new stud (“Krishna”, 4567, “bpc”, 87);
117
JavaScript Event handling: JavaScript programs are typically eventdriven. Events are actions that occur on the
Web page, usually as a result of something the user does, although not always. For example, a button click is an
event, as is giving focus to a form element; resizing the page is an event, as is submitting a form. It is these events,
which cause JavaScript programs to spring into action. For example, if you move your mouse over this phrase,
messages will pop-up, courtesy of JavaScript.
An event, then, is the action, which triggers an event handler. The event handler specifies which JavaScript code to
execute. Often, event handlers are placed within the HTML tag, which creates the object on which the event acts
JavaScript defines events for most of the major objects found in web page including image maps, forms etc.
We normally include the event-handling attribute for the events in an appropriate html tag and then specify the event
handling JavaScript code as the attribute’s value.
< A HREF = “http://www.osmania.ac.in/employee”

onMouseOver = “alert(‘Link to employee info data base’)” >
Move the mouse over this and a pop up menu is displayed </A>
< FORM INPUT TYPE = “BUTTON” VALUE = “Click me!”
onClick = “Click handling!”>…...</FORM>
The following are some of the most used event handlers:
onAbort The loading of an image is aborted as a result of user action

onBlur An element uses current focus
onChange Occurs when the data changes
onClick Occurs when link, image map, or form element is clicked
onDbclick Occurs when an element is double clicked.
onError Occurs when there has been JavaScript error.
onFocus This event will be called when the element gets focused.
onKeyDown When user presses a key
onKeyPress When user presses and releases a key.
onKey Up When user releases a key.
onLoad When the element gets loaded.
onMouseDown When user presses a mouse button.
onMouseMove When user moves the mouse.
onMouseOut When mouse moves out of an element.
onMouseOver When user moves over an element.
onMouseUp When user releases a button
onReset When user presses a reset button
onResize When element/Page gets resized.
onSelect When the text is selected.
onSubmit When user presses submit button.
onUnload When the user quits a page/document.
Table 6.3 Most used event handlers
118
First JavaScript program
<HTML>
<HEAD>
<TITLE>Simple Javascript</TITLE>
</HEAD>
<BODY>
<H1>First Example of JavaScript</H1>
<SCRIPT LANGUAGE=”JavaScript”>

</SCRIPT>
<div style=”display: block; font-family: Verdana, Geneva, Arial;
font-size: 10px”>
This simple program demonstrates using of JavaScript and

object.
</div>
</BODY>
</HTML>
Handling Events in JavaScript, an alert window

<HTML>
<HEAD><TITLE>Handling Events Example</TITLE></HEAD>
<BODY>
<H1>Handling Events in JavaScript</H1>
<FORM>
<INPUT TYPE=”button” VALUE=”Click me”
onClick=”alert(‘You clicked me’)” >
</FORM>
<div style=”display: block; font-family: Verdana, Geneva, Arial; fontsize:
10px”>
This program uses JavaScript’s alert window!
</div>
</BODY>
</HTML>
Using for loop

<HTML>
<HEAD><TITLE>Computing Factorials</TITLE></HEAD>
<BODY>
<H1>Another Example of JavaScript</H1>
document.write(“<H1>Factorial Table</H1>”);
for ( i = 1, fact = 1; i < 10; i++, fact = fact * i) {
document.write(i + “! = “ + fact);
document.write(“<BR>”);
}
</SCRIPT>
10px”>
This program demonstrates the usage of for loop in calculating
119
Factorial of numbers from 1 to 9

</div>
</BODY>
</HTML>
Displaying system date and time

<HTML><HEAD><TITLE>Example using new</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function outputDate() {
var d = new Date(); //creates today’s date and time
document.write(d.toLocaleString()); } // converts a date to a string
</SCRIPT></HEAD>
<BODY>
<H1>The date and time are</H1>
outputDate();
</SCRIPT>
10px”>
This program illustrates use of user defined function
</div>
</BODY>
</HTML>
Usage of alert, confirm and prompt buttons

<HTML><HEAD><TITLE>Example of alert, confirm,
prompt</TITLE>
function alertUser() { alert(“An alert box contains an exclamation
mark”);}
function confirmUser() {
var msg = “\n please confirm that you want\n” +
“to test another button?”;
if (confirm(msg)) document.write(“<h2>You selected OK</h2>”);
else document.write(“<h2>You selected Cancel</h2>”); }
function promptUser() {
name1=prompt(“What is your name?”, “ “);
document.write(“<h2>welcome to this page “ + name1 + “</h2>”); }
</SCRIPT></HEAD><BODY>welcome to this page<br>
<FORM>
<INPUT TYPE=button VALUE=”Click here to test alert()”
onClick=”alertUser()”><BR>
<INPUT TYPE=button VALUE=”Click here to test confirm()”
onClick=”confirmUser()”><BR>
<INPUT TYPE=button VALUE=”Click here to test prompt()”
onClick=”promptUser()”></FORM>
10px”>
This program uses forms along with Javascript!
</div>
</BODY>
</HTML>
Typical Browser output (Buttons only):
120
Getting browser information
<HTML><HEAD><TITLE>Browser Info</TITLE>
</HEAD><BODY>
<SCRIPT language=JavaScript>
document.write(“<BR> This browser is “
+ navigator.appName);
document.write(“<BR> Version “
+ navigator.appVersion);
if (parseFloat(navigator.appVersion) >= 4)
{ document.write(“<BR> You have an up-to-date browser”); }
</SCRIPT>
10px”>
This program displays the browser name and its version
</div>
</BODY>
</HTML>
Experimenting with banners

<HEAD><TITLE>Banner</TITLE>
<SCRIPT language=JavaScript>
var banners = new Array();
banners[0] = “banner0”;
var which = 0;
function display(id, str) {
if (document.all) {
document.all[id].innerHTML=str;}
else {
document[id].document.open();
document[id].document.write(str);
document[id].document.close();
}
}
function update() {
display(“banner”, banners[which]);
which++;
if (which == banners.length) { which = 0;};
}
</SCRIPT></HEAD>
<BODY onload=” if (setInterval) { setInterval(‘update()’, 500);}”>
<p>An example of a changing text banner</P>
<P><SPAN ID=”banner” STYLE=”position:absolute;”><I>
<SCRIPT Language=Javascript>
if (setInterval)
121
{document.write(‘the banner is loading’);}

else
{document.write(‘Get a new browser’);};
</SCRIPT></I></SPAN>
<BR><P>Here is the remainder of the document</P>
</BODY></HTML>
Image links
<HTML><HEAD><TITLE>Image Links</TITLE>
<SCRIPT language=javascript>
function highlight(imgName) {
if (document.images) {
document.images[imgName].src =
onImages[imgName].src;}}
function unhighlight(imgName) {
document.images[imgName].src=
offImages[imgName].src;}}
var onImages = new Array;
var offImages = new Array;
onImages[“docs”] = new Image();
onImages[“docs”].src = “images/docs_on.gif”;
offImages[“docs”] = new Image();
offImages[“docs”].src = “images/docs_off.gif”;
onImages[“tech”] = new Image();
onImages[“tech”].src = “images/tech_on.gif”;
offImages[“tech”] = new Image();
offImages[“tech”].src = “images/tech_off.gif”;
}
</SCRIPT></HEAD>
<BODY>
<P> <A HREF=”subdocs/documents.html”
onMouseOver=”highlight(‘docs’)” onMouseOut=”unhighlight(‘docs’)”>
<IMG SRC=”images/docs_off.gif” height=25 width=25 name=docs
border=0
alt=documents></A>
<A HREF=”subdocs/tech.html” onMouseOver=”highlight(‘tech’)”
// sub directory in current location
onMouseOut=”unhighlight(‘tech’)”>
<IMG SRC=”images/tech_off.gif” height=25 width=25 name=tech

border=0
alt=tech_reports></A> // besure to have images in images directory
</P>
</BODY>
</HTML>
Simple frame
<HTML>
<HEAD>
<TITLE>Simple Frame Ex</TITLE>
</HEAD>
122
<FRAMESET rows=”50%,50%”>
<FRAME src= red.html name=frame1> //red.html must be in
current directory
<FRAMESET cols=”30%,70%” >
<frame src= green.html name=frame2 > // green.html must be in current
directory
<frame src= blue.html name=frame3>// blue.html must be in current
directory
</FRAMESET>
<NOFRAMES>You need frames to view this document</noframes>
</FRAMESET>
</HTML>
10px”>
Blank Blank Blank
</div>
Using document object

<HTML>
<HEAD>
<TITLE>Using the Document Object</TITLE>
function SetColors()
{
document.fgColor = “white”;
document.bgColor = “black”;
}
</SCRIPT>
</HEAD>
<BODY>
SetColors()
</SCRIPT>
<PRE>
Explanation: In BODY calls SetColors()
function SetColors()
{
document.fgColor = “white”;
document.bgColor = “black”;
} </PRE>
<hr>
<font size=+3>This text is displayed in white<br>
<font color=red>This text is displayed in red</font></font>
</BODY>
</HTML>
Using for Input validation

<html>
<head>
<title>Using for Input validation</title>
<script language=JavaScript>
function checkEmpty()
123
{
/* This function checks all of the fields of the form and notifies the
client which, if any, form fields are empty. It returns a 1 if all the fields
are full, and a 0 otherwise.
*/
var firstname_filled=false;
var lastname_filled=false;
var streetaddress_filled=false;
var city_filled=false;
var phonenumber_filled=false;
var youremail_filled=false;
var blank=””;
if (document.myform.firstname.value != blank)
firstname_filled=true;
if (document.myform.lastname.value != blank)
lastname_filled=true;
if (document.myform.streetaddress.value != blank)
streetaddress_filled=true;
if (document.myform.city.value != blank)
city_filled=true;
if (document.myform.phonenumber.value != blank)
phonenumber_filled=true;
if (document.myform.youremail.value != blank)
youremail_filled=true;
if ( (firstname_filled) && (lastname_filled) &&
(streetaddress_filled) &&
(city_filled) && (phonenumber_filled) &&
(youremail_filled) )
{
alert(“No missing fields”);
return(true);
}
else
{/* check which fields are missing */
var alertstring=”The following fields are missing:\n”;
if (!firstname_filled)
alertstring=alertstring + “first name\n”;
if (!lastname_filled)
alertstring=alertstring + “last name\n”;
if (!streetaddress_filled)
alertstring=alertstring + “street address\n”;
if (!city_filled)
alertstring=alertstring + “city\n”;
if (!phonenumber_filled)
alertstring=alertstring + “phone number\n”;
if (!youremail_filled)
alertstring=alertstring + “email\n”;
alert(alertstring);
return(false);
}
}
124
</script>
</head>
<BODY bgcolor=”#ffffee”> <pre>
Explanation: Each field is checked for a missing value, and if empty
a boolean variable is set. A string is created of all empty fields
and output.
</pre><hr>
<H1><FONT color=”#000000”>Checking For Empty Form
Fields</H1></FONT><HR>
Type in the data you wish to save to a file on the server.
<FORM NAME=”myform” METHOD=”GET”>
First name: <INPUT type=”text” name=”firstname” size=16 ><br>
Last name: <INPUT type=”text” name=”lastname” size=16 ><br>
Street address: <INPUT type=”text” name=”streetaddress” size=41
><br>
City name: <INPUT type=”text” name=”city” size=21 ><br>
Phone number: <INPUT type=’text’ name=’phonenumber’ size=13 ><br>
Email: <INPUT type=’text’ name=’youremail’ size =20><br> <hr>
<INPUT type=’button’ value=’Add new entry’ onClick=”checkEmpty()”
><br>
</FORM>
<a href=”../ “>Return to Main Page</a>
</body>
</html>
To view selected items list

<HTML><HEAD> <TITLE>Using Multiple Selection Lists</TITLE>
function displaySelectionValues(objectName) {
var ans = “”;
for (var i = 0; i < objectName.length; i++){
if(objectName.options[i].selected){
ans += objectName.options[i].text + “<BR>”;}
}
myWin = window.open(“”, “Selections”, “height=200,width=400”)
myWin.document.write(“You picked these teams:<BR>”)
myWin.document.write(ans)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=”myform” method=”GET”>
Use Ctrl key to select multiple items<br>
<SELECT NAME=”teams” size=3 multiple>
<OPTION value=”dodgers”>Dodgers
<OPTION value=”yankees”>Yankees
<OPTION value=”angels”>Angels
</SELECT><BR>
<INPUT TYPE=”button” value=”Show Selected Items”
onClick=”displaySelectionValues(this.form.teams)”>
</FORM>
<a href=”../”>Return to Main Page</a>
</BODY>
125
</HTML>
XIII). Using Date object
<HTML>
<HEAD>
<TITLE>Using the Date Object</TITLE>
function Clock(hours, minutes, seconds) {
this.hours = hours; this.minutes = minutes; this.seconds = seconds;
}
function DisplayClock(Clock) {
var clockdisp=Clock.hours + “:” + Clock.minutes + “:” +
Clock.seconds;
document.write(“<BR>The time is:” + clockdisp);
}
</SCRIPT>
</HEAD>
<BODY>
<HR>
var timenow = new Date;
document.write(timenow);
thisClock = new
Clock(timenow.getHours(),timenow.getMinutes(),timenow.getSeconds()
);
DisplayClock(thisClock);
</SCRIPT>
<br>
<a href=”../ “>Return to Main Page</a>
</BODY>
</HTML>
Few JSP examples:
These examples will only work when these pages are being served by a
servlet engine like Tomcat. They will not work if you are viewing these
pages via a “file://...” URL.
Number guess program
<%@ page import = “num.NumberGuessBean” %>
<jsp:useBean id=”numguess” class=”num.NumberGuessBean”
scope=”session”/>
<jsp:setProperty name=”numguess” property=”*”/>
<html>
<head><title>Number Guess</title></head>
<body bgcolor=”white”>
<font size=4>
<% if (numguess.getSuccess()) { %>
Congratulations! You got it.
And after just <%= numguess.getNumGuesses() %> tries.<p>
<% numguess.reset(); %>
Care to <a href=”numguess.jsp”>try again</a>?
<% } else if (numguess.getNumGuesses() == 0) { %>
Welcome to the Number Guess game.<p>
I’m thinking of a number between 1 and 100.<p>
<form method=get>
What’s your guess? <input type=text name=guess>
126
<input type=submit value=”Submit”>
</form>
<% } else { %>
Good guess, but nope. Try <b><%= numguess.getHint() %></b>.

You have made <%= numguess.getNumGuesses() %> guesses.<p>
I’m thinking of a number between 1 and 100.<p>
<form method=get>
What’s your guess? <input type=text name=guess>
<input type=submit value=”Submit”>
</form>
<% } %>
</font>
</body>
</html>
Displaying date
<html>
<%@ page session=”false”%>
<body bgcolor=”white”>
<jsp:useBean id=’clock’ scope=’page’ class=’dates.JspCalendar’
type=”dates.JspCalendar” />
<font size=4>
<ul>
<li> Day of month: is <jsp:getProperty name=”clock”
property=”dayOfMonth”/>
<li> Year: is <jsp:getProperty name=”clock” property=”year”/>
<li> Month: is <jsp:getProperty name=”clock” property=”month”/>
<li> Time: is <jsp:getProperty name=”clock” property=”time”/>
<li> Date: is <jsp:getProperty name=”clock” property=”date”/>
<li> Day: is <jsp:getProperty name=”clock” property=”day”/>
<li> Day Of Year: is <jsp:getProperty name=”clock”
property=”dayOfYear”/>
<li> Week Of Year: is <jsp:getProperty name=”clock”
property=”weekOfYear”/>
<li> era: is <jsp:getProperty name=”clock” property=”era”/>
<li> DST Offset: is <jsp:getProperty name=”clock”
property=”DSTOffset”/>
<li> Zone Offset: is <jsp:getProperty name=”clock”
property=”zoneOffset”/>
</ul>
</font>
</body>
</html>
127
• Day of month: is 24
• Year: is 2005
• Month: is May
• Time: is 3:33:11
• Date: is 5/24/2005
• Day: is Tuesday
• Day of Year: is 144
• Week Of Year: is 22
• era: is 1
• DST Offset: is 1
• Zone Offset: is 0
Table 6.4 Typical output from the browser
Hello world using tag hello.jsp

<%@ taglib prefix=”tags” tagdir=”/WEB-INF/tags” %>
<html>
<head>
<title>JSP 2.0 Examples - Hello World Using a Tag File</title>
</head>
<body>
<h1>JSP 2.0 Examples - Hello World Using a Tag File</h1>
<hr>
<p>This JSP page invokes a custom tag that simply echos “Hello,
World!”
The custom tag is generated from a tag file in the /WEB-INF/tags
directory.</p>
<p>Notice that we did not need to write a TLD for this tag. We just
created /WEB-INF/tags/helloWorld.tag, imported it using the taglib
directive, and used it!</p>
<br>
<b><u>Result:</u></b>
<tags:helloWorld/>
</body>
</html>
helloWorld.tag
<%--
hello world tag!
--%>
Hello, world!
Writing plugins:
Tomcat 5 provides a framework for implementing tag plugins. The plugins instruct Jasper, at translation time, to
replace tag handler calls with Java scriptlets. The framework allows tag library authors to implement plugins for
their tags.
128
Tomcat 5 is released with plugins for several JSTL tags. Note that these plugins work with JSTL 1.1 as well as JSTL
1.0, though the example uses JSTL 1.1 and JSP 2.0. These plugins are not complete (for instance, some item types
not handled in <c:if>). They do serve as examples to show plugins in action (just examine the generated Java files),
and how they can be implemented.
How to write tag plugins

To write a plugin, you’ll need to download the source for Tomcat 5.
There are two steps:
Implement the plugin class.

This class, which implements org.apache.jasper.compiler.tagplugin.TagPlugin instructs Jasper what Java codes
to generate in place of the tag handler calls. See Javadoc for org.apache.jasper.compiler.tagplugin.TagPlugin for
details.
Create the plugin descriptor file WEB-INF/tagPlugins.xml

This file specifies the plugin classes and their corresponding tag handler classes.
choose.jsp
<html>
<head>
<title>Tag Examples - choose</title>
</head>
<body>
<h1>Tag Plugin Examples - <c:choose></h1>
<hr>
</br> <a href=”notes.html”>Plugin Introductory Notes<font <font color=”#0000FF”></a>
<br/>
<a href=”howto.html”>Brief Instructions for Writing Plugins
<font color=”#000FF”></a>
<br/> <br/>
<hr>
<font color=”#000000”/>
</br>
<%@ taglib uri=”http://java.sun.com/jsp/jstl/core” prefix=”c” %>
<c:forEach var=”index” begin=”0” end=”4”>
# ${index}:
<c:choose>
<c:when test=”${index == 1}”>
One!</br>
</c:when>
Four!</br>
</c:when>
Three!</br>
</c:when>
<c:otherwise>
Huh?</br>
</c:otherwise>
</c:choose>
</c:forEach>
</body>
</html>
129
expression languages
<html>
<head>
<title>JSP 2.0 Expression Language - Basic Comparisons</title>
</head>
<body>
<h1>JSP 2.0 Expression Language - Basic Comparisons</h1>
<hr>
This example illustrates basic Expression Language comparisons.
The following comparison operators are supported:
<ul>
<li>Less-than (< or lt)</li>
<li>Greater-than (> or gt)</li>
<li>Less-than-or-equal (<= or le)</li>
<li>Greater-than-or-equal (>= or ge)</li>
<li>Equal (== or eq)</li>
<li>Not Equal (!= or ne)</li>
</ul>
<blockquote>
<u><b>Numeric</b></u>
<code>
<thead>
<td><b>EL Expression</b></td>
<td><b>Result</b></td>
</thead>
<tr>
<td>\${1 < 2}</td>
<td>${1 < 2}</td>
</tr>
<tr>
<td>\${1 lt 2}</td>
<td>${1 lt 2}</td>
</tr>
<tr>
<td>\${1 > (4/2)}</td>
<td>${1 > (4/2)}</td>
</tr>
<tr>
<td>\${1 > (4/2)}</td>
<td>${1 > (4/2)}</td>
</tr>
<tr>
<td>\${4.0 >= 3}</td>
<td>${4.0 >= 3}</td>
</tr>
<tr>
<td>\${4.0 ge 3}</td>
<td>${4.0 ge 3}</td>
</tr>
<tr>
<td>\${4 <= 3}</td>
130
<td>${4 <= 3}</td>
</tr>
<tr>
<td>\${4 le 3}</td>
<td>${4 le 3}</td>
</tr>
<tr>
<td>\${100.0 == 100}</td>
<td>${100.0 == 100}</td>
</tr>
<tr>
<td>\${100.0 eq 100}</td>
<td>${100.0 eq 100}</td>
</tr>
<tr>
<td>\${(10*10) != 100}</td>
<td>${(10*10) != 100}</td>
</tr>
<tr>
<td>\${(10*10) ne 100}</td>
<td>${(10*10) ne 100}</td>
</tr>
</table>
</code>
<br>
<u><b>Alphabetic</b></u>
<code>
<thead>
<td><b>EL Expression</b></td>
<td><b>Result</b></td>
</thead>
<tr>
<td>\${‘a’ < ‘b’}</td>
<td>${‘a’ < ‘b’}</td>
</tr>
<tr>
<td>\${‘hip’ > ‘hit’}</td>
<td>${‘hip’ > ‘hit’}</td>
</tr>
<tr>
<td>\${‘4’ > 3}</td>
<td>${‘4’ > 3}</td>
</tr>
</table>
</code>
</blockquote>
</body>
</html>
131
The output for the program is:

This example illustrates basic Expression Language comparisons. The following comparison operators are
supported:
• Less-than (< or lt)
• Greater-than (> or gt)
• Less-than-or-equal (<= or le)
• Greater-than-or-equal (>= or ge)
• Equal (== or eq)
• Not Equal (!= or ne)
6.4 Web Technologies

Internet
The Internet is a global network of networks connecting millions of users worldwide via many computer networks
using a simple standard common addressing system and communications protocol called TCP/IP. Clearly, the
Internet supports the web, and you should have a working knowledge of topics such as domain names, protocols,
security and privacy, etc.
Hypertext Markup Language (HTML)

There are several languages that can be used to create a web site. The underlying foundation, which binds web pages
together, is Hypertext Markup Language - the fundamental building stuff of the web.
It is a non-proprietary format, based upon SGML, for describing the structure of hypermedia documents - plain text
(ASCII) files with embedded codes for logical markup, using tags like <A> and </A> to structure text into tables,
hypertext links interactive forms, headings, paragraphs, lists, and more.
Cascading Style Sheets (CSS)

It is an important step towards separating content and presentation. Style Sheets allow you to control the rendering,
example fonts, colors, leading, margins, typefaces, and other aspects of style, of a Web document without
compromising its structure. CSS is a simple style sheet mechanism that allows authors and readers to attach style
to HTML documents. It also enables some features not offered by HTML, such as removing link underlining.
Graphics Tools and Techniques

Graphics add spice and style to web pages, and can help your visitors visualise what your site is about and how
it’s structured. You can spice up your pages with tasteful backgrounds, or 3D graphics, using tools such as Adobe
Photoshop and Paint Shop Pro.
132
For many people, Web Design = Graphics. Almost all web sites benefit from well-planned images - especially if they
are fast-loading, and the site still remains usable if the graphics are ignored, e.g. by text-only browsers and so on.
Programming and scripting

The web becomes more than just static pages when you make it interactive with Programming and Scripting
techniques. You can combine HTML, Style Sheets and some Scripting for Dynamic HTML to make web page
more attractive.
PHP (Hypertext Preprocessor)

Self-referentially short for PHP: Hypertext Preprocessor, an open source, server-side, HTML embedded scripting
language used to create dynamic Web pages.
In an HTML document, PHP script (similar syntax to that of Perl or C ) is enclosed within special PHP tags. Because
PHP is embedded within tags, the author can jump between HTML and PHP (similar to ASP and Cold Fusion)
instead of having to rely on heavy amounts of code to output HTML. And, because PHP is executed on the server,
the client cannot view the PHP code.
PHP can perform any task that any CGI program can do, but its strength lies in its compatibility with many types
of databases. Also, PHP can talk across networks using different protocols.
PHP is one of the most popular scripting languages for use on the web. Now in version 4, its phenomenal growth
has come mostly at the expense of Perl and CGI. It’s open-source, easy-to-learn for Perl programmers, and is rapidly
expanding beyond only web use, making it a good language to learn.
JavaScript
JavaScript is NOT JAVA! They are quite different. JavaScript is a lightweight client-only scripting language, suitable
for calculators and other relatively non-GUI applications. In particular, it is needed for Dynamic HTML. A client-side
technology, essential for effective dynamic pages; problematic due to differences between the major browsers..
Dynamic HTML
Dynamic HTML is typically used to describe the combination of HTML, style sheets and scripts that allows a web
page to change after it’s loaded into the browser --there doesn’t have to be any communication with the web server
for an update. You can think of it as ‘animated’ HTML. For example, a piece of text can change from one size or
color to another, or a graphic can move from one location to another, in response to some kind of user action, such
as clicking a button.
Multimedia
Graphics spice up a web site and with GIF animation can be made more eye-catching (or distracting, and certainly
larger). But there are many more options, allowing interesting audio and visual effects, example, Shockwave, Java,
and so on.
Databases
The power of the WWW comes not simply from static HTML pages - which can be very attractive, and the important
first step into the WWW - but especially from the ability to support those pages with powerful software, especially
when interfacing to databases. The combination of attractive screen displays, exceptionally easy to use controls and
navigational aids, and powerful underlying software, has opened up the potential for people everywhere to tap into
the vast global information resources of the Internet.
133
Summary
• Java Server Pages (JSP) technology provides an easy way to create dynamic web pages and simplify the task
of building web applications that work with a wide variety of web servers, application servers, browsers and
development tools.
• JSP is the equivalent from Sun Microsystems, a comparison of ASP.
• JSP source code runs on the web server in the JSP Servlet Engine.
• Declaration tag allows the developer to declare variables or methods.
• Directives do not produce any visible output when the page is requested but change the way the JSP Engine
processes the page.
• A tag lib is a collection of custom tags that can be used by the page.
• A Javabean is a special type of class that has a number of methods. The JSP page can call these methods so can
leave most of the code in these javabeans.
• JavaScript is a compact, object-based scripting language for developing client and server Internet
applications.
• JavaScript code is typically embedded into an HTML document using the SCRIPT tag.
• Arithmetic operators: +,-,*,/,% are binary operators ( they perform on two operands) for addition, subtraction,
multiplication, division, and modulus respectively.
• JavaScript programs are typically eventdriven.
• JavaScript defines events for most of the major objects found in web page including image maps, forms and
so on.
• Tomcat 5 provides a framework for implementing tag plugins.
• The Internet is a global network of networks connecting millions of users worldwide via many computer networks
using a simple standard common addressing system.
• Graphics add spice and style to web pages, and can help your visitors visualise what your site is about and how
it’s structured.
• PHP is one of the most popular scripting languages for use on the web.
• JavaScript is a lightweight client-only scripting language, suitable for calculators and other relatively non-GUI
applications.
• PHP can perform any task that any CGI program can do, but its strength lies in its compatibility with many
types of databases.
• CSS is a simple style sheet mechanism that allows authors and readers to attach style to HTML documents.
References
• Schafer, M. S., 2011. HTML, XHTML, and CSS Bible, 5th ed. John Wiley & Sons.
• Wilton, P., 2004. Beginning Java Script (2Nd Ed.), John Wiley & Sons.
• JSP Tutorial, [Online] Available at: < http://jsptut.com/> [Accessed 22 June 2012].
• Haney, D. J., Server-Side Scripting In JavaScript/JScript And VBScript, [Online] Available at: < http://proc.
isecon.org/2000/100/ISECON.2000.Haney.pdf> [Accessed 22 June 2012].
• daniellestevensonus, 2010. JSP (Java Server pages) Video Tutorial, [Video Online] Available at: <http://www.
youtube.com/watch?v=NLMkaSlZQ28> [Accessed 22 June 2012].
• superboysales, 2010. Java Server Pages (JSP), [Video Online] Available at: <http://www.youtube.com/watch
?v=bMjx8zuJNfY&feature=related> [Accessed 22 June 2012].
134
Recommended Reading
• Hanna, P., 2003. JSP: 2.0: The Complete Reference, Tata McGraw-Hill Education, 2003.
• Basham, B., Sierra, K., Bates, B., 2008. Head First Servlets and JSP: Passing the Sun Certified Web Component
Developer Exam, 2nd ed. O’Reilly Media, Inc.
• Bollinger, G., Natarajan, B., 2011. JSP: A Beginner’s Guide, Osborne/McGraw-Hill.
135
Self Assessment
1. Who developed JSP?
a. Intel
b. Sony
c. Samsung
d. Microsoft
2. What is the full form of JSP?

a. Java Script Pages
b. Java Server Pages
c. Java Source Pages
d. Java Server Program
3. _________ is the equivalent from Sun Microsystems, a comparison of ASP.

a. J2EE
b. HTML
c. COM
d. JSP
4. Which of the following is not one of the JSP tags?

a. Servlet tag
b. Declaration tag
c. Expression tag
d. Directive tag
5. ____________ tag allows the developer to declare variables or methods.

a. Expression
b. Declaration
c. Directive
d. Action
6. _______________ allows a JSP developer to include contents of a file inside another.

a. Tag lib directive
b. Include directive
c. Scriptlet tag
d. Javabeans
7. Which of the following is not one of the three main roles of action tags?
a. Enable the use of server side Javabeans
b. Transfer control between pages
c. Files are used for navigation, tables, headers and footers
d. Browser independent support for applets
136
8. There are several objects that are automatically available in JSP called ____________.
a. implicit objects
b. javabeans
c. ASP
d. Java script
9. Which of the following is not one of the elements of java script?

a. Variables
b. Operators
c. Constants
d. Functions
10. __________________ are binary operators ( they perform on two operands) for addition, subtraction,
multiplication, division, and modulus respectively.
a. Arithmetic operators
b. Unary increment
c. Decrement operators
d. Logical operators
137
Chapter VII
Web 2.0
Aim
• introduce Web 2.0
• elucidate social networks and user participation
• explain internet as a platform
Objectives
• recognise different frauds and cyber crimes
• determine the term webfilter
• elucidate Web 2.0 in the workplace
Learning outcome
• understand significance of Web 2.0
• identify the XML syndication
• understand compromised websites
138
7.1 Introduction: Web 2.0
Web 2.0 is more about how use of the Internet is changing than about a new version of web technologies. The
Internet is becoming more of a platform for existing technologies, many of them collaborative, and a perpetual
beta site for new technologies. So-called “mashups” of existing technologies, combined with growing numbers of
knowledgeable users, and the proliferation of how-to data, is opening doors to threats that didn’t previously exist.
Web-based communities and hosted services such as social networking sites, wikis, and blogs, aim to facilitate
creativity, collaboration, and sharing among users; but the very openness of these sites makes them vulnerable to
new, multi-layered malware attacks.
7.2 The Internet as a Platform

Web 2.0 thrives on network effects: databases that get richer the more people interact with them, applications that
are smarter the more people use them, marketing that is driven by user stories and experiences, and applications that
interact with each other to form a broader computing platform. What’s causes this change? Consider the following
raw demographic and technological drivers:
• One billion people around the globe now have access to the Internet.
• Mobile devices outnumber desktop computers by a factor of two.
• Nearly 50 percent of all U.S. Internet access is via always-on broadband connections.
• Combine these drivers with the fundamental laws of social networks and lessons from the web’s first decade,
and
• In the first quarter of 2006, MySpace.com signed up 280,000 new users each day and had the second most
Internet traffic.
• By the second quarter of 2006, 50 million blogs were created – new ones were added at a rate of two per
second.
• In 2005, eBay conducted 8 billion API-based web services transactions.
These trends manifest themselves under a variety of guises, names, and technologies, notably: client-side processing
(AJAX/RIAs), XML syndication (Blogs and Wikis), mashups and shared content, social networks and user
participation.
Client-Side Processing (AJAX and RIAs)

Asynchronous JavaScript and XML (AJAX) is arguably the most popular member of a class of technologies that
enable rich Internet applications (RIAs) by performing functions and processing data through seamless background
integration. RIAs create the visual effect of an interactive web page, though in actuality the traditional Hypertext
Transfer Protocol (HTTP) GETs and POSTs are occurring behind the scenes. The goal of RIAs is to give the user an
experience equal to or better than that of a desktop application. One way RIAs accomplish this is to make a single-
page interface more intuitive by providing contextual controls wherever the opportunity exists. So hovering a mouse
over a word may trigger a pop-up definition, or hovering over a stock ticker symbol may bring up its current trading
data. AJAX has become popular now that most browsers support the four key underlying technologies – JavaScript
scripting language, Cascading Style Sheets (CSS) to dynamically apply styles, the Document Object Model (DOM)
that defines object properties of the web page, and the XMLHTTPRequest (XHR) object that makes dynamic HTTP
calls “behind the scenes” of the page. Because of the full browser support and addressability of objects within it,
developers have embraced AJAX as a way to spice up the browser window and improve the user experience.
XML Syndication: Blogs, Wikis, and RSS

Blogs, wikis, and many web sites support XML file formats that provide syndication of content. RSS (Real Simple
Syndication) and Atom are two of the most popular formats. RSS and Atom files provide the necessary information
for software running on the desktop, called “newsreaders” or “aggregators,” to automatically recognise whether a
particular web site or grouped set of web pages has been updated or otherwise changed in some way. Typically, a
user subscribes to web content by inserting the feed name (a Uniform Resource Locator [URL]) in the newsreader.
The newsreader monitors the feeds and identifies new content either through a scheduled or manually triggered
process.
139
Mashups and Shared Content

Mashups combine data from multiple sites into a single user experience. While there are many ways to capture
and process information from other sites, the preferred web 2.0 method is through a set of application platform
interfaces (APIs). For example, Amazon and Google both have APIs for other sites to customise in their mashups
(see iGoogle).
Sharing information is not new to the web; some might even say that is the reason the web exists. Many web sites
use available Hypertext Markup Language (HTML) capabilities such as image source references and iFrames to
retrieve content from third-party web sites and incorporate it into a page. Ad servers that provide online content for
publications are a common example of this use. APIs simply extend that model.
However, there is a significant architectural difference between traditional links such as those in online magazines
that connect to ad servers and the way public APIs are being used by mashups: the actual retrieval of the information
shifts from the client side to the server side. When a browser issues a request for a web page, the browser interprets
the content as it is downloaded. When it sees an external link such as those associated with advertisements, the
browser issues a request directly to that site to retrieve the data.
In contrast, a mashup issues its request via a server-side “proxy” or callback. The user still downloads the web
page, but in order to deal with “same origin” requirements in JavaScript and other programming languages, the data
retrieval must return to the original web site. A proxied process in the background then retrieves the information and
presents it back to the user. This means that several sources are trafficking data without explicit user direction.
7.3 Social Networks and User Participation

User participation in content creation is the name of the game on the Internet today. Web sites that facilitate and
encourage users to create their own content act as distributors to other like-minded individuals. MySpace, Facebook,
Flickr, and Wikipedia are examples of the user participation phenomenon. On such sites, users can:
• Update web pages with commentary via standard HTML forms (blogs, wikis, social networks, and forums)
• Upload files for viewing and download by others (résumés, photos, audio podcasts, and videos)
This user participation is reflected in the design of social networking sites: They operate as structured environments
that allow users to manage their own web pages – often with a number of configuration options for look and feel
as well as various types of transaction processing.
7.4 Significance of Web 2.0

Web 2.0 technologies have invaded the workplace leading to a dramatic increase in malware and data leak
vulnerabilities.
Web 2.0 sites such as blogs, wikis, and RSS feeds have complex content that require code to be executed on the
user’s browser, which in turn allows hackers to embed malicious code that is then automatically executed.
Web 2.0 client-side technology (applications run on a user’s local computer connecting to a server) has developed
far more quickly than security technology, which traditionally protects the server operating system rather than the
client side (depending on the user’s security implementations for protection).
Web 2.0 sites often use data from different sources, such as a retail store site using Google maps to display locations;
this makes it more difficult for security systems to validate the integrity of the code. Hackers are also embedding
spam and malicious code into other types of content, such as instant messaging, shared video content, and business
documents like PDF and Excel files.
Everyone who depends on the Internet must learn and face the challenges of web 2.0 because it is changing the way
everyone, enterprises and individuals, use the Internet:
140
Internet 2.0:
• 42% of office workers 18-29 discuss work-related issues on social networking sites (blogs).
• 50% of IT managers indicate that 30% of bandwidth is social networking.
• SaaS (software-as-a-service) usage is steadily increasing.
Intranet 2.0
• Forrester predicts that web 2.0 intranets will be a $4.6 billion industry within 5 years
Extranet 2.0
• Nearly half of all web developers are already using AJAX.
• In 2007, more than 30% of large companies had a web 2.0 business initiative.
• 66% of companies indicate web 2.0 is essential to maintaining their company’s market position.
7.5 Web 2.0 in the Workplace: Enterprise 2.0

Internet use in the workplace has become ubiquitous. Employees browse dozens of websites a day for research
purposes, competitive analyses, and pertinent information. Many useful tools and Internet sites have enabled people
to become more efficient at accomplishing multiple tasks in a shorter amount of time. The average worker spends
nearly 2.5 hours a day online (eMarketer). Outsourced applications and services such as Salesforce.com and Outlook
Web Access are common in the enterprise. Enterprise WAN application delivery networks (ADNs) deliver sensitive
data, sometimes in real-time.
In September 2007, Forrester Consulting conducted a survey of 153 businesses with 1,000 or more employees. They
found that organisationorganisations, whether officially sanctioned or not, use web 2.0 applications extensively. The
future workplace will include web 2.0-inspired applications such as RSS, blogs, RIAs, tagging, virtual worlds, and
wikis, according to a recent report by Forrester detailing the “The Seven Tenets of the Information Workplace.”
Managed Outsour ce
Datac enter Web Apps
Branch Office
Branch Office
Users are Everywhere

Applications are Everywhere
Malware is Everywhere Branch Office
Security is Poor
Fig. 7.1 An enterprise without boundries

141
AJAX and RIAs

Because RIAs improve the way people find and manipulate content, complete transactions, and consume multimedia
content, these technologies are ideal for improving the user experience for information workers. Moving forward,
RIA technologies like Adobe Flash and Flex, Adobe Integrated Runtime (AIR), AJAX, the Curl RIA Platform, Laszlo
Systems OpenLaszlo and Webtop, Microsoft Silverlight, Nexaweb’s Enterprise Web 2.0 Suite, Oracle WebCenter,
and Sun JavaFX will be used to augment or even replace traditional enterprise portals and Microsoft Office as
Information Workplace front-ends.
Blogs, Wikis, and Feeds

Blogs are valuable knowledge management and communication tools in companies, quickly communicating
information such as project updates, research, and product and industry news both inside and outside the business.
But blogs aren’t entering through the CIO’s office; they often first appear in companies as the convenient records
of engineering or design projects.
Wikis are revolutionising collaboration within the enterprise much as email has revolutionised communications.
Wikis may be used for knowledge management, document management, project management, documentation,
scheduling, meetings, directories, and more. Unlike most previous collaboration tools, wikis are simple enough to
use without special training or a large degree of technical knowledge. An estimated 33% of enterprises are already
using wikis and another 32% plan to do so within 2 years (Economist Intelligence Unit survey, January 2007).
RSS feeds are available for a wide variety of web sites; many can be useful to professionals. In the workplace,
professionals subscribe to a newsreader or aggregator client software or (if the feed is hosted) a web application
that aggregates syndicated web content such as news headlines, blogs, podcasts, and vlogs in a single location for
easy viewing. Many companies that discovered utility in blogs and wikis are realising that RSS is necessary to push
that content to users.
Social Networks
Social networking technology allows users to keep in touch and share data with colleagues in an increasingly
rich environment. The ‘millennials’ – generally considered those between 16 and 24 years of age – use sites like
MySpace, Xanga, and FaceBook the way that many older people use the telephone, email, and coffee shops. Social
networking sites are a way to communicate and the millennials are totally comfortable in the online environment;
they “chat” and “blog” and post pictures of parties and parents and everything else on the Internet. The line between
public information and private information is rapidly blurring.
7.6 Hackers have Changed

Perhaps the single most relevant change is in the hackers themselves. Criminal organisation have realised how
powerful the Internet is for committing online fraud, and they’ve invested huge resources. They’ve learned to take
advantage of the Internet’s weaknesses and to exploit these for their own profit. This ‘new’ fraud includes identity
theft, credit card fraud, theft in online banking, illegal pharmacies, scams, cyber squatting, fraud in online auctions,
and malicious code.
Criminal hackers have cost United States businesses an estimated $67.2 billion a year, according to the US Federal
Bureau of Investigation (FBI).
More Criminal Intent for Profit over Fame

A report released by the Georgia Tech Information Security Centre (GTISC), one of the leading independent
security research institutes, warns that 2008 is likely to see a wide range of new threats to information security. “The
increasing involvement of organised crime syndicates in online theft is leading to more sophisticated hackers who
are motivated by financial gain, rather than personal reasons,” according to the report, leading to more sophisticated
attacks that often combine different techniques and look to exploit developing technologies that are not as well
protected as existing systems.
142
These issues include outside hackers; employees attempting to access unauthorised material; and denial of service
attacks (DoS), protocol-based attacks that attempt to overwhelm company systems. Hackers may try to guess
passwords, intercept unencrypted communications, bypass application security with attacks that exploit a weakness
in the software, find ‘backdoor’ weaknesses including unprotected accounts or admin accounts that have the default
passwords, and more.
More Money, Time, and Expertise

Hacking has achieved enterprise status. Malware kits are sold – with management consoles and regular updates –
over the web. Professional programmers are paid to discover and exploit vulnerabilities. A single good vulnerability
in popular software such as Internet Explorer can be sold for as much as $10,000.
There are numerous websites devoted to distributing, usually for a fee, tips on spamming and propagating malware.
Newbie hackers have a name of their own: script kiddies.
More Short-Burst Attacks

New websites can be thrown up for the purposes of botnet recruitment (discussed below) or phishing attacks
(criminal masquerades of legitimate e-commerce) and torn down before any database can categorise them. Roving
DNS host IDs and temporary websites are used to keep one step ahead of URL categorising engines and reputation
tracking host databases.
Botnets – A Hidden Economy

Bots are little programs that are installed silently without user intervention; often through drive-by downloads
operating secretly on an otherwise “good” website. A botnet is a network of computers on which bots have been
installed, usually managed remotely from a Command & Control (C&C) server; however, more and more through
peer to peer management to be more resilient. The main purpose of botnets is to use hijacked computers for fraudulent
online activity; they are managed by a criminal, a group of criminals, or an organised crime syndicate and are often
for rent.
Once a set of computers has been compromised, they can be involved in many kinds of online criminal activity,
including identity theft, unsolicited commercial emails, scams, and massive attacks. It is estimated that more than
6 million infected computers worldwide are connected to some type of botnet. Most owners of infected computers
do not know that their machines have been compromised. Well known botnets are STORM, MegaD, and MayDay.
The eventual weakness of a botnet is ‘exposure’ allowing security researchers more samples to analyse and then
develop defenses.
Bots gained their current status as a result of several factors. Perhaps the most important is that bots leverage the
work of others. Several bot families are considered open source projects, developed collaboratively and refined by
many.
But even more importantly, bot developers piggyback on the work done by well-intentioned security researchers. Most
cybercriminals do not have the skills to discover and exploit software vulnerabilities. But when such vulnerabilities are
made public in an effort to raise awareness, bot authors incorporate the work into new versions of their threats.
According to Commtouch, more than 85% of spam messages and nearly 100% of malware messages are sent from
zombie machines (a system infected with a bot). As of early 2008, Google Message Security had tracked a 62%
increase in the daily number of unique IP addresses that are blocked by its network compared to early 2007. This
is a clear indication of the growth of botnets.
143
According to Postini statistics:

• More than one million internet protocol (IP) addresses are now coordinating spam and malware attacks each
day.
• More than 50,000 infected computers are attacking at any particular point in time.
• Spammers are constantly changing IP addresses to evade detection.
7.7 Organisations are not Prepared for Web 2.0 Threats

Miscreants on the Internet manipulate and defraud users and organisations alike. Web 2.0 technologies introduce
risks along with benefits; the core notion of a flexible and open architecture invites exploitation and compromise.
This is nothing new. But the web’s components are becoming more distributed and interdependent than ever before,
and they are often at or beyond the outer bounds of control for the individual enterprise or user.
Want Benefits of Web 2.0 but Worried about the Impact

Numerous web 2.0 applications are useful for business purposes. At the same time, however, the extensive use of
web 2.0 applications leads to increased non-business web usage and bandwidth consumption, which in turn leads
to decreased employee productivity. Many businesses believe that taking away access to social networking and rich
media sites will visibly increase employee productivity. In a survey of network managers and security managers,
more than 70% wanted social networking sites banned (SecureIT).
According to Forrester research, 47% of organisations reported that malware and viruses caused significant problems,
while 42% reported problems due to Trojan software. Twenty-one percent experienced critical business disruption
from viruses and 16% with Trojans.
OrganisationOrganisations also listed data leakage as a major source of problem. Thirty-three percent reported
significant problems as a result of data leaks, and 18% experienced critical business disruptions.
Web Gateways Lack Adequate Protection

Forrester research also reveals a visible discrepancy between how prepared businesses perceive themselves to be and
how prepared they actually are to deal with these threats. Nearly 97% consider themselves prepared for web-borne
threats, with 68% conceding room for improvement. However, when asked how often they experience malware
attacks, 79% reported more than infrequent occurrences of malware, with viruses and spyware leading the pack.
Perhaps more astoundingly, 46% of the organisations surveyed reported that they spent more than $25,000 in the
last fiscal year exclusively on malware cleanup.
Threat Focus on Email/Lack of Productivity

Traditionally, enterprises have focused on filtering email for viruses or spam and/or limiting employee use of the
web in an effort to combat loss of productivity. However, with the rise of web 2.0 technologies neither of these
strategies is adequate today. Malware and spam arrive in the form of browser “drive-bys” even when the website is
a legitimate one. Data leakage, often inadvertently, is becoming a greater issue that productivity loss.
7.8 How Security Challenges Change with Web 2.0?

The underlying functionality of web 2.0 includes, at minimum, the technologies associated with client-side processing,
syndication, mashups, and user participation. All of these technologies have a role to play in web 2.0 and introduce
a set of risks that must be evaluated.
To accomplish their objectives, attackers use a myriad of techniques in the web 2.0 environment. They upload
malware, insert malicious code, traverse domain security restrictions, abuse rendering engines, and propagate worms
(SPI Dynamics in Atlanta).
144
Web 2.0 Creates:
• Compromised websites – zero-day attacks, third party widgets, auto-executing code
• More malware access:
• Client-side processing :more surface areas for attack
• Syndication : greater transparency for attackers
• Mashups : complex trust scenarios
• User Participation : erosion of traditional boundaries
• More avenues for data leakage – wikis, blogs, trackbacks (described further in this document), emails, instant
messaging
7.9 Compromised Websites

Google has identified more than three million unique URLs on more than 180,000 websites that automatically install
malware on visitors’ machines , spam often is used to drive traffic to these sites simply for the purpose of installing
malware for later use.
Even though major virus outbreaks are rarely reported these days, highly regarded websites continue to be hacked.
For example:
• In April 2008, malware injection attacks were reported in the UN, UK, USA Today, Target and Walmart
websites.
• The Dolphin’s Stadium website was hacked before the 2007 Super Bowl. The website redirected thousands of
visitors to phishing and malware sites.
• The Better Business Bureau links sponsored by Google infected users with keyloggers that recorded and stole
banking information.
Tom’s Hardware – a popular technology website – infected users over the course of several days early in 2007 with
Trojans that stole personal information from their computer (A More Secure Approach to Dynamic Web Threats: A
Frost and Sullivan White Paper sponsored by Postini).
Most organisations today use static URL filtering and anti-virus signature scanning at their web gateway as their
primary means to combat web threats. This approach is clearly not sufficient as evidenced by the continued plague
of malware.
The type of malware that makes it past static URL filtering at web gateways is most likely of the “zero-day” variety
injected into popular websites that are allowed in policies for user access. Signature scanning cannot detect zero-day
attacks as, by definition, there are no signatures available for zero-day threats, or the attack uses a custom encryption
wrapper to blind the web gateway and only uncloaks itself once on the client system.
The only hope to catch zero-day attacks is to participate in a web-based honey grid ecosystem that detects hidden
malware; and employ on-the-fly, dynamic detection capabilities such as behavioral and heuristics-based detection.
Without that, many attacks will go undetected.
Consider the following:

• The idea of “good” websites and “bad” websites that can be blocked via URL is no longer viable: As many as
70% of web-based infections come from legitimate sites injected with HTML iframes (sometimes known as
malframes). Because these are categorised as “good” websites, they by-pass firewalls, static URL filtering, and
reputation scores.
• Fast-flux services constantly change DNS records every few minutes, or 1000s of sub-domains hide the real
site, making hostID (the host part of an Internet address) reputation databases useless to mitigate web threats.
145
• Polymorphic malware (viruses that change with each infection) make traditional, signature-based virus detection
less and less effective.
• Predictable traffic increases to legitimate sites, such as sports sites before the Super Bowl, present opportunities
for “drive-by” infection if the site is injected with malware.
A website is only as safe as the last transaction or request. Injection attacks can change a popular and trusted website
into a malware distribution point in seconds. For web gateway security, this means that every request needs to be
lysedanalysed for threats as the trust or reputation model used for email spam filtering does not extend into the web
domain. Not analysing content because a website is noted as having a positive reputation is a huge mistake for web
gateway security.
7.10 Malware Access

“Web 2.0 technologies, like client-side AJAX, XML syndication, mashups, and social networks create many new
input vectors for attackers: they upload malware directly into social networks, insert malicious mobile code (MMC)
into HTML documents, and continue to build techniques for traversing domain security settings.” (SPI Dynamics
in Atlanta)
7.10.1 New Client-Side Technologies

The idea of the Internet as a platform, specifically a beta platform, encourages the deployment of beta software.
New technologies (AJAX, Flex/Flash, XAML, REST, XML, JSON, plugins) are more susceptible, may be less
well protected, and less well understood by existing anti-malware. The popularity of AJAX creates more risk,
simply because more people (and therefore more attackers) are familiar with it and develop with it. The following
list describes how the four technologies work together to expand the attack surface and make attacks more likely
to succeed:
• JavaScript (like other scripting languages) provides the “active ingredient” processing capability. A web page
that contains JavaScript code is downloaded into a browser, where the code executes automatically. This code
runs in the domain of the web page and retains full privileges as if it’s operating on behalf of the user (which,
unfortunately, is not always the case).
• DOM and CSS turn the structure and contents of a web page into individual addressable objects that can be
manipulated via programs. Standardised structures that enable social networks and other member-oriented
websites, such as online banking services, are accessed via the DOM and can be used to mount an attack.
• The XHR capability hides the attack by executing HTTP GETs and POSTs on behalf of the user in the background,
effectively separating the user experience from the retrieval and transmission of web content. With XHR’s ability
to retrieve data in the background, the user is less likely to recognise an attack in progress and therefore less
likely to successfully counter the attack.
AJAX functionality facilitates two types of attacks. First, as with any program where the processing occurs on
the client, the local programs that support and parse the commands are susceptible to buffer overflows and similar
attacks, which could be exploited to download and install malware such as rootkits and remote control programs
that take over the client. This is true with any client-side processing.
The second, less common capability of AJAX is the opportunity for client-side code to mimic any actions that a user
can perform on a website. Constraints are in place that attempt to limit access within the web domain from which
the code was downloaded, but a number of cross-site scripting and cross-site request forgery techniques exist to
bypass this containment and attack any web session that is currently open in the browser.
7.10.2 XML Syndication : Feeds for Wikis and Blogs

XML syndication introduces a new model of content retrieval to the web. Rather than requiring users to access a
website by typing in a URL or clicking on a link every time they want to view the contents, the software automatically
discovers new information from subscribed feeds and “pulls” it to the endpoint through an automated process. This
new technology brings about a handful of new risks:
146
• RSS aggregators are software, too. Anytime new software is introduced onto the client, vulnerabilities are likely
to come with it. These vulnerabilities may be either of two types: software coding errors (bugs) that break the
intended software functionality, or emergent errors that abuse the functionality of a program.
• Readers may save data locally. Because RSS readers often save their formatted files locally, the files become a
resident threat to the client. These files may be opened and manipulated by other software programs or, in some
cases, may be laced with malicious code that can manipulate other local content. This amounts to privilege
escalation, compared to typical web pages that are configured to be selfcontained with no direct access to the
local system.
• Browser vulnerability. Because browsers are often used to view the data, RSS provides another attack vector
for scripting attacks that may be used to compromise systems. This potential holds true for both client software
and online aggregators.
7.11 About Trackbacks

When a website automatically posts comments to another site it is called a trackback. Blogs and many wikis
automatically post comments on a website’s page (when comments are enabled). In most cases, the trackbacks
and comments are used to create a discussion around a particular subject; that’s why wikis and blogs are key to
developing an Internet community. However, wikis are often used in development projects, and development secrets
can be inadvertently given away through trackbacks. Even secured blogs can be exploited through the trackback
vulnerability.
7.11.1 Mashups
The key risks associated with mashups are:
• Reliance on a third party’s security posture: Because mashups connect dynamically to third-party websites,
the integrity of the data and programs being accessed on those websites is either assumed or validated in real
time. If the content provider is compromised, the damages may be inherited by the website host as well.
• Availability issues are transitive: If the content provider has a problem with availability due to overuse or
denial of service (DoS) attacks, that problem is inherited by all other service providers with respect to their own
users. Users will simply see the issue as associated with the service provider itself.
• Responsibility for attacks against the API: It remains unclear how two entities should handle a trust relationship
when a website accessing an API unknowingly facilitates an attack against that API. An inadvertent attack like
this is essentially indistinguishable from a cross-site scripting attack.
• Liability associated with intellectual property misuse remains unclear: With many media sites such as Flickr
and YouTube facilitating the use of multimedia content, the rights associated with the display and distribution
of this content elsewhere are still being determined.
Active Server Pages Corporate

Network
Internet
Spywar e Intellectual Property Rogue Apps

SSL Business Apps Viruses Phishing Worms
SSL
External Internal
Apps Users
Fig. 7.2 SSL Provides a Private Link for Legitimate Applications, and Malware, Confidential Data,
Unsanctioned Traffic
147
Because SSL content is encrypted, it can’t be intercepted by security systems without being decrypted and
reencrypted. Users can bring in various malware (including viruses), access forbidden sites, and leak confidential
business information over an HTTPS connection. Because IT organisations often have no visibility into SSL sessions
traversing their network, they are blind to any potential security threats sent over HTTPS. In addition to the security
threat, encrypted traffic makes it difficult for IT to assess bandwidth usage and apply intelligent content control
policies to ensure maximum user productivity.
7.11.2 Data Leak Vulnerabilities

Data leakage caused by removable media, spyware and malware, and the resulting regulatory compliance issues,
remains at the top of enterprise IT challenges. Most data leaks and targeted attacks – inadvertent or intentional occur
at the endpoint and many of these are generated internally. Unmanaged removable media and applications can easily
open the floodgates for data to escape into the wrong hands. Recent examples includes:
• 320,000 sensitive files were allegedly transferred to a thumb drive by a Boeing employee and leaked to the
Seattle Times
• 8,000 Texas A&M Corpus Christi students’ personal information, including social security numbers were lost
in Madagascar when a professor vacationing off the coast of Africa took the data with him on a flash drive
• Data thieves breached the systems of credit card processor CardSystems Solutions making off with data on as
many as 40 million accounts affecting various credit card brands, according to MasterCard International
• The entire database of child benefit recipients maintained by Her Majesty’s Revenue and Customs
(HMRC) department has gone missing after being posted to the National Audit Office by a junior official.
(darkREADING)
• Some 4.6m customers of Japanese broadband outfit Yahoo! BB – which is run by Softbank and Yahoo! – had
their personal details compromised. Criminals allegedly hacked into Softbank’s database and copied the data
after obtaining a password from a former Softbank worker. The company is set to spend around four billion yen
(£20 million) compensating those hit by the leak. (The Register)
Seventy-five percent of FORTUNE® 1000 companies fell victim to accidental and/or malicious data leakage.
The cost to recover when corporate data was leaked or stolen was an average of nearly $5 million in 2006, 30%
more than in 2005. Furthermore, malware attacks, unauthorised access to networks, lost/stolen laptops and mobile
hardware, theft of proprietary information or intellectual property accounted for more than 74% of financial losses.
(Lumension Security)
7.12 Blue Coat Web 2.0 Layered Security Solutions

How can one combat web 2.0 security challenges? How to defeat expert programmers with plenty of money and
time to devote to their malware craft, beta software that may not be fully vetted, collaborative websites that depend
on several people maintaining their own security, and new technologies that put processing at the client where
numerous vulnerabilities may exist? Blue Coat can help. Blue Coat ProxyAV + ProxySG layered defences are
illustrated in Figure 4.
ProxyAV
with Leading Anti-Malware Engines
Web Traffic (inbound/outbound)

Internet
ProxySG
Workstations + WebFilter and WebPulse Ec osyste m
Fig. 7.3 ProxyAV plus ProxySG = Layered Malware Defense
Web content is very dynamic; URL databases rate less than an estimated 20% of the Internet, and new attacks are
coming in short time bursts in popular websites. Signature updates for threats, websites, and reputations, often take
hours (and sometimes more than a day) to develop, and leave networks exposed.
148
Blue Coat security appliances provide Secure Web Gateway (SWG) technologies that include three types of zerohour
protection:
• WebFilter categories for “Spyware/Malware Sources” to block URLs/hosts, and “Spyware Effects/ Privacy
Concerns” to block calling home efforts
• Proactive anti-malware threat detection engines in ProxyAV
• A real-time web content rating service in ProxySG with WebFilter
Additionally, the Blue Coat WebFilter URL database is continuously updated by the Blue Coat WebPulseTM
collaborative defense using more than 10 threat-detection engines across a honey grid of clients to uncloak attacks
and analyse nearly 1 billion requests per day for hidden malware. This allows ProxySG to block outbound XHRs
to malware hosts from injected scripts in popular websites, so users can still safely visit these popular websites.
WebPulse acts like a neighborhood watch program. Each user request updates the WebPulse ecosystem for the benefit
of all users by providing a constant flow of user requests for malware analysis, allowing new sites to be rated with
cross-categorisations and reputation ratings so gateway policy decisions can advise, filter, or block web content.
For devices inside a network, layered defenses of a Secure Web Gateway provide a key advantage. A layered defense
provides five important elements for protection:
• WebPulse honey grid updates to WebFilter of malware sources hidden in popular websites; thus malware hosts
can be blocked while access to popular websites with injection attacks can still be allowed
• Leading anti-malware threat detection engines with heuristic/behavioral analysis to detect zero-hour threats
• URL filtering with a real-time content rating service to limit web exposure and detect Phishing attacks
• Web content controls for true file type detection, active content and certificate validations, method-level controls,
content filtering, and active script filters; plus a robust policy language
• Optional Data Leakage Prevention/Information Leakage Prevention (DLP/ILP) integration with leading DLP/
ILP solutions to validate outbound data & information.
Secure Web Gateways not participating in honey grid ecosystems that continuously analyse user requests and, most
importantly, simulate clients to uncloak attacks, cannot keep pace with malware injected into popular sites. Static
URL lists, host reputations, and signature-based engines do not play in the Secure Web Gateway arena these days;
however, that is a common profile for web gateways deployed over the past few years.
Five Secure Web Gateway solutions are discussed below:

• Preventing Malware
• Dynamic URL Filtering
• Preventing Data Leakage
• Securing SSL Traffic
• -Monitoring and Logging
7.13 Preventing Malware: Layered “Defense in Depth”

Malware prevention cannot be achieved by one method alone; rather, it is best to deploy many layers of defense –
including the firewall and desktop-based solutions.
Blue Coat ProxySG provides a powerful toolkit for blocking mobile malicious code (MMC) and preventing malware
infection encountered on the Internet. With the addition of Blue Coat WebFilter (BCWF) on-box and dynamic
real-time rating (DRTR), rules can be selectively applied so that the “bad neighborhoods” of the Internet receive
additional protective measures. Finally, Blue Coat ProxyAV provides heuristic/behavioural analysis and signature
scanning, to augment your desktop-level AV product.
149
Four policies are briefly described:

• Block Access to Known Malware Sources
• Detect Hidden/Cloaked File Types
• Validate or Remove Active Content
• Block MMC and Malware with ProxyAV
Block Access to Known Malware Sources

Firstly, not accessing a malicious website guarantees avoiding infection by it. To that end Blue Coat WebFilter
(BCWF) provides the “Spyware/Malware Sources,” “Spyware Effects/Privacy Concerns,” and “Phishing” URL
categories. WebFilter is continuously updated by the WebPulse ecosystem that analyses close to 1 billion requests per
day for hidden malware injected into popular websites with the of goal blocking the malware host, not the popular
website. Blocking access to these categories of websites removes the risk of infection from known bad sites. The
dynamic real-time rating service of BCWF includes automatic detection of phishing kits, phishing look-alike web
pages, and untrustworthy, temporary DNS-registered hostnames, to protect against new and emerging threats. The
point with this method is to remove known malware/bad sites up front.
Detect Hidden/Cloaked File Types

The defense in depth strategy continues with detailed tests to prevent misrepresentation of true file types, or container
mismatch. Too often today, malicious executable content is misrepresented as safe file types such as “JPG” or “GIF”.
Blocking this makes use of policy tests comparing the claimed file type to the actual initial data in the files.
Validate or Remove Active Content

Mobile Malicious Code (MMC) is not an “executable” in the traditional “exe” file sense, rather it exploits
vulnerabilities in the browser (or other client application) software through malicious JavaScript, VBScript, Flash,
or ActiveX modules. Protection against these can take several forms from stripping all active-content from pages,
to selectively “de-fanging” malicious code methods, and/or signature/heuristic scanning.
The safest option that still allows access to web pages is sanitising the HTML to remove all active-content; however,
this has significant impact on today’s interactive web 2.0 sites. Due to the risk of over-blocking, this option should
be applied in conjunction with BCWF to only occur on the riskiest, least business-oriented sites. Any exceptions
can then be handled by white listing.
Block MMC and Malware with ProxyAV Proactive Detection Engines

Assuming all the above levels of defense are applied, a significant reduction in malware can be achieved with ProxySG
and WebFilter alone; however, no solution is complete without leveraging the billions of dollars spent each year by
the antivirus industry on heuristic/behavioral based detections. This is available via the Blue Coat ProxyAV with
leading anti-malware engines: Sophos, Kaspersky, McAfee, Trend Micro, Symantec, and Panda.
Blue Coat recommends that all objects be subjected to such scanning regardless of their website of origin, or file
type. The ProxySG + ProxyAV solution makes this workable via the “scan once, serve many” technology. Each
time a browser request is received, the ProxySG checks its object store for a cached copy, if one is found that was
analysed with the most recent AV-heuristics engine version, it can be delivered immediately. If the object in cache
was analysed before an update to the AV-heuristics engine, then the object is re-analysed before delivery to the user.
For non-cacheable objects, a finger print cache is kept to avoid analysing the same file on frequent requests. Once
an AV-heuristics engine update occurs, the finger print cache for non-cacheable objects restarts.
7.14 Dynamic URL Filtering with WebPulse and WebFilter

Recent research shows that on average, one in ten websites host some form of malware. New phishing and malware-
hosting sites emerge in great numbers every day. These malicious websites are becoming increasingly short-lived
to avoid being blacklisted. Without some form of near real-time website reputation, pre-classified URL lists simply
cannot keep up with this fast-changing threat landscape.
150
7.14.1 WebPulse Ecosystem URL Categorising
The Blue Coat WebFilter solution provides a real-time rating service of websites to cover the estimated 70% of
websites on the Internet (plus new ones each day) that are unrated. Each user request updates the ecosystem for all
Blue Coat customers as the WebPulse cloud service dynamically rates unrated websites and analyses all requests
for malware.
The WebPulse ecosystem is driven by over 100M user requests per day that make Blue Coat WebFilter relevant,
accurate, and dynamic for URL filtering. Real-time ratings cover 98% of objectionable content sites in multiple
languages, plus phishing kit detection, and the ability to search deep into translation services, image searches, and
cached search engine content, for an accurate rating not found with static URL filtering solutions. WebPulse is a
very large honey grid with a high volume of user requests combining client requests from the K9 family Internet
protection, enterprise ProxyClient remote users, enterprise ProxySG deployments, and a tremendous volume of
requests from ISP deployments of ProxySG with WebFilter. No other URL filtering system provides real-time ratings
and is driven by user requests for unmatched filtering protection of web 2.0 content.
Fig. 7.4 WebPulse ecosystem
7.14.2 Web Filter: Filtering & Blocking Unwanted Web Content

Accurate coverage is just as important as relevant coverage in selecting a URL filtering solution. To ensure the
greatest accuracy, each site in the WebFilter database is classified into multiple categories, as appropriate. This
allows WebFilter customers to define a virtually unlimited number of “cross-categories” via ProxySG, to fit their
specific filtering requirements (for example, Motor Sports, Sports Betting and so on).
The Blue Coat ProxySG supports up to three “on-proxy” content filtering lists at once. This allows customers to run
a commercial grade URL list like WebFilter, perhaps the IWF (Internet Watch Foundation) sealed child pornography
list, and a custom allow/deny URL list for their company.
Blue Coat WebFilter on ProxySG is automatically updated and configurable by administrators. Allow/deny lists
can be created on Blue Coat ProxySG, plus new categories, overrides, and exceptions. Administrators can define
flexible policies using header request elements not provided by content filtering solutions. With the rise of image
search engines, these header controls complement URL filtering to optionally ensure SafeSearch modes are always
151
enabled, no matter what the user selects. Blue Coat can also apply policy to embedded URLs commonly missed by
traditional filtering platforms, such as translation sites, archives, and image searches. Blue Coat can apply policy
based on the category the embedded content is in, since that is the actual “destination” URL.
The Blue Coat WebFilter database contains more than 15 million ratings, primarily of domains, directories, and
IP addresses, which in aggregate covers more than one billion web pages, published in more than 50 languages,
organised into more than 80 highly useful categories, and updated constantly by user requests into the WebPulse
ecosystem.
Unlike other vendors, Blue Coat does not rely on site-mining processes such as web crawlers to find new websites
and applications. Instead, Blue Coat leverages its large URL research ecosystem of WebFilter customers and off-
proxy OEM deployments to refer sites for categorisation. These customers feed nearly 1 billion requests each day
into the Blue Coat WebPulse automated rating architecture, which uses a combination of proprietary, patent-pending
classification software and human inspection, to categorise sites and review classifications. WebPulse also uses a
large honey grid of clients with more than 10 threat detection engines to detect malware hidden in popular websites
to continuously update WebFilter of malware hosts.
The relevance and accuracy of the WebFilter database is driven only by the actual web usage patterns of customers.
As a result, WebFilter has an average 92-95% coverage rate of requested sites in enterprise deployments, coupled
with an extremely low rate of false-positives.
Preventing Data Leakage with ProxySG

Blue Coat ProxySG supports multiple Data Leak Prevention/Information Leak Prevention (DLP/ILP) solutions
from leading vendors in the DLP/ILP niche. This allows customers their choice for an overall DLP/ILP solution
knowing the integration is certified, and DLP checks can be made in web traffic analysed by ProxySG. The Blue
Coat ProxySG supports standard ICAP (RFC 3507) and certified implementations are currently available for the
following vendors:
DLP/ILP solutions certified and supported:

• Blue Coat Data Loss Prevention
• Code Green Networks
• Vericept Network Monitor/Prevention
• Vontu Prevent
• Reconnex iGuard
• Port Authority/Websense
Inspecting SSL Traffic

The Blue Coat ProxySG provides HTTPS (or SSL/TLS) traffic inspection at multiple levels to reduce web threats
and data leakage. HTTPS sessions can be optimised based on destination, user, group, or other policy variables
such as personal medical website use, with complete privacy through the web gateway. HTTPS transactions with
financial sites can involve server certificate validation only, while leaving the communication private. Or HTTPS
sessions for business can be inspected for content leaving the organisation, and malware and threats entering the
organisation’s network. Also, HTTPS server certificate validation checks are useful to block proxy avoidance tools
or malware trying to call home.
Monitoring and Logging

Along with web security solutions, companies need to capture and analyse highly valuable audit log data produced
by their IT systems to measure the effectiveness of their web security policies, to help substantiate compliance, and
to respond quickly to security and forensics incidents.
152
Industry experts agree on the importance of log management as a cornerstone of any organisation’s risk management,
compliance, and privacy protection strategies. Log data can provide a complete real-time and historical record of
access, activity, and configuration changes for applications, servers, and network devices. It can also be used to
aid security and privacy policy validation. In addition, IT managers can use log data to receive early warning of
potential security and performance problems and can mine log data for root-cause analysis to aid in system recovery
and damage cleanup after security or performance incidents.
Blue Coat Reporter analyses comprehensive log files from Blue Coat ProxySG in over 150 pre-defined reports,
including malware, spyware, IM, P2P, and popular sites. Beyond URL filtering, Reporter provides visibility to web
content, performance, threats, and trending, over defined time periods. With comprehensive, policyenabled logging,
Blue Coat Reporter with ProxySG provides the advantage of capturing data regarding all user web activities. Reporter
quickly processes robust log data, providing easy-to-view reports for department managers, HR managers, security
specialists, and network administrators. Blue Coat provides the ultimate architecture for complete web visibility
and control.
153
Summary
• Web 2.0 is more about how use of the Internet is changing than about a new version of web technologies.
• Asynchronous JavaScript and XML (AJAX) is arguably the most popular member of a class of technologies
that enable rich Internet applications (RIAs) by performing functions and processing data through seamless
background integration.
• RIAs create the visual effect of an interactive web page, though in actuality the traditional Hypertext Transfer
Protocol (HTTP) GETs and POSTs are occurring behind the scenes.
• Mashups combine data from multiple sites into a single user experience.
• RSS (Real Simple Syndication) and Atom are two of the most popular formats. Outsourced applications and
services such as Salesforce.com and Outlook Web Access are common in the enterprise.
• RSS feeds are available for a wide variety of web sites; many can be useful to professionals.
• Social networking technology allows users to keep in touch and share data with colleagues in an increasingly
rich environment.
• The main purpose of botnets is to use hijacked computers for fraudulent online activity; they are managed by
a criminal, a group of criminals, or an organised crime syndicate and are often for rent.
• Forrester research also reveals a visible discrepancy between how prepared businesses perceive themselves to
be and how prepared they actually are to deal with these threats.
• When a website automatically posts comments to another site it is called a trackback.
• Because SSL content is encrypted, it can’t be intercepted by security systems without being decrypted and
reencrypted.
• Data leakage caused by removable media, spyware and malware, and the resulting regulatory compliance issues,
remains at the top of enterprise IT challenges.
• Malware prevention cannot be achieved by one method alone; rather, it is best to deploy many layers of defense
including the firewall and desktop-based solutions.
• The Blue Coat WebFilter solution provides a real-time rating service of websites to cover the estimated 70% of
websites on the Internet (plus new ones each day) that are unrated.
• Blue Coat offers a powerful, proxy-based architecture that accelerates good web traffic and stops malware from
entering your organisation.
• Blue Coat Reporter analyses comprehensive log files from Blue Coat ProxySG in over 150 pre-defined reports,
including malware, spyware, IM, P2P, and popular sites.
References
• Solomon, G., Schrum, L., 2007. Web 2.0: New Tools, New Schools, ISTE (Interntl Soc Tech Educ.
• Shuen, A., 2008. Web 2.0: A Strategy Guide, O’Reilly Media, Inc.
• Hunt, B., Web 2.0 Design – How to Design Best Web 2.0 Style, [Online] Available at: <http://www.
webdesignfromscratch.com/web-design/web-2-0-design-style-guide/> [Accessed 26 June 2012].
• About.com.JavaScript, Introduction to Ajax, [Online] Available at: <http://javascript.about.com/library/blajax01.
htm> [Accessed 26 June 2012].
• TheOnDemandDemoGuy, 2010. An Introduction to XML: XML and Web 2.0 Part 2, [Video Online] Available
at: <http://www.youtube.com/watch?v=16q5bbeO3xI> [Accessed 26 June 2012].
• LearnToProgramDotTV, 2011. XML Tutorial, [Video Online] Available at: <http://www.youtube.com/
watch?v=y6DmCUH-4MQ> [Accessed 26 June 2012].
154
Recommended Reading
• Governor, J., Nickull, D., Hinchcliffe, D., 2009. Web 2.0 Architectures, O’Reilly Media, Inc.
• Shelly, B. G., Frydenberg, M., 2010. Web 2.0: Concepts and Applications, Cengage Learning.
• Williamson, 2001. Xml: The Complete Reference, Tata McGraw-Hill Education.
155
Self Assessment
1. _______________thrives on network effects: databases that get richer the more people interact with them.
a. Web 3.0
b. Web 2.0
c. Web 1.5
d. Web 4.0
2. Which of the following is the most popular member of a class of technologies that enable rich Internet
applications?
a. XML
b. HTML
c. HTTP
d. POST
3. The goal of ____ is to give the user an experience equal to or better than that of a desktop application.
a. RIA
b. AJAX
c. XML
d. DOM
4. ___________ combine data from multiple sites into a single user experience.
a. Blog
b. Wikis
c. RSS
d. Mashups
5. _________ sites often use data from different sources, such as a retail store site using Google maps to display
locations.
a. Web 3.0
b. Web 2.0
c. Web 1.5
d. Web 4.0
6. _________ provides the “active ingredient” processing capability.

a. HTML
b. HTTP
c. JavaScript
d. XML
7. Which of the following is not one of the risks of XML syndication?

a. Readers may save data locally
b. Browser vulnerability
c. RSS aggregators are software
d. Content retrieval to the web
156
8. Which of the following is not one of the risks associated with mashups?
a. Reliance on a third party’s security posture
b. Browser vulnerability
c. Availability issues are transitive
d. Responsibility for attacks against the API
9. Which of the following is not one of the secure web gateway solution?
a. Preventing Malware
b. Dynamic URL Filtering
c. Securing SSL Traffic
d. Static URL Lists
10. _______________ offers a powerful, proxy-based architecture that accelerates good web traffic and stops
malware from entering your organisation.
a. Blue coat
b. Java script
c. HTTP
d. XML
157
Chapter VIII
Dreamweaver
Aim
• introduce Dreamweaver
• elucidate the display of Dreamweaver
• explain site management
Objectives
• recognise the concept of Dreamweaver
• determine the usage and function of Dreamweaver
• elucidate the steps of creating new pages on Dreamweaver
Learning outcome
• understand the steps of editing images
• identify the steps of linking to other resources
• understand HTML code view in Dreamweaver
158
8.1 Introduction
Dreamweaver helps you to create web pages while it codes html (and more) for you. It is located on the bottom tray
or in the start menu, under Macromedia.
Before you begin

• Webspace: Your webpage must be on your webspace to be accessible from the internet. When mapping the
network drive, use PC: \\www\username or Mac: www. The maximum storage space is 30 megabytes.
• Organisation: Store all components of the website in one folder. It is recommended that you create a
separate “images” folder within the main one to keep track of your images. The main folder must be on your
webspace.
• Planning: It helps if you know how you want your webpage to look before using Dreamweaver. Think about
colours, uniformity among pages and organisation of links and topics.
8.2 Getting Started

This section describes the workspace in Dreamweaver MX.
Click on the Start button, then select Programs | Web Tools | Macromedia MX | Dreamweaver MX.
If you wish try out the online tutorial – From the Help menu select Tutorials| Dreamweaver Basics | Exploring the
Workspace0.
The Dreamweaver workspace is made up of the document window and various panels and toolbars. You will use
three main panels/toolbars when you are creating your web pages called the Insert Bar, the Property Inspector and
the Site Panel.
Note: if the Insert Bar and Property Inspector are not visible when you open Dreamweaver they can be opened by
selecting them from the Window Menu.
The Document window displays the current document as you create and edit it. When the Document window is
maximised, tabs appear at the bottom of the Document window area showing the file names of all open documents.
Clicking these tabs makes it easy to switch between documents.
The Insert Bar contains different icons for inserting various types of objects such as images, layers and tables. It
consists of a series of overlapping tabbed pages (like worksheets in Excel). If you place your mouse over an icon a
description of that icon appears. For the majority of time you will use the icons in the ‘Common’ tab.
The Property Inspector shows the properties for a selected object that you have added to your page, such as the
width and height properties of images:
Note the small arrow in the bottom right hand corner, which allows you to expand this box to see extra options or
properties of an object.
159
The Site panel allows you to manage the files and folders that make up your site, and provides a view of all the files
contained in your site.
Dreamweaver can display a document in three ways: in Design view, in Code view, and in a split view that shows
both the design and code. (To change the view in which you are working, click on a view in the Dreamweaver
toolbar). By default, Dreamweaver displays the Document Window in Design view.
Design view: In this view, Dreamweaver displays a fully editable, visual representation of the document, similar
to what you would see viewing the page in a browser.
Code view: It is a hand-coding environment for writing and editing HTML, JavaScript, and server-language code
such as Microsoft Active Server Pages (ASP) or Cold Fusion Markup Language and any other kind of code. It is
not necessary to work in code view to create pages, most of the functionality you will need for your pages can be
generated in Design View.
Code and design view: It allows you to see both Code view and Design view for the same document in a single
window.
8.3 Site Management

A Web site is a set of linked documents, which are about related topics or have a shared purpose. Dreamweaver
is a site creation and management tool as well as a document creation and editing tool. Documents are the pages
users see when they visit your Web site. They can contain text and images, as well as sound, animation, and links
to other documents.
To help you manage your site, Dreamweaver displays the files in the site as a list of files. Sites can be seen from the
Site panel. If you cannot see the site panel, go to the Window menu and select Site.
By default on the Networked PC Service (NPCS) a site has already been set up called ‘my durham site’. If you wish
to change the name of this site in the Site panel select Site | Edit Sites, click Edit and change the name.
By default you have access to a public_html folder on your J: drive, this is where you will store the files and
folders associated with your web site. Notice that ‘my durham site’ automatically points to the files located in J:\
public_html.
160
When you begin to build the design for your web site it is advisable to do this using the Site panel window. Here
you can create files and folders to begin to add structure to your site. All the files that you will create will have a
.htm extension, this is the file format that is required in order for them to be visible on the web. It is advisable that
you create separate folders for different elements of your page for example, images (to include all the pictures used
in your site) and resources (to include for example, word documents). Below is an example of how your site may
be constructed.
Your site is live from the moment you create a .htm file in your public_html folder, and it can be accessed by anyone
from anywhere in the world. The URL of the site will be:http://www.dur.ac.uk/f.a.bloggs with f.a.bloggs being
substituted by your own mailname.
You should also note that your web site is listed in the online phone book.When you create an index.htm page in
your public_ html folder on your J:\drive, by default your page will be visible when you type the web address (as
above) in a browser using your mailname. If you do not create an index.htm page visitors will be able to view a list
of the directories in your public_html folder, therefore it is advisable to create an index.htm page.
8.3.1 Restricting Access to Your Pages

You will notice that when you look in your public_html directory on your J:\drive you automatically have two sub-
directories called local and password. Do not delete these as you may wish to use them if you would like to restrict
access to your pages.
161
Local Directory
If you only want members of the University to access a particular document or web page Example,. notes.pdf, save
the file in the subdirectory local located in your public_html directory. The URL for these pages will then be as
follows:
http://www.dur.ac.uk/f.a.bloggs/local/notes.pdf
Because this file is in the local subdirectory, the WWW page will be accessible if a browser is running on a
computer which is attached to the University’s network. If the browser is running on a computer that is outside the
University, a login box will appear, and unless the user can provide and ITS username and password, they will be
denied access.
Password Directory
If you want to force users to Authenticate as an ITS user (the browser will ask them for their ITS username and
password) then place web pages in your password subdirectory. This provides additional security. Only put files in
the password directory if you really need a person to authenticate: if you just want to restrict access to a member
of the University put files into the local subdirectory instead.
8.4 Creating a New Folder

Dreamweaver offers a visual representation of your Web site through its Site panel. Sites are much easier to manage
if you organise your files in folders. You will now create two folders in your public_html directory — one for images
(pictures) and one for resources and create several files which you will later link together.
The Site window enables you to quickly review the structure of a site, to add folders and files and to add, move or
modify links.
Steps to create new folders

• Ensure the Site panel is visible on the right hand side of the work area
• Click on the site folder at the top of the Site panel window
• (Site – my durham site (J:\public_html)) if it is not already highlighted
• In the Site panel window click File | New Folder from the drop down menu.
• Type pictures
• Press the Enter key on the keyboard.
• Repeat steps 1 to 4 to create a second folder named resources.
Steps to create new pages:

• Click on the site folder at the top of the Site panel window (Site – my durham site (J:\public_html))
• Click File | New File from the drop down menu.
• Type index.htm
• Repeat steps 1-3 and create another page called interests.htm
• Double click the icon next to the file index.htm to open it.
Note that index.htm has appeared as a tab in the bottom left hand corner of the Document window.
Steps for copying resources:

• From the Start menu open Mozilla.
• Go to the following page:
• http://www.dur.ac.uk/its/info/guides/files/www/
162
• Right click on the words Lecture 1
• In the menu that appears select the Save Link Target As option, select the resources folder in your public_html
folder on your J:\drive, and click Save.
• Right click on the words outside.jpg and inside.jpg and save the images to your pictures folder too.
8.5 Creating a New Page

In this section, you will start to create your WWW page in your site by entering text, adding bullet points and
horizontal lines, and choosing colours.
8.5.1 Entering Text

When you enter text on your page, any formatting you do to the text is done in the Property Inspector. In order for
you to format the text you first need to select it using the mouse.
Adding Text
• In the Document window in you index.htm page type
<Your Name>’s Homepage then press Enter
• Highlight this line of text with the mouse. Select Heading 1 from the Format drop down menu in the Property
Inspector
• Put the cursor on the next line, enter some general information about yourself, and the press Enter
• Underneath this type the name ‘Experience’ and press Enter
• Highlight this line of text with the mouse. Select Heading 2 from the Format drop down menu in the Property
Inspect
• Click File | Save
• In the Site panel double click on the icon next to interests.htm to open it. Add a title “Interests” to the top of
this page and format the text by following the instructions above.
• Click File| Save.
Adding objects
For the majority of the time when working with the Insert bar you will be adding objects under the Common
category (this is the default tab that will be visible when you open Dreamweaver). If you click on another tab, you
will notice other sets of icons. You may wish to use these when you develop your pages further and need to work
with something more specific, for example frames. However for the majority of time you will be working under
the Common category.
Whenever you add an object to your page from the Insert bar, information about that object will appear in the
Property Inspector, where the properties/attributes of that object can be changed.
You are going to add various objects and modify them in the Property Inspector.
You can create bulleted (unordered) and numbered (ordered) lists from new text or existing text.
163
Adding lists
• On your index.htm page underneath the text you have already added click the Bullets (Unordered list) button
in the Property Inspector.
• List your skills or experience, pressing Enter after each line:
• Press Enter 3 times.
• Numbered lists (Ordered lists) can be added in the same way using the numbered list button (next to the Bullets
button).
Adding a horizontal rule

• Click between your bulleted and numbered list in your index.htm page and click the Insert Horizontal Rule
icon on the Insert bar (Common tab).
• In the Property Inspector click on the drop down menu next to pixels and select %. This adjusts the width of
the line as a percentage of the page size.
• Enter 75 by the W (Width box).
• Click in the Document window to view your changes.
8.5.2 Page Title

When you first start Dreamweaver, your default Web page is untitled. To add a title, enter some text in the ‘title’
field in the document toolbar at the top of the screen
Adding a title:
• Give your index.htm page a Title example, Joe Bloggs Homepage
• Click File | Save to save your page
• Open your interests.htm page by clicking on the tab in the bottom of the Document window
• Modify the title of this page and save the changes.
Specifying a title for your page is important as this is what appears in the title bar in the browser window. It will
also be used by search engines to locate your pages.
8.5.3 Saving and Testing Your Page

You have created a file called index.htm, when viewing your pages in a browser this file opens by default using
your mail name if no other file is specified. You can view your file on the Internet using Mozilla. When testing your
page, it is important to reload the page in the browser to view your most recent changes.
Testing your page

• From the Start menu open Mozilla.
• Type the URL of your page in the Location bar
http://www.dur.ac.uk/mailname
8.5.4 Inserting Images

You are going to add your photo to your index.htm page (if you are attending an ITS training session, you will have
your photo taken. Otherwise, use any image you have available).
When you add images to your pages ensure that you add a description of the image in the Alt field in the Property
inspector. This is the text that will be read by people who have text-only browsers or who have graphics turned off.
This is important given the new Accessibility Legislation brought out in September 2002 - certain elements of your
pages may need modifications to make them more usable and accessible (for more details see Appendix 1).
164
Steps for adding images
First you will copy the photograph to the pictures folder you created earlier on your J:\ drive.
• Go to the page:
http://www.dur.ac.uk/dreamweaver.train/photos/
• You can either save the size of photo as you see it on this page or if you click on the image you will see a larger
sized photo.
• Either way right-click on your photo and select Save Image As.
• Select the pictures folder in the public_html folder on your J:\ drive, enter the filename photo.jpg, and click
Save.
• Return to Dreamweaver.
• Place the cursor where you want the image to appear on the index.htm page then click the Insert Image icon
in the Insert bar.
• In the dialogue box that opens select photo.jpg (from your pictures folder) and click Select.
• In the Image Tag Accessibility Attribute window type in the Alternate Text Box
• a photo of me
• Click OK
• Save your page.
8.6 Editing Images

You will notice that if you click on your image in Dreamweaver handles appear around the edges of it, which enable
you to resize it. This only affects the appearance of the image on screen; it does not alter the file size of the image.
Therefore it is not advisable to resize your images in this way; you need to alter the actual image file using a graphics
package. It should be noted that Dreamweaver is a good Web authoring tool, but it is not a graphics editor.
When you insert an image into Dreamweaver you can click the Edit button in the Property inspector and a graphics
package will be launched automatically. This is Macromedia Fireworks. Use it to edit your image. When you save
it the changes are automatically updated in Dreamweaver. The main editing that you will do within Fireworks will
be resizing an image; you do not need detailed knowledge of the package. By clicking Modify image size you can
alter the pixel size of the image and whichever value you change the other value changes relative to this to maintain
the dimensions of the image.
You must be aware also that you can easily copy images (and text) from other web pages, but you need to make
sure that you are not infringing someone else’s copyright. If you wish to use images from other sites you will need
to contact them and gain their permission before doing so. A useful site for images that is available for your use
is: http://www.freefoto.com. This has a large database of pictures for you to include copyright free into your web
pages, as long as you make a reference to them.
Steps for resizing an image:

• Go to the website www.freefoto.com
• In the search field type
Durham cathedral
• Choose an image and click on it to view the full image
• Follow steps 2-8 in the ADDING AN IMAGE activity above to add this image to your interests.htm page in
Dreamweaver
• With the image selected in Dreaweaver, click the Edit button in the Property inspector this launches the graphics
package Fireworks
• When asked to find the source click No
165
• Select Modify |Canvas| Image size

• Click the dropdown menus next to the width and height dimension and change pixels to percent
• Change the width percentage value to half the existing size, notice how the height value automatically
changes
• Click Done
• This will take you back into Dreamweaver
• Click the Reset size button in the Property inspector to view your changes in Dreamweaver.
• Save your page.
8.7 Adding Links within the Page, to other Pages and to Files
In this section, you will create links within your web page and to other web pages. You will also link to a Word
document.
You can create links within Dreaweaver using one of the following 2 methods, either linking to an existing web
page or linking to a document e.g. Word document:
• Select the text, image or object you want to establish as a link
• Do one of the following:
• Type the URL directly into the Link text box (include http://)
• Select the Browse for file icon to the right of the Link text box to open the Select File dialogue box, where you
can browse for the file (these files must be saved in your public_html folder, if they are contained elsewhere
you will be prompted to copy them to your public_html folder when you create the link)
Steps for linking to a web page:

• On your index.htm page highlight the text at the top that states your department Example., Geography
Department
• In the Link field in the Property inspector type the URL of your department Example,http://www.geography.
dur.ac.uk
If you do not know the URL, then in Mozilla click Home, then Academic departments. Click on your department
and the URL will be displayed for you to copy.
• In Dreamweaver, click anywhere in the Document window, the words Geography Department should be
underlined and blue.
• If you wish to change the colour of the link to something other than blue, click Modify | Page properties, select
a new colour next to Links and click OK.
• Save and test your page.
Steps for linking to a file:

• Under Third Year, type Lecture 1
• Select the words Lecture 1 and click the Browse for File icon in the Property Inspector
• If necessary, change to the J:\ drive and select the resources folder in the public_html folder and change Files
of type to All Files, then select the file lecture1.doc and click Select.
8.7.1 Linking within the Page

If you have a long web page which may involve a large amount of scrolling you can use the Property inspector to
link to a particular section of the page (Example, the top or the bottom) by creating Named Anchors.
166
Creating a link to a named anchor is a two-step process. First, create a named anchor and then create a link to the
named anchor.
Steps for inserting an anchor:

• On your index.htm page click to the left of your name at the top of the page.
• From the Menu bar, select Insert | Named Anchor or click on the Insert Named Anchor icon in the Insert bar.
• The Insert Named Anchor dialog box will appear. Type:
as the Anchor Name and click OK.
Note a yellow anchor has appeared in your page, this will not be visible in the Browser.
• At the bottom of your page underneath all your text, type the words:
top of page
• Select the words top of page that you have just typed.
• In the Link field of the Property Inspector, type
#top
8.8 Tables
Tables are used for the display of tabular data.
You can control almost all of a table’s features through the Property inspector. To insert a table select the icon from
the Insert Bar. An Insert table dialogue box will open where you can specify various parameters:
167
Steps for adding a table:

• On your index.htm page click return underneath your name and department at the top.
• Click the Table icon in the Insert bar
• In the Insert Table dialogue box, enter 4 Row and 2 Columns and change the Width to 80 percent and the Border
to 1, then click OK.
• An Accessibility Options for Tables window will open, in the Caption field type Education
• In the Header box select Column, click OK
The table will be selected automatically and information about the table will appear in the Property inspector.
• Click the drop down menu next to the Align field and select Center
Adding text to the table:

• In the table cells, enter information about your education history.
Notice the text will automatically wrap to the next line when it reaches the edge of the cell.
• Save your changes
Sorting tables
Tables can be sorted by one or two columns provided they do not contain merged cells. To sort a table select
Commands then Sort Table. You can sort your table by column either alphabetically or numerically.
8.9 Linking to Other Resources

You can create links to resources such as lecture notes (which could be a Word document, an Adobe pdf (portable
document format) file or a PostScript file), a PowerPoint presentation, and reading lists. Note: you can view pdf
files using a plug-in to a web browser, but to create them you need Adobe Acrobat. An advantage of using pdf files
is that you do not need access to the original program (e.g. Microsoft Office) to view them. The Acrobat Reader is
already available on the Networked PC service and the UNIX service at Durham and can be obtained for free from
the Adobe section of the UK Mirror service.
168
For this section, you are going to link to a library catalogue and to video and audio files.
Steps for linking to the library catalogue

• On the interests.htm web page add a heading of Reading list and edit this text as you wish in the Property
Inspector.
• Underneath the heading type the following text:
• Laurillard, D. Rethinking university teaching: a framework for the effective use of educational technology
• In Mozilla go to the University Library page
http://www.dur.ac.uk/library
• In the Search list select Author and type Laurillard
• Click the Search button. Select the first edition – 1993.
• The OPAC reference for this book should appear.
• Select and copy the URL using Edit|Copy (Ctrl/C) which begins:
http://library.dur.ac.uk/search/a?SEARCH=laurillard
• On the interests.htm page in Dreamweaver, select the text Laurillard, D. Rethinking university teaching: a
framework for the effective use of educational technology. Click in the Link field in the Property inspector and
paste the URL using Ctrl/V.
• Add further books to your reading list if you wish.
• Save your page and test your link.
If you get strange results when you test your link, it might be because Dreamweaver has subtly changed the address
of the link. Any links which involve a plus character (+) will not work without some editing. Switch to Code view
and re-paste the OPAC URL into the document.
8.10 HTML Editing in Code View

Hypertext Markup Language (HTML) is the native language of the WWW. As you create and work with documents,
Dreamweaver automatically generates the underlying HTML. The HTML Source inspector is used to create or edit
the HTML source code.
To view the HTML in your page click the Show Code View icon in the top left corner of your page.
The Code view displays the source code for the current document. You will see the text that you have typed in as
well as some HTML tags, which are colour coded and appear in angle brackets Example,. <title>.
The document starts with the <html> tag and if you scroll to the end you will see that it finishes with the </html>
tag.
Also near the top is the <head> tag which encloses information about the document. The page title appears within
the <title> and </title> tags.
The contents of the document appear between the <body> tag near the top of the page and the </body> tag near
the end of the document.
8.10.1 Adding Text

Text can be added in Code view. Paragraphs are defined by the <p> and </p> tags. Tags are case insensitive so it
does not matter if you type <P> or <p>. HTML treats multiple spaces as one and ignores any line breaks you might
add by pressing the return key.
169
Steps for adding text in a code view:

• In your index.htm page click the Show Code View icon
• Click Return after Line 10 (approx) which ends with </h2>
• Type
<p>This is my first web page</p>
Note: Dreamweaver will automatically create the closing tag (</p>) for you.
• Click in the Document window to see the text displayed.
Any HTML that you type in Code view is not rewritten by Dreamweaver. If you type invalid HTML then Dreamweaver
highlights the tags as invalid markup items when you return to Design View.
8.10.2 Creating Lists

You can add extra items to bulleted (unordered) and numbered (ordered) lists from new text or existing text in the
HTML Inspector window. The tags <ul> and </ul> are used to start and end a bulleted (unordered) list and the tags
<ol> and </ol> are used to start and end a numbered (ordered) list. The tags <li> and <li> are used to start and end
items on the list.
Steps for creating lists

• Click at the end of the line <li>research</li> (approx Line 26) and press Enter.
• Type
<li>other</li>
and press Enter.
Note again: Dreamweaver will automatically create the closing tag (</li>) for you.
• Click in the Document window and you should see “other” has been added to the list.
8.10.3 Linking to Sites

Links are created using the <A> anchor tag. You are going to create a link to the University of Durham home
page.
Steps for creating an HTML link

• Find the link you created to you department (approx Line 10)
E.g:
<a href=”http://www.dur.ac.uk/Geography/”>Geography Department</a
Click at the end of the line and press Enter.
• Type
<p><a href=”http://www.dur.ac.uk/”>University of Durham</a>
• Click on the Show Design view icon to see your changes in the Document window
• Save the file and test the link.
8.10.4 Adding Comments

Comments may be used in HTML to explain the HTML code or provide other information. The comments will not
appear in Design View.
170
Steps for adding comments
• Return to Dreamweaver, and click in front of Lecture 1 in Design view.
• Select Insert | Text Objects | Comment from the Menu bar.
• Type
Lecture notes last updated October 2000 and click OK.
• Click on the Show Code View icon.
You will see the following HTML code in the HTML window.

• To edit the comment, select the Comments icon in the Document window and edit the text in the Property
Inspector.
Comments can only be seen outside Dreamweaver if you look at the source code of the page in your browser.
If you look at a page in Dreamweaver in Design View, comments are shown with a little marker. Click on this to
see the text displayed in the Properties Inspector.
8.10.5 Roundtrip HTML Overview

Roundtrip HTML allows you move your documents between Dreamweaver and a text-based HTML editor, such as
Notepad, with little or no impact on the content and structure of the document’s HTML source code.
The main features of roundtrip HTML are:

• By default, Dreamweaver rewrites overlapping tags, closes open tags that aren’t allowed to remain open, and
removes extra closing tags when you open an existing HTML document.
• Dreamweaver highlights invalid tags for HTML that it does not support in the document window. If the invalid
tag is selected, the error and how to correct it are shown in the Property inspector.
• Dreamweaver does not change tags that it does not recognise, for example XML tags, because it has no criteria
by which to judge them valid or invalid.
8.10.6 Cleaning up HTML

The Clean Up HTML command (in the Commands menu) can be used on existing HTML documents to remove
empty tags and change invalid HTML code.
8.10.7 Clean up Word HTML

The Clean Up Word HTML command (in the Commands menu) can be used to remove the extraneous HTML code
created when Word documents are saved as HTML files. The code that Dreamweaver removes is primarily used by
Word to format and display documents as they appeared in Word, and is not needed to display the HTML file. It is
important to keep a copy of your original Word (.doc) file as you may not be able to reopen the HTML document
in Word.
• Putting mathematical formulae on the WWW

See http://www.dur.ac.uk/its/services/web/publishing/software/maths/ for information on this subject.
• Spelling
You can now check the spelling of your document.
• From the Menu bar, click Text|Check Spelling.
You can change or ignore any incorrect spellings.
• From the Menu bar, click File and then Save.
171
Using help in Dreamweaver

The Dreamweaver help pages contain Contents, an Index and a Search facility. The Contents is organised by topic
and includes a guided tour and a tutorial.
• Select Help, then Using Dreamweaver or press the F1 key.

• Select Help | Tutorials. You may want to look at this later.
• Closing Dreamweaver
• From the Menu bar choose File then Save.
• Then choose File then Exit.
172
Summary
• Dreamweaver helps you to create web pages while it codes html (and more) for you.
• The Dreamweaver workspace is made up of the document window and various panels and toolbars.
• The Document window displays the current document as you create and edit it.
• The Insert Bar contains different icons for inserting various types of objects such as images, layers and
tables.
• The Property Inspector shows the properties for a selected object that you have added to your page.
• The Site panel allows you to manage the files and folders that make up your site, and provides a view of all the
files contained in your site.
• Dreamweaver is a site creation and management tool as well as a document creation and editing tool.
• Dreamweaver offers a visual representation of your Web site through its Site panel.
• The Site window enables you to quickly review the structure of a site, to add folders and files and to add, move
or modify links.
• Creating a link to a named anchor is a two-step process. First, create a named anchor and then create a link to
the named anchor.
• Tables are used for the display of tabular data.
• Tables can be sorted by one or two columns provided they do not contain merged cells.
• Hypertext Markup Language (HTML) is the native language of the WWW.
• Links are created using the <A> anchor tag.
• Comments may be used in HTML to explain the HTML code or provide other information.
• The Clean Up HTML command (in the Commands menu) can be used on existing HTML documents to remove
empty tags and change invalid HTML code.
• The Dreamweaver help pages contain Contents, an Index and a Search facility.
• The Contents is organised by topic and includes a guided tour and a tutorial.
• The code that Dreamweaver removes is primarily used by Word to format and display documents as they
appeared in Word, and is not needed to display the HTML file.
References
• Khristine Annwn Page, 2006. Macromedia Dreamweaver 8: Training from the Source, Prentice Hall
Professional.
• Gerantabee, F., 2007. Dynamic Learning: Dreamweaver CS3: With Video Tutorials and Lesson Files, O’Reilly
Media, Inc.
• ITS, Introduction to Dreamweaver, [Online] Available at: < http://www.dur.ac.uk/resources/its/info/
guides/171dreamweaver.pdf> [Accessed 26 June 2012].
• MOUNTHOLYOKE, Introduction to Dreamweaver 8, [Online] Available at: <http://www.mtholyoke.edu/lits/
assets/lits/Dreamweaver_8.0.pdf> [Accessed 26 June 2012].
• 2createawebsite, 19th Aug 2009. Dreamweaver CS4 Tutorial for Beginners, [Video Online] Available at: <http://
www.youtube.com/watch?v=suMK2pcyqoc> [Accessed 26 June 2012].
• thenewboston, 10th Feb 2008. Dreamweaver Tutorial - 1 - Overview of Layout, [Video Online] Available at:
<http://www.youtube.com/watch?v=d9KDMgGM5jk> [Accessed 26 June 2012].
Recommended Reading
• Adobe Systems, 2007. Adobe Dreamweaver CS3: Classroom in a Book, Peachpit Press.
• Warner, J., 2011. Dreamweaver 8 For Dummies, John Wiley & Sons.
• Cole, D., 2000. Dreamweaver, iUniverse.
173
Self Assessment
1. Which of the following helps you to create web pages while it codes html?
a. Webspace
b. Planning
c. Dreamweaver
d. Tutorials

a. The Dreamweaver workspace is made up of the document window and various panels and toolbars.
b. The Document window displays the current document as you create and edit it.
c. Webspace helps if you know how you want your webpage to look before using Dreamweaver.
d. When the Document window is maximised, tabs appear at the bottom of the Document window area showing
the file names of all open documents.
3. The ___________ contains different icons for inserting various types of objects such as images, layers and
tables.
a. Insert Bar
b. Property Inspector
c. Document Window
d. Site Panel
4. The ____________ allows you to manage the files and folders that make up your site, and provides a view of
all the files contained in your site.
a. Insert Bar
b. Property Inspector
c. Document Window
d. Site Panel
5. Which of the following is not one of the ways in which Dreamweaver can display a document?
a. Design view
b. Code view
c. Slide view
d. Word view
6. Which of the following is not one of the key functions of Dreamweaver?

a. Site creation
b. Spyware and virus detection
c. Management tool
d. Document creation and editing tool
7. When you add images to your pages ensure that you add a description of the image in the ___________ in the
Property inspector.
a. Alt field
b. Ctrl field
c. Esc field
d. Insert field
174
8. Dreamweaver is a good Web authoring tool, but it is not a __________.
a. document editing tool
b. document creation tool
c. graphics editor
d. web creator tool
9. Creating a link to a named anchor is a _______-step process.

a. five
b. three
c. four
d. two
10. ___________ are used for the display of tabular data.

a. Tables
b. Document
c. Anchors
d. Links
175
Case Study I
IBM Deploys Web 2.0 Collaborative Solutions for a Greener World
Introduction
This case study demonstrates how IBM has used Web 2.0 solutions such as Lotus and WebSphere Portal to save
more than US$100 million in call and travel costs annually, reduce carbon emissions by over 60,000 metric tons per
year, and improve collaboration. Background about the company, the industry, and the products/solutions offered
IBM is the world’s leading information technology company, offering a range of integrated solutions, products and
services unmatched by any other IT company. Yet, IBM’s global footprint has resulted in several challenges:
With 370,000 employees worldwide, operating in 64 countries, IBM employees need to be able to collaborate with
one another - and with partners and customers - on a geographically dispersed basis.
Employees require “anytime, anywhere” access to expert advice, resources and continuous training to make better
and faster decisions.
The large number of employees raises demand for applications, servers, network capacity and storage requirements;
all of which could push up power, cooling and space costs.
What Web 2.0 solutions are being used by IBM?

As a respected global brand, IBM constantly strives to demonstrate environmental leadership in all of its business
activities. IBM decided to enhance collaboration through Web 2.0 technologies and run them on the latest platforms
that offered:
• Better collaboration and improved decision making for its employees.
• The ability to realise cost savings and carbon emissions through green IT solutions.
The IBM Web 2.0 collaboration solutions deployed were:

• IBM Lotus Sametime to provide employees worldwide with the ability to instantly collaborate through instant
messaging, presence awareness and web conferencing capabilities.
• IBM Lotus Notes and Domino as the preferred email solutions, selected for their ability to support even more
users per server, improved data compression and compatibility with existing hardware.
• IBM WebSphere Portal, which serves as a unified platform for employee discussion forums, wikis, blogs and
learning resources.
• IBM Lotus Mashups to provide an environment for assembling personal, enterprise and Web content into
simple, flexible, and dynamic applications.
• IBM Lotus Connections opens new channels for productive relationships through social computing. It helps
employees enlarge their collaborative, knowledge-sharing networks, enables the business to tap the collective
intelligence of employees, and facilitates faster, better business execution.
• IBM Lotus Quickr 8.1 allows teams to share content, collaborate and work faster online - inside or outside
the IBM firewall.
How have Web 2.0 solutions directly helped the company become greener?
The benefits of IBM utilising its own collaborative solutions have been impressive:
• Today, IBM saves up to US$16 million per year in phone costs, thanks to the use of instant messaging.
• A further US$97 million has been slashed from travel budgets, while IBM’s carbon footprint in the US has
reduced by more than 61,600 metric tons of CO2 emissions in 2006.
• Almost a third of IBM’s global workforce use Web conferencing and Voice over IP to work from home, further
reducing carbon emissions from constant commuting.
176
• IBM’s Europe operations have also slashed energy-per-employee consumed by 50% thanks to more efficient
office designs; Austria, Switzerland and Germany, in particular, have saved US$2.8 million in annual energy
costs.
• Lotus and WebSphere Portal solutions are also designed to require fewer servers, resulting in lower power
consumption and a smaller physical space. Furthermore, leading data compression technologies at the heart of
these solutions further reduce disk storage, network traffic, and backup costs.
Apart from a lower carbon footprint, IBM has also created a highly cost-efficient environment for innovation,
often resulting in decreased “time to market”. Furthermore, these collaborative solutions have strengthened IBM’s
reputation for being family friendly – thanks to more flexible work arrangements.
Convenient solutions to an inconvenient truth

Moving forward, IBM expects the focus on environmental issues to become even more intense. By utilising real
solutions that can make a real and quantifiable difference to the climate challenge, IBM demonstrates that an
“inconvenient truth” can be made much more palatable through convenient and innovative solutions.
http://www-01.ibm.com/software/in/info/web20/green/example_case_study/
Questions
1. What is the main challenge faced by IBM?
Ans
With 370,000 employees worldwide, operating in 64 countries, IBM employees need to be able to collaborate
with one another - and with partners and customers - on a geographically dispersed basis.
2. What is the function of IBM Lotus Connections?

Ans
It opens new channels for productive relationships through social computing. It helps employees enlarge their
collaborative, knowledge-sharing networks, enables the business to tap the collective intelligence of employees,
and facilitates faster, better business execution.
3. How Web 2.0 solution has helped IBM?

Ans
The benefits of IBM utilising its own collaborative solutions are as follows:
• Today, IBM saves up to US$16 million per year in phone costs, thanks to the use of instant messaging.
• A further US$97 million has been slashed from travel budgets, while IBM’s carbon footprint in the US has
reduced by more than 61,600 metric tons of CO2 emissions in 2006.
• Almost a third of IBM’s global workforce use Web conferencing and Voice over IP to work from home,
further reducing carbon emissions from constant commuting.
• IBM’s Europe operations have also slashed energy-per-employee consumed by 50% thanks to more efficient
office designs; Austria, Switzerland and Germany, in particular, have saved US$2.8 million in annual energy
costs.
• Lotus and WebSphere Portal solutions are also designed to require fewer servers, resulting in lower power
consumption and a smaller physical space. Furthermore, leading data compression technologies at the heart
of these solutions further reduce disk storage, network traffic, and backup costs.
177
Case Study II
Tire Source
Challenge
Tire Source is a full service tire and automotive repair facility with five area locations in Northeast Ohio. With
some stiff local competition, they wanted to get a competitive edge by using their website to drive potential local
customers to pick up the phone and call them, email them with questions or schedule an online appointment, and
ultimately bring in their vehicle for service at one of their five brick-and-mortar locations. So, they came to TKG
for a website redesign and SEO campaign.
Our marketing analysis found that their homepage was being slowed by unnecessary flash images, which can be
a turn-off to impatient users, not to mention the search engines. We recommended using optimised images (which
have smaller file sizes and faster load times) as well as targeted, unique copy and plenty of special offers to entice
users. We then recommended some strategies to help improve their conversion rate by including online coupons,
free giveaways, and optimisation of key pages.
We also uncovered the following issues that needed SEO attention:

• Un-optimised page titles, tags, and copy
• Low link popularity
• Lack of rankings in the top 3 search engines
• Lack of unique site copy
On the development side, we gave them a slick new design with “calls to action” such as the ability to schedule an
appointment or see promotions directly on the homepage. Phone numbers to each of their locations are featured
prominently on the homepage, too. The old site navigation was de-cluttered and other usability issues fixed by
adding a Robots.txt file and Custom 404 page to make for a more pleasant user experience.
Results
Once some programming changes were made, Tire Source’s search engine saturation (the number of website pages
indexed by the search engines) went from one page to 248! We followed that up with a link building campaign to
help build their online presence. Tire Source started with 0 incoming links and is currently at over 250 and growing.
Then we went about the task of optimising their meta data and copy to make it more attractive to both users and the
search engines. In less than a year’s time, Tire Source is already seeing some big results. Take a look:
Total Site Traffic +87%

Unique Visitors +87%
Search Engine Traffic +111%
Conversions +19%
178
Tire Source has some top rankings in Google for local phrases, despite being just a few months into their
campaign:
Rankings Before Page in Google

Keyword Rankings After SEO
SEO After SEO
Canton Full Service
Not in Top 50 1 1
Auto Care
Medina Automotive
14 1 1
Care
Akron Tire Store Not in Top 50 9 1
Akron Auto Services Not in Top 50
and Repair
http://www.tkg.com/tire-and-automotive-service-stores
Questions
1. What is the challenge faced by Tire Source?
2. What are the issues that needed SEO urgent attention?
3. What was the result?
179
Case Study III

Canon myBIS
Introduction
Canon is the world leader in office automation and digital imaging technologies. Their BIS division wanted a portal
that supports its partners and which would facilitate them to do business effectively and efficiently.
Challenge
The main challenge for BIS, a web design agency was to develop a portal that can facilitate sharing and making
the communications more effective and seamless. Further, the portal should be accessible to authorised people
only. The portal should have such features where partners can customise the creative’s online leading to increased
productivity and cost savings.
Solution
• An Interactive Portal Design and Development
• An online portal was designed and developed with the following features:
• Seamless portal design with rich, informative and user-friendly interface.
• The portal has a complete backend (Content Management systems) which manages the whole application and
enables in updating the content.
• Portal has vivid user friendly tools to customise the creative’s.
• Secured access to portal.
• Useful tabs like Logo Library, Media Centre, and Events Archive were also integrated in the portal.
• This portal has an activity log, which tracks the access details.
Success
myBIS has been developed into an enhanced portal that scores full marks on the desired functionalities and some
extremely useful tabs to heighten its usability, such as Cross-browser compatibility with IE6, 7, 8; FF 2, 3; Opera,
Safari and Chrome.
http://www.interactivebees.com/Case-Study-Canon-myBIS.html
Questions
1. What was the challenge faced by canon?
2. What was the solution?
3. What was the result of the solution given?
180
Bibliography
References
• 2createawebsite, 2009. Dreamweaver CS4 Tutorial for Beginners, [Video Online] Available at: <http://www.
youtube.com/watch?v=suMK2pcyqoc> [Accessed 26 June 2012].
• About.com.JavaScript, Introduction to Ajax, [Online] Available at: <http://javascript.about.com/library/blajax01.
htm> [Accessed 26 June 2012].
• Basic Internet Setup, [Online] Available at: < http://images.apple.com/support/panther/en/tutorials/pdf/internet.
pdf>, [Accessed 22 June 2012].
• Bharat, O. and Broder, A., 1998. A technique for measuring the relative size and overlap of public web search
engines. John Wiley and Sons.
• Broder, A., Glassman, S., Manasse, M. and G. Zweig., 1997. Syntactic clustering of the web. Cengage
Learning.
• daniellestevensonus, 2010. JSP (Java Server pages) video tutorial, [Video Online] Available at: <http://www.
youtube.com/watch?v=NLMkaSlZQ28> [Accessed 22 June 2012].
• derekbanas, 2010. Learn XML Tutorial Part 1, Available at: < http://www.youtube.com/watch?v=qgZVAznwX38>
• Dr. Bose, R., Lecture 2 - Types of Wireless communication, Department of Electrical Engineering, IIT Delhi.,
[Video Online] Available at: <http://www.youtube.com/watch?v=QHDxbbc1GWs> [Accessed 22 June
2012].
• EdzJohnson, 2009. Web Designing [Video Online] Available at: <http://www.youtube.com/
• Gerantabee, F., 2007. Dynamic Learning: Dreamweaver CS3: With Video Tutorials and Lesson Files, O’Reilly
Media, Inc.
• Getting Started with Internet Services, [Online] Available at: < http://download.support.xerox.com/pub/docs/
DC340ST/userdocs/any-os/en/DC_220_230_332_340_GS_with_Internet_Serv.pdf > [Accessed 20 June
2012].
• Gibson, D., 2010. Guide to Multimedia, Enterprise Administration, Cengage Learning.
• Hamilton, J., On Designing and Deploying Internet-Scale Services, [Online] Available at: <http://www.mvdirona.
com/jrh/talksAndPapers/JamesRH_Lisa.pdf> [Accessed 20 June 2012].
• Haney, D. J., Server-Side Scripting In JavaScript/JScript And VBScript, [Online] Available at: < http://proc.
isecon.org/2000/100/ISECON.2000.Haney.pdf> [Accessed 22 June 2012].
• Henderson, T. and Dvorak, R., 2008. Multimedia: Faster, more manageable and secure, but still missing the
virtual link [Online] Available at: <http://www.networkworld.com/reviews/2008/022108-windows-2008-server-
test.html> [Accessed 22 June 2012].
• Hunt, B., Web 2.0 Design – How to Design Best Web 2.0 Style, [Online] Available at: <http://www.
webdesignfromscratch.com/web-design/web-2-0-design-style-guide/> [Accessed 26 June 2012].
• Internet Connections, [Online] Available at: <http://www.edb.utexas.edu/minliu/multimedia/PDFfolder/
InternetConnections.pdf> [Accessed 22 June 2012].
• Introduction to HTML, [Online] Available at: <www.nios.ac.in/webdesign/html.pdf> [Accessed 22 June
2012].
• ITS, Introduction to Dreamweaver, [Online] Available at: < http://www.dur.ac.uk/resources/its/info/
guides/171dreamweaver.pdf> [Accessed 26 June 2012].
• Jennifer, K., 1997. Web Design / HTML [Online] Available at : <http://webdesign.about.com/> [Accessed 22
June 2012].
• jimmyrcom, 2nd Feb 2008. Learn HTML and CSS Tutorial. How to make website from scratch, [Video Online]
Available at: <http://www.youtube.com/watch?v=GwQMnpUsj8I> [Accessed 22 June 2012].
181
• Johansson, M. J., 2008. Using SCW on Multimedia [Online] Available at: <http://technet.microsoft.com/en-us/
magazine/2008.03.securitywatch.aspx> [Accessed 22 June 2012].
• JSP Tutorial, 2006 [Online] Available at: < http://jsptut.com/> [Accessed 22 June 2012].
• Khristine Annwn Page. Macromedia Dreamweaver 8: Training from the Source, Prentice Hall Professional.
• LearnToProgramDotTV, 2011. XML Tutorial, [Video Online] Available at: <http://www.youtube.com/
watch?v=y6DmCUH-4MQ> [Accessed 26 June 2012].
• MOUNTHOLYOKE, Introduction to Dreamweaver 8, [Online] Available at: <http://www.mtholyoke.edu/lits/
assets/lits/Dreamweaver_8.0.pdf> [Accessed 26 June 2012].
• Musciano, C., Kennedy, B., 2006. Html & Xhtml: The Definitive Guide, 6th ed. O’Reilly Media, Inc.
• Prof. Sengupta, I., Lecture -1 Introduction To Internet, Department of Computer Science & Engineering ,IIT
Kharagpur, [Video Online] Available at: <http://www.youtube.com/watch?v=YOXwcbwSEUo>, [Accessed
22 June 2012].
• Prof. Sengupta, I., Lecture -9 Client Server Concepts DNS,Telnet,Ftp, Department of Computer Science &
Engineering ,IIT Kharagpur, [Video Online] Available at: <http://www.youtube.com/watch?v=eA9mnY1Z2so>
• Schafer, M. S., 2011. HTML, XHTML, and CSS Bible, 5th ed. John Wiley & Sons.
• Shuen, A., 2008. Web 2.0: A Strategy Guide, O’Reilly Media, Inc.
• Smirnov, I. M., 2001. Quality of Future Internet Services: Second COST 263 International Workshop, QofIS
2001, Coimbra, Portugal, September 24-26, 2001: Proceedings, Springer.
• Solomon, G., Schrum, L., 2007. Web 2.0: New Tools, New Schools, ISTE (Interntl Soc Tech Educ.)
• Soper, E. M., 2004. Absolute Beginner’s Guide to A+ Certification, Que Publishing.
• Stev, M. J., 2008. Web Designing [Online] Available at: <http://technet.microsoft.com/en-us/magazine/2008.03.
securitywatch.aspx> [Accessed 22 June 2012].
• superboysales, 2010. Java Server Pages (JSP), [Video Online] Available at: <http://www.youtube.com/watch
?v=bMjx8zuJNfY&feature=related> [Accessed 22 June 2012].
• technoblogical, 2011. What is FTP, [Video Online] Available at: <http://www.youtube.com/watch?v=hiQrYptlZ08>
• Thamos, J., 2011. Web in Multimedia [Video Online] Available at: <http://www.youtube.com/
watch?v=bq1fXrxn9jM> [Accessed 22 June 2012].
• thenewboston, 2008. Dreamweaver Tutorial - 1 - Overview of Layout, [Video Online] Available at: <http://www.
youtube.com/watch?v=d9KDMgGM5jk> [Accessed 26 June 2012].
• TheOnDemandDemoGuy, 2010. An Introduction to XML: XML and Web 2.0 Part 2, [Video Online] Available
at: <http://www.youtube.com/watch?v=16q5bbeO3xI> [Accessed 26 June 2012].
• Thomas, O., 2011. Multimedia Secrets, John Wiley and Sons.
• Totok, A., 2009. Modern Internet Services, Alexander Totok.
• W3SCHOOLS.Com, Introduction to HTML, [Online] Available at: < http://www.w3schools.com/html/html_
intro.asp> [Accessed 22 June 2012].
• Webster, J., 2011. Multimedia [Video Online] Available at: <http://www.youtube.com/watch?v=bq1fXrxn9jM>
• Willard, 2009. Html: A Beginner’S Guide, Tata McGraw-Hill Education.
• Wilton, P., 2004. Beginning Java Script (2Nd Ed.), John Wiley & Sons.
• Young, L. M., 2002. Internet: The Complete Reference, 2nd ed. McGraw-Hill Prof Med/Tech.
182
Recommended Reading
• Adobe Systems, 2007. Adobe Dreamweaver CS3: Classroom in a Book, Peachpit Press.
• Basham, B., Sierra, K., Bates, B., 2008. Head First Servlets and JSP: Passing the Sun Certified Web Component
Developer Exam, 2nd ed. O’Reilly Media, Inc.
• Biafore, B., 2011. QuickBooks 2012: The Missing Manual, O’Reilly Media, Inc.
• Bollinger, G., Natarajan, B., 2011. JSP: A Beginner’s Guide, Osborne/McGraw-Hill.
• Cole, D., 2000. Dreamweaver, iUniverse.
• Freeman, E., Freeman, E., 2005. Head First Html with CSS & XHTML, O’Reilly Media, Inc.
• Governor, J., Nickull, D., Hinchcliffe, D., 2009. Web 2.0 Architectures, O’Reilly Media, Inc.
• Hanna, P., 2003. JSP 2.0: The Complete Reference, Tata McGraw-Hill Education.
• Jacob, S., 2008. An image search engine for the world wide web, Dreamtech Press.
• Levine, R. J., Young, L. M., 2011. The Internet for Dummies, 13th ed. John Wiley & Sons.
• Piltzecker, A., 2008. The Best Damn Multimedia Book Period, Syngress.
• Piter, A., 2008. An image and video search engine for the world-wide web, Syngress.
• Posey, B., 2008. A content-based image browser for the world wide web, Syngress.
• Posey, B., 2008. The real MCTS/MCITP Exam 70-649: upgrading your MCSE on Windows server 2003 to
Windows server 2008 prep kit, Syngress.
• Powell, A. T., 2001. HTML: The complete reference, 3rd ed. Osborne/McGraw-Hill.
• Prasad, R. A., Buford, F. J., Gurbani, V. K., 2011. Future Internet Services and Service Architectures, River
Publishers.
• Sample, T. J., 2008. Geospatial Services and Applications for the Internet, Springer.
• Scott Mueller, 2011. Upgrading and Repairing PCs, 20th ed. Que Publishing.
• Seguis, S., 2008. Microsoft Windows Server 2008 Administration in Simple Steps, Dreamtech Press.
• Shelly, B. G., Frydenberg, M., 2010. Web 2.0: Concepts and Applications, Cengage Learning.
• Shelly, B. G., Woods, M. D., 2008. HTML: Complete Concepts and Techniques, 5th ed. Cengage Learning.
• Surhone, M. L., Tennoe, T. M., Henssonow, F. S., 2010. Internet Services, VDM Publishing.
• Warner, J., 2011. Dreamweaver 8 for Dummies, John Wiley & Sons.
• Williamson, 2001. Xml: The Complete Reference, Tata McGraw-Hill Education.
183
Self Assessment Answers

Chapter I
1. c
2. d
3. d
4. b
5. a
6. d
7. d
8. a
9. b
10. a
Chapter II
1. c
2. d
3. d
4. a
5. b
6. b
7. a
8. b
9. c
10. d
Chapter III
1. a
2. b
3. a
4. c
5. c
6. c
7. b
8. a
9. b
10. c
Chapter IV
1. d
2. b
3. c
4. a
5. d
6. d
7. a
8. d
9. a
10. b
184
Chapter V
1. d
2. b
3. a
4. d
5. c
6. a
7. c
8. b
9. c
10. c
Chapter VI
1. d
2. b
3. d
4. a
5. b
6. b
7. c
8. a
9. c
10. a
Chapter VII
1. b
2. a
3. a
4. d
5. b
6. c
7. d
8. b
9. d
10. b
Chapter VIII
1. c
2. c
3. a
4. d
5. d
6. b
7. a
8. a
9. d
10. a
185

Web Design and Internet Based Applications PDF

Uploaded by

Copyright:

Available Formats

You might also like

Web Design and Internet Based Applications PDF

Uploaded by

Document Information

Original Title

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

Web Design and Internet Based Applications PDF

Uploaded by

Copyright:

Available Formats

Web Design and Internet based Applications

Prof. H. N. Verma Prof. M. K. Ghadoliya

Dr. Ramchandra G. Pawar Ashwini Pandit

Gaurav Modi Shubhada Pawar

First Edition 2013

II. List of Figures......................................................... VII

III. List of Tables........................................................VIII

V. Case Study.............................................................. 176

VI. Bibliography.......................................................... 181

VII. Self Assessment Answers................................... 184

Chapter VI................................................................................................................................................. 105

Chapter VIII.............................................................................................................................................. 158

• elucidate the emergence of internet

• explain the growth of internet

• recognise internet domain names

• determine internet domains and address name system

• elucidate client server system

• differentiate between official and unofficial internet domain names

• identify the newer technologies used

• understand dialup networking

Examples of some Internet resources are:

The following are few tips:

1.5 Client Server System

1.5.1 Servers Should be Powerful and Reliable

1.5.2 Intricacies Involved

1.6 Internet Domains and Addresses Name System

Fig. 1.2 A hierarchical illustration of the example

1.7 TCP/IP Internet Domain Names

1.7.1 Official and Unofficial Internet Domain Names

Domain Name Meaning

Table 1.1 Examples of domain

com edu gov mil net org arpa int country

Fig. 1.3 The DNS top level hierarchy

1.7.2 Mapping Domain Names to Addresses

1.7.3 Domain Name Resolution

Fig. 1.4 Domain name resolution

1.7.4 Name Caching

1.7.5 Time to Live

Keeping a copy of the local server’s database has several advantages:

1.7.6 Abbreviation of Domain Names

1.8 Dialup Networking

Fig. 1.5 Accessing internet through dialup

1.8.1 Access Criteria

1.9 The Internet Service Provider (ISP)

1.10 Newer Technologies

Asymmetric digital subscriber line (ASDL)

• Basic Internet Setup, [Online] Available at: < http://images.apple.com/support/panther/en/tutorials/pdf/internet.

3. Which of the following is an advantage of internet?

5. Which of the following is a basis of internet?

6. The most important feature of a server is ____________.

7. Which of the following statements is false?

9. The ________ is a network service that translates domain names to IP addresses.

10. Which of the following sentence is false?

• explain concept of web designing

• enlist technology used in web designing

• discuss web designing basic

• explain element of good design

• describe lines and line work in web designing