You are previewing Practical HTML5 Projects.
O'Reilly logo
Practical HTML5 Projects

Book Description

Practical HTML5 Projects is a collection of valuable web techniques that any developer or designer can use. This book is all about saving time. Busy web developers should not have to plow through pages of theory or history only to discover that no practical applications are provided, nor should they have to read a paragraph five times to extract some meaning from it. All of the techniques within this book are explained using fully worked examples that you can immediately apply to your own projects.

With each technique the book provides:

  • A practical and useful example (and a screen shot of the end result where applicable).

  • The markup for a fully worked example.

  • A downloadable template to adapt for use in your own websites.

With Practical HTML5 Projects, you can dive straight into the book at the required chapter and immediately find answers to your website problems, and find the sample code you can use to get it right. Start creating websites using the practical examples, summaries, and templates.

This book includes topics such as rollover navigation menus without scripts, adding audio and video, rounded corners, drop shadows, adding PayPal services, and much more. It also includes sections on troubleshooting and transitioning to HTML5 and CSS3 to help bring your existing content up to date.

Table of Contents

  1. Title
  2. Contents at a Glance
  3. Contents
  4. About the Author
  5. About the Technical Reviewer
  6. Acknowledgments
  7. Introduction
  8. Chapter 1: Moving to HTML5
    1. Moving to HTML5
    2. The New Elements in HTML5
    3. Simple Examples of Page Layout with Semantic Tags
    4. The Solution for Internet Explorer 7 and 8
    5. The <nav> Tag
    6. A More Complex Example Using Semantic Tags
    7. The <section> vs. <article> Controversy
    8. The <aside> Tag
    9. The <mark> Tag
    10. The <figure> Tag
    11. The <hgroup> Tag
    12. The New HTML5 Form Controls
    13. SVG Images
    14. The <details> and <summary> Tags
    15. APIs (Application Programming Interfaces)
    16. A Strategy for Moving to HTML5
    17. Summary
  9. Chapter 2: A Rollover Picture Gallery
    1. An Introduction to the Technique
    2. A Mixture of Sizes and Formats in Three Columns
    3. More Columns and More Rows
    4. Placing the Gallery Within a Real Web Page
    5. Summary
  10. Chapter 3: Backgrounds
    1. Overview
    2. Create Gradient Backgrounds
    3. A Background Header Image
    4. Overlay a Background Image with Text
    5. Superimpose an Image on the Header
    6. What About Backgrounds in Semi-Liquid Layouts?
    7. Transparent Backgrounds
    8. Background Bullets
    9. Multiple Backgrounds Using HTML5 and CSS2
    10. Multiple Backgrounds Using CSS3
    11. Multiple CSS2 and Images in a Real-World Page
    12. The Rules for CSS Background Images
    13. Summary
  11. Chapter 4: Rollover Menus
    1. Horizontal Rollover Navigation Menus
    2. The Types of Horizontal Menu
    3. Vertical Rollover Navigation Menus
    4. Horizontal and Vertical Menus on the Same Page
    5. Summary
  12. Chapter 5: Moving to CSS3
    1. CSS3 Gradients
    2. CSS3 Opacity and RGBA Colors
    3. New CSS3 Selectors and Elements
    4. Font Selectors
    5. Using Current, Future, and Other Modules
    6. Summary
  13. Chapter 6: Audio, Video, and Slide Shows
    1. When to Use Audio and Video (AV)
    2. Video Overview: Yesterday’s Video Formats
    3. Online Solutions: Using YouTube or Vimeo
    4. Testing Your Video and MIME Types
    5. Create a Slide Show
    6. Summary
  14. Chapter 7: Rounded Corners
    1. A Simple JavaScript Solution
    2. A Web Page with Rounded Borders
    3. Nifty Corners on Tab Menus
    4. The CSS3 Rounded Corners Module
    5. Elliptical Corners with CSS3
    6. Summary of Shorthand Rules for CSS3 Rounded Corners
    7. Tabs with Rounded Corners Using CSS3
    8. Summary
  15. Chapter 8: Drop Shadows
    1. CSS3 Drop Shadows do not Need Shadow Images
    2. Creating Drop Shadows for IE 7 and IE 8
    3. The .png Shadow Images
    4. Using the Shape Collage Software
    5. Summary
  16. Chapter 9: Create Collages and Galleries
    1. Make a Paper-and-Paste Collage and Scan it
    2. Use a Word Processor
    3. Use CSS to Position Separate Images on a Page
    4. Merged Images
    5. Using Proprietary Software
    6. Using a Graphics Program to Create a Collage
    7. A Picture Gallery with Captions
    8. Summary
  17. Chapter 10: Add PayPal
    1. How Does PayPal Work?
    2. Setting up a PayPal Account
    3. Add a Donation Button
    4. Summary
  18. Chapter 11: Secure Feedback Methods
    1. Enciphering Email Addresses to Prevent Spam
    2. A Minor Problem Solved
    3. Secure Feedback Forms
    4. An Example of a Hack-Proof Feedback Form
    5. The Form Handler and Its Anti-Hack Filters
    6. For the Curious: An Explanation of Some of the PHP Code
    7. The “Thank You” Page and the Error Messages
    8. The New HTML5 Form Controls
    9. Using CAPTCHA
    10. Summary
  19. Chapter 12: Monitor Mayhem
    1. Monitors and the Problem of Color Rendition
    2. Monitor Sizes and Screen Resolutions
    3. Monitors and the Problem with Fixed-Width Layouts
    4. Monitors and the Problem with Liquid Layouts
    5. Monitors and Semi-Liquid Layouts
    6. An Acceptable Compromise
    7. Other Monitor-Related Considerations
    8. Will the Web Site Work on a Handheld Device?
    9. Summary
  20. Chapter 13: Appearance and Usefulness
    1. Appearance
    2. Usefulness
    3. Summary
  21. Chapter 14: Accessibility
    1. Laws and Guidelines
    2. Help for the Partially Sighted and Color Blind
    3. General Advice
    4. Testing Your Web Sites for General Accessibility
    5. Screen Readers for the Blind and Severely Visually-Impaired
    6. Data Tables and Screen Readers
    7. Screen Readers and Feedback Forms
    8. Screen Readers for HTML5, XHTML5, and CSS3
    9. Testing Your Web Site for Screen Reader Accessibility
    10. Summary
  22. Chapter 15: Dump Those Deprecated Items
    1. The Deprecated Items
    2. Data Tables Good, Layout Tables Bad
    3. Multiple Columns Without Tables
    4. Four Columns with Differing Background Colors
    5. An Extendable, Colored, Central Panel with No Tables
    6. CSS Boxes and Borders
    7. The New CSS3 Module for Columns
    8. Summary
  23. Chapter 16: Search Engine Optimization
    1. Overview
    2. Beware of False Promises
    3. Page Rank and Popularity
    4. Keywords and Phrases
    5. Choosing Keywords and Phrases
    6. Well-Designed Internal Links
    7. External Links to Your Site
    8. Things You Should Never Do
    9. A Web Site Containing No Search Engine Optimization
    10. Sitemaps Help SEs Index a Web Site
    11. Let People Know That Your Web Site Exists
    12. Summary
  24. Chapter 17: Printing, Counting, and Redirecting
    1. Page Printing
    2. A DIY Visitor Counter
    3. Redirection
    4. Summary
  25. Chapter 18: Validation
    1. Why You Should Validate
    2. Logos
    3. Using the W3C Validator
    4. The .nu HTML5 Validator
    5. Validating CSS2
    6. Summary
  26. Chapter 19: Troubleshooting
    1. Testing Your Pages
    2. If a Browser Treats the Page As If It Has No DOCTYPE
    3. If You Have Positioning Problems
    4. If You Have a Horizontal Menu Problem
    5. If You Have a Server Problem
    6. If You Have a Browser Variation Problem
    7. Should We Troubleshoot Problems with IE 6 and Other Older Browsers?
    8. Browsers Can Have Minor Display Differences
    9. If Strange Symbols Appear on the Screen
    10. If You Changed the CSS, but It Looks the Same
    11. If You Experience Float Drop
    12. If an HTML5 Page Has No Styling in IE 7 and IE 8
    13. If Data Tables Have Double Borders
    14. If the Site Owner Is Not Receiving Replies from the Secure Feedback Form
    15. Summary
  27. Appendix: Quick Reference, Techniques, and Useful Data
    1. Quick Reference Section
    2. CSS3 Quick Reference
    3. Summaries of Techniques
    4. Data Tables
  28. Index