The Image tag -
<img>
To place an image onto a page you will need to use the image tag. There are two very important things to remember about the image tag
- It’s an empty tag (remember, that means there’s no closing tag, only a beginning).
- It requires attributes to be effective.
Here is the syntax:
The image tag <img> has several attributes:
- src= identifies the image and tells the browser where to get the image.
- height = & width = tell the browser the size of the graphic (speeds up the downloading process).
- alt= gives alternative text for those who are not viewing their pages with images.
Let’s go through each one of the attributes in more detail.
src= attribute
To help the browser identify and find an image, you use the following command:
<img src="location/filename.gif">
The location of the image and its filename goes inside the quotation marks.
Height & Width attribute
When placing your images in the webpage, the browser looks for the height and width of your images. If you do not specify the size, the browser will stretch it or reduce it to fit.
<img src ="https://i.imgur.com/31jND1H.jpg" width ="40%" >
Exercise - adding images
Copy the text below into your notepad++ html document
<img src ="https://i.imgur.com/31jND1H.jpg" width ="40%" >
Trying adding your own images onto your page