Preface |
|
xv | |
|
Section 1 HTML5 Tag Structure |
|
|
3 | (64) |
|
Where HTML Code Can Be Found |
|
|
3 | (1) |
|
|
4 | (2) |
|
The Rocky Road from HTML4 to HTML5 |
|
|
6 | (1) |
|
Web 2.0 Applications and Solutions |
|
|
7 | (1) |
|
What Is Included in HTML5 |
|
|
8 | (1) |
|
Enhancements to Core Tag Language |
|
|
8 | (1) |
|
New Elements Are Introduced to HTML5 |
|
|
9 | (1) |
|
Blocking Content on the Page |
|
|
10 | (2) |
|
Modifications to Content Sections |
|
|
12 | (1) |
|
Making DOCType Easier to Work with |
|
|
13 | (1) |
|
Organizing Code Using Blocking Elements |
|
|
13 | (2) |
|
Using the SECTION Element |
|
|
15 | (1) |
|
Using the ARTICLE Element |
|
|
16 | (1) |
|
Using the HEADER and FOOTER Elements |
|
|
16 | (2) |
|
|
18 | (1) |
|
|
19 | (1) |
|
|
20 | (1) |
|
|
21 | (1) |
|
Text-Level Semantic Additions and Changes |
|
|
21 | (1) |
|
|
22 | (1) |
|
Using the TIME Element for Measurement |
|
|
22 | (1) |
|
|
22 | (1) |
|
Using the PROGRESS Element |
|
|
23 | (1) |
|
Applying HTML5 to Make HTML Code Easier to Read |
|
|
23 | (4) |
|
|
27 | (1) |
|
What Has Changed in HTML Forms 2.0? |
|
|
27 | (2) |
|
Inserting the Cursor Automatically into a Specified Field |
|
|
29 | (1) |
|
Making an INPUT Field Required |
|
|
29 | (1) |
|
Adding the Placeholder Text |
|
|
29 | (2) |
|
Controlling Data with HTML5 |
|
|
31 | (1) |
|
Extending the Functionality of HTML5 |
|
|
31 | (1) |
|
|
32 | (1) |
|
Storing Data Locally Using Web Storage |
|
|
33 | (2) |
|
|
35 | (1) |
|
What Is Not Being Supported in HTML5 |
|
|
35 | (2) |
|
How to Gracefully Migrate Sites to Work with the New HTML5 Standard |
|
|
37 | (1) |
|
|
38 | (3) |
|
Designing for the Mobile Web |
|
|
41 | (1) |
|
The Leading Mobile Web Browsers |
|
|
42 | (1) |
|
|
43 | (1) |
|
|
44 | (1) |
|
Project 1 Building a Web Site Using HTML5 Blocking Elements |
|
|
45 | (22) |
|
Creating a Template for Your Web Site |
|
|
45 | (2) |
|
Customizing the HEADER Element |
|
|
47 | (1) |
|
Customizing the NAVIGATION Element |
|
|
48 | (1) |
|
Customizing the Main SECTION Element |
|
|
49 | (1) |
|
Customizing the FOOTER Element |
|
|
50 | (1) |
|
Creating the Site's Home Page |
|
|
51 | (2) |
|
Adding a Product Page That Uses the MARK Element |
|
|
53 | (1) |
|
Adding a News Page That Uses the TIME and ASIDE Elements |
|
|
54 | (2) |
|
Creating a Contact Us Page That Uses the New Form INPUT Attributes |
|
|
56 | (7) |
|
|
63 | (4) |
|
|
67 | (70) |
|
Using CSS To Style Your Web Site |
|
|
67 | (2) |
|
|
69 | (4) |
|
|
73 | (1) |
|
Modifying Elements with CSS |
|
|
73 | (3) |
|
|
76 | (2) |
|
Using Pseudo Class Styles |
|
|
78 | (1) |
|
|
79 | (1) |
|
Designing Your Web Page with CSS |
|
|
80 | (1) |
|
Controlling Font Display with CSS |
|
|
80 | (2) |
|
Embedding Fonts Using CSS3 |
|
|
82 | (2) |
|
Sizing Fonts with CSS Units of Measurement |
|
|
84 | (2) |
|
|
86 | (1) |
|
Adding Drop Shadow Text Effects |
|
|
87 | (1) |
|
Additional Font Definitions |
|
|
88 | (1) |
|
Working with Columns in CSS3 |
|
|
89 | (2) |
|
Using CSS3 to Control Visual Display |
|
|
91 | (1) |
|
Positioning Design Elements with CSS |
|
|
91 | (2) |
|
Increased Control over Color |
|
|
93 | (1) |
|
Multiple Background Objects |
|
|
94 | (2) |
|
Adding Rounded Corners to Layers |
|
|
96 | (3) |
|
Dazzling Your Audience with CSS3 Animation |
|
|
99 | (1) |
|
|
99 | (2) |
|
Creating Animation with CSS3 |
|
|
101 | (1) |
|
Delivering Solutions for the Mobile Market |
|
|
102 | (2) |
|
|
104 | (1) |
|
Project 2 Applying CSS3 to Your Web Design |
|
|
105 | (32) |
|
Linking to a Single CSS Document |
|
|
106 | (1) |
|
|
107 | (1) |
|
Default Styles for Content |
|
|
108 | (3) |
|
Applying Styles to Main Sections of Content |
|
|
111 | (3) |
|
Applying Styles to the Navigation Elements |
|
|
114 | (1) |
|
Applying Styles to the Form Elements |
|
|
115 | (2) |
|
|
117 | (1) |
|
|
118 | (2) |
|
|
120 | (6) |
|
|
126 | (7) |
|
|
133 | (4) |
|
Section 3 Rendering HTML5 Illustrations |
|
|
137 | (46) |
|
The Tale of Web Image Formats |
|
|
137 | (1) |
|
Bitmap Images: Using JPEG, GIF, and PNG Images on the Web |
|
|
138 | (1) |
|
|
139 | (1) |
|
The Fundamentals of Creating SVG Images and Adding Them to Your Web Pages |
|
|
140 | (2) |
|
Understanding the Basics of Creating Shapes |
|
|
142 | (7) |
|
|
149 | (1) |
|
Applying Gradients to SVG Images |
|
|
150 | (3) |
|
Adding Text to Your SVG Drawings |
|
|
153 | (2) |
|
Adding Interactivity and JavaScript to Your SVG Drawings |
|
|
155 | (1) |
|
Leveraging SVC Drawing Tools |
|
|
156 | (1) |
|
Adding the CANVAS Element to Your Web Page |
|
|
157 | (1) |
|
|
158 | (1) |
|
|
159 | (2) |
|
|
161 | (1) |
|
|
162 | (1) |
|
|
163 | (1) |
|
|
164 | (3) |
|
Adding Animation to CANVAS Images |
|
|
167 | (1) |
|
|
168 | (1) |
|
Project 3 Inserting Video into Your Web Design |
|
|
169 | (14) |
|
|
169 | (1) |
|
Converting the Video to Ogg Format |
|
|
170 | (4) |
|
Embedding the Video into the Web Page |
|
|
174 | (5) |
|
Adding Audio to Your Web Page |
|
|
179 | (1) |
|
|
180 | (3) |
|
Section 4 HTML5 Rich Media Foundation |
|
|
183 | (32) |
|
Working with VIDEO and AUDIO Tags |
|
|
183 | (3) |
|
Using HTML5 Rich Media Tags |
|
|
186 | (1) |
|
Controlling Video with VIDEO Tags |
|
|
186 | (6) |
|
Controlling Audio with AUDIO Tags |
|
|
192 | (3) |
|
Encoding Video and Audio for Delivery over the Web |
|
|
195 | (1) |
|
Creating Video in Ogg Theora Format |
|
|
196 | (3) |
|
Creating Video in H.264 Format |
|
|
199 | (1) |
|
Creating Audio That Plays Back Through Your Web Browser |
|
|
199 | (2) |
|
Ensuring That Your Video and Audio Play Back |
|
|
201 | (1) |
|
Serving Video from Your Servers |
|
|
201 | (1) |
|
What about Google's WebM? |
|
|
202 | (1) |
|
|
202 | (3) |
|
Project 4 Creating SVG Logos and CANVAS Charts |
|
|
205 | (10) |
|
|
205 | (4) |
|
Inserting a CANVAS-Driven Dynamic Chart |
|
|
209 | (3) |
|
|
212 | (3) |
|
Section 5 HTML5 JavaScript Model |
|
|
215 | (68) |
|
|
216 | (2) |
|
JavaScript as a Programming Language |
|
|
218 | (5) |
|
|
223 | (1) |
|
Using Math in Your Scripts |
|
|
223 | (2) |
|
Assessing Values Using Operators |
|
|
225 | (1) |
|
Controlling Outcomes with If/Else and Switch Statements |
|
|
225 | (3) |
|
Specific Objects You Can Use in JavaScript |
|
|
228 | (1) |
|
Developing JavaScript for HTML5 |
|
|
228 | (1) |
|
|
228 | (2) |
|
Storing Data with LocalStorage |
|
|
230 | (3) |
|
Controlling Geolocation Devices with JavaScript |
|
|
233 | (3) |
|
Integrating JavaScript with HTML5 |
|
|
236 | (3) |
|
Taking JavaScript to the Next Level with Ajax |
|
|
239 | (1) |
|
|
240 | (3) |
|
|
243 | (3) |
|
|
246 | (2) |
|
|
248 | (1) |
|
Project 5 Working with JavaScript |
|
|
249 | (34) |
|
|
249 | (1) |
|
Developing a Lightbox Image Management Tool |
|
|
250 | (1) |
|
|
250 | (2) |
|
|
252 | (7) |
|
Stitching It All Together in HTML |
|
|
259 | (1) |
|
Controlling Forms with jQuery |
|
|
260 | (9) |
|
Inserting a Tabbed Interface to Build on Top of Your Existing jQuery Projects |
|
|
269 | (3) |
|
Using Additional Ajax Libraries: Working with Adobe's Spry Framework |
|
|
272 | (5) |
|
Working with Additional Ajax Libraries: Using Yahoo's YUI Framework |
|
|
277 | (3) |
|
Linking to Content Hosted on Different Web Sites |
|
|
280 | (1) |
|
|
281 | (2) |
Index |
|
283 | |