LIBRARY USE LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD 2013 Student ID: Seat Number: Unit Code: CSE2WD Paper No: 1 Unit Name: Paper Name: Reading Time: Writing Time: Web Development Final 15 minutes 2 hours No. of Pages (including cover sheet): 9 pages OFFICE USE ONLY (FACULTY/SCHOOL STAFF): CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS Number Description 18 Students from non English speaking backgrounds can bring unmarked, non electronic translation dictionaries into the examination. (non subject specific) 92 Students may make notes during reading time (not on script books or multiple choice answer sheets). INSTRUCTIONS TO CANDIDATES 1. This paper accounts for 60% of the total assessment for this unit. 2. This paper consists of five equally weighted questions. Total Marks for this paper= 100 3. Indicate on the front of the exam script book which questions you have attempted to answer. This paper MUST NOT BE REMOVED from the examination venue
Question 1. (a) For each of the following DOCTYPE declarations, identify the version of HTML being used: (i) <!DOCTYPE html> (ii) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> (iii)<!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> (b) Which organisation is primarily responsible for HTML, CSS and DOM standards? (c) Which organisation is responsible for Javascript standards? (d) Briefly identify what is meant by (i) a "well formed" and (ii) a "valid" HTML document? (e) What is the primary role for each of the following technologies with respect to HTML documents? (i) HTML, (ii) Cascading Style Sheets, (iii) the Document Object Model (DOM), and (iv) Javascript, (f) What is quirks mode and when will a browser use it? (g) How does a Web browser determine which mode to use for rendering a web page. (h) Which of the following elements must be present to make the code valid in html5? <title>cse2wd Exam</title> <link rel="stylesheet" type="text/css" href="mycssrules.css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="myjavascript.js"></script> (i) Why can't the following html document be served by the Apache web server from your public_html folder with the following permissions? -rw-----w- 1 jabloggs student 270 Apr 19 12:46 index.html ( a b c d e f g h i ). ( 3 + 1 + 1 + 4 + 4 + 2 + 2 + 2 +1 = 20 marks) (Page 2 of 9)
Question 2. (a) Carefully examine the following code: 01 <!DOCTYPE html> 02 <html> 03 <head> 04 <link rel="stylesheet" type="text/css" href="weather.css" /> 05 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 06 </head> 07 <body> 08 <h4>bendigo<h4/> 09 <table id="#2dayforecast> 10 <tbody> 11 <tr><th>day</th><th>today</th><th>tomorrow<th /></tr> 12 <hr /> 13 <tr class='redtext'><th>max Temp <sup>o<b>c</sup></b></th> 14 <td>13</td><td>18</td> 15 </tr><br /> 16 <tr class='images'> 17 <th></th><td><img href=clouds.png /></td><td></td> 18 </tr> 19 </tbody> 20 </table> 21 </body> 22 </html> Identify at least eight (8) syntax errors in the body of the html document by (i) supply the line number of the line containing the error, (ii) a brief description of the error, (iii) and where possible rewrite the line with the error corrected. Question 2 continues next page... (Page 3 of 9)
(b) The html code for the table element in figure 2b-1 is not valid according to the DTD fragment given in figure 2b-2. Identify the errors in the html and explain why it is invalid in terms of the rules given in the DTD. figure 2b-1 <body> <table> <thead> <caption>exam 2013</caption> </thead> <tbody> <tr><td>hello</td><p>world!</p></tr> <tr></tr> </tbody> </table> </body> figure 2b-2 The following DTD fragment is based upon the XHTML version 1.0 DTD for the table element <!ELEMENT table(caption?, (col* colgroup*), thead?, tfoot?, (tbody+ tr+))> <!ELEMENT caption %inline;> <!ELEMENT thead (tr)+> <!ELEMENT tfoot (tr)+> <!ELEMENT tbody (tr)+> <!ELEMENT colgroup (col)*> <!ELEMENT col EMPTY> <!ELEMENT tr (th td)+> <!ELEMENT th %flow;> <!ELEMENT td %flow;> <!-- %flow; mixes block and inline --> <!ENTITY % flow "(#PCDATA %block; %inline; )*"> where #PCDATA refers to character data, %block is any block element, and %inline is any inline element. (14 + 6 = 20 marks) (Page 4 of 9)
Question 3. /* use this CSS file named: "mystyles.css" when answering parts (a), (b) and (c) */ p { color: green; font-size: 12px} h1 { font-size: 32px; text-align: left ; color: purple} h2 { font-size: 24px; text-align: center ; color: lime} #content { font-family: sans-serif; color: #000; font-size: 16px }.plain { font-family: monospace; font-style: normal; color: black} div.plain h2, h1 { font-size: 16px; color: blue } (a) In what order are the rules defined by the tag selector, id selector and class selector applied to an element that uses all three of these CSS selectors? eg. <p id="content" class="plain"> (b) In what colour will each of the heading element contents be displayed in the following code: (i) <div><h2>hello World!</h2></div> (ii) <div id="content"><h2>hello World!</h2></div> (iii)<div class="plain"><h2>hello World!</h2></div> (iv) <div><h1>hello World!</h1></div> (v) <div id="content"><h1>hello World!</h1></div> (c) Describe how the text in the paragraph element will appear when rendered and list the final value for each style property that is applied to the p element when it is rendered. <html> <head> <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" /> <style type="text/css">.box { background-color:yellow; border:thin dashed black; margin:1em; } #content { color: red; background-color:silver;} p { color:yellow; font-size: 16px; background-color:black; } </style> </head> <body> <p id="content" class="box" style="color:olive;"> Style sheets are for presentation </p> </body> </html> Question 3 continues next page... (Page 5 of 9)
(d) The box model is used by Cascading Style Sheets to define the regions occupied by some XHTML elements such as the div element. The box model uses padding, border and margin CSS properties. Use a clearly labelled diagram to explain what each of the padding, border and margin properties define with respect to the content being displayed for the element. (e) Briefly outline the cascading order in which style rules are assigned when conflicting style rules from different style sheets are applied to an element in an HTML document. Consider a mixture of inline, embedded and multiple external style sheets being applied in your answer. (2+5+6+4+3= 20 marks) (Page 6 of 9)
Question 4. (a) Give two (2) advantages of using an external file for storing Javascript functions. Include an example of the opening HTML script tag that would be used to reference an external Javascript (.js) file. (b) What is the type and value of the variables b and d after the following Javascript code is executed? <script type="text/javascript"> var a = 2; var b = 1; var c = 2; var d = 2; var fruitarray = new Array(); fruitarray[0] = "lemon"; fruitarray[1] = "banana"; fruitarray[2] = "apple"; fruitarray[3] = "orange"; fruitarray[4] = "straberry"; fruitarray[5] = "plum"; if( b <= a ){ d = c*(a b) + 1; b = fruitarray[d]; }else{ d = a; b = fruitarray[c]; } alert( "b now contains: " + b + " and d contains: " + d); </script> (c) Write javascript code to including a for loop, an array and document.write() statements to generate a simple table including column headings that displays each of the whole day numbers from 1 to 7 in the first column and the corresponding day of the week in the second column as shown below: Number DayName 1 Sunday 2 Monday...... 7 Saturday ( ie. 1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thursday, 6=Friday, 7=Saturday) ( (2+2) + 4 + 12 = 20 marks) (Page 7 of 9)
Question 5. (a) Examine the following JavaScript and draw a picture to show the output as it would be rendered by a Web browser. You can assume that no style sheets are applied to this page. <body> <div id="mydiv"></div> <script type="text/javascript"> //<![CDATA[ var namelist = new Array("George", "Anne","David", "Sue"); var mylistitemelement; var textnode; var fruit; var mylist = document.createelement('ol'); for ( var i=0; i<namelist.length; i++){ li = document.createelement('li'); fruit = namelist[i]; text = document.createtextnode(fruit); } li.appendchild(text); mylist.appendchild(li); var mydivelement = document.getelementbyid("mydiv"); mydivelement.appendchild(mylist); //]]> </script> </body> Question 6 continues next page -- (Page 8 of 9)
(b) Supply the equivalent HTML code fragment that would produce the DOM tree structure for an unordered list with an id of "rootnode" as shown in figure 5. (c) Write the necessary Javascript code to append a heading 1 (h1) with a child text Node containing the word "deck" to the second list item. figure 5. ul id="rootnode" li li li p window rudder p anchor wheel Represents a text Node Represents an element Node ( 4 + 4 + 12 = 20 marks) (Page 9 of 9)