HTML5 Training | CSS3 Training

Introduction

This HTML & Cascading Style Sheet (CSS) introduction Masterclasss course provides web professionals with both the essential concepts and skills to use HTML & CSS effectively and the new features available in the latest revisions of HTML5 and CSS3.

Pre-Requisites

No previous experience of HTML, CSS or language coding is required. However, new users should be familiar with the operating system they use and have a solid awareness of the world wide web, in particular their own corporate web site.For the HTML5 section of the course a basic understanding of JavaScript will be useful but is not essential.

Who Should attend?

This hands-on course is designed for new users who wish to create their own web pages and style them with CSS and also benefit from the enhancements offered with HTML5 and CSS3.

What will you learn?

Once you have completed the HTML/HTML5 & CSS/CSS3 Introduction Masterclass course you will be able to fully:

• Understand essential concepts and skills to use HTML & CSS effectively
• Understanding new features available in the latest revisions of HTML5 and CSS3
• Understand coding for Email marketing and web design
• Begin with HTML and advancing to CSS

Course Outline

Introducing HTML

• A brief overview of HTML and the world wide web
• Browser and resolution issues
• The syntax and structure of HTML
• Introducing tags, attributes and values
• Meeting logical and physical tags
• Container and empty elements

Getting started

• Understanding the DTD (document type declaration)
• Defining the Head and Body regions
• Structuring and formatting your content using Block and Character level tags
• Fonts and colour
• Sizing text and using headings
• Indenting using Blockquotes
• Using Horizontal Rules
• Including Escape characters
• Naming conventions
• Including a Title for your pages
• Testing your site in different browsers

Colour

• Understanding colour for the web
• Working with hexadecimal
• Meeting web safe colours
• Applying colour to text, tables and cells

Images

• The different image formats used on the web
• Placing and linking an image
• Adding alternate text
• Sizing and positioning images

Tables

• Creating a simple table
• Adding rows and cells
• Adding content to cells Formatting tables and cells

Hyperlinks

• Creating relative links between pages
• Creating absolute links to other sites
• Creating mailto links and links to non-HTML files
• Adding named anchor links to long pages
• Adding links to images

Introducing CSS

• Understanding the limitations of HTML
• The evolution and current status of CSS
• Where to keep up to date with CSS
• CSS and CSS2

CSS structure

• The importance of DTD (document type declaration) when using CSS
• The Style and Comment HTML tags
• claration block
• ID and class styles

Applying and modifying CSS

• Embedded styles
• InLine styles
• External Style Sheets
• Locating amending embedded styles
• Locating and amending inline styles
• Linking vs importing external style sheets

CSS with HTML

• ID vs Class selectors
• Descendant selectors and grouping selectors
• The DIV and SPAN tags

Typography with CSS

• Fonts and font families
• Sizing text using different units of measure
• Line height
• Font weight
• Working with colour

Hyperlinks

• Link basics
• Styling hyperlinks
• Link text decoration
• Creating rollovers using hover

Improved layout

• Using the box model
• Padding and margins
• Element positioning

Working with HTML5

• The importance of standards
• The W3C, WHATWG and HTML5
• Do we need/want HTML5?
• What is and what is not HTML5
• Can we start using it now?
• What features can we begin using?
• Browser , mobile and device support
• Simplified markup
• The new DOCTYPE declaration
• Simplified charset
• Looser coding standards
• Good practice to ensure consistency
• Deprecated tags and attributes

Basic page structure

• Understanding the outline algorithm
• Ensuring cross browser structure
• Structuring top-level and interior level content
• Meeting the new content models

Structural content

• Introducing the new HTML5 semantic tags
• Header
• Footer
• Section
• Aside
• Article
• Hgroup

Interior content

• Figure
• Figcaption
• The role of the DIV Tag
• Ensuring block-level display

Video & audio

• Plug-in free markup
• The new video and audio elements
• Overview of video & audio codecs
• How to convert video to ogg, mp4 and webm
• Including fallback content
• Customising the video & audio players
• Canvas
• Introducing the canvas API
• Drawing basic shapes
• Simple animation
• Loading an image
• Drag & drop
• Brief overview

HTML5 forms

• Meeting the new input types
• Setting autofocus
• Using placeholder data
• The new date picker
• Spinners and sliders

CSS3

• A brief overview of the history CSS
• Image borders
• Shadows
• Rounded corners
• @font-face
• Server fonts
• Font licensing issues
• 2D transforms and transitions