DESIGNING AND DEVELOPING A WEBSITE 5TH JUNE 2012

MARKING SCHEME
This Marking Scheme has been prepared as a guide only to markers. This is not a set of model answers, nor is the Marking Scheme exclusive, for there will frequently be alternative responses which will provide a valid answer. Unless a question specifies that an answer be produced in a particular form, then an answer that is correct, factually or in practical terms, must be given the available marks. If there is doubt as to the correctness of an answer the relevant NCC Education materials and associated module textbook should be the first authority.

Throughout the question, please credit any valid alternative point.

Notice to Markers Where markers award half marks in any part of a question they should ensure that the total mark recorded for a task is rounded up to a whole mark.

CANDIDATES MUST ATTEMPT ALL QUESTIONS QUESTION 1

a) The World Wide Web Consortium (W3C) was set up by Tim Berners Lee in 1994. i) What is the purpose of the W3C? Marks

The purpose of the W3C is to oversee the development of new web technologies (1 mark).
ii)

When developing websites why is it important to follow W3C web standards? Following web standards helps to make webpages understandable by the greatest number of web users (1 mark).

b) Computers on the WWW can be classified as clients or servers. Explain the different roles of

the client and server computers. Clients connect to web servers, make requests for web pages and display web pages for web users (1 mark). Web servers store web pages and send web pages to the client (1 mark).
c) Assistive technologies help disabled people use the web. Give two examples of assistive 6

technologies. For each example, explain how the technology supports a specific group of web users. A screen reader (1 mark) assists visually impaired and blind users (1 mark) by reading out the contents of a webpage (1 mark). Mouth wands, eye tracking and voice recognition systems (1 mark) assist users with motor disabilities (1 mark) who maybe unable to use conventional input devices (1 mark).
Total 10 Marks

QUESTION 2 the value(s) and the content of the element. <header>Welcome</header> Tag name: header Attributes: No attributes Values: No values Content: Welcome (2 marks) <span class="response">agreed</span> Tag name: span Attribute: class Value: response Content: agreed (2 marks)

Marks

a) Look at the following HTML elements. For each one identify the tag name, the attribute(s), i) 2

ii)

Page 2 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

iii)

<td colspan="3" rowspan="2">23 units</td> Tag name: td Attributes: colpsan, rowspan Values: 3, 2 Content: 23 units (2 marks)

b) Consider the following statement:

In XHTML Strict 1.0 inline elements should always be nested inside block level elements. What are block level and inline elements? Provide an example that shows a correctly nested inline element. Block level elements are used to mark up large blocks of text for example heading and paragraphs (1 mark). Inline elements are used to mark up individual words or phrases (1 mark). Credit any valid example (2 marks)e.g.: <p>The purpose of this page is to demonstrate <em>a basic XHTML document.</em></p>
Total 10 Marks

QUESTION 3
a) Look at the following paragraph. It describes the differences between HTML and CSS.

Marks 3

i) ________ is used to define the structure and meaning of a document. ii)_______ is used to define the presentation of web pages. Even if the browser cant understand or obey the iii)_______, the contents of a web page will still be understandable as the structure of the document is separate from how it looks. There are three missing words in this paragraph. In each case the missing word is either HTML or CSS. Which words are missing from the spaces (i), (ii) and (iii) i) HTML (1 mark) ii) CSS (1 mark) iii) CSS (1 mark)

Page 3 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

b) Look at the following XHTML and CSS documents: XHTML

<h2>Model</h2> <ul> <li>1.4 Petrol</li> <li class="chosen">1.3 16v Multijet</li> <li>1.9 Multijet </li> </ul>
CSS

h2.chosen{color:blue;} ul li{color:green;} li.chosen{color:red;}

The above CSS is the only styling applied to the HTML. What will be the colour of the text: Model i) Black (default styling)
ii)

1.3 16v Multijet Red 1.9 Multijet Green The CSS is applied as an embedded (internal) CSS. There are several similar pages in the site. Name two other methods for applying CSS to an HTML document. Which of these would be a better way of specifying the CSS for this website, why? An external CSS file (1 mark) and Inline CSS (1 mark). A single external CSS file would be a better way of applying the styling (1 mark). This is a more efficient way of applying CSS, making it easier to modify or change the design in the future (1 mark).

iii)

iv)

Total 10 Marks

Page 4 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

QUESTION 4 using relative URLs.

root

Marks 4

a) Look at the following website directory structure. The pages in this site are linked together

batsmen

bowlers

wicketkeepers

index.html

