HTML Example Quiz

Introduction

There are eight questions in this quiz, which you have 20 minutes to complete. It is worth 5% of your final mark. There are 24 total points achievable. Code written must be XHTML 1.0 Strict in order to gain marks. Code that would not work in the browser will not gain any marks, but partial marks are possible for some questions, and are indicated where applicable.

For full recreation of quiz conditions, it is suggested that you print out this page and write your answers on the page. The quiz key will print out separately.

Question 1

Identify the following elements as block or inline by circling the appropriate term (1 mark each, for a total of 3 marks)

<dt>BlockInline

<h4>BlockInline

<abbr>BlockInline

Question 2

Describe two purposes of the DOCTYPE declaration on a web page. (2 marks for each correct purpose, for a total of 4 marks)

Question 3

You have two pages, pageone.html and pagetwo.html. You wish to have a link on pageone.html that goes to the other page. Write the code for the link below, with appropriate content. (4 marks)

Question 4

What is wrong with the following code? (You can assume appropriate content exists in the body, and that you are developing the page for Firefox.) (2 marks)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="iso-8859-1">
		<title>XYZ Products – Our Fine Line of Widgets</title>
	</head>
	<body>
	</body>
</html>

Question 5

You have an image, bridge.jpg. At the same level as the image (i.e. alongside it) you have a web page. You wish to have this image appear inside a paragraph on a web page that begins with the words “All good things.” (without the quotes). Write the code to achieve this below, including markup for the paragraph and the appropriate content. (5 marks)

Question 6

You wish to quote a significant portion of a speech on a web page. What is the appropriate tag to use for this purpose? (2 marks)

Question 7

What do the following acronyms stand for? (1 mark each, for a total of 2 marks)

PNG

CSS

Question 8

You want to put the following lines of text, with their respective levels of importance and approximate size, on a web page:

Minutes of the Liverpudian Paleontology Society

19 December, 2007

Create the code for doing so below (2 marks)

Answers:

Question 1

Both <dt> and <h4> elements are block; <abbr> is inline. more info

Question 2

Possible answers include: the DOCTYPE identifies the version of HTML used on the page, as well as the primary language used in the body copy; it allows a validator to understand what standard the page should be checked against; and it helps the browser understand how the page should be laid out. more info

Question 3

<a href="pagetwo.html">Link Content</a>. There must be some content between the opening and closing <a> tag (otherwise there will be nothing for the user to click on) and the href value must be correct. If there are no quotes around the value, subtract half marks (the link will work, but will not validate). more info

Question 4

The encoding in the xml prolog and meta tag does not match. more info

Question 5

<p><img src="bridge.jpg" alt="Bridge" />All good things…</p>. Starting from a base score of zero: add 1 mark for correct use of the <p> tag and appropriate content, 2 marks for correct use of the <img> tag (including the internal closing slash); 1 mark for the correct filename, one mark for appropriate use of alt. more info

Question 6

The <blockquote> tag.

Question 7

PNG: Portable Network Graphic

CSS: Cascading Style Sheets

Question 8:

So long as the markup is used correctly, all that matters is that the elements used are with respect to their relative importance: so if an <h1> is used for the first line, a lesser heading or paragraph should be used for the next:

<h1>Minutes of the Liverpudian Paleontology Society</h1>
<p>19 December, 2007</p>

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.