<li>Boot It</li> <li>The Long and Winding Code</li> <li>Dojo Dancing</li> <li>Empty Elements</li> <li>Java Chameleon</li> </ul> </body> </html>
When you’ve finished editing the page, save it and then open the file in your web browser.
NINJA TIP
Every time you save a file in the editor, reload the web page in the web browser to see the effect of your most recent changes. Think ‘Save and reload!’
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>
< BRINGING IT ALL TOGETHER >
MAKING THE HOME PAGE
By now you’ve made the About Us page, the Our Songs page and the See Us Play page. But to make them into a website you’ll need to link them all together so that you can go from one to another. We’re going to do that now by making the home page.
Open the about-us.html file. Then go to the File menu and choose the Save As option. Save the file as index.html.
NINJA TIP
Home pages are usually given a file name of index.html
<!DOCTYPE html> <html> <head> <title>Home</title> <link type="text/css" rel="stylesheet" href="css/my-first-stylesheet.css"/> </head> <body> <h1>We are the Nanonauts!</h1> <p>This is our website. Click on a link to visit a page:</p> <ul> <li><a href="about-us.html">About Us</a></li> <li><a href="our-songs.html">Our Songs</a></li> <li><a href="see-us-play.html">See Us Play</a></li> </ul> </body> </html>
The home page has three links on it. They appear inside the li elements of a ul list. The code to the right is the link to the About Us page.
Change index.html to look like this:
<a href="about-us.html">About Us</a>
A link has two main parts:
the bit inside the href attribute is the name of the page you want the link to go to. So href="about-us.html" would take you to the About Us page.
the text between the link’s opening and closing tags is the text that the reader will click on. Often this text appears underlined on the web page. In our example, the link text will be ‘About Us’
If you display the home page in a browser it should look like this:
We are the Nanonauts!
This is our website. Click on a link to visit a page:
About Us
Our Songs
See Us Play
NINJA TIP
Be careful when you’re typing links. You have to get them exactly right! They always have the same pattern:
start and end a tags href attribute filename link text
<a href="songs.html">Our Songs</a>
<a href="songs.html">Our Songs</a>
<a href="songs.html">Our Songs</a>
<a href="songs.html">Our Songs</a>
Notice how the href attribute puts quote marks around the filename and how it comes inside the a start tag.
THINGS TO DO NEXT
Make three other pages from the site map. Do it in the same way you made the Our Songs page – save an existing page with a new name and then change the content of the page. When you’ve made the page, add links to the new pages from the home page.
Some suggestions (your own ideas welcome!):
PAGE NAME
FILE NAME
Choosing Instruments Playing Songs Together Tuning Up Playing a Concert Amplification Finding Somewhere to Practice
choosing-instruments.html playing-songs-together.html tuning-up.html playing-a-concert.html amplification.html somewhere-to-practice.html
MORE ONLINE
Adding links to pages – http://nano.tips/addlinks
< HEADINGS, PARAGRAPHS AND LISTS >
The Nanonauts had lots of ideas for what to put on their ‘Playing a Concert’ page:
“You need a list of the songs you’ll be playing, in case you forget what you’re supposed to be doing next!” said Holly.
“Don’t forget about all the spare bits and pieces you need – like guitar strings or saxophone reeds” said Dervla.
“Set up drums on the stage first,” said Sam. “That’s my tip. If you leave them till last there might not be enough room for them.”
“Make sure you know where you’re going” said Daniel. “We were late for Jo’s birthday gig because we couldn’t find the house.”
In fact, they had so many ideas that when they put them all on the page it started to look a little confusing: