YOU’VE MADE A WEB PAGE AND A STYLESHEET – AND THEY’RE WORKING TOGETHER!
THINGS TO DO NEXT
Enter some more paragraphs of text. Paragraphs go between the <p> and </p> tags. Like this:
<p>I am learning how to make a website for my Dojo Nano.</p>
<p> is a start tag. </p> is an end tag. Can you spot the difference?
You can see now that a web page is just text typed into a text file. How the text appears on the web page is controlled by the tags. What happens if you use h1 or h2 tags instead of p tags? What happens if you put some words inside strong?
Like this:
<p>My name is <strong>Sam</strong></p>
WORDS TO REMEMBER
Code editor – a program that allows you to edit the HTML code for your web page. You don’t have to use a special code editor – Notepad will do just fine – but code editors make it easier by colour-coding the HTML markup and providing other helpful features.
Edit – when you make changes to a web page, you edit it.
File – whenever you save anything onto your computer or up to the web, it’s stored as a file. Files can contain any kind of information – they can be web pages, photos, songs, PDF documents, you name it. But programmers refer to all of these things as files.
File name – files always have a file name. So the About Us web page has a file name: about-us.html. File names usually end with a full-stop followed by three or four letters (such as .jpg, .pdf, .html). This is known as a file extension and it tells the computer what kind of file it is. For example, a file ending .jpg is an image file.
Folder – when you save a file, it goes into a folder. A folder is a particular storage location on a computer. Folders can contain other 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
