HTML Training Course 1

Introduction

This HTML training course introduces the basic elements of the HyperText Markup Language and its XML-compatible variant, XHTML, i.e., the standards which determine the structure and use of web pages.

Target Audience

Anyone who wants to develop and maintain high-quality websites without being dependendent on external suppliers/contractors e.g.

• Marketing and communications staff
• Web content copy writers
• Web designers
• Web application developers and programmers
• Bloggers and hobbyists

Pre-requisites

Basic computer literacy — but a bit more than just the ability to use programmes on a MS Windows or Apple computer. You should have a good grasp of how computerised files and folders (directories) are laid out in a filesystem, so that you can find and save files in the right places without needing to use a search tool.

If in doubt, call us.

Delivery

This HTML web design course is delivered through hands-on exercises and expert tuition in the basic principles and best practice of HTML/XHTML coding.

Course Dates and Schedules

Coming soon.

Course Contents

HTML Overview

• Origins of HTML and XHTML
• Aims and functions of HTML/XHTML
  • Sharing across ‘incompatible’ computer systems
  • Reading and writing on different systems
  • Encoding content, meaning and structure
  • Not designing screens
  • Not designing pages
• Design with stylesheets — not with HTML/XTML
• How the web works — clients and servers
• Browsers and graphical rendering
  • Rendering & browser incompatibility pre-CSS
  • Rendering & browser incompatibilities with early CSS
  • Rendering standard CSS in modern browsers
• Rendering for non-screen media
  • Paper
  • Sound
  • Braille and other assistive technologies
• Reliability, validation and standards
• Exercises — testing existing websites for:
  • HTML validity
  • CSS validity
  • Image failover
  • CSS failover
  • Javascript failover
  • Cookie-free failover

The Basics of HTML

• HTML Elements — tags, content, attributes and nesting
  • Almost everything is part of an element
  • Elements have tags
  • Elements usually have content
  • Elements often have attributes
  • Elements are nested
• Essential HTML/XHTML metadata
• Paragraphs
• Whitespace and line breaks in HTML/XHTML
• Headings, sections and subsections
• Phrase mark-up in HTML/XHTML
• Interactive hypertext links
• Embedded images
• Lists
• Preformatted text
• Special characters in HTML/XHTML
• Exercises

Simple Web Design with CSS

• XHTML/HTML and CSS:
  • Why separate content from style?
  • Using CSS to style multiple pages/sites from one file
  • How to link a CSS stylesheet file to web pages
• The absolute basics of CSS syntax:
  • What is a CSS rule?
  • Components of a CSS rule: selectors, blocks, properties, values
  • Punctuation: what it does and why it matters
• Assembling and laying out a CSS style sheet:
  • Everything in rules
  • Whitespace and line-breaks
  • Indentation
  • Comments
• Setting simple CSS styles:
  • Selecting different elements
  • Colours
  • Background colours
  • Selecting fonts
  • Font weight, style, decoration
• Examples & exercises

Images in web pages

• Digital images: bitmaps vs. vectors
• Web bitmap formats: GIF vs. JPEG vs. PNG
• The web vector format: SVG
• Plugin-based vector formats: PDF, Flash, Silverlight
• Performance issues: size vs. number, bandwidth vs. latency
• Image size vs. quality tradeoffs
• Creating images

Tables — tabular data and CSS-less layout

• Using tables for tabular data
• Abusing tables for layout in HTML/XHTML — legacy email and CMSes
• Basic table structure
• Cell content alignment
• Images in data cells — almost standards mode
• Styling tables in CSS
• Styling tables with HTML formatting attributes
• Cells that span rows or columns
• Making table-based layouts less rubbish:
  • More accessible
  • Increase perceived download time
  • Faster to render

More Basic CSS

• The box formatting model
  • Borders
  • Margins and padding
  • Collapsing margins
  • Formatting sides differently
  • The non-standard IE box model
• Background images
  • Image tiling
  • Image position
  • Redundancy
  • Combining background images with background colours and foreground text
• Selecting page components more flexibly and precisely:
  • List selections — selector grouping
  • HTML class attributes and CSS class selectors
  • HTML id attributes and CSS id selectors
  • <div> and <span>
  • Descendant selectors
• Text styling
  • Typefaces and font select
  • Proportional and elegant font sizes
  • Other font properties
  • Line-spacing — Leading
  • Text alignment and justification

XHTML

• What is XHTML? — an XML-compliant version of HTML
• Why use XHTML rather than HTML?
• Differences between XHTML and HTML:
  • Changes in the document prologue
  • Changes in element tag use
  • Differences in element attribute names
  • Handling empty elements
• Exercises — convert broken HTML into validated XHTML

Taking user input in HTML/XHTML — web forms

• User input via forms
• Forms send input data to server-side scripts
• Scripts send back customised HTML
• HTML/XHTML form elements
  • input — including radio, checklist, reset and submit buttons
  • select
  • textarea
• Processing forms in the browser
  • JavaScript — client-side scripting risks and rewards
  • Ensuring client scripts failover to server-side back-ups
  • Partial page updates — AJAX applications
  • Usability and accessibility issue
• Exercises

Embedding Multimedia

• The plug-in problem
• Codec and container format problems
• Ensuring failover, usability and accessibility
• Embedding multimedia with the object element
  • Normal movies, e.g. MPEG formats
  • Flash: the HTML-correct way
  • SVG — vector graphics
• Inline SVG
• Embedding multimedia the HTML5 way:
  • The video element
  • The audio element