CISC474, 06S, Homework 1 (H01)

Due Date/Grading

Prerequisites

Reading

1. Sebesta, Chapter 2, and chapter 2 reading notes

Assignments you should complete first

• Group assignments A03, A04

Your Task: Create a personal CISC474 home page on strauss

Create a web page for yourself on copland at the following URL:

http://copland.udel.edu/~username/cisc474

where username is replaced with your username. To do this you will edit a file called:

   ~/public_html/cisc474/index.html

Unix details to make your web page readable

You'll need to use the unix chmod command to make the directory readable to the web server.

  chmod -R a+rx ~/public_html/cisc474

You might also have to do the following if you've never yet had a web page on copland:

  chmod a+x ~
  chmod a+rx ~/public_html

For this assignment, hand code. Don't use an HTML editor.

Note that you should hand code this HTML using a plain ASCII text editor such as emacs or vi on Unix, or notepad on Windows, etc.

For this assignment, you should not use a WYSIWYG (what yo see is what you get) editor such as FrontPage, DreamWeaver or GoLive.

Later in the semester, it will be perfectly reasonable to use such an editor for some purposes—just not for this assignment. Here's why: the purpose of this assignments is to get really familiar with the low level structure of XHTML, because that understanding is needed in order to automate the creation of web pages with Java, JavaScript, PHP, etc.

So, if you use such an editor, you are missing the point of the whole exercise (see page xxvi in the intro of your HFSJ book (Head First Servlet and JSP, the text that starts with "We strongly recommend that you not use anything but a basic editor until you complete this book." Pages 6 and 16 of the Head First HTML book (not required for this course, but a really good book!) also stress this point.)

One exception: if you are already very familiar with XHTML, and you are comfortable using the "split" design mode of a tool such as Dreamweaver where you can hand code in one window, and see the result in the other window, then fine. Go ahead and use Dreamweaver, but use the hand coding window, not the WYSIWYG window. One nice thing about that approach is that even as you hand code, the editor does "auto completion" of open/closing tags, attribute values, etc.

Note: I hand coded the entire page describing this homework assignment in emacs. So I'm not asking you to do anything that I'm not willing to do myself. However, in the interest of full disclosure, I admit: I will use Dreamweaver for a lot of the other pages I make for the course this semester.

Required Content for your CISC474 web page for Hwk1

The content of your page is very simple at this stage. Include each of the following elements somewhere on your page:

1. The name you go by in class
2. Your full first and last name (so the TA can find you on the roster).
3. An unordered list of the folks in your group Each of the names in this list should be a hyperlink to that student's personal CISC474 web page (similar to what is on your groups' web page; you can just cut and paste if you like.)
4. A hyperlink to the web page for this course:

   http://www.udel.edu/CIS/474/pconrad/06S

5. A link to your group's web page.
6. A link to another page with the URL:

   http://copland.udel.edu/~username/cisc474/personal/aboutMe.html

   This page should contain some content at your discretion that introduces you to me, your TA, and your classmates. You might write something about yourself, or some other topic that interests you (e.g. movies, books, music, sports). Don't sweat this too much; it is just some "content" to practice writing HTML and to help me, your TA, and your classmates get to know you better.

7. Add "prev student" and "next student" links to your page, so that we make a web ring of the entire class. Use "alphabetical order by last name" within your group to order the students. The first student from group n should link to the last student from group n-1, and the last student in group n should link to the first student from group n+1. Wrap around between groups 1 and 10 just as you did in A04.

8. A link to a writeup of your "individual" story you submitted to WebCT as part of A01. Call this file http://copland.udel.edu/cisc474/A01.html. Start by just "cutting and pasting" what you submitted to WebCT, but then see if you can develop the story a bit more.
   
   To help, I'm going to ask your classmates to go through the discussion board on WebCT, and make suggestions. If you find those suggestions helpful, you can incorporate them into your story (it would be nice to give your classmate an acknowledgement in your writeup if you use their suggestion.) See next item too, before you get started on this.

9. Oh yeah, you are that classmate (the one mentioned in the previous item) for everyone else in the class. So, take a few moments to go through the WebCT discussion board for A01, and find one individual story that has not yet been commented on. (It helps if you can find a story that you think is particularly interesting, but depending on how quickly you act, you may have to just choose whatever story is left.) If possible try to be the first person to comment on at least one of the stories you find. Read through the story, and make suggestions. You could suggest:

   • ways to make the story more clear (if some part of it isn't clearly explained, from your perspective)
   • additional features that would make the application more useful or cool
   • anything else that you think might help that person improve her/his story.

   The golden rule definitely applies here: give the kind of advice that you yourself hope to receive, and with the same diplomacy and "people skills" that you hope people will use when giving advice to you. (One caveat: if you are person that likes it when people are blunt and harsh with you, well, maybe in that case, the golden rule might be "not so helpful". In that case, use your best judgement.)

10. Once you've been the first person to comment on a least one story, OR, if/when each story has at least one comment, go through and comment on some additional stories—at least three total, including the one you did in the previous step— more if you like. The more generous you are with your comments, particularly helpful ones, the more likely folks are to help you out in return.

Required Markup for your CISC474 web page for Hwk1

The markup of your CISC474 page should be kept simple. You'll have an opportunity to demonstrate your creativity and mastery of HTML and CSS later on. For now, don't get too fancy.

However, somewhere between the two web pages (your main index.html page and your aboutMe.html page) you need to include at least all of the following. Your TA/Instructor will use this as a checklist when grading; points may be deducted for any of the following that are not included:

1. Include exactly one <h1> element on each page.
2. Include one or more <h2> elements as appropriate.
3. The <ul> and <li> elements for your group members
4. A <p> element.

Some Style Rules you must follow to get full credit

1. Include an XHTML comment after the opening <h1> tag that includes your full name, course number, the name of the assignments (in this case hwk01), and your udel email address.
2. Do not use headline tags out of order, e.g. do not use an <h4> tag for a headline unless this is a subheadline under an <h3> headline. Folks who haven't yet learned about CSS sometimes choose the level of headline tag based on the size of the resulting font, but this is an error; headline tag level should reflect the structure of the document. We'll learn how to change the font size, shape and weight of any level of headline tag when we look at CSS in Chapter 3 of Sebesta.
3. Try to make the resulting HTML code easy to read (i.e. indent tags properly, use line breaks, etc.)

Validating your web page

To get full credit, your web page must validate at validator.w3.org. Sebesta describes validation in Section 2.4.2. There are also notes about validation on the course web site.

Work with your page, with the error messages you get, and with the material about XHTML in your textbook, and in other resources on the web and elsewhere until your page validates cleanly as XHTML 1.1

Note that this page validates as valid XHTML 1.1, so again, I'm not asking you to do anything I'm not doing myself.

Grading Rubric