Web Technology

Board of Studies

Prof. H. N. Verma Prof. M. K. GhadoliyaVice- Chancellor Director, Jaipur National University, Jaipur School of Distance Education and Learning Jaipur National University, JaipurDr. Rajendra Takale Prof. and Head AcademicsSBPIM, Pune

___________________________________________________________________________________________

Subject Expert Panel

Dr. Ramchandra G. Pawar Vaibhav BedarkarDirector, SIBACA, Lonavala Subject Matter ExpertPune

___________________________________________________________________________________________

Content Review Panel

Gaurav Modi Shubhada PawarSubject Matter Expert Subject Matter Expert

___________________________________________________________________________________________Copyright ©

This book contains the course content for Web Technology.

First Edition 2014

Printed byUniversal Training Solutions Private Limited

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

___________________________________________________________________________________________

I

Index

ContentI. ...................................................................... II

List of FiguresII. ........................................................ VII

List of TablesIII. ........................................................VIII

AbbreviationsIV. .........................................................IX

Case StudyV. .............................................................. 176

BibliographyVI. ......................................................... 181

Self Assessment AnswersVII. ................................... 184

Book at a Glance

II

Contents

Chapter I ....................................................................................................................................................... 1Internet and Internet Connectivity ............................................................................................................ 1Aim ................................................................................................................................................................ 1Objectives ...................................................................................................................................................... 1Learning outcome .......................................................................................................................................... 11.1 Introduction .............................................................................................................................................. 21.2 Internet ..................................................................................................................................................... 21.3 Growth of the Internet .............................................................................................................................. 31.4 Safeguards ................................................................................................................................................ 51.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 ..................................................................................................................................... 71.6 Internet Domains and Addresses Name System ...................................................................................... 71.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 ............................................................................................ 121.8 Dialup Networking ................................................................................................................................. 12 1.8.1 Access Criteria ....................................................................................................................... 131.9 The Internet Service Provider (ISP) ....................................................................................................... 131.10 Newer Technologies ............................................................................................................................. 14Summary ..................................................................................................................................................... 15References ................................................................................................................................................... 15Recommended Reading ............................................................................................................................. 16Self Assessment ........................................................................................................................................... 17

Chapter II ................................................................................................................................................... 19Introduction to Web Design ...................................................................................................................... 19Aim .............................................................................................................................................................. 19Objectives .................................................................................................................................................... 19Learning outcome ........................................................................................................................................ 192.1 What is Web Designing? ........................................................................................................................ 202.2 Web Design Basics ................................................................................................................................. 202.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 .............................................................................................................. 28Summary ..................................................................................................................................................... 31References ................................................................................................................................................... 31Recommended Reading ............................................................................................................................. 32Self Assessment .......................................................................................................................................... 33

Chapter III .................................................................................................................................................. 35Basics of Web Designing ........................................................................................................................... 35Aim .............................................................................................................................................................. 35Objectives .................................................................................................................................................... 35Learning outcome ........................................................................................................................................ 353.1 Introduction ........................................................................................................................................... 36

III

3.2 Methodology .......................................................................................................................................... 363.3 Getting Started with Web Designing .................................................................................................... 373.4 Step 1: HTML ........................................................................................................................................ 373.5 Step 2: WYSIWYG Editors ................................................................................................................... 383.6 Recommendations for Software and Tool for Designing Web .............................................................. 403.7 Step 3: Hosting ....................................................................................................................................... 40 3.7.1 Free Host Servers ................................................................................................................... 40 3.7.2 Paid Host Servers ................................................................................................................... 413.8 Step 4: Publish (upload) ......................................................................................................................... 41Summary .................................................................................................................................................... 43References ................................................................................................................................................... 43Recommended Reading ............................................................................................................................. 43Self Assessment .......................................................................................................................................... 44

Chapter IV .................................................................................................................................................. 46Internet Services ......................................................................................................................................... 46Aim .............................................................................................................................................................. 46Objectives .................................................................................................................................................... 46Learning outcome ........................................................................................................................................ 464.1 Introduction: The Internet ...................................................................................................................... 474.2 World Wide Web (WWW) ..................................................................................................................... 474.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 ............................................................................................................................... 544.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 ................................................................................................................ 574.5 Mailing Lists .......................................................................................................................................... 574.6 Chat Rooms ............................................................................................................................................ 574.7 E-Mail .................................................................................................................................................... 58 4.7.1 E-Mail Operation: .................................................................................................................. 594.8 Internet Fax ............................................................................................................................................ 604.9 File Transfer Protocol (FTP) .................................................................................................................. 61 4.9.1 FTP Commands ..................................................................................................................... 61 4.9.2 FTP File Types ....................................................................................................................... 61 4.9.3 FTP Login .............................................................................................................................. 614.10 TELNET 63Summary ..................................................................................................................................................... 65References ................................................................................................................................................... 65Recommended Reading ............................................................................................................................. 66Self Assessment ........................................................................................................................................... 67

Chapter V .................................................................................................................................................... 69HTML.......................................................................................................................................................... 69Aim .............................................................................................................................................................. 69Objectives .................................................................................................................................................... 69Learning outcome ........................................................................................................................................ 69

IV

5.1 Introduction ............................................................................................................................................ 705.2 HTML ................................................................................................................................................... 705.3 Formatting .............................................................................................................................................. 71 5.3.1 Text Formatting ...................................................................................................................... 71 5.3.2 Citations, Quotations, and Definition Tags ............................................................................ 72 5.3.3 Character Entities ................................................................................................................... 735.4 Hyperlinks .............................................................................................................................................. 735.5 URLs ...................................................................................................................................................... 735.6 Background Graphics ............................................................................................................................. 74 5.6.1 Background Colour ................................................................................................................ 745.7 External Images, Sounds, and Animations ............................................................................................ 745.8 Frames .................................................................................................................................................... 755.9 Tables ..................................................................................................................................................... 77 5.9.1 Tables for Non tabular Information ....................................................................................... 805.10 Lists ...................................................................................................................................................... 815.11 Forms ................................................................................................................................................... 845.12 Image maps .......................................................................................................................................... 88 5.12.1 The Usemap Attribute in An IMG Element ......................................................................... 885.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 ................................................................................................................................ 915.14 Cascading Style Sheets (CSS) ............................................................................................................. 92 5.14.1 Adding CSS to HTML Documents ...................................................................................... 92Summary ................................................................................................................................................... 102References ................................................................................................................................................. 102Recommended Reading ........................................................................................................................... 102Self Assessment ......................................................................................................................................... 103

Chapter VI ................................................................................................................................................ 105Client and Serverside Scripting .............................................................................................................. 105Aim ............................................................................................................................................................ 105Objectives .................................................................................................................................................. 105Learning outcome ...................................................................................................................................... 1056.1 Introduction .......................................................................................................................................... 1066.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 .....................................................................................................................1116.3 JavaScript ..............................................................................................................................................111 6.3.1 Elements of JavaScript ..........................................................................................................112 6.3.2 JavaScript Objects: ...............................................................................................................115 6.3.3 Document Object Model (Dom) ...........................................................................................1156.4 Web Technologies ................................................................................................................................ 132Summary ................................................................................................................................................... 134References ................................................................................................................................................. 134Recommended Reading ........................................................................................................................... 135Self Assessment ......................................................................................................................................... 136

V

Chapter VII .............................................................................................................................................. 138Web 2.0 ...................................................................................................................................................... 138Aim ............................................................................................................................................................ 138Objectives .................................................................................................................................................. 138Learning outcome ...................................................................................................................................... 1387.1 Introduction: Web 2.0 .......................................................................................................................... 1397.2 The Internet as a Platform .................................................................................................................... 1397.3 Social Networks and User Participation .............................................................................................. 1407.4 Significance of Web 2.0 ....................................................................................................................... 1407.5 Web 2.0 in the Workplace: Enterprise 2.0 ............................................................................................ 1417.6 Hackers have Changed ......................................................................................................................... 1427.7 Organisations are not Prepared for Web 2.0 Threats ........................................................................... 1447.8 How Security Challenges Change with Web 2.0? ............................................................................... 1447.9 Compromised Websites ........................................................................................................................ 1457.10 Malware Access ................................................................................................................................. 146 7.10.1 New Client-Side Technologies ......................................................................................... 146 7.10.2 XML Syndication : Feeds for Wikis and Blogs ................................................................. 1467.11 About Trackbacks ............................................................................................................................... 147 7.11.1 Mashups ............................................................................................................................. 147 7.11.2 Data Leak Vulnerabilities ................................................................................................... 1487.12 Blue Coat Web 2.0 Layered Security Solutions ................................................................................. 1487.13 Preventing Malware: Layered “Defense in Depth” ........................................................................... 1497.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 ................................................ 151Summary ................................................................................................................................................... 154References ................................................................................................................................................. 154Recommended Reading ........................................................................................................................... 155Self Assessment ......................................................................................................................................... 156

Chapter VIII ............................................................................................................................................. 158Dreamweaver ............................................................................................................................................ 158Aim ............................................................................................................................................................ 158Objectives .................................................................................................................................................. 158Learning outcome ...................................................................................................................................... 1588.1 Introduction .......................................................................................................................................... 1598.2 Getting Started ..................................................................................................................................... 1598.3 Site Management ................................................................................................................................. 160 8.3.1 Restricting Access to Your Pages ......................................................................................... 1618.4 Creating a New Folder ......................................................................................................................... 1628.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 ................................................................................................................... 1648.6 Editing Images ..................................................................................................................................... 1658.7 Adding Links within the Page, to other Pages and to Files ................................................................. 166 8.7.1 Linking within the Page ....................................................................................................... 1668.8 Tables ................................................................................................................................................... 1678.9 Linking to Other Resources ................................................................................................................. 1688.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

VI

8.10.5 Roundtrip HTML Overview .............................................................................................. 171 8.10.6 Cleaning up HTML ............................................................................................................ 171 8.10.7 Clean up Word HTML ....................................................................................................... 171Summary ................................................................................................................................................... 173References ................................................................................................................................................. 173Recommended Reading ........................................................................................................................... 173Self Assessment ......................................................................................................................................... 174

VII

List of Figures

Fig. 1.1 Growth of internet ............................................................................................................................ 3Fig. 1.2 A hierarchical illustration of the example ......................................................................................... 8Fig. 1.3 The DNS top level hierarchy ............................................................................................................ 9Fig. 1.4 Domain name resolution ..................................................................................................................11Fig. 1.5 Accessing internet through dialup .................................................................................................. 12Fig. 2.1 Web design ...................................................................................................................................... 21Fig. 2.2 Elements of good design ................................................................................................................. 21Fig. 2.3 Element design .............................................................................................................................. 22Fig. 2.4 Principles of design ........................................................................................................................ 25Fig. 2.5 Working with customers ................................................................................................................. 29Fig. 2.6 Design techniques ........................................................................................................................... 30Fig. 3.1 Elements of web design ................................................................................................................. 36Fig. 3.2 WYSIWYG Editors ........................................................................................................................ 39Fig. 3.3 Publish ............................................................................................................................................ 42Fig. 4.1 World Wide Web ............................................................................................................................. 47Fig. 4.2 A browsing service using client server interaction ......................................................................... 49Fig. 4.3 Email operation ............................................................................................................................... 60Fig. 4.4 FTP operation ................................................................................................................................. 62Fig. 4.5 Telnet session .................................................................................................................................. 63Fig. 5.1 Browser output for the simple program .......................................................................................... 70Fig. 5.2 Computer output tags...................................................................................................................... 72Fig. 5.3 Browser output for different computer tags.................................................................................... 72Fig. 5.4 Vertical frame set ............................................................................................................................ 76Fig. 5.5 Horizontal frame set ....................................................................................................................... 76Fig. 5.6 Mixed frame set .............................................................................................................................. 77Fig. 5.7 Inline frames ................................................................................................................................... 77Fig. 5.8 Browser output of table with caption ............................................................................................. 78Fig. 5.9 Output for the program ................................................................................................................... 81Fig. 6.1 A web server that supports JSP files. ............................................................................................ 106Fig. 6.2 JSP parsing by web server ............................................................................................................ 107Fig. 7.1 An enterprise without boundries ................................................................................................... 141Fig. 7.2 SSL Provides a Private Link for Legitimate Applications, and Malware,

Confidential Data, Unsanctioned Traffic ...................................................................................... 147Fig. 7.3 ProxyAV plus ProxySG = Layered Malware Defense ................................................................. 148Fig. 7.4 WebPulse ecosystem .................................................................................................................... 151

VIII

List of Tables

Table 1.1 Examples of domain ....................................................................................................................... 9Table 4.1 Browser functions ........................................................................................................................ 51Table 4.2 Internet Explorer Key Sequence .................................................................................................. 52Table 5.1 Common file types and their extensions ...................................................................................... 75Table 5.2 Table elements description ........................................................................................................... 79Table 5.3 Table attribute description ............................................................................................................ 79Table 6.1 Different attributes ..................................................................................................................... 109Table 6.2 Implicit objects ............................................................................................................................111Table 6.3 Most used event handlers ............................................................................................................118Table 6.4 Typical output from the browser ................................................................................................ 128

IX

Abbreviations

DARPA - Department of Defence Advanced Research Projects AgencyISOC - Internet SocietyNOS - Network Operating SystemDNS - Domain Name ServiceIP - Internet ProtocolTTL - Time to LiveISP - Internet Service ProviderFDM - Frequency Domain MultiplexingASDL - Asymmetric Digital Subscriber LineWWW - World Wide WebHTTP - Hyper Text Transfer ProtocolHTML - HyperText Markup LanguageW3C - World Wide Web ConsortiumURL - Uniform Resource LocatorIRC - Internet Relay ChatFTP - File Transfer ProtocolGUI - Graphic User InterfaceCSS - Cascading Style SheetsIIS - Internet Information ServerJSP - Java Server PagesDOM - Document Object ModelRSS - Real Simple SyndicationCSS - Cascading Style SheetsAIR - Adobe Integrated RuntimeFBI - Federal Bureau of InvestigationGTISC - Georgia Tech Information Security CentreC&C - Command & ControlMMC - Malicious Mobile CodeHMRC - Her Majesty’s Revenue and CustomsSWG - Secure Web GatewayDRTR - Dynamic Real-Time RatingBCWF - Blue Coat Web FilterASP - Active Server PagesNPCS - Networked PC Service

1

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:

differentiatebetweenofficialandunofficialinternetdomainnames•

identify the newer technologies used•

understand dialup networkin• g

Web Technology

2

1.1 IntroductionThe 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 InternetThe 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 aresult,theInternetisoverflowingwithusefulresourcesandwithpeopleclimbingaboard.

AccordingtotheInternetSociety(ISOC),aprofessionalorganisationofInternetdevelopers,influencers,andusers,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’sdefinitelya rising trend incommercialactivity.Manybusinesseshave realised that theycan link theirenterprise 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•

3

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.

Standardsplayabigpartineverydaylife.Camerafilmalwaysfitsinyourcamera,andloosepaperboughtatthestationaryshopfitsinyourfolder.Librariescatalogbooksaccordingtoauniversalstandardsystem,sothatonceyoulearnit;youcanwalkintoanylibraryintheworldandfindthebooksyouneed.

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.

Web Technology

4

Thismethodofnetworkingisveryflexibleandrobust.Itallowsdiversecomputersandsystemstocommunicateby 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.Itisveryfascinatinghowseparatecomputersandnetworksfittogetherwillgivethenetculturethesharing, cooperative spirit that is inherent in the Internet.

Openstandardsenablebusinessesandindividualstocompeteonalevelplayingfieldindevelopingnetworkingsoftware 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 arehandledinthesameway,notonyoursocialorfinancialstatus!

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 youhavetofulfilsomeformalities).OnceyournetworkisdirectlyhookedintotheInternet,allthecomputersonthat 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. AlreadytherearepeopleofferingrentalspaceontheirInternet-connectedcomputersanddisks.Youcanlease“officespace”from“officeparks”incyberspaceandsetupshop.Yourvirtualstorefrontmaybethousandsofmilesandtwo countries away, but it’s probably a few seconds hyper drive from every location. Such a convenience is a given on the Internet.

TheInternethashadapositiveeffectonthedemocratisationofsociety,makingitmoredifficulttobottleupandsuppress 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 businessInformation 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; Imagineearlier-eventopayelectricitybillitwastotaloneday’sjobsometimes!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.

5

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.•Toencourageeducationalandsocialbeneficialuses.•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 SafeguardsAs 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 yoursystem!)Youshouldn’tbeafraidofcookies—theyareusefulformanywaysbutconsideracceptingcookiesfrom only known, trusted Web sites.Protect yourself from potential loss of data and create backup copies of your data regularly: If your computer •crashesorifthereisafireorfloodinyourhome,youdon’twanttoloseimportantpersonalinformation.Copyinformation 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 SystemThe 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.

Web Technology

6

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 powerfulmainframecomputerwaslefttodonothingbutsupplydata(andsometimesprogram)filestothePCs.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 ReliableTypically, the server is a special PC more powerful than the rest in the network. The most important feature of a serverisstorage.BecauseitsfilespaceissharedbymanyperhapshundredsofPCs,itrequireshugeamountsofmass 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 InvolvedEnabling 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.Shouldapplicationprogramprovideservicesonlytospecificclientsorall?•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.

7

1.5.3 Active Close and Active OpenA 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 portaddressofthespecificserverprogramrunningonthemachine.Thus,thechannelbecomesactiveopen.Afterbecoming active open client requests and subsequently receives the needed response from the server. The request-responsemayberepeatedseveraltimesbutstillitiscalledafiniteprocessandeventuallycomestoanend.Atthatinstant the client closes the communication channel becomes active close.

Aserverprogramontheotherhandisaninfiniteprogram.Whenitstarts,itrunsinfinitelyunlessaproblemarises.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 SocketsWhen two processes communicate with each other, they need a socket at both ends. A socket is nothing but a special typeofstructure.Atypicalexamplehasfivefields:

Family:ThisfielddefinestheprotocolgroupIP4,IP6,UNIXprotocolsandsoon.•Type:Thisfielddefinesthetypeofsocket.Therearethreetypesofsockets.Oneisstreamsocketotherispocket•socket and a raw socket.Protocol:ThisfieldissettozeroforTCPandUDP.•LocalSocketAddress:ItdefinesacombinationofIPaddressandportaddress.•Remote Socket Address: This is combination of remote IP address and port address of remote application.•

1.6 Internet Domains and Addresses Name SystemThe 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.

Web Technology

8

The DNS is needed by applications to convert humans’ meaningful names into computer meaningful names (IP addresses)andprovidethefinaluseraneasierwaytocommunicateviatheInternet.Humansprefernameswhilecomputer 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

Acomputernameisalsocalleda‘DomainName’.Domainnamesarehierarchical,withthemostsignificantpartof 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

staff.ormania.ac.in

root

ac

ormania

staff

Fig. 1.2 A hierarchical illustration of the example

1.7 TCP/IP Internet Domain NamesThe mechanism that implements a machine name hierarchy for TCP/IP Internet is called the Domain Name System (DNS). DNS has two independent aspects:

Itspecifiesthenamesyntaxandrulesfordelegatingauthorityovernames•Itspecifiestheimplementationofadistributedcomputingsystemthatefficientlymapsnamestoaddresses.•

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.

Thedomainnamemail.yahoo.comcontainsthreelabels:mail,yahoo,andcom.Anysuffixofalabelinadomainname is also called a domain. In the above example the lowest level domain is yahoo.com, the second level domain ismail.yahoo.comandthetopleveldomainiscom.Writingdomainnameswiththelocallabelfirstandthetopdomain last makes it possible to compress messages that contain multiple domain names.

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

9

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 netmil 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 withthecountry’sinternational2-letteridentifierasitslabel.

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 isassignedatypethespecifieswhetheritistheaddressofamachine,amailbox,auser,andsoon.

When a client asks the domain system to resolve a name, it must specify the type of answer desired. For example, whenanelectronicmailapplicationusesthedomainsystemtoresolveaname,itspecifiesthattheanswershouldbe the address of a mail exchanger.

Web Technology

10

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 AddressesThedomainnameschemeincludesanefficient,reliable,generalpurpose,distributedsystemformappingnamesto addresses. The system is distributed in the sense, meaning that a set of servers operating at multiple sites co-operativelysolvethemappingproblem.Itisefficientinthesensethatmostnamescanbemappedlocally;onlyafewrequireInternettraffic.Itisgeneralpurposebecauseitisnotrestrictedtomachinenames.

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.

Theconceptualtreecontinueswithoneserverateachlevelforwhichasubdomainhasbeendefined.Theserversmay be located at arbitrary locations on an Internet. The server uses the Internet for communication.

1.7.3 Domain Name ResolutionDomain 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 oftheclassname,thetypeofanswerdesired,andacodethatspecifieswhetherthenameservershouldtranslatethename 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 typeofinteractiontheclientspecified.Iftheclientrequestedcompletetranslation,theservercontactsadomainname 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 specifiesthenameservertheclientshouldcontactnexttoresolvethename.Aclientmustknowhowtocontactatleast 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.

11

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 inothers, theaddress is configured into theoperating systemat start-up. Inothers, theadministratorplacestheaddressofaserverinafileonsecondarystorage.

Local DNS

client

client

client

Area DNS

Wide Area DNS

Fig. 1.4 Domain name resolution

Itmayseemnaturaltoresolvequeriesbyworkingdownthetreeofthenameservers,butitcanleadtoinefficienciesfor three reasons:

Most name resolution refers to local names, those found within the same subdivision of the name space as the •machinefromwhichtherequestoriginates.Tracingapathtocontactthelocalauthoritywouldbeinefficient.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 efficienttranslation.

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 CachingThe 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. Whenaclientaskstoresolveaname,theserverfirstcheckstoseeifithasauthorityforthenameaccordingtothestandard 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.

Web Technology

12

Ifefficiencyisimportant,theclientwillchoosetoacceptthenon-authoritativeanswerandproceed.Ifaccuracyisimportant, 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 LiveName to address binding changes, therefore to keep the cache correct, servers time each entry and dispose of entries thatexceedareasonabletime.Serversdonotapplyasinglefixedtimeouttoallentries,butallowtheauthorityforanentrytoconfigureitstime-out.Wheneveranauthorityrespondstoarequest,itincludesatimetolive(TTL)valueintheresponsethatspecifieshowlongitguaranteesthebindingtoremain.Authoritiescanreducenetworkoverhead 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 NamesAbbreviation 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

Mostclientsoftwareimplementsabbreviationwithadomainsuffixlist.Thenetmasterconfiguresalistofsuffixesthat 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 NetworkingIn dialup networking, the existing telephone lines are used to get Internet connectivity. The block diagram is as shown:

ISP

web server

modem modem

user

telephone lines

Fig. 1.5 Accessing internet through dialup

13

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. Themodemisknownasonetypeofdatacommunicationequipment.Onceproperlyconfigured,itinstructsthemodem 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 CriteriaOnce 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 hostAfter 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.•

AllcustomersofanISPmustpaythefirsttype,achargefortheInternetuse.Userchargesareusuallybilledatflatrate.Thatis,theISPchargeseachcustomerafixedratepermonth,independentofthenumberofminutesacustomeruses 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.

Althoughuserchargesarebilledatafixedrate,ISPsdodiscriminateamongclassesforusers.Forexample,anISPcharges 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.

Web Technology

14

1.10 Newer TechnologiesThe 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 modemMakes 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 needscablemodemsatitsend.ThemodemscarrythedatatrafficoverthecableTV’scoaxiallineswithoutinterferingwith 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 technologyTo 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.

15

SummaryThe 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.TheInternethashadapositiveeffectonthedemocratisationofsociety,makingitmoredifficulttobottleup•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.Domainnamesarehierarchical,withthemostsignificantpartofthenameontheright.•The mechanism that implements a machine name hierarchy for TCP/IP Internet is called the Domain Name •System (DNS)Anysuffixofalabelinadomainnameisalsocalledadomain.•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.•Thedomainnameschemeincludesanefficient,reliable,generalpurpose,distributedsystemformappingnames•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).•

ReferencesSoper, 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].

Web Technology

16

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

17

Self AssessmentThe Internet Ocean was created in _______.1.

1960a. 1979b. 1969c. 1970d.

Standards that the Internet uses are known as the ____________ suite.2. APRNETa. DARPAb. HTMLc. TCP/IP protocold.

Which of the following is an advantage of internet?3. Communication toola. Travelb. Teaching aidc. Social discriminationd.

Which of the following is not one of the precautions that should be taken to protect system from problems?4. Install or use Spam protectiona. Interpolation or data interchange standardb. Enable popup blocking features of your Web browserc. Enable cookie protection in your Web browserd.

Which of the following is a basis of internet?5. Client server systema. Communicationb. Data storagec. Traveld.

The most important feature of a server is ____________.6. dataa. communicationb. teaching aidc. storaged.

Which of the following statements is false?7. Servers are designed to be fault-tolerant.a. Most servers use the special powerful microprocessors.b. A computer runs a program to either request a service from another computer or provide a service to another c. computer.A client program is initiated by the service (or it can be another application program) and terminates when d. the users are complete.

Web Technology

18

When two processes communicate with each other, they need a ____________ at both ends.8. Socketsa. UDPb. Serverc. Protocold.

The ________ is a network service that translates domain names to IP addresses.9. UDPa. DNSb. TCPc. Local socket addressd.

Which of the following sentence is false?10. A computer name is also called an IP address.a. Domainnamesarehierarchical,withthemostsignificantpartofthenameontheright.b. The Domain Name System does not specify the exact number of segments in a name.c. The mechanism that implements a machine name hierarchy for TCP/IP Internet is called the Domain Name d. System (DNS).

19

Chapter II

Introduction to Web Design

Aim

The aim of this chapter is to:

explain concept of web designing •

enlist technology used in web designing •

discuss web designing basic •

Objectives

The objectives of this chapter are to:

explain element of good design •

describe lines and line work in web designing •

elaborate shapes and colours in web designing •

Learning outcome

At the end of this chapter, you will be able to:

understand texture in web designing •

identify direction while designing •

understand the principle of designing•

Web Technology

20

2.1 What is Web Designing?TheInternethasredefinedthebordersofourmodernworld.Bigorsmallcompaniesnowhavecustomersallacrosstheglobe.SmallorBigbusinesseshouses,groupsandnon-profitorganisationsareprovidinganinfinitearrayofinformationtoawidespreadaudience.ThepossibilitiesareendlessthrougheffectiveandefficientWebDesign.

WebDesignisanartofcontentpresentationtoanenduserthroughWorldWideWeb.Theefficientwebdesignhelps your company in bringing enquiries that generate sales and add asset to business.

Inthedigitalworldwebsitesemergeasasignificanttoolthatnotonlyhelpthecompaniestofindtheirtargetaudiencebut 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 audienceineffectiveandefficientmanner.Websitesareoftenconsideredastheinteractivemarketingstrategytopull out the hidden customer around the global arena.

Eachofthewebsitesplannedinaprecisemannertocaterspecificneed.Thepeoplewhoviewthewebsiteforaspecificreasonanditisimportanttoknowexactlywhattheyarelookingforwhentheyvisitthesite.Aclearlydefinedpurposeorgoalofthesitehelpsinunderstandingofwhatvisitorswant.Itgivesawayinidentifyingthetarget 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 BasicsWeb 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.

21

Web Design

Elements of Good Design

Fonts and Typography

How to Use Colour

Graphics and Images

Web Layout Basics

Tackling Web Navigation

Accessibility and Usability

Web Design Software

Fig. 2.1 Web design

2.3 Elements of Good DesignGood 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 design

Principles of design

The web is not print

Fig. 2.2 Elements of good design

Web Technology

22

2.3.1 The Elements of DesignThe 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.

Therearefivebasicelementsofeverydesign:Lines and linework •Shape •Texture •Colour •Direction •

Lines and linework

Shape

Texture

Colour

Direction

Fig. 2.3 Element design

Lines and line workLines 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 �

23

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

ShapeShapes 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 •naturalshapesare.Forexample,astick-figuredrawingofadogisanabstractdogshape,butanotherdoginaphoto is a natural shape. Abstract shapes in Web designs are usually added through images. Some examples of abstract shapes are:

alphabet glyphs �icons �symbols �

Web Technology

24

TextureTexture gives a design a feeling of surface. Texture on Web pages is all visual, but you can use natural textures or artificialtogettheeffectinyourdesigns.

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

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

Infact,agoodplanindesignistocreatethedesignwithoutcolourfirst,thenaddaslittlecolourasyoucanto•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.•JPEGimagesforphotographsandimageswithmillionsofcoloursandGIFsforflatcolourimages.•

25

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

Web Technology

26

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

Youcanalsousethefloatstylepropertytopositionelementsandbalancethemacrossthepage. �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. �Centeringistheeasiestwaytogetasymmetricallybalancedpage.Butbecareful,asitcanbedifficultto �createacentereddesignthatdoesn’tlookflatorboring.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.

27

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

EmphasisEmphasis 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 •makingthedesignblandandflat.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.•Ifyou’veworkedtocreateasemanticflowtoyourHTMLmarkup,thatwillbeeasier.BecauseyourWebpage•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. �

Web Technology

28

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

UnityUnity 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 PrintMany 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. •

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

Printouts as a Portfolio

Setting Expectations

Know what your customer uses

Fig. 2.5 Working with customers

Printouts as a portfolioIt 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 expectationsBeup-frontwithyourcustomers.Iftheywanttheirpagetohaveveryspecificlayout,font,anddesignelements,besure to explain the tradeoffs such as download speed and maintenance before simply building them a completely graphical page.

Know what your customer usesIf 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

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

Printouts as a Portfolio

Setting Expectations

Know what your customer uses

Fig. 2.5 Working with customers

Printouts as a portfolioIt 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 expectationsBeup-frontwithyourcustomers.Iftheywanttheirpagetohaveveryspecificlayout,font,anddesignelements,besure to explain the tradeoffs such as download speed and maintenance before simply building them a completely graphical page.

Know what your customer usesIf 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.

Web Technology

30

Design techniquesDesign technique includes:

Know your audience

Test

Don't forget resolution

Fig. 2.6 Design techniques

Know your audienceKnow 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 resolutionBrowsers 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.

31

SummaryTheInternethasredefinedthebordersofourmodernworld.Bigorsmallcompaniesnowhavecustomersall•across the globe.Web Design is an art of content presentation to an end user through World Wide Web. •The efficientweb 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 •orartificialtogettheeffectinyourdesigns.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. JPEGimagesforphotographsandimageswithmillionsofcoloursandGIFsforflatcolourimages.•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.

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

Web Technology

32

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

33

Self Assessment Which of the following increases the readability of the design?1.

Shapes a. Direction b. Lineworkc. Linesd.

_______ add to the style of a design and can enhance the comprehension and readability of a design. 2. Shapes a. Direction b. Lineworkc. Linesd.

___________ can be used as a border around elements or a divider between elements.3. Shapes a. Direction b. Lineworkc. Linesd.

Which of the following statements is true?4. Shapes on most Web pages are square or rectangular.a. Balance on most Web pages are square or rectangular.b. Direction on most Web pages are square or rectangular.c. Lines on most Web pages are square or rectangular.d.

____________ in design provides mood and atmosphere. 5. Shapes a. Direction b. Lineworkc. Linesd.

____________ gives the illusion of movement within a design. 6. Shapes a. Direction b. Lineworkc. Linesd.

_________ is more than just slapping HTML tags up onto a page. 7. Designa. Balance b. Symmetrical c. Emphasis d.

Web Technology

34

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

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

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

35

Chapter III

Basics of Web Designing

Aim

The aim of this chapter is to:

enlist the basic element of web designing •

elucidate HTML •

elaborate editor •

Objectives

The objectives of this chapter are to:

explain hosting •

describe publishing •

elaborate steps of web designing •

Learning outcome

At the end of this chapter, you will be able to:

understand HTML documents •

identify WYSIWYG editor •

recognise free host servers •

Web Technology

36

3.1 Introduction There are four basic things that are to be followed while designing web sites, they are as follows:

Web design

HTML

Publish Editor

Hosting

Fig. 3.1 Elements of web design

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

EditorsTools used to create websites

Hosting Howtofindahome(hostserver)foryourwebsite?

PublishHow to upload your site to the internet so that viewers can visit it

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

37

NoteAs 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. Websiteconstructionisaminefield.Ifyouhaveamapyouwillbefine,butifyouthinkitlookseasyandgo•charginginyouwillendupcomingapart!Many software applications will tell you that web design is easy. It’s common to see claims such as “Make your •ownwebsiteinminutesnoexperiencenecessary!”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”.Sohere’sthefirstrealitycheck:Thereisnosuchthingasaprogramwhichmakesgoodsites.Althoughsome•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: HTMLAt 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 documentsAwebpageisan“HTMLDocument”.Thisisafileformat,whichusuallyusestheextension“.html”or“.htm”.

Forexample,ifyouuseMicrosoftWord,youwillusuallysaveyourfileswiththeextension“.doc”.•Howeveryoucanalsosaveyourfileswithmanyotherextensionssuchas“.txt”,“.wps”andsoon.Amongst•the options is “.html”.

Web Technology

38

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

39

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. IfyouexaminetheHTMLcode,youarelikelytofindmistakesandunwantedextracode.•Theyalsotendtobedeceptiveyoumaythinkyou’reproducingafantasticpagebutfindthat it looksvery•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. •

Web Technology

40

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 WebFinding 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. •Itiswidelyconsideredtobeatleastbestequalinthefieldofprofessionalwebdesign.It’salsoperfectlysuitable•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.MicrosoftFrontPageisagoodprogramforbeginners,butbewarned:thisprogramhasawholerangeofflaws•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.IronicallyweuseFrontPagequitealot;becausepeopleoftensendusFrontPagefilestoworkononeofthe•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: HostingOnce 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,thefirstthingyou’llneedtodoistofindahostserver.•Therearemanyoptionsavailableandfindingtherightsolutionisn’talwayseasy.•There are two main categories of hosting options: Free and Paid.•

3.7.1 Free Host ServersThere 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).Youwillinsteadbeassignedanaddresswhichcouldbeverylonganddifficulttoremember.

41

No support: If anything goes wrong or if you need any help, don’t hold your breath. Chances are no-one •cares.Limitedfeatures:Youwillfindthatcertainfeaturesaren’tallowed.•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 ServersIf 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:FTPAccess:Thisisthemostcommonmethodofpublishingyourfilestothehostserverandisofferedonalmost•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 •isasetoffilesandprotocolswhichallowbeginnerstouseadvancedfeaturessimilartothoseofferedbyCGI.When used very carefully they can be a handy tool. However, FrontPage extensions have many limitations and arepronetoinexplicablefailure-usethematyourownrisk!

3.8 Step 4: Publish (upload)Thefinalstageofconstructionistheupload.

Using afile transfer program, you copy the entirewebsite 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.•

Web Technology

42

Fig. 3.3 Publish(Source: http://www.supersmartnet.com/Thread-Website-Tutorial.html)

Ifyou’re familiarwithfilemanagementsystemssuchasMSWindowsExplorer, thenyouwon’thaveany•difficultywiththispackage.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. Thesecommandscanidentifyfileswhichhavebeenmodifiedsinceyoulastpublishedandtellyouwhichones•need to be updated. If you have a large site, this can be a huge time-saver.•

43

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.Awebpage is an “HTMLDocument”.This is afile format,whichusually 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.•MicrosoftFrontPageisagoodprogramforbeginners,butbewarned:thisprogramhasawholerangeofflaws•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.

ReferencesThomas, 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/watch?v=GOfhmzNLWzY> [Accessed 22 June 2012].

Recommended ReadingPosey, 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.

Web Technology

44

Self Assessment __________isthemostcommonmethodofpublishingyourfilestothehostserverandisofferedonalmost1. all serious hosting options.

FTP Accessa. Technical support b. Microsoft FrontPage c. HTML d.

Which of the following department is most important, which checks whether your provider offer helps installing 2. and running your site? Does this cost extra?

FTP Accessa. Technical support b. Microsoft FrontPage c. HTML d.

___________ Contribute is a lower-cost sibling of Dreamweaver.3. Adobea. HTML b. WYSIWYG c. ISP d.

__________isagoodprogramforbeginners,butbewarnedthatthisprogramhasawholerangeofflawsand4. does not have a good reputation in professional circles.

FTP Accessa. Technical support b. Microsoft FrontPage c. HTML d.

_____________ web-page editors are similar to word processors and they allow you to construct a web page 5. without using HTML instructions.

Adobea. HTML b. WYSIWYG c. ISP d.

Which of the following statements is true?6. WYSIWYG means “When You See Is When You Get”. a. WYSIWYG means “Which You See Is Will You Get”. b. WYSIWYG means “What You See Is What You Get”. c. WYSIWYG means “Who You See Is Which You Get”. d.

To view an ___________ document, you must use a browser or similar software. 7. Adobea. HTML b. WYSIWYG c. ISP d.

45

The ___________ opens the HTML document in the background and “decodes” it before showing it. 8. Browsera. Web page b. ISPc. HTML d.

A _________ is an “HTML Document”.9. Browsera. Web page b. ISPc. HTML d.

The quickest and easiest way to make a site is to use an on-line “wizard” supplied by your ____________ or 10. some other organisation.

Browsera. Web page b. ISPc. HTML d.

Web Technology

46

Chapter IV

Internet Services

Aim

The aim of this chapter is to:

introduce the web of internet•

elucidate World Wide Web •

explain the browser software•

Objectives

The objectives of this chapter are to:

recognise the elements of web navigation•

determine browser in details•

elucidate the term bookmarks•

Learning outcome

At the end of this chapter, you will be able to:

understand new group hierarchies•

identify the type of new groups•

understand e-mail • operations

47

4.1 Introduction: The InternetTheInternetisnotconfinedtojustwebbrowsing.Ithasseveralotherservices,whichareequallypopular.Thefollowing diagram shows the various services offered by the Internet.

email

I.M.

ChatP2PTelnet

Gopherspace

FTP

World Wide Web

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.

Web Technology

48

TheWorldWideWebconsistsoffiles,calledpagesorhomepages,containinglinkstodocumentsandresourcesthroughout 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 thereforenotafixedentity,butonethatisinaconstantstateofdevelopmentandflux.

4.3 Web BrowsingWith 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 filenames.InordertousetheInternet,youneedtoaccesstosomecomputerthathasaccesstotheInternet.Thiscomputer 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.•AcomputeroryourhomeorofficethatusesInternetconnectionssuchasacablemodem,DSL,orsomeother•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 WebThe 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.

AnidentifierusedtospecifyaparticularpageofWWWinformationiscalledUniformResourceLocator(URL).When a browser displays a page it also displays the URL of the page in the address bar of the browser. An URL isanalogoustoatelephonenumber-ashortstringthatidentifiesuniquelyamongmillionsofwebpages.Givenavalid URL, a browser can go directly to the page without passing through other documents.

4.3.2StartUpaWebBrowserOnce 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.3UsingtheWebBrowserYou use the Web browser typically through manipulating it with your mouse and cursor, and entering information from your keyboard.

49

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

pageyour machine running a web

browser

server machine running a web

server

Fig. 4.2 A browsing service using client server interaction

TofindoutmorewaystoaccessaWebsite,youcanlookinyourbrowser’sdocumentationabouthowyoucan“opena 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”) �Thefilename(“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).FollowingtheHTTPprotocol,thebrowsersendsaGETrequesttotheserver,askingforthefile“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 BookmarksTo 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.

Web Technology

50

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 CookiesCookies 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. Thatisthefuelthatmakestelemarketingandjunkmailpossible.Anundesirablesideeffect!

4.3.6 Browser in DetailWhichever 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 browserTherearesomanythings,whichabrowsercando(seethefig.4.3).Inthepresentationoptionyoucanoverridemanyspecifications,whichawebdesignerhaschosenfortransmissionofhiswebpage.ForexamplechooseafontschemetooverrideWeb“designers”whofixthefontsizetobetoosmall:

Choose the menu Tools->Internet Options. Choose the Accessibility box (lower right-hand corner). Click the boxes for“IgnorefontstylesspecifiedonWebpages”

51

Basic Web Browser Functions

Navigation Aids

open•find•history•back.forward•Hotlinks/bookmarks•

Services

print•save as•view sources•mail•open•reload•help•stop•

User Presentation Options

font•colours•size•images on/off•

Pages can contain a variety of information

links to other pages•inline images•sounds•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 firstinstallyourWebbrowser.EverytimeyoulaunchaWebbrowser,thispagehastoload.

IfyouwanttosetyourstartpagetobeaspecificWebpage,bringthatpageupintheWebbrowser.ThispagecouldbeanHTMLfilestoredonyourharddrive.Refusecookiesexceptfromsitesyouapprove.Acookieisafilethatisdownloadedtoyourharddriveasaresultof 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 filesthatcanbeusedtotracksitesthatyouvisit.Manypeopleliketocleanthemoutorcontrolwhentheyareused.Use cookie management built into your browser. Internet Explorer has some good features for controlling cookies. Here is how to set them:

Web Technology

52

Choose the Internet Explorer menu option Tools->Internet OptionsChoose 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

Ctrl/I Bring up your favorites in a side panel; shows pages you have “bookmarked” to quickly visit again

Ctrl/D Save a pageURL to your favouritesStop theMusic! (SomeWeb“designers”

Esc causeamusicfiletoautomaticallystartwhenyouvisitaWebpage;also stops loading graphics.)

Tab MovetonextfieldinaWebform.

Tab Move to next link on Web page

Alt/D Move to the address box

Shift/click on hypertext link This will cause the link to open in a newWeb browser

Table 4.2 Internet Explorer Key Sequence

Stop the popup windowsYou 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 theWebefficientlyalmostimpossible.

53

4.3.7 The Elements of Web NavigationIndexes and search engines of various kinds have greatly facilitated access to the wealth of information on the Internet. Therearethreegeneraltypesofsitesthatcanhelpyoufindinformationonsubjectsthatyou’reinterestedin:

Directory SitesThesesitesputwebsitesintoastructureofpredefinedcategoriesafterareviewbyahumanbeing.Youshouldstartwith a directory site if you are looking for a category of information, like the Environment, Gardening, or Photography, orforawell-knownsitelikelytobeintheirdirectory.Theycanbeagoodplacetosearchfirstfollowedbyawiderinvestigation with a general search engine if necessary.

Search EnginesSearch 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 SitesThese sites provide specialised search functionality such as meta-searches (searching several engines at once), multimedia searches, legal information searches, and other capabilities.

Therearefourdirectionsyoucansurf,andfivebasictechniques.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:Thefivebasicsurfingtechniquesaredescribedasfollows:•Surfing:Youdon’thavetowaitforapagetoloadtoeitherclickalink,pressthebackbutton,orselectanew•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 onalinkassoonasitisavailable,youspeedupandenjoythefeelingofsurfingfromwavetowave.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 thetroubleoffindingthelinksyouusedlasttime.Ifyouclickanewlinkfromanypage,youstartanewchainfrom 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.

Web Technology

54

4.3.8 SearchingWhen should one use a search engine?

When you have a narrow or obscure topic or idea for research•Whenyouarelookingforaspecificsite•Whenyouwanttosearchthefull textofmillionsofpages•Whenyouwanttoretrievealargenumberof•documents on your topicWhenyouwanttosearchforparticulartypesofdocuments,filetypes,sourcelocations,languages,datelast•modifiedandsoon.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:Youarelookingforaspecificfact/person/event/narrowtopic•Your topic is made up of multiple ideas•YoulikeGoogle’sspecialisedfeaturessuchasspellchecking,phonebookandflightlookups,stockpricesand•so on.YouwanttotakeadvantageofGoogle’sadvancedsearchinterfacethatletsyoufilloutaformtodoasearch•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 FeaturesReturns 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.Formorerefinedsearches,usequotationsforexactphrases(“ElNino”)•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•MapsfromYahoo!orMapBlast(enteranaddress)•Phonebookentry(enterfirstandlastname,andcityorzip)•Stock prices (enter a company’s ticker symbol)•

55

LimitationsNew 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 toassociatewordswithalinktoaspecificWebsitetomakeapoliticalorotherpoint.Forexample,thesearchterms“miserablefailure”pointtotheofficialGeorgeBushsite.ThissitemaybecomethenumberonehitonGoogle,eventhough the words are not relevant to it.

Few search examples:Concept searchQuery: I’d like to learn more about Richard Nixon’s resignation.

Type: Nixon resignation [Google defaults to Boolean AND logic]Examine the results for relevancyNote the related categories from the Google Web Directory listed at the top of the results screen

Phrase SearchQuery: 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 SearchFieldsearchingisawaytonarrowthesearchtospecificpartsofthedocumentorrecord.Googleoffersavarietyofwaystousefieldsearchingtobetterfocusyourresults.First,let’stryasimplesearchthatisnotafieldsearch.

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’slookintowaystofocusourresultsbyusingfieldsearching.WewilltrythesesearchesusingGoogle’sbasicsearchbox.KeepinmindthatmostofGoogle’sfieldsearchoptionsarealsoavailableontheirAdvancedSearchform that is even easier to use.

intitle:slaverywilllookforslaveryinthetitlefieldembeddedwithintheHTMLdocument.

InurlslaverywilllookforslaveryintheURLofthefile,

Query: I’d like information about the Mars rover missions from the NASA site.

Search: +”Mars rover” +site:nasa.gov

Web Technology

56

4.4 News groupsA 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 HierarchiesNewsgroupsareoftenarrangedintohierarchies,theoreticallymakingitsimplertofindrelatedgroups.Thetermtop-levelhierarchyreferstothehierarchydefinedbytheprefixpriortothefirstdot.

The most commonly known hierarchies are the usenet hierarchies. So for instance newsgroup rec.arts.sf.starwars.gameswouldbeintherec.*toplevelusenethierarchy,wheretheasterisk(*)isdefinedasawildcardcharacter.There were seven original major hierarchies of usenet newsgroups, known as the “Big 7”:

comp.*—Discussionofcomputer-relatedtopics•news.*—DiscussionofUsenetitself•sci.*—Discussionofscientificsubjects•rec.*—Discussionofrecreationalactivities(e.g.gamesandhobbies)•soc.*—Socialisinganddiscussionofsocialissues.•talk.*—Discussionofcontentiousissuessuchasreligionandpolitics.•misc.*—Miscellaneousdiscussion—anythingwhichdoesn’tfitintheotherhierarchies.•

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 NewsgroupsTypically,anewsgroupisfocusedonaparticulartopicsuchas“shellfish”.Somenewsgroupsallowthepostingofmessages 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 theoverallamountofnetworktrafficandresourceusage.

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.

57

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 NewsgroupsWhileNewsgroupswerenotcreatedwiththeintentionofdistributingbinaryfiles,theyhaveproventobequiteeffectiveforthis.Duetothewaytheywork,afileuploadedoncewillbespreadandcanthenbedownloadedbyanunlimited 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, asopposedtounderthewillingnessofotherpeopletosharefiles.InfactthisisanotherbenefitofNewsgroups:itisusuallynotexpectedthatusersshare.Ifeveryusermakesuploadsthentheserverswouldbeflooded,thusitisacceptable and often encouraged for users to just leech.

Filescanbeattachedtoapost,butthereisaverysmalllimitinthesizeofthefile,whichcanbeattached.Assuchpeoplehavecomeupwithmethodstoencodeafileintotext,whichispostedasapostratherthanattachedtoapost. There is a limit to how large a single post may be as well, so methods were developed to chain multiple posts together.Thenewsreaderthenintelligentlyjoinsthepostsanddecodesitintoabinaryfile.AnumberofwebsitesexistforthepurposeofkeepinganindexofthefilespostedtobinaryNewsgroups.

4.5 Mailing ListsA 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”.

Atleasttwoquitedifferenttypesofmailinglistscanbedefined:thefirstoneisclosertotheliteralsense,wherea“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 RoomsA 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.

Web Technology

58

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

Likeapostofficemailboxeachemailmailboxhasamailboxaddress.Tosendemailtoanotheruser,onemustknowthe recipients mail box address. Thus,each individual who participates in electronic mail exchange has a mailbox identifiedbyauniqueaddressxyz@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.

59

Oncetheuserfinishesenteringthemessageandaddsattachments,emailsoftwaresendsitacrosstheInternettotherecipient’smailbox.Whenanincomingemailmessagearrives,systemsoftwarecanbeconfiguredtoinformtherecipient. 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 waitfortheusertofinishviewingthecurrentapplicationbeforemakinganannouncement.Mostsystemsallowsausertosuppressnotificationaltogether,inwhichcasetheusermustperiodicallychecktoseeifemailhasarrived.

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 canbeviewedagain,saveacopyofthemessageinthefile,ordiscardthemessage.

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 emailsoftwarefillsinthedateandthesendersmailboxaddressautomatically.Inareply,themailinterfaceprogramautomaticallyconstructstheentireheader.ItusesthecontentsoftheFROMfieldintheoriginalmessageasthecontentsoftheTOfieldinthereply.Italsocopiesthesubjectfieldfromtheoriginalmessagetoareply.Havingsoftwarefillintheheaderlinesisconvenient,andalsomakesitdifficulttoforgeemail.

In practice, most email systems supply additional header lines that help identify the sending computer, give the fullnameofthepersonwhosentthemessage,provideauniquemessageidentifierthatcanbeusedforauditingor accounting, and identify the type of message (Example, text or graphics). Thus, email messages can arrive with dozensoflinesintheheader.Alengthyheadercanbeannoyingtoarecipientwhomustskippastittofindthebodyof 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.

Web Technology

60

recipient’s mail box

sender’s computer

e-mail client

e-mail server

TCP/IP used to transfer message

Internet

Fig. 4.3 Email operation

