HTML and CSS Reference
In-Depth Information
A look at the markup
Now let's take a look at the new Starbuzz markup. We've taken each of the logical sections and
placed it into a
<div>
, each with its own
id
. Beyond the
<div>
s and
<span>
s, there's really
nothing here that you hadn't already seen by about Chapter 5. So, take a quick look and get
familiar with the structure, and then turn the page to check out the CSS style.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Starbuzz Coffee
</title>
<link type="text/css" rel="stylesheet" href="starbuzz.css">
</head>
<body>
…
followed by a
<div> for
the header an
d a <div>
for the main
content area.
<div id="header">
<img src="images/header.gif" alt="Starbuzz Coffee header image">
</div>
<div id="main">
<h1>
QUALITY COFFEE, QUALITY CAFFEINE
</h1>
<p>
At Starbuzz Coffee, we are dedicated to filling all your caffeine needs through our
quality coffees and teas. Sure, we want you to have a great cup of coffee and a great
coffee experience as well, but we're the only company that actively monitors and
optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean
Machine online order form, and get that quality Starbuzz coffee that you know will meet
your caffeine standards.
</p>
<p>
And, did we mention
<em>
caffeine
</em>?
We've just started funding the guys doing all
the wonderful research at the
<a href="http://buzz.wickedlysmart.com"
title="Read
all
about caffeine on the Buzz">
Caffeine Buzz
</a>
.
If you want the latest on coffee and other caffeine products,
stop by and pay them a visit.
</p>
<h1>
OUR STORY
</h1>
<p>
"A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted
in a damn good cup of coffee. Starbuzz's CEO is that man, and you already know his
plan: a Starbuzz on every corner.
</p>
<p>
In only a few years he's executed that plan and today
you can enjoy Starbuzz just about anywhere. And, of course, the big news this year
is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence,
which is growing rapidly and helping to meet the caffeine needs of a whole new set of
customers.
</p>
<h1>
STARBUZZ COFFEE BEVERAGES
</h1>
<p>
We've got a variety of caffeinated beverages to choose
from at Starbuzz, including our
