Submodule2.2: Media

Images

Images are defined in HTML with the <img> tag. This tag is another example of empty tag, which means that it doesn’t have an end tag.

Inside the <img> tag we have the src and alt attributes.
Thus an image tag will look like: 

<img src = "html/images/nameofimage.jpg" alt = "Alternative text">

src defines the url of the image. Usually we save images in a separate folder to which we give the name images. Thus a typical expression of the src will be : src = "html/images/nameofimage.jpg"

alt stands for alternative text and it is required for the page to validate correctly.

Inside the alt attribute we put a short description of our image. This text will be displayed if for some reason the image cannot be loaded (slow connection, wrong url) or if the user uses a screen reader.

Another useful attribute that we can add inside the <img> tag, is the title. The value of this attribute is shown when we hover over the image as you can see in the example.

<img src = "html/images/nameofimage.jpg" alt = "Alternative text" title = "The title" >

For more information: https://www.w3schools.com/html/html_images.asp

Exercise

1. Open your editor, create a new file and save it as exersice02.2.html in the folder "Exercises".
2. Modify the file. You will find the image "myphoto.jpg". in the folder "images". The browser's output should be as shown in the following image:

Solution: