Computer Science and Computer Engineering 115
Solve it with the Computer!
Fall 2006

Lab 8
Creating a Home Page

Goal:

Create a home page and post it on the Sage so it is available 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 HTML 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..

Remember that Sage is case sensitive and it will not recognize your home page if the file name contains any capitals. Likewise, the capitalization of your .css and images must match exactly.

Important note: You must upload your HTML page, CSS file and any local images to Sage. You can use the SSH Secure Shell Transfer client to upload your page and images. It is available in the labs or you can download it. A link exists on the Useful Resources page.

Normally the web page you develop should be your home page and should be named home.html. Create a very simple file containing a hyperlink to your web page and submit it to the CSCE submit system as Lab 8. All you need is something like
<a href="http://www.plu.edu/~username/">http://www.plu.edu/~username/</a>
Hint: While displaying your page in a browser, you can copy the URL from the box in the browser into your simple file. Just select the complete URL and then copy it using your favorite copy method.

Note: If you already have a home page that you want to keep, you can use a different name but remember to explain the reason for the different name in the file you submit to the paper grader. The lab8.html should contain a link to the new home page created for this lab and add a link from your new web page to the existing home page.

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. Test your web page using both Mozilla (or Netscape) and IE to make sure it works in both browsers. Remember to test after uploading the file(s) to Sage.

The specific requirements:

  1. Use the normal introductory statements required or recommended for XHTML.
  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. Use a .css file for your styles.
  4. The class declarations in the .css file must include at least 6 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 the classes must be used in your home page.
  5. In the style for the body tag, set the backgound color and/or a background image and the default color for the font.
  6. Use at least two levels of heading <h?> tags. One of these tags should use a special class defined in the style page.
  7. Include at least three paragraphs: At least one must use a simple paragraph tag and another two must use different style classes declared in the style page.
  8. Include an unordered list. (Lists cannot be inside a paragraph although you can use a paragraph inside a list item.)
  9. At least one <br /> tag and one <hr /> tag.
  10. 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.)
  11. Use at least four hyperlinks including those satisfying another requirement.
    1. At least one must use a clickable image.
    2. At least one must use text as the link.
    3. At least one must be to a named anchor in your page. (That implies you have a named anchor to link to.)
    4. At least one must be a mailto link.
  12. At least 3 images including images satisfying other requirments. Remember the alt attribute is required.

Before submitting your web page, make sure to test with more than one browser and monitor. Browsers are not all equal. Neither are monitors. The paper grader will not necessarily use the same browser that you use. Obviously the paper grader will not use your monitor. In particular, make sure that the colors you use for the background, links, and fonts have enough contrast so the text is easy to read.

Hints for satisfying XHTML 1.0 strict requirements:

Extra credit: (3 points)

Make sure your page satisfies the XHTML1.0 and CSS validation standards. Links to the validation services are given on the Useful Resources page. If you try this option, you should allow extra time that probably will be needed to correct the errors. To advertise that you page mets the standards, you might want to start with an alternate template that includes images and links like shown on the bottom of this page. If you click them (and your file wall doesn't prevent them from working) you will be taken directly to the validation site. To get extra credit you will have to either add those links to your page or mention that you deserve this extra credit in file you submit to the paper grader.

Extra credit: (3 points)

Read chapter 5 of the XHTML book to learn how to use tables. Add a table to your web page. Use legal table options and/or CSS to make the table look appropriate to your page.

Extra credit: (2 points)

Read chapter 4 of the XHTML book to learn how to add multimedia to your web page. Add image map, sound or film clip to your web page. It is suggested that you make sure you use a common method and file type to insure the paper grader can hear or view the results of your efforts. Simple links like those shown on page 81 is recommended for audio or video.

Grading:

Your web page will be graded on content, appearance, and impression given the viewer as well in satisfying all the above requirements and being valid XHTML. You can earn a maximum of 5 points of extra credit on this lab.

Special instructions for submitting your home page:

  1. These instructions assume you have already registered your web pages (http://www.plu.edu/online/#webpage).
  2. Make sure your home page is named "home.html".
  3. Use a file upload program such as SSH Secure File Transport to connect to your account on sage.plu.edu. Use your normal e-pass password.
  4. Select the folder public_html.
  5. Upload you home page, your css file, and any other file used by your homepage.
  6. Check to make sure home page is working properly by using the URL http://www.plu.edu/~your username.
  7. Create a simple web page lab8.html that only needs to contain the line
    <a href="http://www.plu.edu/~username">http://www.plu.edu/~username</a>.
    Test to make sure the link works correctly.
  8. Use the normal submit system to submit this file for lab 8. (The paper grader will download this file and use the link to look at your home page.)

Due date:

Monday, Nov. 6. 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 penalty. (Late assignments turned in over 24 hours after the due date are 2 days late and are subject to a 40% penalty.)

Lab8.html, 10/30/06

Valid XHTML 1.0 Strict Valid CSS!