Skip to main content
← HTML and CSS

Lesson 2 of 7

Postcard

The tags you will use every day. They are pictures, links, and the two kinds of list.

What you will learn

  • <img> with src and alt
  • <a href>
  • <ul> and <ol>
  • <li>
  • Attributes
  • Nesting
  • <strong> and <em>
  • <br> and <hr>

Before you start

Your First Page. You know what a tag is and where <body> starts. This lesson fills <body> with everything except a table.

What this page does

  1. It shows a postcard from one place. The postcard has a heading, a picture, a paragraph, two lists, and two links.
  2. Click a link and the browser goes somewhere else.
  3. Make the window narrow. The text flows to fit the new width on its own. You did not write any code to make that happen. Notice it now, before anyone teaches you layout.

Attributes

Some tags carry extra facts inside the opening tag. Those facts are called attributes. You always write an attribute as name="value".

<img src="images/santorini.jpg" alt="White houses above the sea" width="480">

<a href="https://en.wikipedia.org/wiki/Santorini">Santorini on Wikipedia</a>
AttributeGoes onMeans
src<img>Which picture file to show
alt<img>What the picture shows, in words
width<img>How wide to draw it, in pixels
href<a>Where the link goes
lang<html>What language the page is written in

<img> is the first tag you have met with no closing half. It wraps no text, so there is nothing to close. <br> and <hr> work the same way.

The two kinds of list

<ul>
    <li>The red beach at Akrotiri</li>
    <li>The old town of Oia at sunset</li>
</ul>

<ol>
    <li>Take the train to the port.</li>
    <li>Buy a ferry ticket.</li>
</ol>
  • <ul> is an unordered list. You get bullets. Use it when the order does not matter.
  • <ol> is an ordered list. You get numbers. The browser counts for you. Use it when the order is the information, like a set of steps.
  • Both hold <li> items and nothing else. One <li> per item.

Swap two <li> lines in the ordered list and reload. The numbers follow the lines. You never type the numbers yourself. That is why an ordered list is better than typing 1. at the start of a paragraph.

Nesting

A tag inside another tag is called nesting. The inside tag must close before the outside one does.

Right
<p>The <strong>big</strong> day</p>
Wrong. The paragraph closes while strong is still open.
<p>The <strong>big</p></strong>

Indenting lets you see the nesting quickly. Every time you go inside another tag, move four spaces to the right. Indenting changes nothing about the page. It makes the code much easier to read.

Build it step by step

Start from an empty file. Type ! and press Tab. Then add one thing at a time. Reload the page after each one.

  1. Make the page

    Make a new folder and a new index.html. Type ! and press Tab. Put your place name in the <title> and in an <h1> inside <body>.

  2. Add the picture

    Make a folder called images next to your HTML file. Put a picture in it. Then add an <img> with src, alt, and width. Reload the page. If you see your alt text instead of the picture, the src does not match the file name.

    <img src="images/santorini.jpg" alt="White houses with blue roofs on a cliff above the sea" width="480">

  3. Write the paragraph

    Add a <p> under the picture. Write two sentences about the place in it. Put <strong> around the most surprising fact.

  4. Add the bulleted list

    Add an <h2> called Three things to see. Under it, add a <ul> with three <li> items.

  5. Add the numbered list

    Add another <h2>. Under it, add an <ol> with the steps to get there. Reload the page and check that the numbers appeared on their own.

  6. Add the links

    Add an <a> that links to a page about your place. Then add a <hr> and a last line in <em>.

    <a href="https://en.wikipedia.org/wiki/Santorini">Santorini on Wikipedia</a>

Try these changes

Make these changes in the files beside this guide. Each one only uses what this lesson has already covered. Tick each one when it works.

Check yourself

Three quick questions on this lesson. Get them all right to finish the lesson and earn a pack.

Loading your answers

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Break the src on purpose. Change it to santorni.jpg. Let them watch the alt text appear. That one demo explains alt better than any sentence about screen readers. Say the sentence afterwards and it will make sense.
  • Ask which list they would use for a recipe's ingredients. Then ask which list they would use for its method. The answer is the whole lesson. It takes ten seconds.
  • Someone will use <br> to make a gap between paragraphs. Show them that <p> already leaves the gap. <br> belongs inside a paragraph, for an address or a line of a poem.
  • Have them put a picture of their own in the images folder. Wrong file names are the most common failure. It is better for them to fail here, with you, than at home on their own.
  • Resist styling. The page is meant to be ugly. Lesson 3 works because the stylesheet lands on a page they already understand.