What is / how do I use the img (image) tag in HTML?

1) The image tag is critical to your website. It allows you to make images that appear on your website. Notice where the image tag lives, nested in the body tag! Look at the result on the right.

image template.PNG

2) That is the format, please notice the img tag is special. It only opens and then closes with the ">" symbol, its different from a lot of tags, this happens sometimes, so take note, its called a "self closing tag".

image template.PNG

3) The link or URL as its called, comes from a website. All you need to do is find a image on google, like this, make sure to click on it once. It will look similar to this.

image template.PNG

4) Right click on the image and hit "Copy Image Address", do NOT click "Copy Image".

image template.PNG

5) Now you have the link copied, we need to paste it into the image tag. Write out a blank img tag like this. img means image, the src means source, where its coming from. Make sure you include 2 quotation marks, thats very important.

image template.PNG

6) Finally paste the link INSIDE the quotation marks. You can do this by click between them and on your keyboard holding the "Ctrl" button ("Cmd" on macs) and then hitting the "V" key.

image template.PNG

image template.PNG

image template.PNG

image template.PNG

image template.PNG