Head First HTML with CSS & XHTML By Elisabeth Freeman, Eric Freeman
Chapter 1. The Language of the Web:
Section 1.1. The Web killed the radio star
Section 1.2. What does the Web server do?
Section 1.3. What does the Web browser do?
Section 1.4. What you write (the HTML)...
Section 1.5. What the browser creates...
Section 1.6. there are no Dumb Questions
Section 1.7. Your big break at Starbuzz Coffee
Section 1.8. Creating the Starbuzz Web page
Section 1.9. Creating an HTML file (Mac)
Section 1.10. Creating an HTML file (Windows)
Section 1.11. there are no Dumb Questions
Section 1.12. Meanwhile, back at Starbuzz Coffee...
Section 1.13. Saving your work...
Section 1.14. Opening your Web page in a browser
Section 1.15. Taking your page for a test drive...
Section 1.16. Markup Magnets
Section 1.17. 1st Congratulations, you've just written your first HTML!
Section 1.18. Are we there yet?
Section 1.19. Another test drive...
Section 1.20. Tags dissected...
Section 1.21. there are no Dumb Questions
Section 1.22. Meet the style element
Section 1.23. Giving Starbuzz some style...
Section 1.24. Cruisin' with style...
Section 1.25. Exercise
Section 1.26. Firside Chats
Section 1.27. HTML cross
Section 1.28. Markup Magnets Solution
Section 1.29. Exercise Solutions
Chapter 2. Meeting the HT in HTML:
Section 2.1. Head First Lounge , New and Improved
Section 2.2. Creating the new lounge
Section 2.3. What did we do?
Section 2.4. What does the browser do?
Section 2.5. Understanding attributes
Section 2.6. Getting organized
Section 2.7. Organizing the lounge...
Section 2.8. Technical difficulties
Section 2.9. Planning your paths...
Section 2.10. Fixing those broken images...
Section 2.11. HTMLcross
Section 2.12. The Relativity Grand Challenge Solution
Chapter 3. Web Page Construction :
Section 3.1. From Journal to Web site, at 12mph
Section 3.2. The rough design sketch
Section 3.3. From a sketch to an outline
Section 3.4. From the outline to a Web page
Section 3.5. Test driving Tony's Web page
Section 3.6. Adding some new elements
Section 3.7. Meet the element
Section 3.8. ...and check out the test drive...
Section 3.9. Five-Minute Mystery: The Case of the Elements Separated at Birth
Section 3.10. Looooong Quotes
Section 3.12. Five-Minute Mystery Solved
Section 3.14. Fireside Chats
Section 3.15. Meanwhile, back at Tony's site...
Section 3.16. Of course, you could use the element to make a list...
Section 3.17. Constructing HTML lists in two easy steps
Section 3.18. Taking a test drive through the cities
Section 3.19. Putting one element inside another is called nesting
Section 3.20. To understand the nesting relationships, draw a picture
Section 3.21. Using nesting to make sure your tags match
Section 3.22. So what?
Section 3.23. BE the Browser
Section 3.24. Who am I?
Section 3.25. Element Soup
Section 3.26. HTMLcross
Section 3.27. BE the Browser Solution
Section 3.28. Exercise Solutions: Who am I?
Chapter 4. A Trip to Webville:
Section 4.1. Getting Starbuzz (or yourself) onto the Web
Section 4.2. Finding a hosting company
Section 4.3. HELLO, my domain name is...
Section 4.4. How can you get a domain name?
Section 4.5. Moving in
Section 4.6. Getting your files to the root folder
Section 4.7. As much FTP as you can possibly fit in two pages
Section 4.8. Back to business...
Section 4.9. Mainstreet, URL
Section 4.10. What is the HTTP Protocol?
Section 4.11. What's an Absolute Path?
Section 4.12. Behind the Scenes: How default pages work
Section 4.13. How do we link to other Web sites?
Section 4.14. Linking to Caffeine Buzz
Section 4.15. And now for the test drive...
Section 4.16. Five-Minute Mystery
Section 4.17. Web page fit and finish
Section 4.18. The title test drive...
Section 4.19. Linking into a page
Section 4.20. Using the element to create a destination
Section 4.21. How to link to destination anchors
Section 4.22. Now that you've got your hands on their HTML...
Section 4.23. Reworking the link in index html
Section 4.24. Five-Minute Mystery Solved
Section 4.25. Linking to a new window
Section 4.26. Opening a new window using target
Section 4.27. The Target Attribute Exposed
Section 4.28. HTMLcross
Chapter 5. Meeting the Media:
Section 5.1. How the browser works with images
Section 5.2. How images work
Section 5.3. : it's not just relative links anymore
Section 5.4. Always provide an alternative
Section 5.5. Sizing up your images
Section 5.6. there are no Dumb Questions
Section 5.7. Creating the ultimate fan site: myPod
Section 5.8. Check out myPod's index html file
Section 5.9. Whoa! The image is way too large
Section 5.10. Resize the image to fit in the browser
Section 5.11. Open the image
Section 5.12. Resizing the image
Section 5.13. Resizing the image, continued...
Section 5.14. You've resized now save
Section 5.15. Save the image
Section 5.16. Fixing up the myPod HTML
Section 5.17. And now for the test drive...
Section 5.18. More photos for myPod
Section 5.19. Taking myPod for another test drive
Section 5.20. Reworking the site to use thumbnails
Section 5.21. Create the thumbnails
Section 5.22. Rework the HTML to use the thumbnails
Section 5.23. Take myPod for another test drive
Section 5.24. Turning the thumbnails into links
Section 5.25. Create individual pages for the photos
Section 5.26. So, how do I make links out of images?
Section 5.27. Add the image links to index html
Section 5.28. Open the myPod logo
Section 5.29. What format should we use?
Section 5.30. To be transparent, or not to be transparent? That is the question...
Section 5.31. Save the transparent GIF
Section 5.32. Wait, what is the color of the Web page background?
Section 5.33. Set the matte color
Section 5.34. Set the matte color, continued
Section 5.35. Check out the logo with a matte
Section 5.36. Save the logo
Section 5.37. Add the logo to the myPod Web page
Section 5.38. And now for the final test drive
Section 5.39. HTMLcross
Chapter 6. Serious HTML :
Section 6.1. A Brief History of HTML
Section 6.2. We can't have your pages putting the browser into Quirks Mode!
Section 6.3. Adding the document type definition
Section 6.4. The DOCTYPE test drive
Section 6.5. Meet the W3C validator
Section 6.6. Validating the Head First Lounge
Section 6.7. Houston, we have a problem...
Section 6.8. Fixing that error
Section 6.9. We're not there yet...
Section 6.10. Adding a tag to specify the content type
Section 6.11. Making the validator (and more than a few browsers) happy with a content tag...
Section 6.12. Third time's the charm?
Section 6.13. Changing the DOCTYPE to strict
Section 6.14. Do we have validation ?
Section 6.15. Fixing the nesting problem
Section 6.16. One more chance to be strict...
Section 6.17. Strict HTML 4.01, grab the handbook
Section 6.18. HTMLcross
Section 6.19. Solution
Chapter 7. Putting an X into HTML:
Section 7.1. What is XML ?
Section 7.2. What does this have to do with HTML?
Section 7.3. So why would you want to use XHTML?
Section 7.4. You're much closer to using XHTML than you might think
Section 7.5. Going from strict HTML to XHTML 1.0 in three steps
Section 7.6. there are no Dumb Questions
Section 7.7. Validation: it's not just for HTML
Section 7.8. Congratulations, you've just written your first XHTML!
Section 7.9. Fireside Chats
Section 7.10. HTML or XHTML? The choice is yours...
Section 7.11. Micro XHTMLcross
Section 7.12. Micro XHTMLcross Solution
Chapter 8. Adding a Little Style:
Section 8.1. You're not in Kansas anymore
Section 8.2. Overheard on Webville's Trading Space
Section 8.3. Using CSS with XHTML
Section 8.4. Getting CSS into your XHTML
Section 8.5. Adding style to the lounge
Section 8.6. Cruising with style: the test drive
Section 8.7. Style the heading
Section 8.8. Let's put a line under the welcome message too
Section 8.9. We have the technology: specifying a second rule , just for the
Section 8.10. So, how do selections really work?
Section 8.11. Seeing selectors visually
Section 8.12. Getting the Lounge style into the elixirs and directions pages
Section 8.13. Creating the lounge css file
Section 8.14. Linking from lounge html to the external style
Section 8.15. Linking from elixir html and directions.html to the external style sheet
Section 8.16. Test driving the entire lounge...
Section 8.17. It's time to talk about your inheritance ...
Section 8.18. What if we move the font up the family tree?
Section 8.19. Test drive your new CSS
Section 8.20. Overriding inheritance
Section 8.21. Test drive
Section 8.22. Adding a class to elixir.html
Section 8.23. Creating a selector for the class
Section 8.24. A greentea test drive
Section 8.25. Taking classes further...
Section 8.26. The world's smallest & fastest guide to how styles are applied
Section 8.27. Who gets the inheritance?
Section 8.28. Making sure the Lounge CSS validates
Chapter 9. Expanding your Vocabulary :
Section 9.1. Text and fonts from 30,000 feet
Section 9.2. What is a font family anyway?
Section 9.3. Specifying font families using CSS
Section 9.4. How font-family specifications work
Section 9.5. Dusting off Tony's Journal
Section 9.6. Getting Tony a new font-family
Section 9.7. Test driving Tony's new fonts
Section 9.8. there are no Dumb Questions
Section 9.9. How do I deal with everyone having different fonts?
Section 9.10. Adjusting font sizes
Section 9.11. So, how should I specify my font sizes?
Section 9.12. Let's make these changes to the font sizes in Tony's Web page
Section 9.13. Test driving the font sizes
Section 9.14. there are no Dumb Questions
Section 9.15. Changing a font's weight
Section 9.16. Sharpen your pencil
Section 9.17. Test drive the normal weight headings
Section 9.18. Adding style to your fonts
Section 9.19. Styling Tony's quotes with a little italic
Section 9.20. How do Web colors work?
Section 9.21. How do I specify Web colors? Let me count the ways...
Section 9.22. The two minute guide to hex codes
Section 9.23. How to find Web colors
Section 9.24. Using an online color chart
Section 9.25. there are no Dumb Questions
Section 9.26. Back to Tony's page... We're going to make the headings orange, and add an underline too
Section 9.27. Test drive Tony's orange headings
Section 9.28. Everything you ever wanted to know about text-decorations in less than one page
Section 9.29. there are no Dumb Questions
Section 9.30. Removing the underline...
Section 9.31. XHTMLcross
Section 9.32. Markup Magnets Solutions
Chapter 10. Getting Intimate with Elements :
Section 10.1. Getting Intimate with Elements
Section 10.2. The lounge gets an upgrade
Section 10.3. The new and improved, ultra-stylish lounge
Section 10.4. Setting up the new lounge
Section 10.5. Starting with a few simple upgrades
Section 10.6. A very quick test drive
Section 10.7. One more adjustment
Section 10.8. Checking out the new line height
Section 10.9. Getting ready for some major renovations
Section 10.10. A closer look at the box model
Section 10.11. What you can do to boxes
Section 10.12. Meanwhile back at the lounge...
Section 10.13. Creating the guarantee style
Section 10.14. A test drive of the paragraph border
Section 10.15. Padding, border, and margins for the guarantee
Section 10.16. Adding some padding
Section 10.17. A test drive with some padding
Section 10.18. Now let's add some margin
Section 10.19. A test drive with the margin
Section 10.20. Adding a background image
Section 10.21. Test driving the background image
Section 10.22. Fixing the background image
Section 10.23. Another test drive of the background image
Section 10.24. How do you add padding only on the left?
Section 10.25. Are we there yet?
Section 10.26. How do you increase the margin just on the right?
Section 10.27. A two-minute guide to borders
Section 10.28. Border fit and finish
Section 10.29. Congratulations!
Section 10.30. The Class Exposed
Section 10.31. The id attribute
Section 10.32. But how do I use id in CSS?
Section 10.33. Using an id in the lounge
Section 10.34. Remixing style sheets
Section 10.35. Using multiple style sheets
Section 10.36. Style sheets-they're not just for desktop browsers anymore...
Section 10.37. there are no Dumb Questions
Section 10.38. XHTML cross
Section 10.39. XHTML cross Solution
Chapter 11. Advanced Web Construction :
Section 11.1. A close look at the elixirs XHTML
Section 11.2. Let's explore how we can divide a page into logical sections
Section 11.3. There are no Dumb Questions
Section 11.4. Meanwhile, back at the lounge...
Section 11.5. Taking the for a test drive
Section 11.6. Adding a border
Section 11.7. An over-the-border test drive
Section 11.8. Adding some real style to the elixirs section
Section 11.9. The game plan
Section 11.10. Working on the elixir width
Section 11.11. Test driving the width
Section 11.12. There are no Dumb Questions
Section 11.13. Adding the basic styles to the elixirs
Section 11.14. Test driving the new styles
Section 11.15. We're almost there...
Section 11.16. What are we trying to do?
Section 11.17. What we need is a way to select descendants
Section 11.18. There are no Dumb Questions
Section 11.19. Changing the color of the elixir headings
Section 11.20. A quick test drive...
Section 11.21. Fixing the line height
Section 11.22. Look what you've accomplished...
Section 11.23. It's time to take a little shortcut
Section 11.24. But there's more...
Section 11.25. And even more shorthands
Section 11.26. there are no Dumb Questions
Section 11.27. Adding s in three easy steps
Section 11.28. Steps one and two: adding the s
Section 11.29. Step three: styling the s
Section 11.30. Test driving the spans
Section 11.31. there are no Dumb Questions
Section 11.32. The element and its multiple personalities
Section 11.33. How can you style elements based on their state?
Section 11.34. there are no Dumb Questions
Section 11.35. Putting those pseudo-classes to work
Section 11.36. Test drive the links
Section 11.37. Isn't it about time we talk about the cascade ?
Section 11.38. The cascade
Section 11.39. Welcome to the What's my specificity game
Section 11.40. there are no Dumb Questions
Section 11.41. Putting it all together
Section 11.42. there are no Dumb Questions
Chapter 12. Arranging Elements :
Section 12.1. Did you do the Super Brain Power?
Section 12.2. Use the flow , Luke
Section 12.3. BE the Browser
Section 12.4. What about inline elements ?
Section 12.5. How it all works together
Section 12.6. One more thing you should know about flow and boxes
Section 12.7. How to float an element
Section 12.8. Behind the scenes at the lounge
Section 12.9. The new Starbuzz
Section 12.10. A look at the markup
Section 12.11. And a look at the style
Section 12.12. Let's take Starbuzz to the next level
Section 12.13. Move the sidebar just below the header
Section 12.14. Set the width of the sidebar and float it
Section 12.15. Test driving Starbuzz
Section 12.16. Fixing the two-column problem
Section 12.17. Setting the margin on the main section
Section 12.18. Test drive
Section 12.19. Uh oh, we have another problem
Section 12.20. Back to clearing up the overlap problem
Section 12.21. Test drive
Section 12.22. Righty tighty, lefty loosey
Section 12.23. A quick test drive
Chapter 13. Getting Tabular:
Section 13.1. How do you make tables with XHTML?
Section 13.2. How to create a table using XHTML
Section 13.3. What the browser creates
Section 13.4. Tables dissected
Section 13.5. there are no Dumb Questions
Section 13.6. BE the Browser
Section 13.7. Adding a caption and a summary
Chapter 14. Getting Interactive :
Section 14.1. How forms work
Section 14.2. How forms work in the browser
Section 14.3. What you write in XHTML
Section 14.4. What the browser creates
Section 14.5. How the form element works
Section 14.6. What can go in a form?
Section 14.7. What can go in a form? (Part II)
Section 14.8. Markup Magnets
Section 14.9. Getting ready to build the Bean Machine form
Section 14.10. Figuring out what goes in the form element
Section 14.11. Adding the form element
Section 14.12. How form element names work.Download