COIN74A - Homework Two

DW Cover

This assignment has several tasks.

Part 1: Before starting on the assignment:

Read the section on the best way to organize your work.
Read the section on How to Submit Homework Assignments.

Part 2: Create a 4 page website

You will create and upload 4 files to the public_html folder of your UNIX account or your web hosting space. Each page will have links to each of the other pages. It should be possible to get to any of the pages, the home page as well, from each of the pages. Make sure to give a title for each of the pages. Add meta tags to the head section of each page. A webmaster will add meta tags that include the web page author, keywords, and a description which are used to help make the site more visible by search engines. The meta tag for an author and a description looks like the following:

We have created an example website for this assignment which we will dissect and discuss. Click the link to see the example website.

Example Deconstructed

Below is a snapshot of the example rendered in a browser window. The elements of interest for this assignment are labeled in the yellow boxes.

Page Title is shown on the tab of the browser

Page_1, Page_2, Page_3 are hyperlinks to the other pages in this site

Informaticus blog is a hyperlink to a site external to this site

Image points to alert.jpg image that is stored in the images folder

Informaticus is a special hyperlink, mailto:, that brings up a new mail message with the From and To fields filled in. The email address that follows mailto: is where the email will be sent.

We will look at the HTML code that was used to render the page. Below is a snippet of the code contained within the <head> tag. Notice the <title> tag is set to 'Index Page' which is the title of the page. The <meta> tags contain data about the data which you will use on each of your pages. Make sure to use keywords that pertain to your page and/or site.

In the <body> tag we see the hyperlink tag, <a href="name">My Link</a> and the <img> tag. There are several ways to use the hyperlink tag. In our example we use it to:

link to other pages within our site

link to a different website

send an email (mailto:)

To insert an image the <img> tag is used. The src attribute is set to the name of the image. If the image is in a folder that is different from the page then it's path must be set. In our case, it is stored in the images folder in our site. The alt attribute should be set which is text that describes the image. This text will be displayed if the image cannot be found, as a tooltip when the mouse rolls over the image, and is used by applications for the physically impaired. The width, height, and border are in pixels so only the number is needed.

For a more detailed description on how to use images and hyperlinks visit the Web Programming Quick Start tutorial.

In summary, your site should include:

Each page must have titles (do not leave your page <title>Untitled Page </title>
Each page must include a proper xhtml DOCTYPE declaration and meta tags
Each page must have internal links to each of the other pages
Each page must have at least one image (it can be small)
Each page must have an email link at the bottom of the page (you may use webmaster@yourdomain.org as a placeholder, but the link must be correct)

Select a classmate as a buddy to do a code review for your homework. Make sure they click all the links from all the pages, and you should do the same for a classmate. If there are broken links or anything that doesn't work, help the buddy troubleshoot until have a perfect homework sample. After you have approval from your code reviewer, type their name in the home page as your code reviewer then submit it in Etudes which is described in the How to Submit Homework page. If you are using Foothill's server then your link should look like the following:

http://krypton.fhda.edu/~yourusername/HW2/

You can keep the same buddy for all your assignments, but variety is good. Try to select a different buddy for some of your assignments, and make sure to have two or three study buddies as you approach the final project.