Books & Videos

Table of Contents

  1. Chapter 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. Take 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...

  2. Chapter 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. Understanding attributes

    5. Getting organized

    6. Organizing the lounge...

    7. Technical difficulties

    8. Planning your paths...

    9. Fixing those broken images...

  3. Chapter 3 Building Blocks: Web Page Construction

    1. From journal to website, at 12 mph

    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. Looooong quotes

    9. Adding a <blockquote>

    10. The real truth behind the <q> and <blockquote> mystery

    11. Meanwhile, back at Tony’s site...

    12. Of course, you could use the <p> element to make a list...

    13. Constructing HTML lists in two easy steps

    14. Taking a test drive through the cities

    15. Putting one element inside another is called “nesting”

    16. To understand the nesting relationships, draw a picture

    17. Using nesting to make sure your tags match

  4. Chapter 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 HTTP?

    11. What’s an absolute path?

    12. How default pages work

    13. How do we link to other websites?

    14. Linking to Caffeine Buzz

    15. And now for the test drive...

    16. Web page fit and finish

    17. The title test drive...

    18. Linking into a page

    19. Using the id attribute to create a destination for <a>

    20. How to link to elements with ids

    21. Linking to a new window

    22. Opening a new window using target

  5. Chapter 5 Adding Images to your Pages: Meeting the Media

    1. How the browser works with images

    2. How images work

    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

    10. Open the image

    11. Resizing the image

    12. You’ve resized—now save

    13. Save the image

    14. Fixing up the myPod HTML

    15. And now for the test drive...

    16. More photos for myPod

    17. Taking myPod for another test drive

    18. Reworking the site to use thumbnails

    19. Create the thumbnails

    20. Rework the HTML to use the thumbnails

    21. Take myPod for another test drive

    22. Turning the thumbnails into links

    23. Create individual pages for the photos

    24. So, how do I make links out of images?

    25. Add the image links to “index.html”

    26. Open the myPod logo

    27. What format should we use?

    28. To be transparent, or not to be transparent? That is the question...

    29. Save the transparent PNG

    30. Wait, what is the color of the web page background?

    31. Set the matte color

    32. Check out the logo with a matte

    33. Save the logo

    34. Add the logo to the myPod web page

    35. And now for the final test drive

  6. Chapter 6 Standards and All that Jazz: Getting Serious with HTML

    1. A Brief History of HTML

    2. The new, and improved, HTML5 doctype

    3. HTML, the new “living standard”

    4. Adding the document type definition

    5. The doctype test drive

    6. Meet the W3C validator

    7. Validating the Head First Lounge

    8. Houston, we have a problem...

    9. Fixing that error

    10. We’re almost there...

    11. Adding a meta tag to specify the character encoding

    12. Making the validator (and more than a few browsers) happy with a <meta> tag...

    13. Third time’s the charm?

    14. Calling all HTML professionals, grab the handbook...

  7. Chapter 7 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 HTML

    4. Wanna add more style?

    5. Getting CSS into your HTML

    6. Adding style to the lounge

    7. Cruising with style: the test drive

    8. Style the heading

    9. Let’s put a line under the welcome message too

    10. We have the technology: specifying a second rule, just for the h1

    11. So, how do selectors 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 stylesheet

    16. Linking from “elixir.html” and “directions.html” to the external stylesheet

    17. Test driving the entire lounge...

    18. It’s time to talk about your inheritance...

    19. What if we move the font up the family tree?

    20. Test drive your new CSS

    21. Overriding inheritance

    22. Test drive

    23. Adding an element to the greentea class

    24. Creating a class selector

    25. A greentea test drive

    26. Taking classes further...

    27. The world’s smallest and fastest guide to how styles are applied

    28. Making sure the lounge CSS validates

  8. Chapter 8 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. How Web Fonts work

    10. How to add a Web Font to your page...

    11. Test drive the Web Font in Tony’s journal

    12. Adjusting font sizes

    13. So, how should I specify my font sizes?

    14. Let’s make these changes to the font sizes in Tony’s web page

    15. Test driving the font sizes

    16. Changing a font’s weight

    17. Test drive the normal-weight headings

    18. Adding style to your fonts

    19. Styling Tony’s quotes with a little italic

    20. How do web colors work?

    21. How do I specify web colors? Let me count the ways...

    22. The two-minute guide to hex codes

    23. How to find web colors

    24. Back to Tony’s page...we’re going to make the headings orange, and add an underline too

    25. Test drive Tony’s orange headings

    26. Everything you ever wanted to know about text decorations in less than one page

    27. Removing the underline...

  9. Chapter 9 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!

    29. The id attribute

    30. But how do I use id in CSS?

    31. Using an id in the lounge

    32. Remixing stylesheets

    33. Using multiple stylesheets

    34. Stylesheets—they’re not just for desktop browsers anymore...

    35. Add media queries right into your CSS

  10. Chapter 10 Divs and Spans: Advanced Web Construction

    1. A close look at the elixirs HTML

    2. Let’s explore how we can divide a page into logical sections

    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?

    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...

    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

  11. Chapter 11 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

    6. How to float an element

    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. Solving the overlap problem

    20. Test drive

    21. Righty tighty, lefty loosey

    22. A quick test drive

    23. Liquid and frozen designs

    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

    28. Another example of absolute positioning

    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. How CSS table display works

    34. How to create the CSS and HTML for a table display

    35. Adding HTML structure for the table display

    36. How to use CSS to create table displays

    37. Meanwhile, back at Starbuzz...

    38. A quick test drive...

    39. What’s the problem with the spacing?

    40. Fix the spacing

    41. A final test drive of our table display

    42. Strategies for your CSS layout toolbox

    43. Problems with the header

    44. Fixing the header images with float

    45. Test drive your float

    46. Adding the award

    47. Positioning the award

    48. How does fixed positioning work?

    49. Putting the coupon on the page

    50. Putting the coupon on the page

    51. Using a negative left property value

    52. A rather positive, negative test drive

  12. Chapter 12 HTML5 Markup: Modern HTML

    1. Rethinking HTML structure

    2. Modern Starbuzz

    3. Update your Starbuzz HTML

    4. Test driving the new ride

    5. Before you continue...

    6. How to update your CSS for the new elements

    7. Test drive #2

    8. Building the Starbuzz blog page

    9. Setting up the CSS for the blog page

    10. Test drive the blog page

    11. We still need to add a date to the blog...

    12. Adding the <time> element to your blog

    13. How to add more <header> elements

    14. Testing the header

    15. So, what’s wrong with the header anyway?

    16. A final test drive for the headers

    17. Completing the navigation

    18. Adding the navigation CSS

    19. Who needs GPS? Giving the navigation a test drive

    20. Adding a <nav> element...

    21. Making our CSS more specific...

    22. Ta-da! Look at that navigation!

    23. Creating the new blog entry

    24. And now, introducing the <video> element

    25. Lights, camera, action...

    26. How does the <video> element work?

    27. Closely inspecting the video attributes...

    28. What you need to know about video formats

    29. The video format contenders

    30. How to juggle all those formats...

    31. Take 2: lights, camera, action...

    32. How to be even more specific with your video formats

    33. Update and test drive

  13. Chapter 13 Tables and More Lists: Getting Tabular

    1. How do you make tables with HTML?

    2. Creating a table with HTML

    3. What the browser creates

    4. Tables dissected

    5. Adding a caption

    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 collapse

    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. Test drive the 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?

  14. Chapter 14 HTML Forms: Getting Interactive

    1. How forms work

    2. How forms work in the browser

    3. What you write in HTML

    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 2)

    8. Oh, even more can go in a form!

    9. Getting ready to build the Bean Machine form

    10. Figuring out what goes in the form element

    11. Adding the <form> element

    12. How form element names work

    13. Back to getting those input elements into your HTML

    14. A form-al test drive

    15. Adding some more input elements to your form

    16. Adding the select element

    17. Test driving the <select> element

    18. Give the customer a choice of whole or ground beans

    19. Punching the radio buttons

    20. Using more input types

    21. Adding the number and date input types

    22. Test driving the number and date input elements

    23. Completing the form

    24. Adding the checkboxes and text area

    25. The final form test drive

    26. Watching GET in action

    27. Getting the form elements into HTML structure for table display layout

    28. Styling the form with CSS

    29. Test drive the styled form

    30. A word about accessibility

    31. What more could possibly go into a form?

    32. More things that can go in a form

    33. Congratulations! You made it to the end

  1. Appendix Leftovers: The Top Ten Topics (We Didn’t Cover)

    1. #1 More CSS selectors

    2. #2 Vendor-specific CSS properties

    3. #3 CSS transforms and transitions

    4. #4 Interactivity

    5. #5 HTML5 APIs and web apps

    6. #6 More on Web Fonts

    7. #7 Tools for creating web pages

    8. #8 XHTML5

    9. #9 Server-side scripting

    10. #10 Audio

  2. Appendix This isn’t goodbye

  3. Colophon