Back to: Homepage > Homework & Projects CSCI 217
First Web Site

The will be the first public version of your web site. It must contain text, hyperlinks, and lists. Use a text editor to write the raw HTML. Upload the files to the course web server using FTP. 

Note: You may use a code-only web design editor such as HomeSite, 1stPage2006 or NoteTab to develop your web pages. People who use WYSIWYG tools before learning basic HTML usually fail to understand the HTML and this will hurt them eventually. So, for this project, you MUST NOT use a WYSIWYG HTML editor. Doing so will result in a zero (0) on the assignment.

Recall the workflow involved in designing a web site:

1. build a prototype of the site on paper (This should have been the design phase; it is your script!)
2. create/edit the pages of the site using a text editor
3. save the pages on your computer and view with your browser
4. repeat steps 2-3 until you're satisfied with the results
5. upload the pages to the course server using FTP

Site requirements

You should already have a prototype for the site (Design Phase), but here is a review of the requirements for this first draft.

• The site's home page (index.html) gives an overview of the site and gives a visitor an idea of what they will find and why they should read further. Moreover, it should give a reader easy access to the other pages of your site.
• A second page that provides a short bio or information about yourself.
• A third page to organize the homework. It should include a link to your design document (discussed below) and eventually links to the other homework.
• A fourth page (plus any additional pages) about the topic of your site. The topic can be a hobby, something that interests you or something you've done. In other words, this is the story you want to tell. It can contain links to other sites that are relevant to the goals of your site. Short descriptions should be provided for each link to inform a visitor what will be found and why it is relevant.

In addition,

• Your site must use both relative and absolute hyperlinks appropriately. Remenber, all links to pages within your site must use relative URLs.
• Your site must use lists, and (not counting headings) more than one size of font, more than one color, and some emphasized text.
• Each page must have a title.

The content of your site is up to you as long as it contains the items mentioned above. The criteria for grading this phase will consider the functionality of the pages, the arrangement of elements, the way HTML is used to emphasize the message, and how well you explain your use of HTML and design features in the design document.

The content of your site must not violate any federal, state, or local laws nor violate college policies. Remember that  your site can be publically viewed. Avoid material which, though legal, may be offensive to other students or faculty that may view your site. Your instructor reserves the right to remove such material and to assign the grade of zero (0) to a site that contains such material.

The Design Document

Ok, this document has been mentioned several times above. What is it? The design document is a page (or pages) where you explain your design choices. In other words, why were the various HTML elements chosen? What affects are you trying to achieve? This will be a growing document to which you should add information as you add additional features. If you adapt HTML code from somewhere else, your design document should link to that page. It is not acceptable to just copy pages or content from somewhere else. The page providing the design document should be clearly marked as such and dated. The document should be easily accessible from the coursework page.

Creating Your Pages

In steps 2-4 of the workflow outlined above a virtual web site is created on your local computer. Create a folder on your local hard drive (or on a disk if in the lab) to store your pages. Create and edit the pages with Notepad (or some other plain text editor). Do not use an HTML editor or MS Word. Be sure to name the top level (home page) index.html. The names for the other pages should already be decided, but remember to use the file extension .html (some Windows programs default to .htm).

It is recommended to save your pages early and frequently. After you have saved one (or more) pages (or partial pages) you can view in a browser. To do this, open a browser, go to "File", "Open Page" (or "Open File"), and select the page you created. You can keep both the text editor and the browser open at the same time and switch back and forth. "Save" after making changes to the text file and then click the "Reload" button to view the page with the most recent changes. Be sure to check that all links work properly. It is also wise to keep backup copies of your original pages before making extensive changes.

Uploading to Server

Now that you have created your site on a local computer it's time to publish it. You can use your favorite ftp program or Filezilla (available on the lab computers) to copy the files for your site into the public_html subdirectory of your student account on the department server.

Once you have uploaded your pages, test them with a browser. (Use at least two--such as Ineternet Explorer and Firefox) Your home page should link properly from the "Student pages" item from the CSCI 217 course home page. You can also try the direct URL: http://mathcs.citadel.edu/your_username.

---