Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

INT222

Part A: General Instructions

In this assignment, you will create an xhtml document using Cascading Style Sheets, JavaScript Form validations and JavaScript Events.

You will also add a comment on the top of your xhtml document and on the top of your .css document with your full name, and a brief description of the assignment.

1. Create a folder named FName_asgn3, where FName is replaced with your last name, followed by your first two initials.

2. Save all of the files in your FName_asgn3 folder.

3. Ensure that your completed assignment meets all the requirements listed in Part B below.

4. When ready to submit the assignment, zip the FName_asgn3 folder, and submit it according to Part C below.

Part B: Requirements

Section I:

A. Download and unzip the file assignment03_files.zip for all the HTML and images files for this assignment. 

B. External Styles

1. You will have to modify the style & layout of the a3seneca.html web page using Cascading Style Sheets.  Open a text editor of your choice and create an EXTERNAL .css file and name it: mystylepage.css. You will link this .css file to your a3seneca.html file. 

2. Your external style sheet should contain the following properties to be applied on the a3seneca.html page:

a. 2 background properties:

i. Background image (use greybkgrd.gif)

ii. Background attachment 

b. 3 text properties:

i. Text indentation to be applied on paragraph 2 of the a3seneca.html page

ii. Text alignment to be applied on paragraph 3 of the a3seneca.html page

iii. Text decorations:

underline to be applied anywhere in paragraph 1 of the a3seneca.html page

blink to be applied anywhere in paragraph 4 of the a3seneca.html page 

c. Change the margin property of paragraph 5 of the a3seneca.html page.

3. Your external style sheet will contain at least one (1) group selector, and at least TWO (2) class selectors to be applied anywhere on the a3seneca.html page (remember to give meaningful names to your classes).

C. Internal Styles

1. Open your a3seneca.html xhtml document; you will modify the source code to add the following internal (embedded) styles to the web page.

a. 2 border properties on the images:

i. Border width to be applied on ratherton.jpg image of the a3seneca.html page

ii. Border color to be applied on miner_r.jpg image of the a3seneca.html page

b. Change the “square” list on the left side of the a3seneca.html page to be of type DISC. 

c. 4 font properties:

i. Font Family to be applied on paragraph 6 of the a3seneca.html page

ii. Font Weight to be applied anywhere in paragraph 7 of the a3seneca.html page

iii. Font Size to be applied anywhere in paragraph 7 of the a3seneca.html page

iv. Font Style to be applied anywhere in paragraph 7 of the a3seneca.html page

2. Your internal style sheet will contain:

a. The ID selector to be applied at least once, anywhere on the a3seneca.html page

b. You will use the <div> element (tag) to apply any style of your choice to paragraph 8 of the a3seneca.html page

c. You will use the CLASS selector at least once in your internal style sheet to apply any style of your choice anywhere in the a3seneca.html page

D. Inline Style Sheets

1.  Using inline style sheets, you will change the red lines of text of paragraph 9 of the a3seneca.html page, to GREEN color using <span> element (tag). 

2. Close the a3seneca.html page.  It will be loaded later in the Frameset document below through one of the links.

Section II: 

A. Find the a3mypage.html among your download files in Section I. 

B. Modify the source code

1. You will have to modify the source code of the website above (which is an update of assignment # 2), and add form validations and some JavaScript events to it. Below are the validation rules required:

Input type

Validation Rule

Student Full Name

Must not be an empty field and must contain letters only. (a-z or A-Z).  If empty or numbers are entered, you would display a message to notify the user to correct the entry.

Student Number

Must not be an empty field, must contain numbers only (0-9).  If empty or letters are entered, you would display a message to notify the user to correct the entry.

Password

The password is: senecac.  If the wrong password is entered, display and ALERT message: “Wrong Password!”

6 checkboxes

One item should at least be selected or you would get a CONFIRM message displaying “Please Select One Item!”

2 radio buttons

One item should at least be selected or you would WRITE ON A BROWSER WINDOW: “Please Select One Item!”

<select>

One item should at least be selected or you would display a message of your choice to advise the user to select one.

<textarea>

Should not be empty and the field characters must be greater or equal than 5. If not, you would display a message of your choice to notify the user to correct the entry.

Email text field

Validate the email address entry to follow the appropriate email address syntax. i.e:  @ and .com should be present. If not, you would display a message of your choice to notify the user to correct the email entry.

2. All data will be submitted to this following .php file on submit:
http://www.elizabethcastro.com/html6ed/examples/forms/showform.php

3. On some validation rules above, you would need to add a return TRUE or FALSE value while creating your functions.  Please refer to the session notes for references.

C. Other modifications 

4. On the load event of the form, you will have a pop up message displaying:
“WELCOME TO MY LAST ASSIGNMENT!” 

5. The “Seneca College” hyperlink from the main menu is the a3seneca.html document you created in Section I. 

6. Change the “My College” hyperlink from the main menu to display a pop up message saying “INTERNET FUNDAMENTALS” on the click event instead of loading the Continuing Education Seneca College website. 

7. On the main menu frame, right under the main menu title, you will display today’s date using the JavaScript DATE FUNCTION. 

8. On the click event of the “My program @ Seneca” button, you will change the case of the characters in the program text field to ALL UPPERCASE LETTERS. 

9. Find the image splashpage.jpg among your download files.

10. Set the height of the new image to “125” using JavaScript properties & values.

Section III:  Validation and Disclaimer

1. You should validate all documents individually, and they should all be compliant with W3C (http://validator.w3.org) and AODA (http://www.w3.org/TR/WCAG20/).  

2. All Seneca websites must contain the following disclaimer; marks will be deducted if omitted.  It could be included anywhere in any your pages as long as it is included in at least ONE of your html documents.

Disclaimer: 

This site is a student project only. Any opinions, statements or claims expressed here are that of this site's creator and are not necessarily those of Seneca College. Questions or comments about this site can be directed to my Seneca College e-mail address student's @learn.senecac.on.ca e-mail address. 

Please review the College’s Information Technology Acceptable Use Policy at http://www.senecac.on.ca/equity/itaup.html for further details. 

Part C: How to Submit your Assignment

1. All files (documents, images, etc.) must be placed in a folder called FName_asgn3 (where FName is replaced with your last name, followed by your first two initials) and zipped before being submitted. Zip software can be downloaded for free at http://www.download.com 

2. To zip your assignment, right click on the folder name, and select the zip option from the popup menu.

3. To submit your assignment, return to the Assignments area in the course and click the link for this assignment.

4. Scroll down to Section 2: Assignment materials, and attach your zip file.

5. Remember to click the Attach button, or your file will not attach.

6. When you’re finished, click the Submit button to send the file to me.

7. For help submitting assignments please see How to use Blackboard & Submit Assignments  (in Course Information).

8. Submit your file by the due date shown in the Course Timeline (under Course Information).