ITEC 3020 Assignment 1: Design and Create Web pages
ITEC 3020 : 2023 Winter Assignment 1
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 "Delivery" and "Zip creation" in the left-side menu).
Be careful to use the correct email subject.
All JavaScript should be embedded in the HTML pages. Do not use external JavaScript.
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 ]
[ 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 inside the form.
The table borders should be set to 1px.
The table has the following structure / elements, denoted as T:
C3 A1 A2 F1 - - - - - - - - - - - - - - - - - - - - - DD H RB - - - - - - - - - - - - - - - - F2
| IT |
|---|
| B | CB | ||
|---|---|---|---|
| _ |
B1 B2 B3
Each student's table will be determined as follows:
- take the middle digit of your York U id
- calculate modulus 4 (m) of that digit
- based on the value of m, determine the final shape of the above table: if m = 0 : the shape is table T if m = 1 : the shape is table T flipped horizontally if m = 2 : the shape is table T flipped vertically if m = 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) (100 x 200 pixels each)
- H : A short poem, using italic font
- C3: picture of a mountain (200 x 200 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 called Page2.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]
- implement user notification (use alert pop-up windows) for changes in the XHTML drop-down list, radio buttons, check boxes and input text;
- 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");
- 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 L5);
- simulate "submit form" by:
- using B1 as Submit button
- using an alert (pop-up) window to show the value of the hidden field HF.
3 [15] Document your work
Write a brief document in plain text file called readme.txt using enumeration lists (similar to the ones at 2.1 above), 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.