Clientsoftwarestartsautomaticallyasauserfinishescomposinganemailmessage.Theclientusestherecipientsemail 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 administratorarrangestostarttheserverwhenthesystemfirstbegins,andleavestheserverrunningatalltimes.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 FaxFax (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.

61

At the receiving end incoming digitised values are sent to the printer to create a copy of the transmitted page.

NowwiththeadventoftheInternetcomputerscanbeusedtosendafax.Thetwo-faxmachinescanbemodifiedto communicate across the Internet or afile document can be sent froma computer to a faxmachine. SinceInternethandlesdigitalinformationmoreefficientlythefuturefaxmachinesaregoingtobebasedontheInternettechnology.

4.9 File Transfer Protocol (FTP)Althoughserviceslikeemail,Internetfaxcanbeutilisedforsendingfilesoverthenettheyarenotdesignedforhandling 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 CommandsThere 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>:forretrieveafilefromthecomputer.•bye: Terminate the connection and leave the ftp session.•

ftpcanbeusednotonlytoretrievingfilesbutalsoforuploading/sendingfilebyusingsendcommand.Onceaconnectionhasestablishedjusttypethecommandsendalongwiththefilenametobesent.Acopyofthefilewillbetransferredtotheremotecomputer.Ofcourse,theFTPontheremotesitemustbeconfiguredtoallowfilestorage.Many Internet sites that run ftp allow storage.

4.9.2 FTP File TypesFTPunderstandsonlytwobasicfileformats.Itclassifieseachfileaseitheratextfileorabinaryfile.TextfilesupportsASCIIencoding.FTPhascommandstoconvertanonASCIItextfiletoASCIItextfile.FTPusesclassificationofbinaryfilesforallnontextfiles.Forexamplethefollowingtypeoffilesshouldbespecifiedasbinaryfiles.

A computer program•Audio data•A graphic or video image.•A spread sheet•A word processor document•Compressedfiles•

Thecompressedfilereferstoafile,whichhasbeenprocessedtoreduceitssizebyrunningfilecompressutility.Byusingfileuncompressingutilitieslikeunziptheoriginalfilecanbereconstructed.

ChoosingbetweenbinaryandASCIItransfercanbesometimesdifficult.Whenyouareunsureaboutthetypeofthefilechoosebinaryoptionfortransferringthefile.IfauserrequestsFTPtoperformatransferusingincorrecttypethe resulting transferred copy may be damaged.

4.9.3 FTP LoginThe 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.

Web Technology

62

Tomakefilesavailabletothegeneralpublic,asystemadministratorcanconfigureFTPtohonoranonymousFTP.ItworkslikestandardFTP,exceptthatitallowsanyonetoaccesspublicfiles.TouseanonymousFTP,auserentersthe 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.

User computer

Remote computer

FTP server

FTP client

TCP/IP communication

Internet

File

Fig. 4.4 FTP operation

TheuserinvokesalocalFTPprogramorentersaURLthatspecifiesFTP.ThelocalFTPprogramortheuser’sbrowserbecomes an FTP client that uses TCP to contact an FTP server program on the remote computer. Each time the user requestsafiletransfer,theclientandserverprograminteractstosendacopyofthedataacrosstheInternet.

TheFTPserverlocatesthefilethattheuserrequested,andusesTCPtosendacopyoftheentirecontentsofthefileacrosstheInternettotheclientastheclientprogramreceivesdata,itwritesthedataintoafileontheuser’slocaldisk.Afterthefiletransfercompletes,theclientandserverprogramsterminatetheTCPconnectionusedforthe transfer.

Here is an example typical FTP session:

$ ftp plaza.aarnet.edu.auConnected 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): ftpGuest 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.Asaconsequenceofthis,weareonlyshadowingfilesmodifiedin-thelast100daysonmanyofthemorepopulararchives. We apologise for this inconvenience.

63

Local time is Tue Jun 4 17:46:00 1996Pleasereadthefile/info/welcome-ftpuseritwaslastmodifiedonFriApr2214:47:051994-774daysagoGuestloginok,accessrestrictionsapply.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.gz1 bytes received in 1.6 seconds (3.2 Kbytes/s)ftp> quit

4.10 TELNETThe 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 timesharing computer

Remote computer

Client server

TCP/IP

InternetUser’s Monitor, 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.

Web Technology

64

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.

Theremoteaccessbytelnethasthreesignificantreasons.Itmakescomputationremotefromtheuser.Insteadofsendingadatafileoramessagefromonecomputertoanother,remoteaccessallowsaprogramtoacceptinput,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$ telnettelnet> toggle optionsWill show option processing.telnet> open osmaniaTrying 202.54.70.200Connected to linux osmaniaEscape character is ‘^]’.

65

SummaryTheInternetisnotconfinedtojustwebbrowsing.•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.TheWorldWideWebconsistsoffiles,calledpagesorhomepages,containinglinkstodocumentsandresources•throughout the Internet.A browsing service permits users to view information from remote computers without knowing the names of •theindividualfilenames.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.•AcookieisafilethatisdownloadedtoyourharddriveasaresultofvisitingaWebsite.•Indexes and search engines of various kinds have greatly facilitated access to the wealth of information on the •Internet.Fieldsearchingisawaytonarrowthesearchtospecificpartsofthedocumentorrecord.•Googleoffersavarietyofwaystousefieldsearchingtobetterfocusyourresults.•Newsgroupsareoftenarrangedintohierarchies,theoreticallymakingitsimplertofindrelatedgroups.•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.Thecompressedfile refers to afile,whichhasbeenprocessed to reduce its sizeby runningfile compress•utility.Insteadofsendingadatafileoramessagefromonecomputertoanother,remoteaccessallowsaprogramto•accept input, process it and send back the result to the remote user.

ReferencesTotok, 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].

Web Technology

66

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> [Accessed 20 June 2012].technoblogical, 2011. • What is FTP, [Video Online] Available at: <http://www.youtube.com/watch?v=hiQrYptlZ08> [Accessed 20 June 2012].

Recommended ReadingPrasad, 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.

67

Self AssessmentWhich of the following is a system of internet servers that supports hypertext to access several internet protocols 1. on a single interface?

HTTPa. HTMLb. FTPc. WWWd.

Which of the following statements is false?2. The operation of the Web relies primarily on hypertext as its means of information retrieval.a. Microsoft Text is a document containing words that connect to other documents.b. A single hypertext document can contain links to many documents.c. The Web contains a complex virtual web of connections among a vast number of documents, graphics, d. videos, and sounds.

TheWorldWideWebconsistsoffiles,called____________.3. bookmarksa. XHTMLb. home pagesc. W3Cd.

A _____________ permits users to view information from remote computers without knowing the names of 4. theindividualfilenames.

browsing servicea. computerb. service providerc. URLd.

What is the full form of URL?5. United Research Locatora. Uniform Reform Locationb. Uniform Research Locationc. Uniform Resource Locatord.

___________ provide capabilities that make the web much easier to navigate.6. Servera. Bookmarkb. HTTP protocolc. Cookiesd.

Whichofthefollowingisnotoneofthebasicsurfingtechniques?7. Linka. Surfingb. Chainsc. Reloadingd.

Web Technology

68

Newsgroups generally come in either of two types, binary or _________.8. tertiarya. secondaryb. decimalc. textd.

Which of the following is included in chat system?9. IRCa. 2Db. UNIXc. AQLd.

___________ is a simple form of digital transmission for transmission of images over voice grade telephone 10. system.

FTPa. Faxb. DOSc. GUId.

69

Chapter V

HTML

Aim

The aim of this chapter is to:

introduce the term HTML•

elucidate formatting and URL•

explain the hyper links and character entities•

Objectives

The objectives of this chapter are to:

recognise the form usage on the server•

determine tabular formation•

elucidate background graphics•

Learning outcome

At the end of this chapter, you will be able to:

understand Common Gateway Interface•

identify the structure of a CGI script•

understand usema• ps

Web Technology

70

5.1 IntroductionSome of the important facts about HTML are as follows:

HTML stands for Hyper Text Markup Language.•AnHTMLfileisatextfilecontainingsmallmarkuptags.•The markup tags tell the Web browser how to display the page.•AnHTMLfilemusthaveanhtmorhtmlfileextension.•AnHTMLfilecanbecreatedusingasimpletexteditor.•HTMLdocumentsaretextfilesmadeupofHTMLelements.•HTMLelementsaredefinedusingHTMLtags.•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>•Thefirsttaginapairisthestarttag,thesecondtagistheendtag.•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 textthatismadeupofparagraphs,lists,andotherelements.BrowsersexpectspecificinformationbecausetheyareprogrammedaccordingtoHTMLspecifications.ThefollowingisasimpleHTMLprogram:

<html><head><TITLE>A Simple HTML Example</TITLE></head><body><h1>HTML is Easy To Learn</h1><P>Welcome to the world of HTML.Thisisthefirstparagraph.Whileshortitisstillaparagraph!</P><P>And this is the second paragraph.</P></body></html>

Fig. 5.1 Browser output for the simple program

71

5.3 Formatting

5.3.1 Text FormattingHeadings: <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=alignmentattributeinyoursourcehtmlfile.<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:Fordocumentationpurposeinsertyourcommentsin<!..>

<!………..comments…………><b>Definesboldtext<big>Definesbigtext<em>Definesemphasisedtext<i>Definesitalictext<small>Definessmalltext<strong>Definesstrongtext<sub>Definessubscriptedtext<sup>Definessuperscriptedtext<ins>Definesinsertedtext<del>Definesdeletedtext

Web Technology

72

Fig. 5.2 Computer output tags

<code>Definescomputercodetext<kbd>Defineskeyboardtext<samp>Definessamplecomputercode<tt>Definesteletypetext<var>Definesavariable<pre>Definespreformattedtext

Computer code

Keyboard input

Teletype text

Sample text

Computer variable

Fig. 5.3 Browser output for different computer tags

5.3.2Citations,Quotations,andDefinitionTags<abbr>Definesanabbreviation.<abbr>title=”Hyper Text Markup Language”>HTML</abbr><acronym>Definesanacronym.Thetitleattributeisusedtoshowthespelled-out version when holding the mouse pointer over the acronym orabbreviation<address>Definesanaddresselement<bdo>Definesthetextdirection.bi-directionaloverride(bdo)<bdodir=”rtl”>HelloWorld!</bdo><!..Righttoleft..>Browseroutput=!dlroWolleH<blockquote>Definesalongquotation

73

<q>Definesashortquotation<cite>Definesacitation<dfn>Definesadefinitionterm

5.3.3 Character EntitiesFew 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; &#60;&gt > greater than; &#62;&amp & ampersand; &#38;&quot “ quotation mark; &#34;&apos ‘ apostrophe

5.4 HyperlinksHyperlinks 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 -.Wheneveruserplaceshismousepointerandclicksonthattext,thewebpagewithspecifiedURLwillbeopened.IfanysubfoldersarethereinthespecifiedURL,includetheminthehrefdefinitionwithslashes.Insuchcasesthebrowsermakesmorethanonerequest.ThefirstoneforthemainURLandthenextoneforthesubfolderwithinthe URL*.Visit Board of Intermediate

5.5URLsA URL includes the type of resource being accessed (Example, Web, gopher, FTP), the address of the server, and thelocationofthefile.Thesyntaxis:

scheme://host.domain [:port]/path/ filenameWhere scheme is one of the following:

file afileonyourlocalsystem

ftp afileonananonymousFTPserver

http afileonaWorldWideWebserver

gopher afileonaGopherserver

WAIS afileonaWAISserver

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>

Web Technology

74

Name attributeUsingnamed anchorswe can create links that can jumpdirectly into a specific section on a pagewithin thedocument.

<a name=”go to second chapter>”4.2 Formatting</a>

5.6 Background GraphicsIf you want to include a background, make sure your text can be read easily when displayed on top of the image. Backgroundimagescanbeatexture(linenfinishedpaper,forexample)oranimageofanobject(alogopossibly).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 andrepeatsitacrossanddowntofillyourbrowserwindow.Insumyougenerateoneimage,andthebrowserreplicatesitenoughtimestofillyourwindow.Thisactionisautomaticwhenyouusethebackgroundtagshownbelow.The tag to include a background image is included in the <BODY> statement as an attribute:

<BODYBACKGROUND=”filename.gif”>Thefilename.gifshouldbeincurrentdirectory.

If the image source is on web specify its location along with its URL. Most of the browsers support gif and jpeg imagefiles.

5.6.1 Background ColourYou 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 AnimationsYou 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>

ThereaderseestheSmallImage.gifimageonthebrowserandclicksonittoopentheLargerImage.giffile.

Usethesamesyntaxforlinkstoexternalanimationsandsounds.Theonlydifferenceisthefileextensionofthelinkedfile.Forexample,

75

<A HREF=”Titanic.mov”>link anchor</A><!..specifiesalinktoamovie...>

Somecommonfiletypesandtheirextensionsare:

plain text .txt

HTML document .html

GIF image .gif

TIFF image .tiff

X Bitmap image .xbm

JPEG image .jpg or .jpeg

PostScriptfile .ps

AIFFsoundfile .aiff

AUsoundfile .au

WAVsoundfile .wav

QuickTime movie .mov

MPEG movie mpeg or .mpg

Table5.1Commonfiletypesandtheirextensions

5.8 FramesUsing 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>tagdefineswhatHTMLdocumenttoputintoeachframe•The<frameset>tagdefineshowtodividethewindowintoframes•Eachframesetdefinesasetofrowsorcolumns•The values of the rows/columns indicate the amount of screen area each row/column will occupy•TheattributesrccanbeanURL/oranyvalidhtmlsourcefile•The 100% frameset represents the total browser window area•<noframes>definesnoframesectionforthebrowserswhichdonothandleframes.•

Web Technology

76

Fig. 5.4 Vertical frame set

Fig. 5.5 Horizontal frame set

77

Fig. 5.6 Mixed frame set

Fig. 5.7 Inline frames

5.9 TablesTables 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 thefollowingtable,thefirstcolumncontainstheheaderinformation,eachrowexplainsanHTMLtabletag,andeach cell contains a paired tag or an explanation of the tag’s function.

Web Technology

78

General Table Format:

<TABLE><!--startoftabledefinition--><CAPTION> caption contents </CAPTION><!--captiondefinition-->

TR><!--startofheaderrowdefinition--><TH>firstheadercellcontents</TH><TH> last header cell contents </TH></TR><!--endofheaderrowdefinition-->

<TR><!--startoffirstrowdefinition--><TD>firstrow,firstcellcontents</TD><TD>firstrow,lastcellcontents</TD></TR><!--endoffirstrowdefinition-->

<TR><!--startoflastrowdefinition--><TD>lastrow,firstcellcontents</TD><TD> last row, last cell contents </TD></TR><!--endoflastrowdefinition--></TABLE><!--endoftabledefinition-->

Fig. 5.8 Browser output of table with caption

79

Table Elements

Elements Description

<TABLE> ...</TABLE>

DefinesatableinHTML.IftheBORDERattributeispresent,yourbrowserdisplays the table with a border.

<CAPTION> ...</CAPTION>

Definesthecaptionforthetitleofthetable.Thedefaultpositionofthetitleiscentered 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> Specifiesatablerowwithinatable.Youmaydefinedefaultattributesfortheentirerow:ALIGN(LEFT,CENTER,RIGHT)and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information.

<TH> ... </TH> definesatableheadercell.Bydefaultthetextinthiscellisboldandcentered.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.Bydefault the text in this cell is aligned left andcentered 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:Attributesdefinedwithin<TH>...</TH>or<TD>...</TD>cellsoverridethedefaultalignmentset 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>tagsmustsurroundtheentiretabledefinition.

ThefirstiteminsidethetableistheCAPTION,whichisoptional.Thenyoucanhaveanynumberofrowsdefinedby the <TR> and </TR> tags.

Withinarowyoucanhaveanynumberofcellsdefinedbythe<TD>...</TD>or<TH>...</TH>tags.Eachrowofa 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.

Web Technology

80

5.9.1 Tables for Non tabular InformationSome 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:<table border=”9”><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>

81

Fig. 5.9 Output for the program

5.10 ListsLists display the content in a compact tight format and increase the comprehension of the presentation content. There are three types of lists.

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

DefinitionListsAdefinitionlistisnotalistofitems.Thisisalistoftermsandexplanationoftheterms.Adefinitionliststartswiththe<dl>tag.Eachdefinition-listtermstartswiththe<dt>tag.Eachdefinition-listdefinitionstartswiththe<dd>tag.Insideadefinition-listdefinition(the<dd>tag)youcanputparagraphs,linebreaks,images,links,otherlists,etc. They get properly indented. Try the following program: ypical outputs are shown in boxes

Web Technology

82

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

83

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

Web Technology

84

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

<h4>ADefinitionList:</h4><dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl></body></html><!..Thisprogramtypesoflistelements…>

5.11 FormsForms can be used to gather information from users. To be able to use forms, the server on which your site is located mustprovideCGIcapabilities.CGIisasystemoffilesthatprocessdatareceivedfromforms.ThepopularCGIscripts are perl, php

Form AttributesThere are two form attributes such as, method & action There are two methods used by browsers to send information toaserver.TheyarePostandGet.Thesearespecifiedincodeas:

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

85

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

InputTo query the web or submit information to the web, Forms provide a very user-friendly interface. The most used formtagisthe<input>tag.Thetypeofinputisspecifiedwiththetypeattribute.Themostcommonlyusedinputtypes are explained below. The input tag and its attributes:

Text, name:•<inputtype=”text”name=”firstname”>Radio, name, value:•<input type=”radio” name=”sex” value=”male”> MaleCheckbox, name:•<input type=”checkbox” name=”bike”>I have a bikeType, value:•<input type=”submit” value=”Submit”>Drop-down box Drop-down box is a selectable list ;•<select name><option value>Textarea•<textarea>definesamultilinetextcontrol</textarea>

Examples:Text, name FieldsTextfieldsareusedwhenyouwanttheusertotypeletters,numbers,etc.inaform.

<form>First name:<inputtype=”text”name=”firstname”><br>

Last name:<input type=”text” name=”lastname”></form>

Web Technology

86

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

CheckboxesCheckboxes 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 ButtonWhentheuserclicksonthe“Submit”button, thecontentof theformissent toanotherfile.Theform’sactionattributedefinesthenameofthefiletosendthecontenttothewebserver.Thefiledefinedintheactionattributeusuallydoessomethingwiththereceivedinput.Ifyoutypesomecharactersinthetextfieldabove,andclickthe“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>

87

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 commentsIn not more than ten lines</p><textarea rows=”10” cols=”30”></textarea></body></html>

Web Technology

88

