Lab 8 - HCI 201

1. Create a directory named La8 at your webserver and locally.
2. Go to http://condor.depaul.edu/~alarrain/hci201/lab/biograph.html . Get the source and the picture, save them to your lab8 directory.
3. Next add the following styles to the Biograph image document. Remember the styles go between style tags in the head. .rightimage { float:right; margin-left:20px; margin-bottom:5px; } p { text-align:justify; }
4. Next place the following attribute and value into the image tag. Remember to view the page in the browser.
class="rightimage"
5. For this part you will add a drop cap to the Biograph document. A drop cap is a very large letter at the beginning of an article. Type the following CSS code into the Biograph document. Don't view until you do the next part. .dropcap{ float:left; background:brown; color:white; font-family:arial; font-size:3em; margin: 0 .3em 0 0; padding: 0.1em 0.2em 0.2em 0.2em; border:2px solid green; }
6. Replace the first letter 'T' of the text with the following HTML code <span class="dropcap"> T </span>

   Now view in the browser.

7. Modify the drop cap CSS code to change the style. Play with the color, font, border etc .. Don't forget about http://www.w3schools.com/ .
8. Work on hw3
9. Work on project