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.
<h1>A Sample Blog Post</h1>
Posted on <time datetime=”2013-11-01”>1st November 2013</time>
Here is my blog posts text content.
3. Update the <title> and <meta> elements within the <head> element to reflect the content of the News
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-
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.
We've just opened a brand new restaurant at 200 West 44th
Search WWH ::

Custom Search