HCI 201 - Project Preparation Part 3

The content you add to your homepage must be different from what you do in this lab.

For this lab you will add some HTML to index.html from previous lab and add some styles to style.css.

1. Go to http://condor.depaul.edu/~alarrain/hci201/project/flower1.jpg and download the picture of the flower. This must be saved to your images directory.
2. Add the following HTML code to index.html. Add this code inside the div tag with id content
<h2>News</h2> <h3>Oct 15, 2005</h3> <p>Sorry, due to allot of classwork I will not be updating my blob for awhile</p> <h3>Oct 10, 2005</h3> <br /> <img src="images/flower1.jpg"> <p>Picture of a flower I took while walking through Lincoln park. Pretty !</p> <h3>Oct 4, 2005</h3> <p>Just saw the Allman Brothers at Park West.</p>

Display index.html in your browser.

3. For this part you will style up the content. Add the following styles to style.css.

Make sure you view the page in your browser after you add each style.

• Add this style to the file.
#content{ font-family:Verdana,Helvetica,sans-serif; font-size:1em; }

Display index.html in the browser.

• Add this style to the file.
#content h2{ font-family:Arial,sans-serif; font-size:1.4em; color:darkorange; margin-bottom:.2em; border-bottom:1px dotted darkred; }

Don't forget to view it

• Add this style to the file.
#content h3{ font-family:Helvetica, sans-serif; font-size:1.1em; margin-top:0; margin-bottom:0; color:darkolivegreen; }

Don't forget to view it

• The following style will float an element left. We will use this to float the image I am doing this so the text that pertains to the image will line up next to it.
.floatleft{float:left;margin-right:10px;}

Before you can see the results of the float, add the following attribute and value to the image tag.

class="floatleft"

Don't forget to view it. Notice a problem.

• When you added the above float command all the elements that follow will float. To prevent elements from lining up along side the image you must clear the next element. Add the following CSS command to the stylesheet.
.clear {clear:both;}

Before you can see the results of the clear, add the following attribute and value to the h3 element that follows the image and its paragraph.

class="clear"

After you add that attribute the line with heading Oct 4, 2005 should be under the image.

4. Transfer index.html, style.css to your project directory. Don't forget to transfer the flower image.
5. Type the following URL into your browser.
http://XXX.conlu.com/yourLogin/hci201/project