5.12 Image mapsImagemaps (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 sitesisapain-havingwaitedaconsiderabletimefortheimagetodownload,thefirsthurdletoovercomeisoftenfiguringoutwhattheymean.ImagemapsallowuserstoclickonaparticularspotinanimagetoretrieveanotherHTMLdocumentortorunaspecifiedscriptClient-SideImagemapsWithclient-sideimagemaps,theMAPthatrelatespartsoftheimagetodifferentURLsisstoredinthecurrentfile.Thissavesaroundtriptotheserver,andshould 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 namespecifiesthenameofthemapsothatitcanbereferencedbyanIMGelement.

The shapegivestheshapeofthisarea.Currentlytheonlyshapedefinedis“RECT”.

The COORDS attributegives 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 attributeindicatesthatclicksinthisregionshouldperformnoaction.AnHREFattributespecifieswhereaclickinthatareashould lead.

5.12.1TheUsemapAttributeinAnIMGElementIt indicates that it is a client-side image map. It can be combined with the ISMAP attribute to indicate that the image canbeprocessedaseitheraclient-sideorserver-sideimagemap.Theargumentspecifieswhichmaptousewiththe 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 “clickableimage”.ThepixelcoordinatesofthecursorwillbeappendedtotheURL(aftera“?”)specifiedintheanchoriftheuserclickswithintheismapimage.You’llneedtospecifya‘map’file,similartothefollowing(server-dependent): default http://xyz.com/

89

rect http://Xyz.com/Location/Maps/ 0, 0 459,29rect http://Xyz.com/Gallery/ 0,30 67,59rect http://Xyz.com/Authoring/Graphics/ 60,30 139,59rect http://Xyz.com/Vlib/Internet/Jobs.html 140,30 179,59rect http://Xyz.com/Reference/Library/ 180,30 239,59rect http://Xyz.com/URLy.html 240,30 285,59rect http://Xyz.com/Location/Search/ 286,30 341,59rect http://Xyz.com/avcs/Stats/Top/ 342,30 397,59rect 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 ProcessingThe 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 allowssomeonevisitingyourWebsitetorunaprogramonyourmachinethatperformsaspecifiedtask.

Gateways are programs, which handle information requests and return the appropriate document or generate a documentonthefly.Yourservercanserveinformation,whichisnotinaformreadablebytheclient(Example,anSQL 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 canbewritten in any language,whichproduces an executablefile.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 speakUNIX.RememberUNIX isCase sensitive!Some servers allowyourCGIprograms to be anywhere inyourwebdirectories,solongasthefilenameendsin“.cgi”.Othersrequireyoutoputthemonlyinthe“/cgi-bin”directory.Checkwithyoursystemadministrator.Now,createafilecalledHello.cgi:Usingchmodcommandmakethisfileexecutable.

Web Technology

90

#!/usr/bin/perl$t=“HelloWorld!”;print <<EOT;Content-type: text/html<Title> $t </Title><H1> $t </H1>EOT

ThefirstlinemustcontainthepathtoyourPerlinterpreter.ScalarvariablesnamesinPerlstartwiththe“$”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.

ThefirstlineprintedisanHTTPheadertotellthebrowserthatanHTMLfileiscoming.(HTTPheaderlinesmustalways be separated by a blank line from actual data).

ThedatasentisavalidHTMLdocument.ThePerlinterpreterreplaces“$t”with“HelloWorld!”.

Create a link to it like this:

<a href=”Hello.cgi”>Hello.cgi</a>ClickonHello.cgifile,andifall’swell,thescriptshouldrespondwith“HelloWorld!”

5.13.2 Structure of a CGI ScriptHere’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 youdefinedintheINPUTtags(orSELECTorTEXTAREAtags),andthevaluesarewhatevertheusertypedinorselected.(Userscanalsosubmitfileswithforms).

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

91

For GET submissions, it’s in the environment variableQUERY_STRING.

For POST submissions, read it from STDIN. The exact number of bytes to read is in the environment variable CONTENT_LENGTH.

(POSTismoregeneral-purpose,butGETisfineforsmallforms.)Sending the Response Back to the User

First, write the line Content-type: text/htmlplus 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’regeneratingHTMLcodeonthefly.It’snothard;it’sactuallyprettystraightforward.HTMLwasdesignedto 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 STDOUTprint <<EOF ;<html><head><title>CGI Results</title></head><body><h1>Hello, world.</h1></body></html>EOFexit ;

5.13.3 CGI For MailOne of the most common uses of a CGI script is to send mail form data to an email address. Upon completion the userwillreceiveafeedbackindicatingthatmailhasbeensuccessfullydelivered!

5.13.4 SecurityA 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-printablecharacters).Yoursecurityshouldn’trelyonfieldshavingcertainvalues,orevenexistingornotexisting.

Web Technology

92

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 DocumentsHTML gives you the developer a certain level of control over the formatting of a document. You can set headings <h1>,<h2>...andsoon),maketextbold<b>oritalic<i>,definelists(<ul>,<ol>),andsoforth.However,thislevelof 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.

CSSshatterstheHTMLbarrierbyputtingatthedeveloper’sdisposalasetofadditionalpropertiesspecificallygeared 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 declarationOR 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:

UsingInlineStylesTouseaninlinestyle,youadda<STYLE>attributetoaspecificinstanceofanHTMLelement.Thefollowing•syntax:<b style=”colour: #FF0000”>Colour Me RED</b>.•Which would render like this: Colour Me RED In red colour•AninlinestylemaybeappliedtoanyHTMLelementandmodifiesonlythespecificinstance(occurrencein•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 somewhatdifficulttomaintain,becausetheCSSpropertiesarescatteredaroundmanypagesinyourwebsite.

UsingEmbeddedStyleSheetsTouseanembeddedstylesheet,youdefineastyleblock(delimitedbythe<styletype=”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 eachruledefinesastyleforanHTMLelementorgroupofelements.Astylerulehastwoparts:

AselectorthatidentifiesaHTMLelementorgroupofelements.•A declaration of the style properties to be applied to that selector•

93

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.

UsinglinkedstylesheetsYoucankeepyourstylesheetsinaseparatefileandlinktoirfromadocumentorsetofdocuments,usinga<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 thatthestylerulesarenotenclosedin<styletype=”text/css”></style>andcomment<!---->tags.Linkingtoanexternal sheet allows the developer to apply a set of rules across a group of HTML documents, thus extending the benefitsofembeddedstylesheetstoasetofpages.

UsingimportedstylesheetsAnexternalstylesheetmayalsobeimportedintoadocumentbyusingthe@importpropertyinastylesheet:@import:url(stylesheets.css).The@importtagshouldappearatthebeginningofastyleblockoronalinkedsheet,beforeanydeclarations.Rulesinimportedstylesheetsareappliedbeforeotherrulesdefinedforthecontainingstylesheet, putting them at the bottom of the “pecking order’ of the imported sheet.

CLASS as selectorIf 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”><!--.clsRed {colour:red;}--></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 tagsThe 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)

Web Technology

