You are previewing Head First HTML and CSS, 2nd Edition.

Head First HTML and CSS, 2nd Edition

Cover of Head First HTML and CSS, 2nd Edition by Elisabeth Robson... Published by O'Reilly Media, Inc.
  1. Head First HTML and CSS
  2. Dedication
  3. Praise for Head First HTML and CSS
  4. More Praise for Head First HTML and CSS
  5. Praise for other books by Eric Freeman and Elisabeth Robson
  6. Authors of Head First HTML and CSS
  7. 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
      1. And we know what your brain is thinking
    3. Metacognition: thinking about thinking
    4. Here’s what WE did
    5. Here’s what YOU can do to bend your brain into submission
    6. Read me
    7. Tech reviewers (first edition)
    8. Acknowledgments (first edition)
    9. Tech reviewers (second edition)
    10. Acknowledgments (second edition)
    11. Safari® Books Online
  8. 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...
  9. 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?
      1. What does the browser do?
    4. Understanding attributes
    5. Getting organized
    6. Organizing the lounge...
    7. Technical difficulties
    8. Planning your paths...
    9. Fixing those broken images...
      1. Finding the path from “lounge.html” to “drinks.gif”
      2. Finding the path from “elixir.html” to “red.jpg”
  10. 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
      1. And test drive
    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...
      1. But there are lots of reasons not to
    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
      1. So what?
  11. 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
      1. Improving accessibility by adding a title to your links
    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
      1. Finding the destination heading
      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
  12. 5. Adding Images to your Pages: Meeting the Media
    1. How the browser works with images
    2. How images work
      1. So, what are the differences among JPEG, PNG, 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. 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
      1. Create a new directory for 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
      1. A closer look...
    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
  13. 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...
  14. 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
      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 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...
      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 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
      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
  15. 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...
      1. Step one: Find a font
      2. Step two: Make sure you have all the formats of the font you need
      3. Step three: Place your font files on the Web
      4. Step 4: Add the @font-face property to your CSS
      5. Step five: Use the font-family name in your CSS
      6. Step six: Load the 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...
      1. Specify color by name
      2. Specify color in red, green, and blue values
      3. Specify color using hex codes
    22. The two-minute guide to hex codes
    23. How to find web colors
      1. Using an online color chart
    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...
  16. 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!
      1. Welcome back, and good timing. We’re just about to listen in on an interview with a 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” file
      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 stylesheets
    33. Using multiple stylesheets
    34. Stylesheets—they’re not just for desktop browsers anymore...
    35. Add media queries right into your CSS
  17. 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
      1. Identifying your logical sections
      2. Using <div>s to mark sections
      3. Labeling 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
  18. 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
      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. Solving 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. HTML 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. 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
      1. The Floating Layout
      2. The Jello Layout
      3. The Absolute Layout
      4. The Table Display Layout
    43. Problems with the header
    44. Fixing the header images with float
    45. Test drive your float
      1. How float works in the header
    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
  19. 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
      1. Test drive the 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
  20. 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?
      1. And, the final test drive...
  21. 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
  22. A. Leftovers: The Top Ten Topics (We Didn’t Cover)
    1. #1 More CSS selectors
      1. Pseudo-elements
      2. Attribute selectors
      3. Selecting by siblings
      4. Combining selectors
    2. #2 Vendor-specific CSS properties
    3. #3 CSS transforms and transitions
    4. #4 Interactivity
      1. What else can scripting do?
    5. #5 HTML5 APIs and web apps
    6. #6 More on Web Fonts
    7. #7 Tools for creating web pages
      1. Some tools to consider
    8. #8 XHTML5
    9. #9 Server-side scripting
    10. #10 Audio
  23. B. This isn’t goodbye
  24. Index
  25. About the Authors
  26. Colophon
  27. Copyright

Chapter 4. Getting Connected: A Trip to Webville

image with no caption

