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 PageThe 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.
Begin by creating the necessary folder structure and files using exactly the names specified, using lowercase and no spaces:
- Download your
hw1folder from your own
public_htmlfolder to your Desktop. It should contain your files from the first assignment.
- Rename the folder
hw2, and rename the file
- You will be creating additional HTML and CSS files; put them in
imagesfolder 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
also within the
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.
courses.html, add a hyperlink to
assign2.html, add a hyperlink to
NOTE: Each hyperlink should use a relative URL.
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
- 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">
ValidationValidate 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).
Uploading to CS server
Login to your server account (using Fetch).
hw2 folder to your
cs115-assignments directory, which in turn is inside your
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:
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.
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,
enter key when the line starts
getting too long.
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.
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.
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 showingA 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 the
srcattribute. 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.