2.2.1 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:

-- - - - - - - - - - - - - - - - - - - - - -- | | | | | | F! | DD | A1 | | |- - - - | - - - -|- - - - - - - -| B |

| | | | | | IT | F2 | A2 | | |_ _ _ _ | _ _ _ | _ _ _ _ _ _ _ |_ _ _ _ _| | | | | | | | | | | | CB | H | RB | M | | | | | | |_ _ _ _ | _ _ _ _| _ _ _ | _ _ _ _ _ _ _ _|

the shape is table T flipped horizontally

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 Incorporate External CSS.

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 Incorporate Java Script

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)