Overview

This course is designed for those already familiar with the basics of HTML or have coding experience with older versions of HTML.

The most recent mark up techniques see a move away from HTML towards XHTML and this course focuses on developing structured XHTML web pages while keeping presentation and functions completely separate.

You will explore the practicalities of building sophisticated sites in a browser and platform independent manner, learn the advantages gained from a standards compliant approach and focus on working with style sheets to deliver layout and design.

This is a two day ‘hands-on’ course utilising a range of practical real-world exercises. The content of this course is constantly revised to take advantage of new web developments. If you wish to tailor this course to your exact requirements, please call or email.

Course Content

DAY 1

INTRODUCTION

STANDARDS COMPLIANT MARK UP
Overview of more advanced markup
HTML, XHTML and XML
Advantages of standards compliant mark up
Converting and moving to XHTML

CLEAN, STRUCTURED PAGES
XHTML syntax, options and versions
Structuring XHTML pages
Removing presentational elements
Working with the DOCTYPE
Understanding natural language declarations
Using div tags instead of tables
Coding web forms

BROWSERS AND USER AGENTS
Standards compliant browsers
Overcoming older browser problems
Other user agents

STRUCTURING META DATA
Keywords and descriptions
Search engine friendliness
Robots tag and robots.txt

OVERVIEW OF ACCESSIBILITY ISSUES
About the W3C and WAI guidelines
Identifying key disability groups
and the challenges they face
How does compliant mark up help?

WEB DESIGN CONSIDERATIONS
Working with images, ALT and LONGDESC tags
Problems with table structure
Problems with web forms

OVERVIEW OF SCRIPTING LANGUAGES
Client side scripting with JavaScript
Server side scripting
Dynamic HTML
Other technologies

TOOLS AND SOFTWARE
HTML editors
Image editors

QUESTIONS AND ANSWERS

 

DAY 2

INTRODUCTION TO CSS
CSS structure
Inserting styles - inline, embedded or external
The cascade order
Classes and IDs

DESIGN ISSUES
Tables and frames
Cross platform design
Web safe colours
Character entities
Calling images through CSS

STYLING TEXT
Styling basic text elements
Using serif and sans serif font sets
Specifying font alignment
Changing bullets in lists

PAGE LAYOUT AND POSITIONING
Page elements and style sheets
Using span and div
Understanding the box model
IE5.5 box model issues
Absolute and relative positioning
Floating elements to make a two column layout
Balance between liquidity and layout design

STYLING TABLES
Styling row and column headings
Creating borders

DYNAMIC HTML - STYLING LINKS
Creating hover effects
Keeping track of links
Lists into interactive navigation

STYLING AND LAYING OUT FORMS
Changing properties of input elements
Positioning form elements
Grouping form elements together
Formatting text in forms
Changing the look of buttons

CREATING A PRINT PAGE
Showing and hiding elements
Altering layout
Changing font and font size for print

SITE WIDE CSS APPLICATION

THE FUTURE

QUESTIONS AND ANSWERS