Contents at a Glance

Introduction

PART I: GETTING STARTED ON THE WEB

HOUR 1: Understanding How the Web Works

HOUR 2: Structuring an HTML Document

HOUR 3: Understanding Cascading Style Sheets

PART II: BUILDING BLOCKS OF PRACTICAL WEB DESIGN

HOUR 4: A Closer Look at HTML5 Page Structure

HOUR 5: Working with Text Blocks and Lists

HOUR 6: Working with Fonts

HOUR 7: Working with Colors and Borders

HOUR 8: Using External and Internal Links

HOUR 9: Using Tables and Columns

HOUR 10: Creating Images for Use on the Web

HOUR 11: Using Images in Your Website

HOUR 12: Using Multimedia in Your Website

PART III: ADVANCED WEB PAGE DESIGN WITH CSS

HOUR 13: Working with Margins, Padding, Alignment, and Floating

HOUR 14: Understanding the CSS Box Model and Positioning

HOUR 15: Creating Fixed or Liquid Layouts

HOUR 16: Using CSS to Do More with Lists

HOUR 17: Using CSS to Design Navigation

HOUR 18: Using Mouse Actions to Modify Text Display

HOUR 19: Implementing CSS3 Transformations, Transitions, and Animations

PART IV: ADVANCED WEBSITE FUNCTIONALITY AND MANAGEMENT

HOUR 20: Creating Print-Friendly Web Pages

HOUR 21: Understanding Dynamic Websites and HTML5 Applications

HOUR 22: Working with Web-Based Forms

HOUR 23: Organizing and Managing a Website

HOUR 24: Helping People Find Your Web Pages

---

Introduction

In 2012, more than 2.8 billion people had access to the Internet, including 255 million people in the United States alone. Throw in 567 million Chinese users, 69 million German users, 54 million British users, 76 million Russian users, and 99 million Brazilians, and you can see the meaning of the word world in the term World Wide Web. Many of these Internet users are also creating content for the web—you can be one of them! Although accurate measurements of the total number of web pages are difficult to come by, Google surpassed the 1 trillion mark of indexed pages in the middle of 2008.

In the next 24 hours, hundreds of millions of new pages will appear in accessible areas of the Internet. At least as many pages will be placed on private intranets, where they will be viewed by businesspeople connected via their local networks. Every one of those pages—like the billions of pages already online—will use Hypertext Markup Language (HTML).

As you complete the 24 one-hour lessons in this Learning Lab, your web pages will be among those that appear on the Internet. These lessons also provide you with a foundation for developing one of the most valuable skills in the world today: mastery of HTML.

Can you really learn to create top-quality web pages yourself, without any specialized software, in less time than it takes to schedule and wait for an appointment with a highly paid design consultant? Can this relatively short, easy-to-read tutorial really enable you to teach yourself state-of-the-art techniques for developing and publishing web content?

Yes. In fact, within the first two lessons, someone with no previous HTML experience at all can have a web page ready to go online.

How can you learn the language of the web so quickly? By example. This Learning Lab organizes lessons on the basics of HTML and CSS into simple steps and then shows you exactly how to tackle each step. Many of these HTML code examples are accompanied by pictures of the output produced by the code. You see how it’s done, you read a clear and concise explanation of how it works, and then you immediately do the same thing with your own page. A few minutes later, you’re on to the next step.

Soon you’ll be marveling at your own impressive pages on the Internet.

• HTML5 is the most current recommendation for web page creation. Every example is validated HTML5.
• All the examples have been tested for compatibility with the latest version of every major web browser. That includes Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera. You’ll learn from the start to be compatible with the past, yet ready for the future.
• The Learning Lab has extensive coverage of the most current recommendation of Cascading Style Sheets (CSS), which allows you to carefully control the layout, fonts, colors, and formatting of every aspect of your web pages, including both text and images. When it comes to creating eye-popping web pages, CSS goes far beyond what traditional HTML pages could do by themselves.
• The technical stuff is not enough, so we also include the advice you need when setting up a website to achieve your goals. Key details—designing an effective page layout, posting your page to the Internet with FTP software, organizing and managing multiple pages, and getting your pages to appear high on the query lists at all the major Internet search sites—are all covered in enough depth to get you beyond the snags that often frustrate beginners.

Attention to many of these essentials are what made the first eight print editions of this book bestsellers, and this updated edition is no different. All the examples have been updated, and significant portions of the content have been revised to match new examples and new technologies, fully embracing HTML5 and CSS3.

• The text you type to make an HTML page is shown first, with all HTML and CSS code highlighted.
• The resulting web page is shown as it will appear to users who view it with the world’s most popular web browsers.

You’ll often be able to adapt the example to your own pages without reading any of the accompanying text at all (although it is highly recommended that you read the rest of the text!).

All the examples are standards compliant and work with Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera. Although all the screenshots were taken in Chrome, rest assured that all the code has been tested in all other browsers.

You will also find colors used within code examples and references to elements of code in the explanatory text. These colors highlight the different bits and pieces of code, both to enhance your familiarity with them and to call attention to their use.

• HTML tags appear in dark blue.
• HTML comments appear in grey.
• CSS elements appear in green.
• HTML attribute names appear in light blue.
• HTML attribute values appear in magenta.

Please note that the color of an item can change, depending on its context. For instance, when CSS elements are used within the style attribute of an HTML tag, they are color-coded as HTML attribute values (magenta) instead of CSS elements (green).

Whenever a new term is used, it is clearly highlighted. No flipping back and forth to a glossary!