120 min read

Website Practice Paper

An assignment-style website brief for a bicycle shop, plus short HTML and CSS questions — with a separate answer sheet containing code you can preview.

About This Paper

This paper has a practical brief (Part A), like a web development assignment, and short questions (Part B) that practise each part of the brief. Do Part B first if you are unsure — each answer is a building block for Part A. Work on paper (or on your computer for practical tasks), just as you would in the real assignment. Show all your working. When you have finished, mark your work with the answer sheet .

Part A — The Brief

From the story

Sunrise Cycles

Sunrise Cycles is a made-up bicycle shop in Kandy. It sells bicycles and accessories and has a small repair workshop. The owner wants a website with at least four pages : 1 Home — a header with the shop's logo and a navigation bar, a short introduction to the shop, a section showing three featured products, and a footer with the address, phone number, email, opening hours and quick links. 2 About — the shop's history, vision, mission and values . 3 Products — photos of bicycles and accessories, a catalogue organised into categories (city bikes, mountain bikes, children's bikes, accessories), and an HTML table with columns for item code, name, description, price and available frame sizes. 4 Book a Service — a form with fields for name, email, phone number and a message; checkboxes for the preferred contact method (Email, Phone call, WhatsApp — more than one may be chosen); a dropdown for the service needed (Basic tune-up, Brake repair, Puncture repair, Full service, Other); and Reset and Submit buttons. The header, logo, navigation bar and footer must look the same on every page, and all pages must use one consistent theme colour set with CSS.

Build the website in a folder called sunrise-cycles, with the pages index.html, about.html, products.html and booking.html, a css folder containing style.css, and an images folder. Use only images you are allowed to use, and credit them.

Part B — Short Questions

B1. Write the HTML for a header that contains a logo image (linking to index.html) and a navigation bar with links to the four pages. Use the correct semantic elements. B2. Write the HTML for a catalogue table with a caption, a header row and two products. Columns: Item code, Name, Description, Price (LKR), Frame sizes. Explain the difference between th and td . B3. Write the HTML for the "preferred contact method" question with three checkboxes and labels. Why are checkboxes used here, and not radio buttons? B4. Write the HTML for the "Service needed" dropdown with the five options from the brief. B5. Write the HTML for the Reset and Submit buttons. What does each one do? B6. Write CSS in an external style sheet that (a) gives every page the same background colour, (b) styles the navigation links, and (c) styles the footer. Why is one external style sheet better than styling each page separately? B7. List three things that must be the same on every page, and two that change from page to page.

More lessons in HTML · Next: Website Practice Paper: Answer Sheet · Previous: Validating and Testing Your HTML

About This Paper

This paper has a practical brief (Part A), like a web development assignment, and short questions (Part B) that practise each part of the brief. Do Part B first if you are unsure — each answer is a building block for Part A. Work on paper (or on your computer for practical tasks), just as you would in the real assignment. Show all your working. When you have finished, mark your work with the answer sheet .

Part A — The Brief

From the story

Sunrise Cycles

Sunrise Cycles is a made-up bicycle shop in Kandy. It sells bicycles and accessories and has a small repair workshop. The owner wants a website with at least four pages : 1 Home — a header with the shop's logo and a navigation bar, a short introduction to the shop, a section showing three featured products, and a footer with the address, phone number, email, opening hours and quick links. 2 About — the shop's history, vision, mission and values . 3 Products — photos of bicycles and accessories, a catalogue organised into categories (city bikes, mountain bikes, children's bikes, accessories), and an HTML table with columns for item code, name, description, price and available frame sizes. 4 Book a Service — a form with fields for name, email, phone number and a message; checkboxes for the preferred contact method (Email, Phone call, WhatsApp — more than one may be chosen); a dropdown for the service needed (Basic tune-up, Brake repair, Puncture repair, Full service, Other); and Reset and Submit buttons. The header, logo, navigation bar and footer must look the same on every page, and all pages must use one consistent theme colour set with CSS.

Build the website in a folder called sunrise-cycles, with the pages index.html, about.html, products.html and booking.html, a css folder containing style.css, and an images folder. Use only images you are allowed to use, and credit them.

Part B — Short Questions

B1. Write the HTML for a header that contains a logo image (linking to index.html) and a navigation bar with links to the four pages. Use the correct semantic elements. B2. Write the HTML for a catalogue table with a caption, a header row and two products. Columns: Item code, Name, Description, Price (LKR), Frame sizes. Explain the difference between th and td . B3. Write the HTML for the "preferred contact method" question with three checkboxes and labels. Why are checkboxes used here, and not radio buttons? B4. Write the HTML for the "Service needed" dropdown with the five options from the brief. B5. Write the HTML for the Reset and Submit buttons. What does each one do? B6. Write CSS in an external style sheet that (a) gives every page the same background colour, (b) styles the navigation links, and (c) styles the footer. Why is one external style sheet better than styling each page separately? B7. List three things that must be the same on every page, and two that change from page to page.