BSc (Hons) Software Engineering

Cohort: BSE/22A/FT

Examinations for 2022 – 2023 / Semester 1

& 2022 / Semester 2

Resit Examinations for BSE/18A/FT,

BSE/21B/FT (1), BSE/21B/FT (2) &
BSE/21B/FT (3)

MODULE: WEBSITE DESIGN & DEVELOPMENT

MODULE CODE : WAT 1146C

Duration : 2 Hours 30 minutes

Instructions to Candidates:

1. Answer all questions.

2. Questions may be answered in any order but your answers must show the
question number clearly.
3. Always start a new question on a fresh page.
4. All questions carry equal marks.
5. Total marks 100.

This question paper contains 4 questions and 8 pages.

Page 1 of 8
Website Design & Development (WAT1146C) SITE/2022/Semester 2
 ANSWER ALL QUESTIONS

QUESTION 1: (25 MARKS)

(a) Specify THREE elements that are used in the HEAD section of an HTML
document. Briefly describe the purpose of each.
(3 marks)

(b) What are HTML Attributes and how do you use them? Provide appropriate
HTML codes to support your answer.
(3 marks)

(c) What do you understand by the term responsive design?

(3 marks)

(d) Name TWO image formats used on the web and explain when it is most
appropriate to use each format.
(3 marks)

(e) What is the difference between a block-level element and an inline element?
Provide TWO such elements for each type.
(3 marks)

(f) What is a hyperlink in HTML? Write appropriate HTML codes to create one
and list all possible states of a hyperlink.
(5 marks)

(g) Explain what do you understand by the term semantic HTML? List FIVE
new semantic elements used in HTML5 to define different parts of a web
page.
(5 marks)

Page 2 of 8
Website Design & Development (WAT1146C) SITE/2022/Semester 2
QUESTION 2: (25 MARKS)

(a) Create the following bulleted list in HTML

(5 marks)

(b) Write HTML/CSS codes for a Web Page with the following specifications:

(i) Draw the German flag using 3 strips black, red and yellow. Each strip
is 100 pixels long and 30 pixels.

(ii) Write the respective colour name in each strip horizontally aligned,
with the typeface in arial, colour white and displayed in italic

(6 marks)

Page 3 of 8
Website Design & Development (WAT1146C) SITE/2022/Semester 2
(c) Write HTML/CSS codes to create the following table:

(6 marks)

(d) Write appropriate HTML5 codes to design the following form:

(8 marks)

Page 4 of 8
Website Design & Development (WAT1146C) SITE/2022/Semester 2
QUESTION 3: (25 MARKS)

Use above CSS fragment to answer below question parts (a), (b) and (c)

(a) In what order are the rules defined by the tag selector, id selector and class
selector applied to an element that uses all three of these CSS selectors?

E.g. < p id=”content” class=”plain”> text </p>

(3 marks)

(b) In what color will each of the heading element contents be displayed in the
following code:

(5 marks)

Page 5 of 8
Website Design & Development (WAT1146C) SITE/2022/Semester 2
(c) Describe how the text in the paragraph element will appear when rendered
and list the final value for each style property that is applied to the p element
when it is rendered.

(5 marks)

(d) The box model is used by Cascading Style Sheets to define the regions
occupied by some HTML elements such as the div element. The box model
uses padding, border and margin CSS properties. Use a clearly labelled
diagram to explain what each of the padding, border and margin properties
define with respect to the content being displayed for the element.
(4 marks)
(e) Show how the following CSS Selectors work using an appropriate example:
(i) Grouped
(ii) Descendant
(iii) Class
(iv) ID
(4 marks)
(f) Briefly outline the cascading order in which style rules are assigned when
conflicting style rules from different style sheets are applied to an element
in an HTML document. Consider a mixture of inline, embedded and multiple
external style sheets being applied in your answer.
(4 marks)

Page 6 of 8
Website Design & Development (WAT1146C) SITE/2022/Semester 2
QUESTION 4: (25 MARKS)

(a) Explain the purpose of the $(document).ready() function.

(3 marks)
(b) What is chaining in jQuery? Provide sample codes to support your answer.
(3 marks)
(c) Write a JavaScript program to calculate and display the area and volume of
a cylinder, given the radius and height from the form shown below. You can
display the output in an alert box or on the page directly.

(8 marks)
(d) Write a JavaScript program that allows a user to enter a sentence in a
textarea input control to test the following conditions:

(i) Provide a message if the textarea is empty.

(ii) The sentence should be in lower case.

(iii) Provide a message if the sentence does not contain the letter 's'.

(iv) Provide a message if the 6th character is not letter 'w'.

(v) Provide a message if the sentence contains less than 15 characters.

(vi) Provide a congratulatory message if all the above conditions are

satisfied.

Page 7 of 8
Website Design & Development (WAT1146C) SITE/2022/Semester 2
 (vii) The program should respond when the control is taken away from
the textarea element.

(7 marks)
(e) Write appropriate jQuery codes for the following:

(i) select all HTML <div> elements on a page.

(ii) select the HTML element with ID 'myElement'.

(iii) select all HTML elements with class 'myClass'.

(iv) select all <p> elements with class 'myClass'.

(4 marks)

***END OF QUESTION PAPER***

Page 8 of 8
Website Design & Development (WAT1146C) SITE/2022/Semester 2