Website Assignment

No one can truly appreciate the effort it takes to create a website until they've written some web pages themselves.  While it isn't a goal of this course to turn you into a professional web developer you should learn how to create basic web pages without fancy tools.  (Such tools rarely create web pages as good as a human can “by hand”.)

Each student will design and create a simple three page website to be posted on the HCC student server using FTP.  Download this version of WinSCP software for Windows (any version) FTP which is available free.  You can get the latest version, or other free FTP tools from the links in the Resources section of our class web page.  (Note that Macintosh users don't need any additional software.)  Watch the Using FTP PowerPoint slide-show to learn how to use FTP to upload your website files.

The content of your website (which you have previously decided on) will reflect one or more of the following:

• some basic background and biographical information about yourself or family,
• a hobby, craft, sport, or similar interest you have,
• a set of web search links of interest to you,
• a site for an HCC faculty or academic program.  (Requires instructor permission.)

websites will NOT contain any of the following:

• pornography, obscenity, or links to such images or content;
• any material not suitable for distribution within an ethnically diverse classroom, or links to such;
• copyrighted materials without the express written permission of the copyright owner;
• commercial content or advertising, except as noted below.
• large animated graphics.  (Try to keep your website to no larger than about 1 megabyte.)

It is very important to receive written permission from the owner if you want to use someone else's intellectual property on your website.  See this Warning from our Dean for what can happen if you use someone's property without permission.  There are links to websites with free public domain (open source) media you can use without permission, in the Resources section of our class web page.

The assignment must be based on the Website Concept project submitted earlier.  The student will use FTP to upload the completed assignment to the student web server at ftp1.dtecdata.us as explained below.

Minimum Content

The site will contain at least the following (NOTE!  Everything MUST be contained within the folder assigned to you, which was created by your instructor):

• three pages
  the first (main page) must be named “index.htm” which will contain links to the second and third pages (all pages may contain links to the others),
• a photograph of the student
  either scanned or a digital image taken at HCC (see a lab tech on duty in the open lab to have your picture taken, if you don't already have one); if you don't want to use a photo, you can use a substitute image,
• three internal links
  (links to pages within the student's site — such as index.htm linking to page 2 and vice versa),
• an email link
  (with either text, an image, or both); this is a link with an HREF set to a URL such as “mailto:hymie-piffl@example.com”,
• four links to other sites
  That is, URLs external to the HCC system (a mix of both hypertext links and hyperlink images),
• two still images
  (a mix of both photographs and drawings),
• an animated GIF image
  (in addition to the above three images),
• either a a Flash movie or an HTML 5 Video (a link to a YouTube video doesn't count, but an embedded YouTube video is fine),
• some JavaScript,
• either a background image (in addition to the above five images) or a background color on each page.

Notes:

Keep your media files small.  Space is limited on the student web server, and you won't be graded on the quality of your multimedia.

Your website should include the images and media; that is, don't use the URL to an external image in your IMG tags.  (It may help to review what you did for the Images project.)

When a person clicks a link to a folder (that is, the URL ends with a slash and not a file name), the web server usually returns some pre-selected web page, rather than list the files within the folder.  Most web servers look for a web page named “index.htm” or “index.html”.  This is why it is very important that you name your main page “index.htm”.  If you don't, the link to your website will display either a list of files, or an error message!

You can check out what past CGS-1555 students have done for this project.  (Last term's student website projects can be found at the HCC Student server.)

After you've created your website according to the directions above, you will upload (with FTP) the assignment HTML (web page) files and the image files directly to the ftp1.dtecdata.us server into the directory assigned to you.  For example, if you were assigned the folder “net100”, you upload to the folder called “/net100” on the “host” (another term for “server”) ftp1.dtecdata.us, via FTP.  All links must be tested after uploading and must work.

To download files from the Internet to your (home) computer, it is enough to use FTP as an anonymous user.  But to upload documents to some server (host) you must supply a valid user name and password.  This PowerPoint presentation will walk you through the details of using FTP.  It shows the use of the free FTP program available from our class website Resources section.

The user name (folder name) and password will be sent to each student in the feedback comments for the website concept project, once that is completed.

Any content not the original work of the student (JavaScripts, images, etc.) shall credit the author.  Credit shall be on the page (or in the HTML page as an HTML comment) as may be required by the author or copyright holder.

You need to upload your content to a single folder with a name similar to “net100”, created for you by your instructor.  This folder should contain all the web site content you upload, including all HTML files, images, sub-folders (if any; this is allowed by discouraged), etc.  For example, Wayne Pollock's website is contained in the folder /net100 on the server ftp1.dtecdata.us, so the URL of that website is http://ftp1.dtecdata.us/net100/.

(Your folder name may be something such as net150fa, net200sp, etc.)

If you don't see your own folder's contents showing in the FTP tool, you may have to change folders.  How you do that depends on which FTP software you are using.  Please don't hesitate to ask for help if you need any!

Please refer to the CGS 1555 index of student pages for your section; it will have a link for your name to your correct folder.

Important Note:

When you have finished uploading (and testing!) your website, you must then submit a single sentence via the drop-box, stating the website is complete and ready to be graded.  No website assignment will be graded until receipt of this notice.

Automated Web design tools and/or sites such as Homestead, Dreamweaver, Microsoft Word's “save as web page” feature, FrontPage, Amaya, or Nvu MAY NOT be used.  Pages must be created using a text editor such Notepad, Textpad, Vim, etc., where you type in the HTML tags and text yourself.

Rather than start completely from scratch, you can save a copy of an existing web page and edit that.  Here is a good sample basic HTML page you can use.

Remember the top-level, or entry page to your website must be named “index.htm”.  Your other pages, images, etc. can be named anything you wish so long as the IMG and other HTML tags use the correct names.  Note that spaces should not be used in any file names on a website, or the URLs will need to be URL encoded to work properly on all web browsers.  Just rename all files to simple, short names and you won't have any problems.

While you can create sub-folders in your website, for this assignment it is recommended you keep things simple.  Just put all your HTML files, image and other media files, in the single folder.  Just as was recommended for the Images project.)

A backup copy of your whole website should be retained on your home computer.  This may be needed if the on-line copy gets accidentally deleted.  (You can keep the whole website as a single ZIP file.)

Sometimes your web browser is set for “high security”, and disables JavaScript.  This seems to be more of a problem with Internet Explorer than with Firefox, Opera, Safari, or Google Chrome.  You can try a different web browser and see if that solves the problem.  Read these directions to enable JavaScript for various browsers.

The FTP tool can be used to upload files, but you can also use it to delete files, rename files, create sub-folders (sub-directories), etc.

If you discover an error in some page you've uploaded, you can make a change to the copy on your (local) hard disk and upload it again.  The new version will replace the original one.  (You may need to “refresh” (or “reload”) the page in your web browser to see the change.)

A common error is to use URLs that refer to web pages and image files on your home computer.  This may appear to work fine at home.  But once you upload your HTML pages, any links from the web server to your home computer won't work!  This happens most often to students who use MS Word or a similar tool to create their website, rather than creating the web pages “by hand” using a text editor.  If you keep all your files in a single folders as recommended above, then all the URLs should just be simple file names.  Then your website will work no matter which computer it is on!

The sample web pages and links on our class resources web page will be useful to you.  Feel free to download and modify any of my sample pages.

You can find other sample web pages in the class resources, as well as links to websites where you can download free JavaScripts, and images.  (Or use your amazing new Internet searching skills to find freely usable images or other content you can use.)

In addition to your book and the on-line tutorials, your instructor will be happy to assist you with this assignment.  Also, you can post specific questions to the class discussion board if you are having trouble with some HTML or with using FTP.