BSIT-52-Main-pg-1-92

1BSIT 52 Web Programming

Chapter 1

Introduction to Web Programming

1.1 INTRODUCTION TO WEB

The web was initially conceived and created by Tim Berners-Lee, a computer specialist from theEuropean Particle Physics Laboratory (CERN) in 1989. The main reason behind this creationwas “a need for a collaborative knowledge- sharing tool” to support scientific work in an

international context.

The web is not synonymous with the Internet, though some people may think so. Actually, the web isone way to utilize the infrastructure of the Internet. In other words, the web is an application of theInternet. Since then it has grown into the web we know today under the guidance of the World Wide Web

Consortium (W3C) that is a volunteer organization based at the Massachusetts Institute of Technology(MIT) with the responsibility for developing and maintaining common standards.

Perhaps the single most important technological development in the history of the web, besides the

creation of the web itself, was the development of graphical browsers in the early 90s. Beginning withNCSA’s Mosaic and its evolution into Netscape’s Navigator and Microsoft’s Internet Explorer, theseprograms allowed users to browse the resources on the web in an extremely user friendly environment.

This made the web a “fun” place and marked the beginning of the true web revolution.

So what exactly is the web?

The web is a complex, international, cross platform, cross language, cross cultural mesh of servers,clients, users, databases, and quite a few artificial intelligences all talking, working, searching, viewing,

accessing, downloading, and who knows what else.


2

Fig 1.1 Understanding Web

As such, no one owns or controls the web. In fact, it is impossible to own or control by its very natureand design. In fact, “it” is not even an “it”. You can’t hold the web or make it tangible. Instead, you canthink of the web not as a thing, but as a process, an action, a medium of communication.

“The Internet” is quite a different thing from “an Intranet”. An Intranet is a mini web that is limited tothe users, machines, and software programs of a specific organization, usually a company. Sinceorganizations are typically small and have more control over policies and information systems, intranetsare often more controllable.

1.2 BUILDING ELEMENTS OF WEB

There are certain standards of communication upon which the web is built. These standards sit at alayer above operating systems, computer languages, or Internet transmission protocols and provide abasic medium for communication. The two most important standards (protocols) used on the web todayare HTTP and HTML.

HTML the Language of the Web

So what does a web browser (client software) do with a file it receives from a web server (serversoftware)? Does it just display it to the human user as is? The answer is yes and no. Actually, in some

Chapter 1 - Introduction to Web Programming


cases, the web browser will display a document exactly the way it receives it from the web server. Forexample, if the document requested is an image, the web browser will display it directly. Similarly, plaintext files will be displayed just as they are sent. However, if the document is an HTML document, the webbrowser will “interpret” the HTML and display it according to the instructions contained within the HTMLcode. HTML (Hyper Text Markup Language) is a very simple language used to “describe” the logicalstructure of a document.

Actually, though HTML is often called a programming language it is really not. Programming languagesare ‘Turing-complete’, or ‘computable’. That is, programming languages can be used to compute somethingsuch as the square root of pi or some other such task. Typically programming languages use conditionalbranches and loops and operate on data contained in abstract data structures. HTML is much easier thanall of that. HTML is simply a ‘markup language’ used to define a logical structure rather than computeanything.

For example, it can describe which text the browser should emphasize, which text should be consideredbody text versus header text, and so forth.

The beauty of HTML of course is that it is generic enough that it can be read and interpreted by a webbrowser running on any machine or operating system. This is because it only focuses on describing thelogical nature of the document, not on the specific style. The web browser is responsible for adding style.For instance emphasized text might be bolded in one browser and italicized in another. it is up to thebrowser to decide.

The language itself is fairly simple and follows a few important standards.

Firstly, “HTML tags” define document description that is instructions embedded within a less-than (<)and a greater-than (>) sign. To begin formatting, you specify a format type within the < and the >. Mosttags in HTML are ended with a similar tag with a slash in it to specify an end to the formatting. It isimportant to note that the formatting codes within an HTML tag are case-insensitive.

You can also compound formatting styles together in HTML. However, you should be very careful to“nest” your code correctly. For example, the following HTML code shows correct and incorrect nesting:

<CENTER><EM>this text is bolded and centered

correctly</EM></CENTER>

<EM><CENTER>this text is bolded and centered

incorrectly</EM></CENTER>

In the incorrect version, notice that the bold tag was closed before the center tag, even though the boldtag was opened first. The general rule is that tags on the inside should be closed before tags on theoutside.

Finally, HTML tags can not only define a formatting option, they can also define attributes to those

4

options as well. To do so, you specify an attribute and an attribute value within the HTML tag. Forexample, the following tag creates a heading style aligned to the left

<H2 ALIGN = “LEFT”>this text has a heading

level two style and is aligned to the left </H2>

There are a few things to note about attributes however. First, it is not necessary to enclose attributevalues within quotes unless white space is included in the value. Secondly, it is not necessary to have aspace before or after the equal sign that matches an attribute to its value. When you close an HTML tagwith an attribute, you should not include attribute information in the closing. Finally, you should know thatweb browsers do not care about white space that you use in your HTML document.

HTTP

HTTP is a protocol that is defined in several RFC´s (Request for Comments) located at the Internicand has had several generations worth of revisions (HTTP/09, HTTP/1.0 and HTTP/1.1). HTTP is a“request-response” type protocol that specifies that a client will open a connection to a server then senda request using a very specific format. The server will then respond and close the connection. The mainthing you need to know is that HTTP is a language spoken between your web browser (client software)and a web server (server software) so that they can communicate with each other and exchange files.

Now let us understand how client/server system works using HTTP protocol. Client/server system isa very keen way of distributing information across information systems like a local area network (LAN),a wide area network (WAN), or the Internet. A client/server system works something like this: A bighunk of computer (called a server) sits in some office somewhere with a bunch of files that people mightwant access to. This computer runs a software package that listens all day long to requests over thewires.

Typically, these requests will be in some language and some format that the computer understands, butin English sound something like, “hello software package running on a big hunk of computer, please giveme the file called “mydocument.txt” that is located in the directory /usr/people/myname”.

The “server software” will then access the server hardware, find the requested file, send it back overthe wires to the “client” who requested it, and then wait for another request from the same or anotherclient. Usually, the “client” is actually a software program, like Netscape Navigator, that is being operatedby a person who is the one who really wants to see the file. The client software however, deals with all theunderlying client/server protocol stuff and then displays the document (that usually means interpretingHTML) The whole process looks something like the figure below:



Fig 1.2 HTTP communication between client and server.

So web is a huge client/server system, which uses HTTP (HyperText Transport Protocol).

Web programming is a game of getting user input, processing that input, and returning a dynamicresponse. Thus, the first thing that you must learn how to do is get user input from a web browser to a webserver. Fortunately the HTTP protocol provides two main ways to send information to a web serverabove and beyond the URL of a requested file.

These two ways are the POST and GET methods.

The GET Method

The foundation of HTTP/0.9 (the first implementation of the HTTP protocol) was the definition of theGET method that was used by a web browser to request a specific document. For example, the followingHTTP request would return the document “index.html” that was located in the web server’s root directorycalled “webdocs”.

GET /webdocs/index.html CRLF

Notice that the GET request began with the GET keyword, included a document to retrieve, and endedwith a carriage return and line feed combination. If you would like, you can try making a GET request byconnecting to your favorite web server and sending the GET request yourself (as if you were a webbrowser).

The Post Method

The POST method allows web browsers to send an unlimited amount of data to a web server byallowing them to tag it on to an HTTP request after the request headers as the message body. Typically,the message body would be our old familiar encoded URL string after the question mark (?).

6

Thus, it would not be strange for a web server to get a POST request that looked something like thefollowing:

POST /cgi-bin/phone_book.cgi HTTP/1.0Referer: http://www.somedomain.com/Direcory/file.htmlUser-Agent: Mozilla/1.22 (Windows: I: 32bit)Accept */*Content-type: application/x-www-form-urlencodedContent-length: 29

name=Selena+Sol&phone=7700404

Notice that the “Content-length” request header is equal to the number of characters in the body of therequest. This is important because a CGI script could easily parse through the variables in the body usingthe length. Of course, as with the GET method, the user never needs to deal with the protocol itself.Instead, the browser does all the work of preparing the POST request headers and body.

1.3 WHY JAVASCRPTS AND DHTML

Every time when user requests querying Server and getting information from server is a very slowprocess. Also, Some actions like verifying whether user has entered all the fields or user has entered onlydigits, not characters can be verified at the Client Side only. For this some programming support should beprovided. For doing this we use Java Script.

Though JavaScript contains the name java, they are not same. While Java can be used to make stand-alone “applets” (like a regular programming language), JavaScript is generally only used inside of HTMLdocuments.

DHTML stands for Dynamic Hyper Text Markup Language. DHTML is combination of WebTechnologies which can be basically used to set the properties of Web Pages and its look and feel.

1.4 INTRODUCTION TO CGI

CGI stands for Common Gateway Interface. As its name implies, CGI provides a “gateway” betweena human user with unexpected and complex needs, and a powerful, command/logic oriented server. As agateway, CGI must perform one task very well. It must translate. All CGI applications must translate theneeds of clients into server requests, and translate server replies into meaningful and well-presented“answers”. This can be quite a chore, since computers and humans typically speak very different languages.As such, CGI must be adept at manipulating text (be it the text inputted by the client or the text received



from the server). A CGI application must be able to take “strings” of data and translate them from onelanguage to another constantly and quickly.

The CGI script will be responsible for processing the form data, which is filled by user and respondingto the client in the form of dynamically generated HTML.

CGI is the part of the Web server that can communicate with other programs running on the server.With CGI, the Web server can call up a program, while passing user-specific data to the program (such aswhat host the user is connecting from, or input the user has supplied using HTML form syntax). Theprogram then processes that data and the server passes the program’s response back to the Web browser.

1.5 STATIC Vs DYNAMIC WEB PAGES

The majority of the web pages on the Internet today are static HTML pages. HTML pages are simpletext files that are displayed by your browser upon request. Static pages are easily read by search enginespiders.

Dynamic Web pages, on the other hand, contain little actual text. They are created each time they arerequested, retrieving information from a database. The information retrieved depends upon the inputquery.

Cookie data, query strings, session id, or specific values are examples of the types of informationrequired for a dynamic page to be created. Spiders are not capable of providing this type of informationand therefore unable to provide appropriate information they simply stop indexing dynamic sites. Dynamicpages produce HTML code, and send that code to your browser.

Visitors find dynamically generated web pages to be useful because they are provided instant accessto highly relevant information. Dynamic sites are also easy to update. New products can be added bysimply editing the database. This saves countless hours (and dollars) to update multiple static pages.Dynamic web pages are created using technologies like CGI, JSP/ASP, Cold Fusion etc.

URL’s of dynamically generated pages often contain question marks (?), percentage signs (%) andother symbols (&, + and $) or text (cgi-bin) making up the “query string”. Most spiders (Used in searchengines) can not read to the right of the question mark (?) and therefore these pages are not indexed.

1.6 SERVLETS AND JSP

Servlet are the Web Server side programs, which process the Client Request and send the result.Servlet syntax is similar to Java Language. So learning Servlet is ver easy and it can be widely used.

JSP stands for Java Server Pages. JavaServer Pages is a technology for developing web pages that

8

include dynamic content. Unlike a plain HTML page, which contains static content that always remainsthe same, a JSP page can change its content based on any number of variable items, including the identityof the user, the user’s browser type, information provided by the user, and selections made by the user.

QUESTIONS

1. What is web? What is the difference between intranet and internet?

2. Explain GET and POST method briefly.

3. Explain how HTTP is used in client/server system.

4. Discuss the difference between static and dynamic web pages.

5. “HTML is the Language of the Web” Explain?

6. Why do we require JavaScripts and DHTML?

7. Brief about role played by CGI programming in web programming?



Chapter 2

HTML

2.1 WHAT IS HTML?

H -T-M-L are initials that stand for HyperText Markup Language (computer people love initialsand acronyms — you’ll be talking acronyms ASAP). Let me break it down for you:

Ø Hyper is the opposite of linear. It used to be that computer programs had to move in a linearfashion. HTML does not hold to that pattern and allows the person viewing the World WideWeb page to go anywhere, any time they want.

Ø Text is what you will use. Real, honest to goodness English letters.

Ø Mark up is what you will do. You will write in plain English and then mark up what you wrote.

Ø Language because they needed something that started with “L” to finish HTML and HypertextMarkup Louie didn’t flow correctly. Because it’s a language, really — but the language is plainEnglish.

HTML allows you to:

l Publish documents to the Internet in a platform independent format

l Create links to related works from your document

l Include graphics and multimedia data with your document

l Link to non-World Wide Web information resources on the Internet


10

HTML was originally intended to be used for encoding document structures. While there are nowmany formatting and formatting-like tags, there are also numerous tags that apply to text structures likeheadings, paragraphs and tables.

2.2 YOUR FIRST HTML PAGE

Save the file as “mypage.htm”.

Start your Internet browser. Select “Open” (or “Open Page”) in the File menu of your browser. Adialog box will appear. Select “Browse” (or “Choose File”) and locate the HTML file you just created -“mypage.htm” - select it and click “Open”. Now you should see an address in the dialog box, for example“C:\MyDocuments\mypage.htm”. Click OK, and the browser will display the page.

Example Explained

The first tag in your HTML document is <html>. This tag tells your browser that this is the start of anHTML document. The last tag in your document is </html>. This tag tells your browser that this is the endof the HTML document. The text between the <head> tag and the </head> tag is header information.Header information is not displayed in the browser window. The text between the <title> tags is the titleof your document. The title is displayed in your browser’s caption. The text between the <body> tags isthe text that will be displayed in your browser. The text between the <b> and </b> tags will be displayedin a bold font.

HTM OR HTML EXTENSION?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htmin our examples. It might be a bad habit inherited from the past when some of the commonly usedsoftware only allowed three letter extensions. With newer software we think it will be perfectly safe touse .html.

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>

Chapter 2 - HTML


HTML Tags

HTML Elements

Remember the HTML example from the previous page:

This is an HTML element:

The HTML element starts with a start tag:<b>The content of the HTML element is: This text is boldThe HTML element ends with an end tag: </b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:

This HTML element starts with the start tag <body>, and ends with the end tag </body>.

The purpose of the <body> tag is to define the HTML element that contains the body of the HTMLdocument.

• HTML tags are used to mark-up HTML elements • HTML tags are surrounded by the two characters < and > • The surrounding characters are called angle brackets • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • The text between the start and end tags is the element content • HTML tags are not case sensitive, <b> means the same as <B>

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>

<b>This text is bold</b>

<body> This is my first homepage. <b>This text is bold</b> </body>

12

Why do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: <B> means the same as <b>. When you surfthe Web, you will notice that most tutorials use uppercase HTML tags in their examples. We always uselowercase tags. Why? If you want to prepare yourself for the next generations of HTML, you shouldstart using lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in theirHTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.

Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements onyour page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, youcan tell the browser that the background color of your page should be red, like this: <body bgcolor=”red”>.

This tag defines an HTML table: <table>. With an added border attribute, you can tell the browserthat the table should have no borders: <table border=”0">

Attributes always come in name/value pairs like this: name=”value”.

Attributes are always added to the start tag of an HTML element.

2.3 LIST OF HTML TAGS

Tags for Document Structure • HTML • HEAD • BODY

Heading Tags • TITLE • BASE • META • STYLE • LINK

Block-Level Text Elements • ADDRESS • BLOCKQUOTE • DIV • H1 through H6

