Head First HTML with CSS & XHTML

Head First HTML with CSS & XHTML

by Elisabeth Robson, Eric Freeman
Released December 2005
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596101978

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon
Start your free trial

Book description

Tired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML with CSS & XHTML and really learned HTML. You want to learn HTML so you can finally create those web pages you've always wanted, so you can communicate more effectively with friends, family, fans, and fanatic customers. You also want to do it right so you can actually maintain and expand your Web pages over time, and so your web pages work in all the browsers and mobile devices out there. Oh, and if you've never heard of CSS, that's okay - we won't tell anyone you're still partying like it's 1999 - but if you're going to create Web pages in the 21st century then you'll want to know and understand CSS.

Learn the real secrets of creating Web pages, and why everything your boss told you about HTML tables is probably wrong (and what to do instead). Most importantly, hold your own with your co-worker (and impress cocktail party guests) when he casually mentions how his HTML is now strict, and his CSS is in an external style sheet.

With Head First HTML with CSS & XHTML, you'll avoid the embarrassment of thinking web-safe colors still matter, and the foolishness of slipping a font tag into your pages. Best of all, you'll learn HTML and CSS in a way that won't put you to sleep. If you've read a Head First book, you know what to expect: a visually-rich format designed for the way your brain works. Using the latest research in neurobiology, cognitive science, and learning theory, this book will load HTML, CSS, and XHTML into your brain in a way that sticks.

So what are you waiting for? Leave those other dusty books behind and come join us in Webville. Your tour is about to begin.

"Elegant design is at the core of every chapter here, each concept conveyed with equal doses of pragmatism and wit." --Ken Goldstein, Executive Vice President, Disney Online

"This book is a thoroughly modern introduction to forward-looking practices in web page markup and presentation." --Danny Goodman, author of Dynamic HTML: The Definitive Guide

"What used to be a long trial and error learning process has now been reduced neatly into an engaging paperback." --Mike Davidson, CEO, Newsvine, Inc.

"I love Head First HTML with CSS & XHTML--it teaches you everything you need to learn in a 'fun coated' format!" --Sally Applin, UI Designer and Artist

"I haven't had as much fun reading a book (other than Harry Potter) in years. And your book finally helped me break out of my hapless so-last-century way of creating web pages." --Professor David M. Arnow, Department of Computer and Information Science, Brooklyn College

"If you've ever had a family member who wanted you to design a website for them, buy them Head First HTML with CSS and XHTML. If you've ever asked a family member to design you a web site, buy this book. If you've ever bought an HTML book and ended up using it to level your desk, or for kindling on a cold winter day, buy this book. This is the book you've been waiting for. This is the learning system you've been waiting for." --Warren Kelly, Blogcritics.org

Publisher resources

View/Submit Errata

Table of contents

  1. Head First HTML with CSS & XHTML
  2. Dedication
  3. A Note Regarding Supplemental Files
  4. Praise for Head First HTML with CSS & XHTML
  5. More Praise for Head First HTML with CSS & XHTML
  6. Previous Praise for books by the authors
  7. Authors of Head First HTML with CSS & XHTML
  8. How to use This Book: Intro
    1. Who is this book for?
      1. Who should probably back away from this book?
    2. We know what you’re thinking
    3. And we know what your brain is thinking
    4. Metacognition: thinking about thinking
    5. Here’s what WE did
    6. Here’s what YOU can do to bend your brain into submission
    7. Read Me
    8. Tech Reviewers
      1. Acknowledgments
  9. 1. Getting to Know HTML: The Language of the Web
    1. The Web Video killed the radio star
    2. What does the Web server do?
    3. What does the Web browser do?
    4. What you write (the HTML)...
    5. What the browser creates...
    6. Your big break at Starbuzz Coffee
    7. Creating the Starbuzz Web page
    8. Creating an HTML file (Mac)
    9. Creating an HTML file (Windows)
    10. Meanwhile, back at Starbuzz Coffee...
    11. Saving your work...
    12. Opening your Web page in a browser
    13. Taking your page for a test drive...
    14. Are we there yet?
    15. Another test drive...
    16. Tags dissected...
    17. Meet the style element
    18. Giving Starbuzz some style...
    19. Cruisin’ with style...
  10. 2. Going Further, with Hypertext: Meeting the ‘HT’ in HTML
    1. Head First Lounge, New and Improved
    2. Creating the new lounge
    3. What did we do?
    4. What does the browser do?
    5. Understanding attributes
      1. What if <car> was an element?
    6. Getting organized
    7. Organizing the lounge...
    8. Technical difficulties
    9. Planning your paths...
    10. Fixing those broken images...
      1. Finding the path from “lounge.html” to “drinks.gif”
      2. Finding the path from “elixir.html” to “red.jpg”
  11. 3. Building Blocks: Web Page Construction
    1. From Journal to Web site, at 12mph
    2. The rough design sketch
    3. From a sketch to an outline
    4. From the outline to a Web page
    5. Test driving Tony’s Web page
    6. Adding some new elements
    7. Meet the <q> element
    8. ...and check out the test drive...
    9. Looooong Quotes
    10. Adding a <blockquote>
    11. The real truth behind the <q> and <blockquote> mystery
    12. Meanwhile, back at Tony’s site...
    13. Of course, you could use the <p> element to make a list...
      1. But there are lots of reasons not to
    14. Constructing HTML lists in two easy steps
    15. Taking a test drive through the cities
    16. Putting one element inside another is called “nesting”
    17. To understand the nesting relationships, draw a picture
    18. Using nesting to make sure your tags match
      1. So what?
  12. 4. Getting Connected: A Trip to Webville
    1. Getting Starbuzz (or yourself) onto the Web
    2. Finding a hosting company
    3. HELLO, my domain name is...
    4. How can you get a domain name?
    5. Moving in
    6. Getting your files to the root folder
    7. As much FTP as you can possibly fit in two pages
    8. Back to business...
    9. Mainstreet, URL
    10. What is the HTTP Protocol?
    11. What’s an Absolute Path?
    12. How default pages work
    13. How do we link to other Web sites?
    14. Linking to Caffeine Buzz
    15. And now for the test drive...
    16. Web page fit and finish
      1. Improving accessibility by adding a title to your links
    17. The title test drive...
    18. Linking into a page
    19. Using the <a> element to create a destination
    20. How to link to destination anchors
      1. Finding the destination anchor
      2. Now that you’ve got your hands on their HTML...
      3. Reworking the link in “index.html”
    21. Linking to a new window
    22. Opening a new window using target
  13. 5. Adding Images to Your Pages: Meeting the Media
    1. How the browser works with images
    2. How images work
      1. What’s the difference between JPEG and GIF?
    3. <img>: it’s not just relative links anymore
    4. Always provide an alternative
    5. Sizing up your images
    6. Creating the ultimate fan site: myPod
    7. Check out myPod’s “index.html” file
    8. Whoa! The image is way too large
    9. Resize the image to fit in the browser
      1. Here’s what you’re going to do
    10. Open the image
    11. Resizing the image
    12. Resizing the image, continued...
    13. You’ve resized - now save
    14. Save the image
    15. Fixing up the myPod HTML
    16. And now for the test drive...
    17. More photos for myPod
    18. Taking myPod for another test drive
    19. Reworking the site to use thumbnails
      1. Create a new directory for thumbnails
    20. Create the thumbnails
    21. Rework the HTML to use the thumbnails
    22. Take myPod for another test drive
    23. Turning the thumbnails into links
    24. Create individual pages for the photos
    25. So, how do I make links out of images?
    26. Add the image links to “index.html”
    27. Open the myPod logo
      1. A closer look...
    28. What format should we use?
    29. To be transparent, or not to be transparent? That is the question...
    30. Save the transparent GIF
    31. Wait, what is the color of the Web page background?
    32. Set the matte color
    33. Set the matte color, continued
    34. Check out the logo with a matte
    35. Save the logo
    36. Add the logo to the myPod Web page
    37. And now for the final test drive
  14. 6. Standards, Compliance, and all that Jazz: Serious HTML
    1. A Brief History of HTML
    2. We can’t have your pages putting the browser into Quirks Mode!
    3. Adding the document type definition
    4. The DOCTYPE test drive
    5. Meet the W3C validator
    6. Validating the Head First Lounge
    7. Houston, we have a problem...
    8. Fixing that error
    9. We’re not there yet...
    10. Adding a <meta> tag to specify the content type
    11. Making the validator (and more than a few browsers) happy with a <meta> content tag...
    12. Third time’s the charm?
    13. Changing the DOCTYPE to strict
    14. Do we have validation?
    15. Fixing the nesting problem
    16. One more chance to be strict...
    17. Strict HTML 4.01, grab the handbook
  15. 7. Moving to XHTML: Putting an ‘X’ into HTML
    1. What is XML?
    2. What does this have to do with HTML?
    3. So why would you want to use XHTML?
    4. You’re much closer to using XHTML than you might think
    5. Going from strict HTML to XHTML 1.0 in three steps
    6. Validation: it’s not just for HTML
    7. HTML or XHTML? The choice is yours...
  16. 8. Getting Started with CSS: Adding a Little Style
    1. You’re not in Kansas anymore
    2. Overheard on Webville’s “Trading Spaces”
    3. Using CSS with XHTML
    4. Wanna add more style?
    5. Getting CSS into your XHTML
    6. Adding style to the lounge
    7. Cruising with style: the test drive
    8. Style the heading
      1. Test drive...
    9. Let’s put a line under the welcome message too
    10. We have the technology: specifying a second rule, just for the <h1>
      1. Another test drive...
    11. So, how do selections really work?
    12. Seeing selectors visually
    13. Getting the Lounge style into the elixirs and directions pages
    14. Creating the “lounge.css” file
    15. Linking from “lounge.html” to the external style sheet
    16. Linking from “elixir.html” and “directions.html” to the external style sheet
    17. Test driving the entire lounge...
    18. It’s time to talk about your inheritance...
      1. The elements inside the <p> element inherit the font-family style from <p>
    19. What if we move the font up the family tree?
      1. What are you waiting for... give it a try
    20. Test drive your new CSS
    21. Overriding inheritance
    22. Test drive
    23. Adding a class to “elixir.html”
    24. Creating a selector for the class
    25. A greentea test drive
    26. Taking classes further...
    27. The world’s smallest & fastest guide to how styles are applied
      1. First, do any selectors select your element?
      2. What about inheritance?
      3. Struck out again? Then use the default
      4. What if multiple selectors select an element?
      5. And if we still don’t have a clear winner?
    28. Making sure the Lounge CSS validates
  17. 9. Styling with Fonts and Colors: Expanding your Vocabulary
    1. Text and fonts from 30,000 feet
    2. What is a font family anyway?
    3. Specifying font families using CSS
    4. How font-family specifications work
    5. Dusting off Tony’s Journal
    6. Getting Tony a new font-family
    7. Test driving Tony’s new fonts
    8. How do I deal with everyone having different fonts?
    9. Adjusting font sizes
    10. So, how should I specify my font sizes?
    11. Let’s make these changes to the font sizes in Tony’s Web page
    12. Test driving the font sizes
    13. Changing a font’s weight
    14. Test drive the normal weight headings
    15. Adding style to your fonts
    16. Styling Tony’s quotes with a little italic
    17. How do Web colors work?
    18. How do I specify Web colors? Let me count the ways...
      1. Specify color by name
      2. Specify color in red, green and blue values
      3. Specify color using hex codes
    19. The two minute guide to hex codes
    20. How to find Web colors
      1. Using an online color chart
    21. Back to Tony’s page... We’re going to make the headings orange, and add an underline too
    22. Test drive Tony’s orange headings
    23. Everything you ever wanted to know about text-decorations in less than one page
    24. Removing the underline...
  18. 10. The Box Model: Getting Intimate with Elements
    1. The lounge gets an upgrade
    2. The new and improved, ultra-stylish lounge
    3. Setting up the new lounge
    4. Starting with a few simple upgrades
    5. A very quick test drive
    6. One more adjustment
    7. Checking out the new line height
    8. Getting ready for some major renovations
    9. A closer look at the box model
    10. What you can do to boxes
    11. Meanwhile back at the lounge...
    12. Creating the guarantee style
    13. A test drive of the paragraph border
    14. Padding, border, and margins for the guarantee
    15. Adding some padding
    16. A test drive with some padding
    17. Now let’s add some margin
    18. A test drive with the margin
    19. Adding a background image
    20. Test driving the background image
    21. Fixing the background image
    22. Another test drive of the background image
    23. How do you add padding only on the left?
    24. Are we there yet?
    25. How do you increase the margin just on the right?
    26. A two-minute guide to borders
    27. Border fit and finish
    28. Congratulations!
      1. Welcome back, and good timing. We’re just about to listen in on an interview with an XHTML class...
    29. The id attribute
    30. But how do I use id in CSS?
    31. Using an id in the lounge
      1. Step One: change the class attribute to an id in your “lounge.html”
      2. Step Two: change the “.guarantee” class selector in “lounge.css” to an id selector
      3. Step Three: save your changes and reload the page
    32. Remixing style sheets
    33. Using multiple style sheets
    34. Style sheets - they’re not just for desktop browsers anymore...
  19. 11. Divs and Spans: Advanced Web Construction
    1. A close look at the elixirs XHTML
    2. Let’s explore how we can divide a page into logical sections
      1. Identifying your logical sections
      2. Using <div>s to mark sections
      3. Labelling the <div>s
      4. Adding some style
      5. Exposing even more structure
      6. Adding structure on structure
    3. Meanwhile, back at the lounge...
    4. Taking the <div> for a test drive
    5. Adding a border
    6. An over-the-border test drive
    7. Adding some real style to the elixirs section
    8. The game plan
    9. Working on the elixir width
    10. Test driving the width
    11. Adding the basic styles to the elixirs
    12. Test driving the new styles
    13. We’re almost there...
    14. What are we trying to do?
      1. What we have now
      2. What we want
    15. What we need is a way to select descendants
    16. Changing the color of the elixir headings
    17. A quick test drive...
    18. Fixing the line height
    19. Look what you’ve accomplished...
    20. It’s time to take a little shortcut
    21. But there’s more...
      1. ...and don’t forget the shorthand for backgrounds
    22. And even more shorthands
    23. Adding <span>s in three easy steps
    24. Steps one and two: adding the <span>s
    25. Step three: styling the <span>s
    26. Test driving the spans
    27. The <a> element and its multiple personalities
    28. How can you style elements based on their state?
    29. Putting those pseudo-classes to work
    30. Test drive the links
    31. Isn’t it about time we talk about the “cascade”?
    32. The cascade
    33. Welcome to the “What’s my specificity game”
    34. Putting it all together
  20. 12. Layout and Positioning: Arranging Elements
    1. Did you do the Super Brain Power?
    2. Use the flow, Luke
    3. What about inline elements?
    4. How it all works together
    5. One more thing you should know about flow and boxes
      1. When the browser is placing two inline elements next to each other...
      2. When the browser is placing two block elements on top of each other...
    6. How to float an element
      1. First, give it an identity
      2. Now give it a width
      3. Now float it
    7. Behind the scenes at the lounge
    8. The new Starbuzz
    9. A look at the markup
    10. And a look at the style
    11. Let’s take Starbuzz to the next level
    12. Move the sidebar just below the header
    13. Set the width of the sidebar and float it
    14. Test driving Starbuzz
    15. Fixing the two-column problem
    16. Setting the margin on the main section
    17. Test drive
    18. Uh oh, we have another problem
    19. Back to clearing up the overlap problem
    20. Test drive
    21. Righty tighty, lefty loosey
      1. Step One: start with the sidebar
      2. Step Two: take care of the main content
      3. Step Three: take care of the footer
    22. A quick test drive
    23. Liquid and Frozen Designs
      1. XHTML Changes
      2. CSS Changes
    24. A frozen test drive
    25. What’s the state between liquid and frozen? Jello, of course!
    26. Test driving with a tank of jello
    27. How absolute positioning works
      1. What the CSS does
    28. Another example of absolute positioning
      1. Who’s on top?
    29. Using absolute positioning
    30. Changing the Starbuzz CSS
    31. Now we just need to rework the main <div>
    32. Time for the absolute test drive
    33. What can we do? Or, can’t you just tell me how to do a two-column layout that doesn’t break?
      1. The Floating Layout
      2. The Jello Layout
      3. The Absolute Layout
    34. One tradeoff you can make to fix the footer
    35. Positioning the award
    36. A small glitch
    37. One more thing you should know about absolute positioning
    38. How does fixed positioning work?
    39. Putting the coupon on the page
    40. Putting the coupon on the page
    41. Using a negative left property value
    42. A rather positive, negative test drive
    43. Getting relative
    44. The test drive
    45. To three-columns and beyond...
  21. 13. Tables and More Lists: Getting Tabular
    1. How do you make tables with XHTML?
    2. How to create a table using XHTML
    3. What the browser creates
    4. Tables dissected
    5. Adding a caption and a summary
    6. Test drive... and start thinking about style
    7. Before we start styling, let’s get the table into Tony’s page
    8. Now let’s style the table
    9. Taking the styled tables for a test drive
    10. Getting those borders to collaspe
    11. How about some color?
    12. How about some color in the table rows?
    13. Did we mention that Tony made an interesting discovery in Truth or Consequences, New Mexico?
    14. Another look at Tony’s table
    15. How to tell cells to span more than one row
    16. The new and improved table
    17. Trouble in paradise?
    18. Test driving the nested table
    19. Overriding the CSS for the nested table headings
    20. Giving Tony’s site the final polish
    21. Giving the list some style
    22. What if you want a custom marker?
      1. And, the final test drive...
  22. 14. XHTML Forms: Getting Interactive
    1. How forms work
    2. How forms work in the browser
    3. What you write in XHTML
    4. What the browser creates
    5. How the form element works
    6. What can go in a form?
    7. What can go in a form? (Part II)
    8. Getting ready to build the Bean Machine form
    9. Figuring out what goes in the form element
    10. Adding the form element
    11. How form element names work
    12. Back to getting those <input> elements into your XHTML
    13. A form-al test drive
    14. Adding some more input elements to your form
    15. Adding the <select> element
    16. Test driving the <select> element
    17. Give the customer a choice of whole or ground beans
    18. Punching the radio buttons
    19. Completing the form
    20. Adding the checkboxes and text area
    21. The final test drive
    22. Watching GET in action
    23. To Table or Not to Table? That’s the question...
      1. Let’s start with the layout...
    24. Getting the form elements into a table
    25. Test driving a very tabular form
    26. Styling the form and the table with CSS
    27. The final test drive
    28. What more could possibly go into a form?
    29. Congratulations! You made it to the end
  23. A. Leftovers: The Top Ten Topics (we didn’t cover)
    1. #1 More Selectors
      1. Pseudo-elements
      2. Attribute selectors
      3. Selecting by Siblings
      4. Combining Selectors
    2. #2 Frames
    3. #3 Multimedia & Flash
    4. #4 Tools for Creating Web Pages
      1. Some tools to consider
    5. #5 Client-side Scripting
      1. What else can scripting do?
    6. #6 Server-side Scripting
    7. #7 Tuning for Search Engines
      1. Improving your rankings
      2. How do I keep my site from being listed?
    8. #8 More about Style Sheets for Printing
    9. #9 Pages for Mobile Devices
    10. #10 Blogs
  24. Index
  25. About the Authors
  26. Copyright

Product information

  • Title: Head First HTML with CSS & XHTML
  • Author(s): Elisabeth Robson, Eric Freeman
  • Release date: December 2005
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596101978