Lab 11 - 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.

1. Skip if you already finished lab10
• Create a local directory called project. This should be a subdirectory of hci201.
• You will download to this project directory, the following 4 files: 1) project1 template, 2) The green background, 3)The external stylesheet, 4) The picture of suzzie.
• The Template can be found here:

http://condor.depaul.edu/~alarrain/hci201/project/projtemp1.html

• The green background can be found here:

http://condor.depaul.edu/~alarrain/hci201/project/greenback.jpg

• The Stylesheet can be found here:

http://condor.depaul.edu/~alarrain/hci201/project/style.css

• Download all three files and the picture of suzzie. For projtemp1.html you want the source code. Make sure each file is in the same directory.
• Next you should upload all 4 files to your students account into a directory called project. Directory project must be a sub directory of hci201. Directory hci201 must be a subdirectory of public_html.
• Once every thing is uploaded, type in the following URL into your browser:
http://students.depaul.edu/~yourLogin/hci201/project/projtemp1.html
• You should see the project template
• Locally Rename projtemp1.html to index.html
• Upload index.html to the project directory
2. By now you should have an index.html file in your project directory of your students account.
3. Modify index.html and change suzzie's name to your name and the theme of the web site. Note: if you do not have a theme for your project1, just make something up. You can change it later.
4. Modify the links to reflect the theme of your web site. Just change the last three.
5. Save index.html and upload to the project directory of your students account, index.html.
6. Type the following URL into your browser
http://students.depaul.edu/~yourLogin/hci201/project

You should see the template web page

7. Quiz question. You will not be able to do this question until you finish the above questions and have your index page for the quiz set up. This would be lab8 questions 1 and 2. Finish lab8 questions 1 and 2.

   What you want to be able to do is be able to link from your quiz index page to your project page. Since both directories quiz and project are siblings that is, they both are direct subdirectories of public_html you need to go back one directory then move forward.

   Here is the command to do that:

   Place this html code in your quiz index page.
   <a href="../project/index.html">project 1 </a>
8. Finish the quiz.
9. Do not attempt the remaining questions until you finish the quiz. The following questions are designed to help you with the project
10. Get the code for bloga.html and upload it to your project directory. Now get your index page to link to this. Do this even if you do not plan on having a blog.

http://condor.depaul.edu/~alarrain/hci201/project/bloga.html

11. Get the code for blogb.html and upload it to your project directory. Now get your index page to link to this. This should replace the existing blog page. This page gives an example of using a table for the layout of the content.

http://condor.depaul.edu/~alarrain/hci201/project/blogb.html

Note you do not have to use these, I am just giving you some ideas.

12. Spend some time working on your project