Читать книгу CoderDojo: My First Website - Clyde Hatter - Страница 14

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!