Advanced HTML/Introduction to CGI Scripting and JavaScript Training Class

The Advanced HTML/Introduction to CGI Scripting and JavaScript training class teaches you the special HTML and CGI scripting skills you need to transform your World Wide Web site into a truly interactive, compelling experience. Here is a look at the exciting skills you will learn:

• Interactive Forms: By adding interactive HTML forms to your Web site, you can enable visitors to search and order from a catalog of products, apply for membership in your organization, register in your site's guestbook, answer surveys and more! We will teach you to build professional, attractive HTML forms that are easy for your site's visitors to use.
• CGI Scripting: When a visitor to your site clicks on the Submit button, the information they entered into your form is sent to a CGI (Common Gateway Interface) script on your server. This script can do one or several things with the information, it can save the data to a database, or to a text file, return input to the user's Web browser, E-mail it to an address, or processes it in some other way. You will learn to use the very popular Perl scripting language to write and debug some basic and useful CGI scripts.
• Dynamic Forms with JavaScript: JavaScript allows you to more efficiently process your forms! We will teach you how to use JavaScript to validate your forms before they are passed to a server-side script, thus decreasing the drain on your server's resources. Furthermore, you will learn how to dynamically update your forms based on user input.

The course includes a fully illustrated workbook, an HTML reference card by SSC, and O'Reilly & Associates' Web Design in a Nutshell, and handouts.

• To learn how to build attractive, easy-to-use forms that will transform your site into an interactive experience for its users
• To develop the basic Perl scripting skills necessary to write programs that will process information entered into these forms. Students will learn how to write scripts that save entered information to a file or send it to an E-mail address.
• To gain basic knowledge of JavaScript, which will allow them to use the event handlers common to many HTML tags and to do elementary form validation on data passed to a Perl script.

9:00 Introduction

• The appearance and functionality of your web site are critical.
• Most Web sites are flat ads, no better than print advertisements. By developing and creatively applying interactive forms, you can transform your site into a truly interactive experience.
• Through the use of JavaScript, you can ensure that the information passed through those forms is valid and useful.

9:20 Creating Forms (discussion and hands-on)

• A discussion of the possible uses of interactive forms
• Guest books
• Product order forms
• Searchable databases of products or documents
• And more!
• Laying out text and fields in your forms
• Check boxes, radio buttons, and pull-down menus
• Exercise: Students will create a form for a guest book.

10:30 The Basics of the Perl Scripting Language (discussion and hands-on exercises)

• How do I create a CGI script using Perl?
• The print statement
• Using a CGI script to dynamically create Web pages based on data entered into a form

11:25 CGI Script Exercise: Mailing Information Entered into a Form (discussion and hands-on)

• Students will write key pieces of a Perl script that will take information entered into their guest book form and mail it to a pre-defined address.

1:30 CGI Script Exercise: Using If-Else Conditionals to Handle (discussion and hands-on)

2:15 Using Perl’s AND and OR Logic Operators (discussion)

2:25 Break

2:35 An Introduction to JavaScript (discussion)

• Practical applications of JavaScript
• Differences between server-based and client-based interaction and their implications for web site development
• Differences among Java, JavaScript, and CGI scripts
• What objects are and an overview of the JavaScript model

3:00 A Basic JavaScript-enabled Color Picker (discussion and hands-on)

• HTML buttons
• The onClick event handler
• How to use the document.bgcolor property to set the background color of a page
• Exercise: Given a simple page with four buttons labeled red, green, blue, and white, students will embed JavaScript code that changes the color of the page’s background to the appropriate color when one of the buttons is clicked.

3:30 In-Line Form Validation Using JavaScript (discussion and hands-on)

• How JavaScript "sees" a form
• The onSubmit event handler
• Exercise: Enhancing your guestbook to ensure that visitors enter their first and last names.