Designing and Developing a Website. 7 May Examination Paper. Time: 3 hours

Size: px

Start display at page:

Download "Designing and Developing a Website. 7 May Examination Paper. Time: 3 hours"

Karen Floyd
5 years ago
Views:

1 Designing and Developing a Website 7 May 205 Examination Paper Answer ALL questions. Clearly cross out surplus answers. Time: 3 hours The maximum mark for this paper is 00. Any reference material brought into the examination room must be handed to the invigilator before the start of the examination.

2 Answer ALL questions Question a) The W3C stands for the World Wide Web Consortium. A consortium is a collection of different individuals, companies and organisations working together for a common purpose. Why is it important that the W3C is a consortium? b) A focus of accessible web design is to support users with deafness and hearing loss. State THREE (3) specific actions that web designers can take to support users with deafness and hearing loss. c) Consider the following diagram of the WWW: 3 3 Figure : A model of the WWW i) What does HTTP stand for? ii) Briefly describe the roles of the client and server computers. 2 iii) The diagram represents the client machine as a desktop computer. Equally it could be a laptop or a smartphone. State ONE () other device that could be categorised as a client in this model of the WWW. Total: 0 Page 2 of 2

3 Question 2 a) Consider the following HTML document: <!DOCTYPE HTML> <html> <head> <title>add a title here</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <section> <h>welcome</h> <p>lorem ipsum dolor sit amet.</p> <section> <h2>about Us</h2> <p>ut enim ad minim veniam.</p> </section> <section> <h2>latest News</h2> <p>duis aute irure dolor in reprehenderit.</p> </section> <section> </body> </html> This page contains examples of key HTML concepts. Briefly explain what is meant by each concept listed below and provide ONE () example of the concept from the HTML document shown above. i) Tag 2 ii) Content 2 iii) Attribute 2 iv) Empty Element 2 v) Nesting 2 Total: 0 Page 3 of 3

4 Question 3 a) The following CSS has been applied to the HTML document shown in Question 2: *{ font-family:verdana; section p{ background-color:red; section section p { color:blue; Describe the appearance of the text: i) Welcome ii) Duis aute irure dolor in reprehenderit. iii) Lorem ipsum dolor sit amet. b) The W3C specifies two technologies for web page construction; HTML and CSS. i) Describe the different roles of HTML and CSS. 2 ii) How does the use of two separate technologies support accessibility? 2 c) Consider the following HTML element: <p style="line-height:2.0em">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p> This is an example of inline CSS. i) Why is the use of inline CSS often considered bad practice in web design? ii) State TWO (2) alternative ways of specifying CSS for a webpage. 2 Total: 0 Page 4 of 4

5 Question 4 a) Consider the following web site structure: root companion working pug.html sheltie.html hunting guard index.html pointer.html whippet.html doberman.html i) A hyperlink in the page pug.html links to the page sheltie.html. What will be the value of the href attribute for this hyperlink? ii) A hyperlink in the page doberman.html links to the page whippet.html What will be the value of the href attribute for this hyperlink? iii) A hyperlink in the page index.html links to the page pointer.html. What will be the value of the href attribute for this hyperlink? iv) A hyperlink in the page pointer.html links to the page index.html. What will be the value of the href attribute for this hyperlink? Question 4 continues on next page Page 5 of 5

6 b) Consider the following HTML 5 code. It represents a navigation bar with an image for each hyperlink: <div id="nav"> <a href="home.html"><img src="home.png" alt="home button"></a> <a href="about.html"><img src="about.png" alt="about button"></a> <a href="contact.html"><img src="contact.png" alt="contact button"></a> <a href="blog.html"><img src="blog.png" alt="blog button"></a> </div> i) Why is using images in this way considered bad practice? 3 ii) Re-write the HTML code to show how it might be better structured. 3 Total: 0 Page 6 of 6

7 Question 5 a) Both 8-bit PNG and JPEG images can be displayed in web pages. Explain the difference between 8-bit PNG and JPEG images and state which types of images each file format is suited to displaying. b) An alternative to using PNG or JPEG images is to use SVG (Scalable Vector Graphics), an XML based, vector image format. State TWO (2) potential advantages of using SVG. 4 2 c) Consider the following HTML <object> tag. It is used to embed the Adobe Flash player into a webpage. Code like this is often used to display video in a webpage. 4 <object classid="clsid:d27cdb6e-ae6d-cf-96b " width="550" height="400" id="movie_name" align="middle"> <param name="movie" value="my-movie.swf"/> <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400"> <param name="movie" value="my-movie.swf"/> <a href=" <img src=" alt="get Adobe Flash player"/> </a> </object> </object> The video element feature of HTML 5 means that developers may no longer be dependent on using the <object> tag to insert media. State TWO (2) advantages and TWO (2) disadvantages of this approach to HTML 5. Total: 0 Page 7 of 7

8 Question 6 a) Consider the following HTML code. You should recognise most of the code. The stands for non breaking space. The browser simply inserts a space. <table border=""> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <td rowspan="3"> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> </tr> </table> i) Sketch out what this table will look like when rendered in a browser. 2 ii) State ONE () difference between <th> and <td> elements and briefly explain how the use of <th> element supports accessibility. 3 iii) This table features a border attribute. What might be a more effective way of specifying the border for an HTML table? b) The HTML 5 specification specifes some new attributes for HTML <input> elements. Describe the purpose of each attribute listed below in relation to the HTML 5 specification. i) Required ii) Autofocus iii) Autocomplete iv) Placeholder Total: 0 Page 8 of 8

9 Question 7 a) Many web developers never use id selectors in their CSS. i) What type of selector would a web developer use instead, when they prefer not to be limited by simple tag selectors? ii) Why is not using id selectors considered good practice? 2 b) Consider the following CSS and HTML code. The CSS has been applied to the HTML. Sketch out what the page will look like when rendered in a browser. 2 header{ outline:px solid black; height:50px; width:00%; float:left; nav{ outline:px solid black; height:50px; clear:left; width:25%; float:left; section{ outline:px solid black; height:50px; width:75%; float:left; footer{ outline:px solid black; height:50px; clear:left; width:00%; <body> <header></header> <nav>2</nav> <section>3</section> <footer>4</footer> </body> c) The above example uses percentages as a unit. What are the potential advantages of using percentages as units for specifying the width of elements in a page layout? 2 Question 7 continues on next page Page 9 of 9

10 d) The following HTML code shows the top part of an HTML document: 3 <!DOCTYPE HTML> <html> <head> <title>homepage</title> <link rel="stylesheet" media="(max-width: 480px)" href="style.css"> <link rel="stylesheet" media="(min-width: 480px)" href="style2.css"> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> Identify and briefly describe TWO (2) link elements in this document and provide ONE () reason why there are these two link elements. Question 8 Total: 0 a b In the user centred web design process, research is often conducted into the intended users of a website. State THREE (3) different techniques for finding out about the intended users of a website. B2B is the most common form of ecommerce. 3 i) What does B2B stand for? ii) State THREE (3) other categories of ecommerce and provide ONE () 6 example of a type of website that fits each category. Total: 0 Page 0 of 0

Question 9 a) Consider the following screen shot of a website. 8 Source: http://www.whittard.co.uk/tea/type/black-tea/english-breakfast-large-leafteabags.htm (accessed: Jan 205).

11 Question 9 a) Consider the following screen shot of a website. 8 Source: (accessed: Jan 205). Analyse this page design from a usability point of view. You may describe positive design features that enhance the usability of the page. You may also describe aspects that you think are bad design features; e.g.features that could be confusing for users and impair the usability of the site. Briefly outline FOUR (4) design features. For each design feature explain why it is a good/bad design feature. b) Card sorting involves giving potential users of a website a collection of labels and asking them to organise them into groups and sub-groups. How is this useful in a web design project? 2 Total 0 Page of

12 Question 0 a) i) What is meant by validating a webpage? ii) Why is it considered good practice to validate webpages? 2 b) Usability testing involves getting potential users of a website to perform typical tasks using a website or website design. i) Usability testing is best done as part of an iterative design process. Briefly explain what is meant by an iterative design process. ii) Why should members of the web development team not be subjects for usability tests? c) Web Accessibility Evaluation Tool (WAVE ) is an online tool that can check the accessibility of a website. State TWO (2) advantages and ONE () disadvantage of using a tool like WAVE? (WAVE copywright is 204 WebAIM) Total: 0 End of Examination Paper Page 2 of 2

Designing and Developing a Website. 7 May Marking Scheme

Designing and Developing a Website 7 May 05 Marking Scheme This marking scheme has been prepared as a guide only to markers. This is not a set of model answers, or the exclusive answers to the questions,