60 min read

Website Practice Paper: Answer Sheet

Model answers, working and marking points for the Website Practice Paper.

How to Use This Answer Sheet

Try the practice paper first, then compare. For calculations, check each step, not just the final answer. For written answers, the model answers show the points a marker looks for — your wording can be different, and other sensible choices with good reasons also earn marks.

B1 — Header and Navigation

B1HTML

1<header>2  <a href="index.html"><img src="images/logo.png" alt="Sunrise Cycles home" width="160" height="60"></a>3  <nav>4    <ul>5      <li><a href="index.html">Home</a></li>6      <li><a href="about.html">About</a></li>7      <li><a href="products.html">Products</a></li>8      <li><a href="booking.html">Book a Service</a></li>9    </ul>10  </nav>11</header>

What the browser shows

Marking points: header and nav elements; links in a list; the logo has alt text and links home; relative links (index.html, not a full web address).

B2 — The Catalogue Table

B2HTML

1<table>2  <caption>City bikes</caption>3  <thead>4    <tr>5      <th>Item code</th>6      <th>Name</th>7      <th>Description</th>8      <th>Price (LKR)</th>9      <th>Frame sizes</th>10    </tr>11  </thead>12  <tbody>13    <tr>14      <td>CB-101</td>15      <td>Urban 3</td>16      <td>Light city bike with 3 gears and a rear rack</td>17      <td>68,500</td>18      <td>S, M, L</td>19    </tr>20    <tr>21      <td>CB-102</td>22      <td>Comfort 7</td>23      <td>Upright city bike with 7 gears and mudguards</td>24      <td>84,000</td>25      <td>M, L</td>26    </tr>27  </tbody>28</table>

What the browser shows

th is a header cell : it labels a column or row, and browsers show it bold and centred by default. td is a data cell holding an ordinary value. Using th also helps screen readers read the table correctly.

B3 — Checkboxes

B3HTML

1<fieldset>2  <legend>Preferred contact method</legend>3  <input type="checkbox" id="c-email" name="contact" value="email">4  <label for="c-email">Email</label>5  <input type="checkbox" id="c-phone" name="contact" value="phone">6  <label for="c-phone">Phone call</label>7  <input type="checkbox" id="c-whatsapp" name="contact" value="whatsapp">8  <label for="c-whatsapp">WhatsApp</label>9</fieldset>

What the browser shows

Checkboxes let the customer tick more than one option (for example Email and WhatsApp). Radio buttons allow only one choice from a group, so they would not meet the brief. Each label's for matches its input's id, so clicking the word also ticks the box.

B4 — The Dropdown

B4HTML

1<label for="service">Service needed</label>2<select id="service" name="service">3  <option value="tune-up">Basic tune-up</option>4  <option value="brakes">Brake repair</option>5  <option value="puncture">Puncture repair</option>6  <option value="full">Full service</option>7  <option value="other">Other</option>8</select>

What the browser shows

B5 — Reset and Submit

B5HTML

1<form action="#" method="post">2  <label for="name">Name</label>3  <input type="text" id="name" name="name" required>4  <button type="reset">Reset</button>5  <button type="submit">Submit</button>6</form>

What the browser shows

Reset clears every field in the form back to its starting value. Submit sends the form data to the address in action (here "#", because no server is set up). With required, the browser will not submit until the name is filled in.

B6 — One External Style Sheet

B6 — style.cssCSS

1/* css/style.css — linked from every page with2   <link rel="stylesheet" href="css/style.css"> */3 4body {5  background-color: #fff8ee;   /* theme colour on every page */6  color: #222222;7  font-family: Arial, Helvetica, sans-serif;8  margin: 0;9}10 11nav ul {12  list-style: none;13  display: flex;14  gap: 16px;15  padding: 0;16}17 18nav a {19  color: #c2410c;20  font-weight: bold;21  text-decoration: none;22}23 24nav a:hover {25  text-decoration: underline;26}27 28footer {29  background-color: #c2410c;30  color: #ffffff;31  padding: 20px;32  text-align: center;33}

Why one external style sheet? Every page links to the same file, so the theme colour, fonts and footer look identical everywhere. A change is made once and appears on every page, and the HTML files stay shorter and easier to read.

B7 — Same and Different

Consistent parts and changing parts
Consistent parts and changing parts

Part A — Checklist for the Brief

Worked example

Use this checklist to mark your own website

Requirement Check Four pages, correctly named, all linked Every navigation link works on every page Header, logo, navigation and footer consistent Compare screenshots side by side Home: introduction and three featured products Products shown with images, names and prices Footer: address, phone, email, hours, quick links Phone and email are clickable (tel: and mailto:) About: history, vision, mission, values Each has its own h2 heading Products: images and categories Headings for each category; images have alt text Products: table Caption, header row, all five columns Booking form Name, email, phone, message, 3 checkboxes, dropdown with 5 options, Reset, Submit, labels on every field Theme colour One external style sheet with the background colour Validation Every page passes the W3C validator

More lessons in HTML · Next: Course Exam · Previous: Website Practice Paper

60 min read

Website Practice Paper: Answer Sheet

Model answers, working and marking points for the Website Practice Paper.

How to Use This Answer Sheet

Try the practice paper first, then compare. For calculations, check each step, not just the final answer. For written answers, the model answers show the points a marker looks for — your wording can be different, and other sensible choices with good reasons also earn marks.

B1 — Header and Navigation

B1HTML

1<header>2  <a href="index.html"><img src="images/logo.png" alt="Sunrise Cycles home" width="160" height="60"></a>3  <nav>4    <ul>5      <li><a href="index.html">Home</a></li>6      <li><a href="about.html">About</a></li>7      <li><a href="products.html">Products</a></li>8      <li><a href="booking.html">Book a Service</a></li>9    </ul>10  </nav>11</header>

What the browser shows

Marking points: header and nav elements; links in a list; the logo has alt text and links home; relative links (index.html, not a full web address).

B2 — The Catalogue Table

B2HTML

1<table>2  <caption>City bikes</caption>3  <thead>4    <tr>5      <th>Item code</th>6      <th>Name</th>7      <th>Description</th>8      <th>Price (LKR)</th>9      <th>Frame sizes</th>10    </tr>11  </thead>12  <tbody>13    <tr>14      <td>CB-101</td>15      <td>Urban 3</td>16      <td>Light city bike with 3 gears and a rear rack</td>17      <td>68,500</td>18      <td>S, M, L</td>19    </tr>20    <tr>21      <td>CB-102</td>22      <td>Comfort 7</td>23      <td>Upright city bike with 7 gears and mudguards</td>24      <td>84,000</td>25      <td>M, L</td>26    </tr>27  </tbody>28</table>

What the browser shows

th is a header cell : it labels a column or row, and browsers show it bold and centred by default. td is a data cell holding an ordinary value. Using th also helps screen readers read the table correctly.

B3 — Checkboxes

B3HTML

1<fieldset>2  <legend>Preferred contact method</legend>3  <input type="checkbox" id="c-email" name="contact" value="email">4  <label for="c-email">Email</label>5  <input type="checkbox" id="c-phone" name="contact" value="phone">6  <label for="c-phone">Phone call</label>7  <input type="checkbox" id="c-whatsapp" name="contact" value="whatsapp">8  <label for="c-whatsapp">WhatsApp</label>9</fieldset>

What the browser shows

Checkboxes let the customer tick more than one option (for example Email and WhatsApp). Radio buttons allow only one choice from a group, so they would not meet the brief. Each label's for matches its input's id, so clicking the word also ticks the box.

B4 — The Dropdown

B4HTML

1<label for="service">Service needed</label>2<select id="service" name="service">3  <option value="tune-up">Basic tune-up</option>4  <option value="brakes">Brake repair</option>5  <option value="puncture">Puncture repair</option>6  <option value="full">Full service</option>7  <option value="other">Other</option>8</select>

What the browser shows

B5 — Reset and Submit

B5HTML

1<form action="#" method="post">2  <label for="name">Name</label>3  <input type="text" id="name" name="name" required>4  <button type="reset">Reset</button>5  <button type="submit">Submit</button>6</form>

What the browser shows

Reset clears every field in the form back to its starting value. Submit sends the form data to the address in action (here "#", because no server is set up). With required, the browser will not submit until the name is filled in.

B6 — One External Style Sheet

B6 — style.cssCSS

1/* css/style.css — linked from every page with2   <link rel="stylesheet" href="css/style.css"> */3 4body {5  background-color: #fff8ee;   /* theme colour on every page */6  color: #222222;7  font-family: Arial, Helvetica, sans-serif;8  margin: 0;9}10 11nav ul {12  list-style: none;13  display: flex;14  gap: 16px;15  padding: 0;16}17 18nav a {19  color: #c2410c;20  font-weight: bold;21  text-decoration: none;22}23 24nav a:hover {25  text-decoration: underline;26}27 28footer {29  background-color: #c2410c;30  color: #ffffff;31  padding: 20px;32  text-align: center;33}

Why one external style sheet? Every page links to the same file, so the theme colour, fonts and footer look identical everywhere. A change is made once and appears on every page, and the HTML files stay shorter and easier to read.

B7 — Same and Different

Consistent parts and changing parts
Consistent parts and changing parts

Part A — Checklist for the Brief

Worked example

Use this checklist to mark your own website

Requirement Check Four pages, correctly named, all linked Every navigation link works on every page Header, logo, navigation and footer consistent Compare screenshots side by side Home: introduction and three featured products Products shown with images, names and prices Footer: address, phone, email, hours, quick links Phone and email are clickable (tel: and mailto:) About: history, vision, mission, values Each has its own h2 heading Products: images and categories Headings for each category; images have alt text Products: table Caption, header row, all five columns Booking form Name, email, phone, message, 3 checkboxes, dropdown with 5 options, Reset, Submit, labels on every field Theme colour One external style sheet with the background colour Validation Every page passes the W3C validator

More lessons in HTML · Next: Course Exam · Previous: Website Practice Paper

Requirement	Check
Four pages, correctly named, all linked	Every navigation link works on every page
Header, logo, navigation and footer consistent	Compare screenshots side by side
Home: introduction and three featured products	Products shown with images, names and prices
Footer: address, phone, email, hours, quick links	Phone and email are clickable (tel: and mailto:)
About: history, vision, mission, values	Each has its own h2 heading
Products: images and categories	Headings for each category; images have alt text
Products: table	Caption, header row, all five columns
Booking form	Name, email, phone, message, 3 checkboxes, dropdown with 5 options, Reset, Submit, labels on every field
Theme colour	One external style sheet with the background colour
Validation	Every page passes the W3C validator