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. A unique package including an eBook with video instruction.
The eBook written by bestselling author Joseph Lowery and with video course 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.
Visit www.wrox.com and www.wiley.com
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. In this Try It you learn how to review the HTML source code for any given web page.
In this lesson, you examine the basic structure common to all HTML pages. The core document you create can serve as a foundation for the most complex web page you can envision — or, as you’ll see in this lesson's exercise— the most basic.
This lesson shows you how to view and change an HTML page. In this Try It you learn how to view and make changes to an HTML page that you have saved on your own system.
This lesson is a short reading assignment (no video) covering Cascading Style Sheet (CSS) basics including including the three main principles of cascading, inheritance, and specificity, working with external, embedded, or inline placement of CSS, and working with selectors, tags, classes, and IDs.
In this lesson, you learn a few techniques for uncovering issues with your site’s CSS before your client does. In this Try It you learn how to validate a CSS file.
In this lesson, you learn how to quickly add paragraphs, headings, and special characters to your web pages.
In this lesson, you learn how to style your text with specific fonts, sizes, colors, and alignment. In this Try It you learn how to set the page font, double-space a paragraph, center text, and define the color for text.
In this lesson you learn to create links between web pages, sections of the same page, images, and documents. In addition to trying those on your own in the Try It, in the Try It you will style link states.
Validating your web pages ensures a baseline functionality and rules out misspelled or missing HTML tags. Furthermore, valid HTML is web standards–compliant and, to the best of current capabilities, future-proof. Validation is a straightforward process made much simpler by the freely available online tools explored in this lesson. In this Try It you learn how to use the W3C HTML Validation Service.
In this lesson, you learn which graphic formats are appropriate for the Web as well as the proper code for adding the different types of images to your web designs. Common image techniques — including alignment, text wrapping, and links — are also covered in this lesson. In the Try It you will insert and align images and use an image as a page background.
With image maps, it’s possible to incorporate multiple links with just one image. What’s more, these links can be virtually any shape: a rectangle, a circle, or a polygon. In this lesson, you learn how to add this valuable functionality to your designer’s palette.
In the HTML5 specification, the purpose of the <hr> "horizontal rule" tag is broader than just drawing a line across the page. In HTML5, the <hr> tag indicates a transition from one topic to another within a larger section. And it doesn’t have to be a line at all. Styled correctly, any symbol could be used. In this lesson, you learn how to add the <hr> tag to the page whether you want to display a simple horizontal rule or something with a bit more flair to indicate thematic changes in content.
In this lesson, you learn how to code simple unordered lists, as well as the more complex variation, nested unordered lists. Though the term unordered lists may not be familiar to you, you’ll probably recognize its offline equivalent, the bulleted list. You also see how to style the list to modify font, size, and color as well as the type of bullet used.
Ordered lists, more commonly known as numbered lists, are used when the sequence of the items is important. Though you could use a bulleted list for the Top 25 Websites, it’d be a lot harder to figure out which site placed where. Ordered lists are very flexible with a wide range of number styles — from standard, cardinal numbers to classical Roman numerals. As you’ll learn in this lesson, you can nest ordered lists to create a multi-level outline. What’s more, you can even combine the two list types.
Lists aren’t just for bullets and numbers. With a little bit of CSS styling magic, the standard unordered list can be transformed into a navigation bar, complete with background imagery and interactive states. What’s more, a completely different type of list used for definitions is available to the HTML coder. This lesson explores all these facets of lists and more.
Tables on the Web allow information to be displayed in a grid. The rows and columns of the table can be labeled and styled to help make the content easy to understand at a glance. As you might expect with a highly structured page element like a table, numerous tags are involved, which must be precisely placed to create the proper code configuration. In this lesson, you learn how HTML tables are constructed and how to work the various table elements — rows, columns, and cells — to create a basic table.
Prior to HTML5, tables supported a number of default attributes that provided space around the content as well as a — to be honest — somewhat unattractive border. Starting with HTML5, these attributes are obsolete and styling a table is an absolute must. In this lesson, you learn how to add padding, margins, and borders to tables as well as align them and spice them up with color.
For those who are visually challenged and depend on technology such as screenreaders to translate the Web from a visual to an aural experience, tables represent a significant challenge. HTML5 includes a number of additional tags and attributes that can make tables and their content more accessible to all. In this lesson and the Try It you will will learn to use table captions, details, and summaries.
Forms are essential to surveys, polls, contact requests, and online shopping. In this lesson, you learn the basics of how forms are structured as well as the specifics for implementing the key form elements. You will learn to use text and textarea fields, radio buttons and check boxes, select lists, hidden form controls, and form buttons.
In this lesson, you learn how to add clarifying structural elements like fieldsets to a form as well as how to lay out your form with tables and with CSS. You also get a peek of CSS form enhancements set forth in the HTML5 specification.
In this lesson, you learn how to work with plug-ins in general and also, specifically, with the Flash Player to display animations and the competing Microsoft Silverlight plug-in.
In this lesson, you learn which sound file formats are the most compatible with the Web, the simplest approach to bringing music to a site, how to integrate an audio plug-in, and how to play audio natively with HTML5.
In this lesson, you learn all about the different video formats, the most common way to show video via a plug-in, and how to apply the new plug-in free approach in HTML5.
Some new features of HTML5 work today in some of the browsers. Unfortunately for the designer, implementation is not at all consistent across the board on pretty much any of the new elements. The goal of this lesson is to clear up the confusion and point the way forward for web designers willing and excited to blaze the trail.
Semantics is the study of meaning, particularly as it relates to words and text. When applied to HTML, semantics essentially means using the right tag for the right content. In other words, the semantic web is a standardized web where the same content can be given a proper display regardless of the device or containing context. As you learn in this lesson, a good number of new tags in HTML5 are devoted to enhancing the underlying structure of a web page. This lesson covers section, header, nav, article, aside, and footer tags in HTML5.
This lesson covers a few more tantalizing design prospects in HTML5 including print-like typography with the @font-face CSS property, mobile sites for phones and tablets with the new media query capabilities, and dynamic imaging with the <canvas> tag.
Founded in 1807, John Wiley & Sons, Inc. has been a valued source of information and understanding for more than 200 years, helping people around the world meet their needs and fulfill their aspirations. Wiley and its acquired companies have published the works of more than 450 Nobel laureates in all categories: Literature, Economics, Physiology or Medicine, Physics, Chemistry, and Peace.
Wiley is a global provider of content and content-enabled workflow solutions in areas of scientific, technical, medical, and scholarly research; professional development; and education. Our core businesses produce scientific, technical, medical, and scholarly journals, reference works, books, database services, and advertising; professional books, subscription products, certification and training services and online applications; and education content and services including integrated online teaching and learning resources for undergraduate and graduate students and lifelong learners. Wiley's global headquarters are located in Hoboken, New Jersey, with operations in the U.S., Europe, Asia, Canada, and Australia. The Company is listed on the New York Stock Exchange under the symbols JWa and JWb.