HTML5 and CSS

HTML has moved from a markup language for scientific documentation into just about every user interface you use today. Obviously used in internet web pages, HTML is also used in cell phones, help files, email and even as the primary user interface for traditionally desktop based applications like accounts payables. Modern HTML and CSS is a five-day instructor led course is an in depth hands-on study of HTML5, CSS3 and modern web and mobile development.

The course includes detailed hands-on labs and Q&A labs. The labs include multiple projects, including one beginning to end web site.

At Course Completion

• Create HTML5 compliant web pages.
• Test and validate HTML and CSS code.
• Create CSS for style pages.
• Work with experimental vendor prefixes.
• Work with fonts and CSS font effects.
• Work with color and color tools.
• Layout pages and content using DIVs and Tables.
• Add and format images and CSS sprites.
• Create HTML5 forms.
• Embed and manager video and audio content.

Module 1: A Brief History of HTML and the Web

• Introduction
  
  • Which Comes First? HTML, CSS or JavaScript?
  • Versions?
• History
  • Who “owns” HTML?
  • History?
• Details, Details, Details…
  • Modern Browsers and Compatibility
  • Shims, Shivs, and Polyfills
  • The Web Server
  • Domain Names
  • URL / Uniform Resource Locator
  • Default Page
  • Protocols
  • Port Numbers
• The Life of a Web Page
• HTTP Status Code Definitions
• Most Important Things to Know as a Web Developer

Module 2: Core HTML Elements

• HTML and CSS Editors
  • Editor Features
• Text, Spaces and Tabs
• Working with Tags
  • Terminology
  • Some tags have content.
  • Some tags only have text as content.
  • Some tags have no content.
  • Some tags work in sets.
  • Block-level vs. Inline Elements
  • Context vs. Display
  • HTML is not Case Sensitive
• Attributes
  • Attribute Syntax
  • Empty Attribute Syntax
  • Global Attributes
  • Custom Attributes
• Comments
  • CSS Comments
• Non-Standard Tags
• Every Page Includes…
  • Every page should include:
  • A Simple, but Complete Page
• File Extensions
• Core Page Elements
  • DOCTYPE
  • Document Structure Elements
  • Document Head Elements
• Nesting
• Testing HTML
  • Browser Compatibility
  • Validators
  • Testing Tools
  • Browser and Device Testing
  • Sample Text
• HTML and Text
  • File Encoding
  • HTML Entities
  • White space

Module 3: Cascading Style Sheets

• Before CSS
• With CSS
• Cascading Style Sheets (CSS)
• CSS Demonstration
• Adding CSS to a Page
• Order of CSS Processing
• Experimental Vendor Prefixes
• CSS Units
  • Absolute Units
  • Relative Units
• CSS Selectors
  • Grouping Selectors
  • Attribute Selectors
  • Pseudo-class Selectors
  • Media Queries
• The CSS Box Model
  • CSS Border Tricks!

Module 4: Fonts and Text

• Fonts
  • Fallback
  • Images for Unusual Fonts
  • CSS for Fonts
• CSS for Text
• CSS Text Tricks!
  • Shadows
  • Rotated Text
• Working with Lists
  • Ordered and Unordered Lists
  • List Styling

Module 5: Colors and Backgrounds

• Specifying Colors
  • Color Names
  • RGB Color Numbers
  • HSL Colors
  • The Future
  • Color Tools
• Applying Colors
• Gradients

Module 6: Anchors and Hyperlinks

• <a> and CSS
  • Changing the link style
  • Changing the Mouse Pointer
• Hyperlinks with Images and Other Objects
• Buttons
  • Buttons from Images
  • Buttons from CSS

Module 7: Page Layout

• Page Layout Options
  • Frames
  • Tables
  • DIVs
• Tables
  • <table>
  • <caption>
  • Widths
  • CSS Frequently used for Tables
  • Merging Cells
  • CSS to Control Wrapping
  • CSS Pseudo-classes for Tables
  • Table Sections
• DIVs
• Float
  • Float options
  • Clear
  • Float with Images
  • Float for Wrapping
• SPAN
  • DIV vs. SPAN
• HTML 5 DIV-like Tags
• IFRAMEs

Module 8: Images

• Favicon
• Preparing Images
• Image Files
  • File Size
  • Compression
  • Image Files Types and Features
  • Browser Support
• The IMG Tag
  • <img>
  • Common Attributes
  • File Paths
  • Image Maps
• Background Images
  • For a Page
  • For a DIV or other Tag
• Image Best Practices
• CSS Sprites

Module 9: HTML Forms

• A Basic Form
• POST vs. GET
• name vs. id
• Basic Form Elements
• Basic Form Attributes
• Select
  • Default
  • optgroup
• Uploading Files
  • Input Type=file Attributes
  • Better File Upload Options
• HTML 5 Form Enhancements
  • New HTML 5 INPUT Types
  • New HTML 5 INPUT Attributes
• DataList

Module 10 – Multimedia

• Video and Audio
• HTML 5 Video
  • Video Formats and Browser Support
  • HTML 5 Video
  • Controls
  • Attributes
  • Video Fallback
• CSS
• JavaScript
• Audio
  • Audio Formats
  • HTML 5 Audio
• Hosting Videos in the Cloud
  • Embedding YouTube Videos
  • Working with Animated GIFs

While any background in HTML or development is a plus, all you need are basic PC skills and a desire to learn web development.

Anyone needing a solid foundation in CSS and HTML.