The <img> (aka image) tag

Today we have seen how to insert an image in our web page.

In order to do so, we use the img (called image) HTML Element. It's syntax is as follows:

What does it mean URL_pointing_to_the_image_file?

Basically, it is a reference to a file. In this case it is the file that contains your image.

In layman terms, what we need to write here is the same we wrote for hyperlinks, that is, the path pointing to the file we want.

Example:

• The code <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Airship_Toronto.jpg/384px-Airship_Toronto.jpg" width="10%" > shows the picture with a size that is 10% that of your browser window. Notice: The width="10%" attribute allows us to shrink this image to make it nicely fit in this paragraph. Try with other values, say "60%" or "100%". Also, notice that this picture is located in the internet at the "address"
  https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Airship_Toronto.jpg/384px-Airship_Toronto.jpg
• The code
  <a href="https://commons.wikimedia.org/wiki/File:Airship_Toronto.jpg">
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Airship_Toronto.jpg/384px-Airship_Toronto.jpg" width="10%" >
</a>
  makes that same picture a hyperlink to the web page where it is located. You can click on it! .

Let's say your image file is located in your computer, instead of somewhere in the internet as was the case in the previous example. Then the form of the URL we need changes slightly. Instead of starting with http:// and starts with file:///. Notice the 3 forward slashes!

More specifically,

For Macs:

• Let's say your username in your Mac is John, and the file containing your image is called snapshot.png and is located within the folder ComputerScience, which itself is contained within your folder Documents. Then the URL (or path) for this image file would be file:///Users/John/Documents/ComputerScience/snapshot.png

For Windows: There is a slight difference in this case. We need to know which disk unit (C, D, E, etc.) the file is located in.

• Let's say your username in your Windows is John, and the file containing your image is called snapshot.png and is located within disk the folder ComputerScience, which itself is contained within your folder Documents of your disk unit D. Then the URL (or path) for this image file would be file:///D:/John/Documents/ComputerScience/snapshot.png

Practice

We already worked on the first four exercises during class (Mon. Sep. 26th). This is a detailed step-by-step summary so that you can do it on your own at home. We will finish working on this next day in class (Mon. Oct. 3rd).

1. Exercise: Take a snapshot of your computer screen.
   • For Macs: The short way is pressing COMMAND+SHIFT+3, that is, presing at the same time the keys COMMAND, SHIFT, 3. The file will automatically be saved in your Desktop folder with a name starting with Screen shot.... The long way is using the application Grab (search for it and open it; then press COMMAND+Z and follow the instructions). The proceed to save it the same way as you do with any other application Menu -> File -> Save, give it a name, f.i., snapshot, and take note of where you save it.
   • For Windows: Use the keyboard shortcut PrtScn. You may find alternative ways by searching in Google for windows 10 take screenshot.
2. Exercise: Write a web page that shows a screenshot of your computer. Note: Make sure no sensitive aka private information shows up in that screenshot of yours!
3. Exercise: Write a web page that shows the following picture of the planet jupiter. The URL of this image is https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg/600px-Jupiter_and_its_shrunken_Great_Red_Spot.jpg.
4. Exercise: Write a web page with pictures and a brief description of each of the following cities: Toronto, Barcelona, Paris, New York and Banf.. Hint: Go to the wikipedia page for Toronto. Choose an image you find there and right-click on it with your mouse. Select Save Image as..., and save that image in your computer. Do the same for the rest of the cities.
5. Exercise: Modify the last page by making each picture a hyperlink to the corresponding wikipedia page. What we want here is that you modify the previous page so that when you click now on the picture for Toronto, the browser opens the corresponding wikipedia page for that city. The same for the other cities. Hint: Use the hyperlink tag <a href="URL_of_wikipedia_image" > </a> and as its content add the corresponding image tag. In order for the image to link to its wikipedia page, make sure not to forget to add its address in URL_of_wikipedia_image.