HTML5 Digital Classroom

Jeremy Osborn

• Publisher: Wiley
• Year: 2011
• ISBN:
  9781118128770
• Edition: 1
• Topic: Design
• Subtopic: Web Design

Thistraining package- complete withfull-color book and instructional video - is the easiest way to learn HTML5! HTML5 boasts extensive new features that allow you to create dynamic web pages and present users with amazing multimedia experiences, and this one-of-a-kind training package is your guide to creating websites that wow! HTML5 Digital Classroom provides step-by-step instruction to help you gain the essential HTML5 knowledge you need to master the latest HTML5 specifications. This book-and-video package will have you creating web pages and web applications using HTML5, styling using CSS3, and working effectively with JavaScript and jQuery like a pro. This personal training course uses a full-color book plus video tutorials to teach you how to design compelling websites and web apps, develop your coding skills, and take full advantage of the new web standards for creating rich multimedia experiences. This book starts at a foundational level with an introduction to HTML5 before moving on to more advanced topics like creating HTML5 forms, using geo location, implementing drag-and-drop, utilizing the Canvas element to create 2D and 3D graphics, and more.

• Includes 15 lessons in full-color covering introductory to advanced HTML5 topics plus video tutorials and sample files that allow you to test your skills and work at your own pace
• Fully updated for the latest HTML5 specifications and browser capabilities
• Covers the basics of creating web pages with HTML5, formatting text and layouts with CSS3, using web fonts, understanding HTML5 markup, and optimizing your site for viewing on mobile devices
• Explains more advanced concepts like working with video and audio, taking advantage of offline storage, using the Canvas element, enhancing your website with JavaScript and jQuery, and incorporating best practices for web coding into your workflow

Get comfortable with writing and reviewing HTML5 compliant code and put your web development skills to work todaywith HTML5 Digital Classroom. NOTE: DVD and other supplementary materials are not included as part of eBook file. These materials are available for download upon purchase.

Section Two: HTML5 with CSS3 and JavaScript

This section covers the fundamentals of HTML5 and CSS3 syntax, along with HTML5 techniques involving JavaScript and the jQuery JavaScript library. This section includes ten lessons. You should have an understanding of coding XHTML/HTML and CSS prior to starting these lessons. If you are new to coding HTML/XHTML and CSS, we suggest you start with section one of this book, which covers the fundamentals of web design and development with XHTML/HTML and CSS.

Lesson 6:
Using HTML5 Markup

In this lesson, you will learn how to update existing HTML pages using the new HTML5 sectioning elements and other new elements.

What you’ll learn in this lesson:

• How to define the different HTML5 content categories
• How to replace div elements with new HTML5 elements
• Understanding sectioning content and HTML5 outlines

Starting up

You will work with several files from the HTML5_06lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.

To accurately preview the HTML5 content that you will create in this lesson, you need a browser that supports the relevant HTML5 tags. See “Using web browsers that support HTML5 tags” in the Starting Up section of this book to determine whether you are using such a browser and for instructions on downloading one, if needed.

---

See Lesson 6 in action!

Use the accompanying video to gain a better understanding of how to use some of the capabilities shown in this lesson. The video tutorial for this lesson can be found on the included DVD..

---

A review of semantic markup

In this lesson, you will learn some of the new HTML5 elements that have been added to the language. To successfully complete the lesson, you should know the fundamentals of HTML and CSS and have experience building web pages with these languages.

This lesson begins with a brief review of semantic markup, which is a formal way of saying “always choose the best tag for the job.” A more technical explanation of semantic markup is syntax that makes sense to humans as well as programs, such as a web browser. Semantic markup tries to explicitly attach meaning to content, most often through the use of tags.

At first glance, choosing the right tag seems fairly straightforward. For example, consider headings in HTML, of which there are 6 levels: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Rendered in the browser, the <h1> element is the largest and the <h6> element is the smallest.

The 6 heading elements, rendered in default styles, from top to bottom.

The content within an <h1> element should have greater importance than the content in an <h3> element. Likewise, if a font style is set for the headings, the font size of an <h1> element should be set larger than the <h3> element. There is no technical reason that prevents you from creating a style making the <h3> element larger than the <h1>. From the web browser’s perspective it would make no difference, but to a human looking at the code for the first time it would be semantically confusing: an <h3> element is ...