Advanced HTML I or II - Class Description

This class is designed for students who already have hands-on experience and a solid understanding of how HTML works and want to learn about the most advanced features of HTML. This class can be taken by itself or as a follow on to one of my Intermediate classes. I offer two different versions of this one-day workshop.

Advanced HTML I is recommended if taken after my one-day Intermediate HTML class because it covers Forms and CGI (which are covered in my two-day intermediate class but not the one day class). Advanced HTML I also provides an introduction to the components of Dynamic HTML but the hands-on emphasis is primarily on forms and CGI.

Advanced HTML II is recommended if taken after my two-day Intermediate HTML class because it focuses exclusively on Dynamic HTML. This one-day combination lecture and hands-on workshop covers the basics of Dynamic HTML (HTML 4.0 or DHTML). Students learn how the Document Object Model (DOM) works in conjunction with scripting languages --like Javascript, and Cascading Style Sheets (CSS1 & CSS2) to create truly dynamic, interactive Web pages.

Advanced I

Lecture:

  • Review the tags for creating simple forms
  • Learn what the different elements of a form are and when to use each
  • Look at the differences between the front-end (HTML) of a form and the back-end (CGI)
  • Look at a sample CGI script for processing the output of a form, and the various resources available online for creating or modifying your own
  • Review what you need to know to install and run a CGI script
  • Learn what the main components of DHTML are and how they work together to create dynamic Web pages
  • Review basic concepts and syntax of Style Sheets
  • Review basic concepts of Javascripting
  • Learn the difference between Javascript and CGI

Hands-On Exercises:

  • Make a simple form with text fields, drop down menus, radio buttons, checkboxes, & text areas
  • Lay out your form in a table to control the alignment of different form elements
  • See a form in action
  • Use cut and paste Javascripts to add image rollovers, window status messages, and pop-up windows to a Web page

See a detailed outline of this class

Advanced II

Lecture:

  • Review some of the changes from HTML 3.2 to HTML 4.0
  • Learn what the main components of DHTML are and how they work together to create dynamic Web pages
  • Learn about the Document Object Model (DOM) and how it acts as a programming interface between HTML, Styles, and various scripting languages
  • Review basic concepts and syntax for Style Sheets
  • Learn the different ways of applying Styles (i.e. externally, internally, and locally)
  • Review the main properties & values of the Style Sheet specification and how they work in different browsers
  • Learn how to create classes of styles and unique identifiers
  • Learn how to use Styles to position elements on a page
  • Review basic concepts of Javascripting
  • See examples of how Javascript and CSS can be used to add interactivity to a Web page

Hands-On Exercises:

  • Create and define your own style sheets and test them in different browsers
  • Play with the positioning of elements on a page using CSS2
  • Use cut and paste Javascripts to jazz up your Web pages with features like image rollovers, window status messages, and pop-up windows

See a detailed outline of this class