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
O'Reilly logo

Chapter 1. Getting to Know HTML: The Language of the Web

image with no caption

The only thing that is standing between you and getting yourself on the Web is learning to speak the lingo:

HyperText Markup Language, or HTML for short. So, get ready for some language lessons. After this chapter, not only are you going to understand some basic elements of HTML, but you’ll also be able to speak HTML with a little style. Heck, by the end of this book you’ll be talking HTML like you grew up in Webville.

The Web Video killed the radio star

Want to get an idea out there? Sell something? Just need a creative outlet? Turn to the Web—we don’t need to tell you it has become the universal form of communication. Even better, it’s a form of communication YOU can participate in.

But if you really want to use the Web effectively, you’ve got to know a few things about HTML—not to mention, a few things about how the Web works too. Let’s take a look from 30,000 feet:

image with no caption

What does the web server do?

Web servers have a full-time job on the Internet, tirelessly waiting for requests from web browsers. What kinds of requests? Requests for web pages, images, sounds, or maybe even a video. When a server gets a request for any of these resources, the server finds the resource, and then sends it back to the browser.

image with no caption

What does the web browser do?

You already know how a browser works: you’re surfing around the Web and you click on a link to visit a page. That click causes your browser to request an HTML page from a web server, retrieve it, and display the page in your browser window.

image with no caption

But how does the browser know how to display a page? That’s where HTML comes in. HTML tells the browser all about the content and structure of the page. Let’s see how that works...

What you write (the HTML)

So, you know HTML is the key to getting a browser to display your pages, but what exactly does HTML look like? And what does it do?

Let’s have a look at a little HTML...imagine you’re going to create a web page to advertise the Head First Lounge, a local hangout with some good tunes, refreshing elixirs, and wireless access. Here’s what you’d write in HTML:

image with no caption


We don’t expect you to know HTML yet.

At this point you should just be getting a feel for what HTML looks like; we’re going to cover everything in detail in a bit. For now, study the HTML and see how it gets represented in the browser on the next page. Be sure to pay careful attention to each letter annotation and how and where it is displayed in the browser.

What the browser creates

When the browser reads your HTML, it interprets all the tags that surround your text. Tags are just words or characters in angle brackets, like <head>, <p>, <h1>, and so on. The tags tell the browser about the structure and meaning of your text. So rather than just giving the browser a bunch of text, with HTML you can use tags to tell the browser what text is in a heading, what text is a paragraph, what text needs to be emphasized, or even where images need to be placed.

Let’s check out how the browser interprets the tags in the Head First Lounge:

image with no caption

Your big break at Starbuzz Coffee

Starbuzz Coffee has made a name for itself as the fastest growing coffee shop around. If you’ve seen one on your local corner, look across the street—you’ll see another one.

image with no caption

In fact, they’ve grown so quickly, they haven’t even managed to put up a web page yet...and therein lies your big break: By chance, while buying your Starbuzz Chai Tea, you run into the Starbuzz CEO...

image with no caption

Brain Power

Decisions, decisions. Check your first priority below (choose only one):


Give dog a bath.


Finally get my checking account balanced.


Take the Starbuzz gig and launch BIG-TIME web career.


Schedule dentist appointment.

image with no caption


The CEO scribbles something on a napkin and hands it to you...


* If by chance you chose option A, B, or D on the previous page, we recommend you donate this book to a good library, use it as kindling this winter, or what the heck, go ahead and sell it on Amazon and make some cash.

Creating the Starbuzz web page

Of course, the only problem with all this is that you haven’t actually created any web pages yet. But that’s why you decided to dive head first into HTML, right?

No worries, here’s what you’re going to do on the next few pages:

  1. Create an HTML file using your favorite text editor.

  2. Type in the menu the Starbuzz CEO wrote on the napkin.

  3. Save the file as “index.html”.

  4. Open the file “index.html” in your favorite browser, step back, and watch the magic happen.

image with no caption

Creating an HTML file (Mac)

All HTML files are text files. To create a text file, you need an application that allows you to create plain text without throwing in a lot of fancy formatting and special characters. You just need plain, pure text.

