This paper MUST NOT BE REMOVED from the examination venue

Size: px

Start display at page:

Download "This paper MUST NOT BE REMOVED from the examination venue"

Marian Tyler
7 years ago
Views:

1 Unit Code: CSE2WD Paper No: 1 Unit Name:Web Development Paper Name: Final Reading Time: 15 minutes Writing Time: 2 hours No. of Pages (including cover sheet): 9 OFFICE USE ONLY (FACULTY/SCHOOL STAFF): LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD 2011 CAMPUS BE 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. Total available marks for this paper are 120 Marks which accounts for 60% of the total assessment for this unit. This paper MUST NOT BE REMOVED from the examination venue (Page 1 of 9)

2 Question 1. (a) Which organisation is responsible for HTML, CSS and DOM standards? (b) What is the primary purpose of XHTML? (c) What is the primary role of Cascading Style Sheets with respect to XHTML elements? (d) What is the primary purpose of the <head> section of a XHTML document? (e) What is the primary purpose of the <body> section of a XHTML document? (f) Briefly explain the role of the HTML elements shown here: <title>cse2wd Exam</title> <link rel="stylesheet" type="text/css" href="main.css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="myjavascript.js"></script> (g) Elements that can appear in the body section of an HTML document are classified as either inline or block elements. Define what is meant by an inline element and a block element. Give an example of an element of each type. (h) With respect to rendering a XHTML document by a Web browser, how does the browser determine which rendering mode to use? (i) What will most Web browsers do after receiving a document containing HTML syntax errors or non valid HTML code? (j) Supply two (2) reasons explaining why is it important to consider the profiles (characteristics) of the target audience when designing a new Web site. (k) What is the meaning of the term "graceful degradation" when designing a Web page? a b c d e f g h i j k ( = 20 marks) (Page 2 of 9)

3 Question 2. Carefully examine the following code: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 02 " 03 <html xmlns=" 04 <head> 05 <meta name="author" content="j.carter" > 06 <link rel = "stylesheet" type="text/css" href="default.css" /> 07 <style type=text/css /> 08 #big = { font-size: 24pt 09 color: blue 10 }; 11 </style> 12 </head> 13 <Body> 14 <h1>bright Sparks electric Inc</> <p>bright sparks at work</p> 17 <IMG src = "StaffPicture.png" longdesc="headoffice staff.html /> 18 <br> 19 <p> 20 Browse our 21 <span class="big"><a src ="Catalogue.html"></a>Catalogue </span> 22 for great deals. 22 </Body> (a) Identify the name and version of the HTML being used. (b) HTML code can be well formed without being valid. The code above is not valid. Is the code well formed? (c) Identify all the errors in the <head> section of the document. (d) Rewrite the code for the <body> section to make it valid. ( = 20 marks) (Page 3 of 9)

4 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. iii. iv. <div id="content"><h2>hello World!</h2></div> <div class="plain"><h2>hello World!</h2></div> <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> (Page 4 of 9)

5 (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. ( = 20 marks) (Page 5 of 9)

6 Question 4. a) Is the code for the table element in figure 4.2 valid according to the definitions given in figure 4.1? b) If the code is not valid then explain why it is invalid in terms of the rules given in the DTD. c) Is the code well formed? The following is an extract from the XHTML version 1.0 Strict DTD for the table element Figure 4.1 <!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;> Figure 4.2 <body> <table> <thead> <caption>exam 2011</caption> </thead> <tbody> <tr><td></td><br /></tr> </tbody> </table> </body> ( = 10 marks) (Page 6 of 9)

7 Question 5. (a) Briefly identify the purpose of the Document Object Model (DOM). (b) Examine the following JavaScript and draw a diagram 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"> var namelist = new Array ("Tom", "Jan","Luke", "Mary" ); var mylistitemelement; var textnode; var myfriend; var mylist = document.createelement('ul'); for ( var i=0; i<namelist.length; i++){ li = document.createelement('li'); myfriend = namelist[i]; text = document.createtextnode(myfriend); } li.appendchild(text); mylist.appendchild(li); var mydivelement = document.getelementbyid("mydiv"); mydivelement.appendchild(mylist); </body> </script> Question 5 continues next page -- (Page 7 of 9)

8 (c) Supply the HTML code fragment that would produce the following DOM tree structure for an ordered list with an id of "rootnode": ol id="rootnode" li li li p koala p wombat emu goanna Represents a text Node Represents an element Node (d) Write the necessary Javascript code to append another paragraph with a child text Node containing "kangaroo" to the first list item. ( = 30 marks) (Page 8 of 9)

9 Question 6. (a) Briefly explain 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 value of the variables b and d after the following Javascript code is executed? <script type="text/javascript"> var a = 5; var b = 2; var c = 2; var d = 1; var zoo = new Array(); zoo[0] = "wombat"; zoo[1] = "koala"; zoo[2] = "echidna"; zoo[3] = "kangaroo"; zoo[4] = "wallaby"; zoo[5] = "goanna"; zoo[6] = "cockatoo"; if( b <= c ){ d = a b * c; b = zoo[d]; }else{ d = a; b = zoo[c]; } alert( "b now contains: " + b + " and d contains: " + d); </script> (c) Write javascript code to including a for loop and document.write() statements to generate a simple table that displays each of the whole numbers from 1 to 7 in the first column and the corresponding day of the week in the second column as shown below: Number 1 Sunday 2 Monday Saturday DayName ( ie. 1=Sunday, 2=Monday, 3=Tuesday, 4=Wednesday, 5=Thursday, 6=Friday, 7=Saturday) ( (2+2) = 20 marks) (Page 9 of 9)

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML