Read an Excerpt
HTML5 24-Hour Trainer
By Joseph W. Lowery Mark Fletcher
John Wiley & SonsCopyright © 2011 John Wiley & Sons, Ltd
All right reserved.
Chapter OneWhat 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.
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.
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>
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.
In this Try It you learn how to review the HTML source code for any given web page.
You will need an Internet connection and a web browser, such as Internet Explorer, Firefox, or Safari.
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.
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.