We’ll use TextEdit on the Mac in this book; however, if you prefer another text editor, that should work fine as well. And, if you’re running Windows, you’ll want to skip ahead a couple of pages to the Windows instructions.

Step one:

  • Navigate to your Applications folder

    The TextEdit application is in the Applications folder. The easiest way to get there is to choose New Finder Window from the Finder’s File menu and then look for the Application directly in your shortcuts. When you’ve found it, click on Applications.

    image with no caption
    image with no caption

Step two:

  • Locate and run TextEdit

    You’ll probably have lots of applications listed in your Applications folder, so scroll down until you see TextEdit. To run the application, double-click on the TextEdit icon.

Step three (optional):

  • Keep TextEdit in your Dock

    If you want to make your life easier, click and hold on the TextEdit icon in the Dock (this icon appears once the application is running). When it displays a pop-up menu, choose Options, then “Keep in Dock.” That way, the TextEdit icon will always appear in your Dock and you won’t have to hunt it down in the Applications folder every time you need to use it.

    image with no caption

Step four:

  • Change your TextEdit Preferences

    By default, TextEdit is in “rich text” mode, which means it will add its own formatting and special characters to your file when you save it—not what you want. So, you’ll need to change your TextEdit Preferences so that TextEdit saves your work as a pure text file. To do this, first choose the Preferences menu item from the TextEdit menu.

    image with no caption

Step five:

  • Set Preferences for Plain text

    Once you see the Preferences dialog box, there are three things you need to do.

    First, choose “Plain text” as the default editor mode in the New Document tab.

    In the “Open and Save” tab, make sure “Ignore rich text commands in HTML files” is checked.

    Last, make sure that the “Add .txt extension to plain text files” is unchecked.

    That’s it; to close the dialog box, click on the red button in the top-left corner.

    image with no caption

Step six:

  • Quit and restart

    Now quit out of TextEdit by choosing Quit from the TextEdit menu, and then restart the application. This time, you’ll see a window with no fancy text formatting menus at the top. You’re now ready to create some HTML.

    image with no caption

Creating an HTML file (Windows)


Or another version of Windows

If you’re reading this page you must be a Windows 7 user. If you’re not, you might want to skip a couple of pages ahead. Or, if you just want to sit in the back and not ask questions, we’re okay with that too.


If you’re using another version of Windows, you’ll find Notepad there as well.

To create HTML files in Windows 7, we’re going to use Notepad—it ships with every copy of Windows, the price is right, and it’s easy to use. If you’ve got your own favorite editor that runs on Windows 7, that’s fine too; just make sure you can create a plain-text file with an “.html” extension.

Assuming you’re using Notepad, here’s how you’re going to create your first HTML file.

Step one:

  • Open the Start menu and navigate to Notepad.

    You’ll find the Notepad application in Accessories. The easiest way to get there is to click on the Start menu, then on All Programs, then Accessories. You’ll see Notepad listed there.

    image with no caption

Step two:

  • Open Notepad.

    Once you’ve located Notepad in the Accessories folder, go ahead and click on it. You’ll see a blank window ready for you to start typing HTML.

    image with no caption

Step three (optional):

  • Note

    But recommended

    Don’t hide extensions of well-known file types.

    By default, Windows File Explorer hides the file extensions of well-known file types. For example, a file named “Irule.html” will be shown in the Explorer as “Irule” without its “.html” extension.

    It’s much less confusing if Windows shows you these extensions, so let’s change your folder options so you can see them.

    First, open Folder Options by clicking the Start button, clicking Control Panel, clicking “Appearance and Personalization,” and then clicking Folder Options.

    Next, in the View tab, under “Advanced settings,” scroll down until you see “Hide extensions for known file types” and uncheck this option.

    That’s it. Click on the OK button to save the preference and you’ll now see the file extensions in the Explorer.

    image with no caption

Meanwhile, back at Starbuzz Coffee...

Okay, now that you know the basics of creating a plain-text file, you just need to get some content into your text editor, save it, and then load it into your browser.

image with no caption

Start by typing in the beverages straight from the CEO’s napkin; these beverages are the content for your page. You’ll be adding some HTML markup to give the content some structure in a bit, but for now, just get the basic content typed in. While you’re at it, go ahead and add “Starbuzz Coffee Beverages” at the top of the file.

image with no caption

Saving your work

Once you’ve typed in the beverages from the CEO’s napkin, you’re going to save your work in a file called “index.html”. Before you do that, you’ll want to create a folder named “starbuzz” to hold the site’s files.

To get this all started, choose Save from the File menu and you’ll see a Save As dialog box. Then, here’s what you need to do:

  1. First, create a “starbuzz” folder for all your Starbuzz-related files. You can do this with the New Folder button.

    image with no caption
  2. Next, click on the newly created “starbuzz” folder and then enter “index.html” as the filename and click on the Save button.

Opening your web page in a browser

Are you ready to open your first web page? Using your favorite browser, choose “Open File...” (or “Open...” using Windows 7 and Internet Explorer) from the File menu and navigate to your “index.html” file. Select it and click Open.

image with no caption
image with no caption

Take your page for a test drive

image with no caption

Success! You’ve got the page loaded in the browser, although the results are a little...uh...unsatisfying. But that’s just because all you’ve done so far is go through the mechanics of creating a page and viewing it in the browser. And so far, you’ve only typed in the content of the web page. That’s where HTML comes in. HTML gives you a way to tell the browser about the structure of your page. What’s structure? As you’ve already seen, it is a way of marking up your text so that the browser knows what’s a heading, what text is in a paragraph, what text is a subheading, and so on. Once the browser knows a little about the structure, it can display your page in a more meaningful and readable manner.

image with no caption
image with no caption

Are we there yet?

You have an HTML file with markup—does that make a web page? Almost. You’ve already seen the <html>, <head>, <title>, and <body> tags, and we just need to add those to make this a first-class HTML page...

image with no caption

Another test drive

image with no caption

Go ahead and change your “index.html” file by adding in the <head>, </head>, <title>, </title>, <body> and </body> tags. Once you’ve done that, save your changes and reload the file into your browser.

image with no caption
image with no caption

Tags dissected

Okay, you’ve seen a bit of markup, so let’s zoom in and take a look at how tags really work.

image with no caption
image with no caption


To tell the browser about the structure of your page, use pairs of tags around your content.


Element = Opening Tag + Content + Closing Tag

Brain Power

Tags can be a little more interesting than what you’ve seen so far. Here’s the paragraph tag with a little extra added to it. What do you think this does?

<p id="houseblend">A smooth, mild
blend of coffees from Mexico, Bolivia
and Guatemala.</p>
image with no caption

Right. We have the structure down, so now we’re going to concentrate on its presentation.

You already know that HTML gives you a way to describe the structure of the content in your files. When the browser displays your HTML, it uses its own built-in default style to present this structure. But relying on the browser for style obviously isn’t going to win you any “designer of the month” awards.

That’s where CSS comes in. CSS gives you a way to describe how your content should be presented. Let’s get our feet wet by creating some CSS that makes the Starbuzz page look a little more presentable (and launch your web career in the process).


CSS is an abbreviation for Cascading Style Sheets. We’ll get into what that all means later, but for now just know that CSS gives you a way to tell the browser how elements in your page should look.

Meet the style element

To add style, you add a new (say it with us) E-L-E-M-E-N-T to your page—the <style> element. Let’s go back to the main Starbuzz page and add some style. Check it out...

image with no caption

Giving Starbuzz some style...

Now that you’ve got a <style> element in the HTML head, all you need to do is supply some CSS to give the page a little pizzazz. Below you’ll find some CSS already “baked” for you. Whenever you see the logo, you’re seeing HTML and CSS that you should type in as-is. Trust us. You’ll learn how the markup works later, after you’ve seen what it can do.

So, take a look at the CSS and then add it to your “index.html” file. Once you’ve got it typed in, save your file.

Cruisin’ with style...

image with no caption

It’s time for another test drive, so reload your “index.html” file again. This time, you’ll see the Starbuzz web page has a whole new look.

image with no caption

Watch it!

If you’re using IE, you might not see the border.

Internet Explorer does not display the border around the body correctly. Try loading the page in Firefox, Chrome or Safari to see the border.

image with no caption
image with no caption

Exercise Solution

image with no caption
image with no caption

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