Homework Assignment 2
Due: Thursday, Apr. 14, 2011
IMPORTANT:CHECK YOUR URL’S ON THE BROWSER BEFORE YOU SUBMIT THEM!
Reference:- Textbook: Chapter 4 & Chapter 5
- Good html reference + tutorials: w3schools.com (html)
- An intro to CSS: CSS-An Overview
- More comprehensive CSS references: Cascading Style Sheets
- A general procedure you could follow: Making web pages
Since CSS is according to the new standard, I highly encourage you to use style rules.
Part 1: (60pts) Start working on your website:
Create your website’s homepage.
Use Notepad, WordPad, or TextEdit (on the Mac)
to start a text file that you will save as hw2A-yourname.htm
when
completed. This file will be a simple page with text content and formats using
the html tages and style rules.
You will be evaluated on the content of this page. We will talk about this more in the future, but your homepage should give a general introduction to what your ‘organization’ is about and what it is offering. You may also enjoy reading The Cononical Homepage.
Create an additional page for your web site. This should be the About Us page
(history, bios, other things you may want to say, etc.). Again, use html and CSS.
Information concering writing good
About Us pages.
Save your About Us page as hw2B-yourname.htm
.
As you write down these pages’ contents, keep in mind the purpose of your site: who is your target audience, and what you are trying to convey through your website. This will be more relevant as you create future pages for your site, but it doesn’t hurt to think about it now: Should information be presented alphabetically? Grouped into categories? Presented along a timeline? Sorted from simple to complex? Organized into a hierarchy? Most people visit Web sites to find information or to accomplish some task: Keep the content of your site simple and organized in a way that is meaningful and useful to the intended audience. And try to stay consistent: same logo (in the same place) on every page, same background color, same type font, etc.
Still wondering about what to include on your Homepage and About Us page? What do these six companies have on their homepage and about us page? Look at their content and their presentation.
Upload hw2A-yourname.htm
and hw2B-yourname.htm
to your
HCI201 folder in your students account using SSH .
Here's an outline of a general procedure you could use to create your pages.
Part 2: (40pts) Create anAssignments.htm
page:
Use Notepad, WordPad, or TextEdit to start a text file that you will save as
Assignments.htm
when completed.
Write your name, email address, course number (HCI201), and section number at the top.
List your homework assignments: make an ORDERED
list for your homework assignments: Homework1, Homework2, etc.
Lists in HTML start on page 76 of your text.
Also see w3schools (lists).
Organize the page using <h1>, <h2>, etc. for headings and <p> to separate paragraphs. Where appropriate use a horazontal rule (<hr />) to separate sections. Use any other HTML tags we have covered in class or our text.
Hyperlink
the word Homework1 to make it point to your hw1-yourname.htm
file (your website proposal - not the image).
Under Homework2, create a nested UNORDERED list, listing the items: Homepage and About Us.
Hyperlink the word Homepage to point
to your hw2A-yourname.htm
file and hyperlink
the words About Us to point to your hw2B-yourname.htm
file.
Hyperlinks are discussed in Chapter 6 of your text.
As an example, here is Benjamin Dover's Assignments page.
Upload your Assignments.htm
file to your HCI201 folder (inside your public_html
folder) using SSH.
In upcoming assignments, you will re-format this page and add more features to it.
Use COLweb to submit the URL’s:
- to your Assignments page (like → http://students.depaul.edu/~yourlogin/HCI201/Assignments.htm)
- to your hw2A page (like → http://students.depaul.edu/~yourlogin/HCI201/hw2A-yourname.htm)
- to your hw2B page (like → http://students.depaul.edu/~yourlogin/HCI201/hw2B-yourname.htm)
Remember: Unix is case sensitive!
Write down the file names above EXACTLY the way you have saved them into your students
account, and don’t forget the ~ in the URL.
Posted: 4-06-2011