Basic HTML

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

HTML Web Design Training Course 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

Absolute beginners in Web Design typically take this course in conjunction with our Basic CSS course. Taking both 1-day courses together, is the exact equivalent of taking our 2-day Web Design Essentials course.

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.

Please note, however, this course does not cover the styling and layout of web pages with CSS. That is provided by the follow-on Basic CSS course.

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

It 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. It 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

Course contents — 1 HTML—How the web works

  • Aims of HTML
    • Cross-platform data sharing
    • Overcome system incompatibilities
    • Output to different devices
    • Adapt to different users
    • Adapt to different use cases
  • HTML encodes data
    • Providing tags and structure
    • Allowing software to read data
    • Allowing software to process data
  • HTML does not do web design
    • CSS stylesheets do the design
  • Writing and editing HTML
    • Text editors vs. graphical editors
    • Text editors let control the meaning
    • Text editors are smarter and faster
  • Rendering and standards
    • Browser render differently by default
    • Standards let you control browsers
    • Varying output when you want
    • Force identical output when you need
  • Addresses
    • File and folder names are locations
    • Rules for naming files and folders
    • Local addresses vs. internet addresses
    • Relative, absolute, fully-qualified
  • Elements and attributes
    • Elements and tags
    • Nested elements
    • Attributes
  • Document structure
    • Why it matters
    • Search engine matching and rank
    • HTML5 semantic page structures
    • HTML5 page skeleton
    • Arbitrary tags

Course contents — 2 Basic page components

  • Paragraphs and whitespace
    • Space between elements ignored
    • Spaces within elements collapse
    • Line breaks
    • Non-breaking spaces
  • Headings
    • Structure the document
    • Chumk and organise hierarchy
    • Label page components
  • Phrase mark-up and emphasis
    • Clarifies meaning
    • Indicates relative importance
    • Identifies specialisms
    • Helps seach engines + accessibility
  • Link addresses and paths
    • Fully qualified
    • Absolute
    • Relative
    • Page fragments
    • Position in site structure
  • Lists
    • Distinctive, web-oriented, content
    • Aid scanning and navigation
  • Pre formatted text
    • Preserve meaningful whitespace
  • Special characters
    • Greater than, less than, ampersand
    • Currency and other symbols
    • Proper quotes and dashes

Course contents — 3 Images and Tables

  • Embedding images
    • Embedding still images
    • A simple embedded image — rendered
    • Primitive image positioning
    • Aligning images and flowing text around them
    • Sizing images on the page
    • Re-sizing images — rendered
    • Whitespace around images
    • Image margins — rendered
    • Labelling and captioning images
    • Rendered caption
    • Pop-up tooltips on images
    • title attribute tooltip — rendered
  • Image formats
    • Which image format when?
    • Bitmap graphics — e.g. JPG
    • Vector graphics — e.g. SVG
    • Image type trade-offs
  • Table markup
    • Basic table structure
    • Basic table example rendered
    • Basic table metadata
    • Basic table metadata code
  • Styling tables
    • Basic CSS table styling
    • Basic styling — CSS code
    • Default header and data styles
    • Desired rendering
    • Style same element type differently
  • Accessibility
    • Captions and summaries
    • Captions example rendered

Course contents — 4 Forms and interactivity

  • Why forms matter
    • Forms take user input
    • Scripts process the input
    • Creating pages from user choices
    • Servers send output to users
    • The main form elements
  • Text input
    • Text and password inputs
    • The <textarea> element
  • Labels and fieldsets
    • Labelling form elements
    • Fieldsets
    • Placeholder Text
  • Checkboxes and radio buttons
  • Selection boxes
  • Submit and reset buttons
  • Hidden fields
  • New HTML5 input types
    • Email addresses
    • Web addresses
    • Telephone numbers
    • Dates and Times
  • Other concerns
    • Required fields
    • Validation
    • JS-assisted forms
    • Graceful degredation

Dates for London

Dates for Manchester

Dates for Leeds

Dates for Glasgow

Dates for Birmingham

Dates for Edinburgh

Dates for Bristol

Dates for Newcastle

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.

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom