Advanced (x)html and CSS

Overview

This course is designed for those already familiar with the basics or older versions of HTML who want to explore the advantages of using XHTML and CSS to design web pages.

This course focuses on semantic mark up using XHTML and adding a separate presentation layer using a range of CSS techniques. 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.

The course is available on both Mac and PC systems.

Required skills and experience.

1. A reasonable grasp of web page mark up (html or xhtml) - you don't need to know how to code every tag.
2. Some knowledge of basic CSS and web design theory.
3. Some knowledge of different web browsers and cross browser compatibility.
4. A good working knowledge of either the Windows or Mac operating systems.
5. How to create and manage files and folders.

Duration

2 Days.

Standard course price

£450 pp excluding VAT

For more information on pricing please go to my rates page.

Day one

Standards compliant mark up

• Overview of more advanced mark up
• 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

• 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

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 two

Intro to CSS

• Separating content from presentation
• The difference between CSS and Mark up
• What can CSS do?
• CSS structure (syntax)
• Inserting styles – inline, embedded or external
• The cascade order
• Classes and ID’s

Design issues

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

Styling text

• Deciding which elements to style
• Styling basic text elements
• Using serif and sans serif font sets
• Specifying font size and colour
• Specifying font alignment
• Changing or removing bullets from lists

Page layout and positioning

• Page elements and style sheets
• Using span and div
• Understanding the box model
• IE 5.5 box model issue
• Absolute and relative positioning
• Floating elements to make a 2 column layout
• Balance between liquidity and layout design

Styling tables

• Styling row and column headings
• Creating borders
• Adding colour

Styling links

• Creating hover effects
• Keeping track of links
• Turning 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 appearance of buttons

Creating a print page

• Switching to a different media for print
• Showing and hiding elements
• Altering layout
• Changing font and font size for print
• Showing or hiding link information

Applying CSS

• Using different attachments to create variety and options

Questions and answers