Home Page Icon
Home Page
Table of Contents for
TitlePage
Close
TitlePage
by AGI Creative Team, Jeremy Osborn
HTML5 Digital Classroom
Cover
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 the lesson files to your hard drive
Working with the video tutorials
Additional resources
Seminars and conferences
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: 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: 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: 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: 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
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: 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: 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: 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: 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: 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
Linear Gradients
Angles and Multiple stops
Radial Gradients
Repeating Gradients
Using RGBA colors
CSS3 transforms, transitions, and animation
Creating CSS3 transforms and transitions
Working with CSS animation
Self study
Review
Lesson 12: Working with Web Fonts
Starting up
Working with web fonts
Using @font-face to specify a web font
Using a web service to generate multiple fonts
Using a web font library
Using Google Web Fonts
Using Adobe Edge Web Fonts
Self-Study
Review
Questions
Answers
Lesson 13: CSS3 Media Queries and New CSS3 Page Layout Options
Starting up
The role of CSS3 media queries
Using CSS3 media queries to deliver a mobile-optimized layout
New CSS3 Page Layout Options
The CSS3 multi-column layout
The CSS3 Flexible Box layout module
The CSS3 Grid Template Layout Module
Adding template-based position to CSS
Self study
Review
Lesson 14: Offline Storage in HTML5
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 object
Bringing it all together
Self study
Review
Lesson 15: HTML5 Geolocation
Starting up
Understanding Geolocation
Getting the user’s location
Displaying the user’s location with Google Maps
Creating a HTML5 Geolocation and Google Maps mashup
Adding Google Map markers to your geolocation page
Self study
Review
Lesson 16: 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: 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 Authors
HTML5 Digital Classroom
Credits
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Cover
Next
Next Chapter
Contents
HTML5
Digital Classroom
Revised & Updated Edition
The AGI Creative Team
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset