Practical HTML5 Projects

Practical HTML5 Projects

Released May 2012
Publisher(s): Apress
ISBN: 9781430242758

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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

    Product information

    • Title: Practical HTML5 Projects
    • Author(s):
    • Release date: May 2012
    • Publisher(s): Apress
    • ISBN: 9781430242758