Lab 6 - HCI 201

Each of you must do your own lab. You can get as much help as you like from me or your classmates. Remember you have to turn in all of your labs.

1. On your webserver, create a subdirectory of lab called lab6. Upload this lab to that subdirectory.
2. Get the HTML code for 10 design tips. http://condor.depaul.edu/~alarrain/hci201/examples/designtips.html.

View Source and save the code to your local system. Make sure the file name is designtips.html

3. Make a copy of the file designtips.html call it designtipslab.html

4. Take some time and study the html code, most of it you should be familiar with.
5. This question has multiple parts. For each part you will add the styles to an external stylesheet.
• Using Edit plus create a text file named style.css. Call it style.css and make sure it is saved to the same directory as designtipslab.html
• Type the following styles into style.css.
• body { margin-right: 25%; margin-left: 7%; background-color:linen; text-align:justify; font-family: Verdana, sans-serif; font-size:1em; }
• Next you need to link the style sheet to designtipslab.html. Add the HTML code to the head section of designtipslab.html <link href="style.css" rel="stylesheet" type="text/css" />

  After you insert the above piece of code display designtipslab.html in your browser. Make sure the styles have altered the document.

• Add the following style. Remember to display it in the browser.
h1 { font-size: 1.3em; color: black; margin-left: -1.2em; }
• Add the following style. Remember to display it in the browser.
h2 { font-size: 1.2em; color: maroon; margin-left: -1em; margin-bottom:0; }
• Add the following style. Remember to display it in the browser.
p { margin-top:.2em; line-height: 1.3em; }
• Add the following style. Remember to display it in the browser.
.callout { font-size: 90%; text-align: justify; margin-left: 30%; color:darkviolet; }
• Add the following style. Remember to display it in the browser.
#footer { font-size: .7em; color:orangered; border-top: 2px dotted orangered; margin-top: 4em; }
• Play around with the styles, create your own style. Try and come up with a better look. For other styles or go online. Change colors, fonts, margins etc ...
• See CSS tutorial 4. Read the section on inline styles. Add a few inline styles to the document.
6. Type the following URL into your browser
   http://condor.depaul.edu/~alarrain/hci201/examples/floatleft.html
• Save the picture to your images directory. Right click on the picture and select "save picture as".
• Save the source code to your lab6 directory. Right click and view source. Remember when saving the file remove the [1] if it is present in the file name. The file name should be saved as floatleft.html
• Display floatleft.html in your browser locally.
• Modify the CSS so the picture floats right. Also modify the margin so the text doesn't crowd the image.
• Save this as floatright.html
7. Add another picture to floatright.html. Use this picture
   http://condor.depaul.edu/~alarrain/hci201/images/cumberland1.jpg   Also add some text, just make up some text.
8. Modify floatright.html so the first picture floats left the second floats right.
9. Upload your files to the lab6 directory.
10. Look over homework 2.
11. If you do not have any questions you can leave