Lab 7 - It 130

1. Create a lab7 directory
2. Go to http://condor.depaul.edu/~alarrain/hci201/lab/biograph.html . Get the source and the picture, save them to your lab7 directory.
• 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; }
• Next place the following attribute and value into the image tag. Remember to view the page in the browser.
class="rightimage"
• 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; }
• Replace the first letter 'T' of the text with the following HTML code <span class="dropcap"> T </span>

  Now view in the browser.

• 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/ .

For the next set of questions create a new HTML page and add all the movies to the new page

3. For this question you will create a movie out of some photos and a simple web page that shows your movie. In lab we will use Windows Movie Maker. Go online a find some pictures (about 5) or use your own photos.
• Create a subdirectory of lab7 called photos. Place your photos in this directory.
• Create a subdirectory of lab7 called video. Save your movie to this directory.
• Next, open Windows Movie Maker. Spend a few minutes and look over the program.
• Make a video out of the photos, play around and enjoy.
• Create a simple web page that embeds your movie. Save this webpage to the lab7 directory. Use the code to embed the movie.
<embed src="video/lpc6.wmv" type="video/mpeg" autoplay="true" />
• If you are using a different program the file extension most likely will be different from wmv
• Note: Movie files can be very large.
• Upload your movie and web page to your students account. Note you are only given about 15MB of storage, make sure your movie is small around 2MB.
4. Go to www.picturetrail.com. Create an account and upload some photos to your new picturetrail account. Next create a photo flick and embed this video into your webpage from above. Note it is probably best to create a hotmail or yahoo email account separate from your personal account when giving out your email online.
5. Go to www.youtube.com. Find a video on a topic that interests you(Music is always a good choice). Insert both type of codes into your webpage. You will link to the youtube account that has the video and embed the video player into your webpage.
6. Add a few styles to your web page.
7. Finish Homework 2.
8. Upload, to your webserver, all your files for lab7.