Lab 12 - HCI 201

These labs are not a race. Work these questions at your own pace. It is better to be complete with each question before moving on. If you don't finish during class, that is okay, finish at home.

Each of you should do your own lab. You will get more out of it. You can get as much help as you like from me or your classmates.

Remember to upload your work to your students account.

1. Create a simple html file and add the following code to it. Add a few styles.
<h1> A Walk Through Lincoln Park</h1> <embed src="http://condor.depaul.edu/~alarrain/hci201/video/lpc5.mpg" width="600" height="450" autoplay="true" />
2. Download the code for the designchecklist.html. Your project must follow this check list. For this lab question add some styles to this document. You must use an external style sheet. See examples under class13 notes, external stylesheet. In addition to your own styles, you must:
   • Use a class selector. See the examples under class13 notes in the class selector section. For example you can alternate the heading colors. (Typically this is not a good idea and violates the consistency design principle but for the sake of practicing using class selector we can violate this today)
   • Play around with the span tag. For example highlight some text. See example cselector.html under class13 notes.
   • Add a footer using an ID selector again see design checklist
   • Add some of your own styles, like margins (this should be second nature by now), background etc.. See design tips example to you worked with for the quiz. Remember all style rules are going into the separate text file.
   • Make sure you link the external style sheet to the html document.
   • Don't forget to upload to your students account. Check it online.
3. Discuss your project with some classmates. Get ideas about content. I have done the hard part for you by giving you the template so I want some good CONTENT. Your web site will be posted so all your classmates can see.