This assignment is graded between 0 and 100
In what follows, the number between right brackets represents the total number of points for that step/part of the assignment.
1. [15] Follow the instructions
Follow the instructions for sending your assignment to the TA (see the Common Part in the left-side menu).
Be careful to use the correct email subject.
2. Design and create 2 web pages by using the following specifications
2.1 [10] Page 1: in a file called Page1.html
2.1.1 XHTML: create an XHTML page, which has:
- a form
- table inside the form (two rows, two columns) having these elements:
User id [ Input1 ]
Password [ Input2 ]
where "User id" and "Password" are static text, [ Input1 ] and [ Input2] are input text controls
- one hidden field, whose name and value are set to your first name
- two buttons, Submit and Help
2.1.2 External CSS
- define custom style for the buttons (for example, specify the background)
2.1.3 Java Script
- simulate "submit form":
* display an alert (pop-up) window to show the value of the hidden field.
2.2 [60] Page 2: in a file called Page2.html
2.2.1 XHTML [30]
Create an XHTML page containing information about a book, with the following elements:
- a form
- a table T inside the form.
The table T has the following structure / elements: see image.
Each student's table will be determined as follows:
- take the middle digit of your York U id
- calculate modulus 4 (m4) of that digit
- based on the value of m4, determine the final shape of the above table:
if m4 = 0 : the shape is table T
if m4 = 1 : the shape is table T flipped horizontally
if m4 = 2 : the shape is table T flipped vertically
if m4 = 3 : the shape is table T flipped both horizontally and vertically
Specification of the table elements:
- F1: (text) Your name, in the form: Last, First
- F2: (text) A book title
- A1, A2: pictures of a city (A1) and of a village (A2) (200 x 100 pixels each)
- H : A short poem, using italic font
- M : picture of a mountain (200 x 160 pixels)
below the picture: name of the mountain
- B: A short description of your current reading or of your desired reading (font size should be 60% of the regular font)
- DD: drop-down list with 4 options.
The options are the first four (4) digits of your York U id, spelled in regular English words:
* for digit 1, the list will show One
* for digit 2, the list will show Two
* for digit 3, the list will show Three
... etc. ...
- RB: radio buttons with exclusive option names (3 or more)
- CB: check boxes with names (3 or more)
- IT: input text
- one hidden field (HF)
- B1, B2, B3: three buttons with text: Button1, Button2, Button3
* the buttons will be centered in 3 invisible cells of width x
* if t is the width of the table, then t = 3 * x
2.2.2 External CSS. [15]
Requirements:
- the page will have an external CSS;
- change the default style of at least 5 standard XHTML tags;
- create 2 custom styles.
The above requirements are independent of each other.
2.2.3 Java Script [15]
A. Implement user notification (use alert pop-up windows) for changes in the XHTML drop-down list, radio buttons, check boxes and input text;
a)
* for the input text, you can use the onchange event
* see example at:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onchange
* above example is also showing how to change the value of an XHTML
element, by retrieving the element with the function:
document.getElementById("XHTMLElementId");
b) the change notification for the drop-down list will show both the value and the text of the selected option (see last example in Lecture L05)
B. Simulate "submit form" by:
* using B1 as Submit button
* using an alert (pop-up) window to show the value of the
hidden field HF
* obviously, there should be no real submission (we are just simulating)
3. [15] Document your work
Write a brief document in plain text file called 01ReadMe.txt using enumeration lists (similar to the ones in part 2 of this assignment), and document your work by explaining:
- what files you have submitted;
- what is the role of each file;
- what customization you have done for each page and for each element on that page;
- what is the role of the JavaScript code you have written