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) |
| StorageEvents1.html StorageEvents2.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
| PersonalityTest.html PersonalityTest_Score.html personality.appcache |
These two pages, and all the resources they use, are cached thanks to personality.appcache |
Chapter 12. Communicating with the Web Server
| AskTheServer.html WebCalculator.php (source) |
This page calls WebCaclulator on the server |
| ChinaSites.html | This page downloads slides from the server |
| ServerEvents.html 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 |