NOTE: * The second part of this lab is currently expected to be lab 10 but the lab number is subject to change.

Computer Science and Computer Engineering 120
Computer Information Systems
Fall 2006



Lab 8

Creating a Home Page - Part 1

Labs 8 and 10* are a two-part lab where you are to create a home page. Lab 8 asks you to start it and demonstrate some more knowledge of HTML and intermediate knowledge of CSS. Lab 10* will ask you to complete the home page by adding such things as hyperlinks and images. You will then upload the file to Sage so that can be viewed on the Internet.

Preparation for the lab:

Review class notes and chapters 1-4 of the XHTML book. The "Useful Resources" page
http://www.cs.plu.edu/courses/csce120/fall06/websources.html
contains links to a number of sources. For help with styles and CSS, please refer to http://www.cs.plu.edu/courses/csce120/fall06/CommonCSSwithStyle.html
for common CSS attributes. The link
http://www.w3schools.com/css/
provides more detailed information on CSS and is a tutorial. It is suggested that you begin by viewing and copying/saving the source of the blank template file
http://www.cs.plu.edu/courses/csce115/fall06/download/xhtml/template.html or possibly http://www.cs.plu.edu/courses/csce115/fall06/download/xhtml/ValidationCheck.html. Remember that when downloading a .html file, avoid doing a "Save as" in the "File" menu. Instead, use a "Page source" or "Source" in the View menu and then save or copy the file.

The exercise:

Create home page in XHTML. It should be named "home.html". Make sure that the page has some theme and is not just a jumble of XHTML that satisfies the individual requirements that follow. Remember that the page will be available to anyone on the internet and should be suitable for viewing by anyone.

The general requirements:

  1. The page must have a theme of some kind. Pick something that interests you.
  2. You must use a text editor, XHTML tags, and link to a .css page. Do NOT uses a web page construction tool/software such as FrontPage, Dreamweaver, etc. Do NOT use M.S. Word.
  3. Make sure the source file is easy to read.
  4. You page should use valid XHTML 1.0
  5. You will need a separate CSS file
  6. Test your web page using both Mozilla (or Netscape) and IE to make sure it works in both browsers.

The specific requirements:

  1. Use the normal introductory statements required or recommended for XHTML. They are included in the template files.
  2. In the head section:
    1. Add a comment (<!-- ... -->) containing your name, class section, and date.
    2. Use an appropriate title.
    3. Also create a link to the .css file containing your styles for your page.
  3. In the .css file:
    1. The class declarations in the .css file must include at least 4 different properties such as: background-color, color, font-size, font-family, font-style, font-weight, text-align, text-decoration, margin, or border-style. Of course, only the classes actually used in your home page will be counted.
    2. In the style for the body tag, set the backgound color and/or a background image and the default color for the font.
  4. In the body section:
    1. Use at least two levels of heading <h?> tags. One of these tags should use a special class defined in the style page.
    2. Include at least two paragraphs: At least one must use a simple paragraph tag and other must use a different style class declared in the style page.
    3. Include an ordered list. (Lists cannot be inside a paragraph although you can use a paragraph inside a list item.)
    4. At least one <br /> tag and one <hr /> tag.
    5. Use at least one text enhancing tag such as <sup>, <sub>, or <code>. (It is suggested that you use css class definitions for bold, italics or underlining.)
    6. Use at least two hyperlinks including those satisfying another requirement.
      1. At least one must use text as the link.
      2. At least one must be a mailto link.

Of course, you can add additional tags, if desired.

Note: In lab 10*, you will be asked to extend this lab with an additional paragraph, more CSS, images, and additional hyperlinks. If you keep this in mind while creating a page for this lab, extending this lab to satisfy lab 10* is much easier. For example, you could add an extra paragraph in this lab. You can plan your images even though you might not add them at this point.

Possible extra credit:

Validate your page by submitting it for validation. If successful, you can add the W3C XHTML 1.0 icon shown on the bottom of this page (or start with the ValidationCheck.html template). Suggestion: if you decide to do this option, validate frequently as you create the page. Trying to fix a long page with lots of errors is much harder than fixing a shorter page with only a few errors. (3 extra credit points.)

To claim your extra credit either add the XHTML1.0 icon or add a short paragraph just before the end of the body to specifying that you did this option to make sure the paper grader notices your extra effort.

Grading:

Content is important in this lab. Using correct XHTML is also very important. For example, a few of the things to consider include:

  1. Make sure that every tag has the corresponding end tag. (Exceptions include tags like <br />.)
  2. Use only tags shown in chapters 1, 2 and 3 (or possibly 4) to make sure you don't use tags that are illegal in XHTML.
  3. Make sure all displayed text is inside a header, paragraph, list item, or division.
  4. End paragraphs before beginning a header or list. (But is OK to put a paragraph in a list item.)
  5. Remember that just because a page displays correctly, doesn't mean that it is correct. Browsers are notoriously bad about enforcing the rules.

Your webpage will be graded on how well it follows its theme, grammar, meeting the requirements, correctness of the XHTML, general looks, and the impression its gives the reader.

Submitting your workbook:

  1. Use the URL http://www.cs.plu.edu/submit/login.php
  2. Select your class (csce120-brink-secX, Fall 2006 where X is 1 or 3) from the drop down box.
  3. Enter your submit system username and password.
  4. Click "Login".
  5. In the add Assignment box, browse to find the webpage for Lab 8.
  6. Select "Lab 8" for the assignment and then click "Upload".
  7. Repeat for your .css page and any other files needed to complete the lab
  8. Double check to make sure the file has been uploaded.
  9. Click "Sign Off" near the top right hand corner of the window.

Due date:

Tuesday, Nov. 7. There will be a 24 hour grace period. After the grace period late submittals will not be accepted except with written permission from the instructor and will be subject to a 20% per day. (Late assignments turned in over 24 hours after the due date are 2 days late and are subject to a 40% penalty.)

Valid XHTML 1.0 Strict Valid CSS!

Revised: Oct. 31, 2006