Micronet International College

Transcription

1 Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 1 (20%) Name: /50 Class: QUESTION 1 a) I) What are W3C standards? 1 Specifications or descriptions of web technologies ii) Provide an example of a W3C standard? 1 XHTML 1.0 Strict or CSS 2.1 iii) When developing websites why is it important to use web standards? 2 The standards aim to provide web technologies that support the greatest number of web users. If we follow web standards we can be confident our websites will be accessible to as many users as possible b) Should web browser software such as Internet Explorer or Mozilla Firefox be classified as client or server software? Explain your answer. 2 Web browsers are clients Clients request web pages and receive web pages from servers and display the page for the users. This is the role of the web browser. c) Consider the following web users. For each person describe how their use of the web would be affected by their disability and name one action you could take as a web developer to make a web site more accessible for the user. i) Robert Laker is blind. 2 Blind users will typically use a screen reader that reads out the contents of a web page They often navigate using a keyboard. An action you could take as a web developer would be to make sure meaningful alternative text is provided for all images ii) Ronald Berrendero is deaf. 2 Deaf users will struggle to understand video and audio content An action to take would to be providing alternative written content such as a transcript for video and audio content in a website

2 QUESTION 2 a) Name the THREE (3) different ways of applying CSS to a webpage? Which approach to applying CSS is usually considered the most useful? Justify your answer. 6 An external CSS An embedded CSS Inline CSS An external CSS is the most useful A single CSS file is applied to all the pages in a site The design for the entire site can be changed by modifying a single CSS file b) Look at the following XHTML and CSS documents. XHTML <div class="expand_description"> <p> The <a href=" inc.</a> working group makes two recommendations for changes to the product catalogue</p> <ul class="show_items"> <li><a href="widgets.html">widgets</a>. Everyone needs a widget. This recommendation outlines the reasons for providing new widgets. </li> <li><a href="gadgets.html">gadgets</a>. Gadgets are in decline. This recommendation proposes gadgets should no longer be produced. </li> </ul> </div> CSS body{color:black;background-color:grey}.expand_description{color:blue} a{background-color:red}.show_items a{color:red} The CSS has been applied to the XHTML. i) Describe the appearance of the text XYZ inc. 2 It will be coloured blue and have a red background ii) Describe the appearance of the text Widgets. 2 It will be coloured red and have a red background

3 QUESTION 3 a. Look at the following website directory structure. The pages in this site are linked together using relative URLs. i. A hyperlink in the page classic.html links to the page sports.html. What will be the value of the href attribute for this hyperlink? 1 sports.html ii. A hyperlink in the page classic.html links to the page luxury_new.html. What will be the value of the href attribute for this hyperlink? 1 luxury/luxury_new.html iii. A hyperlink in the page index.html links to the page luxury_sale.html. What will be the value of the href attribute for this hyperlink? 1../products/luxury/luxury_sale.html iv. A hyperlink in the page sports.html links to the page contact_us.html. What will be the value of the href attribute for this hyperlink? 1../support/contact_us.html v. A hyperlink in the page returns.html links to the page index.html. What will be the value of the href attribute for this hyperlink? 1../index.html

4 b. The following HTML shows the application of the accesskey attribute <a href="careers.html" accesskey="c"> Careers </a> i. What is an access key? 2 Access keys allow us to associate specific keys with navigation options or parts of a webpage. When the user presses the correct combination of keys on their keyboard they will follow the hyperlink or move to the specific part of the page. ii. Why can providing access keys make it easier for some mobile users to navigate websites? 1 Some mobile users navigate by using a keypad iii. Name TWO (2) problems associated with the use of access keys 2 Two of the following: Different web browsers use different modifier keys. o For example Firefox uses CTRL and ALT whereas Internet Explorer uses ALT. There isn t a standard way of letting the user know what the access keys are. o Access keys can come into conflict with browser shortcuts. QUESTION 4 a) HTML documents should always contain the following elements: A Document Type Declaration A <head> element A <body> element Describe the purpose of each of these elements. 3 The document type declaration specifies the version of HTML that the page uses The <head> element provides information about the document The <body> element encloses the page contents b) There are many different versions of (X)HTML. Which version of (X)HTML should we use and why we need it? 2 XHTML 1.0 Strict. The stricter rules help us create more accessible web pages.

5 c) Identify and discuss the parts of XHTML document given below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="en" xml:lang="en" > <head> <title>add a title here</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p>add some content here.</p> </body> </html> Explain the purpose of the: i) Doctype 1 The document type declaration specifies the version of HTML that the page uses. ii) <head> element 1 The <head> element provides information about the document. iii) <title> element 2 The <title> element specifies the page title. This is visible in the browser s title bar and used when bookmarking the page and in the browser history iv) <body> element 1 The <body> element encloses the page contents

6 QUESTION 5 a) XHTML Strict 1.0 text elements can be categorised as block or inline elements. i) Describe the differences between block and inline elements. 2 Block level elements are for marking up large block of text such as paragraphs and headings Inline elements are for marking up smaller bits of text, phrases and words. ii) Explain how to use Block and Inline Elements in CSS properties 3 We can make inline elements behave like block level elements using the display property. This is especially useful when we want to make navigation bars from list elements. The display property can also have a value of none which hides the element from view b) Briefly explain what Hyperlink is. 3 A key feature of the web is hyperlinks. Allows us to surf the web. There is only one element responsible for creating hyperlinks. The anchor element <a>. c) Explain what URL is. 2 Uniform Resource Locator The address of a resource and how it can be retrieved o Specifies the location of document on the web to which we want to create a link [TOTAL: 50 marks]