Overview
This assignment contains two tasks that must be completed individually:
- using this link respond to a few questions based on our reading using a web form; and
- you create and upload to the CS web server a web page about yourself using HTML.
Your Personal Web Site
The second task is to create a very small web site about yourself. It will contain only two pages:
- one which will introduce yourself, and
- one to tell your visitors about your hobbies
This assignment is fun and fairly open-ended. The purpose is to give you practice writing basic HTML code. You will also gain experience with the tools for text editing and file transfer.
Setup
Download a zipped copy of the hw1
starting folder onto your Desktop and open it to see its contents.
At this point, it contains a starting template for your page,
assign1.html
, and a (empty) subfolder named images
, to hold all the images you will use for this site.
Part A: Write and link two html pages
- Using Atom (or your text editor of choice), open
assign1.html
. Add HTML code to specify the content of your page, which should be some information about yourself, your home town, your ambitions, or whatever strikes your fancy. The goal is not volume, but demonstrating skill. - Create a second html page, named
hobbies.html
, and save it, within the hw1 folder, as a sibling to theassign1.html
page. Add some content to tell us about what you like to do in your spare time. - Interlink these two pages, by adding a link from the
assign1.html
page to thehobbies.html
page, and vice versa.
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). Both pages should have descriptive titles, and a variety of HTML tags, that you have learned about in lab and lecture, to specify the structure and content of your page, including but not limited to:
- an unordered list (to provide some personal information, for example)
- an ordered list to describe courses you're taking this semester, or something else
- a paragraph to explain why you're taking CS115 (with an appropriate header)
- another paragraph to tell us something about your goals in life or something you are proud of
- images and links (at least one of each) that provide more context for what you're writing
Notes:
- You must put all the images used in your pages within the
images
folder. - Each image must be 100 kB or less in size, so resize or crop your images to meet this requirement.
Part B: Validation
Validate your HTML code using the "Validate by File Upload" or "Validate by Direct Input" option of the W3C validator.
When your validation succeeds, include the HTML validation icon () at the bottom of your page (you can copy the code for the icon from our lab2 page).
Submission
You'll turn this assignment in by uploading your hw1
folder to the
CS
server (you will not submit a hardcopy).
Uploading to CS Server
Once you are done, the structure of your hw1
folder on your Desktop should look like this:
Do the following to upload your folder from your Desktop to the server:
- Login to your server account (using Fetch).
- Drag your
hw1
folder from your Desktop to yourpublic_html
directory (NOT your assignments folder!) - Check that everything uploaded properly to the correct location:
using a browser, enter the URL for your assign1.html page on the server (substituting
your own username for
wendyw
) :http://cs.wellesley.edu/~wendyw/hw1/assign1.html
- Test your work again, to make sure all is working well (images shown, links working, etc).
Coding Style
Your HTML 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 state where you found code you are using, which is not your own and was not discussed in class.
Your html code 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.
As an approximate rule, the length of a line shouldn't go beyond 80
characters.
Due Date/Time
Remember that assignments may not be turned in late (unless you are using an extension). They are due at midnight 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 each assignment alone. 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 in your communications. You should not be looking at other students' (current or past) 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.
Grading
These are the criteria we use to grade the homework:
- Homework was submitted on the server by the due date. We will check the timestamp of your files. Late submissions receive 0 points (but make sure that you're aware of the course extensions policy).
- Folders and files have the specified names and are uploaded to the proper location, otherwise we cannot see your page.
- Code is validated, and the corresponding image shows at the bottom of the page. No errors.
- HTML 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.
- The links are working as expected.
- Each of the images you are using is smaller than 100 KB and shows in the page.