HTML5 24-Hour Trainer [NOOK Book]

Overview

Comprehensive written and interactive instruction for learning HTML5

HTML is the core technology for building websites. Today, with HTML5 opening the Internet to new levels of rich content and dynamic interactivity, developers are looking for information to learn and utilize HTML5. HTML5 24-Hour Trainer provides that information, giving new and aspiring web developers the knowledge they need to achieve early success when building websites.

  • ...
See more details below
HTML5 24-Hour Trainer

Available on NOOK devices and apps  
  • NOOK Devices
  • Samsung Galaxy Tab 4 NOOK 7.0
  • Samsung Galaxy Tab 4 NOOK 10.1
  • NOOK HD Tablet
  • NOOK HD+ Tablet
  • NOOK eReaders
  • NOOK Color
  • NOOK Tablet
  • Tablet/Phone
  • NOOK for Windows 8 Tablet
  • NOOK for iOS
  • NOOK for Android
  • NOOK Kids for iPad
  • PC/Mac
  • NOOK for Windows 8
  • NOOK for PC
  • NOOK for Mac
  • NOOK for Web

Want a NOOK? Explore Now

NOOK Book (eBook)
$22.99
BN.com price
(Save 42%)$39.99 List Price
Note: This NOOK Book can be purchased in bulk. Please email us for more information.

Overview

Comprehensive written and interactive instruction for learning HTML5

HTML is the core technology for building websites. Today, with HTML5 opening the Internet to new levels of rich content and dynamic interactivity, developers are looking for information to learn and utilize HTML5. HTML5 24-Hour Trainer provides that information, giving new and aspiring web developers the knowledge they need to achieve early success when building websites.

  • Covers the most basic aspects of a web page, including a brief introduction to Cascading Style Sheets (CSS)
  • Provides lessons that are backed up by professionally created training videos and interactive content to fully illustrate the dynamic nature of HTML5 and the Internet, while also providing a full learning experience
  • Combines easy-to-follow lessons with expertly crafted training videos to provide you with both written and interactive instruction for learning HTML5

Written by bestselling author Joseph Lowery and with video content created by well-known multimedia and eLearning producer Mark Fletcher, HTML5 24-Hour Trainer brings the new features of HTML5 and the Internet to life unlike any other resource.

Note: As part of the print version of this title, video lessons are included on DVD. For e-book versions, video lessons can be accessed at wrox.com using a link provided in the interior of the e-book.

Read More Show Less

Product Details

  • ISBN-13: 9781118043431
  • Publisher: Wiley
  • Publication date: 9/23/2011
  • Sold by: Barnes & Noble
  • Format: eBook
  • Edition number: 1
  • Pages: 312
  • File size: 9 MB

Meet the Author

Joseph Lowery is a professional web designer and an internationally bestselling author of such books as Dreamweaver CS5 Bible and Adobe CS4 Web Workflows. He is an Adobe Community Expert and regularly presents at Adobe conferences in U.S. and Europe.

Mark Fletcher, an eLearning Developer specializing in Rapid e-Learning Development, has worked with many blue chip companies and has presented at a number of conferences on e-Learning.

Read More Show Less

Table of Contents

Introduction xxv

Getting Section I: Started with HT ML5

Lesson 1: What Is HT ML? 3

The Language of the Web 3

How Browsers Style Web Pages 5

The Latest Version: HTML5 6

Try It 7

Lesson 2: Creating Your First Web Page 9

HTML5 Syntaxes: An Embarrassment of Riches 9

Understanding Basic Page Structure 10

Try It 12

Lesson 3: Viewing Web Pages 15

Opening Files in a Browser 15

Setting a Web Workflow 16

Try It 18

Section II : Styling Your Web Page

Lesson 4: What Is CSS ? 21

Understanding Cascading Style Sheets 21

Key CSS Concepts 23

Working with CSS Placement 25

Working with Selectors 26

Lesson 5: Testing CSS 29

Validating Your CSS 29

Checking Your CSS in a Browser 30

Try It 33

Section III : Working with HT ML Basics

Lesson 6: Adding Text 37

Working with Paragraphs 37

Try It 38

Adding Headings 39

Try It 41

