Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7
Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been displayed in a web browser. Figure RoboEddy Homepage Welcome to RoboEddy RoboEddy is an educational robot with the following features: Fast microprocessor Two motor channels 8 analogue inputs 8 digital I / O ports Page 2 of 7
Figure 2 shows the HTML and CSS code that was used to create the web page shown in Figure. Some of the code has been replaced with the numbers ❶ to ❽. Figure 2 <❶> <head> <title> ❷ </title> <style> #toptitle { text-align: center; font-size: 8pt; ❸ : italic; }.paratext { font-size: 2pt; font-family: Arial; } <❹> </head> <body> <div id="❺">welcome to RoboEddy</div> <p ❻="paratext">RoboEddy is an educational robot with the following features:</p> <❼> <li>fast microprocessor</li> <li>two motor channels</li> <li>8 analogue inputs</li> <li>8 digital I/O ports</li> <❽> </body> </html> Write the missing code from Figure 2 in Table below, next to the number that indicates where it should appear. The first one has been done for you. Table Number Code should be ❶ html ❷ ❸ ❹ ❺ ❻ ❼ ❽ (6) (Total 8 marks) Page 3 of 7
Q2. Figure shows the HTML (Hypertext Markup Language) for a web page. Figure <html> <head> <title>manor School Library</title> </head> <body> <p>our favourite genres are:</p> <ul> <li>science fiction</li> <li>suspense</li> <li>comedy</li> </ul> <a href="topten.html">discover our Top Ten Books</a> </body> </html> (a) With reference to the contents of Figure, draw a diagram in the space below to show how this web page would appear on a screen when viewed through a web browser. If necessary, use labels to make your diagram clear. (4) Page 4 of 7
(b) Style rules defined in an external style sheet are to be used to control the look and layout of the page for which the HTML code is provided in Figure. (i) One of the style rules is: p { font-family: Arial; color: blue; } Describe the effect of this style rule on the web page.......... () (ii) The following HTML code is added to the body of the page. <div id="header">welcome to the school library</div> Write a style rule so that only the text Welcome to the school library displays as green coloured text with font size 36 point.......... (3) (Total 8 marks) Q3. Below is the Hypertext Markup Language (HTML) for a web page. <html> <head> <title>aqa COMP2</title> <meta name="keywords" content="aqa, Computing, COMP2" /> </head> <body> <div id="header"> <h>aqa COMP2</h> </div> <p>welcome to the <span class="boldred">new</span> page for COMP2 students</p> </body> </html> The box below shows the external style sheet styles.css which contains three rules. h { color:darkblue; font-style:italic } #header { font:bold 30% Verdana }.boldred { color:red; font-weight:bold } Page 5 of 7
(a) Using the HTML above provide an example of the following: (i) ID selector:... (ii) Class selector:... (iii) Block-level tag:... () () () (b) One colour scheme used for websites is the monochromatic colour scheme. Describe the type of colours that would be used in a monochromatic colour scheme....... () (c) Describe the purpose of the meta elements line in the HTML above.... () (d) The HTML code required to link the web page to the external style sheet is missing. The incomplete HTML code below will be added to the web page to link it to the external style sheet. < rel=" " type = "text/css" href=" " /> Complete the table below by writing the missing parts of the HTML code. Label Missing part (3) (Total 8 marks) Page 6 of 7
Q4. The diagram below shows the Hypertext Markup Language (HTML) and Cascading Style Sheet (CSS) for a web page, HelpLink.html. <html> <head> <title>help Centre</title> <style type= text/css > #header {color:yellow; font-family:arial; textalign:center} #footer {color:red; font-family:arial; text-align:center}.links {font-family:tahoma; text-align:center} </style> </head> <body> <div id= header > <h>aqa Help Centre</h> <img src= /image/aqalogo.gif width=248 height=90 /> </div> <div class= links > <p><a href= /igcse/english.html >IGCSE English Help</a></p> <p><a href= /igcse/maths.html >IGCSE Maths Help</a></p> <p><a href= /igcse/science.html >IGCSE Science Help</a></p> </div> <div> <p id= footer >Copyright (C) 202 AQA and its licensors.</p> </div> </body> </html> (a) What is the colour of the heading AQA Help Centre when the web page, HelpLink.html, is viewed in a browser?... () (b) What font will the browser use to display the hyperlinks for this page?... () (c) HelpLink.html is stored in a folder with path C:/HTML/Testing/ for testing purposes. State the full pathname of the image file AQALogo.gif.... () Page 7 of 7
(d) Using the browser window template below, sketch the appearance of the web page when viewed in a web browser. You must use labels to clarify your alignment, line spacing and font size. For the image AQALogo.gif draw a box to represent where the image would appear. (5) (Total 8 marks) Q5. (a) What is an intranet?... () Page 8 of 7
(b) A page from a university intranet is shown below. Page 9 of 7
Complete the HTML code below by adding the additional statements required to produce the web page above. <html> <head> <title> </head> <body> </title> </body> </html> (6) (Total 7marks) Page 0 of 7
M. (a) (i) Hypertext Markup Language; (ii) Cascading Style Sheet(s); (b) 2 RoboEddy Homepage ; A minor typos 3 font-style ; (must have hyphen) 4 - /style ; (must have / ) 5 toptitle ; R #toptitle 6 class ; 7 - ul 8 -- / ul ( 7 + 8 both correct ); NOTES: Ignore < > for parts 4,7 and 8 6 [8] M2. (a) Manor School Library X Our favourite genres are: Science fiction Suspense Comedy Discover our Top Ten Books Manor School Library in title bar; Line space after Our favourite genres are:' with the correct text AND line space after the bulleted list ; Use of un-ordered list with three bulleted points with correct text; Hyperlink identified through underlining or clear label with the correct text; A minor spelling mistakes Max 3: if any errors in drawing of page (for example font size differences or indenting hyperlink) 4 (b) (i) The text inside the <p> tags/ paragraph will be blue and use the Arial font // The text 'Our favourite genres are:' will be blue and use the Arial font; Candidate needs to talk about text being blue Page of 7
(ii) #header{ font-size: 36pt; color: green; } Max 2 if ; separator missing between 36pt and color mark - #header {} // div {} // div#header{} ; [Not contents] mark for color: green; mark for font-size: 36pt; Note: color must be spelt without the u For green accept #00xx00 where xx in range 0 to FF 3 [8] M3. (a) (i) (#)header; R Id= header I quotation marks (ii) (.)boldred; R class= boldred I quotation marks (b) (c) (d) (iii) div // p // h ; I angled brackets A answers of the type <p>... </p> A colour scheme made up of different shades / hints of one single colour; A made of up black, white and greys / shades of grey NE black and white Can be used by search engines / programs to categorise / list the page Provides metadata about the document; A a more general use of a meta tag for example to provide a description of the page / site // indicate author <link rel= stylesheet type= text/css href= styles.css > Mark : link; 2 stylesheet; 3 styles.css; A quotes 3 [8] M4. (a) Yellow; Page 2 of 7
(b) (c) Tahoma; C:/Image/AQALogo.gif; C:/HTML/Testing/Image/AQALogo.gif; A \ instead of / (d) Correct text in title bar; All text centred; Correct text for heading and indicated as larger font size + correct text for footer; Sketch of an image centrally situated in correct place; Three underlined hyperlinks with correct text with space before and after; A minor spelling mistakes 5 [8] M5. (a) A private/restricted access/closed user group network (used to share information / operations within an organisation) ; Page 3 of 7
(b) <html> <head> <title>public Lectures 20 </title> </head> <body> <h align=center>lecture Titles</h> <ul> <li>the Flamsteed Lecture</li> <li>the Arkwright Lecture</li> <li>the Denning Lecture</li> </ul> <p> <em>all places are Free </em></p> <p>tickets <strong>must</strong> be booked in advance</p> </body> </html> Public Lectures 20 between the <title> and </title> tags; <h> and </h> around Lecture Titles ; A h2 for h A <font size=x><strong> and </strong></font> where x>=6 align=center in the <h> tag // style= text-align:center in the <h> tag; A use of <center> and </center> instead <ul> and </ul> surrounding the list; <li> and </li> surrounding each of the three items in the list; <p> and </p> around each sentence at the bottom of the page; A use of two <br /> tags between the sentences instead A <br> for <br /> <em> and </em> around "All places are Free"; A <i> and </i> <strong> and </strong> around MUST ; A <b> and </b> I minor changes to text I just one additional <br /> or <p> tag in each of the following places: before the heading, after the heading, after the bulleted list. Max 6 [7] Page 4 of 7
E. The HTML / CSS question proved to be easier than last year when the format was slightly different. It was pleasing to see how many students could provide correct answers to question part (a) but it is to be noted that it was not as high as expected with only 60% providing hypertext mark-up language for part (a)(i). Part (b) proved to be a good discriminating question with students gaining the whole range of marks. The majority of students secured 3 or 4 marks out of the 6. Common mistakes included students not understanding the difference between an ordered and un-ordered list or just providing <p> and </p> for the list section. The marks had to be syntactically correct to be awarded. For example, #toptitle was not the correct answer for missing item 5 because the # is omitted from id selectors when the tag is referenced in the body section of the HTML. E2. Part (a) was answered well by students. Weaker students did not show the spacing that would be present between the block tags. Other students either numbered the list or did not place any bullet points on them and lost the ability to secure one of the marks. Students do need to be encouraged to produce neat diagrams and the labelling of blank spaces and hyperlinks makes the awarding of marks a lot easier. Describing the effect of the style rule in part (b)(i) had most students realising that the font would be changed to Arial and the text colour blue, but some forgot to link this either to the text on the web page or the <p> tag so it was not clear which text would be affected. The majority of students could correctly write color:green for part (b)(ii) but to then add in the other required elements was a slightly harder challenge. Not many students appeared to know the syntax for an ID selector. It was also surprising to see a few students drop marks by writing color:blue which demonstrates a poor reading of the question. E3. Question covered the HTML and CSS part of the specification and was asked in a different way for this paper. Students were asked to identify some constructs, rather than draw or code a web page. Students need to be careful that, when providing answers, they only include what is needed. When identifying a class tag, for example, providing.boldred{ color : red; font weight : bold} will not secure the mark as it is unclear which part of the answer is actually the class tag. Whether students fully understood the meaning of a monochromatic colour scheme was hard to identify. Many just wrote about it being black and white which was deemed to be insufficient for a mark. Of the students who did secure the mark, many correctly identified that a monochromatic colour scheme uses one main colour and shades of that colour. The use of the meta element tag appeared to be more well known than the previous question part. The majority of correct answers were concerned around the use of this element by search engines. In part (d) students found the LINK tag difficult to identify and complete. The part most students managed to answer successfully was the href section as this also occurs in other HTML tags. Whilst students might know about external style sheets it was clear that the HTML tag needed to perform this was not well known. Page 5 of 7
E4. This question was generally well answered. Parts (a) and (b) were very well answered by students, with part (c) being correctly answered by the majority. In question part (d), to gain the mark for the <h> tag students needed to identify clearly the text as larger by either labelling it as such or drawing it a lot larger than any other text. Labelling the text as just h is not enough to secure the mark. The majority of students missed scoring full marks as it was not clear that they appreciated how line spaces are formed when using block level tags. The hyperlinks were surrounded by <p> tags and the examiners were looking for clear evidence of spaces between the three links. E5. Part (a) asked candidates to identify what an intranet is and the most common answer of a private network managed to secure the mark. Good candidates gave a more detailed answer and included aspects such as sharing information. Candidates that wrote about a private Internet were not awarded the mark. Part (b) asked candidates to write the HTML code for a web page. It was pleasing to see how many candidates secured high marks for this question. Strong candidates clearly recognized the required HTML tags and set out the code in a very readable manner. It was clear that some candidates still do not understand all of the HTML tags mentioned in the Teacher Resource Bank material. Weaker candidates used <ol> rather than <ul> for the list and some struggled to use any HTML tags at all. A few candidates introduced CSS style rules correctly into their HTML and were awarded credit for this when appropriate. It is clear that a few candidates are confused about the role of CSS. These candidates attempted to use CSS elements incorrectly by simply placing them straight into the code instead of setting up a style section or using the style attribute option inside a HTML tag. Page 6 of 7
Page 7 of 7