folders. You refer to a folder by giving its path. For example, C:/nanonauts/images gives the path to the images folder inside the nanonauts folder on your computer’s C: drive.
Tags – are special markers used in HTML code. They use angle brackets and look like these examples: <p> </p> <h1> </h1> <br/>. You’ll be seeing a lot more of them throughout this book!
Web browser – Chrome, Firefox, Internet Explorer, Opera, Safari and other applications which let you browse the web are called web browsers. To view a web page you need a web browser.
NINJA TIP
Some word-processing programs will automatically turn your quote marks (") into ‘smart quotes’ (“,”). Your code won’t work! Use a plain- text editor.
MORE ONLINE
Want to know more about editing code using a code editor? Go to http://nano.tips/codeeditor
<PICTURING THE NANONAUTS>
ADDING A PHOTO TO THE PAGE
The About Us page tells everyone about the band. But wouldn’t it be more interesting if it showed a photo as well? To show a photo you’ve got to tell the web browser where to find it. And to understand where to look, the web browser needs to know 1. the name of the folder in which the photo is stored and 2. the file name of the picture. Let’s say you have a picture called ‘nanonauts.jpg’.
<p><img src="images/nanonauts.jpg" alt="Picture of the Nanonauts"/></p>
You can add the picture to the page by adding the following line of code:
This is how the modified code looks:
<!DOCTYPE html> <html> <head> <title>About Us</title> <link type="text/css" rel="stylesheet" href="css/my-first-stylesheet.css"/> </head> <body> <h1>About Us</h1> <p><img src="images/nanonauts.jpg" alt="Picture of the Nanonauts"/></p> <p>We are the Nanonauts.</p> <p>Our names are Holly, Dervla, Daniel and Sam.</p> </body> </html>
After saving the page and reloading it in the browser, it looks like this:
About Us
We are the Nanonauts. Our names are Holly, Dervla, Daniel and Sam.
Let’s take a closer look at the code.
<p><img src="images/nanonauts.jpg" alt="Picture of the Nanonauts" /></p>
The really important part here is src="images/nanonauts.jpg"
This tells the web browser to look inside the images folder for a file named nanonauts.jpg. The web browser looks for the images folder in the same place that the web page is saved. So, if you look at the files in the nanonauts folder, as well as the about-us.html file, you’ll see an images folder. And, if you open this folder, you’ll see the nanonauts.jpg file.
nanonauts
about-us.html
css
images
nanonauts.jpg
NINJA TIP
If the nanonauts.jpg file were missing from the images folder then the browser would show a symbol that indicates that. Something like this:
The src="images/nanonauts.jpg" is an attribute. Attributes always follow the same pattern – the attribute name, followed by an equals sign, followed by an attribute value contained within a pair of straight quote marks. Like this:
closing straight quote mark
attribute value
opening straight quote mark
equals sign
attribute name
src
=
"
images/nanonauts.jpg
"
The alt attribute, in the same way, contains text that appears if the picture cannot be shown. This is helpful if the web page is being translated into speech for blind people, for example.
Now that you know how to add a picture, add your own picture into your about-us.html page. To do this copy the picture into the images folder and then add the code that will display your picture. So, if your picture came from a digital camera and was called DSC03730.jpg you might add the following code:
<p><img src="images/DSC03730.jpg" alt="Holly playing the 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