Sie sind auf Seite 1von 92

BSIT 52

Web Programming

Chapter 1

1

1.1 INTRODUCTION TO WEB

T he web was initially conceived and created by Tim Berners-Lee, a computer specialist from the

European Particle Physics Laboratory (CERN) in 1989. The main reason behind this creation

was “a need for a collaborative knowledge- sharing tool” to support scientific work in an

international context.

The web is not synonymous with the Internet, though some people may think so. Actually, the web is one way to utilize the infrastructure of the Internet. In other words, the web is an application of the Internet. Since then it has grown into the web we know today under the guidance of the World Wide Web Consortium (W3C) that is a volunteer organization based at the Massachusetts Institute of Technology (MIT) with the responsibility for developing and maintaining common standards.

Perhaps the single most important technological development in the history of the web, besides the creation of the web itself, was the development of graphical browsers in the early 90s. Beginning with NCSA’s Mosaic and its evolution into Netscape’s Navigator and Microsoft’s Internet Explorer, these programs allowed users to browse the resources on the web in an extremely user friendly environment. This made the web a “fun” place and marked the beginning of the true web revolution.

So what exactly is the web?

The web is a complex, international, cross platform, cross language, cross cultural mesh of servers, clients, users, databases, and quite a few artificial intelligences all talking, working, searching, viewing, accessing, downloading, and who knows what else.

2

Chapter 1 - Introduction to Web Programming

2 Chapter 1 - Introduction to Web Programming Fig 1.1 Understanding Web As such, no one

Fig 1.1 Understanding Web

As such, no one owns or controls the web. In fact, it is impossible to own or control by its very nature and design. In fact, “it” is not even an “it”. You can’t 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.

1.2 BUILDING ELEMENTS OF WEB

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

HTML the Language of the Web

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

BSIT 52

Web Programming

3

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

4

