Читать книгу CoderDojo: My First Website - Clyde Hatter - Страница 13
Оглавление<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.
