Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
Cover
Opening Pages
Contents
Contents
Starting Up
Using this book
About HTML5 Digital Classroom
Prerequisites
System requirements
Using web browsers that support HTML5 tags
Understanding menus and commands
Understanding how to read HTML and CSS code changes
Loading lesson files
Downloading and copying the lesson files to your hard drive
Working with the video tutorials
Additional resources
Lesson 1
Section One: Essentials of HTML, HTML5, and CSS
Lesson 1: Defining HTML5
Starting up
Defining HTML5
HTML5 expands the definition of what a web page can do
HTML5 markup
A tour of the key HTML5 elements
The <video>, <audio>, and <canvas> elements
Web forms
Many more new HTML5 elements
An overview of HTML5 APIs and supporting technologies
Geolocation in action
Web Workers
Web storage
CSS3 is not part of HTML5, but is closely related
CSS animations
CSS transitions
CSS 2D- and 3D-transformations
CSS3 backgrounds, borders, RGBa colors, gradients, drop shadows, and rounded corners
@font-face web fonts
HTML5 is in a state of transition
Who is using HTML5 today?
Identifying HTML5 sites
Self study
Review
Lesson 2
Lesson 2: Fundamentals of HTML, XHTML, and CSS
Starting up
Web languages
Web page structure is based on HTML
The details of XHTML syntax
Doctype lets the web browser know what to expect
The W3C and page validation
HTML structure
Placing images in HTML
The role of CSS
Styling a heading
Understanding class styles and the <span> element
Three ways to use styles
Internal versus external style sheets
Creating an external style sheet
What makes styles cascading
Self study
Review
Lesson 3
Lesson 3: Formatting Text with CSS
Starting up
The importance of typography on the Web
The challenges of fonts on the Web
Setting a font-family
Sizing text with CSS
Pixels and points are not the best choices
Using a combination of percent and the em measurement
Using margins to modify the space between your text
Setting paragraph line-height
Transforming text with CSS
Working with HTML lists
Styling HTML lists
Self study
Review
Lesson 4
Lesson 4: Introduction to CSS Layout
Starting up
Working with a CSS reset file
A brief history of layout techniques on the Web
An overview of page layout options
Understanding the <div> element: creating a two-column fixed-width CSS layout
Understanding the CSS float property
Creating columns with the float property
Working with the clear property
Creating a list-based navigation using floats
Adding text styles
The effect of margins and padding on your fixed-width layout
A review of using margins and padding for layout
Styling your footer with a background image
Self study
Review
Lesson 5
Lesson 5: Advanced CSS Layout
Starting up
Building your page layout
Removing the background color
Working with CSS background images
Using hacks to solve layout problems
Enhancing your CSS navigation bar
Moving internal styles to the external style sheet
Creating a style for the active page
Adding images to your sidebar
Working with absolute positioning
Self study
Review
Lesson 6
Section Two: HTML5 with CSS3 and JavaScript
Lesson 6: Using HTML5 Markup
Starting up
A review of semantic markup
HTML5 fundamentals
The HTML5 DOCTYPE declaration
The different categories used for HTML5 content
Using the new header element in HTML5
Adding support for HTML5 elements in browsers
Adding the HTML5 <nav> elements
Adding the other HTML5 sectioning elements
HTML5 document outlines
Adding the footer element
Adding the article and aside elements
Additional HTML5 elements
Revisiting familiar HTML elements
Self study
Review
Lesson 7
Lesson 7: Creating HTML5 Forms
Starting up
The need for updated forms
Reviewing how forms work
The components of a form
Adding new HTML5 input types and attributes
Creating an order form with new HTML5 input types and attributes
HTML5 form features under development
Providing fallbacks for browsers that don’t support HTML5 features
Self study
Review
Lesson 8
Lesson 8: Introduction to JavaScript and jQuery
Starting up
Interactivity on the Web
Adobe Flash
JavaScript
JavaScript basics
JavaScript events
Placing your JavaScript into an external document
The Document Object Model
JavaScript frameworks
Hiding an element with jQuery
Adding an event to trigger the show effect
Self study
Review
Lesson 9
Lesson 9: Working with Video and Audio Elements
Starting up
Adding video
Adding support for more browsers
Adding fallback support for older browsers
Controlling a video with JavaScript
Adding audio
Self study
Review
Lesson 10
Lesson 10: Working with Canvas
Starting up
Understanding the Canvas element
The benefits of the Canvas element
Drawing paths
Drawing rectangles
Drawing lines and circles
Drawing with curves
Adding text
Using colors, styles, and gradients
Adding images
Using transforms
Creating a drawing loop
Self study
Review
Lesson 11
Lesson 11: Styling with CSS3
Starting up
Understanding the role of CSS3
Using CSS3 border-radius and border-image
Adding multiple background images
Working with CSS3 transparency and opacity
Using CSS3 gradients
CSS gradients potential for the future
CSS3 transforms, transitions, and animation
Creating CSS3 transforms and transitions
Working with CSS animation
Working with web fonts
Using @font-face to specify a web font
Using a web service to generate multiple fonts
Alternative methods for adding web fonts
Typekit (http://www.typekit.com)
Google Font API (http://code.google.com/apis/webfonts/)
Self study
Review
Lesson 12
Lesson 12: CSS3 Media Queries and the Future of CSS3
Starting up
The role of CSS3 media queries
Using CSS3 media queries to deliver a mobile-optimized layout
Upcoming developments in CSS3
The CSS3 multi-column layout
The CSS3 Flexible Box layout module
The CSS3 template layout module
Adding template-based position to CSS
Self study
Review
Lesson 13
Lesson 13: Offline Storage in HTML5
Starting up
On the road, again
Offline storage in HTML5
HTML5 storage types
localStorage methods
localStorage example
Putting it all together
Advanced data storage
Application caching
The cache manifest file
Cache manifest structure
Updating the cache
The applicationCache object
Bringing it all together
Self study
Review
Lesson 14
Lesson 14: HTML5 Geolocation
Starting up
Understanding Geolocation
Getting the user’s location
Displaying the user’s location with Google Maps
Browsers lacking HTML5 Geolocation
Creating a HTML5 Geolocation and Google Maps mashup
Adding Google Map markers to your geolocation page
Self study
Review
Lesson 15
Lesson 15: HTML5 Drag and Drop
Starting up
Drag and drop on the Web
Cross-browser drag and drop
Transferring data with a drag-and-drop operation
Self study
Review
Appendix
Appendix: HTML5 Elements and Attributes
Table 1 List of current HTML5 elements
Table 2 List of element content categories
Table 3 List of attributes
Table 4 List of event handler content attributes
Table 5 List of events
Table 6 Media element events
About the Author
About the Authors
Acknowledgments
Credits
Credits
Copyright Information
← Prev
Back
Next →
← Prev
Back
Next →