Chapter 1
As such, no one owns or controls the web. In fact, it is impossible to own or control by its very nature and design. In fact, it is not even an it. You cant hold the web or make it tangible. Instead, you can think 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 to the users, machines, and software programs of a specific organization, usually a company. Since organizations are typically small and have more control over policies and information systems, intranets are often more controllable.
cases, the web browser will display a document exactly the way it receives it from the web server. For example, if the document requested is an image, the web browser will display it directly. Similarly, plain text files will be displayed just as they are sent. However, if the document is an HTML document, the web browser will interpret the HTML and display it according to the instructions contained within the HTML code. HTML (Hyper Text Markup Language) is a very simple language used to describe the logical structure of a document. Actually, though HTML is often called a programming language it is really not. Programming languages are Turing-complete, or computable. That is, programming languages can be used to compute something such as the square root of pi or some other such task. Typically programming languages use conditional branches and loops and operate on data contained in abstract data structures. HTML is much easier than all of that. HTML is simply a markup language used to define a logical structure rather than compute anything. For example, it can describe which text the browser should emphasize, which text should be considered body 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 web browser running on any machine or operating system. This is because it only focuses on describing the logical 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 the browser 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 >. Most tags in HTML are ended with a similar tag with a slash in it to specify an end to the formatting. It is important 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 bold tag was opened first. The general rule is that tags on the inside should be closed before tags on the outside. Finally, HTML tags can not only define a formatting option, they can also define attributes to those
options as well. To do so, you specify an attribute and an attribute value within the HTML tag. For example, 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 attribute values within quotes unless white space is included in the value. Secondly, it is not necessary to have a space before or after the equal sign that matches an attribute to its value. When you close an HTML tag with an attribute, you should not include attribute information in the closing. Finally, you should know that web browsers do not care about white space that you use in your HTML document.
HTTP
HTTP is a protocol that is defined in several RFCs (Request for Comments) located at the Internic and 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 send a request using a very specific format. The server will then respond and close the connection. The main thing 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 is a 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 big hunk of computer (called a server) sits in some office somewhere with a bunch of files that people might want access to. This computer runs a software package that listens all day long to requests over the wires. Typically, these requests will be in some language and some format that the computer understands, but in English sound something like, hello software package running on a big hunk of computer, please give me 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 over the wires to the client who requested it, and then wait for another request from the same or another client. Usually, the client is actually a software program, like Netscape Navigator, that is being operated by a person who is the one who really wants to see the file. The client software however, deals with all the underlying client/server protocol stuff and then displays the document (that usually means interpreting HTML) The whole process looks something like the figure below:
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 dynamic response. Thus, the first thing that you must learn how to do is get user input from a web browser to a web server. Fortunately the HTTP protocol provides two main ways to send information to a web server above and beyond the URL of a requested file. These two ways are the POST and GET methods.
Thus, it would not be strange for a web server to get a POST request that looked something like the following: POST /cgi-bin/phone_book.cgi HTTP/1.0 Referer: http://www.somedomain.com/Direcory/file.html User-Agent: Mozilla/1.22 (Windows: I: 32bit) Accept */* Content-type: application/x-www-form-urlencoded Content-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 the request. This is important because a CGI script could easily parse through the variables in the body using the 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.
from the server). A CGI application must be able to take strings of data and translate them from one language to another constantly and quickly. The CGI script will be responsible for processing the form data, which is filled by user and responding to 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 as what host the user is connecting from, or input the user has supplied using HTML form syntax). The program then processes that data and the server passes the programs response back to the Web browser.
include dynamic content. Unlike a plain HTML page, which contains static content that always remains the same, a JSP page can change its content based on any number of variable items, including the identity of the user, the users browser type, information provided by the user, and selections made by the user.
QUESTIONS
1. 2. 3. 4. 5. 6. 7. What is web? What is the difference between intranet and internet? Explain GET and POST method briefly. Explain how HTTP is used in client/server system. Discuss the difference between static and dynamic web pages. HTML is the Language of the Web Explain? Why do we require JavaScripts and DHTML? Brief about role played by CGI programming in web programming?
Chapter 2
HTML
-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms youll 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 linear fashion. HTML does not hold to that pattern and allows the person viewing the World Wide Web 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 Hypertext Markup Louie didnt flow correctly. Because its a language, really but the language is plain English.
Publish documents to the Internet in a platform independent format Create links to related works from your document Include graphics and multimedia data with your document Link to non-World Wide Web information resources on the Internet
10
Chapter 2 - HTML
HTML was originally intended to be used for encoding document structures. While there are now many formatting and formatting-like tags, there are also numerous tags that apply to text structures like headings, paragraphs and tables.
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of 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 title of your document. The title is displayed in your browsers caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.
11
HTML Tags
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 Elements
Remember the HTML example from the previous page:
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
This is an HTML element:
12
Why do We Use Lowercase Tags?
Chapter 2 - HTML
We have just said that HTML tags are not case sensitive: <B> means the same as <b>. When you surf the Web, you will notice that most tutorials use uppercase HTML tags in their examples. We always use lowercase tags. Why? If you want to prepare yourself for the next generations of HTML, you should start using lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 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 on your page. This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can 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 browser that 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.
13
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)
Chapter 2 - HTML
The HTML tag identifies a document as an HTML document. All HTML documents should start with the <HTML> tag and end with the </HTML> tag.
Example
The following example begins and ends a short document with the HTML tag.
<HTML> <BODY> This is a small HTML file. </BODY> </HTML>
Syntax
<HEAD>...</HEAD>
Example
<HEAD> <TITLE> Mozilla speaks out</TITLE> <BASE HREF="http://www.mozilla.com"> </HEAD>
15
You can specify actions to occur when the document finishes loading or is unloaded, and when the window in which the document is displayed receives or loses focus.
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>
BACKGROUND=bgURL specifies an image to display in the background of the document. The URL value can be an absolute URL (for example, http://www.yourcompany.com/images/image1.htm) or a relative URL (for example, images/image1.gif). The image is tiled, which means it is repeated in 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 has not been clicked on (or followed). ALINK=color specifies the color to which links briefly change when clicked. After flashing the ALINK color,
16
Chapter 2 - HTML
visited links change to the VLINK color if it has been specified; otherwise they change to the browsers 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 displayed receives 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 displayed receives 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 links to blue, visited links to green, and active links to red:
17
ADDRESS elements start on a new line. Most browsers do not add extra space before an ADDRESS element.
Syntax
<ADDRESS CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" >... </ADDRESS>
Example
<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
Chapter 2 - HTML
<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" >
ALIGN
specifies the horizontal alignment of the block of content. The value can be one of the following:
l l l
LEFT aligns the contents of the DIV block to the left (the default). CENTER centers the contents of the DIV block. 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 STYLE attribute is a universal attribute available to all tags inside the body of a document.
19
Syntax
<H1 <H2 <H3 <H4 <H5 <H6 ALIGN="LEFT"|"CENTER"|"RIGHT">...</H1> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H2> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H3> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H4> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H5> ALIGN="LEFT"|"CENTER"|"RIGHT">...</H6>
All the headings from H1 through H6 can also take the following universal attributtes:
CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style"
ALIGN
specifies the horizontal alignment of the heading. The value can be one of these:
l l l
LEFT aligns the heading flush left (the default). CENTER centers the heading text. RIGHT aligns the heading flush right.
Example
<H1>Level <H2>Level <H3>Level <H4>Level <H5>Level <H6>Level 1 2 3 4 5 6 Heading</H1> Heading</H2> Heading</H3> Heading</H4> Heading</H5> Heading</H6>
P (paragraph)
The P tag displays a paragraph. All P elements start on a new line and are usually preceded by extra space.
20
Chapter 2 - HTML
You can also use the P tag to insert a line break with extra space. To insert a line break without adding extra 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 has no content), or the paragraph is followed by an element that starts on a new line and is preceded by extra space.
Syntax
<P ALIGN="LEFT"|"CENTER"|"RIGHT" CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" > ... </P>
ALIGN
The value can be one of these:
l l l
LEFT aligns the paragraph flush left (the default). CENTER centers the paragraph. RIGHT aligns the paragraph flush right.
<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>
LISTS
This section describes the tags for displaying lists:
21
l l l
OL UL LI
OL (ordered list)
The OL tag displays an ordered, or numbered, list. The default numbering style is determined by the browser, but you can use the tags TYPE attributes to change the numbering sequence and numbering style. Use the LI tag to designate the individual list items.
Syntax
<OL START="value" TYPE="A"|"a"|"I"|"i"|"1" CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" > ... </OL>
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 l l l l
A specifies a sequence of uppercase letters a specifies a sequence of lowercase letters I specifies a sequence of uppercase Roman numerals i specifies a sequence of lowercase Roman numeral 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 are shown as roman numerals and the first item has the number three.
22
<P>The following steps outline how to create HTML files:</P>
Chapter 2 - HTML
<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>
UL (unordered list)
The UL tag displays a bulleted list. You can use the tags TYPE attribute to change the bullet style. Use the LI tag to designate the individual list items in the list.
Syntax
<UL CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" > TYPE="CIRCLE"|"DISC"|"SQUARE"
TYPE
defines the type of bullet used for each list item. The value can be one of the following:
l l l
CIRCLE specifies a hollow bullet. DISC specifies a solid round bullet (Netscape Navigators default). SQUARE specifies a square bullet.
Example
<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>
23
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.
Syntax
<LI TYPE="DISC"|"CIRCLE"|"SQUARE"|"A"|"a"|"I"|"i"|"1" VALUE="number" CLASS="styleClass" ID="namedPlaceOrStyle" LANG="ISO" STYLE="style" >
TYPE
specifies the type of symbol or numbering sequence to use before each item.
l l l l l l l l
DISC specifies a solid bullet. CIRCLE specifies a hollow bullet. SQUARE specifies a square bullet. A specifies a sequence of uppercase letters. a specifies a sequence of lowercase letters. I specifies a sequence of uppercase Roman numerals. i specifies a sequence of lowercase Roman numeral. 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 list See. OL for information on the types of numbering available.
24
Used Within
DIR, DL, OL, UL, MENU
Chapter 2 - HTML
Example
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>
TABLES (table)
The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table, use the 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 the table. (Individual rows and cells in the table can have their own background color.) You can use the CELLSPACING attribute to specify the distance between cells in the table and the CELLPADDING attribute to specify the distance between the border and content of every cell. If you specify the width and height of the table, the browser will do its best to make the table fit the specified dimensions, but in some cases this may not be possible. For example, if the table contains cells that contain non-wrapping long lines, the table may not fit in a specified width.
Syntax
<TABLE ALIGN="LEFT|RIGHT" BGCOLOR="color" BORDER="value" CELLPADDING="value" CELLSPACING="value" HEIGHT="height" WIDTH="width" COLS="numOfCols" HSPACE="horizMargin" VSPACE="vertMargin" > ... </TABLE>
25
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 right of the table. RIGHT aligns the table on the right. The content following the table flows to the left of the table. CENTER aligns the table in the center. Content does not flow on either side.
l l
BGCOLOR=color sets the color of the background for the table. This color can be overridden by a BGCOLOR tag in 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 an integer. A value of 0 means the table has no border. You can also supply the BORDER attribute without 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 the cell. 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 of each cell. The height value can be a number of pixels, given as an integer, or a percentage of the height of the page or parent element, given as an integer followed by the percent sign. The table is 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 of each cell. The width value can be a number of pixels, given as an integer, or a percentage of the width of the page or parent element, given as an integer followed by the percent sign. The table is 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
Chapter 2 - HTML
column in the table occupies a virtual column. You would typically set the COLS attribute to be equal to the number of columns in the table to indicate that all the columns in the table have the same width. If the WIDTH attribute is supplied, the COLS attribute indicates how many virtual columns fit in the specified width. If the WIDTH attribute is not supplied, the COLS attribute indicates how many virtual columns fit in the current window or frame. Each column in the table occupies one of the virtual columns. Suppose that the WIDTH attribute is 80% and the COLS attribute is 4. In this case, each virtual column takes up 20% of the width of the window. Each actual column in the table occupies a virtual column, so it occupies 20% of the width of the window, so long as the table has from 1 to 4 columns inclusive. Note, however, that if the minimum width needed to display the contents of an actual column is greater than the width of a virtual column, then the width of the column is expanded to fit its contents. If the table has more actual columns than the COLS value, then the columns in excess of the COLS value are displayed in the minimum width required to fit their contents, and the other columns divide the remaining space equally between them. For example, suppose the table has 4 columns, the WIDTH attribute is 80%, and the COLS value is 3. What happens here is that the table takes up 80% of the width of the window. The fourth column uses the minimum width necessary to display the contents of the column. The other 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 surrounding content.
27
<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>
FORMATTING TAGS
l l l
BR CENTER 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 is wrapping around an element such as an image, you can use the CLEAR attribute of the BR tag to force the 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.
Syntax
<BR CLEAR="ALL"|"LEFT"|"RIGHT" >
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 the text appears at the next completely clear line. LEFT causes text to appear at the next clear left margin. That is, text is not allowed to wrap to the left of any element. RIGHT causes text to appear at the next line that has a clear right margin. That is, text is not allowed to wrap to the right of any element.
28
Example
The following example inserts a line break in a speech from Hamlet:
Chapter 2 - HTML
<P>Hamlet's famous speech begins: <BLOCKQUOTE><I>To be, or not to be?<BR> That is the question</I></BLOCKQUOTE>
Syntax
<CENTER>...</CENTER>
Example
<CENTER> <H1>Netscape's Mascot Mozilla</H1> <IMG SRC="/images/mozilla.gif> </CENTER>
HR (horizontal rule)
The HR tag draws a horizontal line across the document frame or window. You can use a horizontal line 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 l l
CENTER displays the line centered (the default). LEFT aligns the line flush left. RIGHT aligns the line flush right.
29
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 measurement value can be a number of pixels, for example 5, or a percentage of the page width or frame width, for example 75%.
Example
The following example draws a horizontal rule between two sentences.
<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.
A as anchor
An anchor identifies a place in an HTML document. To indicate that an <A> tag is being used as an anchor, specify the NAME attribute. Do not nest an anchor within another A tag.
Syntax
<A NAME="anchorName"
> ...
</A>
30
Example
Chapter 2 - HTML
<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>
31
l l l
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" >
The LOWSRC attribute specifies a low-resolution version of the final image. This small file loads quickly when a user accesses the page. The HEIGHT and WIDTH attributes specify the dimensions of the image. Navigator uses these dimensions to reserve a place for the image on the page, and continues loading any text and other page elements instead of waiting for the image to load.
32
FORM (form for user input)
Chapter 2 - HTML
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. Each interface 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 entering text using the interface elements, and then submit the form by clicking a Submit button.
Syntax
<FORM ACTION="serverURL" ENCTYPE="encodingType" METHOD="GET"|"POST" NAME="formName" ONRESET="JScode" ONSUBMIT="JScode" TARGET="windowName" > ... </FORM>
Example
The following example creates a form called LoginForm that contains text fields for user name and password, a submit button, and a cancel button.
< F O R M N A M E = " L o g i n F o r m " M E T H O D = P O S T A C T I ON = " ur l to I n v ok e " > <P>User name: < I N P U T TY P E = " t e x t " N A M E = " u s e r Na m e " S I Z E =" 1 0 " > < P > P a s s wo r d : < I N P U T TY P E = " p a s s w o r d " N A M E = " pa s s w or d " SI Z E = "1 2 " > < P > < I N P UT T Y P E = " s u b m i t " V A L U E = " L o g i n " > < I N P U T TY P E = " b u t t o n " V A L U E = " C an c e l " o n C li c k = "w i n d o w. c l o se ( ) " > </FORM>
33
INPUT TYPE=BUTTON
A button apears in the form. You must specify JavaScript code as the value of the ONCLICK attribute to determine what happens when the user clicks the button.
Syntax
<INPUT TYPE="BUTTON" NAME="buttonName" VALUE="buttonText" ONCLICK="JScode">
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 is submitted, the content of the specified file is sent to the server as the value portion of the name/value pair for this input element. Netscape Navigator displays a Browse button next to the file input element that lets 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 should be multipart/form-data.
Syntax
<INPUT TYPE="FILE" NAME="name" VALUE="filename" >
34
INPUT TYPE=HIDDEN
Chapter 2 - HTML
A hidden input element is an invisible element whose main purpose is to contain data that the user does not 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 having entered it, but note that it is not very hidden because the user can discover it by viewing the document source.
Syntax
<INPUT TYPE="HIDDEN" NAME="name" VALUE="value" >
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.
Syntax
<INPUT TYPE="IMAGE" ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"| "TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM" NAME="name" SRC="location" >
INPUT TYPE=PASSWORD
A password element is a text input field in which each character typed is displayed as a character such as * or a black dot to conceal the actual value.
Syntax
<INPUT TYPE="PASSWORD" MAXLENGTH="maxChar" NAME="name" ONSELECT="JScode" SIZE="charLength" VALUE="textValue" >
35
INPUT TYPE=RADIO
A radio element is a radio button. A set of radio buttons consists of multiple radio buttons that all have the same NAME attribute. Only one radio button in the set can be selected at one time. When the user selects a button in the set, all other buttons in the set are deselected. If one radio button in a set has the CHECKED attribute, that one is selected when the set is first laid out on the window.
Syntax
<INPUT TYPE="RADIO" CHECKED NAME="name" ONCLICK="JScode" VALUE="buttonValue" >
INPUT TYPE=RESET
When a user presses a reset button, all elements in the form are reset to their default values
Syntax
<INPUT TYPE="RESET" NAME="name" ONCLICK="JScode" VALUE="label" >
INPUT TYPE=SUBMIT
When a user clicks a submit button, the form is submitted, which means that the ACTION specified for the form is invoked.
Syntax
<INPUT TYPE="SUBMIT" NAME="name" VALUE="label" >
INPUT TYPE=TEXT
A text element is a single line text input field in which the user can enter text.
Syntax
<INPUT TYPE="TEXT" MAXLENGTH="maxChars"
36
NAME="name" ONBLUR="Scode" ONCHANGE="JScode" ONFOCUS="Scode" ONSELECT="JScode" SIZE="lengthChars" VALUE="text" >
Chapter 2 - HTML
Syntax
<SELECT NAME="selectName" MULTIPLE ONBLUR="JScode" ONCHANGE="JScode" ONCLICK="JScode" ONFOCUS="fScode" SIZE="listLength" > <OPTION...> ... <OPTION ...> </SELECT>
37
Syntax
<SCRIPT LANGUAGE="languageName" SRC="location" > ... </SCRIPT>
Syntax
<NOSCRIPT>...</NOSCRIPT>
38
Chapter 2 - HTML
<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"
39
The CODE attribute is required (otherwise there is no applet to run). Netscape Navigator 3 and Navigator 4 can display applets if the WIDTH and HEIGHT attributes are omitted, but some other browsers 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 few words at a time. The words come and go, so they seem to jump around at the specified speed.
<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>
QUESTIONS
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. What is HTML? Brief about HTML Tags and Elements. List down different classification of tags with 2 examples tags for each category. Explain any 4 HTML Tags with at least 4 attributes with example Write an Example HTML Page containing a table 4 X 3 and each row coloured differently. Write an HTML program to demonstrate text characteristics tags. Write an HTML program to demonstrate applet embedding. Explain how you can embed an image in a HTML page. Create an simple HTML page to demonstrate usage of anchor tags. Explain ordered list and unordered lists.
40
Chapter 3
avaScript is an easy-to-learn way to script your web pagesthat is, have them to do actions that cannot be handled with HTML alone. With JavaScript, you can make text scroll across the screen like 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 standalone applets (like a regular programming language), JavaScript is generally only used inside of HTML documents.
Control Document Appearance and Content Control the Browser Interact with Document Content Interact with the User Read and Write Client State with Cookies Interact with Applets Manipulate Embedded Images
40
41
JavaScript does not have any graphics capabilities, except for the ability to format and display HTML (which, however, does include images, tables, frames, forms, fonts, and other userinterface elements). For security reasons, client-side JavaScript does not allow the reading or writing of files. Obviously, you wouldnt want to allow an untrusted program from any random web site to run on your computer and rearrange your files! JavaScript does not support networking of any kind, exceptan important exception, that it can cause a web browser to download the contents of arbitrary URLs. Finally, JavaScript doesnt have any multithreading capabilities, except whatever comes implicitly from the web browsers internal use of threads.
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, or even any type of object. You dont have to specify the type of variable before creating it. Note that object properties 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 in JavaScript. It is possible for you to define functions, which can be thought of as methods you define outside of any object. When you have the syntax object.method as you do with document.writeln, the method operates on the object given. In this case, the writeln method operates (the operation is writing) to the document (the browser window that you see). This syntactic structure is often used in JavaScript.
welcome
to
my
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 HTML between the parentheses directly without using a script. This, however, makes it possible to create HTML that would vary depending on certain conditions. Insert the following code into your page:
<script language= JavaScript> document.writeln(<p><br> This page is located at +document.location+ <br>This page was last modified on +document.lastModified); </script>
43
The HTML processed by the browser in this case would vary depending on the values of document.lastModified and document.location. Because we wanted this text to be printed in the same position 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 in the head portion of the page if we want it to run before any of HTML in the body is displayed. We can also define JavaScript functions in the head of a page, which we will talk about later. JavaScript has several predefined methods that allow you to create several types of pop-up boxes. Lets 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) important message. With JavaScript we can either show a message to the user either before a page loads or in response to a user action. Here we will make an alert box that appears before the page loads. It will look like this:
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>
This makes a pop-up box, which says, This is a class on JavaScript with an OK button that allows the user to close it and continue. The message can be changed to whatever you like. This type of popup box is called an alert box because it can only be used to alert a viewer. It cannot be used to control where the user may go. Alert() is a method that takes care of displaying the box. The line This is a class on 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 well 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. In JavaScript, 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.):
44
<form> <input type = ''button" value = "Click here to check the weather" onClick = "confirm(Its sunny today ' ) ; " > </form>
We have created an input button inside a form. Input elements such as buttons must always be placed inside 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 that when you click on the button, a confirm box pops up. An event handler allows you to specify what code to execute when an event takes place. You can change the message on the button or in the confirm box by changing the appropriate text in the code. Be sure youre 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 well take a look at one more type of pop-up box, the message input box.
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.
The browser will type your name in the window, along with the welcome message. These input strings can be used to personalize your web page. Lets take a closer look at the first line of code. var yourname = prompt(Type your name here); This is an example of a variable declaration. As we mentioned, a variable in JavaScript can take on any form, such as integer, character, or string. Just like a person has a name, in order to refer to a variable, you must give it a name. You make a variable with the word var as shown above, and the name is the word immediately following var. So in this case the name of the variable is yourname. The equal sign assigns the variable the value to its right (i.e. 4, 8+5, c, chocolate devil). The prompt method will get a value for yourname as you saw when you ran the program. We say that the prompt method returns a value, which is stored in the variable yourname. Some methods return values, some dont.
45
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. What actually 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 the appropriate tag. These should be followed by the JavaScript code to be executed between quotes. Making a simple MouseOver Now that weve looked at what a mouseover can do, lets make one. This mouseover will display picture 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:
<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>
2. View your page with the browser. If the mouseover doesnt work, be sure to check all semicolons, apostrophes, and quotation marks. Heres how the code works. As you can see, all the code that creates the mouseover effect is contained in an anchor tag and is therefore a hyperlink. The name attribute of the image tag assigns a name to the image object. The result is that an object is created representing the image, this object is referred to by the variable named logo which is located inside the document object (it is a property of the document object). The onMouseOver and onMouseOut attributes are Event Handlers that tell the browser what code to execute when the events occur. You can make it so that the mouseover affects another 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 a number of clickable options. There will be a single image which changes when options is selected. We will also 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:
46
47
48
All H5 heading on that page would then look 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; </style> <body> <h5 id="heading">Cascading style sheets</h5> </body> </html>
font-size:20px}
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, theres a third way of doing this. If you for instance have 10 P tags on your page and you want 5 of them 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:
49
<p class=whatever>This is bold text!</p> This is the absolute basic of CSS. Unfortunately CSS is supported a little differently on the different browsers and is only supported at all on 4.x+ browsers.
document.images[3].src = "graphics/button2.gif"
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 often at odds with one another, leading to compatibility problems among different browsers as vendors tried to outdo each other by adding their own new features. Fortunately, most vendors started adopting the DOM standard set by the World Wide Web Consortium, notably Internet Explorer, Netscape and Opera.
Nodes
Each of these different object types will have their own unique methods and properties. But each also
50
implements the Node interface. This is a common set of methods and properties related to the document tree structure. To understand this interface better, take a look at the diagram below which represents a 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 NodeA.childNodes[1] = NodeA2 NodeA.childNodes[2] = NodeA3 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 such as: insertBefore() replaceChild() removeChild() appendChild() cloneNode() These will be covered later. But for now lets look how the document tree reflects the contents of a web page
51
52
<html> <head> <title></title> </head> <body> <p>This is a sample paragraph.</p> </body> </html>
Netscape will add a node for this data, while IE will not. So in Netscape, the JavaScript code shown above would display undefined as it now points to the text node for this white space. Since its not an element node, it has no tag name. IE, on the other hand, does not add nodes for white space like this, so it would still point to the P tag.
53
<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 worrying about where the node for the paragraph tag is in the document tree. Just remember that each ID needs to be 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 links 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 ones youll mostly deal with for web pages are element, text and attribute. Element nodes, as weve seen, correspond to individual tags or tag pairs in the HTML code. They can 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 sibling nodes, but they cannot have child nodes. Attribute nodes are a special case. They are not considered a part of the document tree - they do not have a parent, children or siblings. Instead, they are used to allow access to an element nodes attributes. That is, they represent the attributes defined in an elements HTML tag, such as the HREF attribute of the A tag or the SRC attribute on the IMG tag. Note that attribute values are always text strings.
54
The document.createAttribute() allows you to create a new attribute node, which you can then set a value for and assign to an element node. var attr = document.createAttribute(myAttribute); attr.value = myValue; var el = document.getElementById(myParagraph); el.setAttributeNode(attr); However, its usually easier to access an elements attributes directly using the element getAttribute() and setAttribute() methods instead. var el = document.getElementById(myParagraph); el.setAttribute(myAttribute, myValue); An elements attributes are also represented as properties of the element node. In other words, you can simply use var el = document.getElementById(myParagraph); el.myAttribute = myValue; Its 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) instead of element.attributeName to get the value as some browsers may not register user-defined attributes as a properties of the element. Attributes can also be removed from an element node, using either the removeAttribute() or removeAttributeNode() 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, where using the links we can alter its 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);
55
Style Attributes
Most attributes for HTML tags are fairly simple; they define a single value for a property specific to that tag. Styles are a little more involved. As you know, CSS can be used to apply style parameters to an individual tag, all tags of a given type or assigned using classes. Likewise, styles for a particular element can be inherited from any of these sources. You can also alter these styles at various levels. For example, you can change the STYLE attribute of an HTML tag, or its CLASS attribute. But these methods will alter all of the elements 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 every possible style parameter. You can access and update these individual parameters as you wish. Heres an example similar to the previous one. But in this case, the text alignment is defined and altered using a style parameter instead of the ALIGN attribute. Heres the code behind it: <p id=sample2" style=text-align:left;>Text in a paragraph element.</p> ... code for the links ... 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 corresponding style property name is constructed by removing the hyphen character and capitalizing the first letter following 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 set its value using the DOM. For example, in the code above the inline style= on the P tag is really not necessary.
Dynamic Content
Changing textual content is relatively simple. A text node represents every continuous string of character data in the body of an HTML page. The nodeValue property of these nodes is the text itself. Changing that value will change the text on the page.
Text Nodes
Heres another example using a simple paragraph tag. Use the links to change the text: <p id=sample1">This is the initial text.</p>
56
... code for the links ...
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 like element 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 its the paragraph element with the ID sample1. This element node has one child node, the text node we want to update. You can see this in the diagram below.
So document.getElementById(sample1).firstChild.nodeValue is used to access this text node and read or set its string value. Its important to remember that text nodes contain just that, text. Even simple markup tags like B or I within a string of text will create a sub tree of element and text nodes. For example, using the example above 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 element has one child node, a text node for initial. You can see the structure in the diagram below.
57
To see how this affects scripting code, heres the same example used above but with the additional bold markup: Changing firstChild of the P element now only affects the text This is the . Conversely, if you attempt to add markup to the value of a text node, the browser will treat it as plain text, as demonstrated below: 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 data located between any two HTML tags, not necessarily matching pairs of tags. Nodes can also be added to the DOM. Youve already seen how attribute nodes can be created and applied to an element so lets look at adding element and text nodes within the document tree (without using 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, youll probably just want to create an element node and assign it attributes directly.
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 calls appendChild() to insert it at the end of its 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 addition of a reference node, to indicate which of the elements children is to be removed. Here we use the elements lastChild property which always points to the last node of the elements childNodes array. Note that 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 the given node currently has any children. Here its used to prevent an error by calling removeChild when there are no children left.
59
Browser Compatibility
Internet Explorer 5.5 does not support the normalize method. The example below will not work properly on this browser. IE 6.0, however, does appear to support it although the current beta version is buggy. To demonstrate, heres the same example used above but with additional links provided to normalize the paragraph element and show its current number of children. You can see that as you add text, the number of child nodes increases but any time you normalize the paragraph, they are combined into a single text node. Heres 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 This can be useful if you want to dynamically alter a single word or phrase or insert an element in a line of text. Lets 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 word in the text and a subsequent remove will delete only that word. The reset link allows you to start over. And heres 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
... 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);
A couple of notes here. The nodeValue of a text node is simply a string. The splitText() method expects an offset value to tell it where to split the text. The string indexOf() method is used to find the offset 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 text back as a single node.
61
At this point the paragraph element has three children, a text node, an element node for the B tag and another text node. The B element has one child, a text node. The final step is to insert the new paragraph element 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 an elements 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, not just 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 go in details again. Javascript is a scripting language (like a simple programming language (Perl, C++ et. cetera)). Javascript is the part of DHTML that actually does something. Its Javascript that makes the document fly around; its Javascript that changes the font size or any other CSS property on an element. So JavaScript plays a really big role in DHTML and its 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 its been downloaded? There needs to be some way to tell the browser to change it, which brings us to the technologies that make up DHTML:
62
Dynamic HTML is the DOM
In a sense, the Document Object Model is the real core of dynamic HTML. It makes HTML changeable. 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 the browsers version number, window properties such as window.location (the pages URL), and HTML elements such as <p> tags, divs, or tables. By exposing the DOM to scripting languages, browsers enable you to access these elements. While some elements such as the time of day cant 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. Events are things like moving the mouse over an element (onmouseover), loading a page (onload), submitting a form (onsubmit), clicking on a form input field (onfocus), and so on.
QUESTIONS
1. 2. 3. 4. 5. 6. 7. 8. 9. What is JavaScript ? List out uses of Java Script. Create an HTML page which pops up an alert message. Explain briefly about Cascading Style Sheets(CSS). Explain the usage of script tags. Explain Document object model. Write a program to display text in status bar on click of a button. What are the difference between HTML and DHTML Explain the methods to access nodes in a Document tree. What are text nodes?
63
Chapter 4
Introduction to CGI
GI, or Common Gateway Interface, is a specification which allows web users to run programs from their computer. CGI isnt a programming language in itself; rather, it is standard that allows programs 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 as what host the user is connecting from, or input the user has supplied using HTML form syntax). The program then processes that data and the server passes the programs response back to the Web browser.
63
64
CGI programs usually take input passed to it from a form on a web page, process the information, and then 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 reporting language.
Forms
One of the most prominent uses of CGI is in processing forms. Forms are a subset of HTML that allow the user to supply information. The forms interface makes Web browsing an interactive process for the user and the provider. Figure 4.2 shows a simple form.
65
As can be seen from the figure, a number of graphical widgets are available for form creation, such as radio buttons, text fields, checkboxes, and selection lists. When the form is completed by the user, the Submit Order! button is used to send the information to the server, which executes the program associated with the particular form to decode the data. Generally, forms are used for two main purposes. At their simplest, forms can be used to collect information from the user. But they can also be used in a more complex manner to provide back-and-forth interaction. For example, the user can be presented with a form listing the various documents available on the server, as well as an option to search for particular information within these documents. A CGI program can process this information and return document(s) that match the users selection criteria.
Gateways
Web gateways are programs or scripts used to access information that is not directly readable by the client. For example, say you have an Oracle database that contains baseball statistics for all the players on your company team and you would like to provide this information on the Web. How would you do it? You certainly cannot point your client to the database file (i.e., open the URL associated with the file) and expect to see any meaningful data.
CGI provides a solution to the problem in the form of a gateway. You can use a language such as oraperl or a DBI extension to Perl to form SQL queries to read the information contained within the database. Once you have the information, you can format and send it to the client. In this case, the CGI program serves as a gateway to the Oracle database, as shown in figure 4.3.
66
Virtual Documents
Virtual, or dynamic, document creation is at the heart of CGI. Virtual documents are created on the fly in response to a users information request. You can create virtual HTML, plain text, image, and even audio documents. A simple example of a virtual document could be something as trivial as this:
Welcome to Shishirs WWW Server! You are visiting from diamond.com. The load average on this machine is 1.25.
In this example, there are two pieces of dynamic information: the alphanumeric address (IP name) of the remote user and the load average on the serving machine. This is a very simple example, indeed!
67
# 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 change the 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 have files 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 ensure that the server restarted successfully. To view the pages in your My Website folder, the actual URL is http://localhost/~my username/. For example, on my computer, my username is Sridhar, so the URL to my pages is http://localhost/~Sridhar/ . (If you dont know your username, open the Start menu; your username is at the top of the Start box.)
68
#!/perl/bin/perl -wT print 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 go to save this file, change the Save as Type from Text Documents to All Files. Then put first.cgi as the file name. Save it in your My Website folder, then reload your web page in your browser. You should see first.cgi listed there; click on it to view your first CGI program!
69
additional print statements. Its up to your program to print out all of the HTML you want to display in the visitors browser, so youll have to include print Statements for every HTML tag:
70
the marker. If the end-of-file mark is on the same line as the here-doc marker, youll get an error when you run your program.
71
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. Heres 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 these variables) 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 in double-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 the string, replacing the variable name with the value of that variable. Lets try it out in a CGI program.
73
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. Youll notice a few new things in this program. First, theres use strict. This is a standard Perl module that requires you to declare all variables. You dont have to use the strict module, but its considered good programming style, so its good to get in the habit of using it. Youll 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 is because the @-sign means something special to .A better way to do this would be to use a single-quoted string for the e-mail address: my $email = fnord@cgi101.com; Single-quoted strings are not interpolated the way double-quoted strings are, so you can freely use the special characters $, @ and % in them. However this also means you cant use a single-quoted string to print 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 array can 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 indices start with 0, so to access the first element of the array @colors, you use $colors[0]. Notice that when youre referring to a single element of an array, you prefix the name with $ instead of @. The $-sign again indicates that its a single (scalar) value; the @-sign means youre 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 at a time: my @colors = (red,green,blue); print $colors[0]\n; print $colors[1]\n; print $colors[2]\n; # prints red # prints green # prints blue
74
my @colors = (red,green,blue); foreach my $i (@colors) { print $i\n; }
75
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).
Splitting an Array
A very useful function in Perl is split, which splits up a string and places it into an array. The function uses a regular expression to specify the character on which the string has to be splitted. The split function is used like this:
$info = Caine:Michael:Actor:14, Leafy Drive; @personal = split(/:/, $info); which has the same overall effect as @personal = (Caine, Michael, Actor, 14, Leafy Drive);
Hashes
A hash is a special kind of array an associative array, or paired list of elements. Each pair consists of a string key and a data value. Perl hash names are prefixed with a percent sign (%). Heres how theyre defined:
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 theres more than one way to do things in Perl, and heres the other way to define the same hash:
my %colors = ( red => #ff0000, green => #00ff00, blue => #0000ff, black => #000000, white => #ffffff );
The => operator automatically quotes the left side of the argument, so enclosing quotes around the key names are not needed. To refer to the individual elements of the hash, youll do: $colors{red} Here, red is the key, and $colors{red} is the value associated with that key. In this case, the value is #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, you have to specify the keys in the foreach loop: foreach my $color (red,green,blue,black,white) { print $colors{$color}=$color\n; } Lets write a CGI program using the colors hash.
77
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
Weve already seen that the keys function returns a list of the keys of a given hash. Similarly, the values function returns a list of the hash values:
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.
Heres an example: my %colors = (red => #ff0000, green=> #00ff00, blue => #0000ff, black => #000000, white => #ffffff );
79
my $numcolors = scalar(keys(%colors)); print There are $numcolors in this hash.\n; This will print out There are 5 colors in this hash.
Conditional Statements
If Condition Youve already seen if/elsif in action. The structure is always started by the word if, followed by a condition to be evaluated, then a pair of braces indicating the beginning and end of the code to be executed if 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 true except the empty string and 0. Any number is true except 0. An undefined value (or undef) is false.You can also test whether a certain value equals something, or doesnt equal something, or is greater than or less than something. There are different conditional test operators, depending on whether the variable you want to test is a string or a number:
Test $x is equal to $y $x is not equal to $y $x is greater than $y $x is greater than or equal to $y $x is less than $y $x is less than or equal to $y
Strings $x eq $y $x ne $y $x gt $y $x ge $y $x lt $y $x le $y
If its a string test, you use the letter operators (eq, ne, lt, etc.), and if its a numeric test, you use the symbols (==, !=, etc.). Here is an example of a numeric test. If $varname is greater than 23, the code inside the curly braces is executed:
80
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 && || and or Example condition1 condition2 Explanation && True if condition1 and condition2 are both true True if either condition1 or condition2 is true Same as || but lower precedence
condition1 || condition2
condition1 and condition2 Same as && but lower precedence condition1 or condition2
Logical operators are evaluated from left to right. Precedence indicates which operator is evaluated first, 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 symbolic counterparts.
Unless:
unless is similar to if. Lets say you wanted to execute code only if a certain condition were false. You could do something like this:
81
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 }
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 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 pass through 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 (its part of 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++) {
82
# code here }
The for statement uses a 3-part conditional: the loop initializer; the loop condition (how long to run the loop); 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 end of 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 }
Information about the client, server, and user Form data that the user supplied Additional pathname information
Most information about the client, server, or user is placed in CGI environment variables. Form data is either incorporated into an environment variable, or is included in the body of the request. And extra path information is placed in environment variables.
83
Much of the most crucial information needed by CGI applications is made available via environment variables. Programs can access this information as they would any environment variable (via the %ENV array in Perl). This section concentrates on showing examples of some of the more typical uses of environment variables in CGI programs. The following table shows a full list of environment variables available for CGI.
Environment Variable GATEWAY_INTERFACE SERVER_NAME SERVER_SOFTWARE SERVER_PROTOCOL SERVER_PORT REQUEST_METHOD PATH_INFO PATH_TRANSLATED SCRIPT_NAME DOCUMENT_ROOT QUERY_STRING REMOTE_HOST REMOTE_ADDR AUTH_TYPE REMOTE_USER REMOTE_IDENT CONTENT_TYPE CONTENT_LENGTH HTTP_FROM HTTP_ACCEPT HTTP_USER_AGENT HTTP_REFERER Description The revision of the Common Gateway Interface that the server uses. The server's hostname or IP address. The name and version of the server software that is answering the client request. The name and revision of the information protocol the request came in with. The port number of the host on which the server is running. The method with which the information request was issued. Extra path information passed to a CGI program. The translated version of the path given by the variable PATH_INFO. The virtual path (e.g., /cgi-bin/program.pl) of the script being executed. The directory from which Web documents are served. The query information passed to the program. It is appended to the URL with a "?". The remote hostname of the user making the request. The remote IP address of the user making the request. The authentication method used to validate a user. The authenticated name of the user. 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). The MIME type of the query data, such as "text/html". The length of the data (in bytes or the number of characters) passed to the CGI program through standard input. The email address of the user making the request. Most browsers do not support this variable. A list of the MIME types that the client can accept. The browser the client is using to issue the request. The URL of the document that the client points to before accessing the CGI program.
84
Lets start with a simple program that displays various information about the server, such as the CGI and HTTP revisions used and the name of the server software.
85
Query Strings
One way to send form data to a CGI program is by appending the form information to the URL, after a question mark. You may have seen URLs like the following:
http://some.machine/cgi-bin/name.pl?fortune
Up to the question mark (?), the URL should look familiar. It is merely a CGI script being called, by the name name.pl. Whats new here is the part after the ?. The information after the ? character is known as a query string. When the server is passed a URL with a query string, it calls the CGI program identified in the first part of the URL (before the ?) and then stores the part after the ? in the environment variable QUERY_STRING. The following is a CGI program called name.pl that uses QUERY_STRING to print the information passed.
#!/usr/local/bin/perl print 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?fortune http://some.machine/cgi-bin/name.pl?finger or http://some.machine/cgi-bin/name.pl and you will get different output.
A Simple Form
Although the previous example will work, the following example is a more realistic illustration of how forms work with CGI. Instead of supplying the information directly as part of the URL, well use a form to solicit it from the user.
86
<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>
Since this is HTML, the appearance of the form depends on what browser is being used. Figure 4.5 shows what the form looks like in Netscape.
This form consists of one text field titled Command: and two buttons. The Submit Form! button is used to send the information in the form to the CGI program specified by the ACTION attribute. The Clear Form button clears the information in the field. The two attributes within the <FORM> tag (ACTION and METHOD) are very important. The ACTION attribute specifies the URL of the CGI program that will process the form information. You are not limited to using a CGI program on your server to decode form information; you can specify a URL of a remote host if a program that does what you want is available elsewhere.
87
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 environment variables. If no method is specified, the server defaults to GET. Both methods have their own advantages and disadvantages. Now, assuming that the user enters fortune into the text field, when the Submit Form! button is pressed 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. Lets go through the simple process.pl CGI program that handles this form: #!/usr/local/bin/perl print 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 split function to separate the query string on the = character into two parts, with the first part before the equal sign in $field_name, and the second part in $command. In this case, $field_name will contain command and $command will contain fortune.
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 we used the GET method, all the form data is included in the URL. So we can directly access this 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.
88
The GET and POST Methods
In the previous example, we used the GET method to process the form. However, there is another method we can use, called POST. Using the POST method, the server sends the data as an input stream to 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: 15 command=fortune The version of process.pl that handles the form with POST data follows. First, since the server passes information to this program as an input stream, it sets the environment variable CONTENT_LENGTH to the size of the data in number of bytes (or characters). We can use this to read exactly that much data from 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 input into 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 GET version of this example. As with the GET version, $field_name will contain command, and $command will contain fortune (or whatever the user typed in the text field). The rest of the example remains unchanged: ($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);
89
Since its the form that determines whether the GET or POST method is used, the CGI programmer cant control which method the program will be called by. So scripts are often written to support both methods. The following example will work with both methods:
#!/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);
The environment variable REQUEST_METHOD contains the request method used by the form. In this example, the only new thing we did was check the request method and then assign the $form_info variable as needed.
Encoded Data
So far, weve shown an example for retrieving very simple form information. However, form information can get complicated. Since under the GET method the form information is sent as part of the URL, there cant be any spaces or other special characters that are not allowed in URLs. Therefore, some special encoding is used. Consider the following form: <HTML> <HEAD><TITLE>Whens your birthday?</TITLE></HEAD> <BODY> <H1>Whens 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>
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 the user entered 11/05/73): POST /cgi-bin/birthday.pl HTTP/1.0 . . (information) . Content-length: 21 birthday=11%2F05%2F73 In the encoded form, certain characters, such as spaces and other character symbols, are replaced by their hexadecimal equivalents. In this example, our program needs to decode this data, by converting the %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 to follow: ($field_name, $birthday) = split (/=/, $form_info); print Content-type: text/plain, \n\n; print Your birthday is on: $birthday \n; exit (0);
91
following is deemed extra and is stored in the environment variable PATH_INFO. The following line calls 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 is stored in the environment variable PATH_INFO. Meanwhile, the variable PATH_TRANSLATED is also set, 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 root hierarchy:
#!/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);
Instead of using the PATH_TRANSLATED environment variable, you can use a combination of PATH_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 and easier to use PATH_TRANSLATED.
92
plain text or HTML, there is no problem. However, if the data is unreadable by the client, a gateway has to be written to effectively translate that data. This leads to another important matter: The original (or unreadable) data has to be organized in such a way that it will be easy for the gateway to read from and write to the data source. Once you have the gateway and you can retrieve data, you can present it in numerous ways. For example, if the data is numerical in nature, you can create virtual graphs and plots using various utility software. On the other hand, if the data consists of graphical objects, you can modify the information using numerous graphic manipulation tools. In summary, you need to think about what you want to present and how to prevent it long before the actual process of implementing CGI programs. This will ensure the creation of effective virtual documents.
QUESTIONS
1. 2. 3. 4. 5. 6. 7. 8. 9. What is CGI? Give examples of CGI application and explain any one of them. What are CGI environment variables? Explain any Five. Give differences between Java Script and CGI programming. Explain CGI.pm module with an example. Explain different types of PEARL Variables. Explain PEARL control structures with appropriate examples. What is Query String? Explain with an example. What are GET and POST methods? What is the difference between GET and POST Methods? Write a simple CGI application which accepts the user information and displays the Information entered to the user. Write a CGI application which accepts 3 numbers from the user and displays the LCM of three numbers using GET and POST methods. What is Extra Path information? Explain with an example.
10.
11.