Читать книгу CoderDojo: My First Website - Clyde Hatter - Страница 17

When the page displays in the browser it looks like this:

Our Songs

This is a list of the songs we can play:

Magical Mystery Bug

Boot It

The Long and Winding Code

Dojo Dancing

Empty Elements

Java Chameleon

Each song in the list is inside an li element. An element is anything between a start tag and an end tag of the same type. So an li element is everything between an <li> start tag and an </li> end tag. Notice also that all of the li elements are inside a single ul element. Can you see the <ul> start tag before the first song?

<ul> <li>Magical Mystery Bug</li>

And the </ul> end tag after the last song?

<li>Java Chameleon</li> </ul>

NINJA TIP

Save the page every so often as you’re working on it. That way you won’t lose your work if your laptop battery runs out suddenly!

THINGS TO DO NEXT

See what happens if you put the li elements inside an ol instead of a ul element.

Figure out:

where the h1 element starts and ends where the body element starts and ends where the html element starts and ends

The img element is an empty element: it doesn’t have separate start and end tags. See if you can spot another empty element.

Make another page called ‘See Us Play’ with a file name of see-us-play.html which gives the date and time of the Nanonauts’ next concert.

The songs are displayed as a bulleted list (the little circles to the left of the song names are called bullets). The code for the list is shown below – we’ll learn more about lists later.

<ul> <li>Magical Mystery Bug</li> <li>Boot It</li> <li>The Long and Winding Code</li> <li>Dojo Dancing</li> <li>Empty Elements</li> <li>Java Chameleon</li> </ul>