SS 3 First Term

Lesson objectives

By week's end, candidates should be able to:

1. Identify head, body and heading tags.
2. Build a form with labels.
3. Apply CSS to a heading.
4. Link two pages with a relative href.
5. Test and fix one markup error.

Key vocabulary

• HTML: markup language for page structure.
• Tag: a keyword marking an element.
• Attribute: extra information in a tag.
• CSS: rules for page appearance.
• Form: controls that collect input.
• Hyperlink: a reference to another page.

Common misconceptions

• "HTML is a programming language." It marks up content and cannot decide.
• "CSS changes the words." CSS changes presentation only.

Teacher activities

1. Starter: circle three tags.
2. Teach the head and body split.
3. Model a labelled form.
4. Add CSS for the heading.
5. Create and link page two.
6. Break one closing tag.

Student activities

1. Circle three tags.
2. Type the skeleton and title.
3. Build the form with two labels.
4. Add the table and CSS.
5. Create the help page and link.
6. Fix the broken tag.

<!DOCTYPE html>
<html>
<head>
  <title>SS3 Result Checker</title>
  <style> h1 { color: #004400; } </style>
</head>
<body>
  <h1>Result Checker</h1>
  <form action="/check" method="post">
    <label for="sid">Student ID:</label>
    <input id="sid" name="sid" required>
    <button type="submit">Check</button>
  </form>
  <table border="1">
    <tr><th>Subject</th><th>Score</th></tr>
    <tr><td>Mathematics</td><td>78</td></tr>
  </table>
</body>
</html>

Expected result: a green heading, a labelled text box, a button and a two-row table.

Practical / learning evidence

ss3_result_page_lawal.html and ss3_help_lawal.html link in both directions. The first carries a form with matching for and id values, a styled table and a tested link. Success needs valid nesting.

Resources and preparation

A text editor, two browsers and a printed source listing. Offline route: write markup on paper and sketch the layout.

Assessment for learning

Check the doctype, head, label matching, action and href. Award marks for a page without a broken link.

Inclusion and homework

Provide the head-and-body skeleton; extend others with an external stylesheet. Homework: sketch a third page.