Nearly every section of the book contains practical code examples that demonstrate real-world use (A and B). Typically, they are coupled with screen shots that show the results of the code when you view the Web page in a browser C. Most of the screen shots are of the latest version of Firefox that was available at the time. However, this doesn’t imply a recommendation of Firefox over any other browser. The code samples will look very similar in any of the latest versions of Chrome, Internet Explorer, Opera, or Safari. As you will learn in Chapter 20, you should test your pages in a wide range of browsers before putting them on the Web, because there’s no telling what browsers your visitors will use. The code and screen shots are accompanied by descriptions of the HTML elements or CSS properties in question, both to give the samples context and to increase your understanding of them. In many cases, you may find that the descriptions and code samples are enough for you to start using the HTML and CSS features. But if you need explicit guidance on how to use them, step-by-step instructions are always provided. Finally, most sections contain tips that relay additional usage information, best practices, references to related parts of the book, links to relevant resources, and more.
You’ll find a snippet of HTML code on many pages, with the pertinent sections highlighted. An ellipsis (...) represents additional code or content that was omitted for brevity. Often, the omitted portion is shown in a different code
<body>
<header role="banner">
<nav role="navigation">
<ul class="nav">
<li><a href="/" class="current">home</a></li>
<li><a href="/about/">about</a></li>
<li><a href="/resources/">resources</a></li>
<li><a href="/archives/">archives</a></li>
</ul> </nav> ... </header>
</body>
</html>
The book’s site, at www.bruceontheloose .com/htmlcss/, contains the table of contents, every complete code example featured in the book (plus some additional ones that wouldn’t fit), links to resources cited in the book (as well as additional ones), information about references used during writing, a list of errata, and more. The site also includes reference sections (Appendixes A and B) that we didn’t have room to include in the book. These are handy for quickly looking up HTML elements and attributes or CSS properties and values. (They also contain some information not covered in the book.) You can find the code examples at www .bruceontheloose.com/htmlcss/examples/. You can browse them from there or download them to your computer—all the HTML and CSS files are yours for the taking. In some cases, I’ve included additional comments in the code to explain more about what it does or how to use it. A handful of the code samples in the book are truncated for space considerations, but the complete versions are on the book’s Web site. Please feel free to use the code as you please, modifying it as needed for your own projects. The URLs for some of the key pages on the book’s site follow: n Home page: www.bruceontheloose .com/htmlcss/ n Code samples: www.bruceontheloose .com/htmlcss/examples/ n Appendix A: HTML Reference: www.bruceontheloose.com/ref/html/ n Appendix B: CSS Properties and Values: www.bruceontheloose.com/ref/css/ I hope you find the site helpful.
Video Training Visual QuickStart Guides are now even more visual: Building on the success of the top-selling Visual QuickStart Guide books, Peachpit now offers Video QuickStarts. As a companion to this book, Peachpit offers more than an hour of short, task-based videos that will help you master HTML5’s top features and techniques; instead of just reading about how to use HTML5, you can watch it in action. It’s a great way to learn all the basics and some of the newer or more complex features of HTML5. Log on to the Peachpit site at www.peachpit.com/ register to register your book, and you’ll find a free streaming sample; purchasing the rest of the material is quick and easy.
Unless a site is heavy on videos or photo galleries, most content on Web pages is text. This chapter explains which HTML semantics are appropriate for different types of text, especially (but not solely) for text within a sentence or phrase. For example, the em element is specifically designed for indicating emphasized text, and the cite element’s purpose is to cite works of art, movies, books, and more. Browsers typically style many text elements differently than normal text. For instance, both the em and cite elements are italicized. Another element, code, which is specifically designed for formatting lines of code from a script or program, displays in a monospace font by default. How content will look is irrelevant when deciding how to mark it up. So, you shouldn’t use em or cite just because you want to italicize text. That’s the job of CSS. Instead, focus on choosing HTML elements that describe the content. If by default a browser styles it as you would yourself with CSS, that’s just a bonus. If not, just override the default formatting with your own CSS.
0 comments:
Post a Comment