guitar"/></p>
TRY IT!
THINGS TO DO NEXT
Try adding some of your own photographs to the page. Add a few selfies!
WORDS TO REMEMBER
Attribute – tags sometimes contain additional information held inside attributes. In the example of the img tag below we can see that there are two attributes: src and alt.
<img src="images/DSC03730.jpg" alt="Holly playing the guitar"/>
Attributes always consist of an attribute name (such as src or alt) followed by an = sign and then by the attribute value contained inside straight quote marks, for example "images/DSC03730.jpg".
The src (source) attribute tells the browser where to look for the image. The alt (alternative) attribute holds text that will appear if the image cannot be displayed, or if it will be read aloud by screen-reading software.
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.
Empty element – Some elements don’t have separate start and end tags: they are called empty elements. Examples are:
Instead of having a separate end tag they have just a single tag which ends with a forward slash before the closing angle bracket.
<img src="images/DSC03730.JPG" lt="Holly playing a G chord on the guitar"/> <br/>
MORE ONLINE
Adding pictures to pages – http://nano.tips/addpics Making pictures the right size – http://nano.tips/picsize
img – the image element br – the line-break element
<BUILDING THE SITE>
ADDING NEW WEB PAGES
The Nanonauts now want to make a new page which lists the songs they play. The easiest way to make a new page is to copy an existing page and change it.
Open the about-us.html file. Then go to the File menu and choose the Save As option. Save the file as our-songs.html. Notice how the new file appears in the list of files in the nanonauts folder. You now have a new web page named our-songs.html. But at the moment it’s just the same as the
about-us.html page. You’ll need to edit the text so that the page is now a list of songs.
Use the example below for ideas. Add in your own favourite songs!
<!DOCTYPE html> <html> <head> <title>Our Songs</title> <link type="text/css" rel="stylesheet" href="css/my-first-stylesheet.css"/> </head> <body> <h1>Our Songs</h1> <p>This is a list of the songs we can play:</p> <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> </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"
