20
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…

HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Embed Size (px)

Citation preview

Page 1: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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…

Page 2: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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…

Page 3: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section 17.1 Adding Interactivity Using HTML

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

pp. 476-481

Page 4: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section 17.1 Adding Interactivity Using HTML

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)

pp. 476-481

Page 5: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section 17.1 Adding Interactivity Using HTML

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.

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)

Page 6: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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

Page 7: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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

Page 8: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section Adding Interactivity Using HTML pp. 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

Page 9: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section 17.2 Adding Interactivity Using Scripting

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

pp. 483-486

Page 10: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section 17.2 Adding Interactivity Using Scripting

Client-Side Scripts

Some scripting

languages, known as

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

Page 11: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section 17.2 Adding Interactivity Using Scripting

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)

pp. 483-486

JavaScript is a popular

scripting language for

client-side scripts.

JavaScript is composed of

several elements,

including:

• Objects

• Events

• Event handlers

Page 12: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section 17.2 Adding Interactivity Using Scripting

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)

pp. 483-486

More JavaScript

elements:

• Functions

• Variables

• Conditional statements

Page 13: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section 17.2 Adding Interactivity Using Scripting

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

computer as a Web page.

(p. 485)

pp. 483-486

Page 14: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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

Page 15: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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

Page 16: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section pp. 483-486

Adding Interactivity Using Scripting

• Activity 17G – Create a Rollover Button Using JavaScript

(p. 484)

17.2

Page 17: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

Section Adding Interactivity Using Scripting pp. 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

Page 18: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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

Page 19: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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.

Page 20: HTML, Scripting, and Interactivity - calhoun40.net Interactivity Using Scripting Server-side scripts can be used to change static content ... client-side scripts and server-side scripts?

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.