1.2 HTTP and HTML: The Foundation of Web Technology
1.2.3 Client-Side Scripting for Enhancing Page Interactivity
HTML was originally conceived for writing hypertexts. However, the develop- ment of interactive applications, for example applications supporting form-based data entry, requires additional capabilities, like the possibility of defining events produced by the interaction of the user with the HTML page, and procedures for reacting to such events.
1.2 HTTP and HTML: The Foundation of Web Technology 11
Table 1.1 HTML tags for text formatting.
Tag <BODY> <B> <I> <U> <PRE> <FONT> <P> <H1> Attributes bgcolor, background, text, link
size, color, face align
align
Meaning
Sets properties of the entire document, such as back- ground color, background image, text, and link color. Sets the font style to bold.
Sets the font style to italic. Sets the font style to underlined.
Tells the browser to render the text in a fixed-pitch font, to preserve whitespace, and not to wrap long lines. Assigns font properties.
Delimits a paragraph and sets text horizontal alignment (left, center, right, justify).
Delimits a heading of level 1 (there are six levels of headings) and sets the horizontal alignment.
Figure 1.4 HTML page containing a hypertext anchor.
<HTML> <HEAD>
<TITLE>A Simple Hypertext Anchor</TITLE>
<META name="keywords" content="HTML, tutorial"> </HEAD>
<BODY bgcolor="#FFFFFF" text="#000000"> <P align="left">
<FONT size="+6"> Click
<A href="http://www.webml.org">HERE</A> to open the WebML home page </FONT>
</P> </BODY> </HTML>
<HTML> <HEAD>
<TITLE>A Simple Hypertext Anchor</TITLE>
<META name="keywords" content="HTML, tutorial"> </HEAD>
<BODY bgcolor="#FFFFFF" text="#000000"> <P align="left">
<FONT size="+5"> Click <A href=
“mailto:[email protected]">HERE</A>to send me email</FONT> </P>
</BODY> </HTML>
<HTML> <HEAD>
<TITLE>A Simple Image</TITLE>
<META name="keywords" content="HTML, tutorial"> </HEAD>
<BODY bgcolor="#FFFFFF" text="#000000"> <P align="center">
<IMG src="http://www.polimi.it/images2000/home/testata.gif">
</P> </BODY> </HTML>
Figure 1.6 HTML page containing an image tag.
Table 1.2 Essential attributes of the IMG tag.
Attributes of the image tag Meaning
width, height The screen space reserved to the image, in pixels.
align The image alignment (top, middle, bottom, left,
right).
border Width of the image border in pixels.
alt Alternative text, to be displayed when the image is not available, or in textual browsers.
HTML pages can be made more interactive by inserting into their code small programs, called client-side scripts,which are executed by the browser when the page is loaded or when the user produces some event.
The most popular languages for creating client-side scripts are JavaScript, by Netscape, and VisualBasic script, by Microsoft. Scripts are inserted inside a page using the <SCRIPT> tag, placed either in the head section of the HTML docu- ment, or in its body. Scripts in the head section are executed when they are ex- plicitly called, or when an event is triggered; scripts in the body section are executed when the HTML page is loaded.
The example in Figure 1.7 uses JavaScript code to write the current date. The script is placed in the document body and is executed when the page is loaded in the browser. The instruction document.writein the <SCRIPT>tag makes the ar- gument of the write function (for example, the current year calculated by the function call d.getFullYear()) to be output in the document, in the position where the <SCRIPT>tag appears. The result of loading the page in the browser appears in Figure 1.7 on page 16.
Client-side scripts can be activated after the occurrence of specific events. In this case, the scripts are placed in the head section of the document, and the event that triggers script execution is declared as an attribute of the appropriate HTML element. For example, the page in Figure 1.8 on page 17 contains the anchor text “Click here to enter my favorite Web site.” The anchor tag includes the declaration of the onClickevent, which is raised when the anchor text is clicked. The event triggers a JavaScript function named dialog, which opens a confirmation dialog box asking the user if he/she really wants to access the page linked to the anchor. Client-side scripting is particularly useful in conjunction with the <FORM> tag, an HTML element for constructing data entry forms. In this case, events can be attached to the form fields and may trigger functions for validating the user input, for example, for controlling the validity of a date. Forms are treated in Section 1.5.1.