COMP 101 Spring 2013

Lab 6: Easter Island (Floating Pictures and Fixed Width Content)

For Lab 6, you are to download two files and two pictures, make the required changes, and upload them to isis under your onyen as index.html in a folder named Lab6. That means that we will be able to access it using http://www.unc.edu/~onyen/Lab6.

Before you download the files, create the Lab6 folder in COMP101/public_html. You are to download index.html, easter.css, easter_map.gif, and moai.jpg. To download a file, right click on the file and select "Save link as..." or "Save target as..." When the dialogue box appears asking where to save them, put them in the Lab5 folder. index.html is the main page, easter.css is the style sheet, and easter_map.gif and moai.jpg are the pictures that you are to add. (These are the exact files that you used for Lab5. Alternatively, you can copy the Lab5 folder into Lab6.)

As just said, this is the same content as you used in Lab 5, but today you are going to make it a more interesting looking page.

Frst, you are to make the following changes:

• You are to position the map (easter_map.gif) floated to the left of the paragraph about "Location". You are to put a space of 10px between the map and the text.
• You are to position the picture of the statues (moai.jpg) floated to the right of the paragraph about "Statues". This picture is to have a caption that reads "The statues of Easter Island" and is to have a border around the picture and caption. You are to put a space of 5px between the picture and the text. The top of the border should align with the top of the text.

Having made these changes, however, the page looks awkward in a large window. You are therefore to make the following additional changes:

• You are to leave the body as full window width, but you are to put all of the content of the page in a centered fixed width div of 1000px in a contrasting color from the background. You do not want the text and pictures to come to the edge of the div, so you are to put 20px between the content and edge of the div.
• With pictures on the right, justified text often looks better, so you are to make all paragraphs justified.

You are to add your name and today's date to the web page in a footer section that is in a smaller font and as a comment on the css page.

The HTML and CSS for the page are to be properly formatted with appropriate indentation. You will have to indent the current content as you add the surrounding div.

As with all labs in this class, you may finish posting the lab after class, up until 10 pm.

By submitting the lab you are pledging that you have neither given nor received unauthorized help.

HTML Validator and CSS Validator