book

HTML5: The Missing Manual, 2nd Edition

by Matthew MacDonald

December 2013

Intermediate to advanced

518 pages

15h 36m

English

O'Reilly Media, Inc.

Read now

Unlock full access

About the AuthorAbout the Creative TeamAcknowledgementsThe Missing Manual Series
What You Need to Get StartedWriting HTML5Viewing HTML5When Will HTML5 Be Ready?About the OutlinePart One: Meet the New LanguagePart Two: Video, Graphics, and GlitzPart Three: Building Web AppsAbout the Online ResourcesThe Missing CDThe Try-Out SiteRegistrationFeedbackErrataSafari® Books Online
The Story of HTML5XHTML 1.0: Getting StrictXHTML 2: The Unexpected FailureHTML5: Back from the DeadHTML: The Living LanguageThree Key Principles of HTML51. Don’t Break the Web2. Pave the Cowpaths3. Be PracticalYour First Look at HTML5 MarkupThe HTML5 DoctypeCharacter EncodingThe LanguageAdding a Style SheetAdding JavaScriptThe Final ProductA Closer Look at HTML5 SyntaxThe Loosened RulesHTML5 ValidationThe Return of XHTMLHTML5’s Element FamilyAdded ElementsRemoved ElementsAdapted ElementsBold and Italic FormattingTweaked ElementsStandardized ElementsUsing HTML5 TodayHow to Find the Browser Requirements for Any HTML5 FeatureHow to Find Out Which Browsers Are on the WebFeature Detection with ModernizrFeature “Filling” with Polyfills
Introducing the Semantic ElementsRetrofitting a Traditional HTML PagePage Structure the Old WayPage Structure with HTML5Adding a Figure with <figure>Adding a Sidebar with <aside>Browser Compatibility for the Semantic ElementsStyling the Semantic ElementsUsing the HTML5 ShivModernizr: An All-in-One FixDesigning a Site with the Semantic ElementsDeeper into HeadersNavigation Links with <nav>Deeper into SectionsDeeper into FootersIdentifying the Main Content with <main>The HTML5 Outlining SystemHow to View an OutlineBasic OutlinesSectioning ElementsSolving an Outline Problem
The Semantic Elements RevisitedDates and Times with <time>JavaScript Calculations with <output>Highlighted Text with <mark>Other Standards That Boost SemanticsARIA (Accessible Rich Internet Applications)RDFa (Resource Description Framework)MicroformatsMicrodataA Practical Example: Retrofitting an “About Me” PageExtracting Semantic Data in Your BrowserHow Search Engines Use MetadataGoogle Rich SnippetsEnhanced Search ResultsThe Recipe Search Engine
Understanding FormsRevamping a Traditional HTML FormAdding Hints with PlaceholdersFocus: Starting in the Right SpotValidation: Stopping ErrorsHow HTML5 Validation WorksTurning Validation OffValidation Styling HooksValidating with Regular ExpressionsCustom ValidationBrowser Support for Web Forms and ValidationTesting for Support with ModernizrPolyfilling with HTML5FormsNew Types of InputEmail AddressesURLsSearch BoxesTelephone NumbersNumbersSlidersDates and TimesColorsNew ElementsInput Suggestions with <datalist>Progress Bars and MetersToolbars and Menus with <command> and <menu>An HTML Editor in a Web PageUsing contenteditable to Edit an ElementUsing designMode to Edit a Page
The Evolution of Web VideoIntroducing HTML5 Audio and VideoMaking Some Noise with <audio>Preloading Media FilesAutomatic PlaybackLooping PlaybackGetting the Big Picture with <video>Understanding the HTML5 Media FormatsMeet the Media FormatsBrowser Support for Media FormatsFallbacks: How to Please Every BrowserSupporting Multiple FormatsAdding a Flash FallbackControlling Your Player with JavaScriptAdding Sound EffectsCreating a Custom Video PlayerJavaScript Media PlayersVideo CaptionsTimed Text Tracks and WebVTTAdding Captions with <track>Browser Support for Video Captions

Using CSS3 TodayStrategy 1: Use What You CanStrategy 2: Treat CSS3 Features as EnhancementsStrategy 3: Add Fallbacks with ModernizrBrowser-Specific Styles with Vendor PrefixesBuilding Better BoxesTransparencyRounded CornersBackgroundsShadowsGradientsLinear GradientsRadial GradientsRepeating GradientsCreating Effects with TransitionsA Basic Color TransitionMore Transition IdeasTriggering Transitions with JavaScriptTransformsTransitions That Use TransformsWeb FontsWeb Font FormatsFinding a Font for Your WebsiteGetting a Free Font from Font SquirrelPreparing a Font for the WebEven Easier Web Fonts with GooglePutting Text in Multiple Columns
Responsive Design: The BasicsFluid LayoutFluid ImagesFluid TypographyUnderstanding Viewports: Making Your Layout Work on a SmartphoneAdapting Your Layout with Media QueriesThe Anatomy of a Media QueryCreating a Simple Media QueryBuilding a Mobile-Friendly LayoutMore Advanced Media Query ConditionsReplacing an Entire Style SheetRecognizing Specific Mobile Devices
Getting Started with the CanvasStraight LinesPaths and ShapesCurved LinesTransformsTransparencyComposite OperationsBuilding a Basic Paint ProgramPreparing to DrawDrawing on the CanvasSaving the Picture in the CanvasBrowser Compatibility for the CanvasPolyfilling the Canvas with ExplorerCanvasPolyfilling the Canvas with FlashCanvasThe Canvas Fallback and Feature Detection
Other Things You Can Draw on the CanvasDrawing ImagesSlicing, Dicing, and Resizing an ImageDrawing TextShadows and Fancy FillsAdding ShadowsFilling Shapes with PatternsFilling Shapes with GradientsPutting It Together: Drawing a GraphMaking Your Shapes InteractiveKeeping Track of What You’ve DrawnHit Testing with CoordinatesAnimating the CanvasA Basic AnimationAnimating Multiple ObjectsA Practical Example: The Maze GameSetting Up the MazeAnimating the FaceHit Testing with Pixel Colors
Web Storage BasicsStoring DataA Practical Example: Storing the Last Position in a GameBrowser Support for Web StorageDeeper into Web StorageRemoving ItemsFinding All the Stored ItemsStoring Numbers and DatesStoring ObjectsReacting to Storage ChangesReading FilesGetting Hold of a FileReading a Text File with <input>Replacing the Standard Upload ControlReading Multiple Files at OnceReading an Image File with Drag-and-DropBrowser Support for the File APIIndexedDB: A Database Engine in a BrowserThe Data ObjectCreating and Connecting to a DatabaseStoring Records in the DatabaseQuerying All the Records in a TableQuerying a Single RecordDeleting a RecordBrowser Support for IndexedDB
Caching Files with a ManifestCreating a ManifestUsing Your ManifestPutting Your Manifest on a Web ServerUpdating the Manifest FileBrowser Support for Offline ApplicationsPractical Caching TechniquesAccessing Uncached FilesAdding FallbacksChecking the ConnectionPointing Out Updates with JavaScript
Sending Messages to the Web ServerThe XMLHttpRequest ObjectAsking the Web Server a QuestionCreating the ScriptCalling the Web ServerGetting New ContentServer-Sent EventsThe Message FormatSending Messages with a Server ScriptProcessing Messages in a Web PagePolling with Server-Side EventsWeb SocketsThe Web Socket ServerA Simple Web Socket ClientWeb Socket Examples on the Web
GeolocationHow Geolocation WorksFinding a Visitor’s CoordinatesDealing with ErrorsSetting Geolocation OptionsShowing a MapMonitoring a Visitor’s MovesBrowser Compatibility for GeolocationWeb WorkersA Time-Consuming TaskDoing Work in the BackgroundHandling Worker ErrorsCanceling a Background TaskPassing More Complex MessagesBrowser Compatibility for Web WorkersHistory ManagementThe URL ProblemThe Old Solution: Hashbang URLsThe HTML5 Solution: Session HistoryBrowser Compatibility for Session History
Adding Styles to a Web PageThe Anatomy of a Style SheetCSS PropertiesFormatting the Right Elements with ClassesStyle Sheet CommentsSlightly More Advanced Style SheetsStructuring a Page with <div> ElementsMultiple SelectorsContextual SelectorsID SelectorsPseudo-Class SelectorsAttribute SelectorsA Style Sheet Tour
How a Web Page Uses JavaScriptEmbedding Script in Your MarkupUsing a FunctionMoving the Code to a Script FileResponding to EventsA Few Language EssentialsVariablesNull ValuesVariable ScopeVariable Data TypesOperationsConditional LogicLoopsArraysFunctions That Receive and Return DataObjectsObject LiteralsInteracting with the PageManipulating an ElementConnecting to an Event DynamicallyInline Events

Overview

HTML5 is more than a markup language—it’s a collection of several independent web standards. Fortunately, this expanded guide covers everything you need in one convenient place. With step-by-step tutorials and real-world examples, HTML5: The Missing Manual shows you how to build web apps that include video tools, dynamic graphics, geolocation, offline features, and responsive layouts for mobile devices.

The important stuff you need to know:

Structure web pages more effectively. Learn how HTML5 helps web design tools and search engines work smarter.
Add audio and video without plugins. Build playback pages that work in every browser.
Create stunning visuals with Canvas. Draw shapes, pictures, and text; play animations; and run interactive games.
Jazz up your pages with CSS3. Add fancy fonts and eye-catching effects with transitions and animation.
Design better web forms. Collect information from visitors more efficiently with HTML5 form elements.
Build it once, run it everywhere. Use responsive design to make your site look good on desktops, tablets, and smartphones.
Include rich desktop features. Build self-sufficient web apps that work offline and store the data users need.