Modern HTML 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.

Module 1: A Brief History of HTML and the Web

Welcome! Prerequisites 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 Internet Explorer Conditional 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 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 Form Tools

Module 10 : Multimedia

Video and Audio Video Video Formats and Browser Support HTML 5 Video Video Fallback CSS JavaScript Audio Audio Formats HTML 5 Audio Embedding YouTube Videos Working with Animated GIFs