Lab 7 - 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 lab7. 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.
• Look over homework 2.
• If you do not have any questions you can leave