HTML Essentials

1-day beginners HTML course in web design using W3C standards — HTML-01

HTML Web Design TrainingCourse Overview

This HTML5-based basic/beginners course provides the fundamentals that underpin everything else in web design and web development. It can be used as:

  • A starting point for learning web design and development
  • Or to tie together and underpin ‘on the job’ learning

This HTML training does not cover everything in HTML. That would take days to teach and years to master. But you will learn the essentials, i.e. the bits used:

  • Every day
  • On every web page — e.g. headings, boxes, links, images, etc.
  • On every website — e.g. page structures, tables and forms, etc.

The course teaches students to code HTML to W3C standards first, i.e. design to the standards and test for compliance, before tweaking for older browsers' quirks — easily the most pleasant, efficient and profitable way of working.

This is an HTML5 course, since virtually all new sites are encoded in HTML5. But, the purpose of the course is not to teach you HTML5, per se. That is, rather, to teach current best practice for setting the foundations of all modern web design. So, if you are already a web designer, and merely want to know the new stuff in HTML5, take a look at our HTML5 beginners course

Please note: this course does not cover the styling and layout of web pages with CSS. That is provided by our CSS Essentials course. Alternatively, our Web Design Essentials course combines the content of HTML Essentials and CSS Essentials in a single integrated package.

HTML Web Design TrainingCourse Contents

Introductions

  • Course members
  • Training equipment and facilities
  • Course software
  • Course overview

HTML—How the web works

  • The history of HTML and its effects:
    • Collaboration vs. incompatible computer systems
    • Hypertext mark-up — cross-platform and internet-linked
    • Commercialisation and the need for standards
  • Editing
    • Text editors — the best editors take time to learn – but pay back in productivity
    • Example — syntax highlighting and error correction
    • Graphical editors — popular but problematic
  • Page composition and rendering
    • Page components in various files
    • Retrieving and assembling page components
    • Basic HTML rendering
    • Richer designs with CSS
  • Publishing, finding and downloading pages
    • Publishing — uploading sites to a web server
    • Finding and requesting web pages
    • Antatomy of a url
    • Finding server, folders, files using the url
    • File and folder names
  • Standards and compatibility
    • Local vs. internet addresses
    • Browsers and standards compliance
    • IE9.js — a quick and dirty fix for IE incompatibilities
  • Exercises

HTML structure + semantics

  • Basic HTML components and structure
    • Anatomy of a web page
    • Elements and attributes
    • Nesting elements
    • Properly nested elements — ensure consistency and reliability across browsers
  • Basic content
    • Paragraphs
    • Whitespace in HTML
    • Headings
    • Heading semantics
    • Heading styles
    • HTML5 sections — & HTML4/XHTML fallbacks
    • Lists
    • Tips for choosing and coding lists properly
    • Phrase markup — for SEO and accessibility
    • Quotations
  • Essential metadata
    • The document type declaration
    • The title element — and why it matters
    • Media type and character set
    • Special character entities
    • Frequently used character entities
  • Exercises

HTML links, images, divisions

  • Links — importance, creation + maintainance
    • Simple links
    • Pages in same folder
    • With pop-up tooltips
    • Links and relative addresses — pages in other folders
    • Links to absolute addresses — with and without a path
    • Links to page fragments — same page, same site, remote site
  • Images
    • Basic embedding
    • Alternative text
    • Supplementary metadata — the title attribute
    • Aligning images with Text
    • Images and performance
    • Understand and compare image formats
  • Preformatted text & special characters
  • Make a menu
    • Using a list of links
  • Larger page structures — sections and boxes
    • XHTML-style using divs
    • HTML5-style — with header, menu, article, section, aside, footer
  • Exercises

HTML audio and video

  • Why is web multimedia so flaky?
    • Competing formats
    • DRM
    • Bandwidth limits
    • Network latency
    • Player controls
    • Accessibility
  • Historic alternatives:
    • The proper way — using the object tag
    • The convenient way — using the non-standard Embed tag
    • The most popular — let YouTube do the heavy lifting
  • Standardisation in HTML5
    • The HTML5 audio tag
    • The HTML5 video tag
  • Practical work — embed movies and flash animations with the object tag
    • Using object param tags
    • With graceful degradation to alternative formats and media
  • Practical work — embed YouTube videos
    • With graceful degradation to alternatives
  • Practical work — embed audio and video using HTML5 tags
  • Exercises

HTML—Tables for tabular data

  • Historic abuse — using tables for layout grids (wire-framing)
    • No longer necessary on websites
    • Still used for HTML email
  • Basic table structure
    • A simple 3x2 table
  • Basic table metadata
    • For machine reading
    • For accessibility
    • For usability
  • Complex table structures
    • Table header, table body, table footer
    • Multi-row headers
    • Spanning rows and columns
  • Basic HTML formatting for data tables
    • For decent usability without CSS or JavaScript
  • Exercises

HTML forms & dynamic content

  • Forms — the precondition for rich interactivity
    • Take inputs from uses — return customised content
  • How form input is processed by programs — scenarios
  • The form element
  • Text input boxes
  • Password boxes
  • Radio buttons
  • Hidden form fields
  • Submit buttons
  • Reset buttons
  • Check boxes
  • Text areas
  • Drop-down selection boxes
  • Multi-line or scrollable selection boxes
  • Form processing — server-side vs. client-side
    • JavaScript for performance and usability enhancement
    • AJAX for live updates from the server
    • Server-side back-up for reliability
  • Exercises

HTML Web Design TrainingCourse Schedule

HTML Web Design TrainingFurther Details

Course Objectives

On completion of this HTML course, you will be able to:

  • Build the key components of a web page in bullet-proof fashion
  • Build a functionally complete website
  • Build web pages and sites which function reliably:
    • In every browser — cross-browser compatibility
    • For all types of user — usability and accessibility
    • On all media — e.g. PCs, tablets, phones, audio, printers, etc.
    • On the web and in email [1]
  • Write HTML which is
    • Easily readable — by users and software alike
    • Easily editable and debugged — by hand, if necessary
    • Fast-loading
  • Write HTML which complies with the following standards:
    • HTML5, XHTML 1.0 and HTML 4.1 — for data encoding
    • W3C WCAG and WAI-ARIA — for accessibility
    • CSS2.1 and CSS3 — for styling and visual design.
  • Understand why HTML 4.1, XHTML 1.0 and HTML5 work the ways the do
  • Appreciate the strengths and weaknesses of HTML5, XHTML 1.0 and HTML4.1

Note — The HTML written in this course should function perfectly in email, but you will need to learn additional tricks if you want rich visual designs to display identically across the full range of dodgy email client software. Our follow-on courses in HTML for Email and CSS for Email are designed to teach you those workarounds.

Target Audience

  • Anyone who wants to build a quality web site
  • Any web professional — who wants to express themselves better, e.g.
    • Web content authors
    • Web designers
    • Web developers
    • Web marketers

Training Pre-requisites

Basic computer literacy, e.g. the ability to:

  • Easily find and save files on a file system hierarchy
  • Control menu-driven applications
  • Avoid panic in the face of an unfamiliar application interface

Training Style

The two key learning goals for this course are to enable students to:

  • Understand the fundamental concepts which underlie all web design
  • Embed that understanding through meaningful practical work

As such, the course is heavily focused on giving students the opportunity to practice each concept and skill as soon as they have learnt it.

Hands-on practical work and exercises make up roughly half of the lesson time on this day. Hands-on exercises occur at the end of every session, and at intervals during each session.

All the exercises in this course require HTML to be hand-coded in a text editor — an essential skill for fixing and avoiding fundamental web design problems — although students will typically work on pre-prepared HTML pages and only add or modify the bits needed to practice a particular skill.