HTML and CSS Reference
In-Depth Information
Building the Starbuzz blog page
From the previous exercise, you know that we're using a
<section>
element for the blog section (in
the middle column) and an
<article>
element for each blog post. Let's get started doing that, and
we'll come back to navigation in a bit. We've already created the “blog.html” file for you by making a
copy of the file “index.html”, and replacing the “main”
<section>
with a “blog”
<section>
. You
can get the complete “blog.html” from the code downloads for the topic; here's part of it:
We'
re using
a <sec
tion> e
lement
for th
e
mid
dle col
umn, jus
t like w
e did f
or “ma
in” in
the
index.
html fi
le.
<section id="blog">
<article>
<h1>
Starbuzz meets social media
</h1>
<p>
Here at Starbuzz we're embracing the social media craze. In fact,
we're going further than any of our competitors and we're very close…
</p>
<p>
Sound like science fiction? It's not; I'm already testing our final
prototype social network cup as I write this…
</p>
<p>
So, keep your eyes out for this amazing new cup. And I'll be
releasing a video teaser soon to tell you all about this new invention,
straight from Starbuzz Coffee.
</p>
</article>
<article>
<h1>
Starbuzz uses computer science
</h1>
<p>
...
</p>
</article>
<article>
<h1>
Most unique patron of the month
</h1>
<p>
...
</p>
</article>
</section>
And with
in each <article
>, we use <h1>
for
the head
ing, and <p> for
the paragraphs
of
text. Pr
etty simple! But
more meaningfu
l
than a b
unch of <div>s,
right?
Get the full blog post text from the “blog.html” fi
le you
downloaded from wickedlysmart.com.