Chapter 1 - Introduction to Web Programming

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 RFC´s (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:

BSIT 52

Web Programming

5

Fig 1.2 HTTP communication between client and server.
Fig 1.2 HTTP communication between client and server.

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

Web programming is a game of getting user input, processing that input, and returning a 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.

The GET Method

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

GET /webdocs/index.html CRLF

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

The Post Method

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

6

Chapter 1 - Introduction to Web Programming

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.

1.3 WHY JAVASCRPTS AND DHTML

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

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

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

1.4 INTRODUCTION TO CGI

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

BSIT 52

Web Programming

7

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 program’s response back to the Web browser.

1.5 STATIC Vs DYNAMIC WEB PAGES

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

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

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

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

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

1.6 SERVLETS AND JSP

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

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

8

Chapter 1 - Introduction to Web Programming

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 user’s browser type, information provided by the user, and selections made by the user.

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

2. Explain GET and POST method briefly.

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

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

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

6. Why do we require JavaScripts and DHTML?

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

BSIT 52

Web Programming

Chapter 2

9

2.1 WHAT IS HTML?

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

Hyper is the opposite of linear. It used to be that computer programs had to move in a 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 didn’t flow correctly. Because it’s a language, really — but the language is plain English.

HTML allows you to:

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.

2.2 YOUR FIRST HTML PAGE

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

Save the file as “mypage.htm”.

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

Example Explained

The first tag in your HTML document is <html>. This tag tells your browser that this is the start of 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 browser’s 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.

HTM OR HTML EXTENSION?

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

BSIT 52

Web Programming

HTML Tags

11

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:

<b>This text is bold</b>

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

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

This is also an HTML element:

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

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

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

12

Chapter 2 - HTML

Why do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: <B> means the same as <b>. When you 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.

2.3 LIST OF HTML TAGS

Tags for Document Structure

HTML

HEAD

BODY

Heading Tags

TITLE

BASE

META

STYLE

LINK

Block-Level Text Elements

ADDRESS

BLOCKQUOTE

DIV

H1 through H6

BSIT 52

Web Programming

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

2.4 TAGS IN DETAIL

Tags for Document Structure

13

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

HTML

HEAD

TITLE

BODY

14

Chapter 2 - HTML

HTML (outermost tag)

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>

HEAD (document header)

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

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

Syntax

<HEAD>

Example

</HEAD>

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

BODY (main content of document)

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

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

BSIT 52

Web Programming

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

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 browser’s default visited link color.

VLINK=”color”

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

ONLOAD=”loadJScode”

specifies JavaScript code to execute when the document finishes loading.

ONUNLOAD=”unloadJScode”

specifies JavaScript code to execute when the document is unloaded.

ONFOCUS=”focusJScode”

specifies JavaScript code to execute when the window in which the document is 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:

Block-Level Text Elements

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

ADDRESS BLOCKQUOTE DIV H1 through H6 P

ADDRESS (address format)

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

BSIT 52

Web Programming

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>

BLOCKQUOTE (indented block of text)

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

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

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>

DIV

(section of a document)

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

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:

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.

BSIT 52

Web Programming

19

H1 through H6 (standard headings)

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

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

Syntax

<H1 ALIGN="LEFT"|"CENTER"|"RIGHT">

</H1>

<H2 ALIGN="LEFT"|"CENTER"|"RIGHT">

</H2>

<H3 ALIGN="LEFT"|"CENTER"|"RIGHT">

</H3>

<H4 ALIGN="LEFT"|"CENTER"|"RIGHT">

</H4>

<H5 ALIGN="LEFT"|"CENTER"|"RIGHT">

</H5>

<H6 ALIGN="LEFT"|"CENTER"|"RIGHT">

</H6>

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:

LEFT aligns the heading flush left (the default).

CENTER centers the heading text.

RIGHT aligns the heading flush right.

Example

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

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:

LEFT aligns the paragraph flush left (the default).

CENTER centers the paragraph.

RIGHT aligns the paragraph flush right.

Example

The following example displays two paragraphs.

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

BSIT 52

Web Programming

OL

UL

LI

21

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 tag’s 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:

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

Chapter 2 - HTML

<P>The following steps outline how to create HTML files:</P>

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

UL (unordered list)

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

Syntax

<UL

CLASS="styleClass"

ID="namedPlaceOrStyle"

LANG="ISO"

STYLE="style"

>

TYPE

defines the type of bullet used for each list item.

The value can be one of the following:

TYPE="CIRCLE"|"DISC"|"SQUARE"

CIRCLE specifies a hollow bullet.

DISC specifies a solid round bullet (Netscape Navigator’s 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>

BSIT 52

Web Programming

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.

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

Example

Chapter 2 - HTML

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>

BSIT 52

ALIGN

Web Programming

specifies the horizontal placement of the table.

25

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.

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.

Example 1. A Simple Table.

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

BSIT 52

Web Programming

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

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.

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

Chapter 2 - HTML

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

<P>Hamlet's famous speech begins:

<BLOCKQUOTE><I>To be, or not to be?<BR> That is the question</I></BLOCKQUOTE>

CENTER (Centered content)

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

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

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

Syntax

<CENTER>

Example

</CENTER>

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

CENTER displays the line centered (the default).

LEFT aligns the line flush left.

RIGHT aligns the line flush right.

BSIT 52

Web Programming

NOSHADE

rproduces a solid black line that has no shading.

SIZE=”thickness”

29

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.

ANCHORS AND LINKS

A

(anchor or link)

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

A as anchor

An anchor identifies a place in an HTML document. To indicate that an <A> tag is being used as 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>

IMAGES

IMG

(image)

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

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

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

The HEIGHT and WIDTH attributes indicate the dimensions of the image. If you specify these attributes, Navigator uses them 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.

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

GIF (Graphics Interchange Format)

BSIT 52

Web Programming

JPEG (Joint Photographic Experts Group)

XPM (X PixMap)

XBM (X BitMap)

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"

>

31

Example 1. An Image With a Low Resolution Placeholder

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

This example uses the following attributes to improve performance:

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

Chapter 2 - HTML

FORM (form for user input)

The FORM tag creates an HTML form. The form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices. 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.

Kinds of Interface Elements

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

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

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.

<FORM NAME="LoginForm" METHOD=POST ACTION="urltoInvoke"> <P>User name:

<INPUT TYPE="text" NAME="userName" SIZE="10"> <P>Password:

<INPUT TYPE="password" NAME="password" SIZE="12"> <P><INPUT TYPE="submit" VALUE="Log in"> <INPUT TYPE="button" VALUE="Cancel" onClick="window.close()"> </FORM>

BSIT 52

Web Programming

33

INPUT (input element in a form)

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

INPUT TYPE=”BUTTON”

A button apears in the form. You must specify JavaScript code as the value of the ONCLICK 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

Chapter 2 - HTML

INPUT TYPE=”HIDDEN”

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"

>

BSIT 52

Web Programming

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

SELECT (selection list in a form)

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

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

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

Syntax

<SELECT

NAME="selectName"

MULTIPLE

ONBLUR="JScode"

ONCHANGE="JScode"

ONCLICK="JScode"

ONFOCUS="fScode"

SIZE="listLength"

>

<OPTION

>

<OPTION

>

</SELECT>

Example: Single Item Selection

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

BSIT 52

Web Programming

37

SCRIPT (client-side JavaScript code)

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

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

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

Syntax

<SCRIPT

LANGUAGE="languageName"

SRC="location"

>

</SCRIPT>

NOSCRIPT (alternative text for JavaScript)

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

Syntax

<NOSCRIPT>

</NOSCRIPT>

Example: Using the SCRIPT Tag

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

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

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>

APPLET

(Java applet)

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

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

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

Syntax

<APPLET

CODE="classFileName"

CODEBASE="classFileDirectory"

ARCHIVE="archiveFile"

ALT="altText"

ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"|

"TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM"

HEIGHT="height"

BSIT 52

Web Programming

WIDTH="width"

HSPACE="horizMargin"

VSPACE="vertMargin"

MAYSCRIPT

NAME="value"

39

>

<PARAM

>

</APPLET>

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>

1. What is HTML?

2. Brief about HTML Tags and Elements.

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

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

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

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

7. Write an HTML program to demonstrate applet embedding.

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

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

40

Chapter 3

Chapter 3 - Creating Dynamic Web Pages

3.1 INTRODUCTION TO JAVASCRIPT

J avaScript is an easy-to-learn way to “script” your web pages—that 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 stand- alone “applets” (like a regular programming language), JavaScript is generally only used inside of HTML documents.

What JavaScript can do?

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

BSIT 52

Web Programming

What JavaScript can’t do?

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 user- interface elements).

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

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

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

3.2 USING JAVASCRIPT IN HTML

Small Introduction about writing JavaScript

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

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

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

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

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

Chapter 3 - Creating Dynamic Web Pages

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 don’t 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.

Now Writing the Sample JavaScript Code

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

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

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

Change the above code to the following:

<script language= “JavaScript”>

document.writeln(“<p><h1><center>Hello,

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

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

“<br>This page was last modified on ” +document.lastModified); </script>

at ”

+document.location+

BSIT 52

Web Programming

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. Let’s look first at “alert” boxes.

Alert boxes

An alert box is a small window that pops up with a yellow warning sign and a (usually) 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 pop- up 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 we’ll be looking at.

Prompt(“put request here”) ;

This asks the user to enter some text.

You probably noticed at the end of a method, after the right parenthesis, there is a semi-colon. 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" "confirm(‘Its sunny today ' ) ; " > </form>

Chapter 3 - Creating Dynamic Web Pages

value = "Click here to check the weather"

onClick =

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 you’re also using all semicolons, quotation marks, and other punctuation correctly.

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

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

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. Let’s 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 don’t.

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

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

BSIT 52

Web Programming

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 we’ve looked at what a mouseover can do, let’s 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"

;

border=0></a>

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

apostrophes, and quotation marks.

Here’s how the code works. As you can see, all the code that creates the mouseover effect 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

onMouseOut

onMouseOver="document.logo.src='B.gif ' ; " '

"

><img

name="logo"

src="A.gif

"

="document.logo.src='A.gif

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:

<center><h1>My Favourite Pets</h1><img src="dog.gif" name="pet" height=18%

size=5><p><a

width=8%><br><font

46

Chapter 3 - Creating Dynamic Web Pages

href="javascript:changePet('dog.gif');">.Dog.</a><p><a

href="javascript:changePet('cat.gif');">.Cat.</a><p><a

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

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

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

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

<script language= “JavaScript”> function changePet(file){ document.pet.src=file;

}

</script>

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

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

apostrophes, and quotation marks.

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

BSIT 52

Web Programming

47

Change the status bar text

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

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

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

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

3.3 AN INTRODUCTION TO DHTML

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

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

Cascading Style Sheets (CSS)

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

The syntax for CSS code is basically like this:

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

Let us see couple of examples:

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

48

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

Chapter 3 - Creating Dynamic Web Pages

<html><head> <style type="text/css"> H5{background-color:blue; color:white; font-size:20px} </style> <body> <h5>Cascading style sheets</h5> </body> </html>

Cascading style sheets

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

<html><head> <style type="text/css"> #heading{background-color:blue; color:white; font-size:20px} </style> <body> <h5 id="heading">Cascading style sheets</h5> </body> </html>

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

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

If you use inline styles you still have to go into the actual content to change the style for the element. Now, there’s a third way of doing this. If you for instance have 10 P tags on your page and you want 5 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:

BSIT 52

Web Programming

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

49

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 Object Model (DOM)

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

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

DOM Levels and Support

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

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

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.

The Document Tree

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

Nodes

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

50

Chapter 3 - Creating Dynamic Web Pages

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.

at the diagram below which represents a simple node tree. Fig 3.1 Simple node tree The

Fig 3.1 Simple node tree

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

NodeA.firstChild = NodeA1 NodeA.lastChild = NodeA3

NodeA.childNodes.length = 3 NodeA.childNodes[0] = NodeA1

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 let’s look how the document tree reflects the contents of a web page

BSIT 52

Web Programming

51

The Document Root

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

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

getElementById()

getElementsByTagName()

createElement()

createAttribute()

createTextNode()

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

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

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

Traversing the Document Tree

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

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

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

<html>

<head>

<title></title>

</head>

52

Chapter 3 - Creating Dynamic Web Pages

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

and this code:

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

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

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

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

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

<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 it’s 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.

Accessing Elements Directly

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

BSIT 52

Web Programming

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

53

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 link’s inline style to set the color parameter to red.

Node Types

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

Element nodes, as we’ve seen, correspond to individual tags or tag pairs in the HTML code. 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 node’s attributes. That is, they represent the attributes defined in an element’s 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.

Attributes vs. Attribute Nodes

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

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

54

Chapter 3 - Creating Dynamic Web Pages

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, it’s usually easier to access an element’s attributes directly using the element getAttribute() and setAttribute() methods instead.

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

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

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

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

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

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

will display “myAttribute.” But note that you should use element.getAttribute(attributeName) 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 it’s ALIGN attribute.

The code is fairly simple:

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

code for the links

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

BSIT 52

Web Programming

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 it’s CLASS attribute. But these methods will alter all of the element’s style parameters. Often, you may want to change just a single style parameter, or a select few, while retaining the others.

Fortunately, the style attribute and element node is defined as an object with properties for every possible style parameter. You can access and update these individual parameters as you wish. Here’s 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. Here’s 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 it’s 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

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

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

56

code for the links

Chapter 3 - Creating Dynamic Web Pages

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 it’s 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.

we want to update. You can see this in the diagram below. Fig 3.2 Parent &

Fig 3.2 Parent & Childnode

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

It’s 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.

has one child node, a text node for “initial”. You can see the structure in the

Fig 3.3 Text node

BSIT 52

Web Programming

57

To see how this affects scripting code, here’s 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. You’ve already seen how attribute nodes can be created and applied to an element so let’s 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, you’ll probably just want to create an element node and assign it attributes directly.

Working with Text Nodes

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

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

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

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

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

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

code to add a text node

58

Chapter 3 - Creating Dynamic Web Pages

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 it’s childNodes array. A global counter variable is used on the text itself so you can distinguish each new node in the browser display.

Removing text is almost as easy, using a call to removeChildNode(). The only difference in the addition of a reference node, to indicate which of the element’s children is to be removed. Here we use the element’s lastChild property which always points to the last node of the element’s childNodes array. 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 it’s used to prevent an error by calling removeChild when there are no children left.

Normalizing and Splitting Text Nodes

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

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

new text 2 new text 3</p>

it would appear in the DOM as a single child text node of the paragraph element. In other words, the node tree produced by dynamically adding content may appear different from the node tree that would result if that content had been included in the static HTML code.

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

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

BSIT 52

Web Programming

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, here’s the same example used above but with additional links provided to normalize the paragraph element and show it’s current number of children.

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

normalize element

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

show number of child nodes

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

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

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

And here’s the code for each function:

split at first word

el = document.getElementById("sample3"); if (el.hasChildNodes()) { text = el.firstChild; i = text.nodeValue.indexOf(" "); if (i >= 0) text.splitText(i + 1);

}

remove first text node

el = document.getElementById("sample3"); if (el.hasChildNodes()) el.removeChild(el.firstChild);

60

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

Chapter 3 - Creating Dynamic Web Pages

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.

Working with Element Nodes

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

First, you create a node using document.createElement() giving it the name of the tag you’d like to

build such as P, DIV, TABLE, etc. The parameter is case-insensitive so “div”, “Div” and “DIV” all create

a DIV tag. Just note that the browser will return the tag name in uppercase if you inquire on it, for example:

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

would display “DIV”.

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

Here, clicking on the link will create a new P element - with some child nodes of its own - and append

it to an existing DIV. Take a look at the code:

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

BSIT 52

Web Programming

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. It’s Javascript that makes the document fly around;

it’s Javascript that changes the font size or any other CSS property on an element. So JavaScript plays a really big role in DHTML and it’s really important to know JavaScript very well!

Summing it up

Dynamic HTML is simply HTML that can change even after a page has been loaded into a browser.

A paragraph could turn blue when the mouse moves over it, or a header could slide across the screen.

Anything that can be done in HTML can be redone after the page loads.

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

Dynamic HTML is client-side scripting

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

62

Chapter 3 - Creating Dynamic Web Pages

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 browser’s version number, window properties such as window.location (the page’s 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 can’t be changed themselves, they can be used by scripts to modify other elements.

The part of the DOM that specifies which elements can trigger changes is the event model. 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.

Dynamic HTML is CSS

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

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

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

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

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

4. Explain the usage of script tags.

5. Explain Document object model.

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

7. What are the difference between HTML and DHTML

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

9. What are text nodes?

BSIT 52

Web Programming

Chapter 4

63

4.1 WHAT IS CGI?

C GI, or “Common Gateway Interface”, is a specification which allows web users to run programs

from their computer. CGI isn’t 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 program’s response back to the Web browser.

passes the program’s response back to the Web browser. Fig 4.1 Simple diagram of CGI BSIT

Fig 4.1 Simple diagram of CGI

64

Chapter 4 - Introduction to CGI

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

4.2 CGI APPLICATIONS

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

Forms

One of the most prominent uses of CGI is in processing forms. Forms are a subset of HTML 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.

process for the user and the provider. Figure 4.2 shows a simple form. Fig 4.2 Simple

Fig 4.2 Simple form illustrating different widgets

BSIT 52

Web Programming

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 user’s 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.

case, the CGI program serves as a gateway to the Oracle database, as shown in figure

Fig 4.3 A gateway to a database

66

Chapter 4 - Introduction to CGI

Virtual Documents

Virtual, or dynamic, document creation is at the heart of CGI. Virtual documents are created on the fly in response to a user’s 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 Shishir’s 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!

4.3 CONFIGURING THE SERVER

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

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

Configuring The Server (Apache)

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

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

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

UserDir “My Documents/My Website”

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

#<Directory “C:/Documents and Settings/*/My Documents/My Website”>

# AllowOverride FileInfo AuthConfig Limit

# Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec # <Limit GET POST OPTIONS PROPFIND>

BSIT 52

Web Programming

#

Order allow,deny

#

Allow from all

#

</Limit>

#

<LimitExcept GET POST OPTIONS PROPFIND>

#

Order deny,allow

#

Deny from all

# </LimitExcept> #</Directory>

67

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 don’t know your username, open the Start menu; your username is at the top of the Start box.)

Writing Your CGI Programs

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

68

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

Chapter 4 - Introduction to CGI

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!

4.4 PROGRAMMING IN CGI

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

First CGI Program

Program 4.1: first.cgi Hello World Program

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

The first line of your program should look like this:

#!/perl/bin/perl –wT

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

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

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

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

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

BSIT 52

Web Programming

69

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

Program 4.2: second.cgi Hello World Program 2

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

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

print “somestring”;

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

print <<EndMarker;

line1

line2

line3

etc.

EndMarker

You can use any word or phrase for the end marker

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

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

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

70

Chapter 4 - Introduction to CGI

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

The CGI.pm Module

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

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

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

use CGI qw(:standard);

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

Now you can call the various module functions by typing the function name followed by any arguments:

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

header;

start_html;

end_html;

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

print start_html(“Hello World”); will print out the following:

<html> <head> <title>Hello World</title> <head> <body>

BSIT 52

Web Programming

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

71

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

#!/usr/bin/perl -wT use CGI qw(:standard); print header; print start_html(“Hello World”); print “<h2>Hello, world!</h2>\n”; print end_html;

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

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

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

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

Basics of Pearl

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

Pearl Variables

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

Scalars

A scalar variable stores a single (scalar) value. Perl scalar names are prefixed with a dollar sign ($),

so for example, $x, $y, $z, $username, and $url are all examples of scalar variable names. Here’s how

variables are set:

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

In this example $foo, $name, and $pi are scalars. You do not have to declare a variable before using it,

but its considered good programming style to do so. There are several different ways to declare variables, but the most common way is with the my function:

72

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

Chapter 4 - Introduction to CGI

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.

Let’s try it out in a CGI program.

Program 4.5: scalar.cgi Print Scalar Variables Program

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

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

print header; print start_html(“Scalars”); print <<EndHTML;

<h2>Hello</h2>

<p> My e-mail address is $email, and my web url is <a href=”$url”>$url</a>. </p> EndHTML print end_html;

BSIT 52

Web Programming

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. You’ll notice a few new things in this program. First, there’s use strict. This is a standard Perl module that requires you to declare all variables. You don’t have to use the strict module, but it’s considered good programming style, so it’s good to get in the habit of using it.

You’ll also notice the variable declarations:

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

Notice that the @-sign in the e-mail address is escaped with (preceded by) a backslash. This 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 can’t 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 you’re referring to a single element of an array, you prefix the name with $ instead of @. The $-sign again indicates that it’s a single (scalar) value; the @-sign means you’re talking about the entire array.

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

a time:

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

print “$colors[0]\n”; print “$colors[1]\n”; print “$colors[2]\n”;

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

# prints “red” # prints “green” # prints “blue”

74

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

}

Chapter 4 - Introduction to CGI

Getting Data Into And Out Of Arrays

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

my @people = ();

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

push(@people, “Howard”);

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

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

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

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

my $who = shift(@people);

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

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

my $who = pop(@people);

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

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

Finding the Length of Arrays

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

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

BSIT 52

Web Programming

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

This prints “There are 4 people in line.”

Array Slices

75

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

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

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

Finding An Item In An Array

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

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

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

Splitting an Array

A very useful function in Perl is split, which splits up a string and places it into an array. The 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 (%). Here’s how they’re defined:

my %colors = ( “red”,

“#ff0000”,

“green”, “#00ff00”, “blue”, “#0000ff”, “black”, “#000000”, “white”, “#ffffff” );

76

Chapter 4 - Introduction to CGI

This particular example creates a hash named %colors which stores the RGB HEX values for the named colors. The color names are the hash keys; the hex codes are the hash values.

Remember that there’s more than one way to do things in Perl, and here’s the other way to define 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, you’ll 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”;

}

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

BSIT 52

Web Programming

77

Program 4.6: colors.cgi - Print Hash Variables Program

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

# declare the colors hash:

my %colors = ( blue => “#0000ff”, white => “#ffffff” );

red => “#ff0000”, green=> “#00ff00”,

black => “#000000”,

# print the html headers

print header; print start_html(“Colors”);

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

}

print end_html;

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

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

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

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

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

Adding Items to a Hash

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

$hashname{newkey} = newvalue;

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

$colors{purple} = “#ff00ff”;

If the named key already exists in the hash, then an assignment like this overwrites the previous value

associated with that key.

78

Deleting Items From a Hash

Chapter 4 - Introduction to CGI

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

delete $hashname{key};

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

%hashname = ();

Values

We’ve already seen that the keys function returns a list of the keys of a given hash. Similarly, 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.

Determining Whether a Hash is Empty

You can use the scalar function on hashes as well:

scalar($hashname);

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

Here’s an example:

my %colors = (red => “#ff0000”, green=> “#00ff00”,

blue => “#0000ff”, white => “#ffffff” );

black => “#000000”,

BSIT 52

Web Programming

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

79

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

Perl Control Structures

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

Conditional Statements

If Condition

You’ve already seen if/elsif in action. The structure is always started by the word if, followed by 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 doesn’t 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

Numbers

Strings

$x is equal to $y

$x == $y

$x eq $y

$x is not equal to $y

$x != $y

$x ne $y

$x is greater than $y

$x > $y

$x gt $y

$x is greater than or equal to $y

$x >= $y

$x ge $y

$x is less than $y

$x < $y

$x lt $y

$x is less than or equal to $y

$x <= $y

$x le $y

Table 4.1 Relational and Equality Operators

If it’s a string test, you use the letter operators (eq, ne, lt, etc.), and if it’s a numeric test, you use 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

}

Chapter 4 - Introduction to CGI

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

if ($varname eq “somestring”) {

}

#

do stuff here if the condition is true

elsif ($varname eq “someotherstring”) {

 

#

do other stuff

}

else {

 

#

do this if none of the other conditions are met

}

You can join conditions together by using logical operators:

Operator

Example

Explanation

&&

condition1

&&

True if condition1 and condition2 are both true

condition2

||

condition1 || condition2

True if either condition1 or condition2 is true

and

condition1 and condition2

Same as && but lower precedence

or

condition1 or condition2

Same as || but lower precedence

Table 4.2 Logical Operators

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. Let’s say you wanted to execute code only if a certain condition were false. You could do something like this:

BSIT 52

Web Programming

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

}

81

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, whilewhilewhilewhilewhile andandandandand untiluntiluntiluntiluntil.

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 (it’s 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

}

Chapter 4 - Introduction to CGI

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

}

Working with CGI CGI Environment Variables

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

Information about the client, server, and user

Form data that the user supplied