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...
Go on. Take the Starbuzz gig and launch your BIG-TIME Web career!
The CEO scribbles something on a napkin and hands it to you...
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 on the desktop.
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, 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.
Let's add that structure together on the white board in class. Take notes for your reference.
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 the code on the white board in class. 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
Go ahead and change your index.html file by adding in the tags we wrote on the white board in class. Once you've done that, save your changes and reload the file in your browser.
If you've typed it in correctly, you'll see that thinsg 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:
- 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.
Remember
Element = Opening Tag + Content + Closing Tag
Source: "Head First HTML: with CSS & XHTML" by Elisabeth Freeman and Eric Freeman
