COIN74A - Assignment Two
- Home
- Assignment Two
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:
<meta name="author" content="Name of Author" />
<meta name="description" content="This page describes assignment 2" />
<meta name="keywords" content="List of comma separated keywords that describe what
is on the page" />
Keywords are used to rank a page in search engine optimization (SEO). The keywords should correspond to the contents of the page so that search engines will give the page a higher relevancy rating which means that it will show up higher in the search results list. These keywords should match words in the title of the page, headings, and content near the top of the page. If you want your site to be found then it is really important to have relevant keywords.
Visit the following site for a detailed description about meta data:
We have created an example website for this assignment which we will dissect and discuss.
Example DeconstructedBelow 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 data
- 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)
After you have finished your assignment and have uploaded it to the server go into the Code Reviews Forum and post a request for a code review under Assignment 2. Code reviewers should verify that all of the requirements for the assignment have been met and all links work. 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 ETUDES Tasks, Tests and Survyes (AT&S) box as well as the link to your assignment. Visit the How to Submit Homework page for details. 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.
