Assignment 12 — Introducing HTML 5

Description:

HTML 5 is the newest HTML standard and includes additional elements for laying out and incorporating elements within your website. Instead of styling <div> elements with CSS properties that define header, footer, and so on, you can use elements specifically created for that type of information. The assignment this week will introduce you to these elements and how to use them to create page layouts.

HTML 5 includes the following new elements for formatting the layout of your page:

<header> - contains the heading information for a web page or a section
<nav> - contains nav information for a web page or section
<article> - contains a complete, self-contained chunk of information, such as a blog entry or newspaper article
<section> - contains a group of themed content; one use of a section might be to provide a container for <article>s to provide a heading and an introduction
<aside> - supplemental information to the main page content
<footer> - contains the footer information for a web page or section; this section typically includes such things as copyright and contact information

The following diagram illustrates one way that you could construct a web page using these elements:

In a code view, this would appear as follows:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title of page</title>
 </head>
 <body>
  <header>Header information goes here.</header>
  <nav>Navigation information goes here.</nav>
  <section>
     <h1>Title of the section</h1>
     <p>Section intro</p>
     <article>
       <h2>Article title 1</h2>
       <p>Content of article 1</p>
     </article>
     <article>
       <h2>Article title 2</h2>
       <p>Title content</p>
     </article>
  </section>
  <aside>Supplemental Information goes here</aside>
  <footer>Footer information goes here</footer>
 </body>
</html>

In addition the structural elements, HTML 5 also provides some other such as <video> to enable to insert videos within your web page and <time> to format time information.

For more information, see Chapter 12 of the Head First HTML and CSS book.

HTML elements:

<article>	<aside>	<footer>	<time>
<header>	<nav>	<section>	<video>

Videos:

Introducing HTML 5

Tasks:

Read and complete the exercises from Chapter 12 of the Head First HTML and CSS book.
Note: Review the steps on video from pages 580 - 593; however, you do not need to include video in your version of the files or complete the exercises related to video.
Create a folder named Chapter12.
In your Chapter12 folder, create your customized versions of the following files.
- blog.html
- index.html
- starbuzz.css
- images folder that contains the required images
Duplicate the folder structure described in the book.
Ensure that all of your links work correctly and display the appropriate file when clicked.
Validate each of the HTML pages at https://validator.w3.org/. Fix any errors that occur.
Upload the contents of your Chapter12 folder to your website.
Zip your Chapter12 folder and name the file yourName_chapter12.zip.
Submit the zipped file through Blackboard. In the comments section in Blackboard, enter a URL to the files on your website.

Grading criteria:

Your assignment should demonstrate:

Revising assignment 11 to use HTML 5 elements (<header>, <aside>, <section>, and <footer>).
Using the <nav> element to add a navigation bar to the web page.
Creating a blog page using the <section> and <article> elements. The blog page should appear have the same header and footer and left sidebar as the main page.
Using the <time> element to add dates to your blog entries.
Creating the CSS styles to make a horizontal navigation menu from an unordered list.
Adding links to both the main page and the blog page on each page.
Creating CSS rules using psuedo elements to format the links within the navigation bar.
Validating your HTML and CSS files and correcting any errors.
Uploading your files to your website.

Due:

By 11/29

Example assignment:

Chapter 12 example