Beginning HTML5 & CSS3 For Dummies® (2013)

---

Each URL component helps to define the location of a web page or resource:

Protocol: Specifies the protocol the browser should use to request the resource. This is usually HTTP but could be HTTPS (Secure HTTP), FTP, or something else.

Domain: Points to the General website, such as www.usa.gov, where the resource resides. A domain may host a few files (like a personal website) or thousands of files (like a large government or corporate site, such as www.usa.gov or www.ibm.com).

Path: Names the sequence of folders through which to navigate to get to a specific file or resource.

For example, to get to a file in the services folder that resides in the system folder, use the /system/services/ path.

Filename: Specifies which file in a directory path the browser is to access.

Although the URL shown in Figure 1-3 is not publicly accessible, it points to a domain and defines a path that leads to a specific resource named file.html:

http://www.domain.com/mainfolder/subfolder/file.html

Chapter 8 provides the complete details on how to use HTML and URLs to add hyperlinks to your web pages, and Chapter 3 shows how to obtain a URL for your website after you’re ready to move it to a web server.

Understanding HTML and Its Versions

You already know that HTML’s primary job is to label and accommodate content on web pages. But HTML comes in various versions, each of which handles content, but each of which is slightly different from the other. The basic rules and components stay more or less the same, but some important details differ. The following sections explore those versions and explain what makes them different.

Different versions of HTML

HTML stands for HyperText Markup Language, markup developed in the late 1980s and early 1990s to describe web pages. HTML is now enshrined in numerous standard descriptions called specifications from the World Wide Web Consortium (W3C) and the Web HyperText Application Technology Working Group (WHATWG). Work on HTML specifications for versions 1-4 ended in 1999.

When you add an X in front of HTML, you get XHTML, a reworked version of HTML based on the eXtensible Markup Language (XML). XML was designed to work and behave well with computers, software, and the Internet.

The original versions (1-4, that is) of HTML included some irregularities that could cause heartburn for software that reads HTML documents. XHTML was designed to use an extremely regular and predictable syntax that’s easier for software to handle. XHTML was supposed to replace HTML, but increasing technical complexity in later versions caused it to fall by the wayside. (XHTML 2.0 was so complicated, it was neither widely adopted nor used very much at all.)

In 2004, the WHATWG began work on what is called a “Living Standard” for what is called HTML5 today. It’s been in process for a long time now, and the standard is finally nearing completion as we write this book. Some areas of HTML5 are still under development or subject to unresolved controversy. We steer clear of them in this book so that we can provide you with a solid foundation for your web pages for the foreseeable future.

HTML5 already appears to be succeeding where XHTML did not. Even though the standard is still under construction, HTML5 is widely adopted and used on the web today. In fact, the HTML5 specification is in what’s called “Candidate Recommendation” form as of December 2012. That’s one step before final Recommendation status is reached; most experts expect that final version to be approved and ratified in late 2013 or early 2014.

This book concentrates on the safe parts of HTML5, which use the same kind of regular and straightforward syntax that XHTML offered, but is much simpler to understand and use. Earlier books we’ve written show how to create both HTML and XHTML; in this book, we stick to HTML5, period.

Creating HTML markup

HTML is a straightforward language for describing web page contents. Its components are easy to use and come in three basic types:

Elements: Identify different parts of an HTML document using tags.

Attributes: Provide additional information about a particular instance of an element.

Entities: Non-ASCII text characters, such as the copyright symbol (©) and accented letters (É). Entities come from the Standard Generic Markup Language (SGML) used to define early HTML versions.

This chapter covers basic form and syntax for elements, attributes, and entities. Parts II through V of this book show how elements and attributes do the following:

Describe various kinds of text (such as paragraphs, articles, or tables).

Create effects on a web page (such as changing fonts or colors, or creating buttons with rounded corners and beveled edges).

Add images and links to a page.

We provide links to some tables of basic entities on our companion website, or you can consult the complete Unicode Character Code Charts at www.unicode.org/charts, where you can find codes for nearly every known human language, and a huge collection of abstract shapes and symbols. Find this information by browsing around at this site:

www.dummieshtml.com/html5cafe

Building HTML documents

