Math 171 Spring 2005, Lab 3 (double lab)

Due Tuesday, February 1, 11:59 P.M.

1. HTML Links
2. Overview
3. Requirements
4. Hints
5. Extra Credit

Links

• HTML tag reference
• More HTML Examples

Overview

Your goal for this lab is to create a basic web page that uses all the HTML elements you learned about in class. All HTML documents should be edited using ordinary plaintext editors, i.e. notepad in Windows or vi in UNIX. You do not need to submit anything via email, since I will be grading your web pages online. Once you have created your webpages, you will need to do the following in order to make sure your documents are available on the web:

1. If you created your HTML documents in Windows, you need to copy all your files to one of the UNIX servers using secure copy.
2. In UNIX, move or copy all your documents and images into ~/www-home
3. Make sure your homepage is called index.html
4. Make sure all your files are world readable using the command
   chmod -R go+rX ~/www-home
   This will recursively search through your www-home directory, add world read permission to each file, and add world execute permissions to each executable file/directory.
5. Using your favorite web browser, visit http://www.math.utk.edu/~username, where username is your UNIX username. You should be able to see all the pages you created.

Webpage requirements

You are free to organize your website however you wish, as long as you include the following:

• At least two separate web pages
• A link back to your homepage in each document
• It should be possible to reach all your web pages by following links from the homepage
• Your name somewhere on the home page
• A link to an email address
• At least six links to offsite webpages
• At least three images/animations (possibly including background images)
• At least three text styles/fonts
• At least three text colors
• At least two background colors
• At least one horizontal rule
• At least one table
• At least one list
• At least one page that uses two or more frames

For all formatting options, the default formatting counts as one of the options. For example, you only need one page to use the non-default background color.

Content

You do not need to put any personal information on the web if doing so makes you uncomfortable. However, a few of the more common ideas for a personal website include:

• A short paragraph describing yourself, your major, your hobbies, etc
• A photograph of yourself
• A short autobiography
• Your schedule of classes
• Your resume
• A list of your favorite links
• Commentary on current events

Hints

1. Create a skeletal HTML document for your homepage in a file called index.html, as described in lecture. Make sure you can load this document in your browser and the title appears in the browser's title bar before continuing.
2. Now copy this document into another file, say page2.html. Edit index.html so that it contains a link to page2.html, and edit page2.html so that it contains a link back to index.html. Now reload index.html in your browser. You should see the link you created. You should be able to click on the link, have page2.html load, and then click on the link back to index.html. Make sure this works before continuing.
3. Now add a list to one of the pages. Reload the page in your web browser and make sure the list displays correctly (all the list items show up with bullets or numbers as appropriate, everything is indented properly, etc.).
4. Once the list looks right, add another of the required elements to one of your web pages. Every time you add a new element, reload the web page in your browser window and make sure everything still displays correctly. If at any point something looks wrong, stop adding new features until you have fixed the problem. Hopefully, the mistake will be in code you have just written, making corrections easier.

Extra Credit Assignments

• Add a photo gallery to your website. You may use either photos you find on the web or scanned/digital photos of your family/friends/pets etc. The first page in the photo gallery section should consist of a rectangular grid of thumbnails. Note that the purpose of thumbnailing is to provide a quick-loading index of files with links to slower-loading images. Therefore, the thumbnail file size should be no more than 10% of the original file size (use an image editor), and clicking on the thumbnail should activate a link to the full-sized image.
• Add a navigation bar to the site using frames. All links in the navigation bar should open in the main content window. Further, all offsite links should either open in a new browser window or in the full browser window currently open (i.e. not in a subframe). Additionally, you should have a link on your home page to switch between a frames and non-frames version of your website.
• Publish one of your papers you have written for another class. You should copy/paste the plaintext of your paper into a textfile and then add markup. There should be a navigation frame for the document (preferably with the table of contents in an ordered list) which allows the user to skip around to different sections in a separate frame. Each section may be in a separate file, or you may include all sections in one HTML document. The document should consist of at least five different sections.
• Validate your HTML:
  1. Add the following to the first line of each HTML file that defines a frameset:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
     This tells the HTML validator what version of HTML your document uses.
  2. Add the following to the first line of each HTML file that does not define a frameset:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     Again, this tells the validator the HTML version.
  3. Add the following to the HEAD section of each HTML file:
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
     This tells the validator what character set your document uses.
  4. Enter the URL of each of your HTML documents in the address box at The W3 Consortium's HTML validation service, located at http://validator.w3.org/.
  5. After fixing all the errors found by the validator, send email to gbutler@math.utk.edu or moseley@math.utk.edu.

Back to the course information page