Lesson 1
Bullets and numbers
ul, ol and li: shopping lists, steps and top tens.
Two kinds of list
<ul>is an unordered list: bullet points, where the order doesn’t matter (a shopping list)
<ol>is an ordered list: numbered, where it does (the steps of a recipe)
Either way, each item goes in an <li> (list item). The browser adds the bullets or numbers for you.
<ul>
<li>Rice</li>
<li>Tomatoes</li>
<li>Onions</li>
</ul>
<ol>
<li>Wash the rice</li>
<li>Cook it</li>
</ol>Lists inside lists
A list item can hold another whole list. Put the inner <ul> inside the <li>, before its </li>:
<ul>
<li>Fruit
<ul>
<li>Mango</li>
<li>Pawpaw</li>
</ul>
</li>
<li>Bread</li>
</ul>Lesson 2
Tables
Rows, columns, headings and cells.
Data in rows and columns
Tables are for data that has rows and columns: timetables, scores, prices.
<table>wraps it all
<tr>is a table row
<th>is a heading cell (bold and centred)
<td>is a normal table data cell
Each row needs the same number of cells, so the columns line up.
<table>
<tr><th>Player</th><th>Score</th></tr>
<tr><td>Ama</td><td>12</td></tr>
<tr><td>Kofi</td><td>9</td></tr>
</table>Tip: Don’t use tables to arrange the layout of a whole page. That’s CSS’s job, and you’ll learn it in CSS School.
Lesson 3
Comments and tidy code
Notes for humans, and spotting mistakes.
Comments
A comment is a note for people reading your code. The browser skips it completely:
Use comments to explain a tricky part, or to switch something off for a moment without deleting it.
<!-- The menu starts here -->
<ul>
<li>Home</li>
<!-- <li>Shop</li> is hidden until it opens -->
<li>Contact</li>
</ul>Browsers are forgiving. Don’t rely on it.
If you forget a closing tag, the browser guesses what you meant. Sometimes it guesses right. Sometimes your whole page turns bold.
Good habits: close every tag you open, indent what’s inside, use lowercase tag names, and put attribute values in quotes.
Recap
What Level 3 covers, in a few lines.
<ul>is a bulleted list and<ol>a numbered list. Each item is an<li>.- Lists can go inside list items, to make a list of lists.
- Tables are for data in rows and columns:
<table>, a<tr>for each row,<th>for heading cells and<td>for the rest. - Comments,
<!-- like this -->, are notes for people reading your code. The browser doesn’t show them.
Now try it in HTML School
Write real code and watch your page change as you type, with a check after every step and a test at the end of each level. Free.