Head first HTML and CSS

Head first HTML and CSS

Elisabeth Robson

Book - 2012

Saved in:
Place a Hold Save to List Email this

Online Access

Full code and resources download

Subjects
HTML (Document markup language)
Web sites > Authoring programs.
Cascading style sheets.
Web sites > Design.
Published
Beijing ; Sebastopol, CA : O'Reilly c2012.
Language
English
Main Author
Elisabeth Robson (-)
Other Authors
Eric Freeman, 1965- (-)
Edition
2nd ed
Online Access
Full code and resources download
Item Description
Previously published as: Head first HTML with CSS & XHTML / Elisabeth Freeman, Eric Freeman. 2005.
"A brain-friendly guide"--Cover.
Includes index.
Physical Description
xxxvii, 723 p. : ill. (chiefly col.) ; 24 cm
ISBN
9780596159900
  • Praise for Head First HTML and CSS
  • More Praise for Head First HTML and CSS
  • Praise for other books by Eric Freeman and Elisabeth Robson
  • Authors of Head First HTML and CSS
  • How to Use This Book: Intro
  • Who is this book for?
  • We know what you're thinking
  • Metacognition: thinking about thinking
  • Here's what WE did
  • Here's what YOU can do to bend your brain into submission
  • Read me
  • Tech reviewers (first edition)
  • Acknowledgments (first edition)The large number of acknowledgments is because we're testing the theory that everyone mentioned in a book acknowledgment will buy at least one copy, probably more, what with relatives and everything. If you'd like to be in the acknowledgment of our next book, and you have a large family, write to us.
  • Tech reviewers (second edition)
  • Acknowledgments (second edition)
  • Safari® Books Online
  • Chapter 1. Getting to Know HTML: The Language of the Web
  • 1.1. The Web Video killed the radio star
  • 1.2. What does the web server do?
  • 1.3. What does the web browser do?
  • 1.4. What you write (the HTML)
  • 1.5. What the browser creates
  • 1.6. Your big break at Starbuzz Coffee
  • 1.7. Creating the Starbuzz web page
  • 1.8. Creating an HTML file (Mac)
  • 1.9. Creating an HTML file (Windows)
  • 1.10. Meanwhile, back at Starbuzz Coffee...
  • 1.11. Saving your work
  • 1.12. Opening your web page in a browser
  • 1.13. Take your page for a test drive
  • 1.14. Are we there yet?
  • 1.15. Another test drive
  • 1.16. Tags dissected
  • 1.17. Meet the style element
  • 1.18. Giving Starbuzz some style...
  • 1.19. Cruisin' with style...
  • Chapter 2. Going Further with Hypertext: Meeting the "HT" in HTML
  • 2.1. Head First Lounge, new and improved
  • 2.2. Creating the new lounge
  • 2.3. What did we do?
  • 2.4. Understanding attributes
  • 2.5. Getting organized
  • 2.6. Organizing the lounge...
  • 2.7. Technical difficulties
  • 2.8. Planning your paths...
  • 2.9. Fixing those broken images...
  • Chapter 3. Building Blocks: Web Page Construction
  • 3.1. From journal to website, at 12 mph
  • 3.2. The rough design sketch
  • 3.3. From a sketch to an outline
  • 3.4. From the outline to a web page
  • 3.5. Test driving Tony's web page
  • 3.6. Adding some new elements
  • 3.7. Meet the element
  • 3.8. Looooong quotes
  • 3.9. Adding a
  • 3.10. The real truth behind the and mystery
  • 3.11. Meanwhile, back at Tony's site...
  • 3.12. Of course, you could use the element to make a list...
  • 3.13. Constructing HTML lists in two easy steps
  • 3.14. Taking a test drive through the cities
  • 3.15. Putting one element inside another is called "nesting"
  • 3.16. To understand the nesting relationships, draw a picture
  • 3.17. Using nesting to make sure your tags match
  • Chapter 4. Getting Connected: A Trip to Webville
  • 4.1. Getting Starbuzz (or yourself) onto the Web
  • 4.2. Finding a hosting company
  • 4.3. HELLO, my domain name is...
  • 4.4. How can you get a domain name?
  • 4.5. Moving in
  • 4.6. Getting your files to the root folder
  • 4.7. As much FTP as you can possibly fit in two pages
  • 4.8. Back to business...
  • 4.9. Mainstreet, URL
  • 4.10. What is HTTP?
  • 4.11. What's an absolute path?
  • 4.12. How default pages work
  • 4.13. How do we link to other websites?
  • 4.14. Linking to Caffeine Buzz
  • 4.15. And now for the test drive...
  • 4.16. Web page fit and finish
  • 4.17. The title test drive...
  • 4.18. Linking into a page
  • 4.19. Using the id attribute to create a destination for
  • 4.20. How to link to elements with ids
  • 4.21. Linking to a new window
  • 4.22. Opening a new window using target
  • Chapter 5. Adding Images to your Pages: Meeting the Media
  • 5.1. How the browser works with images
  • 5.2. How images work
  • 5.3. : it's not just relative links anymore
  • 5.4. Always provide an alternative
  • 5.5. Sizing up your images
  • 5.6. Creating the ultimate fan site: myPod
  • 5.7. Check out myPod's "index.html" file
  • 5.8. Whoa! The image is way too large
  • 5.9. Resize the image to fit in the browser
  • 5.10. Open the image
  • 5.11. Resizing the image
  • 5.12. You've resized-now save
  • 5.13. Save the image
  • 5.14. Fixing up the myPod HTML
  • 5.15. And now for the test drive...
  • 5.16. More photos for myPod
  • 5.17. Taking myPod for another test drive
  • 5.18. Reworking the site to use thumbnails
  • 5.19. Create the thumbnails
  • 5.20. Rework the HTML to use the thumbnails
  • 5.21. Take myPod for another test drive
  • 5.22. Turning the thumbnails into links
  • 5.23. Create individual pages for the photos
  • 5.24. So, how do I make links out of images?
  • 5.25. Add the image links to "index.html"
  • 5.26. Open the myPod logo
  • 5.27. What format should we use?
  • 5.28. To be transparent, or not to be transparent? That is the question...
  • 5.29. Save the transparent PNG
  • 5.30. Wait, what is the color of the web page background?
  • 5.31. Set the matte color
  • 5.32. Check out the logo with a matte
  • 5.33. Save the logo
  • 5.34. Add the logo to the myPod web page
  • 5.35. And now for the final test drive
  • Chapter 6. Standards and All that Jazz: Getting Serious with HTML
  • 6.1. A Brief History of HTML
  • 6.2. The new, and improved, HTML5 doctype
  • 6.3. HTML, the new "living standard"
  • 6.4. Adding the document type definition
  • 6.5. The doctype test drive
  • 6.6. Meet the W3C validator
  • 6.7. Validating the Head First Lounge
  • 6.8. Houston, we have a problem...
  • 6.9. Fixing that error
  • 6.10. We're almost there...
  • 6.11. Adding a meta tag to specify the character encoding
  • 6.12. Making the validator (and more than a few browsers) happy with a tag...
  • 6.13. Third time's the charm?
  • 6.14. Calling all HTML professionals, grab the handbook...
  • Chapter 7. Getting Started with CSS: Adding a Little Style
  • 7.1. You're not in Kansas anymore
  • 7.2. Overheard on Webville's "Trading Spaces"
  • 7.3. Using CSS with HTML
  • 7.4. Wanna add more style?
  • 7.5. Getting CSS into your HTML
  • 7.6. Adding style to the lounge
  • 7.7. Cruising with style: the test drive
  • 7.8. Style the heading
  • 7.9. Let's put a line under the welcome message too
  • 7.10. We have the technology: specifying a second rule, just for the h1
  • 7.11. So, how do selectors really work?
  • 7.12. Seeing selectors visually
  • 7.13. Getting the lounge style into the elixirs and directions pages
  • 7.14. Creating the "lounge.css" file
  • 7.15. Linking from "lounge.html" to the external stylesheet
  • 7.16. Linking from "elixir.html" and "directions.html" to the external stylesheet
  • 7.17. Test driving the entire lounge...
  • 7.18. It's time to talk about your inheritance...
  • 7.19. What if we move the font up the family tree?
  • 7.20. Test drive your new CSS
  • 7.21. Overriding inheritance
  • 7.22. Test drive
  • 7.23. Adding an element to the greentea class
  • 7.24. Creating a class selector
  • 7.25. A greentea test drive
  • 7.26. Taking classes further...
  • 7.27. The world's smallest and fastest guide to how styles are applied
  • 7.28. Making sure the lounge CSS validates
  • Chapter 8. Styling with Fonts and Colors: Expanding Your Vocabulary
  • 8.1. Text and fonts from 30,000 feet
  • 8.2. What is a font family anyway?
  • 8.3. Specifying font families using CSS
  • 8.4. How font-family specifications work
  • 8.5. Dusting off Tony's journal
  • 8.6. Getting Tony a new font-family
  • 8.7. Test driving Tony's new fonts
  • 8.8. How do I deal with everyone having different fonts?
  • 8.9. How Web Fonts work
  • 8.10. How to add a Web Font to your page...
  • 8.11. Test drive the Web Font in Tony's journal
  • 8.12. Adjusting font sizes
  • 8.13. So, how should I specify my font sizes?
  • 8.14. Let's make these changes to the font sizes in Tony's web page
  • 8.15. Test driving the font sizes
  • 8.16. Changing a font's weight
  • 8.17. Test drive the normal-weight headings
  • 8.18. Adding style to your fonts
  • 8.19. Styling Tony's quotes with a little italic
  • 8.20. How do web colors work?
  • 8.21. How do I specify web colors? Let me count the ways...
  • 8.22. The two-minute guide to hex codes
  • 8.23. How to find web colors
  • 8.24. Back to Tony's page...we're going to make the headings orange, and add an underline too
  • 8.25. Test drive Tony's orange headings
  • 8.26. Everything you ever wanted to know about text decorations in less than one page
  • 8.27. Removing the underline...
  • Chapter 9. The Box Model: Getting Intimate with Elements
  • 9.1. The lounge gets an upgrade
  • 9.2. The new and improved, ultra-stylish lounge
  • 9.3. Setting up the new lounge
  • 9.4. Starting with a few simple upgrades
  • 9.5. A very quick test drive
  • 9.6. One more adjustment
  • 9.7. Checking out the new line height
  • 9.8. Getting ready for some major renovations
  • 9.9. A closer look at the box model
  • 9.10. What you can do to boxes
  • 9.11. Meanwhile, back at the lounge...
  • 9.12. Creating the guarantee style
  • 9.13. A test drive of the paragraph border
  • 9.14. Padding, border, and margins for the guarantee
  • 9.15. Adding some padding
  • 9.16. A test drive with some padding
  • 9.17. Now let's add some margin
  • 9.18. A test drive with the margin
  • 9.19. Adding a background image
  • 9.20. Test driving the background image
  • 9.21. Fixing the background image
  • 9.22. Another test drive of the background image
  • 9.23. How do you add padding only on the left?
  • 9.24. Are we there yet?
  • 9.25. How do you increase the margin just on the right?
  • 9.26. A two-minute guide to borders
  • 9.27. Border fit and finish
  • 9.28. Congratulations!
  • 9.29. The id attribute
  • 9.30. But how do I use id in CSS?
  • 9.31. Using an id in the lounge
  • 9.32. Remixing stylesheets
  • 9.33. Using multiple stylesheets
  • 9.34. Stylesheets-they're not just for desktop browsers anymore...
  • 9.35. Add media queries right into your CSS
  • Chapter 10. Divs and Spans: Advanced Web Construction
  • 10.1. A close look at the elixirs HTML
  • 10.2. Let's explore how we can divide a page into logical sections
  • 10.3. Meanwhile, back at the lounge...
  • 10.4. Taking the for a test drive
  • 10.5. Adding a border
  • 10.6. An over-the-border test drive
  • 10.7. Adding some real style to the elixirs section
  • 10.8. The game plan
  • 10.9. Working on the elixir width
  • 10.10. Test driving the width
  • 10.11. Adding the basic styles to the elixirs
  • 10.12. Test driving the new styles
  • 10.13. We're almost there...
  • 10.14. What are we trying to do?
  • 10.15. What we need is a way to select descendants
  • 10.16. Changing the color of the elixir headings
  • 10.17. A quick test drive...
  • 10.18. Fixing the line height
  • 10.19. Look what you've accomplished...
  • 10.20. It's time to take a little shortcut
  • 10.21. But there's more...
  • 10.22. And even more shorthands
  • 10.23. Adding s in three easy steps
  • 10.24. Steps one and two: Adding the s
  • 10.25. Step three: Styling the s
  • 10.26. Test driving the spans
  • 10.27. The element and its multiple personalities
  • 10.28. How can you style elements based on their state?
  • 10.29. Putting those pseudo-classes to work
  • 10.30. Test drive the links
  • 10.31. Isn't it about time we talk about the "cascade"?
  • 10.32. The cascade
  • 10.33. Welcome to the "What's my specificity?" game
  • 10.34. Putting it all together
  • Chapter 11. Layout and Positioning: Arranging Elements
  • 11.1. Did you do the Super Brain Power?
  • 11.2. Use the Flow, Luke
  • 11.3. What about inline elements?
  • 11.4. How it all works together
  • 11.5. One more thing you should know about flow and boxes
  • 11.6. How to float an element
  • 11.7. Behind the scenes at the lounge
  • 11.8. The new Starbuzz
  • 11.9. A look at the markup
  • 11.10. And a look at the style
  • 11.11. Let's take Starbuzz to the next level
  • 11.12. Move the sidebar just below the header
  • 11.13. Set the width of the sidebar and float it
  • 11.14. Test driving Starbuzz
  • 11.15. Fixing the two-column problem
  • 11.16. Setting the margin on the main section
  • 11.17. Test drive
  • 11.18. Uh oh, we have another problem
  • 11.19. Solving the overlap problem
  • 11.20. Test drive
  • 11.21. Righty tighty, lefty loosey
  • 11.22. A quick test drive
  • 11.23. Liquid and frozen designs
  • 11.24. A frozen test drive
  • 11.25. What's the state between liquid and frozen? Jello, of course!
  • 11.26. Test driving with a tank of jello
  • 11.27. How absolute positioning works
  • 11.28. Another example of absolute positioning
  • 11.29. Using absolute positioning
  • 11.30. Changing the Starbuzz CSS
  • 11.31. Now we just need to rework the main
  • 11.32. Time for the absolute test drive
  • 11.33. How CSS table display works
  • 11.34. How to create the CSS and HTML for a table display
  • 11.35. Adding HTML structure for the table display
  • 11.36. How to use CSS to create table displays
  • 11.37. Meanwhile, back at Starbuzz...
  • 11.38. A quick test drive...
  • 11.39. What's the problem with the spacing?
  • 11.40. Fix the spacing
  • 11.41. A final test drive of our table display
  • 11.42. Strategies for your CSS layout toolbox
  • 11.43. Problems with the header
  • 11.44. Fixing the header images with float
  • 11.45. Test drive your float
  • 11.46. Adding the award
  • 11.47. Positioning the award
  • 11.48. How does fixed positioning work?
  • 11.49. Putting the coupon on the page
  • 11.50. Putting the coupon on the page
  • 11.51. Using a negative left property value
  • 11.52. A rather positive, negative test drive
  • Chapter 12. HTML5 Markup: Modern HTML
  • 12.1. Rethinking HTML structure
  • 12.2. Modern Starbuzz
  • 12.3. Update your Starbuzz HTML
  • 12.4. Test driving the new ride
  • 12.5. Before you continue...
  • 12.6. How to update your CSS for the new elements
  • 12.7. Test drive #2
  • 12.8. Building the Starbuzz blog page
  • 12.9. Setting up the CSS for the blog page
  • 12.10. Test drive the blog page
  • 12.11. We still need to add a date to the blog...
  • 12.12. Adding the element to your blog
  • 12.13. How to add more elements
  • 12.14. Testing the header
  • 12.15. So, what's wrong with the header anyway?
  • 12.16. A final test drive for the headers
  • 12.17. Completing the navigation
  • 12.18. Adding the navigation CSS
  • 12.19. Who needs GPS? Giving the navigation a test drive
  • 12.20. Adding a element...
  • 12.21. Making our CSS more specific...
  • 12.22. Ta-da! Look at that navigation!
  • 12.23. Creating the new blog entry
  • 12.24. And now, introducing the element
  • 12.25. Lights, camera, action...
  • 12.26. How does the element work?
  • 12.27. Closely inspecting the video attributes...
  • 12.28. What you need to know about video formats
  • 12.29. The video format contenders
  • 12.30. How to juggle all those formats...
  • 12.31. Take 2: lights, camera, action...
  • 12.32. How to be even more specific with your video formats
  • 12.33. Update and test drive
  • Chapter 13. Tables and More Lists: Getting Tabular
  • 13.1. How do you make tables with HTML?
  • 13.2. Creating a table with HTML
  • 13.3. What the browser creates
  • 13.4. Tables dissected
  • 13.5. Adding a caption
  • 13.6. Test drive...and start thinking about style
  • 13.7. Before we start styling, let's get the table into Tony's page
  • 13.8. Now let's style the table
  • 13.9. Taking the styled tables for a test drive
  • 13.10. Getting those borders to collapse
  • 13.11. How about some color?
  • 13.12. How about some color in the table rows?
  • 13.13. Did we mention that Tony made an interesting discovery in Truth or Consequences, New Mexico?
  • 13.14. Another look at Tony's table
  • 13.15. How to tell cells to span more than one row
  • 13.16. Test drive the table
  • 13.17. Trouble in paradise?
  • 13.18. Test driving the nested table
  • 13.19. Overriding the CSS for the nested table headings
  • 13.20. Giving Tony's site the final polish
  • 13.21. Giving the list some style
  • 13.22. What if you want a custom marker?
  • Chapter 14. HTML Forms: Getting Interactive
  • 14.1. How forms work
  • 14.2. How forms work in the browser
  • 14.3. What you write in HTML
  • 14.4. What the browser creates
  • 14.5. How the element works
  • 14.6. What can go in a form?
  • 14.7. What can go in a form? (part 2)
  • 14.8. Oh, even more can go in a form!
  • 14.9. Getting ready to build the Bean Machine form
  • 14.10. Figuring out what goes in the form element
  • 14.11. Adding the element
  • 14.12. How form element names work
  • 14.13. Back to getting those input elements into your HTML
  • 14.14. A form-al test drive
  • 14.15. Adding some more input elements to your form
  • 14.16. Adding the select element
  • 14.17. Test driving the element
  • 14.18. Give the customer a choice of whole or ground beans
  • 14.19. Punching the radio buttons
  • 14.20. Using more input types
  • 14.21. Adding the number and date input types
  • 14.22. Test driving the number and date input elements
  • 14.23. Completing the form
  • 14.24. Adding the checkboxes and text area
  • 14.25. The final form test drive
  • 14.26. Watching GET in action
  • 14.27. Getting the form elements into HTML structure for table display layout
  • 14.28. Styling the form with CSS
  • 14.29. Test drive the styled form
  • 14.30. A word about accessibility
  • 14.31. What more could possibly go into a form?
  • 14.32. More things that can go in a form
  • 14.33. Congratulations! You made it to the end;Leftovers: The Top Ten Topics (We Didn't Cover)
  • #1. More CSS selectors
  • #2. Vendor-specific CSS properties
  • #3. CSS transforms and transitions
  • #4. Interactivity
  • #5. HTML5 APIs and web apps
  • #6. More on Web Fonts
  • #7. Tools for creating web pages
  • #8. XHTML5
  • #9. Server-side scripting
  • #10. Audio;This isn't goodbye
  • Colophon

Similar Items