HTML Structure and CSS Selectors

The html element contains the document. head supplies information such as title and a link to an external stylesheet, while body contains displayed content. Headings h1, h2 and h3 express a hierarchy; p marks a paragraph; div groups content. Lists use ol or ul with li items. An element’s purpose is distinct from its default visual size.

An anchor uses href for its destination. An image uses src for its resource and alt for an appropriate text alternative; height and width can state its intended dimensions. A page title names the browser document, while an h1 is part of the body. Relative paths such as style.css are resolved against the document’s base location, so moving files can break resources if paths are not updated.

A form groups controls for submission. A text input’s name identifies the submitted field; a submit input triggers the form’s defined action. The example uses a simple GET request for a non-sensitive enquiry. Sensitive operations need appropriate server behaviour and transport protection; a form element alone supplies neither authorisation nor data correctness.

CSS rules contain a selector and property/value declarations. h1 matches headings of that element type, .note matches elements with the note class, and #status matches the element with that ID. Classes can be reused; an ID should identify one element in a document. The inline style attribute affects its element. External stylesheets separate presentation rules from the page content and can be shared across pages.

In the example, the h1 rule sets a named colour, .note sets a background, border and font size, and #status sets a different text colour. CSS properties use the spelling and units defined by CSS; font-size:18px gives a concrete example. A selector without its leading dot would refer to an element name rather than the note class.

Check that the page remains understandable without images, that heading order reflects the content and that text is readable against its background. A visual appearance does not prove that a form has working server processing. Use the developer tools to inspect loaded resources and applied rules, then connect a predicted change to an actual element instead of altering unrelated selectors.

<!doctype html>
<html lang="en">
<head>
  <title>Robotics club</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Robotics club</h1>
  <div class="note">
    <h2>Join a session</h2>
    <p>Build and test a small robot.</p>
    <img src="robot.png" alt="A two-wheeled classroom robot" width="240" height="160">
    <h3>What to bring</h3>
    <ul><li>A notebook</li><li>Your ideas</li></ul>
    <ol><li>Plan</li><li>Build</li><li>Test</li></ol>
    <a href="sessions.html">Session details</a>
  </div>
  <form action="/enquire" method="get">
    <p>Nickname: <input type="text" name="nickname" aria-label="Nickname"></p>
    <input type="submit" value="Enquire">
  </form>
  <p id="status" style="font-family: sans-serif;">Enquiries welcome</p>
</body>
</html>

h1 { color: navy; }
.note {
  background-color: #eef5ff;
  border-color: navy;
  border-style: solid;
  border-width: 1px;
  font-size: 18px;
}
#status { color: #205020; }
img { width: 240px; height: 160px; }

Attempt the task before opening its worked response. Record each change of state, explain the rule used, and check the result against the original requirements. Code examples labelled Python 3 use that language’s conventions; pseudocode states its own assumptions.