Main Section

Your Assignment:

You will use all of the code from this file, the html page you are reading right now, as your starting point for this exercise. I am having you use this file because it already has most of the div's that have id's that you will create rules for. You will then modify the code as instructed, zip and send to me the folder you will create below (part of the exercise) and all of the files in it, as a single zip file.

Some # symbols are not in front of color hex code in the instructions below. Be sure to include them in your code. Other similar items have been deliberately excluded from the instructions such as dashes, correct property names, and so on.

However, please note that the links in the code are all null links, meaning they don't go anywhere but will display the formatting of a link. These use href ="#" to make them appear as if they are links. Do not remove the # symbol from them.

This is what you will create: image of final page

  1. Create a folder named: yourlastname_K12
  2. Copy the code from this file (the code of the html file you are looking at right now).
  3. Save it in your new folder naming it: yourlastname_K12.html
  4. Please create an external css file for all your css.
    1. Save it in the same folder.
    2. You will need to link to it from your html file.
    3. Tip: you may want to start by creating the css code in the head of this file, inside <style> tags. When you are done, create the css file and move the css code into it, without the style tags. Replace the (now empty) <style> tags with a <link> to the css file.
  5. Set the body tag as follows:
    1. Set the background color and default text color both to: 62292F
    2. Default font: arial, size 95%, and a line height of 1.2 ems.
    3. Zero-out the page.
  6. Create a wrapper div around all the existing content on the page using the following id:
    <div id="wrapper">
    1. Put the tag above immediately after the opening <body> tag.
    2. Don't forget the closing </div> tag for the wrapper. It needs to go just above the closing </body> tag.
  7. Use css to set the wrapper to:
    1. A width of 950 pixels
    2. Center the wrapper on the page, with 0 margins top and bottom.
    3. Background color: FAE9CB
  8. In add ti on to the wrapper div you just created, there are already four div tags in the page with the following id attribute values. We will now address them:
    1. header
    2. nav
    3. main
    4. footer
  9. For the header div:
    1. Give it a background color of 9E1F32
    2. Text color: E9C06A
    3. Set the header div to have padding 30 pixels of padding on all sides.
    4. There is one h1 tag in it. Replace the text in it to Your first name's Floating Nav and Image.
      • For example, mine would be:
        Dan's Floating Nav and Image
    5. Set this specific h1 element in the header div to have:
      1. a margin of 0 on all sides so that its margin does not escape the header.
      2. a text size of 2.2 ems
  10. For the nav div:
    1. Give it a background color of D4988E
    2. Set its width to 250px
    3. Float it to the left.
    4. Give it padding of 10px on all sides.
  11. Set the main div to have:
    1. A margin on the left side that is 30 pixels wider than the width of the nav bar.
    2. Set it to have padding of 10px left and right.
  12. For the footer div:
    1. Give it the same background and text colors as the header.
    2. Add this:
      clear: both; (this is another way to prevent the columns from penetrating the footer).
    3. Font size: .7em
    4. Align the text to the right.
    5. Padding: 10 pixels on all sides except right: 30 pixels.
    6. Replace the words "Et Tu Brute?" with the following: copyright symbol, the year, your full name.
  13. Set the wrapper div to have the following in addition to what you have already defined for it:
    1. Save this solid color image file in the same folder as your html and css files: bg image to tile vertically
    2. Set it as the background image of the wrapper and to repeat vertically only.
    3. Notes:
      • If you have properly set up a float for the nav bar, this will create a faux column to fill in the area underneath the nav bar div ending at the top of the footer div using the same color as the background-color of the nav bar div.
      • Without using this background image with vertical repeat, the nav's background-color would have come to an abrupt end as soon as its content ended, leaving a gap between it and the top of the footer, making the column seem to end.
      • The width of the image will match the width of the nav div.
  14. There is a garland image in the Lorem Ipsum text below.
    1. Create a compound selector using the section id and a class, name it:
      #main .decor
    2. Apply the following properties and values to the rule:
      1. Float the garland image to the left
      2. Give margins of 15 pixels top, right, and bottom, with 0 for the left margin.
      3. Border: 5px solid #9E1F32
  15. Set links as follows:
    1. In the nav bar:
      • Create an a:hover, a:focus rule (comma-separated because you will apply the same properties to both) - set both to have a text color of 62292F with an underline. Note that you need to explicitly set these or else the "a" rule's text decoration and color will prevail.
    2. In the main div:
      • "a" tag text color: 9E1F32 with an underline.
      • Again create an a:hover, a:focus rule, but this time within the main div. Set these to have a background color of D4999E with no underline. The text color does not need to change, it will be controlled by #main a
  16. Zip the entire folder and send it to me. Do not zip the files individually.

Optional part of exercise:

Important: delete this section regardless of whether you use the html5 tags or not, from the title "Optional..." up to, but not including, the horizontal rule.

Note that a lot of the divs that you will be using have id's that are very similar or identical to the names of html5's tags, but as of this writing, most of them are supported by almost every browser in use today, but IE in versions earlier than 9. Therefore I am not asking you to use them instead of the divs. But you can if you want to by replacing the div elements as per below with the html5 tag listed. Don't forget to change the closing tags as well! IF you are going to do this, you must test it in any browser except IE earlier than IE9, before you send it to me:

id name html5 tag
<div id=header> <header>
<div id=nav> <nav>
<div id=main> <article>
<div id=footer> <footer>

That's all. Hope you enjoyed this little escapade! Send me the html file - I don't need the garland image file as long as you saved it with its original name as per the instructions. Keep all the text in the html file that you send including the Latin text below.

Lorem ipsum

Dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Eu fugiat nulla pariatur. Sunt in culpa consectetur adipisicing elit, quis nostrud exercitation. Ut labore et dolore magna aliqua. Duis aute irure dolor. Velit esse cillum dolore ullamco laboris nisi yellow garlandcupidatat non proident. Sed do eiusmod tempor incididunt ut enim ad minim veniam, quis nostrud exercitation.

Rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Eu fugiat nulla pariatur. Sunt in culpa consectetur adipisicing elit, quis nostrud exercitation.

Ut labore et dolore magna aliqua. Duis aute irure dolor. Velit esse cillum dolore ullamco laboris nisi cupidatat non proident. Sed do eiusmod tempor incididunt ut enim ad minim veniam, quis nostrud exercitation. Velit esse cillum dolore in reprehenderit in voluptate consectetur adipisicing elit. Sed do eiusmod tempor incididunt duis aute irure dolor sunt in culpa. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Quis nostrud exercitation eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, duis aute irure dolor in reprehenderit in voluptate. Cupidatat non proident, velit esse cillum dolore consectetur adipisicing elit. Eu fugiat nulla pariatur. Quis nostrud exercitation lorem ipsum dolor sit amet, ullamco laboris nisi. Mollit anim id est laborum.

Donec nec libero

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Duis aute irure dolor ut enim ad minim veniam, ullamco laboris nisi. Eu fugiat nulla pariatur. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Sunt in culpa excepteur sint occaecat lorem ipsum dolor sit amet. Velit esse cillum dolore mollit anim id est laborum.

Eu fugiat nulla pariatur. Sunt in culpa consectetur adipisicing elit, quis nostrud exercitation. Ut labore et dolore magna aliqua. Duis aute irure dolor. Velit esse cillum dolore ullamco laboris nisi cupidatat non proident. Sed do eiusmod tempor incididunt ut enim ad minim veniam, quis nostrud exercitation. Velit esse cillum dolore in reprehenderit in voluptate consectetur adipisicing elit.