Applying Special Characters 42

Try It 43

Lesson 7: Styling Text with CSS 45

Picking Your Font Family 45

Try It 46

Setting Text Size and Line Height 48

Try It 50

Choosing Text Color 51

Try It 52

Aligning and Emphasizing Text 53

Try It 54

Lesson 8: Linking to Content 55

Linking to Other Pages 55

Try It 58

Linking to a Page Section 59

Try It 60

Styling Link States 61

Working with E‑mail and Document Links 63

Try It 64

Lesson 9: Validating Your Pages 67

Working with the HTML5 doctype 67

Using the W3C Validator 69

Try It 71

Section IV: Incorporating Images

Lesson 10: Working with Images 75

Understanding Web Images 75

Inserting Foreground Images 77

Try It 78

Using Links with Images 79

Aligning Images 80

Try It 81

Including Background Images 83

Try It 84

Lesson 11: Using Image Maps 87

Creating an Image Map 87

Try It 89

Lesson 12: Adding Horizontal Rules 93

Separating Page Sections 93

Sizing and Styling Rules 94

Try It 96

Section V: Using Lists

Lesson 13: Inserting Unordered Lists 101

Working with Bulleted Items 101

Try It 102

Nesting Unordered Lists 103

Changing List Appearance 104

Try It 106

Lesson 14: Working with Ordered Lists 109

Creating Numbered Lists 109

Try It 110

Expanding an Outline 111

Combining Unordered and Ordered Lists 112

Try It 113

Lesson 15: Extending Lists 115

Understanding Website Navigation Bars 115

Working with Lists for Navigation 116

Try It 118

Using Definition Lists and the Tag 120

Try It 123

Section VI: Structuring Tables

Lesson 16: Building a Simple Table 127

Understanding HTML Tables 127

Working with Rows and Columns 130

Try It 131

Lesson 17: Styling Tables 133

Creating White Space in Tables 133

Aligning Tables 136

Working with Borders 137

Modifying Table Colors 139

Try It 141

Lesson 18: Making Tables More Accessible 143

Inserting Captions 143

Incorporating Details and Summary 144

Try It 146

Section VII : Building Forms

Lesson 19: Creating a Form 151

Understanding Forms 151

Using Text and Textarea Fields 153

Try It 154

Working with Radio Buttons 156

Offering Checkbox Options 156

Implementing Select Lists 157

Try It 158

Using Hidden Form Controls 160

Inserting Form Buttons 160

Try It 161

Lesson 20: Enhancing Forms 165

Applying Fieldsets and Legends 165

Try It 166

Using Tables for Form Layout 168

Styling Forms with CSS 169

Understanding Additional HTML5 Form Enhancements 172

Try It 173

Enhancing Section VIII : HT ML with JavaScript

Lesson 21: Adding JavaScript 179

Understanding JavaScript 179

Integrating JavaScript Code 181

Degrading Gracefully 186

Testing JavaScript 187

Try It 189

Lesson 22: Advanced JavaScript 191

Linking External Files 191

Incorporating a JavaScript Framework 194

Try It 196

Section IX : Adding Media

Lesson 23: Working with Plug-Ins 201

Understanding Plug-Ins 201

Inserting an SWF File 205

Adding Silverlight Code 207

Try It 208

Lesson 24: Inserting Audio 211

Using Web-Compatible Audio 211

Linking to MP3 Files 212

Embedding Audio with Plug-Ins 213

Incorporating HTML5 Audio 215

Try It 218

Lesson 25: Inserting Video 221

Working with Video Types 221

Adding a Video Player 223

Integrating Video without a Plug-In 226

Try It 229

Section X: Next Steps in HT ML5

Lesson 26: Looking Ahead in HT ML5 233

Using HTML5 Today 233

What Works Now 234

What Doesn’t Work Yet 235

Determining What Works Dynamically 236

Try It 237

Lesson 27: Enhancing Web Page Structure 239

Understanding Current Layouts 239

Working with the New HTML5 Semantics 241

Try It 247

Lesson 28: Integrating Advanced Design Elements 249

Expanding Font Possibilities 249

Designing for Multiple Screens 251

Drawing with 253

Try It 263

Appendix A: Browser Support for HTML5 265

HTML5 New Features 265

CSS3 New Features 271

Appendix B: Advanced HTML5 Features 277

Editable Content 277

Local Storage 278

Geolocation 279

Appendix C: What’s on the DVD? 281

System Requirements 281

Using the DVD 282

What’s on the DVD 282

Troubleshooting 282

Customer Care 283

Index 287

Read More Show Less

First Chapter

HTML5 24-Hour Trainer


By Joseph W. Lowery Mark Fletcher

John Wiley & Sons

Copyright © 2011 John Wiley & Sons, Ltd
All right reserved.

ISBN: 978-0-470-64782-0


Chapter One

What Is HTML?

HTML is an acronym for HyperText Markup Language — but that collection of geeky words sure doesn't tell you much. In this lesson, I explain exactly what HTML is, what it does, and, more importantly, why it is important to you. I also show you how you peek under the hood of any web page so you can see what's really going on and learn from the masters of the web designer's craft.

THE LANGUAGE OF THE WEB

The Internet, or World Wide Web, is essentially a network of computers. Browsers, like Internet Explorer, Firefox, or Safari, are computer programs that display web pages, which, in turn, are written in HTML. So, at its heart, HTML is the language of the Web.

As noted, HTML is an abbreviation for HyperText Markup Language. Let's break down that HTML acronym to dive a bit deeper. HyperText is text presented on one electronic device — whether it's a computer, smart phone, or something else — that is connected, via a link, to other text, which could be located elsewhere in the same document, on a different page in the same website, or on an entirely different site. HyperText is perhaps the defining essence of the Internet: the ability to link from one web page to another, thus creating a web of information.

A simple hypertext system that connects raw textual content pretty much describes the earliest Internet systems. So how did we get to the rich multimedia experience that makes up much of the web today? That's where the second half of the HTML abbreviation, Markup Language, comes into play. The Markup Language part of HTML takes plain text with additional codes or tags and turns raw text into easily readable text on other electronic devices.

Here is a good example of HTML in use. Say you have a block of text that you want to communicate:

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America. Article. I. Section. 1. All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives. Section. 2. The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.

Although all the information you need to convey is contained here, it's a struggle to understand the meaning because it's a big block of plain text. It would make a lot more sense if we were able to mark it up in some way to indicate structure as well as communicate content. How about if we break it up into paragraphs using symbols, like this:

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Article. I.

Section. 1.

All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.

Section. 2.

The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.

One symbol, <p>, shows where the paragraph starts and another, similar symbol, </p>, shows where it ends. Overall, that's better — at least you can read it now without your eyes crossing — but everything is still on one level. Perhaps we can show the difference between a heading and a paragraph of text by using different symbols, such as an <h> for a heading and a <p> for a paragraph: <p> <h>Article. I.</h> Section. 1.

All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives. </p>

Getting better, but are all headings the same? How about if we indicate the most important heading with the number 1 and a less important heading with a 2, like this:

Most of this book explores the wide range of HTML tags used to mark up web page content so that you can create web pages that look the way you want them to.

HOW BROWSERS STYLE WEB PAGES

Like most computer software, a web browser only works with a particular type of file. An HTML page typically ends in the file extension of .html or .htm. When a browser loads an .html document, it begins to redraw the screen according to the included HTML markup and content.

The browser has a default style for each HTML tag that indicates a visual element for the page, such as a heading, that governs the size, color, and other properties of the element. These default styles — and, in fact, how HTML tags are applied in general — are based on a recommendation by the international consortium that determines HTML specifications, the W3C. Each browser determines how best to interpret the HTML recommendations, which explains why web pages can look different from one browser to the next.

A sharp eye on your browser's address bar will quickly reveal that not all web pages end in .html or .htm. You'll encounter a veritable alphabet soup of file extensions: .php, .cfm, .aspx, and many, many more. Such pages likely require the use of a server-side processor and additional languages to perform calculations or integrate details from a database. Once the processing is complete, the server-side program sends the browser straight HTML that can be rendered on the screen — so it all comes down to HTML.

