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:
Playing a Concert
Playing a concert can be great fun! Or it can be totally scary! Sometimes both at the same time. So we’ve put together a list of our top tips for great concerts.
Copy out a set-list. A set-list is a list of all your songs in the order you’ll play them. Make copies for everyone. Print it big so that you can still read it if it’s down by your feet on the floor or if the lighting isn’t very good.
Remember your spares. Some instruments have parts that need to be replaced if they wear out or break. For example: guitar strings, saxophone or clarinet reeds and drumsticks. Make a list of the spares you might need and make sure you know where they are in an emergency.
Plan where you’ll be on the stage. Before you start to set up your instruments, take a few minutes to decide where you’re all going to be. Will the drums be centre stage? Or off to one side? Is there a power-socket for the amplifier if your guitar player stands on the right?
It’s much better to think about all this before you start setting up your instruments. It’s really annoying if you have to start unplugging things and swapping places once you’ve begun to set things up! Know where you’re going, know when you’re on. If you’re playing a concert somewhere you’ve never been before make sure you know where it is. Print out a map or set the sat nav before you set out. There’s nothing worse than being lost in an unfamiliar place half-an-hour before you’re due to go on-stage. And when you do arrive, the first thing you should do is find out what time you’re on. On the night times often change. Ask whoever is running the event when you’ll be on. Don’t get caught out!
How could they fix it? We’ve already seen quite a few different HTML elements. For example:
h1 is a heading
ul is a list with bullet points
ol is a numbered list
p is a paragraph
By using these elements and mixing in a few new ones the Nanonauts made their page much easier to read. Like this, in fact:
So how did they do it?
1) They used headings to divide up the page
2) They used bulleted lists to make it easier to read.
3) They chopped up large blocks of text into smaller paragraphs.
4) They emphasised some important words using the strong element.
The way in which you put together your HTML elements is known as markup. Markup is a word programmers use a lot. Good markup is all about using the different elements to make your page easy to read.
Playing
