MS 55319 HTML5 i CSS

Module 1: A Brief History of HTML and the Web

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: Getting Started with HTML

• Exercise 1 - Create a web page
• Exercise 2 - Explore Visual Studio Options
• Exercise 3 - Experimenting with tags

Module 2: Core HTML Elements

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: Core HTML Elements

• Exercise 1 - Creating and Validating a Page
• Exercise 2 - Browser tools

Module 3: Cascading Style Sheets

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: Cascading Style Sheets

• 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

Module 4: Fonts and Text

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: Fonts and Text

• Exercise 1 - Selecting Fonts
• Exercise 2 - Validate Your Code

Module 5: Colors and Backgrounds

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: Colors and Backgrounds

• Exercise 1 - Working with Color
• Exercise 2 - Gradients

Module 6: Anchors and Hyperlinks

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

• and CSS
• Hyperlinks with Images and Other Objects
• Buttons

Lab: Anchors and Hyperlinks

• Exercise 1 - Add links to other pages
• Exercise 2 - External Links
• Exercise 3 - Image Links

Module 7: Page Layout

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: Page Layouts

• Exercise 1 - Float Images
• Exercise 2 - Float DIVs
• Exercise 3 - Exploring the Power of CSS Style Sheets

Module 8: Images

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: Images

• Exercise 1 - Add a Background to a Page
• Exercise 2 - Add a Background Image to a DIV

Module 9: HTML Forms

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: HTML Forms

• Exercise 1 - Build a Simple Form

Module 10: Multimedia

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: Adding Videos to a Page

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