Build a one-page wiki about a favourite game

The spec is your checklist

A spec (short for specification) is a list of what the finished work must have.

Read the spec before you start. Check it again at the end.

The whole page

Here is a finished wiki page. Every spec line is in it.

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="utf-8">
  <title>Tetris: a fan wiki</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Tetris</h1>
  <img src="tetris.png" alt="Coloured blocks falling into a stack">
  <h2>What it is</h2>
  <p>A puzzle game made by Alexey Pajitnov in 1984.</p>
  <h2>How to play</h2>
  <ul>
    <li>Turn and move the falling blocks.</li>
    <li>Fill a whole row to clear it.</li>
    <li>Stop the stack reaching the top.</li>
  </ul>
  <h2>Find out more</h2>
  <p><a href="https://en.wikipedia.org/wiki/Tetris">Tetris on Wikipedia</a></p>
</body>
</html>

1. <!DOCTYPE html> tells the browser this is a modern HTML page.
2. lang="en-GB" says the page is in British English. Screen readers use it to choose a voice.
3. The head holds information about the page. You do not see it on the page itself.
4. <meta charset="utf-8"> lets the page show characters like é and ñ correctly.
5. The <title> shows on the browser tab. The <link> joins the page to its stylesheet.
6. The body holds everything you see on the page.

Indenting means adding spaces at the start of a line. It shows which tags sit inside which. The browser ignores it, but people need it.

The stylesheet

This is style.css. It sits in the same folder as index.html.

body {
  font-family: Arial, sans-serif;
  background-color: #FDF6E3;
  color: #222222;
}

h1 {
  color: #1A5276;
  text-align: center;
}

img {
  width: 300px;
}

• The body rule sets the font, the background colour and the text colour for the whole page.
• The h1 rule makes the main heading dark blue and puts it in the middle.
• The img rule makes the image 300 pixels wide.

Validate: check every tag

To validate means to check that the code follows the rules of HTML.

• Every opening tag has a closing tag with a slash: <p> … </p>.
• Tags close in the reverse order they opened: <p><strong>…</strong></p>.
• Attribute values sit inside quotes: alt="A cat".
• File names match exactly, capitals included.