ebook: Foundation HTML5 With CSS

by Craig Cook

About the Authors

Craig Cook has been designing and building websites since 1998, though he still silently harbors the aspiration to draw comic books. His background is in traditional graphic design, and although he spent years learning how to make ink stick to paper, he fell in love with the Web and the affair continues to this day. In addition to his passions for design and technology, Craig has an affinity for science-fiction novels, zombie movies, and black T-shirts. He occasionally muses on these subjects and others at his personal website, focalcurve.com. Craig lives and works near San Francisco.

Jason Garber is a web developer living and working near Washington, DC. He got his start building websites in 1996, long before turning a hobby into a career in 2003. Jason founded Refresh DC, a community of web designers, developers, and other new media professionals. He remains active in the community and continues to help organize monthly Refresh DC meetings. Jason also plays guitar in a DC post-rock band, The Orchid, and obsessively collects vinyl records. He sometimes writes on his personal site, sixtwothree.org.

About the Technical Reviewer

Karen Tegtmeyer is an independent consultant and software developer with more than 10 years of experience. She has worked in a variety of roles, including design, development, training, and architecture. She also is an Adjunct Computer Science Instructor at Des Moines Area Community College. Her website is www.KarenTegtmeyer.com

Acknowledgments

I must first thank all of the authors, artists, designers, coders, bloggers, evangelists, and gurus on whose shoulders I stand. I've been inspired and guided by the work and teachings of Dan Cederholm, Tantek Çelik, Joe Clark, Chris Coyier, Derek Featherstone, Mark Norman Francis, Aaron Gustafson, Christian Heilmann, Molly Holzschlag, Jeremy Keith, Bruce Lawson, Ethan Marcotte, Scott McCloud, Eric Meyer, Chris Mills, Dave Shea, Greg Storey, Jeffrey Zeldman... and many others equally deserving of a name- drop but I'm trying to keep this short.

I should also extend gratitude to all the daily-grinders, cubicle-dwellers, and impassioned community members who strive to build a better Web-not for riches and adoration but simply because they love what they do and care about doing it right. You're making the Web a better place to live. Take a bow.

Many kind thanks to my co-author, Jason, for jumping in feet first. What with the glacial pace of my writing, your two chapters easily shaved months off the schedule. Thanks also to everyone at Apress/Friends of ED for your patience with my aforementioned glacial pace throughout this entire process. It's done now.

Thank you Bill, Jannyce, and Jolene for your continued friendship and support, and big thanks to Stephanie Hobson, Cindy Li, and Matt Harris for being my super heroes.

I'm endlessly grateful for my parents, R.L. and Beverly, who instilled me with a desire to learn, a passion to create, and a compulsion to instruct.

Craig Cook

First and foremost, thanks to Craig for asking me to pitch in on the book and for your willingness to help a novice writer. Your guidance and feedback were incredibly helpful. Thank you as well to everyone at Apress for answering my many, many questions about the whole book-writing process.

Special thanks to Cindy Li and Kevin Lawver for your support and mentorship through the years. You've both opened so many doors for me and I don't think I could ever fully repay either of you.

Since 2006, the Refresh DC community has been a constant source of inspiration and knowledge. I absolutely believe that Washington, DC has the best web design and development community out there. Thank you to everyone who has presented, helped organize, and attended one of our meetings. You keep me professionally energized year-round.

Mom, Dad, Kim, Bayleigh, Heather, Phillip, Logan, Grandma, and Granny: You're the best family I've ever had. I love you all and promise to call and write more!

And lastly, thank you to Lauren for your patience and love. Jason Garber xiii

Introduction

The World Wide Web has come a long way in a relatively short time. Since its debut in the early 1990s, the Web has quickly developed from an esoteric collection of academic papers into a full-fledged and pervasive medium, an equal to print, radio, and television. It's a vast repository of information on every subject imaginable, from astrophysics and ancient history to the care and feeding of hermit crabs. The Web has become an integral part of many people's daily lives and is the platform for many aspects of modern business and commerce. But at its heart, the Web is still just a way to share documents.

This book will show you how to create your own documents so you can share them on the Web. You'll become intimately familiar with the rules and constructs of HyperText Markup Language (HTML), the computer language on which the Web is built. It's a simple language, and the basic rules are easy to pick up and put to use. HTML is a tool, and once you know how to use it, you're limited only by your imagination.

Like any other language, HTML has changed and evolved over time. New features are added, existing features are redefined, and outdated features are removed. The latest iteration of HTML is HTML5- ostensibly the fifth version of the language-and it's quite an evolutionary leap indeed. HTML5 incorporates a wide range of new features and introduces new types of functionality far beyond the humble text document.

We won't be going quite that far in this book. Instead of diving into all the shiny new advancements in Web technology, this book offers the true foundation of HTML5, the supporting structure beneath all that innovation. You'll learn how to use HTML effectively and responsibly, to build web pages with clean, meaningful code, and to make them accessible to as many people and devices as possible. In the chapters that follow we'll show you the heart of HTML5 and set the stage for your next leap into the Web's frontier. This book is a starting point, and there's no limit to where you can go from here.

Along the way, we'll also introduce Cascading Style Sheets (CSS). CSS is a language that describes the presentation of web documents, declaring what colors and fonts to use, and the size, shape, and placement of elements on the page. It's very powerful and flexible, and is also really cool. But CSS is a fairly complex language in its own right, and we can't possibly cover every facet of it in a single book.

However, as you'll soon see, CSS relates directly to HTML, and you'll first need to understand HTML before you can put CSS to good use. This book will show you the basics of CSS and offer practical examples of how you can use it. We'll give you the solid grounding in HTML you'll need as a platform to delve deeper into the art and craft of designing web pages with CSS.

The CSS language also continues to evolve. CSS3 is the next generation of CSS, bringing with it exciting new features and effects, offering new ways to design web pages that weren't possible before. We'll introduce just a few of the new advancements in CSS3 and show you how to apply them to your content.

Who This Book Is For

This book is for anyone interested in learning how to build web pages from the ground up using modern best practices. We assume you're familiar with the Internet and the World Wide Web, and you probably

wouldn't pick up a book with "HTML" in the title unless you'd at least heard of it. Beyond that, we don't assume any prior knowledge of web design or computer programming. As you advance through this book, the topics get a little more advanced as well. But fear not: this is a book for beginners, and we'll walk you through the tough parts.

Even if you're not a beginner, this book may still be well worth your time. Quite a bit has changed in HTML5, so if you're a more experienced web developer looking to get back to basics and see what all these new-fangled elements are about, this is the book for you. Although we've put the book together following a general narrative from beginning to end, it's also pretty handy as a reference book so you can turn to any section and find the information you need.

Technical books can be intimidating and hard to read, with a lot of prickly jargon to slog through. We've done our best to keep this book simple and easy to follow, and we define the technical terms as they appear. If you make it through this introduction and find yourself excited rather than bored, you should definitely keep reading.

How This Book Is Structured

The first two chapters lead you through the bare essentials you'll need to start making web pages. Throughout the bulk of this book, Chapters 3 through 8, you'll dig into different subject areas within HTML, becoming familiar with all of the different elements and attributes at your disposal. Along the way, you'll see examples of some of the many ways you can use CSS to style your content, and we've dedicated Chapter 9 to showing you just a few techniques to lay out pages with CSS. We finish up with Chapter 10, where you'll see a case study that takes much of what you've learned throughout the previous chapters and puts it together into a functional website, built from scratch with HTML and CSS.

Here's a brief road map of where this book is going to take you:

Chapter 1, "Getting Started," takes a high-level view of how the Web works and what you'll need in order to create your own websites.
Chapter 2, "HTML and CSS Basics," presents the fundamental rules to follow when you assemble web documents and style sheets, laying the groundwork for the rest of the book.
Chapter 3, "The Document," explains the structure of an HTML document, establishing a framework that you can fill with content.
Chapter 4, "Structuring Content," explores how you'll add content to your documents and support your text with a stable, meaningful structure.
Chapter 5, "Embedding Media," describes how you can add pictures, audio, and video to your web pages for meaningful communication as well as decoration and entertainment.
Chapter 6, "Linking the Web," looks at the all-important hyperlink, the very cornerstone of the Web. Hyperlinks are the vital connections between web pages.
Chapter 7, "Constructing Tables," shows you how to structure complex data in tables, organizing related information in sets of connected rows and columns.
Chapter 8, "Building Forms and Applications," will show you how to create forms that allow your visitors to input their own information and interact with your website.
Chapter 9, "Page Layout with CSS," dives deeper into the craft of using CSS to arrange content on the page, covering a few of the simple techniques you'll use to design for the Web.
Chapter 10, "Putting It All Together," puts the topics discussed throughout the book to practical use, taking you step-by-step through the process of building a website from top to bottom.

Conventions

Throughout this book we'll show you many examples of HTML and CSS coding. Most of these examples appear in numbered listings, separated from the regular text, like you see in Listing 1. In most cases we'll only show you a short snippet of code that you can assume resides alongside other code in a complete document or style sheet.

Listing 1. An example of a code listing

<!DOCTYPE html>

<html>

<head>

<title>Document Title</title>

</head>

<body>

<p>Hello, world!</p>

</body>

</html>

Sometimes a line of code is too long to fit within the limited width of a printed page and we're forced to wrap it to a second line. When that happens, we'll use the symbol to let you know a line is wrapped only to fit the page layout; the real code would appear on a single line.

We'll occasionally add notes, tips, and cautions that relate to the section you've just read. They appear distinct from the main text, like so:

Don't overlook these extra tidbits. They're relevant to the current topic and deserve some attention.

We may also sometimes wander off on a slight tangent that isn't really part of the topic at hand but is still important information you should know. To keep things flowing smoothly, we'll place such supplemental information in sidebars, which look like this:

SIDEBARS

Sidebars offer extra information, exploring a related topic in more depth without derailing the main topic. The term sidebar comes from magazine and newspaper publishing, where these sorts of accompanying stories are often printed in another column alongside the main article.

Downloading the code

All of the HTML and CSS examples you'll see in this book are available for download from the Apress website (apress.com). Once you've downloaded and unzipped the file, you'll find each chapter's source code in a separate folder; you can pick it apart and refer to it at your leisure. You can also find the source code and other information at this book's companion website, foundationhtml.com.