Due to be marked at the beginning of your scheduled lab the Week of October 12-16, 2015.
 

Assignment Topic:    Create a Web Site on a topic of Your Choosing

Your assignment is to create a web site in your account on Hyperion,  specifically in your public_html directory, which you will make viewable by the world. Note that you may not want to make your pages accessible until it is time for the assignment to be graded. That will reduce the chances of having your pages copied. If you set permissions to prevent access, be sure to update the file access permissions in time for your assignment to be graded.

Using images and text, your website will tell the reader about a topic of your choice. By allowing everyone to pick his or her own topic, I cannot provide specific advice on your approach to the topic. However, the point of creating content for the Web is to attract people to your site, so explain why the reader may be interested in your topic. That does not mean you need a list of reasons. Rather, it means that the challenge is to present your topic in a way that shows why you are interested. That should attract an audience with similar interests.

Properly cite your sources. Use quotes where appropriate but use them sparingly. The bulk of your content must consist of your own words. Include links to web pages within your explanations or comments so that your readers can view additional information or more examples.

Assignment 1 requires that you create the structure of your web site. There are specific requirements described in this document. In Assignment 2 you will be required to enhance your web site using Javascript to add interactive elements. We will be studying a limited amount of Javascript and really only elements that address simple interaction.

For Assignment 1, you will be using HTML with external Cascading Style Sheets providing the styling information for your web pages. As HTML evolved to XHTML and HTML 5, many of the original tags and attributes were superseded by alternatives with greater functionality. Many of the traditional tags are said to be "deprecated" and eventually will no longer be supported by browsers. There is a tradeoff between the newer alternatives and the learning curve required to both learn and use the new alternatives. Consequently, we do not have the time to go very far in terms of CSS and HTML 5. We cover just enough to provide a sense of the direction in which HTML is headed and you will incorporate some of these techniques into your web site when doing Assignment 1.

Tip: Writing in your own words.
You will find many references to the topic you choose. Do not copy what others have to say about the topic. Incorporate your interest in your own words in your pages. Assignments 1 and 2 will be accessible on the Web. Do not violate copyright by using material without permission. If you include a quote, you must cite your source. The same applies to images you use. There are usage rights to consider for images that belong to people who permit the use of their images by others. One of the objectives for this assignment is to ensure that you develop a better appreciation of copyright and intellectual property rights. You will have to include a page of references and a page of information about related material even if you have included links within your pages to this material. Such repetition is fine.

You will create a link to your assignment that the lab instructors can easily locate. You will also have to create a table of contents for your assignment. See the following section for details on the links and pages to be created.

Specific Details about the Assignment Format and Page Requirements:

Your Assignment 1 site will require the following fourteen pages. The content required for these fourteen pages follows.

Filename	Purpose	Contents
index.html (actually a change to cs100.html)	Home Page	There is a link in the original index.html page that says, "Click here to view my CS100 page." That link takes you to a file labelled "cs100.html." Edit cs100.html to include a link to Assignment 1. This link is to point to "toc.html," your Table of Contents page. This is simply a mechanism to help your lab instructor quickly locate your assigment.
toc.html	Table of Contents	Start with a paragraph in which you describe your topic. Follow with an unordered list of twelve links to your ten content pages plus your Further Readings page and your References page. Finish with an animated gif reflecting the assignment topic. A humourous animation suggesting all the work you've done is fine but it has to also suggest the topic. We'll be assessing your ability to create an animated gif. It is probably best that we don't be assess your artistic skills or your sense of humour, but we will assess your technical ability to create the animated gif. While you may create other animated gifs for the assignment, this is the animated gif that YOU MUST create yourself. Any others can be ones that you have found on the web.
page01.html	Content	Use your ten (10) content pages to explain aspects of the topic.  Each page is to contain: A navigation bar at the top of the page to link to other pages in the assignment. You only create one navigation bar that you will use repeatedly. Images to illustrate the discussion. Draw, scan or photograph the images. Watch out for usage rights on images belonging to others and do proper citations. Sufficient content to show that you took the assignment seriously. Think explanations that require multiple paragraphs and multiple images. More details on the navigation bar and graphical images can be found in the "Overview of Assignment Requirements" later in this document.
page02.html	Content	As above.
page03.html	Content	As above.
page04.html	Content	As above.
page05.html	Content	As above.
page06.html	Content	As above.
page07.html	Content	As above.
page08.html	Content	As above.
page09.html	Content	As above.
page10.html	Content	As above.
readings.html	Further Readings	A navigation bar is required at the top of the page just as in the content pages. An ordered list of at least fifteen links to material related to the topic. This ordered list will take the reader to additional material about the topic. You do not create the additional information. You just link to it. These are likely to be the pages you read when learning about the topic.
references.html	References	A navigation bar is required at the top of the page just as in the content pages. A list of citations to both written and graphical material you used in your assignment. Your resources can include print and on-line material available at the University Library, but note that you can use material from any other library or from the Internet. The textbook is also a source and can be listed here. There will be considerable overlap with the readings page but this page is also to include citations for sources of the graphic images you used in the assignment. When sites allow the use of their images, they often require a usage statement and may provide the HTML code that you are to use. Meet all such requirements using this page.

For this assignment you are advised (not required) to use only the names listed above for these first 14 pages. It makes it simpler to ask and answer questions about the assignment.

Publishing on the Web:

Your public_html directory in your Hyperion account serves as your website. Your web address is http://uregina.ca/~your_user_id. Of course, you insert your actual userid in place of the "your_user_id" phrase. The web server automatically takes the viewer to your index.html file and from there the viewer follows the links you provide to pages you create. Keep in mind that your pages can be seen by millions across the world. Odds are that your pages will only be viewed by close relatives and people looking to copy someone else's work. As mentioned earlier, you can minimize your exposure to theft of your work by setting file permissions so your pages cannot be viewed until just before you have your work graded.

 Avoid the use of graphics from other websites, unless the creators have expressly offered the images for use by the general public. The fact that an image is displayed on the Web does not mean the owner loses ownership or the right to decide whether others can use the image. Turn the situation around. Suppose someone copied all of your web pages. You would be justifiably upset. You'd also be within your rights to sue, but let's not go there. There are many sources for free images: for example the GIMP Community-Indexed Photo Archive.

Ask questions about copyright and intellectual property issues when you have concerns about whether you are doing the right thing. The motivation for all of the emphasis on these issues is to ensure that you have a better understanding of the issues when the class is finished. What you are going to learn is that there are no simple answers. Have a look at http://www.2learn.ca/ydp/copydigital.aspx, a Canadian site that tries to provide some answers. UBC has posted a summary of Bill C-11 and the extensions of "fair dealing" to education. Taking a screen snapshot of an application and using it in an explanation of the application seems to be a "fair dealing" situation. Hire a good lawyer before you do anything like this for commercial purposes.

Also consult the University's Copyright web site.

You must cite your sources on your References page for any material, including images, that you use in this assignment. This needs to be treated just as seriously as the use of appropriate references in an essay. We'll expect you to keep your pages in good taste. Regardless of the topic of your web pages, if for any reason you are going to include pictures of persons you must follow some rules. Actually, we require strict adherence to the policy and spirit of the University of Regina's Respectful Workplace and Learning Environment Policy. In particular, please note that the phrase "displaying pornographic or sexually explicit pictures or material" prohibits the display of sexually offensive or demeaning images on web pages. To avoid disagreements over interpretation, we'll make it simple. If you are going to display a picture of a person, do not display images of partially clothed persons or cartoons of persons partially clothed and so on. You get the point. Minimally, marks will be deducted from your assignment grade. You might also have to redo the assignment before it is graded.

Your Hyperion account is yours to use while you are attending the University of Regina. That is, your web pages can be maintained after CS100 ends. Once both parts of this assignment are graded and you have verified that we have recorded the marks correctly, feel free to start modifying your site.

Keep back-up copies of work in progress on separate media. A portable drive, flash drive or otherwise, is an excellent and inexpensive investment. The time you spend recreating material, because you lost your only backup copy, or it stopped working, is lost time. You'll never get it back. Enter "http://search.dilbert.com/comic/deadline" into your browser for additional wisdom on deadlines. Replace the word "deadline" by any other word for which you might enjoy the what Dilbert has to say.

Remember that your Hyperion account is also an excellent place to keep copies of your files. Your I drive is also accessible from machines around campus.

Supplemental Comments and Explanations:

1. Content Pages and tips
   In addition to index.html and toc.html pages, you must create ten "content" pages. Refer to the page list given above. Each content page is to be a separate file.
   
   Each content page must contain:
   • A navigation bar of links to the other files. The navigation bar is described in more detail below.
   • Text and images illustrating the content coverage. You may create images yourself using a drawing program such as Paint. Of course, cameras, smart phones and tablets can produce the images you need as can screen snapshots.
   
   Note that the operating system on Hyperion requires the "html" extension. Although the Hyperion operating system permits file names to be just about anything, for this assignment you are advised (not required) to use only the names listed above for your pages. For other files such as those for images, you may use any names you choose. However, you must definitely avoid blanks and special characters in file names for Hyperion. Moreover, file names on Hyperion are case sensitive. That means that "Page01.html" is not the same as "page01.html" or any other variant with mixed upper and lower case. Windows allows more flexibility in file names. Consequently, unless you are careful, you can have a working file on a PC that seems to disappear when it gets transferred to Hyperion. For this reason, I strongly recommend all file names use lowercase letters rather than uppercase letters.
   
   Make your life simple by using the names such as "page03.html" as listed above for your pages. NOTE that your home page must have the file name index.html. DO NOT use spaces in filenames. Windows recognizes all of "page 01.html," but Hyperion stops at the first space in any filename, so it sees this filename as "page." This mistake generates about half of the questions we receive about seemingly lost files. The other half are generated by folks who call a file "Page01.html" in one place and "page01.html" elsewhere. Because Hyperion (i.e., the Hyperion machine which houses your website) distinguishes between upper and lower case, it would see these as two different filenames.

   The other significant source for "missing" files are the files that were uploaded but did not have the access code set to allow the world to "read," that is, "view" them.
   
   

2. Navigation Bar and Required Links
   
   

   You must create a set of links - a "navigation bar" - to be placed at the top of each of your content pages, as well as at the top of your Readings page and References pages. The navigation bar must be centered on each page. The navigation bar must be constructed as an HTML table. The navigation bar should consist of three (3) columns. The central column must consist of two (2) rows. The left and right columns must span two rows. Look left for an example of this format. Note that I took at least five minutes to create extremely poor quality images for this example so that it would be easy for you to do better! Each of the four links in the bar (refer to the following description), must be a table data element. You must use an appropriate graphic for each link. For example, the link to the "next" page, could be the graphic of a right arrow. This navigation bar must look the same and be the same size on each page. Left Link There must be a link in the navigation bar that allows the reader to return to the "previous" page. The first page, that is page01.html (the first information page), must link "around" to the last page, the "References" page (refer.html). Right Link There must be a link in the navigation bar that allows the reader to continue on to the "next" page. The "next" in page10.html must link to readings.html, which links to refer.html. The last page, the "References" page (refer.html) must link "around" to the first content page, page01.html. Home Link There must be a link in the navigation bar that allows the reader to go back to your "home page" (index.html). Table of Contents Link There must be a link in the navigation bar that allows the reader to go back to the "Table of Contents" page (toc.html).

   
   
   
3. Images:
   Eleven pages, toc.html and page01.html through page 10.html must contain one or more images. You may re-use images but you must have at least one unique image per content page. The images may be created by you with a drawing program like Paint, taken from the Web (properly cited and without abusing someone's intellectual property), or scanned or digitally photographed by you. The images are to illustrate your comments
   
   
4. Further Readings page:
   This page (readings.html) must begin with the navigation bar as described above. Then include an Ordered List with the title "Further Readings" This list must contain at least 15 (fifteen) list items that link to information on the Web (related to your answers and found on websites outside the University). Do not link to pages belonging to other CS100 students. Each list item link is to have a sentence or two describing the contents of the page(s) being pointed to by the link. In other words, provide a brief comment to guide your reader in choosing the links to follow.
   
   
   
5. References page:
   This is your references.html file. As with the Further Readings page, begin this page with the navigation bar.
   The main part of this file is a list of links to information or images you have referred to in your web pages. As mentioned earlier, if any image in any one of your web pages is not one you created, the source must be cited. The markers will be instructed to subtract marks for missing or improperly done citations. Note that scanning a picture does not make it yours. An image is your intellectual property if you drew the picture or took the photograph. The laws relating to intellectual property rights are complicated. But, some elements just use common sense. For example, taking a picture of magazine cover or a poster doesn't mean that you can do what you want with the image. The original creator of the image still owns the rights. So, for example, if you scan or photograph a magazine page, you must cite the magazine title, as well as page number, issue, date and title. You can take a picture of a public personality such as a politician and use the image. Avoid doing this with someone who is not a public figure. If you have used the intellectual property of others, such as images from the Web or scanned images, then you must include a reference to the material in your "References" page. Look for "right to use" statements that define and limit your usage. Use this page to cite the source of all textual and graphical material you have used. If this material is from the Web, include the URL of the material and make the URL into a link to the original source.
   
   Here is an example of citing image files. This example cites a source for free images that is, unfortunately, no longer available. But, it is a nice, concise method to use when several images are from the same source. You might want to do the same thing for images that you created, whether drawn with Paint or photographs you took.
   
   You may quote material from the textbook, other books and magazines and material published on the Web. However, you must show this material as a quote in your content page and properly cite the source by providing a citation number, as a superscript, that corresponds to the entry listed in your References page. All of your reference material must be on this page, not just the material from which you have quoted. Quotes are to be used sparingly, to illustrate a point or lead into your own discussion. You cannot meet the assignment requirements by extensively quoting and not writing your own material.
   
   Examples (please pardon the age of some of these):
   a) The University Calendar description of plagiarism says "Plagiarism is that form of academic dishonesty in which one person submits or presents the work of another person as his or her own. "¹
   
   Note the use of the superscript for the citation number. Your References page would then contain an entry number 1 as follows. Note that the source of the quote is specified as page 29.
   
   1. University of Regina. Undergraduate Calendar 2004-2005 (Regina, 2004) 29.
   
   b) The on-line summary of the textbook's Chapter 10, in describing intellectual property rights and theft thereof, says piracy "is a violation of intellectual property laws, which, in many cases, lag far behind the technology."²
   
   2. Prentice Hall. Chapter 10 Summary page for Beekman and Quinn Tomorrow's Technology and You 8th Edition. Copyright 2008. <http://wps.prenhall.com/bp_beekman_tomtech_8/58/14910/3816984.cw/index.html>.
   
   Note that this second example cites an electronic source and therefore contains the URL for the information. It used to be the norm to include the date the page was accessed, but this has been dropped by many style guides.
   
   

Detailed Marking Scheme (used by the markers in grading Assignment 1):

1. ____/1 Paragraph of assignment topic information (sixty words minimum) in Table of Contents page.
2. ____/1 Animated GIF image, related to the assignment, placed on toc.html page.
3. ____/1 The Table of Contents page must contain an unordered list with 12 links to each of the contents pages and readings.html, and references.html pages.
4. ____/1 Navigation Bars centered at the top of each page (page01.html through page10.html, readings.html and references.html).
5. ____/1 Each navigation bar correctly done in table format.
6. ____/2 Attractive graphics used in the navigation bar.
7. ____/1 A link in each navigation bar that allows the reader to continue on to the next page.
   (0=none or more than one missing, 1=all)
   The last page (your References page) is to link to the first content page (your first information page, usually called page01.html) as its "next" page.
8. ____/1 A link in each navigation bar that allows the reader to return to the previous page.
   (0=none or more than one missing, 1=all)
   The first page (your first information page, usually called page01.html) is to link to the last page (your References page) as its "previous" page.
9. ____/1 A link in each navigation bar that allows the reader to go back to your home page (index.html).
   (0=none or more than one missing, 1=all)
   
10. ____/1 A link in each navigation bar that allows the reader to go back to the Table of Contents page (toc.html).
    (0=none or more than one missing, 1=all)
11. ____/5 Doing a serious job of providing content in the ten content pages. These five marks should be easy to achieve but marks will be deducted unless you combine explanations in your own words with appropriate images.
12. ____/1 Further Readings page done correctly.
13. ____/3 References page done correctly. The extra weighting of this page reflects the effort it will take to properly cite the material you use.
    
14. Interactive Elements:
    As your assignment is being evaluated, the marker will ask you to perform several operations on your web pages. Complete details will be given to you at the time of the evaluation. One operation will be to add an IMG SRC tag to a page specified at the time of evaluation. The URL for the image will be provided.
    The revised pages must be sent back to Hyperion for viewing by the marker. You will be marked on your ability to:
    1. ____/1 Add a new image tag.
    2. ____/1 Add a new link
    3. ____/1 Create a new list of three items that will be specified.
    4. ____/1 Implement the list ordering as will also be specified.
    5. ____/1 Demonstrate the ability to modify something you have done in one of your style sheets.
15. Cascading Style Sheet Requirements:
    You must use external style sheets to deal with styles in your assignment pages. You may place all of your styling in a single style sheet that is used by all of your pages or you can use multiple style sheets. The markers must be able to see the style sheet(s) used by each of your fourteen pages. At the end of each page, include a link labelled "Style sheet source" to the style sheet. Such links appear at the end of the weekly notes in UR Courses. Do the same thing with your style sheets so the markers can mark the following requirements:
    1. ____/2 Variable use of background colours.
    2. ____/2 Variable use of font properties.
    3. ____/2 Variable use of list properties.
    4. ____/2 Variable use of border properties.
    5. ____/2 Understanding of class and id attributes demonstrated.

NOTE: All of your web pages must work after being copied back to your Hyperion website. Therefore, you must be able to use WinSCP to download a copy of your files from Hyperion. You must then make the changes needed and be able to upload the updated files back to your web space on Hyperion. You must be able to do this yourself; markers are not allowed to help you. The marker will check that the links work correctly and ensure that the results are visible using your pages from Hyperion, not from the PC on which you are working.

Let's repeat that. You only get marks for pages that are on Hyperion and can be viewed by the markers from your web site.

NOTE: The marker will also subtract marks whenever they judge that there is:

• inappropriate use of graphics (see Sexual Harassment Policy above). This must not happen. The markers have every right to refuse to mark an assignment with offense imagery. You may have to redo the assignment, and you may be reported to the University Harassment Officer.
• page design is haphazard or poorly done
• page content is repetitious
• inconsistent placement of the links to other pages. Navigation links are typically at the bottom or top of pages, sometimes in both places. The Assignment specifies the top of the page. They must not simply be tossed wherever it seemed convenient.
• an inability to explain how to create an animated GIF file
• failure to sincerely or seriously attempt to provide good content pages. Five marks are assigned to the marking of the content pages. Unlike the more technical aspects of things like the navigation bar table, the lab instructors have to make a subjective assessment. Fortunately they have all graded many CS100 assignments over the years and know the difference between a serious effort and a last minute effort.
   
• Plagiarism: the recommended penalty is zero for the whole assignment. University regulations require that your Dean's Office be advised of any incidence of plagiarism. The Dean's Office will investigate the report of plagiarism and determine if plagiarism occurred and, if so, set the appropriate penalty. You will be contacted to provide an explanation during the investigation. The Dean's Office can choose to impose a more severe penalty than the zero that we will recommend. The University Secretary's Office is notified of the investigation by the Dean's Office. There are severe penalties for repeat offences.
  
  Please understand these regulations. The intent is one of fairness in that the investigation will be done by your Dean's Office. This is done to ensure consistent and fair treatment across campus. However, it takes the decision and subsequent discussion away from the hands of the course and lab instructors. We report suspected plagiarism. We are not allowed to discuss the situation. That is part of the investigation by the Dean's Office.
  
  Remember that file permissions on your web page files provide a mechanism to prevent anyone from accessing your pages until the time the assignment is graded. Suppose you don't worry about this and someone uses your pages to build their assignment. Typically, when this happens, no effort is made to disguise your work. Consequently, we notice the similarity of the two assignments and have a suspected case of plagiarism. We report it as required by University regulations. As the innocent party, albeit overly trusting party, in not using file permissions to prevent theft of your web pages, you'll meeting with your dean or associate dean. It is likely to be a messy situation of your word against that of the person who copied your files.
  
  Take steps to respect the intellectual property rights of others when you do the assignment AND take steps to protect your own intellectual property rights.
   

Technical issues about posting HTML files:

1. Your HTML files must all be called "filename.html." That is, they must have an extension of "html" and the "filename" means you'll figure out something for the filename. The "html" should be in lower case. Be careful as the web server software on Hyperion is case sensitive. This means you must match the case in filenames when creating links to the files. Avoid spaces and special characters in your filenames. The simplest and safest approach is simply to use the suggested names such as "page01.html" or equally simple names. You will have noticed that the descriptions in this assignment document have been heavily promoting filenames like page01.html, page02.html and so forth.
    
2. Note that all files must be placed inside the public_html subdirectory of your Hyperion account. This subdirectory was created automatically for you when the account was created. Failure to place your files inside this subdirectory results in the most common frustration in the early part of this assignment. You know you transferred the files to Hyperion, but your browser cannot access them. Why? The common reason is that you did not put the files inside your public_html subdirectory. Depending on the lab you are in when you connect to Hyperion using the WinSCP program, you may be located in what is called your home directory. You need to change directory to public_html before transferring files. Another possible problem is that your files are where they are supposed to be, but the file permissions will not let anyone, including yourself, access the files. See someone during office hours in CL119 if you think you may be experiencing this problem. You can always take a screen snapshot of your WinSCP session and mail the snapshot to someone to ask if they see anything that looks wrong.
    
3. The starting point for your assignment web site is a file called index.html. That file and cs100.html were provided to you as a starting point in the first lab. As described earlier in the assignment, you will update cs100.html to point to your assignment, which starts at toc.html.
    
4. You have only limited disk space in your Hyperion account. The HTML files are text files and will take up very little space relative to the image files. The image files will be GIF files created on a PC and copied to Hyperion (also going into your public_html subdirectory) using WinSCP. Mac users will use the equivalent Mac software to do this. You have about 10,000,000 bytes in your Hyperion account. This is enough room to make many more pages than required by this assignment, provided that you make your images relatively small. Techniques to keep the image size small are described in the on-line lab notes. In particular, you should limit the image size when drawing anything with Paint and choose a resolution for scanned images of below 100 pixels per inch.

*** IMPORTANT ***

Copyright - do not violate copyright in either the text or images. Give credit for images and quotes you use to the same level of detail that you would use in a bibliography for a standard class essay. These credits belong in your references page as described earlier in this document. It is not permissible to capture an image that is a clear copyright violation just because someone else on the Internet violated copyright initially and placed the image on a machine. So, avoid using images of film stars or cartoon characters, even if you see them all over the Web. The markers are instructed to subtract marks for obvious copyright violations.

You can always illustrate your web pages with your own drawings, regardless of the level of your artistic abilities. Screen snapshots are another good source for images but only in combination with your own words explaining the meaning of the image.