Web pages are a dish best served on the Internet. So far you’ve only created HTML pages that live on your own computer. You’ve also only linked to pages that are on your own computer. We’re about to change all that. In this chapter we’ll encourage you to get those web pages on the Internet where all your friends, fans, and customers can actually see them. We’ll also reveal the mysteries of linking to other pages by cracking the code of the h, t, t, p, :, /, /, w, w, w. So, gather your belongings; our next stop is Webville.

WARNING: once you get to Webville, you may never come back. Send us a postcard.

image with no caption

Getting Starbuzz (or yourself) onto the Web

You’re closer to getting Starbuzz—or even better, your own site—on the Web than you might think. All you need to do is find a “web hosting company” (we’ll call this a “hosting company” from now on) to host your pages on their servers, and then copy your pages from your computer to one of those servers.

Of course it helps to understand how your local folders are going to “map” to the server’s folders, and once you put your pages on the server, how you point a browser to them. But we’ll get to all that. For now, let’s talk about getting you on the Web. Here’s what you’re going to need to do:

  1. Find yourself an hosting company.

  2. Choose a name for your site (like

  3. Find a way to get your files from your computer to a server at the hosting company (there are a few ways).

  4. Point your friends, family, and fans to your new site and let the fun begin.

We’re going to take you through each of these steps, and even if you’re not going to set up a website online right now, follow along because you’ll learn some important things you’ll need to know later. So, get ready for a quick detour from HTML...

image with no caption

A Web Detour

Finding a hosting company

To get your pages on the Web, you need a server that actually lives on the Web full-time. Your best bet is to find a hosting company and let them worry about the details of keeping a server running. No worries, though; finding a hosting company is fairly straightforward and inexpensive.

Which company? Well, we’d love to sign you up for web hosting at Head First Hip Web Hosting, Inc., but that doesn’t really exist. So, you’re going to have to do a little homework on your own. While finding a company to host your pages isn’t difficult, it’s kind of like choosing a cable TV company: there are lots of options and plans. You really have to shop around for the best deals and for the service that works for you.

The good news is that you should be able to get started for almost nothing out of your pocket, and you can always upgrade later if you need additional features. While we can’t suggest a particular provider, we can tell you a few things to look for in a provider, and we also list a few of the more popular providers at:


Note from marketing: if a hosting company writes a big enough check, we can!

image with no caption

A Web Detour


You don’t have to get your pages on the Web to finish this book.

While it’s a lot more fun if your pages are actually on the Web, you can finish the rest of this book by working on your own computer.

In either case, follow along for the next few pages so you know how everything fits together.

image with no caption

A Web Detour

HELLO, my domain name is...

Even if you’ve never heard of a domain name, you’ve seen and used a zillion of them; you,,,, and maybe a few you wouldn’t want us to mention.

So what is a domain name? Just a unique name that is used to locate your site. Here’s an example:

image with no caption

There are a couple of reasons you should care about domain names. If you want a unique name for your site, you’re going to need your own domain name. Domain names are also used to link your pages to other websites (we’ll get to that in a few pages).

There is one other thing you should know. Domain names are controlled by a centralized authority (ICANN) to make sure that only one person at a time uses a domain name. Also (you knew it was coming), you pay a small annual registration fee to keep your domain name.

How can you get a domain name?

The easy answer is to let your hosting company worry about it. They’ll often throw in your domain name registration with one of their package deals. However, there are hundreds of companies that would be glad to help—you can find a list of them at:

As with finding a hosting company, we’re afraid we’ll have to leave you to find and register your own domain name. You’ll probably find that going through your hosting company is the easiest way to get that done.

image with no caption
image with no caption

A Web Detour


Here’s an exercise you really need to go off and do on your own. We’d love to personally help, but there’s only so much you can ask of book authors (and feeding the cat while you’re on vacation is probably out too).

image with no caption

A Web Detour

Moving in

Congratulations! You’ve got your hosting company lined up, you’ve found a domain name, and you’ve got a server all ready for your web pages. (Even if you don’t, keep following along because this is important stuff.)

Now what? Well, it’s time to move in, of course. So, take that For Sale sign down and gather up all those files; we’re going to get them moved to the new server. Like any move, the goal is to get things moved from, say, the kitchen of your old place to the kitchen of your new place. On the Web, we’re just worried about getting things from your own root folder to the root folder on the web server. Let’s get back to Starbuzz and step through how we do this. Here’s what things look like now:

image with no caption
image with no caption
image with no caption
image with no caption

A Web Detour

Getting your files to the root folder

You’re now one step away from getting Starbuzz Coffee on the Web: you’ve identified the root folder on your hosting company’s server and all you need to do is copy your pages over to that folder. But how do you transfer files to a web server? There are a variety of ways, but most hosting companies support a method of file transfer called FTP, which stands for File Transfer Protocol. You’ll find a number of applications out there that will allow you to transfer your files via FTP; we’ll take a look at how that works on the next page.

image with no caption
image with no caption

A Web Detour

As much FTP as you can possibly fit in two pages

Seriously, this really is an HTML and CSS book, but we didn’t want to leave you up a creek without a paddle. So, here’s a very quick guide to using FTP to get your files on the Web. Keep in mind your hosting company might have a few suggestions for the best way to transfer your files to their servers (and since you are paying them, get their help). After the next few pages, we’re off our detour and back to HTML and CSS until we reach the end of the book (we promise).

We’ll assume you’ve found an FTP application. Some are command-line driven, some have complete graphical interfaces, and some are even built into applications like Dreamweaver and Expression Web. They all use the same commands, but with some applications you type them in yourself, while in others you use a graphical interface. Here’s how FTP works from 10,000 feet:

  1. First, connect to your server using FTP.

    image with no caption
  2. Use the “cd” command to change your current directory to the directory where you want to transfer files.


    In other words, make sure you’re in the folder “starbuzz” on the server before you transfer your files there.

    image with no caption
  3. Transfer your files to the server using the “put” command.

    image with no caption
    image with no caption

    A Web Detour

  4. You can also make a new directory on the server with the “mkdir” command.

    image with no caption
  5. You can retrieve files too, with the “get” command.

    image with no caption

Let’s put all that together. Here’s an example of FTP being used from a command-line application:

image with no caption
image with no caption

A Web Detour


Most FTP applications have a trial version you can download to try before you buy.

Back to business...

That’s the end of the detour, and we’re back on the web superhighway. At this point, you should have the two Starbuzz pages, “index.html” and “mission.html”, sitting under your root folder on a server (or if not, you’re at least following along).

After all this work, wouldn’t it be satisfying to make your browser retrieve those pages over the Internet and display them for you? Let’s figure out the right address to type into your browser...

image with no caption

Mainstreet, URL

You’ve probably heard the familiar “h” “t” “t” “p” “colon” “slash” “slash” a zillion times, but what does it mean? First of all, the web addresses you type into the browser are called URLs or Uniform Resource Locators.

If it were up to us, we would have called them “web addresses,” but no one asked, so we’re stuck with Uniform Resource Locators. Here’s how to decipher a URL:

image with no caption

A Uniform Resource Locator (URL) is a global address that can be used to locate anything on the Web, including HTML pages, audio, video, and many other forms of web content.

In addition to specifying the location of the resource, a URL also names the protocol that you can use to retrieve that resource.

To locate anything on the Web, as long as you know the server that hosts it, and an absolute path to the resource, you can create a URL and most likely get a web browser to retrieve it for you using some protocol—usually HTTP.

image with no caption

What is HTTP?

HTTP is also known as the HyperText Transfer Protocol. In other words, it’s an agreed-upon method (a protocol) for transferring hypertext documents around the Web. While “hypertext documents” are usually just HTML pages, the protocol can also be used to transfer images, or any other file that a web page might need.

HTTP is a simple request and response protocol. Here’s how it works:

image with no caption

So each time you type a URL into your browser’s address bar, the browser asks the server for the corresponding resource using the HTTP protocol. If the server finds the resource, it returns it to the browser and the browser displays it. What happens if the server doesn’t find it?

image with no caption

If the resource can’t be found, you’ll get the familiar “404 Error,” which the server reports back to your browser.

image with no caption

What’s an absolute path?

The last time we talked about paths, we were writing HTML to make links with the <a> element. The path we’re going to look at now is the absolute path part of a URL, the last part that comes after the protocol (http) and the website name (

An absolute path tells the server how to get from your root folder to a particular page or file. Take Earl’s Autos site, for example. Say you want to look in Earl’s inventory to see if your new Mini Cooper has come in. To do that, you’ll need to figure out the absolute path to the file “inventory.html” that is in the “new” folder. All you have to do is trace through the folders, starting at the root, to get to the “new” folder where his “inventory.html” file is located. The path is made up of all the folders you go through to get there.

So, that looks like root (we represent root with a “/”), “cars”, “new”, and finally, the file itself, “inventory.html”. Here’s how you put that all together:

image with no caption
image with no caption


Remember, when we’re talking about web servers or FTP, we usually use the term “directory” instead of “folder.” But they’re really the same thing.

Yes, there is. One thing we haven’t talked about is what happens if a browser asks for a directory rather than a file from a web server. For instance, a browser might ask for:


The images directory in the root directory



The root directory itself

When a web server receives a request like this, it tries to locate a default file in that directory. Typically a default file is called “index.html” or “default.htm” and if the server finds one of these files, it returns the file to the browser to display.

So, to return a file by default from your root directory (or any other directory), just name the file “index.html” or “default.htm”.


But you need to find out what your hosting company wants you to name your default file, because it depends on the type of server they use.

image with no caption

Oops, you sure did. When a server receives a request like yours without the trailing “/” and there is a directory with that name, then the server will add a trailing slash for you. So if the server gets a request for:

it will change it to:

which will cause the server to look for a default file, and in the end it will return the file as if you’d originally typed:

How default pages work

Behind the Scenes

image with no caption
image with no caption
image with no caption

How do we link to other websites?

URLs aren’t just for typing into browsers; you can use them right in your HTML. And, of course, right on cue, the Starbuzz CEO has a new task for you: make a link from the main Starbuzz page over to the caffeine information at As you can probably guess, we’re going to throw that URL right into an <a> element. Here’s how:

image with no caption

That’s all there is to it. To link to any resource on the Web, all you need is its Uniform Resource Locator, which goes in the <a> element as the value of the href attribute. Let’s go ahead and add this in the Starbuzz “index.html” page.

Linking to Caffeine Buzz

Open your Starbuzz “index.html” file in the “chapter4/starbuzz” folder, and scan down to the bottom. Let’s add two new links: a relative link to the mission statement in “mission.html”, and a link to Caffeine Buzz. Make the changes below, then save and load your “index.html” file in your browser. Click on the link and enjoy the Caffeine Buzz.

image with no caption

And now for the test drive...

image with no caption
image with no caption

Web page fit and finish

Can you say “web career”? You’ve certainly delivered everything the Starbuzz CEO has asked for, and you’ve now got a high-profile website under your belt (and in your portfolio).

But you’re not going to stop there. You want your websites to have that professional “fit and finish” that makes good sites into great ones. You’re going to see lots of ways to give your sites that extra “polish” in the rest of this book, but let’s start here with a way to improve your links.

Improving accessibility by adding a title to your links

Wouldn’t it be nice if there were a way to get more information about the link you’re about to click on? This is especially important for the visually impaired using screen readers because they often don’t want the entire URL spoken to them: (“h” “t” “t” p” “:” “slash” “slash” “w” “w” “w” “dot”), and yet the link’s label usually only gives a limited description, like “Caffeine Buzz.”

The <a> element has an attribute called title just for this purpose. Some people are confused by this attribute name because there’s an element named <title> that goes in the <head>. They have the same name because they are related—it is often suggested that the value of the title attribute be the same as value of the <title> element of the web page you are linking to. But that isn’t a requirement and often it makes more sense to provide your own, more relevant description in the title attribute.

Here’s how you add a title attribute to the <a> element:

image with no caption

The title test drive...

For most browsers, the title is displayed as a tool tip when you pass the mouse over a link. Remember that browsers for the visually impaired may read the link title aloud to a visitor.

image with no caption
image with no caption

Linking into a page

So far, whenever you’ve linked to another page, the page loads and your browser displays it from the top.

image with no caption

But the CEO’s asking you to link into a particular spot in the page: the Coffee section.

Sound impossible? Come on, this is Head First—we’ve got the technology. How? Well, we haven’t told you everything about the <a> element yet. Turns out the <a> element can team up with the id attribute to take you straight to a specific point in a page.

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

We haven’t talked about the id attribute yet; it’s an important attribute with special properties, and we’ll get into more detail about other special properties of id later in the book. For now, think of it as a way of uniquely identifying an element. One special property that elements with ids get is that you can link to them. Let’s see how to use the id attribute to create a destination in a page for <a>.

  1. Find the location in the page where you’d like to create a landing spot. This can be any text on the page, but often is just a heading.

  2. Choose an identifier name for the destination, like “coffee” or “summary” or “bio,” and insert an id attribute into the opening tag of the element.

Let’s give it a try. Say you want to provide a way to link to the Chai Tea item on the Starbuzz page. Here’s what it looks like now:

image with no caption

Following the two steps above, we get this:

image with no caption

How to link to elements with ids

You already know how to link to pages using either relative links or URLs. In either case, to link to a specific destination in a page, just add a # on the end of your link, followed by the destination identifier. So if you wanted to link from any Starbuzz Coffee web page to the “chai” destination heading, you’d write your <a> element link this:

<a href="index.html#chai">See Chai Tea</a>

Unfortunately, linking to Chai Tea isn’t very impressive because the whole page is small enough that it easily fits in the browser. Let’s link to the Coffee section of instead. Here’s what you’re going to do:


The main benefit of specific destinations is to link to locations in long files so your visitors don’t have to scroll through the file looking for the right section.

  1. Figure out the id of the Coffee heading.

  2. Alter the existing <a> element in the Starbuzz Coffee “index.html” file to point to the destination heading.

  3. Reload your “index.html” page and test out the link.

Finding the destination heading

To find the destination heading, you’re going to have to look at the page and view their HTML. How? Almost all browsers have a “View Source” option. So, visit the page and when it is fully loaded, choose the “View Source” option, and you’ll see the markup for the page.

image with no caption

Now that you’ve got your hands on their HTML...

Scroll down until you see the Coffee section; it looks like this:

image with no caption

Reworking the link in “index.html”

Now all you need to do is revisit the link to Caffeine Buzz and add on the destination anchor name, like this:

image with no caption
image with no caption

Linking to a new window

We have another new requirement from the Starbuzz CEO (there are always new requirements for websites). What he wants is this: when you click on the “Caffeine Buzz” link in the Starbuzz Coffee page, the Starbuzz Coffee page shouldn’t go away. Instead, a whole new window should open up with the Caffeine Buzz page in it, like this:

image with no caption

Opening a new window using target

To open a page in a new window, you need to tell the browser the name of the window in which to open it. If you don’t tell the browser a specific window to use, the browser just opens the page in the same window. You can tell the browser to use a different window by adding a target attribute to the <a> element. The value of the target attribute tells the browser the “target window” for the page. If you use “_blank” for the target, the browser will always open a new window to display the page. Let’s take a closer look:

image with no caption

Brain Power

Can you think of some advantages and some disadvantages to using the target attribute to open a page in a new window?

image with no caption

The best content for your career. Discover unlimited learning on demand for around $1/day.