Overview
This assignment contains two tasks:
- 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 Page
The second task is to create a page about yourself. 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 code. You will also gain experience with the tools for text editing and file transfer.
Check out this example webpage.
Setup
- Download a zipped copy of the
hw1
starting folder onto your Desktop and open it by double-clicking on it. Thehw1
folder initially contains a starting template for your page,assign1.html
, and a subfolder namedimages
. (It also contains another file calledanswers1.html
, more about that later.) - You must put all the images used in your page in the
images
folder. - Your images must be 100 kB or less in size, so resize or crop your images to meet this requirement.
Part A: Write the page content with HTML
Using TextWrangler (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 interests, your ambitions, or whatever
strikes your fancy. The goal is not volume, but demonstrating skill.
- A descriptive title for the page (using the
<title>
tag). - 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 personal information,
- an ordered list to describe courses you're taking this semester,
- a paragraph to explain why you're taking this class (with an appropriate header),
- another paragraph to tell us something about your hobbies or something you are proud of,
- images and links (at least one of each) that provide more context for what you're writing.
NOTE: your image files must be placed in the
images
folder you created.
Part B: Validation
Validate your HTML code using the option validate by upload of the W3C validator.
When your validation succeeds, include the HTML validation icon () at the bottom of your page (copy the code for the icon from our reference 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
Your hw1
folder on your Desktop should look like one of the screenshots below,
once you have completed the homework:
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. - Check that everything uploaded properly to the correct location:
using Chrome, enter the URL for your page on the server (substituting
your own username for
wendyw
) :http://cs.wellesley.edu/~wendyw/hw1/assign1.html
- Verify that your page appears in the browser window, and make sure that all images are showing and that no links are broken.
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 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. In TextWrangler, stick to the area on the screen
on the left of the line delimiter. 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. 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 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 of CS courses.
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 validation icon (for HTML) 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.
- 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.