94

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(movesthefirstletterofeachparagraphinxamountofpixels)line-height (places space between the lines of text)margin-right (moves the text and graphics to the rightmargin-left (moves the text and graphics to the left)…………Seethepower!

Here is how a paragraph using all of the CSS tags that are listed abovewould look. This embedded style coding would be placed in the HEADsection of the page that you are embedding this style.<style type=”text/css”><!--p.neat {font-family: verdana, arial, helvetica; font-style: normal;font-weight: normal; colour: #000000; font-weight: bold;letter-spacing: 5px; text-decoration: line-through;text-align: justify; text-indent: 25px; line-height: 25px;margin-right: 65px; margin-left: 65px}--></style>

Thus Web browser merges the contents of your Web documents (in anHTMLfile)withthespecification(inaCSSfile)ofhowtheHTMLelements should look. The result in the browser window is your content,but altered in appearance by the style sheet.

StyleSheetUseforInformationProducersBecause any HTML document can link to a style sheet, a style sheet gives you a single place to specify the appearance ofanentiresetofWebpages.Thus,youcanusestylesheetstoefficientlycreateaconsistentlookandfeelforyourWeb pages and change this look and feel quickly and easily.

Forexample,manyHTMLwritersliketoindentthefirstlineofeachparagraphbyfivespaces.Todothis,theywouldplacethe&nbsp;entityfivetimesatthestartofeachparagraph.ThisworkedfineforpagesgeneratedbyHTML editors, or even on a small scale for hand-prepared HTML pages.

Butwhatifthewebdesignerdecidedthattheparagraphsshouldnothavethefirstlineofeachparagraphindented?It would be a laborious process to have to go through all the pages of the web to remove the &nbsp; 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 consumersThe 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 currentWebbrowsersoftware.Withalittlecommonsenseandcreativity,however,you’llfindthatyoucanstillmeet the needs of users who cannot use the style sheets.

95

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.

Withstylesheets,youhavetheabilitytofiddlewiththeappearanceofeveryHTMLelementinyourdocument.Foraesthetic 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.

OveraperiodoftimeyouwillCreateYourOwnStyle!

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.

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

TheCSSfileinthisexamplecreatestwoclassesoftheP(paragraph)element:thewarningclassandthedangerclass.Notethattheactualclassnameis“warning,”not“P.warning.”The“P.warning”syntaxisusedintheCSSfileto 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>

Web Technology

96

ACSSfile“mystyle.css”containsthis

AnHTMLfile“hellostyle.html”contains this

Displayed in a Web browser,hellostyle.html looks something like this:

H1 {font-family: rockwell, serif;colour: green; }

P.danger { colour: red; font-weight: bold; text-decoration:underline; }

P.warning { colour: purple;font-weight: bold; }

<HTML> <HEAD><TITLE> Style SheetDemonstration </TITLE><LINK rel=”stylesheet”href=”mystyle.css”type=”text/css”></HEAD><BODY><H1> Our Exciting Story</H1><P> We started to dock at thestation before we realisedwhat was happening. </P><P class=”warning”> Alienapproaching!</P><P> The capsule on the weirdcraft started emitting a beamof some sort. </P><P class=”danger”>Destructionimminent!</P></BODY> </HTML>

Our Exciting Story

We started to dock at the station before we realised what was happening.Alienapproaching!The capsule on the weirdcraft started emitting a beam of some sort.Destructionimminent!

A html example using back ground colour<html><head><title>Myfirstprogram</title></head><body bgcolour=”yellow”><h2>Look:ColouredBackground!</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 ><h2>This is heading 2</h2><hr size=19 NOSHADE ><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>Don’t use heading tags for thetext to display in bold or something like that

97

</body></html>

Imagefileasbackground.Iftheimageissmallerthanbrowserscreen then the image Tiles.<html><head><title>Page with background image</title></head><body background=”background.jpg”><!--Thisgiffileshouldbeinthecurrentdirectoryofyoursystem--><h1>Abackgroundimage!</h1><p>gifandjpgfilescanbeusedasHTMLbackgrounds.</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_subscript<br>This text contains^superscript

Web Technology

98

<hr><pre>This ispreformatted text.It preserves both spacesand line breaks.</pre><hr><p>The pre tag is good for displaying computer code:</p><pre>for i = 1 to 10print inext 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><!--Thegifimageshouldbeavailableonyoursystem--></p></body></html>

Frameset tagsBefore writing code for mixed frameset, create three different htmlfilesframe_A,frame_Bandframe_Cwithcodedepictedinthefollowing 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”>

99

<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><table border=”1”><tr><td>1000</td></tr></table><h4>One row and three columns:</h4><table border=”1”><tr><td>ABC</td><td>DEF</td><td>GHI</td></tr></table><h4>Two rows and three columns :</h4><table border=”1”><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>

Web Technology

100

Table with different tags<html><body><table border=”1”><tr><td><p>This is a paragraph</p><p><i>Anotherparagraph!</i></p></td><td>A table inside a table:<table border=”1”><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 textand password forms</p></body></html>

101

Forms with mailto option<html><body><formaction=”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>

Web Technology

102

SummaryHTML 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, •andthelocationofthefile.Usingafeaturecalledtiling;abrowsertakestheimageandrepeatsitacrossanddowntofillyourbrowser•window.Mostofthebrowserssupportgifandjpegimagefiles.•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 •aspecifiedscriptClient-SideImagemaps.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.•CSSshatterstheHTMLbarrierbyputtingatthedeveloper’sdisposalasetofadditionalpropertiesspecifically•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.

ReferencesWillard, 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 ReadingShelly, 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.

103

Self AssessmentWhich of the following statements is false?1.

HTML stands for Hyper Text Markup Language.a. AnHTMLfileisatextfilecontainingsmallmarkuptags.b. AnHTMLfilemusthaveanhtmorhtmlfileextension.c. HTML tags are case sensitive.d.

Each HTML document consists of _______ and body tags.2. wordsa. headb. tailc. browserd.

Hyperlinks are created using ________ tags.3. anchora. spaceb. displayc. case sensitived.

Which of the following is not included in URLs?4. Type of resource being accesseda. The address of the serverb. Thelocationofthefilec. Sample computer coded.

Which of the following is used to display multiple html documents in same browser window?5. Forma. Hyperlinkb. Framec. URLd.

Some HTML authors use ___________ to present non-tabular information.6. tablesa. framesb. formsc. linksd.

___________isasystemoffilesthatprocessdatareceivedfromforms.7. POSTa. GETb. CGIc. GCId.

Web Technology

104

The two methods used by browsers to send information to a server are ___________ and Get.8. framesa. postb. formc. imagemapsd.

___________are clickable graphics which can be used to help create a site identity and give visual impact.9. Framesa. Formsb. Imagemapsc. Hyperlinksd.

Which of the following is a simple protocol that can be used to communicate between Web forms and your 10. program?

POSTa. GETb. CGIc. GCId.

105

Chapter VI

Client and Serverside Scripting

Aim

The aim of this chapter is to:

introduce client and serverside scripting•

elucidate java server pages•

explain the JSP tags•

Objectives

The objectives of this chapter are to:

recognise data types•

determine elements of java script•

elucidate java script•

Learning outcome

At the end of this chapter, you will be able to:

understand java script objects•

identify the various programs used for various commands•

understand diff• erent web technologies

Web Technology

106

6.1 IntroductionJava 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.JSPwasdevelopedbySunMicrosystemstoallowserversidedevelopment.JSPfilesareHTMLfileswithspecial 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 theJ2EEspecification.JSPallowcomponentreusebyusingJavabeansandEJBs.ASPprovidestheuseofCOM/ ActiveX controls.

Mac OS

Client Web serverTypical Web server

supporting JSP

JSPfilesstored here

INTERNET

Urix (Apache Web server)

Oracle Database

JSP Servlet Engine

Windows 98

Linux

Fig.6.1AwebserverthatsupportsJSPfiles.

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

107

Advantages of JavaYoucantakeoneJSPfileandmoveittoanotherplatform,webserverorJSPServletengine.HTMLandgraphicsdisplayed 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 browser1. Web browser request

9. HTML sent to browser

8. HTML: (Servlet Output)

INTERNET

2. JSP request send to Web browser

3. Send to JSP Servlet Engine

Web Server

JSP file

JSP Servlet Engine

4.ParseJSPfile

5. Generate Servlet Source Code

6. Compile Servlet source code into class

7. Instantiate Servlet

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. TheseJSPtagscancontainJavacode.TheJSPfileextensionis.jspratherthan.htmor.html.TheJSPengineparsesthe.jspandcreatesaJavaservletsourcefile.Itthencompilesthesourcefileintoaclassfile;thisisdonethefirsttimeandthiswhytheJSPisprobablyslowerthefirsttimeitisaccessed.Anytimeafterthisthespecialcompiledservlet 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.•TheWebserverrecognisesthatthefilerequiredisspecial(.jsp),thereforepassestheJSPfiletotheJSPServlet•Engine.IftheJSPfilehasbeencalledthefirsttime,theJSPfileisparsed,otherwisegotostep7.•ThenextstepistogenerateaspecialServletfromtheJSPfile.AlltheHTMLrequiredisconvertedtoprintln•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.•

Web Technology

108

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•Createyourfirstprogramunderthedirectory\tomcat\webapps\(allyourprogramsshouldresidehere!)•Callitviathebrowser:typehttp://localhost:8080/firstjsp.jsp•

6.2.2UsingJSPTagsDeclaration tag ( <%! %> )Thistagallowsthedevelopertodeclarevariablesormethods.Beforethedeclarationyoumusthave<%!Andattheend 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:<%!privateintcounter=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–filestobeincluded.•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 languagethefileuses.<%@pagelanguage=“java”%>

extends Superclass used by the JSP engine for the translated Servlet.<%@pageextends=“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.<%@pageimport=“java.util.*”%>

session Does the page make use of sessions. By default all JSP pages have session data available.Thereareperformancebenefitstoswitchingsessiontofalse.Defaultisset to true.

109

buffer ControlstheuseofbufferedoutputforaJSPpage.Defaultis8kb.<%@pagebuffer= “none” %>

autoFlush Flush output buffer when full.<%@pageautoFlush=“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 addinformation/document for a page. Typically used to add author, version, copyright and date info.<%@pageinfo=“it&webdesign,copyright2005.“%>

errorPage Differentpagetodealwitherrors.MustbeURLtoerrorpage.<%@pageerrorPage= “/error/error.jsp” %>

IsErrorPage ThisflagissettotruetomakeaJSPpageaspecialErrorPage.Thispagehasaccessto the implicit object exception.

contentType Set the mime type and character set of the JSP.

Table 6.1 Different attributes

Includedirective:AllowsaJSPdevelopertoincludecontentsofafileinsideanother.Typicallyincludefilesareusedfor navigation, tables, headers and footers that are common to multiple pages.

<%@includefile=“include/privacy.html%>Thisincludesthehtmlfromprivacy.htmlfoundintheincludedirectoryinto the current jsp page.<%@includefile=“navigation.jsp%>Toincludeanavigationmenu(jspfile)foundinthecurrentdirectory.

Tag Lib directive: A tag lib is a collection of custom tags that can be used by the page.

<%@tagliburi=“taglibraryURI”prefix=“tagPrefix”%>

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 tagThere are three main roles of action tags:

enable the use of server side Javabeans•transfer control between pages•browser independent support for applets.•

Web Technology

110

6.2.3 JavabeansA 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 requestsession – bean lasts for the client session.application – bean instance created and lasts until application ends.

Code examples:helloworld.jsp

<html><head><title>MyfirstJSPpage</title></head><body><%@pagelanguage=”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

111

<%= counter %></BODY></HTML>

6.2.4 Implicit ObjectsSo 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 objectRepresentstheJSPpageandisusedtocallanymethodsdefinedbytheservletclass.

ConfigobjectStorestheServletconfigurationdata.

Request objectAccess 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 JavaScriptJavaScript 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. OryoucanuseJavaScripttoperformanaction(suchasplayanaudiofile,executeanapplet,orcommunicatewitha plug-in) in response to the user opening or exiting a page.

Web Technology

112

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 inresponsetospecifiedevents,suchasausers’mouseclickorscreenexitandentry.

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 commentfieldstoensurethatoldbrowsersthatdonotrecogniseJavaScriptdonotdisplayyourJavaScriptcode.Themarkuptobeginacommentfieldis<!--whileyoucloseacommentfieldusing//-->.

<script language=”JavaScript”><!--document.write(“HelloWorld!”);//--></script>

AttributeoftheSCRIPTtag,SRC,canbeusedtoincludeanexternalfilecontainingJavaScriptcoderatherthancode 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-inobjectsanduserdefinedobjects.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.

VariablesAJavaScriptidentifier,orname,muststartwithaletterorunderscore(“_”);subsequentcharacterscanalsobedigits (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:

113

function newFun(){ var loop=1; // local variabletotal=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 typesNumbers 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“HelloWorld!”Stringsareenclosedinquotes.Usesinglequotestotypestringsthatcontaindouble•quotation marks inside their strings and vice versa.Objects myObj = new Object();•NullMeansvoid,nothing-notevenzero!•UndefinedAvaluethatisundefined.•

OperatorsTake 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”anunaryoperatorreturnstrueifthenegationoftheoperandistrue(Example,theoperandisfalse).

Comparison Operators:= = “Equal to” returns true if operands are equal.!=“Notequalto”returnstrueifoperandsarenotequal.“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

Web Technology

114

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(firstmatch): 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.

continueAbortsthissingleiterationoftheloop,returnsexecutiontotheloopcontrol,meaningtheconditionspecifiedby 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 anobject 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 specifiedobjectasthereference.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 canbemadeassubroutines.Wheneverfoundneeded,callthem.InJavaScriptafunctiondefinitiondoesthis.This way it also increases the code comprehension and easy to localise the problems that may arise during its usage.

115

Reusability:• Avoids duplicated effort. Programmer need not start from scratch. Make use of existing components that are time tested and buildover them.

Reliable software: In software engineering point of view reliablesoftware comprised of highly cohesive modules.Functiondefinition: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’sbesttodefinethefunctionsforapageintheHEADportionofadocument.SincetheHEADisloadedfirst,thisguarantees that functions are loaded before the user has a chance to do anything that might call a function. Alternately, someprogrammersplacealloftheirfunctionsintoaseparatefile,andincludetheminapageusingtheSRCattributeoftheSCRIPTtag.Eitherway,thekeyistoloadthefunctiondefinitionsbeforeanycodeisexecuted.

function blinkbold(message) {document.write(“<blink><strong>”+message+”</strong></blink>”);}

It is invoked by simply specifying it along its parameters.Blinkbold(“BlinkBoldly!”);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 byresult = to_power_of(4,3);

Onemoreinterestingpoint!InJavaScriptmostofthetimesfunctionsarecalledbyeventhandlers

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 canthinkthisworldcomprisedofobjects.Everyobjecthasitsownpropertiesanditsownwell-definedfunctions(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.

Web Technology

116

JavaScript Objects:There are three types of JavaScript Objects:

Browser Objects•Utility Objects•UserdefinedObjects•Browser Objects:•

ThesearedefinedinDOM.Wheneverhtmltags<script>….</script>areencountered,browsermakesuseofthesepredefinedobjects.

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

Eachoftheseobjectshastheirownproperties,whichdefinesthecurrentstateoftheobject.Theseobjectscanbeaccessed by using . (dot) operator. For ex: objectname.propertyname

document.bgcolr // Back ground color of the current web pagelocation.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//Navigatesthebrowsertoalocationstoredinthehistoryfile.

window.alert // Displays an alert boxwindow.open // Opens a new browser window

UtilityObjects: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 newoperatorvar 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: lengthEx: str.length // returns the length of the string that str has

117

string object methods:big() Surrounds the string with html <big>…</big> tagblink() Surrounds the string with html <blink>…</blink> tagbold() Surrounds the string with html <bold>…</bold> tagcharat(n)Returnsthecharacteratthespecified‘n’indexitalics() Surrounds the string with html <I>…</I> tagtolowercase() Makes the entire string to lower casetouppercase() Makes the entire string to upper case

math object:Using math object various math operations can be performed. math object properties:

•EEuler’sconstantbaseofthenaturallogarithms••LN10Thenaturallogarithmof10(base2)••LN2Thenaturallogarithmof2(base2)••PIThevalueofpiei.e.22/7•

math object methods:abs() Calculates the absolute valueceil() Returns the lowest integer greater than or equal to the givennumbercos() Cosine of the given numberfloor()Returnsthelowestintegerlessthanorequaltothegivennumberpow(x,n) Calculates xnrandom() Return a random number between zero and onesin() Sine of a given numbersqrt() Square root of a given numbertan() Tangent of a given numberdate object: Makes use of system clockdate object methods:getDate() Returns day of the monthsetDate() Sets date of the monthgetHours() Returns hours of the daysetHours() Sets hour of the daygetTime() Returns lapsed time from 1-1-1970 in milli secondsSetTime() Sets time in milli seconds lapsed from 1-1-1970

Userdefinedobjects:JavaScriptallowscreatinguser-definedobjectsfunction stud (sname, srollno, sgroup, srank) {this.sname=sname;this.srollno=srollno;this.sgroup=sgroup;this.srank=srank;}

Theabovedefinitioncreatesanobjectunderthenamestud.Theinstanceoftheobjectiscreatedinthefollowingway….

Student1 = new stud (“Ram”, 1234, “mpc”,104);Student2 = new stud (“Krishna”, 4567, “bpc”, 87);

Web Technology

118

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.

Anevent,then,istheaction,whichtriggersaneventhandler.TheeventhandlerspecifieswhichJavaScriptcodetoexecute. Often, event handlers are placed within the HTML tag, which creates the object on which the event acts

JavaScriptdefineseventsformostofthemajorobjectsfoundinwebpageincludingimagemaps,formsetc.

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> <FORMINPUTTYPE=“BUTTON”VALUE=“Clickme!” onClick=“Clickhandling!”>…...</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

119

First JavaScript program<HTML> <HEAD> <TITLE>Simple Javascript</TITLE> </HEAD> <BODY> <H1>First Example of JavaScript</H1> <SCRIPT LANGUAGE=”JavaScript”> <!--hidefromoldbrowsersbyembeddinginacomment

document.write(“Lastupdatedon”+document.lastModified)// end script hiding --></SCRIPT><div style=”display: block; font-family: Verdana, Geneva, Arial;font-size: 10px”>

This simple program demonstrates using of JavaScript andobject.</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”>ThisprogramusesJavaScript’salertwindow!</div></BODY></HTML>

Usingforloop<HTML><HEAD><TITLE>Computing Factorials</TITLE></HEAD><BODY><H1>Another Example of JavaScript</H1><SCRIPT LANGUAGE=”JavaScript”>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><div style=”display: block; font-family: Verdana, Geneva, Arial; fontsize:10px”>This program demonstrates the usage of for loop in calculating

Web Technology

120

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 timedocument.write(d.toLocaleString()); } // converts a date to a string</SCRIPT></HEAD><BODY><H1>The date and time are</H1><SCRIPT LANGUAGE=JavaScript>outputDate();</SCRIPT><div style=”display: block; font-family: Verdana, Geneva, Arial; fontsize:10px”>Thisprogramillustratesuseofuserdefinedfunction</div></BODY></HTML>

Usageofalert,confirmandpromptbuttons<HTML><HEAD><TITLE>Exampleofalert,confirm,prompt</TITLE><SCRIPT LANGUAGE=JavaScript>function alertUser() { alert(“An alert box contains an exclamationmark”);}functionconfirmUser(){varmsg=“\npleaseconfirmthatyouwant\n”+“to test another button?”;if(confirm(msg))document.write(“<h2>YouselectedOK</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><INPUTTYPE=buttonVALUE=”Clickheretotestconfirm()”onClick=”confirmUser()”><BR><INPUT TYPE=button VALUE=”Click here to test prompt()”onClick=”promptUser()”></FORM><div style=”display: block; font-family: Verdana, Geneva, Arial; fontsize:10px”>ThisprogramusesformsalongwithJavascript!</div></BODY></HTML>Typical Browser output (Buttons only):

121

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><div style=”display: block; font-family: Verdana, Geneva, Arial; fontsize: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”; banners[1] = “banner1”; banners[2] = “banner2”; 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)

Web Technology

122

{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) {if (document.images) {document.images[imgName].src=offImages[imgName].src;}}if (document.images) {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=docsborder=0alt=documents></A><A HREF=”subdocs/tech.html” onMouseOver=”highlight(‘tech’)”// sub directory in current locationonMouseOut=”unhighlight(‘tech’)”>

<IMG SRC=”images/tech_off.gif” height=25 width=25 name=techborder=0alt=tech_reports></A> // besure to have images in images directory</P></BODY></HTML>

Simple frame<HTML><HEAD><TITLE>Simple Frame Ex</TITLE></HEAD>

123

<FRAMESET rows=”50%,50%”><FRAME src= red.html name=frame1> //red.html must be incurrent directory<FRAMESET cols=”30%,70%” ><frame src= green.html name=frame2 > // green.html must be in currentdirectory<frame src= blue.html name=frame3>// blue.html must be in currentdirectory</FRAMESET><NOFRAMES>You need frames to view this document</noframes></FRAMESET></HTML><div style=”display: block; font-family: Verdana, Geneva, Arial; fontsize:10px”>Blank Blank Blank</div>

Usingdocumentobject<HTML><HEAD><TITLE>Using the Document Object</TITLE><SCRIPT LANGUAGE=”JavaScript”>function SetColors(){document.fgColor = “white”;document.bgColor = “black”;}</SCRIPT>

</HEAD><BODY><SCRIPT LANGUAGE=”JavaScript”>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>

UsingforInputvalidation<html><head><title>Using for Input validation</title><script language=JavaScript>function checkEmpty()

Web Technology

124

{/*Thisfunctionchecksallofthefieldsoftheformandnotifiestheclientwhich,ifany,formfieldsareempty.Itreturnsa1ifallthefieldsare full, and a 0 otherwise.*/varfirstname_filled=false;varlastname_filled=false;varstreetaddress_filled=false;varcity_filled=false;varphonenumber_filled=false;varyouremail_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(“Nomissingfields”);return(true);}else{/*checkwhichfieldsaremissing*/varalertstring=”Thefollowingfieldsaremissing:\n”;if(!firstname_filled)alertstring=alertstring+“firstname\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);}}

125

</script></head><BODY bgcolor=”#ffffee”> <pre>Explanation:Eachfieldischeckedforamissingvalue,andifemptyabooleanvariableisset.Astringiscreatedofallemptyfieldsand output.</pre><hr><H1><FONT color=”#000000”>Checking For Empty FormFields</H1></FONT><HR>Typeinthedatayouwishtosavetoafileontheserver.<FORM NAME=”myform” METHOD=”GET”>Firstname:<INPUTtype=”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><SCRIPT LANGUAGE=”JavaScript”>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>

Web Technology

126

</HTML>XIII). Using Date object<HTML><HEAD><TITLE>Using the Date Object</TITLE><SCRIPT LANGUAGE=”JavaScript”>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><SCRIPT LANGUAGE=”JavaScript”>var timenow = new Date;document.write(timenow);thisClock = newClock(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 aservlet engine like Tomcat. They will not work if you are viewing thesepagesviaa“file://...”URL.Number guess program<%@pageimport=“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!Yougotit.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>

127

<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><%@pagesession=”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>

Web Technology

128

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<%@taglibprefix=”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!”Thecustomtagisgeneratedfromatagfileinthe/WEB-INF/tagsdirectory.</p><p>Notice that we did not need to write a TLD for this tag. We justcreated /WEB-INF/tags/helloWorld.tag, imported it using the taglibdirective,andusedit!</p><br><b><u>Result:</u></b><tags:helloWorld/></body></html>

helloWorld.tag<%--helloworldtag!--%>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.

129

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 nothandledin<c:if>).Theydoserveasexamplestoshowpluginsinaction(justexaminethegeneratedJavafiles),and how they can be implemented.

How to write tag pluginsTo 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.

CreatetheplugindescriptorfileWEB-INF/tagPlugins.xmlThisfilespecifiesthepluginclassesandtheircorrespondingtaghandlerclasses.choose.jsp<html> <head><title>Tag Examples - choose</title> </head><body> <h1>Tag Plugin Examples - &lt;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><%@tagliburi=”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><c:when test=”${index == 4}”>Four!</br></c:when> <c:when test=”${index == 3}”>Three!</br> </c:when><c:otherwise> Huh?</br></c:otherwise> </c:choose></c:forEach> </body></html>

Web Technology

130

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 (&lt; or lt)</li> <li>Greater-than (&gt; or gt)</li> <li>Less-than-or-equal (&lt;= or le)</li> <li>Greater-than-or-equal (&gt;= or ge)</li> <li>Equal (== or eq)</li> <li>NotEqual(!=orne)</li></ul><blockquote><u><b>Numeric</b></u><code><table border=”1”><thead> <td><b>EL Expression</b></td> <td><b>Result</b></td></thead><tr><td>\${1 &lt; 2}</td><td>${1 < 2}</td></tr><tr><td>\${1 lt 2}</td><td>${1 lt 2}</td> </tr> <tr> <td>\${1 &gt; (4/2)}</td> <td>${1 > (4/2)}</td> </tr> <tr> <td>\${1 &gt; (4/2)}</td> <td>${1 > (4/2)}</td> </tr> <tr><td>\${4.0 &gt;= 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 &lt;= 3}</td>

131

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

<table border=”1”><thead><td><b>EL Expression</b></td>

<td><b>Result</b></td></thead><tr>

<td>\${‘a’ &lt; ‘b’}</td><td>${‘a’ < ‘b’}</td>

</tr><tr>

<td>\${‘hip’ &gt; ‘hit’}</td><td>${‘hip’ > ‘hit’}</td></tr><tr>

<td>\${‘4’ &gt; 3}</td><td>${‘4’ > 3}</td></tr>

</table></code>

</blockquote></body></html>

Web Technology

132

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)•NotEqual(!=orne)•

6.4 Web TechnologiesInternetThe 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)fileswithembeddedcodesforlogicalmarkup,usingtagslike<A>and</A>tostructuretextintotables,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 TechniquesGraphics 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.

133

Formanypeople,WebDesign=Graphics.Almostallwebsitesbenefitfromwell-plannedimages-especiallyiftheyare fast-loading, and the site still remains usable if the graphics are ignored, e.g. by text-only browsers and so on.

Programming and scriptingThe 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.

JavaScriptJavaScriptisNOTJAVA!Theyarequitedifferent.JavaScriptisalightweightclient-onlyscriptinglanguage,suitablefor 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 HTMLDynamic 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.

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

DatabasesThe power of the WWW comes not simply from static HTML pages - which can be very attractive, and the important firststepintotheWWW-butespeciallyfromtheabilitytosupportthosepageswithpowerfulsoftware,especiallywhen 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.

Web Technology

134

SummaryJava 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.•JavaScriptdefineseventsformostofthemajorobjectsfoundinwebpageincludingimagemaps,formsand•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.•

ReferencesSchafer, 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].

135

Recommended ReadingHanna, 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.

Web Technology

136

Self AssessmentWho developed JSP?1.

Intela. Sonyb. Samsungc. Microsoftd.

What is the full form of JSP?2. Java Script Pagesa. Java Server Pagesb. Java Source Pagesc. Java Server Programd.

_________ is the equivalent from Sun Microsystems, a comparison of ASP.3. J2EEa. HTMLb. COMc. JSPd.

Which of the following is not one of the JSP tags?4. Servlet taga. Declaration tagb. Expression tagc. Directive tagd.

____________ tag allows the developer to declare variables or methods.5. Expressiona. Declarationb. Directivec. Actiond.

_______________allowsaJSPdevelopertoincludecontentsofafileinsideanother.6. Tag lib directivea. Include directiveb. Scriptlet tagc. Javabeansd.

Which of the following is not one of the three main roles of action tags?7. Enable the use of server side Javabeansa. Transfer control between pagesb. Files are used for navigation, tables, headers and footersc. Browser independent support for appletsd.

137

There are several objects that are automatically available in JSP called ____________.8. implicit objectsa. javabeansb. ASPc. Java scriptd.

Which of the following is not one of the elements of java script?9. Variablesa. Operatorsb. Constantsc. Functionsd.

__________________ are binary operators ( they perform on two operands) for addition, subtraction, 10. multiplication, division, and modulus respectively.

Arithmetic operatorsa. Unary incrementb. Decrement operatorsc. Logical operatorsd.

Web Technology

138

Chapter VII

Web 2.0

Aim

The aim of this chapter is to:

introduce Web 2.0•

elucidate social networks and user participation•

explain internet as a platform•

Objectives

The objectives of this chapter are to:

recognise different frauds and cyber crimes•

determinethetermwebfilter•

elucidate Web 2.0 in the workplace•

Learning outcome

At the end of this chapter, you will be able to:

understandsignificanceofWeb2.0•

identify the XML syndication•

understand compromised websites•

139

7.1 Introduction: Web 2.0Web 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 PlatformWeb 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.•Combinethesedriverswiththefundamentallawsofsocialnetworksandlessonsfromtheweb’sfirstdecade,•andInthefirstquarterof2006,MySpace.comsignedup280,000newuserseachdayandhadthesecondmost•Internettraffic.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 overawordmaytriggerapop-updefinition,orhoveringoverastocktickersymbolmaybringupitscurrenttradingdata. 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) thatdefinesobjectpropertiesofthewebpage,andtheXMLHTTPRequest(XHR)objectthatmakesdynamicHTTPcalls “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 RSSBlogs,wikis,andmanywebsitessupportXMLfileformatsthatprovidesyndicationofcontent.RSS(RealSimpleSyndication)andAtomaretwoofthemostpopularformats.RSSandAtomfilesprovidethenecessaryinformationfor 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. Thenewsreadermonitorsthefeedsandidentifiesnewcontenteitherthroughascheduledormanuallytriggeredprocess.

Web Technology

140

Mashups and Shared ContentMashups 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,thereisasignificantarchitecturaldifferencebetweentraditionallinkssuchasthoseinonlinemagazinesthat 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 presentsitbacktotheuser.Thismeansthatseveralsourcesaretraffickingdatawithoutexplicituserdirection.

7.3SocialNetworksandUserParticipationUser 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)•Uploadfilesforviewinganddownloadbyothers(résumés,photos,audiopodcasts,andvideos)•

Thisuserparticipationisreflectedinthedesignofsocialnetworkingsites:Theyoperateasstructuredenvironmentsthatallowuserstomanagetheirownwebpages–oftenwithanumberofconfigurationoptionsforlookandfeelas well as various types of transaction processing.

7.4SignificanceofWeb2.0Web 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; thismakesitmoredifficultforsecuritysystemstovalidatetheintegrityofthecode.Hackersarealsoembeddingspam and malicious code into other types of content, such as instant messaging, shared video content, and business documentslikePDFandExcelfiles.

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:

141

Internet 2.0:42%ofofficeworkers18-29discusswork-relatedissuesonsocialnetworkingsites(blogs).•50% of IT managers indicate that 30% of bandwidth is social networking.•SaaS (software-as-a-service) usage is steadily increasing.•

Intranet 2.0Forrester predicts that web 2.0 intranets will be a $4.6 billion industry within 5 years•

Extranet 2.0Nearly 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.0Internet 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 tobecomemoreefficientataccomplishingmultipletasksinashorteramountoftime.Theaverageworkerspendsnearly 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 foundthatorganisationorganisations,whetherofficiallysanctionedornot,useweb2.0applicationsextensively.Thefuture 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.”

ManagedDatac enter

Outsour ceWeb Apps

Branch Office

Branch Office

Users are Everywhere

Applications are Everywhere

Malware is Everywhere

Security is Poor

Branch Office

Fig. 7.1 An enterprise without boundries

Web Technology

142

AJAX and RIAsBecauseRIAsimprovethewaypeoplefindandmanipulatecontent,completetransactions,andconsumemultimediacontent, 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, andSunJavaFXwillbeusedtoaugmentorevenreplacetraditionalenterpriseportalsandMicrosoftOfficeasInformation Workplace front-ends.

Blogs, Wikis, and FeedsBlogs 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. Butblogsaren’tenteringthroughtheCIO’soffice;theyoftenfirstappearincompaniesastheconvenientrecordsof 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 NetworksSocial 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 ChangedPerhaps 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 advantageoftheInternet’sweaknessesandtoexploitthesefortheirownprofit.This‘new’fraudincludesidentitytheft, 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).

MoreCriminalIntentforProfitoverFameA 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 aremotivatedbyfinancialgain,ratherthanpersonalreasons,”accordingtothereport,leadingtomoresophisticatedattacks that often combine different techniques and look to exploit developing technologies that are not as well protected as existing systems.

143

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 inthesoftware,find‘backdoor’weaknessesincludingunprotectedaccountsoradminaccountsthathavethedefaultpasswords, and more.

More Money, Time, and ExpertiseHacking 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 AttacksNew 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 EconomyBots 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 workofothers.Severalbotfamiliesareconsideredopensourceprojects,developedcollaborativelyandrefinedbymany.

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.

Web Technology

144

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 ThreatsMiscreants on the Internet manipulate and defraud users and organisations alike. Web 2.0 technologies introduce risksalongwithbenefits;thecorenotionofaflexibleandopenarchitectureinvitesexploitationandcompromise.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.

WantBenefitsofWeb2.0butWorriedabouttheImpactNumerous 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).

AccordingtoForresterresearch,47%oforganisationsreportedthatmalwareandvirusescausedsignificantproblems,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 significantproblemsasaresultofdataleaks,and18%experiencedcriticalbusinessdisruptions.

Web Gateways Lack Adequate ProtectionForrester 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 lastfiscalyearexclusivelyonmalwarecleanup.

Threat Focus on Email/Lack of ProductivityTraditionally,enterpriseshavefocusedonfilteringemailforvirusesorspamand/orlimitingemployeeuseoftheweb 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).

145

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 WebsitesGooglehasidentifiedmorethanthreemillionuniqueURLsonmorethan180,000websitesthatautomaticallyinstallmalwareonvisitors’machines,spamoftenisusedtodrivetraffictothesesitessimplyforthepurposeofinstallingmalware 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).

MostorganisationstodayusestaticURLfilteringandanti-virussignaturescanningattheirwebgatewayastheirprimarymeanstocombatwebthreats.Thisapproachisclearlynotsufficientasevidencedbythecontinuedplagueof malware.

ThetypeofmalwarethatmakesitpaststaticURLfilteringatwebgatewaysismostlikelyofthe“zero-day”varietyinjected into popular websites that are allowed in policies for user access. Signature scanning cannot detect zero-day attacksas,bydefinition,therearenosignaturesavailableforzero-daythreats,ortheattackusesacustomencryptionwrapper 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;andemployon-the-fly,dynamicdetectioncapabilitiessuchasbehavioralandheuristics-baseddetection.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).Becausethesearecategorisedas“good”websites,theyby-passfirewalls,staticURLfiltering,andreputation scores.Fast-fluxservicesconstantlychangeDNSrecordseveryfewminutes,or1000sofsub-domainshidethereal•site, making hostID (the host part of an Internet address) reputation databases useless to mitigate web threats.

Web Technology

146

Polymorphic malware (viruses that change with each infection) make traditional, signature-based virus detection •less and less effective.Predictabletrafficincreasestolegitimatesites,suchassportssitesbeforetheSuperBowl,presentopportunities•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 lysedanalysedforthreatsasthetrustorreputationmodelusedforemailspamfilteringdoesnotextendintothewebdomain. 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 TheideaoftheInternetasaplatform,specificallyabetaplatform,encouragesthedeploymentofbetasoftware.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 theclient,thelocalprogramsthatsupportandparsethecommandsaresusceptibletobufferoverflowsandsimilarattacks, 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 BlogsXML 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:

147

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.Readersmaysavedatalocally.BecauseRSSreadersoftensavetheirformattedfileslocally,thefilesbecomea•residentthreattotheclient.Thesefilesmaybeopenedandmanipulatedbyothersoftwareprogramsor,insomecases, may be laced with malicious code that can manipulate other local content. This amounts to privilege escalation,comparedtotypicalwebpagesthatareconfiguredtobeselfcontainedwithnodirectaccesstothelocal 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 TrackbacksWhen 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 MashupsThe 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.

InternalUsers

SpywarePhishingViruses

Intellectual Property Rogue AppsWormsBusiness Apps

CorporateNetwork

ExternalApps

Active Server Pages

Internet

SSLSSL SSLSSL

Fig.7.2SSLProvidesaPrivateLinkforLegitimateApplications,andMalware,ConfidentialData,UnsanctionedTraffic

Web Technology

148

Because SSL content is encrypted, it can’t be intercepted by security systems without being decrypted and reencrypted.Userscanbringinvariousmalware(includingviruses),accessforbiddensites,andleakconfidentialbusiness 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,encryptedtrafficmakesitdifficultforITtoassessbandwidthusageandapplyintelligentcontentcontrolpolicies to ensure maximum user productivity.

7.11.2 Data Leak VulnerabilitiesData 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 openthefloodgatesfordatatoescapeintothewronghands.Recentexamplesincludes:

320,000sensitivefileswereallegedlytransferredtoathumbdrivebyaBoeingemployeeandleakedtothe•Seattle Times 8,000 Texas A&M Corpus Christi students’ personal information, including social security numbers were lost •inMadagascarwhenaprofessorvacationingoffthecoastofAfricatookthedatawithhimonaflashdriveData 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)departmenthasgonemissingafterbeingposted to theNationalAuditOfficebya juniorofficial.(darkREADING)Some4.6mcustomersofJapanesebroadbandoutfitYahoo!BB–whichisrunbySoftbankandYahoo!–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-fivepercent ofFORTUNE®1000 companies fell victim to accidental and/ormalicious 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,theftofproprietaryinformationorintellectualpropertyaccountedformorethan74%offinanciallosses.(Lumension Security)

7.12 Blue Coat Web 2.0 Layered Security SolutionsHow 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.

Internet

ProxyAVwith Leading Anti-Malware Engines

ProxySG+ WebFilter and WebPulse Ec osyste mWorkstations

Web Traffic (inbound/outbound)

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.

149

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 effortsProactive 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. WebPulseactslikeaneighborhoodwatchprogram.EachuserrequestupdatestheWebPulseecosystemforthebenefitofallusersbyprovidingaconstantflowofuserrequestsformalwareanalysis,allowingnewsitestoberatedwithcross-categorisationsandreputationratingssogatewaypolicydecisionscanadvise,filter,orblockwebcontent.

For devices inside a network, layered defenses of a Secure Web Gateway provide a key advantage. A layered defense providesfiveimportantelementsforprotection:

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 allowedLeading anti-malware threat detection engines with heuristic/behavioral analysis to detect zero-hour threats•URLfilteringwithareal-timecontentratingservicetolimitwebexposureanddetectPhishingattacks•Webcontentcontrolsfortruefiletypedetection,activecontentandcertificatevalidations,method-levelcontrols,•contentfiltering,andactivescriptfilters;plusarobustpolicylanguageOptional 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,thatisacommonprofileforwebgatewaysdeployedoverthepastfewyears.

Five Secure Web Gateway solutions are discussed below:Preventing Malware•Dynamic URL Filtering•Preventing Data Leakage•SecuringSSLTraffic•-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 – includingthefirewallanddesktop-basedsolutions.

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.

Web Technology

150

Fourpoliciesarebrieflydescribed: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 SourcesFirstly, 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 TypesThedefenseindepthstrategycontinueswithdetailedteststopreventmisrepresentationoftruefiletypes,orcontainermismatch.Toooftentoday,maliciousexecutablecontentismisrepresentedassafefiletypessuchas“JPG”or“GIF”.Blockingthismakesuseofpolicytestscomparingtheclaimedfiletypetotheactualinitialdatainthefiles.

Validate or Remove Active ContentMobileMaliciousCode (MMC) is not an “executable” in the traditional “exe” file sense, rather it exploitsvulnerabilities 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, thishassignificantimpactontoday’sinteractiveweb2.0sites.Duetotheriskofover-blocking,thisoptionshouldbe 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 EnginesAssumingalltheabovelevelsofdefenseareapplied,asignificantreductioninmalwarecanbeachievedwithProxySGand 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.

BlueCoatrecommendsthatallobjectsbesubjectedtosuchscanningregardlessoftheirwebsiteoforigin,orfiletype. 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. Fornon-cacheableobjects,afingerprintcacheiskepttoavoidanalysingthesamefileonfrequentrequests.OnceanAV-heuristicsengineupdateoccurs,thefingerprintcachefornon-cacheableobjectsrestarts.

7.14DynamicURLFilteringwithWebPulseandWebFilterRecent 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 toavoidbeingblacklisted.Withoutsomeformofnearreal-timewebsitereputation,pre-classifiedURLlistssimplycannot keep up with this fast-changing threat landscape.

151

7.14.1WebPulseEcosystemURLCategorisingThe 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,anddynamicforURLfiltering.Real-timeratingscover98%ofobjectionablecontentsitesinmultiplelanguages, plus phishing kit detection, and the ability to search deep into translation services, image searches, and cachedsearchenginecontent,foranaccurateratingnotfoundwithstaticURLfilteringsolutions.WebPulseisavery 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 requestsfromISPdeploymentsofProxySGwithWebFilter.NootherURLfilteringsystemprovidesreal-timeratingsandisdrivenbyuserrequestsforunmatchedfilteringprotectionofweb2.0content.

Fig. 7.4 WebPulse ecosystem

7.14.2WebFilter:Filtering&BlockingUnwantedWebContentAccuratecoverageisjustasimportantasrelevantcoverageinselectingaURLfilteringsolution.Toensurethegreatestaccuracy,eachsite intheWebFilterdatabaseisclassifiedintomultiplecategories,asappropriate.ThisallowsWebFiltercustomerstodefineavirtuallyunlimitednumberof“cross-categories”viaProxySG,tofittheirspecificfilteringrequirements(forexample,MotorSports,SportsBettingandsoon).

TheBlueCoatProxySGsupportsuptothree“on-proxy”contentfilteringlistsatonce.Thisallowscustomerstoruna 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.

BlueCoatWebFilteronProxySGisautomaticallyupdatedandconfigurablebyadministrators.Allow/denylistscanbecreatedonBlueCoatProxySG,plusnewcategories,overrides,andexceptions.Administratorscandefineflexiblepoliciesusingheaderrequestelementsnotprovidedbycontentfilteringsolutions.Withtheriseofimagesearchengines,theseheadercontrolscomplementURLfilteringtooptionallyensureSafeSearchmodesarealways

Web Technology

152

enabled, no matter what the user selects. Blue Coat can also apply policy to embedded URLs commonly missed by traditionalfilteringplatforms,suchastranslationsites,archives,andimagesearches.BlueCoatcanapplypolicybased 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.

Unlikeothervendors,BlueCoatdoesnotrelyonsite-miningprocessessuchaswebcrawlerstofindnewwebsitesand 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 classificationsoftwareandhumaninspection,tocategorisesitesandreviewclassifications.WebPulsealsousesalarge 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 ProxySGBlue 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 knowingtheintegrationiscertified,andDLPcheckscanbemadeinwebtrafficanalysedbyProxySG.TheBlueCoatProxySGsupportsstandardICAP(RFC3507)andcertifiedimplementationsarecurrentlyavailableforthefollowing vendors:

DLP/ILPsolutionscertifiedandsupported:Blue Coat Data Loss Prevention•Code Green Networks•Vericept Network Monitor/Prevention•Vontu Prevent•Reconnex iGuard•Port Authority/Websense•

InspectingSSLTrafficTheBlueCoatProxySGprovidesHTTPS(orSSL/TLS)trafficinspectionatmultiplelevelstoreducewebthreatsand 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 financialsitescaninvolveservercertificatevalidationonly,whileleavingthecommunicationprivate.OrHTTPSsessions for business can be inspected for content leaving the organisation, and malware and threats entering the organisation’snetwork.Also,HTTPSservercertificatevalidationchecksareusefultoblockproxyavoidancetoolsor malware trying to call home.

Monitoring and LoggingAlong 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.

153

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,andconfigurationchangesforapplications,servers,andnetworkdevices.Itcanalsobeusedtoaid 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.

BlueCoatReporteranalysescomprehensivelogfilesfromBlueCoatProxySGinover150pre-definedreports,includingmalware,spyware,IM,P2P,andpopularsites.BeyondURLfiltering,Reporterprovidesvisibilitytowebcontent,performance,threats,andtrending,overdefinedtimeperiods.Withcomprehensive,policyenabledlogging,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.

Web Technology

154

SummaryWeb 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 •includingthefirewallanddesktop-basedsolutions.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.BlueCoatoffersapowerful,proxy-basedarchitecturethatacceleratesgoodwebtrafficandstopsmalwarefrom•entering your organisation.BlueCoatReporteranalysescomprehensivelogfilesfromBlueCoatProxySGinover150pre-definedreports,•including malware, spyware, IM, P2P, and popular sites.

ReferencesSolomon, 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].

155

Recommended ReadingGovernor, 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.

Web Technology

156

Self Assessment_______________thrives on network effects: databases that get richer the more people interact with them.1.

Web 3.0a. Web 2.0b. Web 1.5c. Web 4.0d.

Which of the following is the most popular member of a class of technologies that enable rich Internet 2. applications?

XMLa. HTMLb. HTTPc. POSTd.

The goal of ____ is to give the user an experience equal to or better than that of a desktop application.3. RIAa. AJAXb. XMLc. DOMd.

___________ combine data from multiple sites into a single user experience.4. Bloga. Wikisb. RSSc. Mashupsd.

_________ sites often use data from different sources, such as a retail store site using Google maps to display 5. locations.

Web 3.0a. Web 2.0b. Web 1.5c. Web 4.0d.

_________ provides the “active ingredient” processing capability.6. HTMLa. HTTPb. JavaScriptc. XMLd.

Which of the following is not one of the risks of XML syndication?7. Readers may save data locallya. Browser vulnerabilityb. RSS aggregators are softwarec. Content retrieval to the webd.

157

Which of the following is not one of the risks associated with mashups?8. Reliance on a third party’s security posturea. Browser vulnerabilityb. Availability issues are transitivec. Responsibility for attacks against the APId.

Which of the following is not one of the secure web gateway solution?9. Preventing Malwarea. Dynamic URL Filteringb. SecuringSSLTrafficc. Static URL Listsd.

_______________offers a powerful, proxy-based architecture that accelerates goodweb traffic and stops10. malware from entering your organisation.

Blue coata. Java scriptb. HTTPc. XMLd.

Web Technology

158

Chapter VIII

Dreamweaver

Aim

The aim of this chapter is to:

introduce Dreamweaver•

elucidate the display of Dreamweaver•

explain site management•

Objectives

The objectives of this chapter are to:

recognise the concept of Dreamweaver•

determine the usage and function of Dreamweaver•

elucidate the steps of creating new pages on Dreamweaver•

Learning outcome

At the end of this chapter, you will be able to:

understand the steps of editing images•

identify the steps of linking to other resources•

understand HTML code view in• Dreamweaver

159

8.1 IntroductionDreamweaver 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 beginWebspace• : 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 StartedThis 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,tabsappearatthebottomoftheDocumentwindowareashowingthefilenamesofallopendocuments.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.

Web Technology

160

TheSitepanelallowsyoutomanagethefilesandfoldersthatmakeupyoursite,andprovidesaviewofallthefilescontained 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 ManagementA 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.

Tohelpyoumanageyoursite,Dreamweaverdisplaysthefilesinthesiteasalistoffiles.SitescanbeseenfromtheSite 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.

Bydefaultyouhaveaccess toapublic_html folderonyourJ:drive, this iswhereyouwill store thefilesandfoldersassociatedwithyourwebsite.Noticethat‘mydurhamsite’automaticallypointstothefileslocatedinJ:\public_html.

161

When you begin to build the design for your web site it is advisable to do this using the Site panel window. Here youcancreatefilesandfolderstobegintoaddstructuretoyoursite.Allthefilesthatyouwillcreatewillhavea.htmextension,thisisthefileformatthatisrequiredinorderforthemtobevisibleontheweb.Itisadvisablethatyou 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.

Yoursiteislivefromthemomentyoucreatea.htmfileinyourpublic_htmlfolder,anditcanbeaccessedbyanyonefrom 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 PagesYou 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.

Web Technology

162

Local DirectoryIf you only want members of the University to access a particular document or web page Example,. notes.pdf, save thefileinthesubdirectorylocallocatedinyourpublic_htmldirectory.TheURLforthesepageswillthenbeasfollows:

http://www.dur.ac.uk/f.a.bloggs/local/notes.pdf

Because thisfile is in the local subdirectory, theWWWpagewill be accessible if a browser is runningon acomputer 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 DirectoryIf you want to force users to Authenticate as an ITS user (the browser will ask them for their ITS username and password)thenplacewebpagesinyourpasswordsubdirectory.Thisprovidesadditionalsecurity.Onlyputfilesinthe password directory if you really need a person to authenticate: if you just want to restrict access to a member oftheUniversityputfilesintothelocalsubdirectoryinstead.

8.4 Creating a New FolderDreamweaver offers a visual representation of your Web site through its Site panel. Sites are much easier to manage ifyouorganiseyourfilesinfolders.Youwillnowcreatetwofoldersinyourpublic_htmldirectory—oneforimages(pictures)andoneforresourcesandcreateseveralfileswhichyouwilllaterlinktogether.

TheSitewindowenablesyoutoquicklyreviewthestructureofasite,toaddfoldersandfilesandtoadd,moveormodify links.

Steps to create new foldersEnsure 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•Doubleclicktheiconnexttothefileindex.htmtoopenit.•

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

163

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 PageIn 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 TextWhen you enter text on your page, any formatting you do to the text is done in the Property Inspector. In order for youtoformatthetextyoufirstneedtoselectitusingthemouse.

Adding TextIn the Document window in you index.htm page type•<Your Name>’s Homepage then press EnterHighlight this line of text with the mouse. Select Heading 1 from the Format drop down menu in the Property •InspectorPut 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 •InspectClick 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 objectsFor 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 withsomethingmorespecific,forexampleframes.Howeverforthemajorityoftimeyouwillbeworkingunderthe 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.

Web Technology

164

Adding listsOn 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 ruleClick 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 TitleWhenyoufirststartDreamweaver,yourdefaultWebpageisuntitled.Toaddatitle,entersometextinthe‘title’fieldinthedocumenttoolbaratthetopofthescreen

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 PageYouhavecreatedafilecalledindex.htm,whenviewingyourpagesinabrowserthisfileopensbydefaultusingyourmailnameifnootherfileisspecified.YoucanviewyourfileontheInternetusingMozilla.Whentestingyourpage, it is important to reload the page in the browser to view your most recent changes.

Testing your pageFrom 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 ImagesYou 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).

WhenyouaddimagestoyourpagesensurethatyouaddadescriptionoftheimageintheAltfieldinthePropertyinspector. 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 pagesmayneedmodificationstomakethemmoreusableandaccessible(formoredetailsseeAppendix1).

165

Steps for adding imagesFirst 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.•Selectthepicturesfolderinthepublic_htmlfolderonyourJ:\drive,enterthefilenamephoto.jpg,andclick•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 ImagesYou will notice that if you click on your image in Dreamweaver handles appear around the edges of it, which enable youtoresizeit.Thisonlyaffectstheappearanceoftheimageonscreen;itdoesnotalterthefilesizeoftheimage.Thereforeitisnotadvisabletoresizeyourimagesinthisway;youneedtoaltertheactualimagefileusingagraphicspackage. 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•Inthesearchfieldtype•Durham cathedralChoose 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 •DreamweaverWith the image selected in Dreaweaver, click the Edit button in the Property inspector this launches the graphics •package FireworksWhenaskedtofindthesourceclickNo•

Web Technology

166

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 •changesClick 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 FilesIn 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://)•SelecttheBrowseforfileicontotherightoftheLinktextboxtoopentheSelectFiledialoguebox,whereyou•canbrowseforthefile(thesefilesmustbesavedinyourpublic_htmlfolder,iftheyarecontainedelsewhereyou 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 •DepartmentIntheLinkfieldinthePropertyinspectortypetheURLofyourdepartmentExample,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.•

Stepsforlinkingtoafile: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 •oftypetoAllFiles,thenselectthefilelecture1.docandclickSelect.Save and test your page.•

8.7.1 Linking within the PageIf 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.

167

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 pageSelect the words top of page that you have just typed.•IntheLinkfieldofthePropertyInspector,type•#topSave and test your page.•

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

Web Technology

168

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.AnAccessibilityOptionsforTableswindowwillopen,intheCaptionfieldtypeEducation•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.ClickthedropdownmenunexttotheAlignfieldandselectCenter•

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 tablesTables 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 ResourcesYou can create links to resources such as lecture notes (which could be a Word document, an Adobe pdf (portable documentformat)fileoraPostScriptfile),aPowerPointpresentation,andreadinglists.Note:youcanviewpdffilesusingaplug-intoawebbrowser,buttocreatethemyouneedAdobeAcrobat.Anadvantageofusingpdffilesisthatyoudonotneedaccesstotheoriginalprogram(e.g.MicrosoftOffice)toviewthem.TheAcrobatReaderisalready 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.

169

Forthissection,youaregoingtolinktoalibrarycatalogueandtovideoandaudiofiles.

Steps for linking to the library catalogueOn 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/libraryIn the Search list select Author and type Laurillard•ClicktheSearchbutton.Selectthefirstedition–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=laurillardOn the interests.htm page in Dreamweaver, select the text Laurillard, D. Rethinking university teaching: a •frameworkfortheeffectiveuseofeducationaltechnology.ClickintheLinkfieldinthePropertyinspectorandpaste 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 ViewHypertext 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>.

Thedocumentstartswiththe<html>tagandifyouscrolltotheendyouwillseethatitfinisheswiththe</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 TextTextcanbeaddedinCodeview.Paragraphsaredefinedbythe<p>and</p>tags.Tagsarecaseinsensitivesoitdoes 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.

Web Technology

170

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>Thisismyfirstwebpage</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 ListsYou 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 listsClick 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 SitesLinks 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 linkFind the link you created to you department (approx Line 10)•E.g:<a href=”http://www.dur.ac.uk/Geography/”>Geography Department</aClick 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•Savethefileandtestthelink.•

8.10.4 Adding CommentsComments may be used in HTML to explain the HTML code or provide other information. The comments will not appear in Design View.

171

Steps for adding commentsReturn 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.<!--LecturenoteslastupdatedOctober2000-->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 OverviewRoundtrip 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 HTMLThe 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 HTMLThe Clean Up Word HTML command (in the Commands menu) can be used to remove the extraneous HTML code createdwhenWorddocumentsaresavedasHTMLfiles.ThecodethatDreamweaverremovesisprimarilyusedbyWordtoformatanddisplaydocumentsastheyappearedinWord,andisnotneededtodisplaytheHTMLfile.ItisimportanttokeepacopyofyouroriginalWord(.doc)fileasyoumaynotbeabletoreopentheHTMLdocumentin 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.•

Web Technology

172

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

173

SummaryDreamweaver 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.•TheSitepanelallowsyoutomanagethefilesandfoldersthatmakeupyoursite,andprovidesaviewofallthe•filescontainedinyoursite.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.•TheSitewindowenablesyoutoquicklyreviewthestructureofasite,toaddfoldersandfilesandtoadd,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 •appearedinWord,andisnotneededtodisplaytheHTMLfile.

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

Web Technology

174

Self AssessmentWhich of the following helps you to create web pages while it codes html?1.

Webspacea. Planningb. Dreamweaverc. Tutorialsd.

Which of the following statements is false?2. The Dreamweaver workspace is made up of the document window and various panels and toolbars.a. The Document window displays the current document as you create and edit it.b. Webspace helps if you know how you want your webpage to look before using Dreamweaver.c. When the Document window is maximised, tabs appear at the bottom of the Document window area showing d. thefilenamesofallopendocuments.

The ___________ contains different icons for inserting various types of objects such as images, layers and 3. tables.

Insert Bara. Property Inspectorb. Document Windowc. Site Paneld.

The____________allowsyoutomanagethefilesandfoldersthatmakeupyoursite,andprovidesaviewof4. allthefilescontainedinyoursite.

Insert Bara. Property Inspectorb. Document Windowc. Site Paneld.

Which of the following is not one of the ways in which Dreamweaver can display a document?5. Design viewa. Code viewb. Slide viewc. Word viewd.

Which of the following is not one of the key functions of Dreamweaver?6. Site creationa. Spyware and virus detectionb. Management toolc. Document creation and editing toold.

When you add images to your pages ensure that you add a description of the image in the ___________ in the 7. Property inspector.

Altfielda. Ctrlfieldb. Escfieldc. Insertfieldd.

175

Dreamweaver is a good Web authoring tool, but it is not a __________.8. document editing toola. document creation toolb. graphics editorc. web creator toold.

Creating a link to a named anchor is a _______-step process.9. fivea. threeb. fourc. twod.

___________ are used for the display of tabular data.10. Tablesa. Documentb. Anchorsc. Linksd.

Web Technology

176

Case Study I

IBM Deploys Web 2.0 Collaborative Solutions for a Greener World

IntroductionThis 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,• whichservesasaunifiedplatformforemployeediscussionforums,wikis,blogsandlearning resources.IBM Lotus Mashups• to provide an environment for assembling personal, enterprise and Web content into simple,flexible,anddynamicapplications.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 theIBMfirewall.

How have Web 2.0 solutions directly helped the company become greener?ThebenefitsofIBMutilisingitsowncollaborativesolutionshavebeenimpressive:

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.

177

IBM’sEuropeoperationshavealsoslashedenergy-per-employeeconsumedby50%thankstomoreefficient•officedesigns;Austria,SwitzerlandandGermany,inparticular,havesavedUS$2.8millioninannualenergycosts.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 thesesolutionsfurtherreducediskstorage,networktraffic,andbackupcosts.

Apart froma lowercarbon footprint, IBMhasalsocreatedahighlycost-efficientenvironment for innovation,often resulting in decreased “time to market”. Furthermore, these collaborative solutions have strengthened IBM’s reputationforbeingfamilyfriendly–thankstomoreflexibleworkarrangements.

Convenient solutions to an inconvenient truthMoving forward, IBM expects the focus on environmental issues to become even more intense. By utilising real solutions that canmake a real andquantifiable difference to the climate challenge, IBMdemonstrates 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/

QuestionsWhat is the main challenge faced by IBM?1. AnsWith 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.

What is the function of IBM Lotus Connections?2. AnsIt 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.

How Web 2.0 solution has helped IBM?3. AnsThebenefitsofIBMutilisingitsowncollaborativesolutionsareasfollows:

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’sEuropeoperationshavealsoslashedenergy-per-employeeconsumedby50%thankstomoreefficient•officedesigns;Austria,SwitzerlandandGermany,inparticular,havesavedUS$2.8millioninannualenergycosts.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 ofthesesolutionsfurtherreducediskstorage,networktraffic,andbackupcosts.

Web Technology

178

Case Study II

Tire Source

ChallengeTireSourceisafullservicetireandautomotiverepairfacilitywithfivearealocationsinNortheastOhio.Withsome 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 ultimatelybringintheirvehicleforserviceatoneoftheirfivebrick-and-mortarlocations.So,theycametoTKGfor a website redesign and SEO campaign.

Ourmarketinganalysisfoundthattheirhomepagewasbeingslowedbyunnecessaryflashimages,whichcanbea turn-off to impatient users, not to mention the search engines. We recommended using optimised images (which havesmallerfilesizesandfasterloadtimes)aswellastargeted,uniquecopyandplentyofspecialofferstoenticeusers. 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 prominentlyonthehomepage, too.Theoldsitenavigationwasde-clutteredandotherusabilityissuesfixedbyaddingaRobots.txtfileandCustom404pagetomakeforamorepleasantuserexperience.

ResultsOnce some programming changes were made, Tire Source’s search engine saturation (the number of website pages indexedbythesearchengines)wentfromonepageto248!Wefollowedthatupwithalinkbuildingcampaigntohelp 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:

TotalSiteTraffic+87%Unique Visitors +87%SearchEngineTraffic+111%Conversions +19%

179

Tire Source has some top rankings in Google for local phrases, despite being just a few months into their campaign:

Keyword Rankings Before SEO Rankings After SEO Page in Google

After SEO

Canton Full Service Auto Care Not in Top 50 1 1

Medina Automotive Care 14 1 1

Akron Tire Store Not in Top 50 9 1

Akron Auto Services and Repair

Not in Top 50

http://www.tkg.com/tire-and-automotive-service-stores

QuestionsWhat is the challenge faced by Tire Source?1. What are the issues that needed SEO urgent attention?2. What was the result?3.

Web Technology

180

Case Study III

Canon myBIS

IntroductionCanonistheworldleaderinofficeautomationanddigitalimagingtechnologies.TheirBISdivisionwantedaportalthatsupportsitspartnersandwhichwouldfacilitatethemtodobusinesseffectivelyandefficiently.

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

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

SuccessmyBIS 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

QuestionsWhat was the challenge faced by canon?1. What was the solution?2. What was the result of the solution given?3.

181

Bibliography

References2createawebsite, 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> [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].EdzJohnson, 2009. • Web Designing [Video Online] Available at: <http://www.youtube.com/watch?v=GOfhmzNLWzY> [Accessed 22 June 2012]. 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].

Web Technology

182

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> [Accessed 20 June 2012].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> [Accessed 20 June 2012].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> [Accessed 22 June 2012].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.

183

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

Web Technology

184

Self Assessment Answers

Chapter Ic1. d2. d3. b4. a5. d6. d7. a8. b9. a10.

Chapter IIc1. d2. d3. a4. b5. b6. a7. b8. c9. d10.

Chapter IIIa1. b2. a3. c4. c5. c6. b7. a8. b9. c10.

Chapter IVd1. b2. c3. a4. d5. d6. a7. d8. a9. b10.

185

Chapter Vd1. b2. a3. d4. c5. a6. c7. b8. c9. c10.

Chapter VId1. b2. d3. a4. b5. b6. c7. a8. c9. a10.

Chapter VIIb1. a2. a3. d4. b5. c6. d7. b8. d9. b10.

Chapter VIIIc1. c2. a3. d4. d5. b6. a7. a8. d9. a10.