Assignment 1
For this assignment, you will create a small web site. The topic of the site will be instructions to make or create something (either something you have done, or would like to do).
Pages
You must create the following pages for your site:
- A front page for your site where users will start, see a brief introduction, and be able to navigate to the other pages.
- Overview of the project: what you'll be creating, what it involves, why you'd want to do it, etc. (Choose details as relevant to your topic, of course.)
- A photo gallery: a few pictures giving highlights of project. (These may be actual photos of a project you have completed, or speculative examples of the end product you imagine.)
- The instructions to complete the project.
Markup
Create .html files for each of the four pages in the site. As always, make sure the way you use the tags matches the meaning of the content. The pages should be linked together so a user can navigate between them in a reasonable way. You may want to start with the provided HTML skeleton.
We will be looking for you to demonstrate a reasonable grasp of HTML: that means a decent variety of tags used: maybe 6 or more unique tags in the <body>s of your site (in total across all pages). Hopefully the four different pages will lead you a decent variety of tags naturally.
Use the HTML Validator to make sure all of your markup is valid.
Any content that is not your own (images from other sources, text, etc.) must have a source cited (as always in any University work). The format of the citation doesn't matter, as long as it it visible to someone viewing the site and gives a clear idea what content came from where. Not including citations will be considered academic dishonesty.
Stylesheet
All of your pages should use the same stylesheet, so they have a consistent appearance. Add a <link> to the stylesheet in the <head> element of each of your pages like this:
<link rel="stylesheet" href="style.css" />
Again, we will be looking for you to demonstrate a reasonable grasp of the basics of CSS. You should make a reasonable variety of changes: several different changes to several elements of the HTML. Have a look at the CSS Reference for a list of the things that can be done in CSS.
You may find it necessary to go back and edit your HTML pages to add new tags or classes. That's fine (but make sure you don't introduce validation errors in the process).
Use the CSS Validator to make sure your CSS code is valid.
Uploading
Create a directory in your public_html named assignment1. Upload all of your files (HTML, CSS, images) to that directory.
Directory names become part of the URL like this (if you have a menu.html file as part of your assignment):
http://cmpt165.csil.sfu.ca/~userid/assignment1/menu.html
Find your site on the web server and make sure everything is still working. Again, remember that URLs are case-sensitive: picture.jpg is a different URL than Picture.JPG and the URL must match the filename.
Submitting
Submit the URL of your “front page” HTML to the CourSys activity Assignment 1. We will find your other pages by navigating from there.