Lab 9 - it130

  1. Create a lab9 directory
  2. Go to http://condor.depaul.edu/~alarrain/hci201/lab/biograph.html . Get the source and the picture, save them to your lab9 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.
    5. 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. This is one html file. This part of the lab will show you how to do a two column layout using css. Get the HTML code for http://condor.depaul.edu/~alarrain/hci201/examples/hw1nostyle.html

    9. View Source and save the code into your local system. Make sure the file name is hw1com.html

    1. You will add the styles using an external stylesheet. Create a text file and save it as twocolstyle.css
    2. Add the following styles to the stylesheet, but first link the HTML file to the stylesheet. Add the following html code to the head section of the HTML document.
      3. <link href="twocolstyle.css" rel="stylesheet" type="text/css" />
    3. Now add the styles to twocolstyle.css #header { background:#CCC; padding:15px; } #main { background:aqua; float:left; width:60%; padding-left:2%; } #main li { line-height:1.4em; } #rightbar { margin-right:5%; margin-left:62%; } #rightbar h2 { margin:0; padding:0; } body { font-family:verdana, sans-serif; margin-right:5%; margin-left:2%; }
    4. Add some of your own styles to make the document look visually appealing.
  9. Work on hw3
  10. Work on project