Overview
This assignment contains two tasks:
- Using this link respond to a few questions about numerical systems using a web form; and
- Improve your Home Page using CSS.
Your Improved Web Page
The second task is to improve the Web page you created last time. You will copy your page from assignment 1, add another HTML page to the folder, linking both pages together, and then style them with CSS.This assignment is fun and fairly open-ended: you get to design what you like, with a few specific requirements. The purpose is to give you practice writing basic HTML and CSS code.
Requirements
Begin by creating the necessary folder structure and files using exactly the names specified, using lowercase and no spaces:
- Download your
hw1
folder from your ownpublic_html
folder to your Desktop. It should contain your files from the first assignment. - Rename the folder
hw2
, and rename the fileassign1.html
toassign2.html
. - You will be creating additional HTML and CSS files; put them in
hw2
. - Your
images
folder should contain all the images used in your page. As with assignment 1, your images must be 100 kB or less in size, so resize or crop your images to meet this requirement (see the lab on image manipulation for a reminder of how to do this).
Part 1: Write/modify page content with HTML
Make a copy of assign2.html
(which already contains the structural tags needed),
and rename it as courses.html
,
also within the hw2
folder.
Open both files in your text editor (TextWrangler, or whatever you use). For each file, modify the header comment and the title to correspond to the new pages.
Modify the body of courses.html
with new content, which should be some information about
the courses that you took this year.
The goal is not volume, but demonstrating skill.
You can write whatever you like, but it must be valid, well-formatted HTML code to receive full credit (read the section below on coding style), and it must include these specific elements:
- A variety of HTML tags that you have learned about in lab and lecture to specify the structure and content of your page.
- In
courses.html
, add a hyperlink toassign2.html
. - In
assign2.html
, add a hyperlink tocourses.html
.NOTE: Each hyperlink should use a relative URL.
Validation
Just like in assignment 1, validate each of your HTML pages by using the option validate by upload of the W3C validator (the validation icon should be displayed on each page). Once the pages are on the server, you can re-validate each by clicking on the icon on that page.
Part 2: Add style with CSS
In this part, you will style your page by writing several CSS rules in a separate file and apply this styling to your HTML code.
- With your text editor, create a new file and name it
style.css
. - In the
<head>
section of both HTML pages, add the following line: - Back in the CSS file, write at least 5 CSS rules to style:
- 3 different tags
- 1 element specified by ID
- several elements specified by class. Use the class more than once in your page.
You can have more than five style rules to fit the vision you have imagined for the page; these are just the minimum.
- The style rules should apply to elements in both HTML pages.
- You may use properties you have learned about in class such as color, background-color, font, width/height, text decoration, borders, etc. Also try to use CSS rules that you haven't seen in class, but discovered through your own reading. Comment them in your stylesheet file by telling us how you discovered them.
<link rel="stylesheet" href="style.css">
Validation
Validate the CSS by going to the the WC3 CSS validation page, and then add the CSS validation icon to the end of your HTML files. Do not put the validation icon code in your CSS file - it must go in the HTML files!. You can find the code for including the icon in our reference page).Submission
Uploading to CS server
Login to your server account (using Fetch).
Upload your hw2
folder to your cs115-assignments
directory, which in turn is inside your public_html
directory on the server, and check the URL for your page to be sure all your files
loaded correctly. Note that this location is different than the one you used last time.
To check, if your account is myname
, enter the following URL in
the browser location bar:
http://cs.wellesley.edu/~myname/cs115-assignments/hw2/assign2.html
substituting
your own username for the fake myname
above. You should see the page
on the browser. (If you cannot see it, we cannot see it and we cannot grade it. Make sure that all images are showing and that
links are not broken.
Coding Style
We will repeat our instructions on coding style. These instructions are applicable to all future homeworks and the project, even if they are not explicitly written.
Your HTML and CSS code must be written cleanly and indented appropriately to reflect the structure of the elements you are defining. This is a graded aspect of every assignment. Furthermore, you must comment your code in all homework and project pages. Comments include a header comment at the top of the file, and comments within the code when a comment will help clarify the purpose of a line or section of code. You should also enter comments to explain where you found code that was not discussed in class.
Your lines should be of a reasonable length, so that you don't get
a horizontal scroll bar when you view the source of your page using
a web browser. The way
to avoid this is to put hard returns
in your code: that is,
press the return
or enter
key when the line starts
getting too long.
Due Date/Time
Remember that assignments may not be turned in late. They are due before11:59pm on the due date (check the schedule). Furthermore, remember that this policy means that you should not modify turned in work after the due time has passed, so that when we grade it, it's not time-stamped late.
Honor Code
The Honor Code applies to this course. You are encouraged to discuss assignments with other students, the tutors, and with your instructors. However, you must solve, write up, debug, test and document the assignment on your own. In other words, it is acceptable to talk with other students in English (or any other human language), but not acceptable to use any formal language and especially not HTML, CSS or JavaScript. You should not be looking at other peoples' code or showing them yours. If you worked with others or you have obtained help from any source, you must acknowledge their contribution in writing.
Homework assignments must be your own work. You may not look at solutions from other students, either from the current offering or from past offerings.
Grading
These are the criteria we use to grade the homework:
- Homework was submitted on the server by the due date. We have a program that checks the timestamp of your files. Late submissions receive 0 points.
- Folders and files have the required names and are uploaded to the proper location. We generate links to your folders automatically, thus, if you don't conform with the instructions, we cannot see your page (the link will be broken).
- Clicking on the two validation icons (for HTML and CSS) shows no errors. Note that this will only work once your page is uploaded to the web server (cs.wellesley.edu).
- Your files have comments at the top and as necessary interspersed in the code.
- Your code follows our recommended coding style.
- You have used all HTML elements we required and applied styling (through CSS rules) to the minimum number of things (3 tags, 1 id and 1 class).
- The links are not broken.
- Your images are smaller than 100 KB and show in the page.
My images are not showing
A common problem that prevents images from showing when uploaded to the server is that the name of the image file is not matching exactly the relative URL used for thesrc
attribute. Even when you are able to see the images on your
local computer (Mac and Windows are indifferent to letter casing), our web server (a Linux
machine) is very exact and will penalize you. Also, don't use spaces in the name
of files, since spaces can break URLs.