Building an HTML document requires assembling a sequence of elements. Some of that sequence is prescribed, which means certain elements always appear in a specific order. Other aspects of the sequence are optional, which gives you the ability to pick and choose the elements for a particular page that are best-suited to accommodate and deliver your content.

Hopefully, this helps to explain why building HTML documents often proceeds from predefined skeletons called templates. Because everybody knows in advance what the prescribed HTML elements are and in what order they must appear, there’s no reason why work on a web page can’t start with such a skeleton — which is more or less content-free when you start work on it anyway. Templates make it a little quicker and easier for you to flesh out your web page (and to make sure you don’t forget any of its obligatory elements).

Human error on web pages is inevitable, so web browsers are designed to do their best to compensate for errors and omissions in those pages. But even though HTML5 is simple and straightforward, it comes with certain basic requirements that must be met for a web page to display properly. We get into those requirements in Chapter 2 and Parts II and III of this book. For now, please accept that there are good reasons for following HTML’s rules of the road, the best of which is that if you do, your pages should work (and look good) in almost any web browser.

Basically, building a web page consists of inserting a sequence of HTML elements into a document, along with text and pointers to resources, to give the page some content. This means adding elements (and sometimes providing them with attributes and values), writing text, preparing images or media, and so forth. When all the pieces are put together, you can check your work to make sure that the page says what you want, does what you want, and looks the way you want.

Understanding the Role of CSS

Cascading Style Sheets (CSS) manage web page presentation, and govern how pages look and behave when on display to users (or being printed to paper or listened to in a text-to-speech converter). CSS is another markup language that mixes special symbols and keywords to define rules for handling specific HTML elements (and even, specific instances of HTML elements, when “special handling” is needed). CSS is best understood as a tool to manage formatting, layout, and behavior on web pages.

CSS offers an incredible array of presentation controls, including positioning and layout of document elements, identification and assignment of colors for text and backgrounds, and selection and manipulation of specific typefaces, called fonts, for textual information. CSS provides methods so that a single page of markup can be presented in different styles for different forms of rendering, so that a document can be tweaked and tuned for delivery on a screen, a printed page, by voice, or even on a Braille-based tactile device.

When an author builds a web page, he or she can define a style sheet for that document. Nevertheless, the reader’s web browser can override its definitions with a different style sheet if the reader so chooses. CSS defines a priority scheme, called the cascade, that defines which style rule should be applied to individual HTML elements in a document. Such priorities or weights are calculated to apply to style rules so that results are predictable and repeatable.

Different versions here, too . . .

Like HTML, CSS has been around for a while. Today, three finalized versions of CSS have been defined:

Version 1, also called CSS Level 1, was published by the W3C in December, 1996. This version defines all basic CSS capabilities, including font properties such as typeface and emphasis, color for text and backgrounds, text attributes for spacing between letters, words, and lines of text, alignment values for text, images, and tables, margins, borders, padding and positioning of elements, and unique identifiers and generic classifications for groups of attributes.

Version 2 (CSS Level 2), published in May 1998, adds absolute, relative, and fixed positioning for elements, and a z-index to position multiple layers on a document, along with media types, aural (sound) styles, bidirectional text, and new font properties such as drop shadows.

Version 2.1 (CSS Level 2 Revision 1, also known as CSS2.1) repaired errors in CSS2. It went through many versions and revisions itself, first reaching Candidate Recommendation status in February 2004. It wasn’t finally published as a Recommendation until June 2011.

Version 3 (CSS Level 3) is broken into a collection of items called modules, each of which extends features defined in CSS2. At present, 50 CSS modules have issued from the W3C’s CSS Working Group, but only four have attained Recommendation status — namely, Media Queries, Namespaces, Selectors Level 3, and Color. Others are relatively stable and have reached Candidate Recommendation status, including the Backgrounds and Borders module, as well as Multi-Column Layout. The rest are still in various stages of completion.

CSS4 follows the module approach introduced with CSS 3 so there is no single, monolithic CSS4 specification. Only a few Level 4 modules are currently in development, because so few Level 3 modules have been completed. (Image Values, Backgrounds and Borders, and Selectors are the best-known Level 4 modules being worked on at present.)

Most modern web browsers, such as Internet Explorer versions 9 and 10, Chrome versions 20 and later, Firefox version 17 or later, and so forth, fully support CSS2.1. Support for CSS3 varies by module, where all of the Recommendation status items are typically supported, but with varying degrees of support for other modules. CSS4 enjoys little or no support from these same browsers (except for experimental or beta implementation).

As with HTML5, we provide information only about widely adopted and used CSS markup in this book. We assume you want to build workable and predictable web pages and sites. That’s why we steer clear of specifications and modules that aren’t well understood and widely implemented here.

Creating CSS markup

Interestingly, any HTML document can include style information written using CSS markup. Nevertheless, most web developers isolate CSS markup in separate style sheet documents and use links to those independent external style sheets in their web pages (HTML documents). This technique helps keep content separate from presentation, encourages reuse of style sheets, and makes it easy to update presentation for multiple pages by editing the style sheets they reference rather than having to incorporate changes into a whole raft of web pages. Another important advantage to this approach is that it encourages use of standard style sheets — like the ones you see referenced in Listing 1-1 in this very chapter, in fact — where local customization comes from reference to local style sheets.

Building a style sheet requires some knowledge of the HTML elements that will appear on your web pages, and it requires you to define properties and values to manage how those elements will look and where they should be positioned on those pages. CSS offers incredible control over presentation, which in turn requires extensive testing and tweaking to get things just right. Furthermore, CSS permits classes or unique identifiers to be used, so you can associate a set of style rules with a single type or even a single instance of an HTML element on your pages. Thus, you can define basic style rules for entire HTML elements and then override them with specific rules for things such as page headers, page footers, certain types of paragraphs, and even individual instances of HTML elements. This provides incredible power over layout, look, and feel on web pages.

Dissecting a Simple Markup Example

Flip back to take another look at Listing 1-1. Careful examination of this short listing shows quite a bit of HTML, but only indirect references to CSS.

Where’s the HTML?

The HTML elements you see in Listing 1-1 are as follows, in their order of appearance:

The <html> tag starts the web page, and </html> ends it.

The markup between <head> and </head> defines general information for the entire web page.

The text inside the <title></title> element provides the page title.

The <meta> element provides information about page content and display layout.

A <link> element establishes a link to an external resource; in this case, to two different CSS style sheets.

The markup between <body> and </body> supplies actual page content.

The <div></div> element defines two different content divisions on the page, one for navigation, the other for page content.

The navigation <nav></nav> element defines a navigation bar.

The anchor <a></a> element defines hypertext links.

The heading1 <h1></h1> element defines a level-1 heading.

The paragraph <p></p> element defines a paragraph of text.

A figure <figure></figure> element defines a graphic with a caption.

The image <img> element links to a graphic for display, with horizontal and vertical dimensions and alternative text in case the image doesn't appear.

A figure caption <figcaption></figcaption> element labels the figure caption.

A document footer <footer></footer> element defines text for the bottom of the page.

Put all these elements together, add attribute values and text, and you have the web page shown in Figure 1-2.

Where’s the CSS?

There is no CSS per se in Listing 1-1. Rather, you find links to two external style sheets, one named main.css and the other normalize.css. As it happens, these two style sheets are the results of considerable work from the HTML5 community to create standard HTML styling that looks the same (or at least, very close) across multiple browsers. This project is called HTML5 Boilerplate, and it describes itself as "a professional front-end template for building fast, robust, and adaptable web apps or sites." Check it out at http://html5boilerplate.com; you can also find a nice showcase of cool examples based on this template at http://h5bp.net.

A partnership of equals

It’s tempting to treat CSS as an afterthought to HTML or somehow secondary to HTML. You must have content before you can have presentation, right? Although that’s true, you can’t deliver content without presentation, either, and a good presentation is just as important to the success and usability of a web page as is the content that it handles in a web browser.

That’s why it’s important to understand both HTML and CSS. You use HTML to control what goes into a web page, and you use CSS to control where and how it appears; what it looks (or sounds, or even feels) like; and how it behaves. Both HTML and CSS are essential to a well-crafted web page, so you should devote equal attention and energy to understanding both HTML and CSS, neither one to the detriment of the other.

’Nuff said!