Table Of ContentMike Mc G rath
HTML5
Second Edition
Covers the new HTML 5.1 W3C Recommendation
In easy steps is an imprint of In Easy Steps Limited
16 Hamilton Terrace · Holly Walk · Leamington Spa
Warwickshire · CV32 4LY
www.ineasysteps.com
Second Edition
Copyright © 2017 by In Easy Steps Limited. All rights reserved. No part of this book may be reproduced or
transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by
any information storage or retrieval system, without prior written permission from the publisher.
Notice of Liability
Every effort has been made to ensure that this book contains accurate and current information. However, In
Easy Steps Limited and the author shall not be liable for any loss or damage suffered by readers as a result of
any information contained herein.
Trademarks
All trademarks are acknowledged as belonging to their respective companies.
Contents
1 Getting started
Introducing HTML5
Addressing web pages
Defining document structure
Creating a document
Validating documents
Employing an HTML editor
Summary
2 Providing page information
Bestowing a title
Specifying a character set
Refreshing the page
Describing the document
Incorporating scripts
Incorporating style sheets
Linking more resources
Summary
3 Creating body content
Working the body
Inserting paragraphs
Including quotations
Emphasizing text
Reading the small print
Marking text
Keeping preformatted text
Modifying text
Including code in text
Giving tooltip advice
Adding images
Directing languages
Summary
4 Inserting hyperlinks
Creating hyperlinks
Accessing links via keys
Linking to page fragments
Linking to protocols
Using images as hyperlinks
Producing image map links
Generating popups
Summary
5 Arranging content sections
Proclaiming headings
Grouping headers
Providing navigation
Writing articles
Standing aside
Footing the page
Positioning content
Denying anonymity
Summary
6 Writing lists and tables
Creating unordered lists
Creating ordered lists
Creating definition lists
Producing a simple table
Spanning cells over rows
Spanning cells across columns
Adding a header and footer
Aligning cell content
Grouping columns
Setting column widths
Utilizing templates
Summary
7 Embedding media content
Referencing figures
Selecting pictures
Embedding objects
Specifying parameters
Embedding in frames
Embedding plugin movies
Embedding audio
Embedding video
Indicating progress
Summary
8 Building input forms
Submitting forms
Gathering text input
Controlling input type
Providing text areas
Checking boxes
Choosing radio buttons
Selecting options
Utilizing hidden data
Pushing buttons
Using images for submission
Adding logos to buttons
Labeling form controls
Listing data options
Uploading files
Summary
9 Painting on canvas
Generating a canvas
Painting shapes
Stroking borders
Filling options
Writing text
Drawing lines
Swerving curves
Translating coordinates
Transforming shapes
Animating the canvas
Summary
10 Employing APIs
Measuring fractions
Dragging and dropping objects
Manipulating pixels
Storing user data
Editing live content
Cross-document messaging
Pinpointing the user
Summary
+ Handy reference
Global HTML5 attributes
HTML5 element tags
CSS properties & values
Preface
The creation of this book has been for me, Mike McGrath, an exciting opportunity to
discover how the latest specification of HTML5 can be implemented in today’s web
browsers. Whereas my previous books on web page markup described the HTML 4.01
and HTML 5.0 specifications, it has been fascinating to see how the HTML 5.1
specifications are supported in Microsoft Edge, Internet Explorer, Firefox, Google
Chrome, Safari, and Opera web browsers.
The “Handy Reference” section at the end of the book lists the HTML5 tags and
attributes that are included in the HTML 5.1 specifications. All the examples I have
given in this book demonstrate HTML5 features that are supported by leading web
browsers, and the screenshots illustrate the actual results produced by the listed code. I
truly believe that now, more than ever, authors can integrate HTML5 content markup,
JavaScript functionality, and CSS presentation, to produce stunning interactive web
pages.
Conventions in this book
In order to clarify the code listed in the steps given in each example I have adopted
certain colorization conventions. Those parts of the HTML language itself are colored
blue, like this:
<html>
Values assigned to HTML attributes are colored red, like this:
<html lang=”en”>
Literal content that is marked up by HTML tags is colored black, like this:
<title>HTML5 in easy steps</title>
Similarly, for style sheet code listed in the steps, those parts of the CSS language itself
are colored blue and values assigned to properties are colored red, like this:
h1 { color : red ; background : yellow ; }
Additionally, in order to identify each source code file described in the steps, a colored
icon and the file name appears in the margin alongside the steps, such as these:
page.html
style.css
script.js
vector.svg
embed.pdf
audio.ogg
video.mp4
Grabbing the source code
For convenience I have placed all the source code files and associated files featured in
this book into a single ZIP archive file, which you can obtain by following these easy
steps:
Browse to www.ineasysteps.com then navigate to Free Resources and choose
the Downloads section
Find HTML5 in easy steps, 2nd edition in the list, then click on the hyperlink
entitled All Code Examples to download the archive
Now, extract the archive contents to any convenient location on your computer
Undoubtedly, HTML5 provides significant new creative possibilities in web page
authoring – as I hope my examples demonstrate. I sincerely hope you enjoy discovering
how HTML5 can be used to create stunning interactive web pages in today’s latest web
browsers as much as I did in writing this book.
1
Getting started
Welcome to the exciting world of the HTML5 web. This chapter introduces HTML5 and
demonstrates how to create a “barebones” valid HTML5 document.
Introducing HTML5
Addressing web pages
Defining document structure
Creating a document
Validating documents
Employing an HTML editor
Summary