HTML5 Essentials

Course subjects

Overview

• About Web Technologies - How HTML5 and CSS3 Work Together, and the Role of JavaScript

• Tools of the Trade - About Code Editors, Web Development Applications, Content Management

• Systems and Online

• Web Building Solutions

• Web Standards - Following Conventions

• About Web Browsers, and How to Test your Work

• About HTML5 and Older Versions of HTML

HTML Essentials

• Principles of HTML5 - Document Type, Document Structure, Tags and Attributes

• The HTML5 Document Structure

• Containers and Empty Tags

• Inline & Block Level Elements - How Tags Display

• Inserting Special Characters

• Commenting your Code

Website Structure

• Typical Website Structure - Files and Folders

• File and Folder Naming Conventions - Case and Space

• The Importance of Filename Extensions

• Home Page Considerations

Marking Up Text with HTML5

• About Whitespace

• Using Headings and Paragraphs

• Line Breaks

• Ordered and Unordered Lists - Customising Lists

• Bold and Italic

Images

• Inserting Images with HTML

• About GIF, JPG & PNG and When to Use Them

• Image Optimisation - Reducing File Size while Maintaining Quality

• Image Resolution

• The ‘Alt’ Attribute

• The ‘Title’ Attribute

Working with Tables

• When you Should Use Tables

• Tables for Displaying Data

Hyperlinks

• Terminology - Absolute vs Relative Paths

• Targeting Links to Open in a New Window

• Creating ‘Same Page’ Links

• Links to downloadable Content

• Applying Links to Images

Layout and Design Techniques

• Using DIV Tags as Containers

• Applying Styles to Divs for Layout and Design

• Using Span Tags to Style Selected Content

Styling a Web Page with CSS3

• Understanding CSS3 Syntax

• Writing Syles that Apply to the Whole Page

• Styling an Entire Website

• Fonts - Using Device Fonts

• Colour - Colour Names and using Hexadecimal Code

• Typography - Fonts Size, Line Height and Other Properties

• Using Classes to Style Individual Elements

• Styling Hyperlinks with Pseudo-Classes

External Content

• Embedding a Google Map

• Embedding a YouTube Video

Search Engine Optimisation

• How Good Coding means Good SEO

• Strong vs Bold

• The Importance of the Title Tag

• HEAD Content - using META Tags for Page Descriptions