Due Wednesday April 15 at 4 PM

Creating a web page

You are to build a web page.  Sample themes include a personal page, a page your favorite organization or group (sports team, charity, hobby etc.) Generally you are pretty free in your choice of website theme. However it should be something that is appropriate for a university assignment submission. (You should be able to apply a common-sense filter as to what is and isn't allowed but if you are unsure then feel free to ask!)  To make sure that you comply with copyright laws the multi-media content that you imbed in your document should either be images and videos that you have made yourself (e.g., a picture that you took) or else material in which the license agreement allows for public use by others. When in doubt it's safer to simply 'link' to an external website, i.e., it was created by someone else, rather than directly post the material yourself). If you don't know the difference between imbedding an image or video vs. external links then apply the following criteria. If the image or video resides in the 'public_html' folder (or a sub-folder) then you have to worry about copyright (because you are the one providing the content). If the image or video resides on another computer web server (e.g., www.youtube.com) then whoever posted the content must worry about copyright.

The university provides some information about the current state of copyright issues for academic use: [Information link here]

Title and headings: The page should include a clear and obvious title (use font effect and a 'heading' tag to make it stand out strongly from the rest of the page (recall the "contrast" principle from the CRAP principles you learned at the end of the 'spreadsheet' section of the course). The main body of the website should consist of at least two sections each of which should have a section heading that stands out from the text (see Figure 1).

Figure 1: The text is separated into a title, sections and section headings

Text formatting: All the font effects that you were taught (using at least 3 of the following tags: bold, italics, strike-through underline) should be applied at least once in the page. A list, either 'ordered' (numeric) or 'unordered' using a "list tag" must also be included. The "break-tag" should be used as appropriate to separate lines.

Embedded content: include at least one image or video using an 'href'. A better designed web page will organize all the content into it's own separate folder that is contained your 'public_html' folder.

External link or links: Use an 'href' to link to an external website or websites.

Contact information: Use a 'mailto' tag to allow visitors to send you an email.

Graphical controls: The website should allow visitors to enter their contact information via input fields: title, first & last name, email address. There will be two buttons: 'cancel' that clears all of the input fields and 'confirm' that will take information from these input fields and send it via email (Figure 2 shows the graphical controls with sample data).

Figure 2: Graphical controls created using html tags

Augmenting a web page using JavaScript

In order to make the webpage interactive JavaScript will be used to augment the webpage. When the 'cancel' button is pressed the four input fields will have text cleared (in Figure 2: "Sushi-master", "James", "Tam" and "foo@bar.ca" will disappear). When the 'confirm' button is pressed an email will be sent. The subject line = the assignment number. The body of the email will be a combination of the text from the four input fields (see Figure 3).

Figure 3: The result of clicking on the 'confirm' button.

A superior program will verify the text and process it prior to starting the email program:

• The body of the email is prefixed with 'Dear'
• The title field is capitalized (the text from Figure 2 changes from "Sushi-master" to "SUSHI-MASTER"
• All fields must contain some text. If any field is empty then a popup message box will appear with a helpful error message e.g., Indicates which field does not contain any text.
• The email field is scrutinized to determine if it's a valid email: must contain an "at sign" ('@'), the '@' should not be at the very start or end of the email address e.g., "@ucalgary.ca" nor "ucalgary.ca@" are valid email addresses.

In addition being marked on the above features the JavaScript portion be marked according to how well it conforms to the style and documentation requirements that you were taught in class.

Submitting your work: