Lab 5 - It 130

1. On your web server and local system create a subdirectory of lab called lab5. 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 to the file style.css. Remember to display it in the browser.
h1 { font-size: 1.3em; color: black; margin-left: -1.2em; }
• Add the following style to the file style.css. Remember to display it in the browser.
h2 { font-size: 1.2em; color: maroon; margin-left: -1em; margin-bottom:0; }
• Add the following style to the file style.css. Remember to display it in the browser.
p { margin-top:.2em; line-height: 1.3em; }
• Add the following style to the file style.css. Remember to display it in the browser.
.callout { font-size: 90%; text-align: justify; margin-left: 30%; color:darkviolet; }
• Add the following style to the file style.css. 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
• Create a cub directory of lab5 called images. Save the picture to your images directory. Right click on the picture and select "save picture as".
• Save the source code to your lab5 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 lab5 directory.
10. Upload your images to the images sub directory of lab5
11. If you do not have any questions you can leave