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 elements and (ii) Element attributes. (c) What is the primary role of Cascading Style Sheets with respect to HTML 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 purpose of the HTML elements given here: (i) <title>cse2wd Exam</title> (ii) <link rel="stylesheet" type="text/css" href="mycssrules.css" /> (iii) <meta http-equiv="content-type" content="text/html; charset=utf-8"/> (iv) <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 inline element and a block element other than div and span elements. (h) With respect to rendering a XHTML document by a Web browser, how does the browser determine which rendering mode to use? (i) Apart from validation, how is the DOCTYPE information used by a modern Web browser? (j) Supply two (2) reasons briefly explaining why is it important to consider the profiles (characteristics) of the target audience when designing a new Web site. (k) Why can't the following html document be served by the Apache web server from your public_html folder with the following permissions? -rw------- 1 jabloggs student 270 Apr 19 12:46 index.html a b c d e f g h i j k. (2 + 1 + 1 + 1 + 2 + 3 + 4 + 2 +1 + 2 + 1 = 20 marks) (Page 2 of 9)
Question 2. Carefully examine the following code: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 02 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml"> 04 <head> 05 <meta name="author" content="k.baxter" > 06 <link rel = "stylesheet" type="text/css" href="mycssdefs.css" /> 07 <style type=text/css /> 08.catLink = { font-size: 24px 09 color: #333 10 } 11 </style>; 12 </head> 13 <Body> 14 <h1>brilliant Kitchen Designs Inc<h1/> 15 16 <p>our expert sales staff</p> 17 <IMG href = "salespeople.jpg" longdesc="headoffice staff.html /> 18 <br> 19 <p> 20 Browse our 21 <span id="catlink"><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. (1 + 1 + 6 +12 = 20 marks) (Page 3 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) (ii) (iii) (iv) (v) <div><h2>hello World!</h2></div> <div id="content"><h2>hello World!</h2></div> <div class="plain"><h2>hello World!</h2></div> <div><h1>hello World!</h1></div> <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)
(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 5 of 9)
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 DTD fragment is based upon the XHTML version 1.0 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;> <!-- %Flow; mixes block and inline --> <!ENTITY % Flow "(#PCDATA %block; %inline; )*"> figure 4.2 <body> <table> <thead> <caption>exam 2012</caption> </thead> <tbody> <tr><td>hello</td><p>world!</p></tr> <tr></tr> </tbody> </table> </body> ( 2 + 6 + 2 = 10 marks) (Page 6 of 9)
Question 5. (a) Briefly identify the primary purpose of the Document Object Model (DOM). (b) 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("Apple", "Orange","Peach", "Mango"); 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 5 continues next page -- (Page 7 of 9)
(c) Supply the equivalent HTML code fragment that would produce the following DOM tree structure for an unordered list with an id of "rootnode": ul id="rootnode" li li li p window roof p door floor Represents a text Node Represents an element Node (d) Write the necessary Javascript code to append a heading 1 (h1) with a child text Node containing "wall" to the second list item. ( 4 + 8 + 4 + 14 = 30 marks) (Page 8 of 9)
Question 6. (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 9 of 9)