wilson.html jones.html

parry.html roberts.html

smith.html phillips.html

collins.html i)

A hyperlink in the page phillips.html links to the page jones.html. What will be the value of the href attribute for this hyperlink? ../batsmen/jones.html A hyperlink in the page index.html links to the page parry.html? What will be the value of the href attribute for this hyperlink? bowlers/parry.html A hyperlink in the page wilson.html links to the page collins.html. What will be the value of the href attribute for this hyperlink? collins.html A hyperlink in the page smith.html links to the page index.html. What will be the value of the href attribute for this hyperlink? ../index.html

ii)

iii)

iv)

Page 5 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

b) What are skip links? How do skip links assist users of mobile devices and users accessing the

web with a screen reader? Many websites feature navigation bars at the top of the page. Skip links allow the user to jump over the navigation directly to the content in a webpage (2 marks). Screen readers read out link text to the user. It can be time consuming listening to the screen reader read out every navigation option. Skip links allow quicker access to the content of the page. (2 marks) Some mobile devices require users to navigate using a keypad or have very small screens. Tabbing through several navigation options at the top of a page can be tedious. Skip links reduce the amount of effort needed to access the content of the page. (2 marks)
Total 10 Marks

QUESTION 5

Marks

a) A number of different image file formats are supported by web browsers these include 8-bit

PNG, 24-bit PNG and JPEG. The following images need to be saved in an appropriate file format for display in a web page. Which file format you would use to store each of these images? In each case justify your choice. i) A photograph of cyclist climbing a hill on a bright sunny day Photographic images usually feature many different colours and smooth transitions. This means a JPEG would be an appropriate choice; it will be smaller in file size than a 24-bit PNG. An 8-bit PNG may struggle to support the range of colours. (2 marks) ii) A company logo Company logo is likely to have a limited number of colours. An 8-bit PNG would be an appropriate choice because it would result in a smaller file size than the equivalent JPEG or 24-bit PNG. (2 marks) iii) A photograph of boat sailing into a harbour Photographic images usually feature many different colours and smooth transitions. This means a JPEG would be an appropriate choice; it will be smaller in file size than a 24-bit PNG. An 8-bit PNG may struggle to support the range of colours. (2 marks)
b) The <img> element is used to insert an image into a webpage. Why should the <img>

element always feature an alt attribute? To support accessibility (1 mark). The alt attribute specifies alternative text. This is text that will be read out by screen readers which cant display the image (1 mark).

Page 6 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

c) What is a codec? Why do we need to use codecs to deliver audio and video over the web?

A codec is a compressor/decompressor. A codec reduces the size of large video and audio files. A codec is also needed to play the video/audio file (1 mark). Without the use of codecs it would be difficult to transfer large files such as video and audio over the internet (1 mark).
Total 10 Marks

QUESTION 6

Marks 8

a) You have been asked to create an XHTML form that will ask the user the following

questions. For each question identify which type of form control should be used to implement the question. Provide a brief justification for your answer. 1) Enter your name 2) Select your gender Male Female Unspecified 3) Which of the following have you visited? Asia Africa Europe South America 4) Please provide a description of your travelling experiences? 1) A single line text field/text box (1 mark). The users name is short enough to fit in a standard text field (1 mark). 2) Radio buttons (1 mark). The user is required to select a single option from a list. A radio button would preferable to a select menu as the user will be able to see all options without having to interact with the page (1 mark). 3) Checkboxes (1 mark). The user needs to be able to select multiple options from a list (1 mark). 4) A multi-line text field using the <textarea> element (1 mark). Providing a description is likely to require more space than the standard single line text field can provide (1 mark).
b) The CSS attribute selector allows us to style element based on the value of specific attribute? 2

Why is it particularly useful when styling form controls? The attribute selector is especially useful when styling form controls as several different form controls are all defined by the same element, <input> (1 mark). The attribute selector allows us to style different types of form control, radio button, checkboxes, text fields based on the type attribute (1 mark).
Total 10 Marks

Page 7 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

QUESTION 7
a) i)

Marks 3

The CSS properties float and clear are useful when controlling page layout. Describe the effect of the float and clear properties. The float property pushes an element to the left or right (1 mark). Content that follows will flow down the elements side (wrap onto the same line) (1 mark). The clear property prevents an element from floating (1 mark). Look at the following XHTML and CSS documents:
XHTML <div id="blockOne">1</div> <div id="blockTwo">2</div> <div id="blockThree">3</div> CSS

ii)

div{ width:100px; height:100px; border:1px solid black; }

When the CSS is applied to the HTML the page looks like the following: 1

Using the float and clear properties write some additional CSS rules that will change the arrangement of these <div> elements so that they look like the image below 1 2

Page 8 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

There are a number of possible solutions, for example:

Give one mark for correct use of id selector. Give two marks for correct application of float and clear properties that result in specified layout.
b) HTML 5 specifies a number of new semantic elements. Give an example of one of these 2

elements. What advantages do they offer? header, article, aside, nav, footer, section or hgroup (1 mark) They allow to us to define additional meaning for part of a page isnt possible with <div> elements (1 mark).
c) Describe differences between fixed width and fluid (liquid) web page design. 2

In fixed width page design the page is designed at a fixed size to fit on the smallest target screen resolution. (1 mark). In fluid web page design the page design re-sizes to fit the available browser width (1 mark).
Total 10 Marks

QUESTION 8
a) eCommerce models can be categorised as B2C, B2B and C2C. i) What is meant by each of these categories?

Marks

B2C Business to Consumer (1 mark). Selling products and services to consumers (1 mark). B2B Business to Business (1 mark). Businesses selling products/services to other businesses over the Internet (1 mark) C2C Consumer to Consumer (1 mark) Consumers sell to each other through an online business (1 mark)

Page 9 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

ii)

For each of the above categories provide an example of a type of website that fits the model. B2C Any of the following or alternative sensible answer that fits the model (2 marks) Online shops Newspaper and magazine website that charge users subscription Social networking sites that generate revenue through advertising B2B Any of the following or alternative sensible answer that fits the model (2 marks) A manufacturer selling products to a retailer through their website A manufacturer ordering raw materials from a supplier C2C The following or alternative sensible answer that fits the model (2 marks) Auction websites where consumers sell items they own to other consumers

iii)

Which model is the largest type of eCommerce?

1 Total 10 Marks

B2B is the largest form of e-commerce (1 mark)

QUESTION 9

Marks 4

a) Card sorting is a technique that can be used in a user-centred web design process? What is

card sorting? How can it help when designing a website? Each item or chunk of content that will appear in the website is written on a card. The user organises these cards into groups and gives each group a name (2 marks). Card sorts are used to help define the site structure, how the information will be organised into sections and sub-sections. (1 mark) Card sorting involves the input of users so that the design of site structure isnt simply the designer guessing or speculating about how the content should be organised.(1 mark)
b) The navigation design of a website plays an important role in letting users know where they 6

are in a website and what they can do on a website. Name THREE (3) commonly used navigation systems used in web design. For each navigation system, describe its purpose. Persistent or global navigation. The navigation options that appear on every single page in a site (1 mark). Provide easy access to the sites main content and functions (1 mark). Local navigation provides access to the pages in the current section or subsection (1 mark). This is usually implemented as a secondary navigation bar and provides access to related content (1 mark). Breadcrumb navigation shows the users position in the site structure (1 mark). It makes it easy for users to retrace their steps when navigating a large site (1 mark). Total 10 marks

Page 10 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012

QUESTION 10

Marks
2

a) Many web browsers feature developer tools, for example Firebug in Firefox. Explain how

these tools are useful to web developers when building XHTML and CSS websites. Any two of the following: Help fix problems in XHTML and CSS code by inspecting parts of a page. The tools can show the exact CSS that is being applied to an element (1 mark). Dynamically changing the CSS rules that are applied to element. We can the view the effect of changing a CSS rule without having to save and refresh a page (1 mark). They are useful in learning CSS techniques that are being used on other websites. The developer tools can be used to inspect these websites to see the CSS that has been applied (1 mark).

b) When designing a website it is a good idea to test the website in a number of different web

browsers. Name THREE (3) popular web browsers. Why should we test a website in a number of different browsers? Any three from the following Internet Explorer Mozilla Firefox Google Chrome Safari (Mac OS) Opera Lynx (text only) Konqueror Different web browsers support different features of HTML and CSS (1 mark). A site that looks fine in one browser maybe unusable in a different browser because of the HTML elements or CSS properties used. (1 mark)
c) Describe THREE (3) different approaches to testing web pages for mobile readiness? 3

Emulators or browser add-ons that mimic mobile devices (1 mark). An online testing tool that runs a webpage against a series of tests for good practice (1 mark). Testing on the actual devices (1 mark). Total 10 marks

END OF PAPER

Page 11 of 11
Designing and Developing a Website JUNE 2012 Final NCC Education Ltd 2012