Lab 4 - HCI 201
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.
Labs are not to be turned in.
- Please complete previous labs before starting lab4. By next class you must be caught up and have completed the first 3 labs. I will not spend any class time next week discussing labs 1-3.
- After today I will not spend any more time during class dealing with student accounts, creating directories(both locally and remotely), basic SSH issues and
simple HTML syntax. If after today you still are not sure about these topics then you will have to schedule time with me before or after class. I am happy to sit with you and help.
Do the following:
- In your students account make sure you have a public_html directory.
- Make sure you have a subdirectory of public_html called hci201.
- Make sure you have a subdirectory of hci201 called hw
- Upload your first homework, hw1.html to the hw directory.
- Make sure you have a subdirectory of hci201 called lab. You should use this directory to upload your
labs, then if you are stuck completing these at home you can send me the link.
- Type the following HTML code into a file named index.html.
<![CDATA[
<html>
<head>
<title>HCI 201 homework page for (PUT YOUR NAME HERE)</title>
</head>
<body>
<h2>List of Hci201 homework links</h2>
<ul>
<li><a href="hw1.html">HomeWork 1</li>
</ul>
</body>
</html>
]]>
- Upload index.html to the hw directory of your students account. Then type the following URL into your browser
<![CDATA[
http://students.depaul.edu/~yourLogin/hci201/hw
]]>
You should see this index page. If so, use this to link to your remaining homeworks and projects.
- You will use index.html as an index to your homeworks and projects. Add some style to it, look at the source code
for defliststyle.html.
http://condor.depaul.edu/~alarrain/hci201/examples/defliststyle.html
- We can use CSS to add margins to a document. Play around with deflist.html
Add the following style to deflist.html
<![CDATA[
<style>
body{margin:3% 20% 0 5% 0}
h2{color:maroon}
</style>
]]>
- Read class 4 notes.
- Check the homework page tomorrow for homework 3.
- If you do not have any questions you can leave. See you next Monday.