Instructions

**This is an activity that can be very helpful practice. There may be references to assignment 5 made but don’t worry about that. Attempting this assignment can be very eye opening.**

For this activity, we will practice using div tags AND html 5 layout tags such as section, header, footer, and nav. As of week 4, there is no more building web pages without some type of layout structure. HOWEVER, this assignment focuses strictly on div layout with the incorporation of html 5 layout objects.

Divs are layout boxes that you can create css code for that will tell those boxes where to place themself in the web page, how wide to be, how tall to be, etc. However, you also see properties assigned to other html tags, specifically html 5 layout tags. This helps properly markup the document. REMEMBER divs are general layout tags and html 5 layout tags are more specific for markup purposes.

For this assignment, you are merely building the layout for a potential web page. The example of that page and the one you will build the layout for is provided in the instructions link below. It is important that you read them carefully. THIS MAY PROVE TO BE DIFFICULT FOR YOU BUT YOU WANT TO GET A HANDLE OF DIV, HTML 5 LAYOUT, AND HOW IT ALL WORKS. YOU MAY NEED TO RESEARCH OR REVIEW OTHER MATERIALS OUTSIDE OF YOUR TEXTBOOK & NOTES, IN ORDER TO FULLY GRASP THIS ACTIVITY. DO NOT COPY EACH OTHER AS EVERYONE SHOULD BE SUBMITTING THEIR OWN WORK.

In short, again read the instructions attached, you will create a css document of “rules” that you will later link to an html document in order for specific html tags to follow those rules. For example, you should see in the instructions an id selector called outer that is set to different properties. Remember with CSS in order to see those properties or rules work, you have to apply the selector to a tag.

EXAMPLE:

<div id=”outer”>…..</div>

In this example, a <div> tag was used inside the html document and an attribute called id was set to a value of outer because that’s the name of the rule in the css document. Remember there are three types of selectors: tag selectors, class selectors, and id selectors. All of these selectors can have rules or properties you set in css, but a html file is where you call these rules into action. If any of this is foreign to you, then you need to revisit weeks 3 & 4’s notes and review the textbook information on Basic and Advanced CSS (5.3 position properties). The notes from week 3 and/or 4 tell you how to link a css document to an html document with the use of the <link> tag.

The full, detailed instructions for this assignment are below.

Read the instructions for this activity carefully.