CS1301 Lab 3: Making Websites With XHTML and CSS

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

Required files:

http://www.prism.gatech.edu/~yourusername/lab3/index.html
http://www.prism.gatech.edu/~yourusername/lab3/style.css
At least one other HTML file, also using CSS
At least two or three images

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.

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:

Sample index.html
Sample style.css

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).

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".

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

An index.html file.
A style.css file.
At least one (or more) other .html file(s) of your choosing.
- It is important to note that all HTML files you make can and probably should use the same .css file for styling (but they don't have to).
The main page (index.html) must contain your name.
Your other .html file(s) (aside from the index.html) need to be linked from index.html, so that they can be accessed.
One of your pages must contain some text about something, in paragraph form (<p> tags).
You need to use CSS on all your pages. Your CSS must contain the following:
- Formatting of the page background and default text (colors, fonts, background images, etc)
- Formatting of at least 2 text elements such as <p> or <h1>.
- Formatting of links (<a> tags); formatting visited, active, hovered links is optional
The site overall must contain at least 2 (or more) images. These can be spread out across your pages however you wish.
An HTML table containing some type of information, that is at least 3 by 3 in size.
At least two external links to other sites.
- One must be linked via the usual clickable text.
- One must be a clickable image link. (i.e., nesting an image tag inside an <a> hyperlink tag).
- Any additional ones - link them however you want.
The HTML and CSS of your site must be valid and must have the validation buttons (or equivalent links) from the sample file included (see the next section for information).

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.

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.

When making your site, these other restrictions apply:

You may not use any kind of HTML generator or "WYSIWYG" editor to make your site. You need to do it the old-fashioned way, using a plain text editor (such as Notepad, IDLE, vim, etc.). We can tell if you use a generator, and it will cost you points.
You may look at any other pages you want for ideas and examples, but do not take code from them. The sample files are excluded from this rule; you may use them to build your own files upon (that's the whole point of having them, after all...).
The use of Javascript and other dynamic content is discouraged (and a lot of it, such as PHP and other server-side scripting, won't work on the Prism server in any case). If you have no idea what this means, don't worry about it unduly.

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!