Chapter 2 - HTML


2.4 TAGS IN DETAIL

Tags for Document Structure

This section describes the tags that indicate the basic structure of a web page.

l HTMLl HEADl TITLEl BODY

• P • PRE • XMP

Lists • DD • DIR • DL • DT • LI • MENU • OL • UL

Text Characteristics • B • BASEFONT • BIG • BLINK • CITE • CODE • EM • FONT • I • KBD • PLAINTEXT • S • SMALL

14

HTML(outermost tag)

The HTML tag identifies a document as an HTML document. All HTML documents should start withthe <HTML> tag and end with the </HTML> tag.

Example

The following example begins and ends a short document with the HTML tag.

HEAD(document header)

The HEAD tag defines an HTML document header. The header contains information about thedocument rather than information to be displayed in the document. The web browser displays none of theinformation in the header, except for text contained by the TITLE tag. You should put all header informationbetween the <HEAD> and </HEAD> tags, which should precede the BODY tag.

The HEAD tag can contain TITLE, BASE, ISINDEX, META, SCRIPT, STYLE, and LINK tags.

Example

BODY(main content of document)

The BODY tag specifies the main content of a document. You should put all content that is to appearin the web page between the <BODY> and </BODY> tags.

The BODY tag has attributes that let you specify characteristics for the document. You can specifythe background color or an image to use as a tiled background for the window in which the document isdisplayed. You can specify the default text color, active link color, unvisited link color, and visited link color.

<HTML> <BODY> This is a small HTML file. </BODY> </HTML>

Syntax <HEAD>...</HEAD>

<HEAD> <TITLE> Mozilla speaks out</TITLE> <BASE HREF="http://www.mozilla.com"> </HEAD>

Chapter 2 - HTML


You can specify actions to occur when the document finishes loading or is unloaded, and when thewindow in which the document is displayed receives or loses focus.

BACKGROUND=”bgURL”

