Website authoring under time

`<h1>` is the main heading. `<h2>` is a subheading. `<h3>` is a heading inside an h2 section.

`<p>` is a paragraph. The browser adds space before and after it.

Use headings in order. Choose the tag for what the text is, not for how big it looks. CSS controls the size.

<h1>Café Retiro</h1>
<h2>Breakfast</h2>
<h3>Served until 12:00</h3>
<p>Fresh coffee, toast with tomato and olive oil, and homemade cakes.</p>

An unordered list `<ul>` shows bullet points. Use it when order does not matter.

An ordered list `<ol>` shows numbers. Use it when order matters, such as steps or a top 3.

Each item goes in `<li>` (list item), inside the ul or ol.

<ul>
    <li>Café con leche</li>
    <li>Tostada con tomate</li>
    <li>Tarta de Santiago</li>
</ul>

<ol>
    <li>Choose a cake.</li>
    <li>Pay at the counter.</li>
    <li>Collect your order.</li>
</ol>

A `<div>` is a box that groups other elements. On its own it changes nothing you can see.

A class is a label you give to elements with the class attribute. CSS can then style everything with that label.

Many elements can share one class. One element can have two classes, separated by a space.

<div class="offer">
    <h2>Today's offer</h2>
    <p>Coffee and a croissant for €3.20.</p>
    <p class="note">Until 11:00 only.</p>
</div>

/* every element with class="offer" */
.offer {
    background-color: #FFF3E0;
    border: 2px dashed #8B4513;
    padding: 10px;
}

.note {
    font-style: italic;
}

`<table>` starts a table. Each row is a `<tr>` (table row).

Inside a row, each cell is a `<td>` (table data) or a `<th>` (table header). Header cells are bold and centred by default.

Build a table row by row, from top to bottom. In each row, write the cells from left to right.

<table>
    <tr>
        <th>Drink</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Café con leche</td>
        <td>€1.80</td>
    </tr>
    <tr>
        <td>Té verde</td>
        <td>€1.60</td>
    </tr>
</table>

The lesson page has the rest of the explanation, step by step:

• Merging cells: colspan and rowspan
• Table and cell sizes
• Images
• Sound and video
• Bookmarks and links to them
• Links to pages, websites and email
• Target windows: _blank, _self and named windows
• Relative and absolute paths
• Why absolute paths to local files break
• How a CSS rule is written
• Inline styles and external stylesheets
• Classes in CSS
• Backgrounds: colour and image
• Fonts: family, size, colour, alignment, bold, italic

Open the lesson page