Scribd
Upload
8 views

5 - Dynamic HTML and Client-Side Scripting

The document discusses dynamic HTML and client-side scripting. It describes concepts like DHTML, JavaScript, and how to use methods like write, writeln and alert to display text on web pages. Code examples are provided to demonstrate different ways to output text including on multiple lines.

Uploaded by

Mazen
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

5 - Dynamic HTML and Client-Side Scripting

The document discusses dynamic HTML and client-side scripting. It describes concepts like DHTML, JavaScript, and how to use methods like write, writeln and alert to display text on web pages. Code examples are provided to demonstrate different ways to output text including on multiple lines.

Uploaded by

Mazen
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 41

TCS3224

WEB PROJECT

DYNAMIC HTML AND CLIENT-SIDE


SCRIPTING

May 4, 2024 © LMS SEGi education group


1
Dynamic HTML

• Dynamic HTML (DHTML) is a collective term for a


combination of HTML tags and options that can make
Web pages more animated and interactive than previous
versions of HTML.

• DHTML is a combination of a static markup


language (e.g. HTML), a client-side scripting language
(e.g. JavaScript), a presentation definition language
(e.g. CSS), and the Document Object Model (DOM).

May 4, 2024 © LMS SEGi education group


2
The Concepts and Features in Dynamic
HTML
• Animate text and images in their document,
independently moving any element from a starting point
to any ending point
• Embed a ticker or other dynamic display that

automatically refreshes its content with the latest news,


stock quotes, or other data.
• Use a form to capture user input, and then process,

verify and respond to that data without having to send


data back to the server.
• Include rollover buttons

or drop-down menus.

May 4, 2024 © LMS SEGi education group


3
Introduction

• JavaScript
• Scripting language that enhance the functionality and
appearance of web pages.
• Before you can run code examples with JavaScript on
your computer, you may need to change your
browser’s security settings.

4
What is a Script ?

• A script is an executable list of commands like macro or


batch file created by a scripting language.

• Scripts (like PHP, Perl) which are executed on a web


server are called server-side scripts and scripts (like
JavaScript) which are executed on user's computer,
interpreted by the browser is called client-side scripts.

• As JavaScript works on the client side, It is mostly used


for client-side web development.
JavaScript vs. Java

• JavaScript and Java are similar in some ways but


fundamentally they are different.
• Java is a server-side and static type language.
• JavaScript is a client-side, dynamically typed language.
• Java programs are compiled on the server and run on
almost every platform without distribution of source code
whereas scripts written in JavaScript are placed inside a
HTML document and interpreted by the browser.
• The syntax, reserved-words of JavaScript and Java are
also different.
Simple Program: Displaying a Line of
Text in a Web Page
• JavaScripts appear in the <head> section of the XHTML
document
• The browser interprets the contents of the <head>
section first
• The <script> tag indicates to the browser that the text
that follows is part of a script.
• Attribute type specifies the scripting language used in
the script—such as text/javascript

7
Simple Program: Displaying a Line of
Text in a Web Page (Cont.)
• A string of characters can be contained between double
(") or single (') quotation marks

• A string is sometimes called a character string, a


message or a string literal

8
Simple Program: Displaying a Line of
Text in a Web Page (Cont.)
• The parentheses following the name of a method contain
the arguments that the method requires to perform its
task (or its action)
• Every statement should end with a semicolon
• JavaScript is case sensitive
• Not using the proper uppercase and lowercase letters

is a syntax error

9
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Fig. 6.2 |
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Displaying a
4 line of text.
5 <!-- Fig. 6.2: welcome.html --> Specifies that we are using
6 <!-- Displaying a line of text. --> the JavaScript language
7 Script begins
<html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
Prevents older browsers
9 <title>A First Program in JavaScript</title>
that do not support
10 <script type = "text/javascript"> Writes an h1 welcome
scripting from displaying
11 <!-- messagethe
in text
the XHTML
of the script
document
12 document.writeln(
13 "<h1>Welcome to JavaScript Programming!</h1>" );
XHTML comment
14 // --> delimiter, commented for
15 </script> Script ends correct interpretation by all
16 </head><body></body> browsers
17 </html>

10
1 <?xml version = "1.0" encoding = "utf-8"?> Fig. 6.3 |
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Printing one
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
line with
5 <!-- Fig. 6.3: welcome2.html --> separate
6
7
<!-- Printing one line with multiple statements. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
statements.
Two write
8
statements create
<head>
9 <title>Printing a Line with Multiple Statements</title>
10
11
<script type = "text/javascript">
<!--
one line of
12 document.write( "<h1 style = \"color: magenta\">" ); XHTML text
13 document.write( "Welcome to JavaScript " +
14
15
"Programming!</h1>" );
// -->
Concatenation
16 </script> operator joins the
17 </head><body></body>
18 </html> string together, as
it is split into
multiple lines

11
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Fig. 6.4 | Printing
4 on multiple lines
5 <!-- Fig. 6.4: welcome3.html --> with a single
6 <!-- Printing on multiple lines with a single statement. --> statement.
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
Inserts line-break
9 <title>Printing Multiple Lines</title>
10 <script type = "text/javascript">
11 <!--
12 document.writeln( "<h1>Welcome to<br />JavaScript" +
13 "<br />Programming!</h1>" );
14 // -->
15 </script>
16 </head><body></body> Inserts line-break
17 </html>

12
Modifying Our First Program

• Dialogs
• Useful to display information in windows that “pop up”

on the screen to grab the user’s attention


• Typically used to display important messages to the

user browsing the web page


• Browser’s window object uses method alert to

display an alert dialog


• Method alert requires as its argument the string to

be displayed

13
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Fig. 6.5 | Alert
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 dialog
5 <!-- Fig. 6.5: welcome4.html --> Creates a pop up box that displaying
6 <!-- Alert dialog displaying multiple lines. --> alerts the welcome text to the
7 <html xmlns = "http://www.w3.org/1999/xhtml"> user
multiple lines.
8 <head>
9 <title>Printing Multiple Lines in a Dialog Box</title>
10 <script type = "text/javascript">
11 <!--
12 window.alert( "Welcome to\nJavaScript\nProgramming!" );
13 // -->
14 </script>
15 </head>
16 <body>
17 <p>Click Refresh (or Reload) to run this script again.</p>
18 </body>
19 </html>

14
Obtaining User Input with prompt
Dialogs
• Scripting
• Gives you the ability to generate part or all of
a web page’s content at the time it is shown to
the user
• Such web pages are said to be dynamic, as
opposed to static, since their content has the
ability to change

15
Obtaining User Input with prompt
Dialogs (Cont.)
• Keywords are words with special meaning in JavaScript
• Keyword var
• Used to declare the names of variables

• All variables have a name, type and value, and should

be declared with a var statement before they are


used in a program
• A variable name can be any valid identifier consisting of
letters, digits, underscores ( _ ) and dollar signs ($) that
does not begin with a digit and is not a reserved
JavaScript keyword.

16
Obtaining User Input with prompt
Dialogs (Cont.)
• Declarations end with a semicolon (;) and can be split
over several lines, with each variable in the declaration
separated by a comma
• Comments
• A single-line comment begins with the characters //
• Comments do not cause the browser to perform any

action when the script is interpreted; rather,


comments are ignored by the JavaScript interpreter
• Multiline comments begin with delimiter /* and end

with delimiter *

17
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Fig. 6.7 | Prompt
4 box used on a
5 <!-- Fig. 6.7: welcome5.html --> welcome screen
6 <!-- Prompt box used on a welcome screen. -->
(Part 1 of 2).
7 <html xmlns = "http://www.w3.org/1999/xhtml"> Declares a new variable
8 <head>
9 <title>Using Prompt and Alert Boxes</title> Sets the identifier of the
10 <script type = "text/javascript"> variable to name
11 <!--
12 var name; // string entered by the user
Inserts the value given to name
13
into the XHTML text
14 // read the name from the prompt box as a string
15 name = window.prompt( "Please enter your name" );
16
17 document.writeln( "<h1>Hello, " + name +
18 ", welcome to JavaScript programming!</h1>" );
Assigns the string entered by the
19 // -->
user to the variable name
20 </script>
21 </head>
22 <body>
23 <p>Click Refresh (or Reload) to run this script again.</p>
24 </body>
25 </html>

19
Fig. 6.7 | Prompt box used on a
welcome screen (Part 2 of 2).

20
Fig. 6.8 | Prompt dialog displayed by the
window object’s prompt method.

21
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Fig. 6.9 |
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Addition script
5 <!-- Fig. 6.9: addition.html --> (Part 1 of 2).
6 <!-- Addition script. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>An Addition Program</title>
10 <script type = "text/javascript">
11 <!--
12 var firstNumber; // first string entered by user
Assigns the first input from
13 var secondNumber; // second string entered by user
the user to the variable
14 var number1; // first number to add
15 var number2; // second number to add
firstNumber
16 var sum; // sum of number1 and number2
17
Assigns the second input
18 // read in first number from user as a string
from the user to the variable
19 firstNumber = window.prompt( "Enter first integer" );
20
secondNumber
21 // read in second number from user as a string
22 secondNumber = window.prompt( "Enter second integer" ); Converts the strings entered
23
by the user into integers
24 // convert numbers from strings to integers
25 number1 = parseInt( firstNumber );
26 number2 = parseInt( secondNumber );
27
28 sum = number1 + number2; // add the numbers
29

22
30
31
// display the results
document.writeln( "<h1>The sum is " + sum + "</h1>" ); Addition
script
32 // -->
33 </script>
34 </head>
35
36
<body>
<p>Click Refresh (or Reload) to run the script again</p>
(Part 2 of
37 </body>
38 </html>
2).

23
Decision Making: Equality and Relational
Operators (Cont.)
• Date object
• Used acquire the current local time
• Create a new instance of an object by using
the new operator followed by the type of the
object, Date, and a pair of parentheses

24
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Fig. 6.17 | Using
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
equality and
4
relational
5 <!-- Fig. 6.17: welcome6.html -->
6 <!-- Using equality and relational operators. -->
operators (Part 1 of
7 <html xmlns = "http://www.w3.org/1999/xhtml"> 3).
8 <head>
9 <title>Using Relational Operators</title>
10 <script type = "text/javascript"> Set variable now to a new
11 <!-- Date object
12 var name; // string entered by the user
13 var now = new Date(); // current date and time
Assigns hour to the value
14 var hour = now.getHours(); // current hour (0-23) returned by the Date
15 object’s getHours method
16 // read the name from the prompt box as a string
17 name = window.prompt( "Please enter your name" );
18 Conditional statement: checks
19 // determine whether it is morning whether the current value of
20 if ( hour < 12 ) hour is less than 12
21 document.write( "<h1>Good Morning, " );
22
This statement will execute
only if the previous
condition was true

25
23 // determine whether the time is PM
24 if ( hour >= 12 ) Conditional statement: checks Fig. 6.17 | Using
25 { whether the current value of equality and
26 // convert to a 12-hour clock hour is greater than or equal to
relational
27 hour = hour - 12; 12
28 operators (Part 2
If hour is 12 or greater (the
29 // determine whether it is before 6 PM previous condition was true),of 3).
30 if ( hour < 6 ) subtract 12 from the value and
31 document.write( "<h1>Good Afternoon, " ); reassign it to hour
32
33 // determine whether it is after 6 PM
34 if ( hour >= 6 ) Conditional statement: checks
35 document.write( "<h1>Good Evening, " ); whether the current value of
36 } // end if hour is less than 6
37
38 document.writeln( name +
39 ", welcome to JavaScript programming!</h1>" );
Conditional statement: checks
40 // -->
whether the current value of
41 </script>
hour is greater than or equal to
42 </head>
6
43 <body>
44 <p>Click Refresh (or Reload) to run this script again.</p>
45 </body>
46 </html>

26
Fig. 6.17 | Using equality and relational
operators (Part 3 of 3).

27
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Fig. 8.6 |
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 Compound
5 <!-- Fig. 8.6: Interest.html --> interest
6 <!-- Compound interest calculation with a for loop. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
calculation
8 <head> with a for loop
9 <title>Calculating Compound Interest</title>
(Part 1 of 2).
10 <style type = "text/css">
11 table { width: 100% }
12 th { text-align: left }
13 </style>
14 <script type = "text/javascript">
15 <!--
16 var amount; // current amount of money
17 var principal = 1000.0; // principal amount
18 var rate = .05; // interest rate
19
20 document.writeln(
21 "<table border = \"1\">" ); // begin the table
22 document.writeln(
23 "<caption>Calculating Compound Interest</caption>" );
24 document.writeln(
25 "<thead><tr><th>Year</th>" ); // year column heading
26 document.writeln(
27 "<th>Amount on deposit</th>" ); // amount column heading
28 document.writeln( "</tr></thead><tbody>" );
29

28
30 // output a table row for each year
31 for ( var year = 1; year <= 10; ++year ) Fig. 8.6 |
32 { Compound
33 amount = principal * Math.pow( 1.0 + rate, year );
34 document.writeln( "<tr><td>" + year +
interest
35 "</td><td>" + amount.toFixed(2) + calculation with
Control variable year begins
36 "</td></tr>" );
with a value of 1 a for loop (Part 2
37 } //end for
of 2).
38
39 document.writeln( "</tbody></table>" ); Continue to execute the loop
40 // --> while year is less than or equal
41 </script> to 10
42 </head><body></body>
43 </html> After each loop iteration, increase
the value of year by 1

29
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Fig. 9.2 |
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Programmer-
4
5 <!-- Fig. 9.2: SquareInt.html -->
defined
6 <!-- Programmer-defined function square. --> function
7 <html xmlns = "http://www.w3.org/1999/xhtml">
square (Part 1
8 <head>
9 <title>A Programmer-Defined square Function</title> of 2).
10 <script type = "text/javascript">
11 <!--
12 document.writeln( "<h1>Square the numbers from 1 to 10</h1>" );
13
14 // square the numbers from 1 to 10
15 for ( var x = 1; x <= 10; x++ )
16 document.writeln( "The square of " + x + " is " + Calls function square with x as an
17 square( x ) + "<br />" ); argument, which will return the value
18 to be inserted here
19 // The following square function definition is executed
20 // only when the function is explicitly called.
21
22 // square function definition
23 function square( y ) Begin function square
24 {
25 return y * y;
26 } // end function square
27 // -->
Names the parameter y
28 </script>
End function square Returns the value of y * y (the
29 </head><body></body>
30 </html> argument squared) to the caller
30
Fig. 9.2 | Programmer-defined
function square (Part 2 of 2).

31
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Fig. 9.3 |
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Programmer-
4
5 <!-- Fig. 9.3: maximum.html -->
defined
6 <!-- Programmer-Defined maximum function. --> maximum
7 <html xmlns = "http://www.w3.org/1999/xhtml"> function (Part 1
8 <head>
9 <title>Finding the Maximum of Three Values</title> of 3).
10 <script type = "text/javascript">
11 <!--
12 var input1 = window.prompt( "Enter first number", "0" );
13 var input2 = window.prompt( "Enter second number", "0" );
14 var input3 = window.prompt( "Enter third number", "0" );
15
16 var value1 = parseFloat( input1 );
17
18
var value2 = parseFloat( input2 );
var value3 = parseFloat( input3 ); Creates float
19
values from
user input

32
20 var maxValue = maximum( value1, value2, value3 );
21
22 document.writeln( "First number: " + value1 +
Fig. 9.3 |
23 Variable "<br />Second number: " + value2 + Programmer-
Calls function maximum
24 maxValu"<br />Third number: " + value3 + defined maximum
with arguments value1,
25 e stores "<br />Maximum is: " + maxValue ); function (Part 2
26 value2 and value3
27
the return
// maximum function definition (called from line 20) of 3).
28 value offunction maximum( x, y, z )
29 the call{to Begin function maximum
30 maximumreturn Math.max( x, Math.max( y, z ) ); with local variables x, y
31 } // end function maximum and z
32 // -->
33 </script>
Calls the Math object’s method
34 </head>
End function max to compare the first
35 <body> maximum variable with the maximum of
36 <p>Click Refresh (or Reload) to run the script again</p>
the other two
37 </body>
38 </html>

33
Fig. 9.3 | Programmer-defined maximum function (Part 3 of 3). 34
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Fig. 9.4 |
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Random
4
5 <!-- Fig. 9.4: RandomInt.html -->
integers,
6 <!-- Random integers, shifting and scaling. --> shifting and
7 <html xmlns = "http://www.w3.org/1999/xhtml"> scaling (Part 1
8 <head>
9 <title>Shifted and Scaled Random Integers</title> of 2).
10 <style type = "text/css">
11 table { width: 50%;
12 border: 1px solid gray;
13 text-align: center }
14 </style>
15 <script type = "text/javascript">
16 <!--
17 var value; Shifts the Scales the range of
18
19 range of return return values by a
document.writeln( "<table>" );
20
21
values up by 1 factor of 6
document.writeln( "<caption>Random Numbers</caption><tr>" );

22 for ( var i = 1; i <= 20; i++ )


23 {
24
25
value = Math.floor( 1 + Math.random() * 6 );
document.writeln( "<td>" + value + "</td>" );
Takes the floor of
26 the number from 1.0
27 // start a new table row every 5 entries
28 if ( i % 5 == 0 && i != 20 ) up to, but not
29
30
document.writeln( "</tr><tr>" );
} // end for
including, 7.0
31 35
32 document.writeln( "</tr></table>" );
33 // --> Fig. 9.4 |
34 </script> Random
35
36
</head>
<body>
integers,
37 <p>Click Refresh (or Reload) to run the script again</p> shifting and
38 </body> scaling (Part 2
39 </html>
of 2).

Variable value has a


value from 1 to 6

36
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Fig. 9.5 |
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Rolling a six-
4
5 <!-- Fig. 9.5: RollDie.html -->
sided die 6000
6 <!-- Rolling a Six-Sided Die 6000 times. --> times (Part 1 of
7 <html xmlns = "http://www.w3.org/1999/xhtml"> 3).
8 <head>
9 <title>Roll a Six-Sided Die 6000 Times</title>
10 <script type = "text/javascript">
11 <!--
12 var frequency1 = 0;
13 var frequency2 = 0;
14 var frequency3 = 0;
15 var frequency4 = 0;
16 var frequency5 = 0;
17 var frequency6 = 0; Stores a random
18
integer in the range
var face;
19
20
1 – 6 to variable
// roll die 6000 times and accumulate results
21 for ( var roll = 1; roll <= 6000; roll++ )
22 {
23 face = Math.floor( 1 + Math.random() * 6 ); face
24
25
26
switch ( face )
{
Uses a switch
27
28
case 1:
++frequency1;
statement to
29 break;
process the results
37
30 case 2: Fig. 9.5 |
31 ++frequency2;
32 break; Rolling a
33
34
case 3:
++frequency3;
six-sided die
35 break; 6000 times
36 case 4:
37 ++frequency4; (Part 2 of 3).
38 break;
39 case 5:
40 ++frequency5;
41 break;
42 case 6:
43 ++frequency6;
44 break;
45 } // end switch
46 } // end for Outputs the number of
47
48 document.writeln( "<table border = \"1\">" );
occurrences of each
49 document.writeln( "<thead><th>Face</th>" + face being rolled
50 "<th>Frequency</th></thead>" );
51 document.writeln( "<tbody><tr><td>1</td><td>" +
52 frequency1 + "</td></tr>" );
53 document.writeln( "<tr><td>2</td><td>" + frequency2 +
54 "</td></tr>" );
55 document.writeln( "<tr><td>3</td><td>" + frequency3 +
56 "</td></tr>" );
57 document.writeln( "<tr><td>4</td><td>" + frequency4 +
58 "</td></tr>" );

38
59 document.writeln( "<tr><td>5</td><td>" + frequency5 +
60 "</td></tr>" ); Fig. 9.5 |
61 document.writeln( "<tr><td>6</td><td>" + frequency6 + Rolling a six-
62
63
"</td></tr></tbody></table>" );
// -->
sided die 6000
64 </script> times (Part 3 of
65 </head>
3).
66 <body>
67 <p>Click Refresh (or Reload) to run the script again</p>
68 </body>
69 </html>

Running the script another


time calls Math.random
again and (usually) results in
different frequencies 39
Another Example: Random Image
Generator
• We can use random number generation to
randomly select from a number of images
in order to display a random image each
time a page loads

40
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Fig. 9.7 |
4
5 <!-- Fig. 9.7: RandomPicture.html -->
Random image
6 <!-- Random image generation using Math.random. --> generation
7 <html xmlns = "http://www.w3.org/1999/xhtml">
using Math.random.
8 <head>
9 <title>Random Image Generator</title>
10
11
<script type = "text/javascript">
<!--
Creates an src
12 document.write ( "<img src = \"" + attribute by
13 Math.floor( 1 + Math.random() * 7 ) + ".gif\" />" );
14 // --> concatenating a
15
16
</script>
</head>
random integer from 1
17 <body> to 7 with “.gif\” to
18 <p>Click Refresh (or Reload) to run the script again</p>
19 </body> reference one of the
20 </html>
images 1.gif,
2.gif, 3.gif,
4.gif, 5.gif,
6.gif or 7.gif

41
References

• Deitel, P.J. & Deitel, H.M. (2009). Internet and World


Wide Web: How to Program (4th ed.). New Jersey:
Pearson Education Inc. (2008).
• W3C.org (2008). XHTML Basic 1.1 Recommendation.
http://www.w3.org/TR/2008/REC-xhtml-basic-20080729/

42

You might also like