Rather than force all web pages to be rendered using the same or similar set of design rules, browsers recognize a set of customizable styles known as cascading style sheets (CSS). When rendering a web page, browsers take the structure of the page from the HTML tags and style it according to the associated CSS rules. The web designer is responsible for developing the CSS styles and applying them to the HTML elements. Because HTML and CSS are so tightly integrated these days, you'll be learning a bit of CSS styling along with each of the HTML tags.

To learn more about cascading style sheets (CSS) see Lesson 4.

Because HTML is a markup language, the code for each page is readable, unlike compiled or machine code used to power most computer applications. The underlying HTML for almost any web page is readily visible and this ability to learn by example can be a terrific way to sharpen your understanding of HTML. All modern browsers include a built-in command that allows you to examine the HTML code used to render the current web page. You will review text with HTML tags in the Try It section at the end of this lesson.

THE LATEST VERSION: HTML5

The W3C, as mentioned earlier, is the organization responsible for creating the HTML specifications. The W3C has been active since the very beginning of the web under the direction of Tim Berners-Lee, defining the standards for numerous computer document formats, including HTML and CSS. This standards body has developed several versions of HTML over the years. The last version to reach the final stage of recommendation was HTML 4.01 in 1999. The most recent version, HTML5, is still under development as of this writing, but nearing completion.

The World Wide Web is a rapidly developing organism and much has changed since 1999. The newest version of HTML attempts to embrace the robust multimedia environment of today's Web while remaining backward-compatible with current browsers. Although HTML5 has not been finalized, almost all of the tags can be used safely in web pages today. Even some of the more advanced tags, such as those for video, work with the most current browser versions.

So what makes HTML5 different from its predecessors? HTML5 is distinguished in two main categories: structure and media. As you'll see in greater detail later in this book, today's web page is typically structured by generic divisions through the tag. Thus, a layout that requires header, main content, and footer areas would have a minimum of three tags. HTML5, by contrast, offers specific <header> and <footer> tags, as well as ones for content such as <article> and <summary>. HTML5 contains numerous other structural elements for handling figures, forms, and navigation as well. Most of these have not yet been implemented by current browsers as of this writing.

The other major difference — and one that has gotten a lot of attention recently with the release of the Apple iPad — is built-in media support. In HTML4 and earlier, if you wanted to show an animation or play a video, you needed to use a browser plug-in, such as the Adobe Flash Player. HTML5 includes native support for playing video and audio through the <video> and <audio> tags, respectively, as well as static and animated vector graphics via the <canvas> tag. A few browsers on the cutting-edge, including the latest versions of Firefox and Google Chrome, have begun to support one or more of these elements, as shown by the video playing in Safari 4.0.5 in Figure 1-2.

To find out more details about the newest elements of HTML5, see Section 10 later in this book.

TRY IT

In this Try It you learn how to review the HTML source code for any given web page.

Lesson requirements

You will need an Internet connection and a web browser, such as Internet Explorer, Firefox, or Safari.

Step-by-Step

1. Open your favorite browser.

2. Enter the following in the web address (or location) field: http://html5.markofthejoe.com/ pages/lesson_01/constitution.html. Press Return (Enter).

3. After the page loads, choose the following menu command for your browser:

Internet Explorer: View Page Source Firefox: View Page Source Safari: View View Source

4. When the new window opens, scroll down the page to review the HTML markup and note the use of <p>, <H4>, and <H4> tags.

5. When you're done, close the window containing the HTML code to view the web page in the browser (Figure 1-3).

Please select the video for Lesson 1 on the DVD to see an example that takes you through the process of displaying the web page source code.

(Continues...)



Excerpted from HTML5 24-Hour Trainer by Joseph W. Lowery Mark Fletcher Copyright © 2011 by John Wiley & Sons, Ltd. Excerpted by permission of John Wiley & Sons. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Read More Show Less

Customer Reviews

Average Rating 5
( 1 )
Rating Distribution

5 Star

(1)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously
Sort by: Showing 1 Customer Reviews
  • Anonymous

    Posted May 23, 2011

    No text was provided for this review.

Sort by: Showing 1 Customer Reviews

If you find inappropriate content, please report it to Barnes & Noble
Why is this product inappropriate?
Comments (optional)