Crs 312
Building Web Pages with HTML and XHTML

Whereas in Course 310 the emphasis is on design, in this course the emphasis is on understanding the details of HTML and XHTML. A lot of attention is given to developing browser independent pages, and to examining the appearance of web pages in different browsers. Techniques for providing alternatives where a browser does not support certain features (e.g. frames) are also discussed.

Course Outline Ctd.

Handling Text

  • Divisions, Paragraphs and Headings
  • Text appearance - content styles and physical styles
  • Expanded font handling (HTML 3.2)
  • Control over precise spacing and layout
  • Block Quotes
  • Addresses
  • Special character encoding
  • Rules

Images and Multimedia content

  • Adding Images to Documents
  • Controlling positioning and flow of text around images
  • Background colours and background images
  • Background audio
  • Animated text features
  • Embedded vs. referenced content
  • Referencing audio, video and images

Links

  • The concept of hypertext
  • URLs - http, JavaScript, ftp, file, telnet, mailto, news, nntp, ...
  • Absolute vs. relative URLs
  • Creating effective links - via use of the anchor tag's properties
  • Combining images with links - server-side and client-side image maps
  • Establishing collections of related documents using the <base> and <link> tags
  • document indexing, search engines and use of the <meta> tag

Lists

  • Unordered and ordered
  • Nested lists
  • Definition lists

Tables

  • Basic concepts
  • Borders, cellspacing and cellpadding
  • Table sections - <thead>, <tfoot> and <tbody> tags
  • Column groups
  • Creating intricate table layouts

Frames

  • Overview
  • Pattern Matching and Regular Expressions
  • Layout - rows, columns, borders, spacing
  • Overview of how Frames interact with JavaScript
  • Nested framesets
  • Inline frames
  • Named Frame and Window targets

Forms

  • Structure and function
  • action and method attributes
  • event attributes
  • simple forms and CGI scripts
  • overview of input controls
  • text entry fields, text entry areas, masked text controls file-selection controls
  • radio buttons, check boxes, action buttons, image buttons and push buttons
  • hidden fields
  • Pull down menus and scrolling lists
  • Labeling and grouping of form controls

Cascading Style Sheets

  • Inline styles, document level styles, external style sheets
  • Media-specific styles
  • Linked vs. Imported style sheets
  • Coping with browsers that do not support styles
  • Details of style rule syntax
  • Style classes
  • Style properties
  • tag-less styles
  • Heuristics for applying styles to documents

Executable content

  • Applets
  • Objects
  • Plug-in applications and the <embed> tag
  • JavaScript and the <script> tag
  • Overview of - JavaScript event handlers, JavaScript URLs , Java Script Entities and JavaScript Style Sheets

Dynamic documents - an overview

  • Client-pull documents
  • Server-push documents
  • Mixed Media and Multipart documents

XHTML

  • Overview of XML
  • Introduction to XML Element Grammar
  • Understanding XML Document Type Definitions (DTDs)
  • XHTML DTDs - and their relationship to HTML
  • XHTML and HTML document creation compared
  • XHTML namespaces

Intended Audience

The course is for anyone that needs to understand HTML fully. The course also covers XHTML, as this is, undoubtedly, the way HTML is evolving. Programming skills are not required, as techniques for processing forms will be introduced via code templates that do not require a detailed understanding of any particular programming language.

Key Skills

  • ability to create professional web documents using nothing more sophisticated than a text editor
  • understanding of all the major HTML tags and their attributes and how to apply them
  • confidence with devising and deploying Cascading Style Sheets
  • ability to incorporate multimedia and graphics into web documents
  • understanding of XHTML and ability to produce HTML documents that conform to XHTML
  • Basic understanding of how to incorporate executable content into web documents
  • An awareness of how to create Dynamic web conten

Practical Work

The course is built around the theme of "work along" - trying out examples in parallel with the presentation, and hands on exercises to develop more complex web documents. Rather than using web authoring tools attendees are encouraged to use simple text processors to develop web documents - as this brings them face to face with the tags. Amaya, the W3C web content authoring program will be available on each workstation. Attendees will also have access to StarOffice - and will be shown how to use it to save documents as HTML, and to explore some of the AutoPilot templates for creating web documents.

Each workstation will have its own Apache Web Server, and be capable of running Netscape, Mozilla, Opera and Internet Explorer web browsers, as well as Lynx (a text oriented browser)

Course outline

How the Web works

  • TCP/IP
  • Clients and Servers
  • The Hypertext Transfer Protocol (HTTP)
  • Static web pages
  • Forms and form processing
  • Dynamic web pages

HTML and XHTML - an overview

  • Markup languages - fixed vs. extensible
  • Embedded tags
  • HTML3, HTML4 and XHTML
  • How browsers handle HTML
  • The need for extensible markup languages
  • Text structures
  • Hyperlinks - URLs, Anchors
  • Images and Image Maps
  • Lists, Searchable Documents, Forms
  • Tables
  • Frames
  • Style sheets
  • Java Script

Anatomy of an HTML document

  • Structure of a minimal HTML document
  • Tags and atrributes
  • Starting and ending tags
  • Proper and improper nesting
  • Tags without ends
  • Effects of omitting tags
  • Comments in HTML documents
  • The elements of an HTML document - <HTML>, <HEAD>, <TITLE>, <BODY> and their attributes
  • Header related tags
  • Frames
  • Editorial markup