Read the information below about an online campaign for a town's night bus service. The campaign team needs a web page that persuades residents to respond t...
Question 1 Report
Read the information below about an online campaign for a town's night bus service. The campaign team needs a web page that persuades residents to respond to a consultation. It will include a heading, short text, a route-map image, a response form and links to the transport authority. The team wants the page to load quickly because many users will access it using mobile data. A volunteer suggests placing all styling inside every HTML element and using a large animated image as the page background. Another volunteer suggests one external stylesheet, clear headings, optimised images and a simple form. The campaign coordinator must choose the more suitable approach and create the page structure.
(a) Explain four reasons why an external CSS file is more suitable than repeated inline styling for this campaign site. [4]
(b) Create the HTML structure for the main content of the page. Use a main heading, two second-level headings called Why the night bus matters and Send your response, and a paragraph under each heading. [4]
(c) Create HTML for a response form containing a labelled text area for a comment and a submit button labelled Send response. The comment must be required. [4]
(d) Explain five decisions the team should make about the route-map image, animation and page content to improve loading time, accessibility and clarity. [5]
Answer Details
(a) An external CSS file keeps presentation separate from the HTML content. It can be reused by every page, giving the campaign a consistent appearance. A change, such as the heading colour or font, is made once in the stylesheet rather than in every element. It also avoids repeated styling code, keeps the HTML clearer, and may load faster on later visits because the browser can cache the stylesheet. Any four of these explained points gain credit. [4]
(b) The structure needs one main-content area, with the page title as an h1 and each major section as an h2. A valid model is:
<main>
<h1>Night bus consultation</h1>
<h2>Why the night bus matters</h2>
<p>The night bus helps residents travel safely after evening services end.</p>
<h2>Send your response</h2>
<p>Tell the transport authority what you think about the service.</p>
</main>This gains credit for the h1, both exact required h2 headings with paragraphs, and sensible nesting in main. [4]
(c) A visible label must be programmatically connected to the text area: its for value matches the text area’s id. The required attribute prevents an empty response being submitted.
<form>
<label for="comment">Your comment</label>
<textarea id="comment" name="comment" required></textarea>
<button type="submit">Send response</button>
</form>This includes the linked label, text area, required validation and correctly labelled submit button. [4]
(d) The route map should be compressed or otherwise optimised and displayed at appropriate dimensions, reducing mobile-data download time. It needs descriptive alternative text, and route details should also be available as text because a map must not be the only source of information. The team should avoid a large unnecessary animated background, particularly flashing or distracting movement. Short, clear text organised with headings helps users find the consultation information quickly. Testing on a mobile device or mobile-data connection checks that these decisions work for the intended users. Any five valid decisions gain credit. [5]
Exam focus: distinguish page content and structure in HTML from visual presentation in CSS; use semantic headings and accessible form labels.
Download The App On Google Playstore
Everything you need to excel in your exams
