Lesson 1.9. Images in HTML pages

Lesson 1.8 Summary Lesson 1.10

Syntax

To add an image in a HTML page, use the tag <img>. The attribute src="" contains path the the image. Here is an example:

<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png">

The previous example displays the image below:

Try it online

Resizing the images

The attributes width="" and height="" allows you to resize the images. Values are specified in pixels. here is some example of image insertion in HTML :

<h3>Original image :</h3>
<img src="https://friconix.com/png/fi-xwluxm-file-html-wide.png">

<h3>Height resizing (100 pixels) :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" height="100">

<h3>Width resizing (50 pixels) :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" width="50">

<h3>Width and height resizing :</h3>
<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" width="200" height="150">

The following example displays the resized images:

Try it online

Note that this syntax tends to disappear in favor of CSS style sheets that we’ll study later.

Image title

You can associate a title with the image. This title will be displayed in the browser when the user rolls the mouse over the image. The title is specified with the attribute title ="". Here is an example :

<img src="https://friconix.com/png/fi-xwluxl-file-html-wide.png" title="HTML icon provided by Friconix.com">

Roll your mouse over the image:

Try it online

Alternate text

The browser may not be able to display the image for various reasons:

In this case, it is possible to specify an alternative text which will be displayed in place of the image. This text is specified with the tag alt =" ".

<img src="https://example.com/image.png" alt="Image from example.com">

Code above displays an image with an alternate text:

Try it online

This text can also be displayed on Braille terminals intended to visually impaired people.

Note that some search engines use alternative text and title to obtain a text description of the image that will be used for indexing images. Specifying the attributes alt and title improves the image indexing.

Exercice

Create a new page containing the logo of three websites:

Each image must be sized at 100x100 pixels.

On each image, add

Each link must open the page in a new tab.

Here is the expected result:

Try online
Solution
Lesson 1.8 Summary Lesson 1.10

See also

Last update : 11/14/2023
 Soutenez le blog de Lulu sur Tipee. Support Lulu's blog on Tipeee