book

HTML and CSS Web Standards Solutions: A Web Standardistas' Approach

Name: HTML and CSS Web Standards Solutions: A Web Standardistas' Approach
ISBN: 9781430216063

by Christopher Murphy, Nicklas Persson

December 2008

Beginner

434 pages

10h 6m

English

Apress

Read now

Unlock full access

Copyright
About the Authors
About the Technical Reviewer
Acknowledgments
Introduction
A little backgroundWho is this book aimed at?What you'll achieveConventions used in this bookAccessing the code
1. A Solid XHTML Foundation
1. Are You a Web Standardista?
1.1. A brief history of the World Wide Web1.1.1. The Web is born1.1.1.1. The perfect Web1.1.1.1.2. The chaotic Web1.1.2. HTML rewind1.1.3. HTML evolved1.1.3.1. The X in XHTML1.2. A web standards approach1.2.1. What are standards?1.2.2. So, web standards?1.3. Why use web standards?1.3.1. Separating content and presentation1.3.2. Efficiency through reduced markup1.3.3. Increased accessibility1.3.4. Cross-browser compatibility1.3.5. Nonbrowser compatibility1.3.6. Forward compatibility1.4. The Web Standardistas' approach1.4.1. Wax on . . . wax off1.4.2. Why use XHTML?1.4.3. The benefits of CSS1.5. The Web Standardistas' toolbox1.5.1. We're not WYSIWYG1.5.2. What's your favorite plain text editor?1.5.3. Mac OS X, Windows, or Linux?1.6. Summary1.7. Homework: Set up your work environment1.7.1.1.7.1.1.1.7.1.1.1. 1. Research1.7.1.1.2. 2. Select, download, and install a text editor
2. Building Basic Web Pages
2.1. HTML: Tags in action2.1.1. What are tags?2.1.2. Tags come in pairs, usually2.1.3. It's an element, my dear Watson2.2. Your first web page: Hello World!2.3. To mark up a web page, you just type2.3.1. The markup makes the web page2.3.2. Learning from others: How to view source2.4. Every page has a <head> and a <body>2.4.1. The importance of using the title element2.5. Defining your document type2.5.1. It all starts with a DOCTYPE2.5.1. A short Quirks Mode interlude2.5.2. It's all in a namespace2.5.3. Just one more thing2.5.2. You don't have to memorize all this2.5.2.1. Hello World!: DOCTYPE edition2.6. Tags have structure too: Nested elements2.7. Making your markup easier to follow2.7.1. Commenting your markup2.7.2. White space2.8. Summary2.9. Homework: Create your first space-monkey-themed XHTML page2.9.1.2.9.1.1.2.9.1.1.1. 1. Get started2.9.1.1.2. 2. A basic web page2.9.1.1.3. 3. Find out about Albert I2.9.1.1.4. 4. Add a title2.9.1.1.5. 5. Mark up the content2.9.1.1.6. 6. Add a comment2.9.1.1.7. 7. Test your page
3. Structured Markup
3.1. Adding structure and meaning3.2. What is structured markup?3.2.1. What is semantic markup?3.2.2. Making markup meaningful3.2.3. POSH and proud3.3. Signposts for reading3.3.1. Creating structure with headings and paragraphs3.3.2. Applying information hierarchy3.3.3. Case study: The Guardian3.4. An introduction to phrase elements3.4.1. What is an element?3.4.2. Adding meaning to fragments of text3.4.3. Adding emphasis: <em> and <strong>3.4.4. Other phrase elements3.5. Block-level and inline-level elements3.5.1. Imagine a box3.5.2. The difference between block-level and inline-level elements3.6. Valid code is browser-friendly markup3.6.1. The W3C Markup Validation Service3.6.2. Valid code is not necessarily well-structured code3.7. Getting the search mix right3.8. Summary3.9. Homework: Introducing Miss Baker3.9.1.3.9.1.1.3.9.1.1.1. 1. Establish an information hierarchy3.9.1.1.2. 2. Add <h1>–<h4> and <p> tags3.9.1.1.3. 3. Add <em> and <strong>3.9.1.1.4. 4. Validate your page
4. Markup That Adds Meaning
4.1. Lists: First-level organizers4.1.1. Why use lists?4.1.2. Unordered and ordered lists4.1.3. Enter the ordered list4.1.4. Nesting lists4.1.5. Definition lists4.2. Tables: The good, the bad, and the alternatives4.2.1. What is tabular data?4.2.2. <table>, <tr>, and <td>4.2.3. Improving table accessibility4.2.4. Adding a descriptive summary to a table4.3. Quoting text4.3.1. What's a <blockquote>?4.3.2. Citations (or <cite>)4.3.3. Quotations (or <q>)4.4. Other tags in the Standardistas' toolbox4.4.1. Abbreviations4.4.2. Making a case for rules: <hr />4.4.3. A note on self-closing tags4.4.4. <code> and <pre>4.4.5. Marking up changes with <del> and <ins>4.4.6. <sup> and <sub>4.5. Summary4.6. Homework: Gordo's Adventure4.6.1.4.6.1.1.4.6.1.1.1. 1. Explore the content4.6.1.1.2. 2. Adding unordered lists4.6.1.1.3. 3. Structuring the references4.6.1.1.4. 4. Marking up a block quote4.6.1.1.5. 5. Check for errors
5. Including Images
5.1. Introducing the <img /> tag5.1.1. An <img /> tag in action5.1.2. Adding width, height, and title attributes to images5.2. Working with images5.2.1. Which image editor? (Or how long is a piece of string?)5.2.1.1. Photoshop5.2.1.2. Fireworks5.2.1.3. Photoshop Express5.2.1.4. Bring out the GIMP (and its friends)5.3. Image optimization5.3.1. Why compressing your files is important5.3.2. Save for Web5.4. Image formats for the Web5.4.1. JPG: Photographs5.4.2. GIF: Graphics and type5.4.3. PNG: The new (old) kid on the block5.4.3.1. PNG-85.4.3.2. PNG-245.5. A pixel is a pixel is a pixel5.5.1. Size matters5.5.2. The limitations of bitmaps5.5.3. Vector graphics5.6. Finding the right image5.6.1. Low-cost images5.6.2. Flickr and Creative Commons5.7. Summary5.8. Homework: A picture is worth a thousand words5.8.1.5.8.1.1.5.8.1.1.1. 1. Get the images5.8.1.1.2. 2. Add your img elements5.8.1.1.3. 3. Test!5.8.1.1.4. 4. Research

6. Creating Links with Anchors
6.1. Meet <a>6.1.1. Using descriptive link text6.1.2. The title attribute6.2. Let's create some links!6.2.1. External links6.2.1.1. The dreaded ampersand and the validator6.2.1.2. Checking your links6.2.1.3. The (evil) target attribute6.2.2. Local links6.2.3. Internal links6.2.4. E-mail links6.2.5. Wrapping up6.3. Absolute vs. relative links6.4. Structuring your site6.4.1. Organizing your files and folders6.4.2. The magic index file6.5. Linking between different folders in our site6.5.1. Linking within a folder6.5.2. Linking down into a subfolder6.5.3. Linking up into a "parent" folder6.5.4. Linking up and then linking down6.6. Summary6.7. Homework: Housekeeping first; links second6.7.1.6.7.1.1.6.7.1.1.1. 1. The content audit6.7.1.1.2. 2. Here's one we prepared earlier6.7.1.1.3. 3. Move your images into the images folder6.7.1.1.4. 4. Move your monkey pages into the pioneers folder6.7.1.1.5. 5. Fix the image references6.7.1.1.6. 6. Add links to the references6.7.1.1.7. 7. Link your pages together
7. Getting Your Site Online
7.1. Your address on the Web7.1.1. What is a domain name?7.1.2. What's a TLD?7.1.3. Think of a name!7.1.4. Registering a domain name7.2. Web hosting7.2.1. Free web hosting?7.2.2. Getting the balance right7.2.3. Things to look for in a hosting company7.2.3.1. Disk space7.2.3.2. Bandwidth7.2.3.3. E-mail7.2.3.4. A control panel7.2.3.5. Support7.2.4. Moving web hosts7.3. Uploading your files7.3.1. Local vs. remote7.3.2. File Transfer Protocol7.3.3. Propagation7.4. Tools we're using7.4.1. Which FTP client?7.4.2. Transferring files to the server: A walkthrough7.4.3. What you need7.4.3.1. The address of the server7.4.3.2. Your username7.4.3.3. Your password7.4.4. Let's get started7.4.5. Online walkthrough7.5. Summary7.6. Homework: Getting your site online7.6.1.7.6.1.1.7.6.1.1.1. 1. Research7.6.1.1.2. 2. Download and install an FTP client7.6.1.1.3. 3. Register a domain name7.6.1.1.4. 4. Purchase some web space7.6.1.1.5. 5. Connect to your server7.6.1.1.6. 6. Upload your files7.6.1.1.7. 7. Check your web site7.6.1.1.8. 8. Invite your friends
2. Adding Style with CSS
8. CSS 101
8.1. Adding some style8.1.1. HTML: A brief refresher8.1.2. CSS isn't new8.1.3. Tag soup or lean and mean?8.1.4. CSS to the rescue8.2. Meet CSS8.2.1. Anatomy of a CSS rule8.2.2. A note on formatting8.2.3. A slightly more complex rule8.3. Adding CSS to a web page8.3.1. Adding an embedded style sheet8.4. A simple walkthrough8.4.1. Getting colorful8.4.2. Styling the <body>8.4.3. Styling the headings: <h1> and <h2>8.4.4. Styling the <p>8.4.5. Commenting your CSS8.5. Summary8.6. Homework: Adding some CSS to Gordo's web page8.6.1.8.6.1.1.8.6.1.1.1. 1. Add your <style> tags8.6.1.1.2. 2. Style the <body>8.6.1.1.3. 3. Style the headings8.6.1.1.4. 4. Style the paragraphs8.6.1.1.5. 5. Add a comment8.6.1.1.6. 6. Validate
9. Styling Text
9.1. Typography on the Web9.1.1. What is typography?9.1.2. CSS: Our flexible friend9.1.3. Making your text accessible9.2. Inheritance and specificity9.2.1. Inheritance9.2.2. Meet specificity9.3. Specifying type on the Web9.3.1. Core Web Fonts9.3.2. Writing more reliable CSS rules to specify fonts9.3.2.1. Serif9.3.2.2. Sans serif9.3.2.3. Monospace9.3.2.4. Cursive9.3.2.5. Fantasy9.4. Size matters9.4.1. Sizing text with pixels9.4.2. Sizing text with ems9.5. Writing more efficient rules9.6. Show and tell: Adding a few more rules9.6.1. Specifying a typeface9.6.2. Let's lose some weight9.6.3. Text transform9.6.4. Letter spacing9.6.5. Styling paragraphs9.6.5.1. Setting a line height9.6.5.2. Adding paragraph indents9.6.5.3. Aligning text using text-align9.7. Styling links9.7.1. Using pseudo-classes to style links9.7.2. LoVe HAte your links9.8. Summary9.9. Homework: Improving Gordo's typography9.9.1.9.9.1.1.9.9.1.1.1. 1. Change your font-family9.9.1.1.2. 2. Use grouped selectors9.9.1.1.3. 3. Style the <h4>9.9.1.1.4. 4. Style the paragraphs9.9.1.1.5. 5. Style your links
10. A One-Column CSS Layout
10.1. The Cascade in Cascading Style Sheets10.1.1. So what exactly is the cascade?10.1.2. The order of your CSS rules is important10.2. Introducing margins, borders, and padding10.2.1. Meet the box model10.2.2. Applying margins, borders, and padding10.2.3. Using CSS shorthand for margins, borders, and padding10.2.4. Styling our <blockquote>10.3. Dividing up your document10.3.1. Identifying your document's sections10.3.2. Using div and span elements with id and class attributes10.3.2.1. div and span elements10.3.2.2. id and class attributes10.3.3. It's all in a name10.4. Using div elements to create CSS layouts10.4.1. A one-column CSS layout10.4.2. Using descendant selectors to minimize markup10.5. Styling details with the span element10.5.1. Using a span to style inline content10.5.2. Dan Cederholm's illustrious ampersand10.6. Styling with class attributes10.7. Enhancing your design by adding background images with CSS10.7.1. Adding a background image to the body10.7.2. Using background images with other elements00.8. Summary10.9. Homework: Creating a one-column CSS layout10.9.1.10.9.1.1.10.9.1.1.1. 1. Add the div tags10.9.1.1.2. 2. Write the CSS10.9.1.1.3. 3. Upgrade the Famous Primates brand10.9.1.1.4. 4. Style the blockquote10.9.1.1.5. 5. Style Gordo's image10.9.1.1.6. 6. Add a background-image
11. A Two-Column CSS Layout
11.1. A float-based CSS layout11.1.1. Floating divs11.1.2. Applying floats to layouts11.1.3. Creating our two-column CSS layout11.2. Calculating the width of your elements11.2.1. A short box model recap11.2.2. What happens when your elements are too wide?11.3. Collapsing margins11.4. Applying a float to an image11.4.1. Faux Columns11.5. Wrapping up with King Kong11.6. Summary11.7. Homework: Adding a second column to Gordo's web page11.7.1.11.7.1.1.11.7.1.1.1. 1. Add a sidebar div11.7.1.1.2. 2. Add a sidebar rule to your style sheet11.7.1.1.3. 3. Measure up the divs11.7.1.1.4. 4. Add the floats11.7.1.1.5. 5. Add padding to your sidebar11.7.1.1.6. 6. Add the Faux Columns
12. List-O-Matic
12.1. Styling lists12.1.1. Styling a simple list12.1.2. Styling a navigation list12.2. Creating horizontal lists12.3. Styling nested lists12.3.1. Styling a site map with a nested list12.4. Styling an ordered list12.5. Summary12.6. Homework: Adding the Famous Primates web site's navigation12.6.1.12.6.1.1.12.6.1.1.1. 1. Add the ul to the sidebar12.6.1.1.2. 2. Add the custom bullets to your sidebar list12.6.1.1.3. 3. Add the links to the nav ul in the sidebar12.6.1.1.4. 4. Style the ordered list in the references section
13. Harnessing the Power of External Style Sheets
13.1. The head elements that make it all happen13.2. The importance of meta tags13.2.1. It's all in a name13.2.2. Speaking a foreign language13.3. External Style Sheets13.3.1. Embedded vs. linked style sheets13.3.2. Linking to an external style sheet13.3.2.1. Media types13.3.3. Using @import13.3.4. Creating our external CSS file13.3.5. The real power of CSS13.3.6. Adding a print style sheet13.3.7. Building the print style sheet13.3.7.1. Style the body13.3.7.2. Hide unnecessary content13.3.7.3. Style the headings13.3.7.4. Style the links13.3.7.5. Click Print and check the results13.3.8. Conditional comments for Internet Explorer13.3.9. A conditional comment in action13.3.10. Adding a favicon13.4. Adding scripts13.5. Testing and troubleshooting13.5.1. Testing13.5.1.1. Web-based browser test services13.5.1.2. Building a guerilla testing suite13.5.1.3. Graded browser support13.5.2. Troubleshooting13.5.2.1. Validate, validate, validate!13.5.2.2. Leanr to spel13.5.2.3. Adopt a lurid palette13.5.2.4. Check for repetition13.5.2.5. Reduce to deduce13.5.2.6. XHTML rule reference13.6. Summary13.7. Homework: Linking to external style sheets13.7.1.13.7.1.1.13.7.1.1.1. 1. Add some <meta> tags13.7.1.1.2. 2. Create an external style sheet13.7.1.1.3. 3. Link to a print style sheet13.7.1.1.4. 4. Add a favicon13.7.1.1.5. 5. Test and troubleshoot
14. Where to from Here?
14.1. But really, where to from here?14.1.1. JavaScript libraries14.1.2. Database-driven sites14.1.3. AJAX and Rich Internet Applications14.2. www.webstandardistas.com14.2.1. The Web Standardistas' periodical14.2.2. Book reviews14.2.3. Resources14.2.4. Tools14.2.5. Badges14.2.6. Tea14.3. Tools to make your life easier14.3.1. Firefox Web Developer Add-on14.3.2. Firebug14.3.3. Tools for other browsers14.3.4. Basecamp14.3.5. What else is out there?14.4. Recommended books14.4.1. Bulletproof Web Design14.4.2. CSS Artistry14.4.3. The Zen of CSS Design14.4.4. CSS Mastery14.4.5. HTML Mastery14.4.6. Other books we recommend14.5. Recommended sites14.5.1. Organizations and publications14.5.1.1. W3C14.5.1.2. Web Standards Project14.5.1.3. A List Apart14.5.1.4. Digital Web Magazine14.5.2. Design and inspiration14.5.2.1. Design Observer14.5.2.2. The Elements of Typographic Style Applied to the Web14.5.2.3. Stylegala14.5.2.4. CSS Zen Garden14.5.3. Accessibility14.5.3.1. 456 Berea Street14.5.3.2. Dive Into Accessibility14.5.3.3. Joe Clark14.5.3.4. North Temple Journal of Design14.5.4. People14.5.4.1. Dan Cederholm14.5.4.2. John Gruber14.5.4.3. Jon Hicks14.5.4.4. Jeffrey Zeldman14.6. A fond farewell14.7. Summary14.8. Homework: You've earned the badges—now use them!14.8.1.14.8.1.1.14.8.1.1.1. 1. Get a badge

Overview

This book will teach you how to build hand-crafted web pages the Web Standardistas way: using well-structured XHTML for content and CSS for presentation.

By embracing a web standards approach, you will hold the key to creating web sites that not only look great in all modern browsers, but also are accessible to a wide variety of audiences across a range of platforms—from those browsing on everyday computers, to those accessing the Web on the latest emerging mobile devices.

Even if you're an absolute beginner in web design, this book will teach you how to build future-proof web pages the right way using easy-to-master tools which are, in most cases, free. Through 14 easy-to-follow chapters, we introduce you to the fundamentals of contemporary web design practice. Step by step we'll assemble well-structured XHTML webpages, which we'll then style using handcrafted CSS.

By the end of the book, you'll have a firm knowledge of the essentials of web design: everything you need to know to move forward in your lifelong journey as a Web Standardista.

To equip you on this noble quest, we've included enjoyable practical assignments at the end of each chapter. Embracing these challenges will not only teach you how to create great looking web sites that are the envy of your peers, but also equip you with an unrivaled knowledge of monkeys that journeyed to space and apes that starred in the movies—the real stars of this book.

On completion of this book not only will you be able to create well-crafted web sites, but you will have earned the badge of a Web Standardista, proving your worth as a good citizen of the Web.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Web Standards:Mastering HTML5, CSS3, and XML, Second Edition

Publisher Resources

ISBN: 9781430216063Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills