Structure and style a page: recap

The video and the picture show the same steps:

1. A tag is a label. <h1> labels the main heading.
2. <p> opens a paragraph and </p> closes it.
3. Two lines of text in the code show as one line on the page: the browser ignores line breaks in the code.
4. A new paragraph needs its own <p>.

In the picture, Boxes is on: each box is a tag, and the paragraphs are separate boxes.

The video and the picture show the same steps:

1. <strong> marks important words and the browser makes them bold.
2. <em> goes inside it and marks a stressed word, slanted.
3. The tag opened last closes first: </em>, then </strong>, then </p>.
4. If a tag is missing or crosses, the browser shows no error. It makes its best guess.

In the picture, Boxes is on: <em> is a box inside the <strong> box, inside the <p> box. A comment, <!-- a note -->, is ignored by the browser.

The video and the picture show the same steps:

1. CSS rules go in a <style> block, at the top of the code for now.
2. A rule starts with a selector: p picks every paragraph, and nothing else.
3. Inside the braces: a property, a colon, a value, a semicolon, as in color: teal;.
4. Both paragraphs turn teal. The heading is not a p, so it stays as it was.
5. A second rule can style the heading. The HTML never changed.

Rules change how parts look. The tags still say what each part is.

The video and the picture show the same steps:

1. <ul> opens a box for a list.
2. Each <li> is one item, inside the list.
3. </ul> closes the list.
4. <ol> makes a numbered list. The browser does the counting, so you never type the numbers.
5. An item is a box too, so a whole list can go inside an <li>.

Every <li> must be inside a <ul> or an <ol>. In the picture, Boxes is on: you can see each item inside its list.

The video and the picture show the same steps:

1. <a> makes a link, and the words between <a> and </a> are what people click.
2. href is an attribute. It goes inside the opening tag as href="address".
3. Only the words show on the page. The address stays hidden inside the tag.

In the picture, Boxes is on: the link is one box, with its words inside.

The video and the picture show the same steps:

1. <img> shows a picture and has no closing tag.
2. src names the picture file, and the name must match exactly.
3. alt says what the picture shows. With a wrong src, people see the alt words instead.

The video and the picture show the same steps:

1. class="note" marks an element with a name you choose.
2. .note { } in the CSS styles only the elements with that class.
3. Any number of elements can share one class, and the rule is written once.

In the picture, the two marked paragraphs are crimson and the others are not.

The video and the picture show the same steps:

1. <table> opens the whole table.
2. <tr> is one row. In the first row, each <th> is a heading cell.
3. The next row holds ordinary cells: <td>.
4. </table> closes the table.
5. Columns appear by themselves, so every row needs the same number of cells.

In the picture, Boxes is on: the table holds two rows, and each row holds cells.

The video and the picture show the same steps (Boxes is on, so each named part shows as a box):

1. <header> is the top of the page: the title, and often the menu (<nav>).
2. <main> holds the page's main content. <section> is one part of it, with its own heading.
3. <footer> is the bottom: contact details and small print.
4. They look like plain text. Their names tell browsers and screen readers what each part is.

The video and the picture show the same steps:

1. An id gives one element a name. Here the heading is named results.
2. A link whose href starts with # jumps to the element with that name.
3. The # is the difference. Without it, the browser looks for another page.

Each name belongs to one element, so no two elements share an id.

The video and the picture show the same steps:

1. A <form> holds the boxes people type in.
2. A <p> puts a label and its box on their own line.
3. The label's for matches the box's id, so clicking the label finds the box.
4. A <button> is for sending the answers...
5. ...but nothing is connected to it. Code behind a form does the work.

A <select> with <option> items makes a drop-down list.

The picture shows the finished page. Build it in this order, one milestone at a time:

1. Header and menu: a <header> with a <nav> list of links to #ids, coloured by tag rules.
2. Sections: a list, a picture and a results table, with the winners marked by a class.
3. Sign-up and footer: a <form> with labels linked to their boxes, and a <footer>.

Check the page after every change.