HTML and CSS Reference
In-Depth Information
1.
First, create a
news.html
file in your project folder.
2.
Open the
about.html
file and copy its contents into your new
news.html
file.
Using the <header> Element to Group Content
You have already learned about the
<header>
element in Chapter 2, but you can also use it to group together
heading elements (such as h1, h2, h3) and metadata about the content of a section. This is especially useful if you
are presenting blog posts on a web page.
Say each blog post includes a title and a date on which it was posted. The title is treated as a heading element and
the posted date would be the metadata, as shown in the following example.
<article>
<header>
<h1>A Sample Blog Post</h1>
<p>
Posted on <time datetime=”2013-11-01”>1st November 2013</time>
</p>
</header>
<p>
Here is my blog posts text content.
</p>
</article>
3.
Update the
<title>
and
<meta>
elements within the
<head>
element to reflect the content of the News
page.
4.
Remove the
class
attribute from the About link in the navigation and place it on the News link.
5.
Locate the
<section>
element with the ID
page-text
and delete any content that is in this element.
6.
Create a new
<h1>
element in this section and give it the text
Latest News
.
7.
Create an
<article>
element underneath this heading. This element will hold the first of your news art-
icles.
8.
Within this
<article>
element, create a new
<header>
element to hold the article title and metadata.
9.
Use a
<h1>
element for the article title. The first article is
New Restaurant Opening!
(including the
exclamation mark).
10.
Now create a
<p>
element underneath this
<h1>
that will contain the date the article was posted.
11.
You can use the
<time>
element to mark up the
posted on
date. Add the following code to your new
<p>
element. Note the use of the
datetime
attribute.
Posted on
<time datetime="2013-11-01">1st November 2013</time>.
12.
Create a new
<div>
element underneath the
<header>
element to hold the main article content.
13.
Add the following content to this
<div>
. Here you use
<p>
elements to mark up each paragraph of text.
<p>
We've just opened a brand new restaurant at 200 West 44th
