Lab 3: Welcome to the World Wide Web!
The dreaded HTML Python

Due: Wednesday March 2nd, 2016 before 11:55PM

Required files:

Read on for more specific requirements. There is nothing to submit on T-Square.

Every day, you probably use quite a few different websites on the Internet. But have you ever considered making one? In this lab, you will get a chance to design your very own web page.

The usual sources of help are available for this lab. TAs can help with debugging and uploading your site if you are stuck, but try to avoid questions about basic HTML- there are plenty of resources available on the Internet for this.

How do I start?

Take a look at the following tutorials if you need some information on the basics of using HTML and CSS:

HTML, as you should know, is a language that specifies the content of a web page, and a CSS file specifies how that content is presented to the viewer (the colors, fonts, positioning, etc). HTML files end with the ".html" file extension, and CSS files end with the ".css" extension. A CSS file is "linked" to an HTML file by means of a special HTML tag in the header; see the sample index.html to find how this works. You will need at least two .html files and one .css file by the time you are finished.

To start, download these skeleton files:

Do not change the names of the files, but fill them in with your own HTML and CSS. You can use the sample index.html as the basis for the other .html file(s) you make (you will need to make at least one other html page).

File editing notes

It is critical when saving HTML files to always save them as plain text, not RTF, Microsoft Word files, or any other format. Even if there is an option for "HTML file", ignore it in favor of the option for plain old text.

If on Windows and using Notepad to edit files, you can save with the .html extension with the following trick: Click File -> Save As, and in the filename fox type in the filename you want in quotes (for example, "index.html"). This will prevent Notepad from tacking on ".txt" to your filename, resulting in something silly like "index.html.txt".

Notepad saving example
Example of saving using Notepad on Windows

If you are on a Macintosh, we recommend that you use your programming editor (IDLE or Calico) to write text files and save them with an .html extension, or use the TextEdit application and select "Format->Plain Text".

What will I need to have?

When your website is complete, it will need to have the following elements to receive full credit:

You can, of course, add anything else you want, be it lists, more images, boxes, etc. Go crazy- but not *too* crazy.

Your site can be about anything, be it yourself, your pets, your hobbies, some organization you participate in, or something entirely fictional. Let the creativity flow!

You may receive up to 5 bonus points on this lab for going above and beyond what is required.

See below for additional rules that apply.

Validation

When designing a website, it is important to make sure that you stick with existing standards of HTML and CSS. This will go a long way toward ensuring that your site will look the same on everyone's computer. We can do this by using the W3 Markup Validation Service and CSS Validator. If you base your pages off the sample HTML file, then buttons that link to the Validator are included- as noted above, your site must use these buttons (or at least have the same links) somewhere in every page.

When you click these buttons, it will take you to the Validator, which will show you if any errors exist in your page. Start from the top and work your way down- often, fixing the early ones will fix later ones, too. Your pages must receive a green "valid" result from both the XHTML Validator *and* the CSS Validator to receive full credit.

We recommend uploading our provided starting files, and testing validation before you make any changes. Make sure that the template page validates and that you know how to test validation. Only then should you start to modify the file. As you make modifications, uploaded the page to the prism server and check it for validation after each change. That way, if something breaks validation, you will have only a limited number of changes to "back out" to determine what the problem is.

Other Rules/Caveats

When making your site, these other restrictions apply:

Publishing to the Web

To test your website on your own computer, all you have to do is double-click your index file after saving it. If you have set everything up correctly, you should be able to test it this way just fine (all your files, including .html, .css, and images, should all be inside the same folder).

However, when you are done, you will need to upload them to your Prism webspace for the world to see. If you have not already acquired Fugu/Cyberduck (Mac users) or WinSCP (Windows users), go download it, and re-read the later part of the Lab 2 description for details on how to connect to your prism account and upload files.

To upload your files, use your SCP program to navigate to your own public_html directory. Inside that directory, create a new folder called lab3. Make sure to set the permissions on this new directory! Then, go into this new folder and upload your files (all of them, including images). Again, make sure to set permissions to ensure that all files are readable. As mentioned above, your website should be accessible from the following URL:

http://www.prism.gatech.edu/~yourusername/lab3/

... where "yourusername" is replaced by your GT account/Prism account name.

After the due date is passed, please DO NOT CHANGE, MOVE, OR OTHERWISE ALTER YOUR FILES on the server until you have your grade back. If you do, it might result in you getting counted late.

Good luck!

Grading Requirements

Look at how your TA's will grade the lab.

CS 1301 Lab 3. Rewritten by Eric Goodwin and Melody Nailor.