Book cover slide

1
YOU WILL LEARN TO

• Section 17.1
• Add an audio file using HTML
• Create a form using HTML
• Add text boxes using HTML
• Add radio buttons and check boxes using HTML
• Add a pull-down menu using HTML
• Add a text area using HTML
• Modify a text box using CSS

2
YOU WILL LEARN TO

• Section 17.2
• Identify client-side scripting languages
• Create a rollover button using JavaScript
• Identify server-side scripting languages
• Debug code

3
pp. 476-481
Adding Interactivity Using HTML
17.1
Focus on Reading
Main Ideas You can use HTML code to insert
multimedia elements into a Web page. Other HTML
tags allow you to create forms.
Key Terms animated GIF radio button pull-down
menu text area
4
pp. 476-481
Adding Interactivity Using HTML
17.1
Adding Multimedia Elements
Inserting an audio file or an animated GIF file
is very similar to inserting an image file.
animated GIF A sequence of GIF images that are
all stored in a single file along with an image
transition delay value that controls the amount
of time each image will stay on the screen. (p.
477)
5
pp. 476-481
Adding Interactivity Using HTML
17.1
Creating a Registration Form
You create a registration form in HTML with text
boxes, using preset options, like radio buttons,
check boxes, pull-down menus, and text areas.
radio button An interactive control that allows a
user to select only one option from a list of
options. (p. 478) pull-down menu An interactive
element that looks like a text field, but
operates like a set of radio buttons in that
users can choose only one item from a list of
options. (p. 479) text area A form field that
will expand to allow visitors to enter any length
comment. (p. 479)
6
pp. 476-481
Adding Interactivity Using HTML
17.1
Forms in CSS
It is not difficult to create a form using HTML.
Knowing which HTML tags to use can help you
adjust form elements when you create a form in
Dreamweaver.
7
pp. 476-481
Adding Interactivity Using HTML
17.1

• Activity 17A Add an Audio File Using HTML (p.
  476)
• Activity 17B Add Text Boxes Using HTML (p.
  477)
• Activity 17C Add Radio Buttons and Check Boxes
  Using HTML (p. 478)
• Activity 17D Add a Pull-down Menu Using HTML
  (p. 479)
• Activity 17E Add a Text Area using HTML (p.
  480)
• Activity 17F Use CSS to Style a Form (p. 480)

8
pp. 476-481
Adding Interactivity Using HTML
17.1
Section Assessment
Identify In an animated GIF, what does an image
transition delay value control? A. the size of
each image B. the color of each image C. the
amount of time each image will stay on the
screen D. the HTML tags used to create each
image
C. the amount of time each image will stay on
the screen
9
pp. 483-486
Adding Interactivity Using Scripting
17.2
Focus on Reading
Main Ideas Scripting languages are used to
supplement the capabilities of standard HTML.
Scripting languages are divided into client-side
scripts and server-side scripts.
Key Terms client-side script object event event
handler function variables conditional
statements server-side script
10
pp. 483-486
Adding Interactivity Using Scripting
17.2
Client-Side Scripts
Some scripting languages, known as client-side
scripts, are designed to be transferred to the
users computer along with the HTML code.
client-side script A script that is executed by
the users Web browser. (p. 483)
11
pp. 483-486
Adding Interactivity Using Scripting
17.2
Client-Side Scripts
object In JavaScript, an element in a browser
window it can have properties that define it.
(p. 483) event Anything that causes an effect to
occur often triggered by user action. (p.
484) event handler The part of the script that
responds to an event and defines the action that
will occur when the event takes place. (p. 484)

• JavaScript is a popular scripting language for
  client-side scripts.
• JavaScript is composed of several elements,
  including
• Objects
• Events
• Event handlers

12
pp. 483-486
Adding Interactivity Using Scripting
17.2
Client-Side Scripts
function In JavaScript, code that performs a
specific task or action. (p.
484) variables Used by scripts to identify a
value that will change when the script is
executed. (p. 484) conditional statement A type
of code that allows a script to respond
differently depending on the action taken by the
user. (p. 484)

• More JavaScript elements
• Functions
• Variables
• Conditional statements

13
pp. 483-486
Adding Interactivity Using Scripting
17.2
Server-Side Scripts
Server-side scripts are run from the Web server.
Web designers often use CGI to create Web-based
forms that users fill out and then submit to the
server.
server-side script A script that is executed on
the Web server, with the output transferred to
the users computer as a Web page. (p. 485)
14
pp. 483-486
Adding Interactivity Using Scripting
17.2
Server-Side Scripts
Server-side scripts can be used to change static
content into dynamic content. A server-side
script can retrieve data based on the users
input and then generate a Web page that displays
in the users browser.
15
pp. 483-486
Adding Interactivity Using Scripting
17.2
Debugging Code
An alert statement tells you when a particular
action is not occurring as specified. Alert
statements should be removed before the site is
published.
16
pp. 483-486
Adding Interactivity Using Scripting
17.2

• Activity 17G Create a Rollover Button Using
  JavaScript (p. 484)

17
pp. 483-486
Adding Interactivity Using Scripting
17.2
Section Assessment
True/False Client-side scripts are executed on
the Web server.
False. Client-side scripts are executed by a
users Web browser.
18
Chapter Review
Identify What element looks like a text field,
but operates like a set of radio buttons? A.
option button B. entry field C. text area D.
pull-down menu
D. pull-down menu
19
Chapter Review
Explain What is the difference between
client-side scripts and server-side scripts?
Client-side scripts are executed by the users
Web browser. They are downloaded to the users
computer with the HTML code. Server-side scripts
are executed by the Web server. They often
generate page content based on the input of the
user.
20
Resources
For more resources on this chapter, go to the
Introduction to Web Design Using Dreamweaver Web
site at WebDesignDW.glencoe.com.