Module 3

Website design & development

Quick-reference revision notes for parents.

3.1 Introduction to web development & HTML

HTML (HyperText Markup Language) describes the structure of a web page using tags.

<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome to my site.</p>
  </body>
</html>

<head> = info about the page (title, links to CSS).
<body> = visible content.
Most tags come in pairs: <p>…</p>.

3.2 HTML and W3C standards

The W3C (World Wide Web Consortium) sets the standards browsers follow. Following them means your page works the same in Chrome, Safari, Firefox, etc.

Common tags

Tag	Meaning
`<h1>` – `<h6>`	Headings (h1 most important)
`<p>`	Paragraph
`<a>`	Link
`<img>`	Image (self-closing)
`<ul>` / `<ol>` / `<li>`	Unordered / ordered list, list item
`<div>` / `<span>`	Generic block / inline containers

3.3 Styling basics with CSS

CSS (Cascading Style Sheets) controls how the page looks.

h1 {
  color: navy;
  text-align: center;
}

p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

Selector (h1) — what to style.
Property: value (color: navy;) — how to style it.

The box model

Every element is a rectangular box made of:

Content — the text or image itself
Padding — space inside the border
Border — line around the element
Margin — space outside the border, between this element and others

3.4 Navigation through hyperlinks

<a href="about.html">About us</a>
<a href="https://example.com" target="_blank">Open in new tab</a>

href = where the link goes.
target="_blank" = open in a new tab.

3.5 Images and media

<img src="cat.jpg" alt="A cat sitting on a sofa" width="400">
<video src="clip.mp4" controls></video>

alt text describes the image — used by screen readers and shown if the image fails.
JPG: photos. PNG: graphics with transparency. SVG: vector — scales without losing quality. GIF: simple animations.

3.6 Styling for readability and engagement

Typography: pick easy-to-read fonts; use big enough text (16px+ for body).
Contrast: dark text on light background (or vice versa) — never mid-grey on mid-grey.
Hierarchy: headings clearly bigger/bolder than body.
Whitespace: line-height ≥ 1.4, generous margins.
Images support the text — don't drown it.
Trustworthy: clear authorship, accurate, consistent design.

Quick reference

HTML = structure; CSS = appearance
Page skeleton: html → head + body
Box model: content → padding → border → margin
Link: <a href="...">text</a>
Image: <img src="..." alt="..."> — always include alt text
Good design: clear hierarchy, contrast, whitespace, consistency

← Back All modules Next → Practice questions