12.10. 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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Here's all
the usual XHTML administravia.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Starbuzz Coffee</title>
<link type="text/css" rel="stylesheet" href="starbuzz.css" />
</head>
<body>
<div id="header">
Followed by a <div> for the
header and a <div> for
the main content area.
<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.headfirstlabs.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 This is more
of the main content area continued
over here.
<a href="beverages.html#house" title="House Blend">
House Blend</a>,
<a href="beverages.html#mocha" title="Mocha Cafe Latte">Mocha Cafe Latte</a>,
<a href="beverages.html#cappuccino" title="Cappuccino">Cappuccino</a>,
and a favorite of our customers,
<a href="beverages.html#chai" title="Chai Tea">Chai Tea</a>.
</p>
<p>
We also offer a variety of coffee beans, whole or ground, for you to
take home with you. Order your coffee today using our online
<a href="form.html" title="The Bean Machine">Bean Machine</a>,
and take the Starbuzz Coffee experience home.
</p>
</div>
<div id="sidebar">
<p class="beanheading"> Here's the <div> for
the Bean Machine.
We've given it an id of "sidebar".
Hmm, wonder what that could mean?
<img src="images/bag.gif" alt="Bean Machine bag" />
<br />
ORDER ONLINE
with the
<a href="form.html">BEAN MACHINE</a>
<br />
<span class="slogan">
FAST <br />
FRESH <br />
TO YOUR DOOR <br />
</span>
</p>
<p>
Why wait? You can order all our fine coffees right from the Internet with our new,
automated Bean Machine. How does it work? Just click on the Bean Machine link,
enter your order, and behind the scenes, your coffee is roasted, ground
(if you want), packaged, and shipped to your door.
</p>
</div>
<div id="footer">
© 2005, Starbuzz Coffee
<br /> And finally, we have the <div> that makes up the footer of the page.
All trademarks and registered trademarks appearing on
this site are the property of their respective owners.
</div>
</body>
</html>
|
