This assignment contains two tasks:
- Using this link respond to a few questions based on our reading using a web form; and
- Improve your Home Page using CSS.
Your Improved Web SiteThe second task is about improving the little web site you created in the previous assignment. You will add a new web page to it, link it to the other page, and finally style them all with CSS.
This assignment is fairly open-ended: you get to design what you like, with a few specific requirements. The purpose is to get practice writing basic HTML and CSS code.
Begin by creating the necessary folder structure and files using exactly the names specified (all lowercase and with no spaces):
- Download your
hw1folder from your own
public_htmlfolder, to your Desktop. It should contain the files and folders you created for the first assignment.
- Rename the folder to
hw02, and rename the file
- You will be creating additional HTML and CSS files; put them all in
imagesfolder stays unchanged. Of course feel free to add more images there, if you want so. As it was the case in hw1, all images must be 100 kB or less. If you need a refresher on how to do so, see the relevant part of a previous lab.
Part 1: Write/modify page content with HTML
Create a new html page, named
Save it within the
hw02 folder, as a sibling to the other two html documents in there.
Add some content to
courses.html, which should include a list of the courses
you are taking this semester together with some information about them.
The goal is not volume, but demonstrating skill.
Interlink all three html pages, so that the user can, from a page, directly visit any of the other two pages. Use only relative URLs.
For each file, modify the header comments and the title appropriately.
Just like in assignment 1, validate each of your HTML documents 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 pages by writing several CSS rules in a separate file and apply this styling to your HTML code.
- In your text editor, create a new file and name it
- In the
<head>section of each of the three HTML pages, add the
link tagto connect it with the style sheet (
- Add CSS rules to
style.cssto modify the appearance of (at least):
- two different tags
- one element specified by an ID
- more than one elements that belong to a class.
- You may use properties you have learned in class readings 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 where you found them.
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!
Uploading to CS server
Login to your server account (using Fetch).
hw02 folder to your
(Note that this location is different than the one you used for hw1.)
View your uploaded pages in a browser, to be sure all your files loaded correctly and all links work as expected. The URL to your opening page will look like this:
If you cannot see your page, we cannot see it either, and we cannot grade it.
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 stated every time.
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 comment at the top of the file, and comments within the code when a comment helps 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:
enter key when the line starts
getting too long.
Remember that assignments may not be turned in late. They are due before 11: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.
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.
- The links are not broken.
- Your images are smaller than 100 KB and show on 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.