HTML5: The Missing Manual (book cover)

HTML5: The Missing Manual

* The Try-Out Site *

Welcome, readers!

Below is a chapter-by-chapter list of all the sample files discussed and demonstrated in the book. Click a link to run one straight from the Web, or download everything as one big ZIP file if you'd prefer to try it out on your own computer.

Examples are, as much as possible, exactly as demonstrated in the book. Most don't use fallbacks for browsers that don't support HTML5. This allows you to see exactly how a given feature works in the browser of your choice. In a real application, you'd need to give careful thought to feature detection and polyfilling, as discussed in Chapter 1.

Note: If you're looking for the list of web addresses mentioned in the book, visit the links page.

Another Note: These resources are for the latest, most up-to-date second edition of the book. If you'd like to refer to an example or link from the first edition, you can find that here.

Chapter 1. Introducing HTML5

SuperSimpleHTML5.html The simplest HTML5 page
FeatureDetection.html Uses Modernizr to check for a feature
HTML5Template.html A simple starting point for any HTML5 page
XHTML5Example.xhtml An XHTML5 page (that's served as XML)
XHTML5Example_Invalid.xhtml An invalid XHTML5 page (that's served as XML)

Chapter 2. Structuring Pages with Semantic Elements

ApocalypsePage_Original.html The pre-HTML5 version of the single-document page
ApocalypsePage_Revised.html A semantically enhanced HTML5 version of the page
ApocalypseSite.html The HTML5 semantic elements, as applied to the front page of a website
FatFooter.html The semantic elements with a fat footer

Chapter 3. Writing More Meaningful Markup

BmiCalculator.html The <output> element in action
Mark.html The <mark> element in action
Microformats.html A Oomph-enhanced page with contact and event microformats
Microdata.html Contact information in microdata format
Microdata_review.html A page with a microdata review

Chapter 4. Building Better Web Forms

ZooKeeperForm_Original.html The pre-HTML5 version of a basic form
ZooKeeperForm_Revised.html A revised version of the form, using HTML5 validation and input types
DateTypes.html The date controls
Datalist.html The <datalist> in action
ProgressAndMeter.html The <progress> and <meter> elements in action
ElementEditing.html An editable element in a page
PageEditing.html An editable page in an <iframe>

Chapter 5. Audio and Video

SimpleAudio.html Playing audio in the browser
SimpleVideo.html Playing video in the browser
MediaGroups.html Synchronized playback of two videos
VideoWithFlashFallback.html A video page that works in virtually all browsers
SoundEffects.html The ball animation from Chapter 7, with sound effects
UglyPlayer.html Controlling playback with JavaScript
VideoWithSubtitles.html A video with subtitles

Chapter 6. Fancy Fonts and Effects with CSS3

VendorPrefixTest.html Vendor prefixes for radial gradient properties
Transparency.html Semi-transparent colors and layers
RoundedBorders.html Square boxes with shaped corners
BoxBackground.html Multiple background images create a resizable box
Shadows.html Shadowed boxes
Gradients.html Boxes with a gradient fill
TransitionButton.html Hover effects with a transition
PictureFade.html A JavaScript-powered transition
ImageGallery.html An image gallery with transitions
ApocalypsePage_Revised.html The apocalypse page with embedded fonts and multiple columns

Chapter 7: Responsive Web Design with CSS3

Chapter 8: Basic Drawing with the Canvas

CanvasTemplate.html A blank canvas, ready for drawing
Lines.html Three ways to cap a line
Triangle.html Drawing a triangle
Transparency.html A semi-transparent shape superimposed on a solid shape
Transforms.html Rotating a shape with a transform
CompositeOperation.html Different ways to overlap shapes
Paint.html A basic canvas-powered drawing program

Chapter 9. Advanced Canvas: Interactivity and Animation

CroppedPicture.html Painting part of an image
Text.html Drawing text on the canvas
Shadows.html Adding a shadow effect to text, shapes, and images
Pattern.html Filling a shape with a tiled image
Gradients.html Filling shapes with different gradients
PersonalityTest.html A personality test that leads to five scoring charts
InteractiveCircles.html Click to select a circle
InteractiveCircles_WithDrag.html Click and drag circles
Animation.html A bouncing ball animation
Maze.html Guide the face through the maze

Chapter 10. Storing Your Data

WebStorage.html A demonstration of local storage and session storage
Maze.html The maze game from chapter 7, with the added ability to store your last position
FindAllItems.html Shows all the items in local storage for this website (try this after WebStorage.html)
Open both pages at once. Change local storage in StorageEvents1.html, and get notified in StorageEvents2.html
ReadText.html Read a text file and display its contents
ReadImage.html Read an image file and display it
FavoriteSiteTracker.html A completed example that uses IndexedDB database storage

Chapter 11. Running Offline

These two pages, and all the resources they use, are cached thanks to personality.appcache

Chapter 12. Communicating with the Web Server

WebCalculator.php (source)
This page calls WebCaclulator on the server
ChinaSites.html This page downloads slides from the server
TimeEvents.php (source)
This page receives events from TimeEvents.php

Chapter 13. Geolocation, Web Workers, and History Management

SimpleGeolocation.html Get your geolocation coordinates
GeolocationMap.html You, on a map
PrimeNumberSearch_Blocking.html Search for prime numbers, the old fashioned way
PrimeNumberSearch_WebWorkers.html Search for prime numbers in the background
ChinaSites.html The slideshow page from Chapter 11, with history support

Appendix A. Essential CSS

ApocalypsePage_Original.html The apocalypse page from Chapter 2

Appendix B. JavaScript: The Brains of Your Page

SimpleJavaScript.html Show a message box
JavaScriptEvents.html Show a message box when the mouse moves over a picture
ManipulateAnElement.html Change a picture when it's clicked