55319: HTML5 and CSS Training

This module introduces HTML and CSS and the tools used to create web pages. It also covers many of those annoying little issues that you need to know about before creating modern web pages

Lessons

Welcome!

History

Details, Details, Details…

The Life of a Web Page

HTTP Status Codes Definitions

Most Important Things to Know as a Web Developer

Lab 1: Getting Started with HTML

Q&A quiz

Exercise 1 – Create a web page

Exercise 2 – Explore Visual Studio Options

Exercise 3 – Experimenting with tags

Lab Solution

After completing this module, students will be able to:

Describe the history and use of HTML and CSS.

The life cycle of a page request and how the web server and web browser interact.

How to create a new web project in Visual Studio

This module covers the use of HTML editors, page creation, core HTML tags and HTML validation.

Lessons

HTML and CSS Editors

Text, Spaces and Tabs

Working with Tags

Attributes

Comments

Non-Standard Tags

Every Page Includes…

File Extensions

Core Page Elements

Nesting

Testing HTML

HTML and Text

Lab 1: Core HTML Elements

Q&A quiz

Exercise 1 – Creating and Validating a Page

Exercise 2 – Browser tools

Exercise 3 – Add a Copyright Message

Exercise 4 – Create a Style Sheet

Lab Solution

After completing this module, students will be able to:

Use HTML editors to create web pages.

Use core HTML tags.

Create CSS style sheets.

Validate HTML using validators and browser tools.

Although CSS is covered throughout this course and is introduced and used with related HTML tags, this module explores the core CSS features including selectors, CSS units and the CSS Box Model.

Lessons

Before CSS

With CSS

Cascading Style Sheets (CSS)

Adding CSS to a Page

Order of CSS Processing

Experimental Vendor Prefixes

CSS Units

The CSS Box Mode

Lab 1: Cascading Style Sheets

Q&A quiz

Exercise 1 – Creating and Validating a Page

Exercise 2 – CSS Box Model – Customize the Header

Exercise 3 – CSS Box Model – Adding Navigation Tabs

Exercise 4 – Working with a Pseudo Class

Exercise 5 – Validate Your Code

Lab Solution

After completing this module, students will be able to:

Add CSS to pages.

Create and use CSS selectors.

Understand the CSS unit system.

Work with the CSS Box Model.

Use CSS to create shapes and symbols.

This module explores the use of fonts and lists.

Lessons

Fonts

CSS for Text

CSS Text Ticks!

Working with Lists

Upgrading and to Windows 7

Lab 1: Fonts and Text

Q&A quiz

Exercise 1 – Selecting Fonts

Exercise 2 – Validate Your Code

Lab Solutio

After completing this module, students will be able to:

Describe how fonts are used and selected in HTML and CSS.

Apply CSS to fonts.

Use CSS to create shadows and rotated text.

Create and format text lists.

In this module we will explore how colors are used and applied in HTML and CSS to HTML tags, fonts and backgrounds.

Lessons

Specifying Colors

Applying Colors

Gradients

Lab 1: Colors and Backgrounds

Q&A quiz

Exercise 1 – Working with Color

Exercise 2 - Gradients

Lab Solution

After completing this module, students will be able to:

Define colors using RGB and other systems.

Apply colors to HTML elements using CSS.

Work with CSS gradients.

The “H” of HTML refers the ability to link from one document to another. In this module we will work with the anchor tag and buttons to build hyperlinked documents.

Lessons

Hyperlinks with Images and Other Objects

Buttons

Lab 1: Anchors and Hyperlinks

Q&A quiz

Exercise 1 – Add links to other pages

Exercise 2 – External Links

Exercise 3 – Image Links

Lab Solution

After completing this module, students will be able to:

Create hyperlinks to internal and external targets.

In this module we will look at HTML’s options to control where and how content is arranged on a page. We will look at both the HTML tags and what can be done using CSS.

Lessons

Page Layout Options

Tables for Data

DIVs

Float

SPAN

HTML 5 DIV-like Tags

IFRAMES

Lab 1: Page Layouts

Q&A quiz

Exercise 1 – Float Images

Exercise 2 – Float DIVs

Exercise 3 – Exploring the Power of CSS Style Sheets

Lab Solution

After completing this module, students will be able to:

Choose the best options for laying out pages and contents.

Work with CSS and DIVs to layout content.

Work with the new HTML5 contextual tags.

Build and format tables of data.

This module explores working with image in HTML pages. We will explore file types, file sizes, compression, background images, CSS sprites and best practices.

Lessons

Favicon

Preparing Images

Image Files

The IMG Tag

Background Images

Image Best Practices

CSS Sprites

Lab 1: Images

Q&A quiz

Exercise 1 – Add a Background to a Page

Exercise 2 – Add a Background Image to a DIV

Lab Solution

After completing this module, students will be able to:

Choose the best file format for an image.

Insert, size and format an image.

Use background images.

Work with CSS sprites.

Understand the best practices for working with images in web pages.

In this module we will be exploring the HTML tags to create, style and validate web forms.

Lessons

A Basic Form

POST vs. GET

name vs. id

Basic Form Elements

Basic Form Attribute

Select

Uploading Files

HTML 5 Form Enhancements

DataList

Lab 1: HTML Forms

Q&A quiz

Exercise 1 – Build a Simple Form

Lab Solution

After completing this module, students will be able to:

Create HTML forms.

Choose the best method, POST or GET for the form.

Work with form elements to upload files.

Work with the new HTML5 form elements and browser compatibility.

Create a Data List.

This module explores the addition of video and audio to web pages.

Lessons

Video and Audio

HTML 5 Video

CSS

JavaScript

Audio

Hosting Videos in the Cloud

Working with Animated GIFs

Lab 1: Adding Videos to a Page

Q&A quiz

Exercise 1 – Add a Video to a Page

Exercise 2 – Add a YouTube Video to a Page (optional)

Lab Solution

After completing this module, students will be able to:

Understand the issues and limitations when working with videos across multiple browsers.

Use the HTML5 tabs to add video and audio to a page.

How to plan for “fallback” to support browser and device compatibility issues.

The use of animated GIFs.