specifies an image to display in the background of the document. The URL value can be anabsolute URL (for example, “http://www.yourcompany.com/images/image1.htm”) or arelative URL (for example, “images/image1.gif”). The image is tiled, which means it is repeatedin a grid to fill the entire window or frame where the document is displayed. .

BGCOLOR=”color”

sets the color of the background.

TEXT=”color”

sets the color of normal text (that is, text that is not in a link) in the document.

LINK=”color”

sets the default text color of unvisited links in the document. An unvisited link is a link that hasnot been clicked on (or followed).

ALINK=”color”

specifies the color to which links briefly change when clicked. After flashing the ALINK color,

Syntax <BODY BACKGROUND="bgURL" BGCOLOR="color " TEXT=" color " LINK=" color " ALINK=" color " VLINK=" color " ONLOAD=" loadJScode " ONUNLOAD="unloadJScode " ONBLUR=" blurJScode " ONFOCUS="focusJScode " CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style" > ... </BODY>

16

visited links change to the VLINK color if it has been specified; otherwise they change to thebrowser’s default visited link color.

VLINK=”color”

specifies the text color of visited (followed) links in a document.

ONLOAD=”loadJScode”

specifies JavaScript code to execute when the document finishes loading.

ONUNLOAD=”unloadJScode”

specifies JavaScript code to execute when the document is unloaded.

ONFOCUS=”focusJScode”

specifies JavaScript code to execute when the window in which the document is displayedreceives an onFocus event, indicating that the window has acquired focus.

ONBLUR=”blurJScode”

specifies JavaScript code to execute when the window in which the document is displayedreceives an onBlur event, indicating that the window has lost focus.

Example

The following example sets the background color to light yellow, ordinary text to black, unvisited linksto blue, visited links to green, and active links to red:

Block-Level Text Elements

This section discusses the tags that display block-level elements in text, such as headings, paragraphs,block quotes, and so on.

l ADDRESSl BLOCKQUOTEl DIVl H1 through H6l P

ADDRESS(address format)

The ADDRESS tag displays address information in a format determined by each browser. NetscapeNavigator displays addresses in italic. The intent of the ADDRESS tag is that it shows address informationand is usually placed at the top or bottom of a document.

Chapter 2 - HTML


ADDRESS elements start on a new line. Most browsers do not add extra space before an ADDRESSelement.

Example

BLOCKQUOTE(indented block of text)

The BLOCKQUOTE tag indents a block of text. The intent of the BLOCKQUOTE tag is for quotingparagraphs, although you can use it anywhere that you want paragraphs to be indented.

BLOCKQUOTE elements start on a new line. Netscape Navigator adds extra space before aBLOCKQUOTE element, but not all browsers do.

Syntax <ADDRESS CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style" >... </ADDRESS>

<ADDRESS> Netscape Communications Corporation<BR> 501 East Middlefield Road<BR> Mountain View, CA 94043<BR> </ADDRESS>

Syntax <BLOCKQUOTE>... CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style" >

</BLOCKQUOTE>

18

Example

DIV(section of a document)

The DIV tag encloses a block of content. The DIV tag is useful for applying alignment and stylecharacteristics to a section of a document that contains multiple elements rather than having to apply thealignment and styles to each element in the block. Each DIV element starts on a new line.

ALIGN

specifies the horizontal alignment of the block of content. The value can be one of the following:

l LEFT aligns the contents of the DIV block to the left (the default).

l CENTER centers the contents of the DIV block.

l RIGHT aligns the contents of the DIV block to the right.

Example

The following example uses a DIV tag to apply a style to a right-aligned block of content. The STYLEattribute is a universal attribute available to all tags inside the body of a document.

<BLOCKQUOTE> Bob Lisbonne, vice president of client product marketing at Netscape said: <BLOCKQUOTE> "Networked enterprises can begin to deploy Webtops as consistent corporate computing interfaces that span all platforms and can be updated dynamically."

</BLOCKQUOTE> </BLOCKQUOTE>

Syntax <DIV ALIGN="LEFT"|"CENTER"|"RIGHT" CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style" >

Chapter 2 - HTML


H1 through H6(standard headings)

The tags H1, H2, H3, H4, H5, and H6 display headings. Level 1 headings (H1) are the most prominentheadings, and level 6 headings (H6) are the least prominent. Headings are usually displayed in a bolder,larger font than normal body text.

Heading elements start on a new line. All browsers add extra space before heading elements.

All the headings from H1 through H6 can also take the following universal attributtes:

ALIGN

specifies the horizontal alignment of the heading. The value can be one of these:

l LEFT aligns the heading flush left (the default).

l CENTER centers the heading text.

l RIGHT aligns the heading flush right.

Example

P(paragraph)

The P tag displays a paragraph. All P elements start on a new line and are usually preceded by extraspace.

Syntax <H1 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H1> <H2 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H2> <H3 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H3> <H4 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H4> <H5 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H5> <H6 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H6>

CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style"

<H1>Level 1 Heading</H1> <H2>Level 2 Heading</H2> <H3>Level 3 Heading</H3> <H4>Level 4 Heading</H4> <H5>Level 5 Heading</H5> <H6>Level 6 Heading</H6>

20

You can also use the P tag to insert a line break with extra space. To insert a line break without addingextra space, use the BR tag.

The closing </P> tag guarantees that the paragraph is followed by extra space. Omitting the closing </P> tag often has no effect, especially if the P tag is being used as a line break (that is, the paragraph hasno content), or the paragraph is followed by an element that starts on a new line and is preceded by extraspace.

ALIGN

The value can be one of these:

l LEFT aligns the paragraph flush left (the default).

l CENTER centers the paragraph.

l RIGHT aligns the paragraph flush right.

Example

The following example displays two paragraphs.

LISTS

This section describes the tags for displaying lists:

Syntax <P ALIGN="LEFT"|"CENTER"|"RIGHT" CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style" > ... </P>

<P>Use the P tag to display paragraphs. The P element starts on a new line, and is preceded by extra space. <P> You can also use the P tag to insert a line break with extra space.In most, but not all, cases, it is OK to omit the closing tag. </P>

Chapter 2 - HTML


l OL

l UL

l LI

OL(ordered list)

The OL tag displays an ordered, or numbered, list. The default numbering style is determined by thebrowser, but you can use the tag’s TYPE attributes to change the numbering sequence and numberingstyle. Use the LI tag to designate the individual list items.

START=”value”

indicates the starting number for the list. The number must be a positive integer

TYPE

The value can be one of the following:

l A specifies a sequence of uppercase letters

l a specifies a sequence of lowercase letters

l I specifies a sequence of uppercase Roman numerals

l i specifies a sequence of lowercase Roman numeral

l 1 specifies a sequence of numbers.

Example

The following example uses the LI tag to define three list elements in an ordered list. The numbers areshown as roman numerals and the first item has the number three.

Syntax <OL START=" value " TYPE="A"|"a"|"I"|"i"|"1" CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style" > ... </OL>

22

UL(unordered list)

The UL tag displays a bulleted list. You can use the tag’s TYPE attribute to change the bullet style.Use the LI tag to designate the individual list items in the list.

TYPE

defines the type of bullet used for each list item.

The value can be one of the following:

l CIRCLE specifies a hollow bullet.

l DISC specifies a solid round bullet (Netscape Navigator’s default).

l SQUARE specifies a square bullet.

Example

<P>The following steps outline how to create HTML files:</P> <OL START="3" TYPE="I"> <LI> Use a text editor or Netscape Composer to create your HTML file. <LI> Put the HTML files on a web server. <LI> Test the files by viewing them in a web browser. </OL>

Syntax <UL TYPE="CIRCLE"|"DISC"|"SQUARE" CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style" >

<P>Netscape Composer offers the following benefits</P> <UL TYPE=SQUARE> Edit web pages directly in Navigator Easy options for setting background and link colors As easy to use as any text editor No need to learn HTML </UL>

Chapter 2 - HTML


LI(list item)

The LI tag indicates an itemized element, which is usually preceded by a bullet, a number, or a letter.The LI tag is used inside list elements such as OL (ordered list) and UL (unordered list).

A single itemized element can contain other tags such as the P tag.

The LI tag does not require a closing tag.

TYPE

specifies the type of symbol or numbering sequence to use before each item.

l DISC specifies a solid bullet.

l CIRCLE specifies a hollow bullet.

l SQUARE specifies a square bullet.

l A specifies a sequence of uppercase letters.

l a specifies a sequence of lowercase letters.

l I specifies a sequence of uppercase Roman numerals.

l i specifies a sequence of lowercase Roman numeral.

l 1 specifies a sequence of numbers.

The values DISC, CIRCLE, and SQUARE can be used in unordered lists, while the values A, a, I, i,and 1 can be used in ordered lists that have a numerical sequence.

VALUE=”number”

indicates the starting number for an item in an ordered list. This attribute is valid only in an ordered listSee. OL for information on the types of numbering available.

Syntax <LI TYPE="DISC"|"CIRCLE"|"SQUARE"|"A"|"a"|"I"|"i"|"1" VALUE=" number " CLASS="styleClass" ID= "namedPlaceOrStyle" LANG="ISO" STYLE="style" >

24

Used Within

DIR, DL, OL, UL, MENU

Example

TABLES (table)

The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table, usethe TH tag to define row or column headings, and use the TD tag to define table cells.

The TABLE tag can also contain a CAPTION tag, which specifies the caption for the table.

You can specify the width of the border surrounding the table and the default background color of thetable. (Individual rows and cells in the table can have their own background color.) You can use theCELLSPACING attribute to specify the distance between cells in the table and the CELLPADDINGattribute to specify the distance between the border and content of every cell. If you specify the width andheight of the table, the browser will do its best to make the table fit the specified dimensions, but in somecases this may not be possible. For example, if the table contains cells that contain non-wrapping longlines, the table may not fit in a specified width.

The LI tag allows you to:<P> <UL> <LI>Identify items in a numbered list <LI>Identify items in an unordered list <LI>Identify items in a directory list <LI>Identify items in a menu </UL>

Syntax <TABLE ALIGN="LEFT|RIGHT" BGCOLOR="color " BORDER=" value " CELLPADDING=" value " CELLSPACING=" value " HEIGHT=" height " WIDTH=" width " COLS=" numOfCols " HSPACE=" horizMargin " VSPACE=" vertMargin " > ... </TABLE>

Chapter 2 - HTML


ALIGN

specifies the horizontal placement of the table.

l LEFT aligns the table on the left (the default). The content following the table flows to the rightof the table.

l RIGHT aligns the table on the right. The content following the table flows to the left of the table.

l CENTER aligns the table in the center. Content does not flow on either side.

BGCOLOR=”color”

sets the color of the background for the table. This color can be overridden by a BGCOLOR tagin the TH, TR, or TD tags. See Color Units for information about color values.

BORDER=”value”

indicates the thickness, in pixels, of the border to draw around the table. Give the value as aninteger. A value of 0 means the table has no border. You can also supply the BORDER attributewithout specifying a value for it to indicate that the table has a border of the default thickness.

CELLPADDING=”value”

determines the amount of space, in pixels, between the border of a cell and the contents of thecell. The default is 1.

CELLSPACING=”value”

determines the amount of space, in pixels, between individual cells in a table. The default is 2.

HEIGHT=”height”

specifies the height of the table. The default is the optimal height determined by the contents ofeach cell. The height value can be a number of pixels, given as an integer, or a percentage of theheight of the page or parent element, given as an integer followed by the percent sign. The tableis scaled to fit the specified height and width.

WIDTH=”width”

defines the width of the table. The default is the optimal width determined by the contents ofeach cell. The width value can be a number of pixels, given as an integer, or a percentage of thewidth of the page or parent element, given as an integer followed by the percent sign. The tableis scaled to fit the specified height and width.

COLS=”numOfCols”

indicates how many virtual columns of equal width fit in the width of the window. Each actual

26

column in the table occupies a virtual column. You would typically set the COLS attribute to beequal to the number of columns in the table to indicate that all the columns in the table have thesame width.

If the WIDTH attribute is supplied, the COLS attribute indicates how many virtual columns fitin the specified width. If the WIDTH attribute is not supplied, the COLS attribute indicates howmany virtual columns fit in the current window or frame. Each column in the table occupies oneof the virtual columns.

Suppose that the WIDTH attribute is “80%” and the COLS attribute is 4. In this case, eachvirtual column takes up 20% of the width of the window. Each actual column in the tableoccupies a virtual column, so it occupies 20% of the width of the window, so long as the tablehas from 1 to 4 columns inclusive.

Note, however, that if the minimum width needed to display the contents of an actual column isgreater than the width of a virtual column, then the width of the column is expanded to fit itscontents.

If the table has more actual columns than the COLS value, then the columns in excess of theCOLS value are displayed in the minimum width required to fit their contents, and the othercolumns divide the remaining space equally between them.

For example, suppose the table has 4 columns, the WIDTH attribute is “80%”, and the COLSvalue is 3. What happens here is that the table takes up 80% of the width of the window. Thefourth column uses the minimum width necessary to display the contents of the column. Theother 3 columns divide the remaining width of the table equally between them.

HSPACE=”horizMargin”

specifies the distance between the left and right edges of the table and any surrounding content.

VSPACE=”vertMargin”

specifies the distance between the top and bottom edges of the table and any surroundingcontent.

Example 1. A Simple Table.

The following example creates a three-column, four-row table, with a yellow background. The caption“Tables are as easy as one, two, three” is displayed at the bottom of the table.

Chapter 2 - HTML


FORMATTING TAGS

l BR

l CENTER

l HR

BR(line break)

The BR tag inserts a line break. The BR tag does not add extra space before the new line. If text iswrapping around an element such as an image, you can use the CLEAR attribute of the BR tag to forcethe text to continue its flow at the next clear line (that is, it stops wrapping around the element).

The BR tag does not require a closing tag.

CLEAR

prevents text from wrapping around one or both sides of an element such as an image.

l ALL prevents text from wrapping to the left or the right of any element. The result is that thetext appears at the next completely clear line.

l LEFT causes text to appear at the next clear left margin. That is, text is not allowed to wrap tothe left of any element.

l RIGHT causes text to appear at the next line that has a clear right margin. That is, text is notallowed to wrap to the right of any element.

<TABLE BORDER CELLPADDING="8" CELLSPACING="4" BGCOLOR=yellow> <TR><TH> English </TH><TH> Spanish </TH><TH> German </TH></TR> <TR><TD> one </TD><TD> uno </TD><TD> ein </TD></TR> <TR><TD> two </TD><TD> dos </TD><TD> zwei </TD></TR> <TR><TD> three </TD><TD> tres </TD><TD> drei </TD></TR> <CAPTION ALIGN="BOTTOM"> <B>Table 1</B>: Tables are as easy as one, two, three </CAPTION> </TABLE>

Syntax <BR CLEAR="ALL"|"LEFT"|"RIGHT" >

28

Example

The following example inserts a line break in a speech from Hamlet:

CENTER(Centered content)

The CENTER tag centers content. All content between the <CENTER> and </CENTER> tags iscentered.

Some tags take an optional ALIGN attribute that specifies the alignment of an element. However, the<CENTER> tag lets you easily center a block of content without having to specify the alignment of eachelement in the content. It also lets you center elements, such as images, and arbitrary content that couldnot otherwise be centered. You can put a CENTER tag anywhere, such as in the middle of a paragraph.

The value of an ALIGN attribute overrides the <CENTER> tag.

Example

HR(horizontal rule)

The HR tag draws a horizontal line across the document frame or window. You can use a horizontalline to visually divide information or sections. The HR tag does not have a closing tag.

ALIGN

specifies the horizontal alignment of lines that do not span the width of the page.

l CENTER displays the line centered (the default).

l LEFT aligns the line flush left.

l RIGHT aligns the line flush right.

<P>Hamlet's famous speech begins: <BLOCKQUOTE><I>To be, or not to be?<BR> That is the question</I></BLOCKQUOTE>

Syntax <CENTER>...</CENTER>

<CENTER> <H1>Netscape's Mascot Mozilla</H1> <IMG SRC="/images/mozilla.gif> </CENTER>

Chapter 2 - HTML


NOSHADE

rproduces a solid black line that has no shading.

SIZE=”thickness”

indicates the thickness of the line, in pixels. The default is 2 pixels.

WIDTH=”width”

defines the horizontal width of the line. The default is the width of the page. The measurementvalue can be a number of pixels, for example “5”, or a percentage of the page width or framewidth, for example “75%”.

Example

The following example draws a horizontal rule between two sentences.

ANCHORS AND LINKSA(anchor or link)

The A tag lets you define anchors and links. An anchor defines a place in a document. A link displaysa hypertext link that the user can click to display an anchor or a document.

A as anchor

An anchor identifies a place in an HTML document. To indicate that an <A> tag is being used as ananchor, specify the NAME attribute.

Do not nest an anchor within another A tag.

<P>This text appears above a thick, unshaded, centered horizontal rule. <HR NOSHADE ALIGN="CENTER" WIDTH="50%" SIZE="8"> <P>This text appears below the horizontal rule.

Syntax <A NAME=" anchorName " > ... </A>

30

Example

IMAGESIMG(image)

The IMG tag specifies an image to be displayed in an HTML document.

An image can be a plain image that simply appears on the page. An image can be embedded in an <AHREF> tag so that the user can click it to open a URL. An image can also be an image map, which hasmultiple clickable areas that each link to different URLS.

The SRC attribute of the IMG tag indicates the image to display. You can also specify a lower resolutionimage as the value of the LOWSRC attribute. When the page opens, it displays the lower resolutionimage first, so that the user has something to look at while the real image is loading. If you supply an imagefor the LOWSRC attribute, make sure it has a smaller file size than the image used for the SRC attribute,since the whole point of the LOWSRC attribute is to provide an image that loads more quickly than thesource image.

The HEIGHT and WIDTH attributes indicate the dimensions of the image. If you specify theseattributes, Navigator uses them to reserve a place for the image on the page and continues loading anytext and other page elements instead of waiting for the image to load.

Navigator can display images that use the following types of formats:

l GIF (Graphics Interchange Format)

<A NAME=section2> <H2>A Cold Autumn Day</H2></A> If this anchor is in a file called "nowhere.htm," you could define a link that jumps to the anchor as follows: <P>Jump to the second section <A HREF="nowhere.htm#section2"> A Cold Autumn Day</A> in the mystery "A man from Nowhere."

Syntax <A HREF=" location " ONCLICK=" clickJScode " ONMOUSEOUT="outJScode " ONMOUSEOVER="overJScode " TARGET=" windowName" > ... </A>

Chapter 2 - HTML


l JPEG (Joint Photographic Experts Group)

l XPM (X PixMap)

l XBM (X BitMap)

Example 1. An Image With a Low Resolution Placeholder

This example uses the following attributes to improve performance:

l The LOWSRC attribute specifies a low-resolution version of the final image. This small fileloads quickly when a user accesses the page.

l The HEIGHT and WIDTH attributes specify the dimensions of the image. Navigator usesthese dimensions to reserve a place for the image on the page, and continues loading any textand other page elements instead of waiting for the image to load.

Syntax <IMG SRC=" location" LOWSRC=" location" ALT=" alterntiveText" ALIGN=" alignment" BORDER=" borderWidth" HEIGHT=" height" WIDTH=" width" HSPACE=" horizMargin" VSPACE=" verticalMargin" ISMAP USEMAP=" #mapName" NAME=" imageName" ONABORT=" imgLoadJScode" ONERROR=" errorJScode" ONLOAD=" imgLoadJScode" SUPPRESS=" suppressOrNot" >

<IMG SRC="images/violets.jpg" LOWSRC="images/smviol.gif" HEIGHT=180 WIDTH=120 ALT="violets">

32

FORM(form for user input)

The FORM tag creates an HTML form. The form can contain interface elements such as text fields,buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices. Eachinterface element in the form must be defined with an appropriate tag, such as <INPUT> or<SELECTION>. All elements in the form must be defined between the <FORM> and </FORM> tags.As well as user input elements, the form can contain other elements such as headings, paragraphs, tables,and so on.

When the form is displayed in a web browser, the user can fill it out by making choices and enteringtext using the interface elements, and then submit the form by clicking a “Submit” button.

Kinds of Interface Elements

Several kinds of form elements can be defined using the INPUT tag, which uses the TYPE attributeto indicate the type of element, such as button, checkbox, and so on.

Two other kinds of interface elements you can put in a form are selection lists and text areas. Selectionlists act as menus and are defined with the SELECT tag. Multi-line text-entry fields are defined with theTEXTAREA tag.

Example

The following example creates a form called LoginForm that contains text fields for user name andpassword, a submit button, and a cancel button.

Syntax <FORM ACTION=" serverURL " ENCTYPE=" encodingType " METHOD="GET"|"POST" NAME=" formName" ONRESET=" JScode " ONSUBMIT=" JScode " TARGET=" windowName" > ... </FORM>

<FORM NAME="LoginForm" METHOD=POST ACTION="ur l to Invoke"> <P>User name: < INPUT TYPE="text " NAME="userName" SIZE="10"> <P>Password: < INPUT TYPE="password" NAME="password" SIZE="12"> <P><INPUT TYPE="submi t " VALUE="Log in"> < INPUT TYPE="but ton" VALUE="Cancel " onCl ick="window.c lose( ) "> </FORM>

Chapter 2 - HTML


INPUT(input element in a form)

The INPUT tag defines a form element that can receive user input. The TYPE attribute determinesthe specific sort of form element to be created. TYPE can be one of the following:

INPUT TYPE=”BUTTON”

A button apears in the form. You must specify JavaScript code as the value of the ONCLICK attributeto determine what happens when the user clicks the button.

INPUT TYPE=”CHECKBOX”

A checkbox is a toggle that the user can select (switch on) or deselect (switch off.)

Syntax

<INPUT TYPE=”CHECKBOX”

CHECKED

NAME=”name”

ONCLICK=”JScode”

VALUE=”checkboxValue”>

INPUT TYPE=”FILE”

This places an element on an HTML form that lets the user supply a file as input. When the form issubmitted, the content of the specified file is sent to the server as the value portion of the name/value pairfor this input element. Netscape Navigator displays a “Browse” button next to the file input element thatlets users select a file from their system to use as the value of the file input element.

If a form contains a file input element, the value of the ENCTYPE attribute of the FORM tag shouldbe “multipart/form-data”.

Syntax <INPUT TYPE="BUTTON" NAME=" buttonName" VALUE=" buttonText" ONCLICK=" JScode">

Syntax <INPUT TYPE="FILE" NAME=" name" VALUE=" filename" >

34

INPUT TYPE=”HIDDEN”

A hidden input element is an invisible element whose main purpose is to contain data that the user doesnot enter. This data gets sent to the invoked CGI program when the form is submitted.

This tag provides a mechanism for delivering a value to the CGI program without the user havingentered it, but note that it is not very hidden because the user can discover it by viewing the documentsource.

INPUT TYPE=”IMAGE”

This places an image, serving as a custom button, on an HTML form. When a user clicks the image,the form is submitted to the server.

INPUT TYPE=”PASSWORD”

A password element is a text input field in which each character typed is displayed as a character suchas * or a black dot to conceal the actual value.

Syntax <INPUT TYPE="HIDDEN" NAME=" name" VALUE=" value " >

Syntax <INPUT TYPE="IMAGE" ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"| "TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM" NAME=" name" SRC=" location " >

Syntax <INPUT TYPE="PASSWORD" MAXLENGTH="maxChar " NAME=" name" ONSELECT=" JScode " SIZE=" charLength " VALUE=" textValue " >

Chapter 2 - HTML


INPUT TYPE=”RADIO”

A radio element is a radio button. A set of radio buttons consists of multiple radio buttons that all havethe same NAME attribute. Only one radio button in the set can be selected at one time. When the userselects a button in the set, all other buttons in the set are deselected. If one radio button in a set has theCHECKED attribute, that one is selected when the set is first laid out on the window.

INPUT TYPE=”RESET”

When a user presses a reset button, all elements in the form are reset to their default values

INPUT TYPE=”SUBMIT”

When a user clicks a submit button, the form is submitted, which means that the ACTION specifiedfor the form is invoked.

INPUT TYPE=”TEXT”

A text element is a single line text input field in which the user can enter text.

Syntax <INPUT TYPE="RADIO" CHECKED NAME=" name" ONCLICK=" JScode " VALUE=" buttonValue " >

Syntax <INPUT TYPE="RESET" NAME=" name" ONCLICK=" JScode " VALUE=" label " >

Syntax <INPUT TYPE="SUBMIT" NAME=" name" VALUE=" label " >

Syntax <INPUT TYPE="TEXT" MAXLENGTH="maxChars "

36

SELECT(selection list in a form)

The SELECT tag defines a selection list on an HTML form. A selection list displays a list of optionsfrom which the user can select an item. If the MUTLIPLE attribute is supplied, users can select multipleoptions from the list at a time. If the MULTIPLE attribute is not supplied users can select only one optionin the list at a time.

The SELECT tag should be used between <FORM> and </FORM> tags. Use the OPTION tag todefine options in the list.

When the form containing the selection list is submitted to the server, a name/value pair is sent foreach selected option in the list.

Example: Single Item Selection

NAME=" name" ONBLUR=" Scode " ONCHANGE="JScode " ONFOCUS="Scode " ONSELECT=" JScode " SIZE=" lengthChars " VALUE=" text " >

Syntax <SELECT NAME=" selectName " MULTIPLE ONBLUR=" JScode " ONCHANGE="JScode " ONCLICK=" JScode " ONFOCUS="fScode " SIZE=" listLength " > <OPTION...> ... <OPTION ...> </SELECT>

<FORM> <B>Shipping method:</B><BR> <SELECT> <OPTION> Standard <OPTION SELECTED> 2-day <OPTION> Overnight </SELECT> </FORM>

Chapter 2 - HTML


SCRIPT(client-side JavaScript code)

The SCRIPT tag specifies client-side JavaScript code, which means JavaScript code that runs directlyin the browser. The browser treats everything between the <SCRIPT> and </SCRIPT> tags as scriptelements. For example, the browser interprets text within angle brackets as a script element, not as anHTML element.

You can include <SCRIPT> tags anywhere in your HTML document. It is a good idea to definefunctions in a SCRIPT tag in the header portion of your document, since then the functions will beavailable to the document as it is displayed. You can also use SCRIPT tags in the body of your documentto define JavaScript code to be executed in that part of the document.

You can use a NOSCRIPT tag to provide content that is displayed by browsers for which JavaScriptis not available, while being ignored by browsers that can understand JavaScript. For example, you coulduse the NOSCRIPT tag to provide a warning that the page requires JavaScript.

NOSCRIPT(alternative text for JavaScript)

The NOSCRIPT tag specifies the content for a browser to display when JavaScript is not available orenabled.

Example: Using the SCRIPT Tag

The following example uses the SCRIPT tag to define a JavaScript script in the HEAD tag. The scriptis loaded before anything else in the document is loaded. The JavaScript code in this example defines afunction, changeBGColor(), that changes the document’s background color.

The body of the document contains a form with two buttons. Each button invokes the changeBGColor()function to change the background of the document to a different color.

Syntax <SCRIPT LANGUAGE=" languageName " SRC=" location " > ... </SCRIPT>

Syntax <NOSCRIPT>...</NOSCRIPT>

38

APPLET(Java applet)

The APPLET tag specifies a Java applet that will run in a web page. Applets can only be displayed byJava-enabled browsers.

You build an applet using the Java language and compile it with a Java compiler. It is beyond the scopeof this document to discuss how to write Java applets

After writing and compiling a Java applet, you can display it in a web page by using the APPLET tag.The CODE attribute specifies the name of the Java applet to run. The CODEBASE attribute specifiesthe subdirectory or folder containing the Java applet. You can use PARAM tags between the <APPLET>and </APPLET> tags to provide information about parameters, or arguments, to be used by the Javaapplet.

<HTML> <HEAD><TITLE>Script Example</TITLE> </HEAD> <SCRIPT language="JavaScript"> function changeBGColor (newcolor) { document.bgColor=newcolor; return false; } </SCRIPT> <BODY > <P>Select a background color:</P> <FORM> <INPUT TYPE="button" VALUE=blue onClick="changeBGColor('blue');"> <INPUT TYPE="button" VALUE=green onClick="changeBGColor('green');"> </FORM> <NOSCRIPT><I>Your browser is not JavaScript-enabled. These buttons will not work.</I> </NOSCRIPT>

Syntax <APPLET CODE=" classFileName " CODEBASE=" classFileDirectory " ARCHIVE=" archiveFile " ALT=" altText " ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"| "TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM" HEIGHT=" height "

Chapter 2 - HTML


The CODE attribute is required (otherwise there is no applet to run). Netscape Navigator 3 andNavigator 4 can display applets if the WIDTH and HEIGHT attributes are omitted, but some otherbrowsers cannot, so for best results you should always include the WIDTH and HEIGHT attributes.

Applet Example

The following example runs the applet jumping.class. It has two input parameters, message and speed,that affect the results of the applet. When this applet runs, it displays the words in the message, a fewwords at a time. The words come and go, so they seem to jump around at the specified speed.

QUESTIONS

1. What is HTML?

2. Brief about HTML Tags and Elements.

3. List down different classification of tags with 2 examples tags for each category.

4. Explain any 4 HTML Tags with at least 4 attributes with example

5. Write an Example HTML Page containing a table 4 X 3 and each row coloured differently.

6. Write an HTML program to demonstrate text characteristics tags.

7. Write an HTML program to demonstrate applet embedding.

8. Explain how you can embed an image in a HTML page.

9. Create an simple HTML page to demonstrate usage of anchor tags.

10. Explain ordered list and unordered lists.

WIDTH=" width " HSPACE=" horizMargin " VSPACE=" vertMargin " MAYSCRIPT NAME=" value " > <PARAM ...> </APPLET>

<P>Here is an applet. It has two parameters -- speed and message. <APPLET CODE="jumping.class" CODEBASE=jclasses WIDTH=240 HEIGHT=400 ALIGN=ABSMIDDLE HSPACE=10 VSPACE=20> <PARAM NAME=message VALUE="Use Netscape Navigator to browse the world wide web."> <PARAM NAME=speed VALUE="4"> </APPLET> Its alignment is ABSMIDDLE. </P>

40

Chapter 3

Creating Dynamic Web Pages

3.1 INTRODUCTION TO JAVASCRIPT

JavaScript is an easy-to-learn way to “script” your web pages—that is, have them to do actions thatcannot be handled with HTML alone. With JavaScript, you can make text scroll across the screenlike ticker tape; you can make pictures change when you move your mouse over them (called a

“rollover effect”), or any other number of dynamic enhancements.

Though JavaScript contains the name java, they are not same. While Java can be used to make stand-alone “applets” (like a regular programming language), JavaScript is generally only used inside of HTMLdocuments.

What JavaScript can do?

l Control Document Appearance and Content

l Control the Browser

l Interact with Document Content

l Interact with the User

l Read and Write Client State with Cookies

l Interact with Applets

l Manipulate Embedded Images

Chapter 3 - Creating Dynamic Web Pages

Chapter 3 - Creating Dynamic Web Pages40


What JavaScript can’t do?

l JavaScript does not have any graphics capabilities, except for the ability to format and displayHTML (which, however, does include images, tables, frames, forms, fonts, and other user-interface elements).

l For security reasons, client-side JavaScript does not allow the reading or writing of files. Obviously,you wouldn’t want to allow an untrusted program from any random web site to run on yourcomputer and rearrange your files!

l JavaScript does not support networking of any kind, except—an important exception, that it cancause a web browser to download the contents of arbitrary URLs.

l Finally, JavaScript doesn’t have any multithreading capabilities, except whatever comes implicitlyfrom the web browser’s internal use of threads.

3.2 USING JAVASCRIPT IN HTML

Small Introduction about writing JavaScript

Most JavaScript must be written in the HTML document between <SCRIPT > tags. You open witha <SCRIPT “Language=JavaScript” > tag, write your JavaScript, and write a closing </SCRIPT> tag.

To understand the workings of JavaScript, it is essential to understand a few basic programmingconcepts. JavaScript is object-oriented. An Object in JavaScript is a resource that has specific characteristicsknown as properties and provides several services known as methods and events. An example of anobject is document, which represents the current web page and has properties such as location (whichstores the URL location of the document) and methods such as ‘writeln’, which writes dynamicallycreated html text to the document.

A variable stores a value. It can be thought of as a labeled box, with the name of the variable as thelabel and the value as the contents.

<SCRIPT “Language=JavaScript” > JavaScript code goes here.. < SCRIPT>

The JavaScript statement: var x= “hello”; Assigns to the variable named x the String value “hello”. var x=1;This line of JavaScript assigns to the variable x the integer value 1.

42

As you can see, a JavaScript variable can refer to a value of any type; this can be integer, string, oreven any type of object. You don’t have to specify the type of variable before creating it. Note that objectproperties can be thought of as variables that belong to the object.

A method is basically a collection of statements that does something. For example, a method “writeln()”exists in the document object that can be used to write html to your document. Methods are predefined inJavaScript. It is possible for you to define functions, which can be thought of as methods you defineoutside of any object.

When you have the syntax object.method as you do with document.writeln, the method operates onthe object given. In this case, the writeln method operates (the operation is writing) to the document (thebrowser window that you see). This syntactic structure is often used in JavaScript.

Now Writing the Sample JavaScript Code

Insert the above into your html document between the <body> and </body> tags. The piece of text(known as a string) between the parentheses is the parameter given to the writeln() method. The browserwill display the HTML between the parentheses when it runs the script.

Note that writeln() writes actual HTML to the page, complete with tags, attributes and text. Theparameter of the writeln() method can include tags to format the text.

Change the above code to the following:

Note how the welcome message displayed by the browser is now a heading, and is centered.

The above example may seem kind of pointless, because we could have just inserted the HTMLbetween the parentheses directly without using a script. This, however, makes it possible to create HTMLthat would vary depending on certain conditions. Insert the following code into your page:

<script language=“JavaScript”> document.writeln(“Hello, welcome to my page.” );

</script>

<script language= “JavaScript”> document.writeln(“<p><h1><center>Hello, welcome to my

page.</center></h1>” ); </script>

<script language= “JavaScript”> document.writeln(“<p><br> This page is located at ” +document.location+ “<br>This page was last modified on ” +document.lastModified);

</script>



The HTML processed by the browser in this case would vary depending on the values ofdocument.lastModified and document.location. Because we wanted this text to be printed in the sameposition in our page body every time the page is loaded, we placed the JavaScript code between the<body> and </body> tags wherever we want the text to occur. Sometimes, we place JavaScript code inthe head portion of the page if we want it to run before any of HTML in the body is displayed. We canalso define JavaScript functions in the head of a page, which we will talk about later. JavaScript hasseveral predefined methods that allow you to create several types of pop-up boxes. Let’s look first at“alert” boxes.

Alert boxes

An alert box is a small window that pops up with a yellow warning sign and a (usually) importantmessage. With JavaScript we can either show a message to the user either before a page loads or inresponse to a user action. Here we will make an alert box that appears before the page loads. It will looklike this:

This makes a pop-up box, which says, “This is a class on JavaScript” with an OK button that allowsthe user to close it and continue. The message can be changed to whatever you like. This type of pop-up box is called an alert box because it can only be used to alert a viewer. It cannot be used to controlwhere the user may go. Alert() is a method that takes care of displaying the box. The line “This is a classon JavaScript” is the parameter for the alert() method. Some more examples of methods are:

confirm(“put message here”) ; This is the next type of box we’ll be looking at.Prompt(“put request here”) ; This asks the user to enter some text.

You probably noticed at the end of a method, after the right parenthesis, there is a semi-colon. InJavaScript, a semi-colon is used to end a “statement”.

Now we will make another type of pop-up box.

Confirm Boxes

Place the following code in the body of your HTML document. (Remove the alert box if you like.):

Exercise • In Notepad, open base.html, your starter HTML page template.

Which is <html><head></head><body></body></html> • Now, within the <head> tags, insert the following code:

<script language= “JavaScript”>

alert(“This is a class on JavaScript”); </script>

44

We have created an input button inside a form. Input elements such as buttons must always be placedinside a form, between <form> and </form> tags.

Take a look in a browser window at the results of this code. The onClick event handler means thatwhen you click on the button, a confirm box pops up. An event handler allows you to specify what codeto execute when an event takes place. You can change the message on the button or in the confirm boxby changing the appropriate text in the code. Be sure you’re also using all semicolons, quotation marks,and other punctuation correctly.

Syntax is very important in JavaScript, unlike in HTML, where typos are often overlooked by browsers.

Now we’ll take a look at one more type of pop-up box, the message input box.

The browser will type your name in the window, along with the welcome message. These input stringscan be used to personalize your web page. Let’s take a closer look at the first line of code.

This is an example of a variable declaration. As we mentioned, a variable in JavaScript can take onany form, such as integer, character, or string. Just like a person has a name, in order to refer to avariable, you must give it a name. You make a variable with the word var as shown above, and the nameis the word immediately following var. So in this case the name of the variable is yourname. The equalsign assigns the variable the value to its right (i.e. 4, 8+5, “c”, “chocolate devil”). The prompt method willget a value for yourname as you saw when you ran the program. We say that the prompt method returnsa value, which is stored in the variable yourname. Some methods return values, some don’t.

looks a lot more complicated than it is. It uses whatever value you have for yourname, which you get

<form> <input type = ''button" value = "Click here to check the weather" onClick =

"confirm(‘Its sunny today ' ) ; " > </form>

Message input boxes 1. Put the following code in the head of your HTML document.

<script language= “JavaScript”> var yourname = prompt('Type your name here'); document.writeln("<center>Welcome, "+ yourname+"</center>");

</script> 2. Reload the page in your browser window. 3. Type your name.

var yourname = prompt(‘Type your name here’);

The line: document.writeln("<center>Welcome, "+ yourname +"</center>");



from the text prompt window. As you saw, it types on the screen “Welcome,” and then your text. The<center>, </center> tags are familiar looking HTML tags, and indeed, all they do is center your message.

The MouseOver

A mouseover can be used to make an image change when the user rolls their mouse over it. Whatactually happens is that the browser displays a different image when the mouse is over the text or image.Look at demo.html again to see how a rollover works.

To specify a mouse rollover you insert the onMouseOver and//or the onMouseOut attributes into theappropriate tag. These should be followed by the JavaScript code to be executed between quotes.

Making a simple MouseOver

Now that we’ve looked at what a mouseover can do, let’s make one. This mouseover will displaypicture A until the mouse is moved over it; then it will display picture B.

1. Place the following code in the body of your HTML document:

2. View your page with the browser. If the mouseover doesn’t work, be sure to check all semicolons,apostrophes, and quotation marks.

Here’s how the code works. As you can see, all the code that creates the mouseover effect iscontained in an anchor tag and is therefore a hyperlink. The name attribute of the image tag assigns aname to the image object. The result is that an object is created representing the image, this object isreferred to by the variable named “logo” which is located inside the document object (it is a property ofthe document object). The onMouseOver and onMouseOut attributes are “Event Handlers” that tell thebrowser what code to execute when the events occur. You can make it so that the mouseover affectsanother image on the page by changing the name of the image accordingly in the event handler code.

Menu

We will now look into creating a menu using Javascript. We will create a simple menu, which has anumber of clickable options. There will be a single image which changes when options is selected. We willalso create a function which takes care of changing the menu image.

You will be using the images dog.gif, cat.gif and hamster.gif as example iamges.

1. Place the following code in the body of your HTML document:

<a href="http://www.yahoo.com" onMouseOver="document.logo.src='B.gif ' ; " onMouseOut ="document.logo.src='A.gif ' ; " ><img name="logo" src="A.gif " border=0></a>

<center><h1>My Favourite Pets</h1><img src="dog.gif" name="pet" height=18% width=8%><br><font size=5><p><a

46

Notice how we used anchor tags to enclose the menu entries. We made the entries into links bydefining the href attribute. This, however, is not your regular sort of link. Instead of defining the hrefattribute to be a URL, we defined JavaScript code to be executed when the link is clicked. When youclick any of these “links”, the corresponding JavaScript is executed. We used the javascript: prefix todenote that the target of the link is the following JavaScript code, and not a regular URL.

The JavaScript executed when the cat button is clicked, for example, is changePet(‘cat.gif’); . Wheredid the changePet function come from??? Well, nowhere really; It doesnt exist, we will create it. So nowwe want to create a function that takes in a single parameter, which is the name of a file. This functionshould then set the source (which is the src property) of the image object pet to equal that filename.

2. Insert the code for the function changePet into the head portion of your page:

Functions like the above are usually defined in the head of an HTML document. As shown above,function definitions must me enclosed by opening and closing script tags. The syntax for function definitionis, as shown above, the keyword function followed by the name of the function and a list of parametersbetween parentheses(if there is more than one parameter the list is seperated by commas). Then, thestatements composing the function are placed between curly brackets { } . The above function takes inone parameter, and calls it file. There is a single statement in this function; This sets the value ofdocument.pet.src to equal the value of file. Now that we have defined the changePet function, calls tothat function from the links in our menu can be made.

3. View your page with the browser. If the menu doesn’t work, be sure to check all semicolons,apostrophes, and quotation marks.

When a menu option is clicked, the corresponding JavaScript code is executed. That code calls thechangePet function and gives that function a single parameter representing the name of the file. ThechangePet function then receives that parameter, calls it file, and uses it to change the source of the petimage.

href="javascript:changePet('dog.gif');">.Dog.</a><p><a href="javascript:changePet('cat.gif');">.Cat.</a><p><a href="javascript:changePet('hamster.gif');">.Hamster.</a></font></center>

<script language= “JavaScript”> function changePet(file){

document.pet.src=file; }

</script>



Change the status bar text

JavaScript allows us to change the text in the status bar of the window through the window.statusproperty. We will now show you how to place a welcome message on the status bar as soon as your pagefinishes loading. The event handler goes in the opening <body> tag

1. Put this code in the body of your HTML document:

Notice that the text in the bottom of the browser window now displays “Welcome to my Page!!!”whenever the mouse pointer is not on a link. The onload event handler is an attribute of the body tag, andit tells the browser what to do after the body of the page is done loading.You could also use this effect inconjunction with a mouse event handler to change the status bar text when the mouse rolls over certainlinks or images, feel free to explore effects like that on your own.

3.3 AN INTRODUCTION TO DHTML

Dynamic HTML is really just CSS (cascading style sheets), DOM (document object model), Scripting(Javascript and VBscript) and HTML. DHTML isn’t really a language or a “thing” in itself it’s just a mixof those technologies.

That means that to master DHTML you have to know as much as possible about each technology. Sowe will go through each of them in breif.

Cascading Style Sheets (CSS)

CSS stands for Cascading style sheets and is the part of DHTML that controls the look and placmentof the elements on a page. With CSS you can basically set any style property of any element on a HTMLpage. One of the biggest advantages with CSS instead of the regular way of changing the look of elements(the font tag and similar) is that you split content from design. You can for instance link a CSS file to all thepages in your site that sets the look of the pages, so if you want to change like the font size of your maintext you just change it in the CSS file and all pages are updated.

The syntax for CSS code is basically like this:

<style type=”text/css”>ELEMENT{property1:value1; property:value2}

</style>

Let us see couple of examples:

We always place the style tag inside the head of the document. So a document could look like this:

<body onload=”window.status= ‘Welcome to my Page!!!’ ”>

48

All H5 heading on that page would then look like this:

Cascading style sheets

If you wanted only that single H5 heading to look like that you could have used a id on the tag and doneit like this:

Or you could have used something called inline styles which means placing the style directly in the tag.This can be useful in some cases, but as you can see it sort of takes away some of the point with CSS:

<h5 style=”background-color:blue; color:white; font-size:20px”>Cascading style sheets</h5>

If you use inline styles you still have to go into the actual content to change the style for the element.Now, there’s a third way of doing this. If you for instance have 10 P tags on your page and you want 5 ofthem to be bold, but not the rest of them, then you use a class. You can name a class whatever you want,just remember to have a “.” in front of the name.

<style type=”text/css”> .whatever{font-weight:bold}</style>

And to assign that to a P tag we go like this:

<html><head> <style type="text/css">

H5{background-color:blue; color:white; font-size:20px} </style> <body>

<h5>Cascading style sheets</h5> </body>

</html>

<html><head> <style type="text/css">

#heading{background-color:blue; color:white; font-size:20px} </style> <body>

<h5 id="heading">Cascading style sheets</h5> </body>

</html>



<p class=”whatever”>This is bold text!</p>

This is the absolute basic of CSS. Unfortunately CSS is supported a little differently on the differentbrowsers and is only supported at all on 4.x+ browsers.

Document Object Model (DOM)

The Document Object Model, or DOM, is the interface that allows you to programmatically accessand manipulate the contents of a web page (or document). It provides a structured, object-orientedrepresentation of the individual elements and content in a page with methods for retrieving and setting theproperties of those objects. It also provides methods for adding and removing such objects, allowing youto create dynamic content.

The DOM also provides an interface for dealing with events, allowing you to capture and respond touser or browser actions. Here we will discuss on the DOM representation of a document and the methodsit provides to access those objects.

DOM Levels and Support

When JavaScript was first introduced in browsers, some sort of interface was required to allowelements on the page to be accessed via scripting. Each vendor had their own implementation but de factostandards emerged to produce a fairly simple model common to most.

For example, most browsers used an array of Image objects to represent all IMG tags on a page.These could then be accessed and manipulated via JavaScript. A simple image rollover might use codelike this:

These early models were limited. They only provided access to a few types of element and attributes,like images, links or form elements.

As vendors released new versions of browsers, they expanded on the model. But they also were oftenat odds with one another, leading to compatibility problems among different browsers as vendors tried tooutdo each other by adding their own new features. Fortunately, most vendors started adopting the DOMstandard set by the World Wide Web Consortium, notably Internet Explorer, Netscape and Opera.

The Document Tree

When a browser loads a page, it creates a hierarchical representation of its contents, which closelyresembles its HTML structure. This results in a tree-like organization of nodes, each representing anelement, an attribute, content or some other object.

Nodes

Each of these different object types will have their own unique methods and properties. But each also

document.images[3].src = "graphics/button2.gif"

50

implements the Node interface. This is a common set of methods and properties related to the documenttree structure. To understand this interface better, take a look at the diagram below which represents asimple node tree.

Fig 3.1 Simple node tree

The Node object provides several properties to reflect this structure and allow you to traverse the tree.Here are some relationships using the example above:

NodeA.firstChild = NodeA1

NodeA.lastChild = NodeA3

NodeA.childNodes.length = 3

NodeA.childNodes[0] = NodeA1



NodeA1.parentNode = NodeA

NodeA1.nextSibling = NodeA2

NodeA3.prevSibling = NodeA2

NodeA3.nextSibling = null

NodeA.lastChild.firstChild = NodeA3a

NodeA3b.parentNode.parentNode = NodeA

The Node interface also provides methods for dynamically adding, updating and removing nodes suchas:

insertBefore()replaceChild()removeChild()appendChild()cloneNode()

These will be covered later. But for now let’s look how the document tree reflects the contents of aweb page



The Document Root

The document object serves as the root of this node tree. It too implements the Node interface. It willhave child nodes but no parent node or sibling nodes, as it is the starting node. In addition to being a Node,it also implements the Document interface.

This interface provides methods for accessing and creating other nodes in the document tree. Somemethods are:

getElementById()getElementsByTagName()createElement()createAttribute()createTextNode()

Note that unlike other nodes, there is only one document object in a page. All of the above methods(except getElementsByTagName()) can only be used against the document object, i.e., using the syntaxdocument.methodName().

The document object can also have several other properties related to older DOM level support. Forexample, you’ll find that many browsers still have document.images and document.links arrays ordocument.bgColor and document.fgColor properties relating to the BGCOLOR and TEXT attributes ofthe BODY tag.

These properties are intended to provide some backward compatibility so that pages designed forolder browsers will still work properly with newer versions. They can still be used in scripts but they maynot be supported in future versions.

Traversing the Document Tree

As mentioned, the document tree reflects the structure of a page’s HTML code. Every tag or tag pairis represented by a element node with other nodes representing attributes or character data (i.e., text).

Technically speaking, the document object has only one child element, given bydocument.documentElement. For web pages, this represents the outer HTML tag and it acts as the rootelement of the document tree. It will have child elements for HEAD and BODY tags which in turn willhave other child elements.

Using this, and the methods of the Node interface, you can traverse the document tree to accessindividual node within the tree. Consider the following:

<html> <head>

<title></title> </head>

52

and this code:

alert(document.documentElement.lastChild.firstChild.tagName);

which would display “P”, the name of the tag represented by that node. The code breaks down asfollows:

document.documentElement - gives the page’s HTML tag..lastChild - gives the BODY tag..firstChild - gives the first element in the BODY..tagName - gives that element’s tag name, “P” in this case.

There are some obvious problems with accessing nodes like this. For one, a simple change to the pagesource, like adding text or formatting elements or images, will change the tree structure. The path usedbefore may no longer point to the intended node.

Less obvious are some browser compatibility issues. Note that in the sample HTML above, there is nospacing between the BODY tag and the P tag. If some simple line breaks are added,

Netscape will add a node for this data, while IE will not. So in Netscape, the JavaScript code shownabove would display “undefined” as it now points to the text node for this white space. Since it’s not anelement node, it has no tag name. IE, on the other hand, does not add nodes for white space like this, soit would still point to the P tag.

Accessing Elements Directly

This is where the document.getElementById() method comes in handy. By adding an ID attribute tothe paragraph tag (or any tag for that matter), you can reference it directly.

<body><p>This is a sample paragraph.</p></body> </html>

<html> <head>

<title></title> </head> <body>

<p>This is a sample paragraph.</p>

</body>

</html>



<p id=”myParagraph”>This is a sample paragraph.</p>

...

alert(document.getElementById(“myParagraph”).tagName);

This way, you can avoid compatibility issues and update the page contents at will without worryingabout where the node for the paragraph tag is in the document tree. Just remember that each ID needs tobe unique to the page.

A less direct method to access element nodes is provided by document.getElementsByTagName().This returns an array of nodes representing all of the elements on a page with the specified HTML tag.For example, you could change color of every link on a page with the following.

var nodeList = document.getElementsByTagName(“A”);

for (var i = 0; i < nodeList.length; i++)

nodeList[i].style.color = “#ff0000”;

Which simply updates each link’s inline style to set the color parameter to red.

Node Types

As mentioned, there are several types of nodes defined in the document object model, but the onesyou’ll mostly deal with for web pages are element, text and attribute.

Element nodes, as we’ve seen, correspond to individual tags or tag pairs in the HTML code. Theycan have child nodes, which may be other elements or text nodes.

Text nodes represent content, or character data. They will have a parent node and possibly siblingnodes, but they cannot have child nodes.

Attribute nodes are a special case. They are not considered a part of the document tree - they do nothave a parent, children or siblings. Instead, they are used to allow access to an element node’s attributes.That is, they represent the attributes defined in an element’s HTML tag, such as the HREF attribute ofthe A tag or the SRC attribute on the IMG tag.

Note that attribute values are always text strings.

Attributes vs. Attribute Nodes

There are several ways to reference the attributes of an element. The reason for this is that theDOM2 standard was designed for many types of structured documents (i.e., XML documents), not justHTML. So it defines a formal node type for attributes.

But for all documents it also provides some more convenient methods for accessing, adding andmodifying attributes, as described next.

54

The document.createAttribute() allows you to create a new attribute node, which you can then set avalue for and assign to an element node.

var attr = document.createAttribute(“myAttribute”);attr.value = “myValue”;var el = document.getElementById(“myParagraph”);el.setAttributeNode(attr);

However, it’s usually easier to access an element’s attributes directly using the element getAttribute()and setAttribute() methods instead.

var el = document.getElementById(“myParagraph”);el.setAttribute(“myAttribute”, “myValue”);

An element’s attributes are also represented as properties of the element node. In other words, youcan simply use

var el = document.getElementById(“myParagraph”);el.myAttribute = “myValue”;

It’s also interesting to note that you can define your own attributes in the HTML tag itself. For example,

<p id=”myParagraph” myAttribute=”myValue”>This is a sample paragraph.</p>

...

alert(document.getElementById(“myParagraph”).getAttribute(“myAttribute”));

will display “myAttribute.” But note that you should use element.getAttribute(attributeName) insteadof element.attributeName to get the value as some browsers may not register user-defined attributes asa properties of the element.

Attributes can also be removed from an element node, using either the removeAttribute() orremoveAttributeNode() methods or setting by setting element.attributeName to a null string (“”).

Altering attributes is one way to create dynamic effects. Try the following sample paragraph, whereusing the links we can alter it’s ALIGN attribute.

The code is fairly simple:

<p id=”sample1" align=”left”>Text in a paragraph element.</p>

... code for the links ...

document.getElementById(‘sample1’).setAttribute(‘align’, ‘left’);document.getElementById(‘sample1’).setAttribute(‘align’, ‘right’);



Style Attributes

Most attributes for HTML tags are fairly simple; they define a single value for a property specific tothat tag. Styles are a little more involved. As you know, CSS can be used to apply style parameters to anindividual tag, all tags of a given type or assigned using classes. Likewise, styles for a particular elementcan be inherited from any of these sources.

You can also alter these styles at various levels. For example, you can change the STYLE attribute ofan HTML tag, or it’s CLASS attribute. But these methods will alter all of the element’s style parameters.Often, you may want to change just a single style parameter, or a select few, while retaining the others.

Fortunately, the style attribute and element node is defined as an object with properties for everypossible style parameter. You can access and update these individual parameters as you wish. Here’s anexample similar to the previous one.

But in this case, the text alignment is defined and altered using a style parameter instead of the ALIGNattribute. Here’s the code behind it:

<p id=”sample2" style=”text-align:left;”>Text in a paragraph

element.</p>


document.getElementById(‘sample2’).style.textAlign = ‘left’;document.getElementById(‘sample2’).style.textAlign = ‘right’;

Note that when a CSS parameter name contains a hyphen (“-”) as “text-align” does, its correspondingstyle property name is constructed by removing the hyphen character and capitalizing the first letterfollowing it, in this case it becomes “textAlign.”

Also note that even if a particular style parameter is not initially defined for an element, you can still setit’s value using the DOM. For example, in the code above the inline style= on the P tag is really notnecessary.

Dynamic Content

Changing textual content is relatively simple. A text node represents every continuous string of characterdata in the body of an HTML page. The nodeValue property of these nodes is the text itself. Changingthat value will change the text on the page.

Text Nodes

Here’s another example using a simple paragraph tag. Use the links to change the text:

<p id=”sample1">This is the initial text.</p>

56


document.getElementById(‘sample1’).firstChild.nodeValue = ‘Once upon a time...’;document.getElementById(‘sample1’).firstChild.nodeValue = ‘...in a galaxy far, far away’;

There are a couple of important things to note here. First, text nodes do not have an ID attribute likeelement nodes can. So they cannot be accessed directly using methods like document.getElementById()or document.getElementsByTagName().

Instead, the code references the text using the parent node, in this case it’s the paragraph element withthe ID “sample1”. This element node has one child node, the text node we want to update. You can seethis in the diagram below.

Fig 3.2 Parent & Childnode

So document.getElementById(‘sample1’).firstChild.nodeValue is used to access this text node andread or set its string value.

It’s important to remember that text nodes contain just that, text. Even simple markup tags like B or Iwithin a string of text will create a sub tree of element and text nodes. For example, using the exampleabove and adding tags make the word “initial” bold:

<p id=”sample2">This is the <b>initial</b> text.</p>

Now gives the “sample2” paragraph element three children instead of one. There is a text node for“This is the “, an element node for the B tag pair and a text node for “ text.”. The node for the B elementhas one child node, a text node for “initial”. You can see the structure in the diagram below.

Fig 3.3 Text node



To see how this affects scripting code, here’s the same example used above but with the additionalbold markup:

Changing firstChild of the P element now only affects the text “This is the “. Conversely, if youattempt to add markup to the value of a text node, the browser will treat it as plain text, as demonstratedbelow:

Here the link code has been changed to this:

document.getElementById(‘sample3’).firstChild.nodeValue = ‘<b>Once</b> upon a time...’;document.getElementById(‘sample3’).firstChild.nodeValue = ‘...in a galaxy <i>far, far</i> away’;

You can avoid problems like this by thinking of text nodes as individual strings of character datalocated between any two HTML tags, not necessarily matching pairs of tags.

Nodes can also be added to the DOM. You’ve already seen how attribute nodes can be created andapplied to an element so let’s look at adding element and text nodes within the document tree (withoutusing the innerHTML property).

The first step is to create a node object of the type you want using one of document.createElement(),document.createAttribute() or document.createTextNode(). For attributes, however, you’ll probably justwant to create an element node and assign it attributes directly.

Working with Text Nodes

Let’s start with a text node. Below is some sample code showing how to create a text node and assignit a value.

var myTextNode = document.createTextNode(“my text”);

Now you have a text node. But it’s not part of the document tree. To make it appear on the page, youneed to add it as a child to an existing node within the tree. Since text nodes cannot have children, youcan’t attach it to another text node. Attributes nodes are not part of the document tree, so you don’t wantto attach it to one of them. That leaves element nodes.

Since element nodes can several children, there are a few different methods provided that allows youto specify where to add the new node among its existing children. These are best illustrated by example.

Here, the appendChild() method is used to add new text to a paragraph element. It also allows you toremove the last node added using the removeChild() method:

<p id=”sample1">Initial text within a paragraph element.</p>

... code to add a text node ...

58

var text = document.createTextNode(“ new text “ + (++counter1));

var el = document.getElementById(“sample1”);el.appendChild(text);

... code to remove the last child node ...

var el = document.getElementById(“sample1”);

if (el.hasChildNodes()) el.removeChild(el.lastChild);

Adding text is easy, the code creates a new text node, locates the paragraph element node and callsappendChild() to insert it at the end of it’s childNodes array. A global counter variable is used on the text

itself so you can distinguish each new node in the browser display.

Removing text is almost as easy, using a call to removeChildNode(). The only difference in the additionof a reference node, to indicate which of the element’s children is to be removed. Here we use the

element’s lastChild property which always points to the last node of the element’s childNodes array. Notethat it will even remove the initial text hard coded in the P tag if that is the only child.

Also note the use of the hasChildNodes() method which simply returns true or false to indicate if thegiven node currently has any children. Here it’s used to prevent an error by calling removeChild when

there are no children left.

Normalizing and Splitting Text Nodes

In the above example, the new text nodes are added as independent children. But if you had hardcoded additional text in the HTML,

<p id=”sample1">Initial text within a paragraph element. new text 1

new text 2 new text 3</p>

it would appear in the DOM as a single child text node of the paragraph element. In other words, thenode tree produced by dynamically adding content may appear different from the node tree that would

result if that content had been included in the static HTML code.

This may or may not be desirable depending on what you’re trying to do. In some cases you may wantcombine text nodes to make the tree reflect what it would if the new, dynamically added content had beenpart of the original, static HTML code.

The normalize() method provides this functionality. Calling it on an element will “clean up” the nodetree, combining any adjacent text nodes and removing any empty ones.



Browser Compatibility

Internet Explorer 5.5 does not support the normalize method. The example below will not work properlyon this browser. IE 6.0, however, does appear to support it although the current beta version is buggy.

To demonstrate, here’s the same example used above but with additional links provided to normalizethe paragraph element and show it’s current number of children.

You can see that as you add text, the number of child nodes increases but any time you normalize theparagraph, they are combined into a single text node. Here’s the code for the additional links:

... normalize element ...

el = document.getElementById(“sample2”);el.normalize();

... show number of child nodes ...

el = document.getElementById(“sample2”);alert(el.childNodes.length);

Conversely, you can split a single text node into two separate ones using the splitText() method Thiscan be useful if you want to dynamically alter a single word or phrase or insert an element in a line of text.

Let’s set up another example. This time, the remove link will delete the first child of the paragraph.Initially, this will be the entire sentence. But if you use the separate link first, it will split off the first wordin the text and a subsequent remove will delete only that word. The reset link allows you to start over.

And here’s the code for each function:

... split at first word ... el = document.getElementById("sample3"); if (el.hasChildNodes()) { text = el.firstChild; i = text.nodeValue.indexOf(" "); if (i >= 0) text.splitText(i + 1); } ... remove first text node ... el = document.getElementById("sample3"); if (el.hasChildNodes()) el.removeChild(el.firstChild);

60

A couple of notes here. The nodeValue of a text node is simply a string. The splitText() methodexpects an offset value to tell it where to split the text. The string indexOf() method is used to find theoffset of the first space in the text and pass it on to splitText().

Second, the reset code simply deletes all child nodes of the paragraph and then adds the original textback as a single node.

Working with Element Nodes

Adding and removing elements nodes works much the same way as with text nodes. The main differencebeing in creating the node and placing content within it.

First, you create a node using document.createElement() giving it the name of the tag you’d like tobuild such as P, DIV, TABLE, etc. The parameter is case-insensitive so “div”, “Div” and “DIV” all createa DIV tag. Just note that the browser will return the tag name in uppercase if you inquire on it, forexample:

var el = document.createElement(“div”);alert(el.tagName);

would display “DIV”.

Like text nodes, after you create an element you need to add it to some existing element node in thedocument tree in order to actually see it on the page.But a newly created element is simply an empty tag.You’ll probably first want to set some of its attributes and add content. Again a working example will helpillustrate.

Here, clicking on the link will create a new P element - with some child nodes of its own - and appendit to an existing DIV. Take a look at the code:

First it creates two new elements, a P tag and a B tag. Then it adds a new text node with the string“This is a new paragraph with “ to the paragraph tag. It does the same to the B tag, adding the text “bold”.Then it appends that B tag (and it’s child text node) to the paragraph. Another new text node with thestring “ text added to the DIV” is then appended to the paragraph.

... reset the example ... el = document.getElementById("sample3"); while (el.hasChildNodes()) el.removeChild(el.firstChild); text = document.createTextNode( "Initial text within a paragraph element."); el.appendChild(text);



At this point the paragraph element has three children, a text node, an element node for the B tag andanother text node. The B element has one child, a text node. The final step is to insert the new paragraphelement into the existing DIV tag on the page.

We could also have set any attribute of either new element. It makes no difference if you set anelements attribute before or after adding it to the node tree. For example, both

boldEl.style.color = “#ffff00”;paraEl.appendChild(boldEl);and

paraEl.appendChild(boldEl);boldEl.style.color = “#ffff00”;

will make the bold text red. In other words, appendChild() actually moves the node into the tree, notjust a copy, and the variable boldEl will still point to it.

Scripting

DHTML can be used with Javascript. As we have already discussed about Javascript, we will not goin details again.

Javascript is a scripting language (like a simple programming language (Perl, C++ et. cetera)). Javascriptis the part of DHTML that actually does something. It’s Javascript that makes the document fly around;it’s Javascript that changes the font size or any other CSS property on an element. So JavaScript plays areally big role in DHTML and it’s really important to know JavaScript very well!

Summing it up

Dynamic HTML is simply HTML that can change even after a page has been loaded into a browser.A paragraph could turn blue when the mouse moves over it, or a header could slide across the screen.Anything that can be done in HTML can be redone after the page loads.

So, how can HTML be changed after it’s been downloaded? There needs to be some way to tell thebrowser to change it, which brings us to the technologies that make up DHTML:

Dynamic HTML is client-side scripting

Using client-side scripting languages like JavaScript we can change HTML. If an image changeswhen you roll your mouse over it, you’re looking at an example of dynamic HTML. The 4.0 browsersfrom both Microsoft and Netscape allow more of a page’s HTML elements to be accessible from withinscripting languages. The mechanism whereby page elements (or document objects) are opened to scriptinglanguages is called the Document Object Model.

62

Dynamic HTML is the DOM

In a sense, the Document Object Model is the real core of dynamic HTML. It makes HTMLchangeable. The DOM is the hierarchy of elements that are present in the browser at any given time.This includes environmental information such as the current date and time, browser properties such as thebrowser’s version number, window properties such as window.location (the page’s URL), and HTMLelements such as <p> tags, divs, or tables. By exposing the DOM to scripting languages, browsers enableyou to access these elements. While some elements such as the time of day can’t be changed themselves,they can be used by scripts to modify other elements.

The part of the DOM that specifies which elements can trigger changes is the event model. Eventsare things like moving the mouse over an element (onmouseover), loading a page (onload), submitting aform (onsubmit), clicking on a form input field (onfocus), and so on.

Dynamic HTML is CSS

Because they are part of the DOM, CSS properties are accessible to scripting languages, and it istherefore possible to change almost anything about the way a page looks. By changing the CSS propertiesof a page element (such as its color, position, or size), you can do almost anything bandwidth and processorspeed permit.

To sum all this up: CSS (and plain old HTML) is what you change, the DOM is what makes itchangeable, and client-side scripting is what actually changes it. And that’s dynamic HTML.

QUESTIONS

1. What is JavaScript ? List out uses of Java Script.

2. Create an HTML page which pops up an alert message.

3. Explain briefly about Cascading Style Sheets(CSS).

4. Explain the usage of script tags.

5. Explain Document object model.

6. Write a program to display text in status bar on click of a button.

7. What are the difference between HTML and DHTML

8. Explain the methods to access nodes in a Document tree.

9. What are text nodes?



Chapter 4

Introduction to CGI

4.1 WHAT IS CGI?

CGI, or “Common Gateway Interface”, is a specification which allows web users to run programsfrom their computer. CGI isn’t a programming language in itself; rather, it is standard that allowsprograms or scripts written in other languages to be run over the Internet.

CGI is the part of the Web server that can communicate with other programs running on the server.With CGI, the Web server can call up a program, while passing user-specific data to the program (such aswhat host the user is connecting from, or input the user has supplied using HTML form syntax). Theprogram then processes that data and the server passes the program’s response back to the Web browser.

Fig 4.1 Simple diagram of CGI


64

CGI programs usually take input passed to it from a form on a web page, process the information, andthen format the results as a HTML document. The result is a web page that is generated dynamically.The common choice for writing and processing CGI is PERL, or “Practical extraction and reportinglanguage”.

4.2 CGI APPLICATIONS

CGI turns the Web from a simple collection of static hypermedia documents into a whole new interactivemedium, in which users can ask questions and run applications. Let’s take a look at some of the possibleapplications that can be designed using CGI.

Forms

One of the most prominent uses of CGI is in processing forms. Forms are a subset of HTML thatallow the user to supply information. The forms interface makes Web browsing an interactive process forthe user and the provider. Figure 4.2 shows a simple form.

Fig 4.2 Simple form illustrating different widgets

Chapter 4 - Introduction to CGI


As can be seen from the figure, a number of graphical widgets are available for form creation, such asradio buttons, text fields, checkboxes, and selection lists. When the form is completed by the user, theSubmit Order! button is used to send the information to the server, which executes the program associatedwith the particular form to “decode” the data.

Generally, forms are used for two main purposes. At their simplest, forms can be used to collectinformation from the user. But they can also be used in a more complex manner to provide back-and-forthinteraction. For example, the user can be presented with a form listing the various documents available onthe server, as well as an option to search for particular information within these documents. A CGIprogram can process this information and return document(s) that match the user’s selection criteria.

Gateways

Web gateways are programs or scripts used to access information that is not directly readable by theclient. For example, say you have an Oracle database that contains baseball statistics for all the players onyour company team and you would like to provide this information on the Web. How would you do it? Youcertainly cannot point your client to the database file (i.e., open the URL associated with the file) andexpect to see any meaningful data.

CGI provides a solution to the problem in the form of a gateway. You can use a language such asoraperl or a DBI extension to Perl to form SQL queries to read the information contained within thedatabase. Once you have the information, you can format and send it to the client. In this case, the CGIprogram serves as a gateway to the Oracle database, as shown in figure 4.3.

Fig 4.3 A gateway to a database

66

Virtual Documents

Virtual, or dynamic, document creation is at the heart of CGI. Virtual documents are created on the flyin response to a user’s information request. You can create virtual HTML, plain text, image, and evenaudio documents. A simple example of a virtual document could be something as trivial as this:

In this example, there are two pieces of dynamic information: the alphanumeric address (IP name) ofthe remote user and the load average on the serving machine. This is a very simple example, indeed!

4.3 CONFIGURING THE SERVER

Two things you need for CGI programming with Perl are Web Server and the Perl Interpreter. You’llthen be able to write CGI programs and test them locally on your computer. Once Apache is installed andrunning, you’ll be able to view your pages by pointing your web browser at the http://localhost/ address.You don’t even need to be connected to the internet to view local pages and CGI programs.

Installing Apache and Perl is simple. You just have to download the software and install like any otherwindows software. After installing Apache you have to configure it.

Configuring The Server (Apache)

First go to the Start menu and go to “My Documents”. Make a new folder there called “My Website”.This is where you’re going to store your web pages and CGI programs.

Next you need to modify the Apache configuration file to tell it where your pages are, and enable CGIprograms. Go back to the Start menu and navigate to All Programs > Apache HTTP Server > ConfigureApache Server > Edit the Apache httpd.conf Configuration file. The config file will be opened for you inNotepad.

Scroll down (or use Find) until you get to the UserDir section of the file. It should have a line like this:

UserDir “My Documents/My Website”

Scroll down just past that and you’ll come to a commented section for Directory:

#<Directory “C:/Documents and Settings/*/My Documents/My Website”> # AllowOverride FileInfo AuthConfig Limit # Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec # <Limit GET POST OPTIONS PROPFIND>

Welcome to Shishir’s WWW Server!You are visiting from diamond.com. The load average on this machine is1.25.



# Order allow,deny # Allow from all # </Limit> # <LimitExcept GET POST OPTIONS PROPFIND> # Order deny,allow # Deny from all # </LimitExcept> #</Directory>

Uncomment this entire section (by removing the pound signs at the beginning of each line), and changethe Options line to this:

Options MultiViews Indexes SymLinksIfOwnerMatch Includes ExecCGI

Options specifies what options are available in this directory. The important ones here are Indexes,which enables server-side includes, and ExecCGI, which enables CGI programs in this directory.

Scroll down a bit further to the DirectoryIndex line, and add index.cgi to the end of that line:

DirectoryIndex index.html index.html.var index.cgi

Now scroll down several pages (or use Find) to the AddHandler section. Uncomment the CGI line:

AddHandler cgi-script .cgi

This causes any file with a .cgi extension to be processed as a CGI program. If you want to also havefiles with a .pl extension be processed as CGI programs, add the .pl extension on that same line:

AddHandler cgi-script .cgi .pl

Next add this line immediately after:

AddHandler server-parsed .html

This causes all .html files to be searched for server-side include tags.

Now save the configuration file, and restart Apache. Check http://localhost/ in your browser to ensurethat the server restarted successfully.

To view the pages in your “My Website” folder, the actual URL is http://localhost/~my username/. Forexample, on my computer, my username is “Sridhar”, so the URL to my pages is http://localhost/~Sridhar/. (If you don’t know your username, open the Start menu; your username is at the top of the Start box.)

Writing Your CGI Programs

Now you’re ready to write some CGI programs! Here’s a simple one you can use to get started. Youcan write this in Notepad:

68

#!/perl/bin/perl -wTprint “Content-type: text/html\n\n”;print “<h2>Hello, World!</h2>\n”;

Unfortunately Notepad has a nasty habit of appending .txt to the end of all text files, so when you goto save this file, change the “Save as Type” from “Text Documents” to “All Files”. Then put “first.cgi” asthe file name. Save it in your My Website folder, then reload your web page in your browser. You shouldsee first.cgi listed there; click on it to view your first CGI program!

4.4 PROGRAMMING IN CGI

A CGI is simply a program that is called by the webserver, in response to some action by a web visitor.Now let’s try writing a simple CGI program.

First CGI Program

Program 4.1: first.cgi Hello World Program

#!/perl/bin/perl -wTprint “Content-type: text/html\n\n”;print “Hello, world!\n”;

The first line of your program should look like this: #!/perl/bin/perl –wT

The first part of this line, #!, indicates that this is a script. The next part, /perl/bin/perl, is the location (orpath) of the Perl interpreter. The final part contains optional flags for the Perl interpreter. Warnings areenabled by the -w flag. The first line #!/perl/bin/perl should start in column 1. The subsequent lines canstart in any column. if you’re writing a CGI that’s going to generate an HTML page, you must include thisstatement somewhere in the program before you print out anything else:

print “Content-type: text/html\n\n”;

This is a content-type header that tells the receiving web browser what sort of data it is about toreceive – in this case, an HTML document. If you forget to include it, or if you print something else beforeprinting this header, you’ll get an “Internal Server Error” when you try to access the CGI program.

Save (or upload) the file into your web directory, then chmod 755 first.cgi to change the file permissions(This is in case of UNIX. If you are using windows no change is required). Now go to your web browserand type the direct URL of your new CGI program. You should see a web page with “Hello, world!” onit.

Let’s try another example. Start a new file (or if you prefer, edit your existing first.cgi) and add some



additional print statements. It’s up to your program to print out all of the HTML you want to display in thevisitor’s browser, so you’ll have to include print Statements for every HTML tag:

Program 4.2: second.cgi Hello World Program 2

#!/perl/bin/perl -wTprint “Content-type: text/html\n\n”;print “<html><head><title>Hello World</title></head>\n”;print “<body>\n”;print “<h2>Hello, world!</h2>\n”;print “</body></html>\n”;

Save this file, adjust the file permissions if necessary, and view it in your web browser. This time youshould see “Hello, world!” displayed in a H2-size HTML header. Now not only have you learned to writeyour first CGI program, you’ve also learned your first Perl statement, the print function:

print “somestring”;

This function will write out any string, variable, or combinations thereof to the current output channel.In the case of your CGI program, the current output is being printed to the visitor’s browser. You canwrite multiple lines of text without using multiple print statements by using the here-document syntax asshown:

print <<EndMarker;line1line2line3etc.EndMarker

You can use any word or phrase for the end marker

Program 4.3: third.cgi Hello World Program, with here-doc

#!/perl/bin/perl -wTprint “Content-type: text/html\n\n”;print <<EndOfHTML;<html><head><title>Test Page</title></head><body><h2>Hello, world!</h2></body></html>EndOfHTML

When a closing here-document marker is on the last line of the file, be sure you have a line break after

70

the marker. If the end-of-file mark is on the same line as the here-doc marker, you’ll get an error whenyou run your program.

The CGI.pm Module

Perl offers a powerful feature to programmers: add-on modules. These are collections of pre-writtencode that can you can use to do all kinds of tasks. You can save yourself the time and trouble of reinventingthe wheel by using these modules.

Some modules are included as part of the Perl distribution; these are called standard library modulesand don’t have to be installed. If you have Perl, you already have the standard library modules.

Let’s see how to use a module in your CGI program. First you have to actually include the module viathe use command. This goes after the #!/perl/bin/perl line and before any other code:

use CGI qw(:standard);

Note we’re not doing use CGI.pm but rather use CGI. The .pm is implied in the use statement. Theqw(:standard) part of this line indicates that we’re importing the “standard” set of functions from CGI.pm.

Now you can call the various module functions by typing the function name followed by any arguments:functionname(arguments) If you aren’t passing any arguments to the function, you can omit the parentheses.A function is a piece of code that performs a specific task; it may also be called a subroutine or amethod. Functions may accept optional arguments (also called parameters), which are values (strings,numbers, and other variables) passed into the function for it to use. The CGI.pm module has manyfunctions; for now we’ll start by using these three:

header;start_html;end_html;

The header function prints out the “Content-type” header. With no arguments, the type is assumed tobe “text/html”. start_html prints out the <html>, <head>, <title> and <body> tags. It also accepts optionalarguments. If you call start_html with only a single string argument, it’s assumed to be the page title. Forexample:

print start_html(“Hello World”);will print out the following:<html><head><title>Hello World</title><head><body>



Let’s try using CGI.pm in an actual program now.

Program 4.4: fourth.cgi Hello World Program, using CGI.pm

#!/usr/bin/perl -wTuse CGI qw(:standard);print header;

print start_html(“Hello World”);print “<h2>Hello, world!</h2>\n”;print end_html;

CGI.pm also has a number of functions that serve as HTML shortcuts. For instance:

print h2(“Hello, world!”) Will print an H2-sized header tag.

Documentation can be embedded in a program using comments. A comment in Perl is preceded bythe # sign; anything appearing after the # is a comment. You’ll notice the first line (#!/usr/bin/perl) is acomment, but it’s a special kind of comment. It indicates what program to use to run the rest of the script.

Before you can proceed much further with CGI programming, you’ll need some understanding of Perlvariables, and control structures.

Basics of Pearl

A variable is a place to store a value, so you can refer to it or manipulate it throughout your program.

Pearl Variables

Perl has three types of variables: scalars, arrays, and hashes.

Scalars

A scalar variable stores a single (scalar) value. Perl scalar names are prefixed with a dollar sign ($),so for example, $x, $y, $z, $username, and $url are all examples of scalar variable names. Here’s how

variables are set:

$foo = 1;$name = “Fred”;$pi = 3.141592;

In this example $foo, $name, and $pi are scalars. You do not have to declare a variable before using it,but its considered good programming style to do so. There are several different ways to declare variables,but the most common way is with the my function:

72

my $foo = 1;my ($name) = “Fred”;my ($pi) = 3.141592;

my simultaneously declares the variables and limits their scope (the area of code that can see thesevariables) to the enclosing code block. You can declare a variable without giving it a value:

my $foo;

You can also declare several variables with the same my statement:

my ($foo, $bar, $blee);

A scalar can hold data of any type, be it a string, a number, or whatnot. You can also use scalars indouble-quoted strings:

my $fnord = 23;my $blee = “The magic number is $fnord.”;

Now if you print $blee, you will get “The magic number is 23.” Perl interpolates the variables in thestring, replacing the variable name with the value of that variable.

Let’s try it out in a CGI program.

Program 4.5: scalar.cgi Print Scalar Variables Program

#!/usr/bin/perl -wTuse CGI qw(:standard);use CGI::Carp qw(warningsToBrowser fatalsToBrowser);use strict;

my $email = “fnord\@cgi101.com”;my $url = “http://www.cgi101.com”;

print header;print start_html(“Scalars”);print <<EndHTML;<h2>Hello</h2><p>My e-mail address is $email, and my web url is<a href=”$url”>$url</a>.</p>EndHTMLprint end_html;



You may change the $email and $url variables to show your own e-mail address and website URL.Save the program and test it in your browser. You’ll notice a few new things in this program. First, there’suse strict. This is a standard Perl module that requires you to declare all variables. You don’t have to usethe strict module, but it’s considered good programming style, so it’s good to get in the habit of using it.

You’ll also notice the variable declarations:my $email = “fnord\@cgi101.com”;my $url = “http://www.cgi101.com”;

Notice that the @-sign in the e-mail address is escaped with (preceded by) a backslash. This isbecause the @-sign means something special to .A better way to do this would be to use a single-quotedstring for the e-mail address:

my $email = ‘[email protected]’;

Single-quoted strings are not interpolated the way double-quoted strings are, so you can freely use thespecial characters $, @ and % in them. However this also means you can’t use a single-quoted string toprint out a variable, because

print ‘$fnord’;

will print the actual string “$fnord” not the value stored in the variable named $fnord.

Arrays

An array stores an ordered list of values. While a scalar variable can only store one value, an arraycan store many. Perl array names are prefixed with an @-sign. Here is an example:

my @colors = (“red”,”green”,”blue”);

Each individual item (or element) of an array may be referred to by its index number. Array indicesstart with 0, so to access the first element of the array @colors, you use $colors[0]. Notice that whenyou’re referring to a single element of an array, you prefix the name with $ instead of @. The $-sign againindicates that it’s a single (scalar) value; the @-sign means you’re talking about the entire array.

If you want to loop through an array, printing out all of the values, you could print each element one ata time:

my @colors = (“red”,”green”,”blue”);

print “$colors[0]\n”; # prints “red”print “$colors[1]\n”; # prints “green”print “$colors[2]\n”; # prints “blue”

A much easier way to do this is to use a foreach loop:

74

my @colors = (“red”,”green”,”blue”);foreach my $i (@colors) { print “$i\n”;}

Getting Data Into And Out Of Arrays

An array is an ordered list of elements. You can think of it like a group of people standing in line waitingto buy tickets. Before the line forms, the array is empty:

my @people = ();

Then Howard walks up. He’s the first person in line. To add him to the @people array, use the pushfunction:

push(@people, “Howard”);

Now Sara, Ken, and Josh get in line. Again they are added to the array using the push function. Youcan push a list of values onto the array:

push(@people, (“Sara”, “Ken”, “Josh”));

This pushes the list containing “Sara”, “Ken” and “Josh” onto the end of the @people array, so that@people now looks like this: (“Howard”, “Sara”, “Ken”, “Josh”)

Now the ticket office opens, and Howard buys his ticket and leaves the line. To remove the first itemfrom the array, use the shift function:

my $who = shift(@people);

This sets $who to “Howard”, and also removes “Howard” from the @people array, so @people nowlooks like this: (“Sara”, “Ken”, “Josh”)

Suppose Josh gets paged, and has to leave. To remove the last item from the array, use the popfunction:

my $who = pop(@people);

This sets $who to “Josh”, and @people is now (“Sara”, “Ken”)

Both shift and pop change the array itself, by removing an element from the array.

Finding the Length of Arrays

If you want to find out how many elements are in a given array, you can use the scalar function:

my @people = (“Howard”, “Sara”, “Ken”, “Josh”);



my $linelen = scalar(@people);print “There are $linelen people in line.\n”;

This prints “There are 4 people in line.”

Array Slices

You can retrieve part of an array by specifying the range of indices to retrieve:

my @colors = (“cyan”, “magenta”, “yellow”, “black”);my @slice = @colors[1..2];

This example sets @slice to (“magenta”, “yellow”).

Finding An Item In An Array

If you want to find out of a particular element exists in an array, you can use the grep function:

my @results = grep(/pattern/,@listname);

/pattern/ is a regular expression for the pattern you’re looking for. It can be a plain string, such as /Boxkite/, or a complex regular expression pattern. /pattern/ will match partial strings inside each array element.To match the entire array element, use /^pattern$/, which anchors the pattern match to the beginning (^)and end ($) of the string. grep returns a list of the elements that matched the pattern.

Splitting an Array

A very useful function in Perl is split, which splits up a string and places it into an array. The functionuses a regular expression to specify the character on which the string has to be splitted.

The split function is used like this:

Hashes

A hash is a special kind of array — an associative array, or paired list of elements. Each pair consistsof a string key and a data value.

Perl hash names are prefixed with a percent sign (%). Here’s how they’re defined:

$info = “Caine:Michael:Actor:14, Leafy Drive”;@personal = split(/:/, $info);which has the same overall effect as@personal = (“Caine”, “Michael”, “Actor”, “14, Leafy Drive”);

my %colors = ( “red”, “#ff0000”, “green”, “#00ff00”, “blue”, “#0000ff”, “black”, “#000000”, “white”, “#ffffff” );

76

This particular example creates a hash named %colors which stores the RGB HEX values for the

named colors. The color names are the hash keys; the hex codes are the hash values.

Remember that there’s more than one way to do things in Perl, and here’s the other way to define thesame hash:

The => operator automatically quotes the left side of the argument, so enclosing quotes around the keynames are not needed.

To refer to the individual elements of the hash, you’ll do:

$colors{‘red’}

Here, “red” is the key, and $colors{‘red’} is the value associated with that key. In this case, the valueis “#ff0000”.

To print out all the values in a hash, you can use a foreach loop:

foreach my $color (keys %colors) {

print “$colors{$color}=$color\n”;}

Pearl provides the keys function, which returns a list of the keys of the named hash. One drawback is

that keys %hashname will return the keys in unpredictable order .

in this example, keys %colors could return (“red”, “blue”, “green”, “black”, “white”) or (“red”, “white”,“green”, “black”, “blue”) or any combination thereof. If you want to print out the hash in exact order, youhave to specify the keys in the foreach loop:

foreach my $color (“red”,”green”,”blue”,”black”,”white”) {print “$colors{$color}=$color\n”;

}

Let’s write a CGI program using the colors hash.

my %colors = ( red => “#ff0000”, green => “#00ff00”, blue => “#0000ff”, black => “#000000”, white => “#ffffff” );



Program 4.6: colors.cgi - Print Hash Variables Program

Notice we’ve had to add backslashes to escape the quotes in this double-quoted string:

print “<font color=\”$colors{$color}\”>$color</font>\n”;

A better way to do this is to use Perl’s qq operator:

print qq(<font color=”$colors{$colors}”>$color</font>\n);

qq creates a double-quoted string for you. And it’s much easier to read without all those backslashesin there.

Adding Items to a Hash

To add a new value to a hash, you simply do:

$hashname{newkey} = newvalue;

Using our colors example again, here’s how to add a new value with the key “purple”:

$colors{purple} = “#ff00ff”;

If the named key already exists in the hash, then an assignment like this overwrites the previous valueassociated with that key.

#!/usr/bin/perl -wTuse CGI qw(:standard);use CGI::Carp qw(warningsToBrowser fatalsToBrowser);use strict;

# declare the colors hash:my %colors = ( red => “#ff0000”, green=> “#00ff00”, blue => “#0000ff”, black => “#000000”, white => “#ffffff” );

# print the html headersprint header;print start_html(“Colors”);

foreach my $color (keys %colors) { print “<font color=\”$colors{$color}\”>$color</font>\n”;}print end_html;

78

Deleting Items From a Hash

You can delete an individual key/value pair from a hash with the delete function:

delete $hashname{key};

If you want to empty out the entire hash, do:

%hashname = ();

Values

We’ve already seen that the keys function returns a list of the keys of a given hash. Similarly, thevalues function returns a list of the hash values:

Determining Whether a Hash is Empty

You can use the scalar function on hashes as well:

scalar($hashname);

This returns true or false value — true if the hash contains any key/value pairs. The value returneddoes not indicate how many pairs are in the hash, however. If you want to find that number, use:

my %colors = (red => "#ff0000", green=> "#00ff00", blue => "#0000ff", black => "#000000", white => "#ffffff" ); my @keyslice = keys %colors; # @keyslice now equals a randomly ordered list of # the hash keys: # ("red", "green", "blue", "black", "white") my @valueslice = values %colors; # @valueslice now equals a randomly ordered list of # the hash values: # ("ff0000", "#00ff00", "#0000ff", "#000000", "#ffffff")

As with keys, values returns the values in unpredictable order.

Here’s an example:

my %colors = (red => “#ff0000”, green=> “#00ff00”, blue => “#0000ff”, black => “#000000”, white => “#ffffff” );



Perl Control Structures

Control structures include conditional statements, such as if/elseif/else blocks, as well as loops likeforeach, for and while.

Conditional Statements

If Condition

You’ve already seen if/elsif in action. The structure is always started by the word if, followed by acondition to be evaluated, then a pair of braces indicating the beginning and end of the code to be executedif the condition is true. The condition is enclosed in parentheses:

if (condition) { code to be executed}

The condition statement can be anything that evaluates to true or false. In Perl, any string is trueexcept the empty string and 0. Any number is true except 0. An undefined value (or undef) is false.Youcan also test whether a certain value equals something, or doesn’t equal something, or is greater than orless than something. There are different conditional test operators, depending on whether the variable youwant to test is a string or a number:

Table 4.1 Relational and Equality Operators

If it’s a string test, you use the letter operators (eq, ne, lt, etc.), and if it’s a numeric test, you use thesymbols (==, !=, etc.). Here is an example of a numeric test. If $varname is greater than 23, the codeinside the curly braces is executed:

my $numcolors = scalar(keys(%colors));print “There are $numcolors in this hash.\n”;

This will print out “There are 5 colors in this hash.”

Test Numbers Strings

$x is equal to $y $x == $y $x eq $y

$x is not equal to $y $x != $y $x ne $y

$x is greater than $y $x > $y $x gt $y

$x is greater than or equal to $y $x >= $y $x ge $y

$x is less than $y $x < $y $x lt $y

$x is less than or equal to $y $x <= $y $x le $y

80

Table 4.2 Logical Operators

Logical operators are evaluated from left to right. Precedence indicates which operator is evaluatedfirst, in the event that more than one operator appears on one line. In a case like this:

condition1 || condition2 && condition3

condition2 && condition3 is evaluated first, then the result of that evaluation is used in the || evaluation.‘and’ and ‘or’ work the same way as && and ||, although they have lower precedence than their symboliccounterparts.

Unless:

unless is similar to if. Let’s say you wanted to execute code only if a certain condition were false. Youcould do something like this:

if ($varname > 23) { # do stuff here if the condition is true}

If you need to have more than one condition, you can add elsif and else blocks:

if ($varname eq “somestring”) { # do stuff here if the condition is true}elsif ($varname eq “someotherstring”) { # do other stuff}else { # do this if none of the other conditions are met}

You can join conditions together by using logical operators:

Operator Example Explanation

&& condition1 && condition2

True if condition1 and condition2 are both true

|| condition1 || condition2 True if either condition1 or condition2 is true

and condition1 and condition2 Same as && but lower precedence

or condition1 or condition2 Same as || but lower precedence



Looping

Loops allow you to repeat code for as long as a condition is met. Perl has several loop control structures:foreach, for, while and untilwhile and untilwhile and untilwhile and untilwhile and until .

Foreach Loops

foreach iterates through a list of values:foreach my $i (@arrayname) {

# code here}

This loops through each element of @arrayname, setting $i to the current array element for each passthrough the loop. You may omit the loop variable $i:

foreach (@arrayname) { # $_ is the current array element}

This sets the special Perl variable $_ to each array element. $_ does not need to be declared (it’s partof the Perl language) and its scope localized to the loop itself.

For Loops

Perl also supports C-style for loops:

for ($i = 1; $i < 23; $i++) {

if ($varname != 23) { # code to execute if $varname is not 23}

The same test can be done using unless :

unless ($varname == 23) { # code to execute if $varname is not 23}

There is no “elseunless”, but you can use an else clause:

unless ($varname == 23) { # code to execute if $varname is not 23} else { # code to execute if $varname is 23}

82

# code here}

The for statement uses a 3-part conditional: the loop initializer; the loop condition (how long to run theloop); and the loop re-initializer (what to do at the end of each iteration of the loop). In the above example,the loop initializes with $i being set to 1. The loop will run for as long as $i is less than 23, and at the endof each iteration $i is incremented by 1 using the auto-increment operator (++).

The conditional expressions are optional. You can do infinite loops by omitting all three conditions:

for (;;) {# code here

}

You can also write infinite loops with while.

While Loops

A while loop executes as long as particular condition is true:

while (condition) {# code to run as long as condition is true

}

Until Loop

until is the reverse of while. It executes as long as a particular condition is NOT true:

until (condition) {# code to run as long as condition is not true

}

Working with CGI

CGI Environment Variables

When a CGI program is called, the information that is made available to it can be roughly broken intothree groups:

l Information about the client, server, and user

l Form data that the user supplied

l Additional pathname information

Most information about the client, server, or user is placed in CGI environment variables. Form data iseither incorporated into an environment variable, or is included in the “body” of the request. And extrapath information is placed in environment variables.



Much of the most crucial information needed by CGI applications is made available via environmentvariables. Programs can access this information as they would any environment variable (via the %ENVarray in Perl).

This section concentrates on showing examples of some of the more typical uses of environmentvariables in CGI programs. The following table shows a full list of environment variables available forCGI.

Table 4.3 List of CGI Environment variables

Environment Variable Description

GATEWAY_INTERFACE The revision of the Common Gateway Interface that the server uses.

SERVER_NAME The server's hostname or IP address.

SERVER_SOFTWARE The name and version of the server software that is answering the client request.

SERVER_PROTOCOL The name and revision of the information protocol the request came in with.

SERVER_PORT The port number of the host on which the server is running.

REQUEST_METHOD The method with which the information request was issued.

PATH_INFO Extra path information passed to a CGI program.

PATH_TRANSLATED The translated version of the path given by the variable PATH_INFO.

SCRIPT_NAME The virtual path (e.g., /cgi-bin/program.pl) of the script being executed.

DOCUMENT_ROOT The directory from which Web documents are served.

QUERY_STRING The query information passed to the program. It is appended to the URL with a "?".

REMOTE_HOST The remote hostname of the user making the request.

REMOTE_ADDR The remote IP address of the user making the request.

AUTH_TYPE The authentication method used to validate a user.

REMOTE_USER The authenticated name of the user.

REMOTE_IDENT The user making the request. This variable will only be set if NCSA IdentityCheck flag is enabled, and the client machine supports the RFC 931 identification scheme (ident daemon).

CONTENT_TYPE The MIME type of the query data, such as "text/html".

CONTENT_LENGTH The length of the data (in bytes or the number of characters) passed to the CGI program through standard input.

HTTP_FROM The email address of the user making the request. Most browsers do not support this variable.

HTTP_ACCEPT A list of the MIME types that the client can accept.

HTTP_USER_AGENT The browser the client is using to issue the request.

HTTP_REFERER The URL of the document that the client points to before accessing the CGI program.

84

Let’s start with a simple program that displays various information about the server, such as the CGIand HTTP revisions used and the name of the server software.

Program 4.7: envvar.cgi - Print environment variables

Accessing Form Input

Forms provide a way to get input from users and supply it to a CGI program, as shown in Figure 4.4.The Web browser allows the user to select or type in information, and then sends it to the server when theSubmit button is pressed. In this chapter, we’ll talk about how the CGI program accesses the form input.

Fig 4.4: Form interaction with CGI

#!/usr/local/bin/perl print "Content-type: text/html", "\n\n"; print "<HTML>", "\n"; print "<HEAD><TITLE>About this Server</TITLE></HEAD>", "\n"; print "<BODY><H1>About this Server</H1>", "\n"; print "<HR><PRE>"; print "Server Name: ", $ENV{'SERVER_NAME'}, "<BR>", "\n"; print "Running on Port: ", $ENV{'SERVER_PORT'}, "<BR>", "\n"; print "Server Software: ", $ENV{'SERVER_SOFTWARE'}, "<BR>", "\n"; print "Server Protocol: ", $ENV{'SERVER_PROTOCOL'}, "<BR>", "\n"; print "CGI Revision: ", $ENV{'GATEWAY_INTERFACE'}, "<BR>", "\n"; print "<HR></PRE>", "\n"; print "</BODY></HTML>", "\n"; exit (0);



Query Strings

One way to send form data to a CGI program is by appending the form information to the URL, aftera question mark. You may have seen URLs like the following:

Up to the question mark (?), the URL should look familiar. It is merely a CGI script being called, by thename name.pl. What’s new here is the part after the “?”. The information after the “?” character isknown as a query string. When the server is passed a URL with a query string, it calls the CGI programidentified in the first part of the URL (before the “?”) and then stores the part after the “?” in theenvironment variable QUERY_STRING. The following is a CGI program called name.pl that usesQUERY_STRING to print the information passed.

A Simple Form

Although the previous example will work, the following example is a more realistic illustration of howforms work with CGI. Instead of supplying the information directly as part of the URL, we’ll use a formto solicit it from the user.

http://some.machine/cgi-bin/name.pl?fortune

#!/usr/local/bin/perlprint “Content-type: text/plain”, “\n\n”;$query_string = $ENV{‘QUERY_STRING’};if ($query_string eq “fortune”) { print ‘query string is fortune‘;} elsif ($query_string eq “finger”) { print ‘query string is finger‘;} else { print ‘invalid query string‘;}exit (0);

You can execute this script as either:

http://some.machine/cgi-bin/name.pl?fortunehttp://some.machine/cgi-bin/name.pl?finger

or

http://some.machine/cgi-bin/name.pl

and you will get different output.

86

Since this is HTML, the appearance of the form depends on what browser is being used. Figure 4.5shows what the form looks like in Netscape.

Fig 4.5 Simple form in Netscape

This form consists of one text field titled “Command:” and two buttons. The Submit Form! button isused to send the information in the form to the CGI program specified by the ACTION attribute. TheClear Form button clears the information in the field.

The two attributes within the <FORM> tag (ACTION and METHOD) are very important. The ACTIONattribute specifies the URL of the CGI program that will process the form information. You are not limitedto using a CGI program on your server to decode form information; you can specify a URL of a remotehost if a program that does what you want is available elsewhere.

<HTML><HEAD><TITLE>Simple Form!</TITLE></HEAD><BODY><H1>Simple Form!</H1><HR><FORM ACTION=”/cgi-bin/process.pl” METHOD=”GET”>Command: <INPUT TYPE=”text” NAME=”command” SIZE=40><P><INPUT TYPE=”submit” VALUE=”Submit Form!”><INPUT TYPE=”reset” VALUE=”Clear Form”></FORM><HR></BODY></HTML>



The METHOD attribute specifies how the server will send the form information to the program.POST sends the data through standard input, while GET passes the information through environmentvariables. If no method is specified, the server defaults to GET. Both methods have their own advantagesand disadvantages.

Now, assuming that the user enters “fortune” into the text field, when the Submit Form! button ispressed the browser sends the following request to the server:

GET /cgi-bin/unix.pl?command=fortune HTTP/1.0.. (header information).The server executes the script called process.pl in the cgi-bin directory, and places the string

“command=fortune” into the QUERY_STRING environment variable. Let’s go through the simpleprocess.pl CGI program that handles this form:

#!/usr/local/bin/perlprint “Content-type: text/plain”, “\n\n”;$query_string = $ENV{‘QUERY_STRING’};($field_name, $command) = split (/=/, $query_string);

After printing the content type and getting the query string from the %ENV array, we use the splitfunction to separate the query string on the “=” character into two parts, with the first part before theequal sign in $field_name, and the second part in $command. In this case, $field_name will contain“command” and $command will contain “fortune.”

Since we used the GET method, all the form data is included in the URL. So we can directly accessthis program without the form, by using the following URL:

http://some.machine/cgi-bin/unix.pl?command=fortune

It will work exactly as if you had filled out the form and submitted it.

if ($command eq “fortune”) { print ‘query string is fortune‘;} elsif ($command eq “finger”) { print ‘query string is finger‘;} else { print invalid query string‘;}exit (0);

88

The GET and POST Methods

In the previous example, we used the GET method to process the form. However, there is anothermethod we can use, called POST. Using the POST method, the server sends the data as an input streamto the program. That is, if in the previous example the <FORM> tag had read:

<FORM ACTION=”process.pl” METHOD=”POST”>

the following request would be sent to the server:

POST /cgi-bin/unix.pl HTTP/1.0.. (header information).Content-length: 15command=fortune

The version of process.pl that handles the form with POST data follows. First, since the server passesinformation to this program as an input stream, it sets the environment variable CONTENT_LENGTH tothe size of the data in number of bytes (or characters). We can use this to read exactly that much datafrom standard input.

#!/usr/local/bin/perl$size_of_form_information = $ENV{‘CONTENT_LENGTH’};

Second, we read the number of bytes, specified by $size_of_form_information, from standard inputinto the variable $form_info.

read (STDIN, $form_info, $size_of_form_information);

Now we can split the $form_info variable into a $field_name and $command, as we did in the GETversion of this example. As with the GET version, $field_name will contain “command,” and $commandwill contain “fortune” (or whatever the user typed in the text field). The rest of the example remainsunchanged:

($field_name, $command) = split (/=/, $form_info);print “Content-type: text/plain”, “\n\n”;if ($command eq “fortune”) {print ‘query string is fortune‘;} elsif ($command eq “finger”) { print ‘query string is finger‘;} else { print invalid query string‘;}exit (0);



Since it’s the form that determines whether the GET or POST method is used, the CGI programmercan’t control which method the program will be called by. So scripts are often written to support bothmethods. The following example will work with both methods:

The environment variable REQUEST_METHOD contains the request method used by the form. Inthis example, the only new thing we did was check the request method and then assign the $form_infovariable as needed.

Encoded Data

So far, we’ve shown an example for retrieving very simple form information. However, form informationcan get complicated. Since under the GET method the form information is sent as part of the URL, therecan’t be any spaces or other special characters that are not allowed in URLs. Therefore, some specialencoding is used. Consider the following form:

<HTML><HEAD><TITLE>When’s your birthday?</TITLE></HEAD><BODY><H1>When’s your birthday?</H1><HR><FORM ACTION=”/cgi-bin/birthday.pl” METHOD=”POST”>

Birthday (in the form of mm/dd/yy): <INPUT TYPE=”text” NAME=”birthday” SIZE=40>

#!/usr/local/bin/perl$request_method = $ENV{‘REQUEST_METHOD’};if ($request_method eq “GET”) { $form_info = $ENV{‘QUERY_STRING’};} else { $size_of_form_information = $ENV{‘CONTENT_LENGTH’}; read (STDIN, $form_info, $size_of_form_information);}($field_name, $command) = split (/=/, $form_info);print “Content-type: text/plain”, “\n\n”;if ($command eq “fortune”) {print ‘query string is fortune‘;} elsif ($command eq “finger”) { print ‘query string is finger‘;} else { print invalid query string‘;}exit (0);

90

<P><INPUT TYPE=”submit” VALUE=”Submit Form!”><INPUT TYPE=”reset” VALUE=”Clear Form”></FORM><HR></BODY></HTML>

When the user submits the form, the client issues the following request to the server (assuming theuser entered 11/05/73):

POST /cgi-bin/birthday.pl HTTP/1.0.. (information).Content-length: 21birthday=11%2F05%2F73

In the encoded form, certain characters, such as spaces and other character symbols, are replaced bytheir hexadecimal equivalents. In this example, our program needs to “decode” this data, by convertingthe “%2F” to “/”.

Here is the CGI program-birthday.pl-that handles this form:

#!/usr/local/bin/perl$size_of_form_information = $ENV{‘CONTENT_LENGTH’};read (STDIN, $form_info, $size_of_form_information);

The following complicated-looking regular expression is used to “decode” the data.

$form_info =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack (“C”, hex ($1))/eg;

In the case of this example, it will turn “%2F” into “/”. The rest of the program should be easy tofollow:

($field_name, $birthday) = split (/=/, $form_info);print “Content-type: text/plain”, “\n\n”;print “Your birthday is on: $birthday \n”;exit (0);

Extra Path Information

Besides passing query information to a CGI script, you can also pass additional data, known as extrapath information, as part of the URL. The server gauges where the CGI program name ends; anything



following is deemed “extra” and is stored in the environment variable PATH_INFO. The following linecalls a script with extra path information:

http://some.machine/cgi-bin/display.pl/cgi/cgi_doc.txt

Since the server knows that display.pl is the name of the program, the string “/cgi/cgi_doc.txt” isstored in the environment variable PATH_INFO. Meanwhile, the variable PATH_TRANSLATED is alsoset, which maps the information stored in PATH_INFO to the document root directory (e.g., /usr/local/etc/httpd/ public/cgi/cgi-doc.txt in case of UNIX OS).

Here is a CGI script display.pl that can be used to display text files located in the document roothierarchy:

Instead of using the PATH_TRANSLATED environment variable, you can use a combination ofPATH_INFO and DOCUMENT_ROOT, which contains the physical path to the document root directory.The variable PATH_TRANSLATED is equal to the following statement:

$path_translated = join (“/”, $ENV{‘DOCUMENT_ROOT’}, $ENV{‘PATH_INFO’};

However, the DOCUMENT_ROOT variable is not set by all servers, and so it is much safer andeasier to use PATH_TRANSLATED.

4.5 CGI CONSIDERATIONS

Now we have learnt some basics of CGI programming, let’s look at some considerations that need tobe taken to create effective virtual documents.

First and most importantly, you need to understand what kind of information is to be presented. If it is

#!/usr/local/bin/perl$plaintext_file = $ENV{‘PATH_TRANSLATED’};print “Content-type: text/plain”, “\n\n”;if (open (FILE, “<“ . $plaintext_file)) { while (<FILE>) { print; } close (FILE);} else { print “Sorry! The file you specified cannot be read!”, “\n”; }exit (0);

92

plain text or HTML, there is no problem. However, if the data is unreadable by the client, a gateway hasto be written to effectively translate that data.

This leads to another important matter: The original (or “unreadable”) data has to be organized in sucha way that it will be easy for the gateway to read from and write to the data source. Once you have thegateway and you can retrieve data, you can present it in numerous ways. For example, if the data isnumerical in nature, you can create virtual graphs and plots using various utility software. On the otherhand, if the data consists of graphical objects, you can modify the information using numerous graphicmanipulation tools.

In summary, you need to think about what you want to present and how to prevent it long before theactual process of implementing CGI programs. This will ensure the creation of effective virtual documents.

QUESTIONS

1. What is CGI? Give examples of CGI application and explain any one of them.

2. What are CGI environment variables? Explain any Five.

3. Give differences between Java Script and CGI programming.

4. Explain CGI.pm module with an example.

5. Explain different types of PEARL Variables.

6. Explain PEARL control structures with appropriate examples.

7. What is Query String? Explain with an example.

8. What are GET and POST methods? What is the difference between GET and POST Methods?

9. Write a simple CGI application which accepts the user information and displays the Information entered to the

user.

10. Write a CGI application which accepts 3 numbers from the user and displays the LCM of three numbers using

GET and POST methods.

11. What is Extra Path information? Explain with an example.


BSIT-52-Main-pg-1-92

Documents

Transcript of BSIT-52-Main-pg-1-92