17 HTML, Scripting, and Interactivity

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

YOU WILL LEARN TO…

17 HTML, Scripting, and Interactivity

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

YOU WILL LEARN TO…

SectionBell Ringer

Section 17.1 Adding Interactivity Using HTMLFocus 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

pp. 476-481

Section 17.1 Adding Interactivity Using HTMLAdding Multimedia Elements

Inserting an audio file or an animated GIFanimated 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)

pp. 476-481

Section 17.1 Adding Interactivity Using HTMLCreating a Registration Form

You create a registration form in HTML with text boxes, using preset options, like radio radio buttonsbuttons, check boxes, pull-down menuspull-down menus, and text areastext areas.

pp. 476-481

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)

Sectionpp. 476-481

Adding Interactivity Using HTML

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.

Forms in CSS

17.1

Sectionpp. 476-481

Adding Interactivity Using HTML

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

17.1

Section Adding Interactivity Using HTMLpp. 476-481

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

Section Assessment

17.1

SectionBell Ringer

Section 17.2 Adding Interactivity Using ScriptingFocus 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

pp. 483-486

Section 17.2 Adding Interactivity Using ScriptingClient-Side Scripts

Some scripting languages, known as client-side scriptsclient-side scripts, are designed to be transferred to the user’s computer along with the HTML code.

client-side script A script that is executed by the user’s Web browser. (p. 483)

pp. 483-486

Section 17.2 Adding Interactivity Using ScriptingClient-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)

pp. 483-486

JavaScript is a popular scripting language for client-side scripts.

JavaScript is composed of several elements, including:

• ObjectsObjects• EventsEvents• Event handlersEvent handlers

Section 17.2 Adding Interactivity Using ScriptingClient-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)

pp. 483-486

More JavaScript elements:

• FunctionsFunctions

• VariablesVariables

• Conditional statementsConditional statements

Section 17.2 Adding Interactivity Using ScriptingServer-Side Scripts

Server-side scriptsServer-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 user’s computer as a Web page. (p. 485)

pp. 483-486

Sectionpp. 483-486

Adding Interactivity Using Scripting

Server-side scripts can be used to change static content into dynamic content.

A server-side script can retrieve data based on the user’s input and then generate a Web page that displays in the user’s browser.

Server-Side Scripts

17.2

Sectionpp. 483-486

Adding Interactivity Using Scripting

An alert statement tells you when a particular action is not occurring as specified.

Alert statements should be removed before the site is published.

Debugging Code

17.2

Sectionpp. 483-486

Adding Interactivity Using Scripting

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

17.2

Section Adding Interactivity Using Scriptingpp. 483-486

True/False Client-side scripts are executed on the Web server.

False. Client-side scripts are executed by a user’s Web browser.

Section Assessment

17.2

17 HTML, Scripting, and Interactivity

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

17 HTML, Scripting, and Interactivity

Chapter Review

Explain What is the difference between client-side scripts and server-side scripts?

Client-side scripts are executed by the user’s Web browser. They are downloaded to the user’s 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.

17 HTML, Scripting, and Interactivity

Resources

For more resources on this chapter, go to the Introduction to Web Design Using Dreamweaver Web site at WebDesignDW.glencoe.com.