NHS Designs
Web Design

HTML 03: More about elements

Your Big Break at Starbuzz Coffee

(a fictional company)

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.

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

Starbuzz CEO

Go on. Take the Starbuzz gig and launch your BIG-TIME Web career!

Starbuzz CEO

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

Starbuzz napkin


Beginning the HTML Page

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, then load it into your browser.

Start by typing in the beverages straight from the CEO's napkin above. These beverages are the content for your page. Skip the HTML code for now and just type it in as you see it, including spaces between lines.

Later 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" on its own line at the top of the text.

Save the file as index.html in a new folder called lastnamefirstinitial_starbuzz.


Take the Page for a Test Drive

What do you see when you view index.html in a browser?

All you've done so far is type 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 the page.


What's Structure?

As you've already seen, structure 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.

Let's add that structure to your index.html.

Here are the available tags to use:

  • <h1>
  • </h1>
  • <h2>
  • </h2>
  • <p>
  • </p>


Are We There Yet?

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

Let's add these important tags to index.html. Take notes for your reference.

1. First, surround your HTML with <html> and </html> tags. This tells the browser the content of the file is HTML.

2. Next add <head> and </head> tags. The head contains information about your Web page, like its title. For now, think about it this way: the head allows you to tell the browser about the Web page.

3. Go ahead and put a title inside the head. The title usually appears at the top of the browser window.

4. Surround the body content (all those headings and paragraphs) with the <body> and </body> tags. The body contains all the content and structure of your Web page - the parts of the Web page that you see in your browser.


Another Test Drive

Save your changes and reload the file in your browser.

If you've typed it in correctly, you'll see that things look a bit better than before. The browser ahs interpreted your tags and created a display for the page that is not only more structured, but also more readable.


Tags Dissected

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

<h1>Starbuzz Coffee Beverages</h1>
  • The <h1> opening tag begins the heading. A tag consists of the tag name surrounded by angle brackets; that is, the < and > characters.
  • You usually put tags around some piece of content. Here we're using tags to tell the browser that our content, "Starbuzz Coffee Beverages", is a top level heading (that is, heading level number one).
  • </h1> is the closing tag that ends the <h1> heading. You know it's a closing tag because it comes after the content, and it's got a "/" before the "h1". All closing tags have a "/" in them.
  • We call an opening tag and its closing tag matching tags.
  • The whole shebang is called an element. In this case, we can call it the <h1> element. An element consist of the enclosing tags and the content in between.

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



Element = Opening Tag + Content + Closing Tag



Starbuzz CEO

Starbuzz coffee cup

1. Write the HTML for the new "mission.html" on a sheet of paper.

2. Type in your HTML using Notepad, and save it as "mission.html" on the desktop.

3. Once you've done that, open "mission.html" in Internet Explorer.

4. Check your work. If there are any errors, correct your code in the text file and on your sheet of paper.

5. Turn in the sheet of paper with your name and your HTML code on it. You will turn in the starbuzz folder later.


Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

resources · copyright information · Natomas High School Design Department