Computer Science and Computer Engineering 120
Computerized Information Systems
Fall 2006



Lab 11

Goal:

Create a home page and post it on the Sage so it is available on the internet. Alternative: if you already have a home page or if the page you are creating does not have the characteristics of a "home" page, then you can name the file something else.

Preparation for the lab:

Review class notes and chapters 1-5 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. Alternatively, you may want to start with your lab 8 and upgrade it to the standards of lab 11.

The exercise:

Create home page in XHTML. It should be named "home.html" (or use another name). Make sure that the page has some theme and is not just a jumble of HTML that satisfies the individual requirements that follow. Remember 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 image file names must match exactly.

Normally the web page you develop should be your home page and should be named home.html but there are alternatives.

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.

After uploading your file, create a very simple file containing a hyperlink to your web page and submit it to the CSCE submit system as Lab 11. All you need is
<a href="http://www.plu.edu/~username/">http://www.plu.edu/~username/</a>
if your page is named home.html. If not you will need:
<a href="http://www.plu.edu/~username/filename.html">http://www.plu.edu/~username/filename.html</a>
(This file only needs to have this one line. It does not have to be a legal web page.) Test the link to make sure it works correctly.
Hint: While displaying your uploaded 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 lab11.html file 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.

Note: A home page would normally be something that you would like to be the very first thing a person sees if they find your web page. It typically it is some kind of introduction to who you are or your interests. If the page you design is not really suitable for a "home" page, you can use a different file name. Just make sure you provide a link that really works with your file name.

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 use 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 Firefox, (or Mozilla or Netscape) and Internet Explorer to make sure it works in both browsers. Remember to test again after uploading the files 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, only the properties in classes used in your home page will be included in meeting this requirement.
  5. In the style for the body tag, set the background 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 ordered 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>, <code>, <small>, <strong> or <em>. (It is suggested that you use css class definitions for bold, italics or underlining. Use a tag that actually enhances your page and does not look like it was introduced just to satisfy this requirement.)
  11. Use at least three 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.)
  12. At least 3 images including images satisfying other requirements. 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 meets 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. While debugging your page before uploading it, you may need to use the link on the class home page to do the testing. To get extra credit you will have to either add those links to your page or mention that you deserve this extra credit in the file you submit to the paper grader. Please do not display the XHTML icon if your page does not validate.

Extra credit: (1 points)

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 are recommended for audio or video.

Extra credit: (3 points)

Create a second web page and provide a link to it in your first page. To get extra credit you will have to mention that you deserve this extra credit in the file you submit to the paper grader with the link to the first page.

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 6 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 files used by your homepage.
  6. Check to make sure home page is working properly by using the URL http://www.plu.edu/~your username. (Included the file name, if needed.)
  7. Important: As specified previously, create a simple web page lab11.html that only needs to contain the hyperlink to your web page. Test to make sure the link works.
  8. Important: Use the normal submit system to submit this file for lab 11. (The paper grader will download this file and use the link to look at your home page. Without a working link to your page, the paper grader will be unable to find and grade your page resulting in a 0 for this lab.)

Due date:

Wednesday, Nov. 29. 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.)

Lab11.html, 11/22/06

Valid XHTML 1.0 Strict Valid CSS!