Lessons menu
HTML - basic - Lesson nr. 7

What this lesson is about?
In this lesson we will learn how to add pictures to our website. We can add one or even more links to a picture. We do some modifications to images in Paint, because a web developer should have some basic knowledge about image editing.

New tags of this lesson:

<img> - we use this tag if we need to include a picture in our webpage. This tag has no closing part.
<map> </map> - we use this tag if we want to add more links to one picture. Actually we can add different links to different parts of the picture.
<area> - this tag is necessary for the <map> tag, we mark the parts of the picture that are links and define the pages to be opened by the links.
<figure> </figure> - this tag can be used to join an image with a text/caption.
<figcaption></figcaption> - inside of a <figure> tag this tag defines a caption to the image enclosed.


The <img> tag has the following attributes:

src – this attribute is the most important, we add to it the name and path of the picture to be shown.
alt – we can attribute to this property a text, that appears if the picture defined in the src attribute cannot be reached.
width – – although it is not the recommended way, we can define the width of the picture to appear in the browser. This does not mean that we actually resize the picture, the pictures appears with the given width.
height – like the prervious attribute, this one is for defining a height to the picture.


The <map> tag has one attribute what we will use:

name – we have to add an identifier/name to the map.  We use this name to reference the map from the picture.


The <area> tag has more attributes which we will use:

shape – with this attribute we can define the form/shape of the link. Possible values are: rect (rectangle), circle, poly (polygon), default (the parts of the picture that remain without a link attached to it).
coords – to this attribute we add the coordinates of the shape added to the shape attribute.

To a rectangle we need the four corners coordinates: this means eight values.
To a circle we need to define the centers coordinates and the radius: this means three values.
The polygon can have any number of points: this means two values for every point.


The <img> tag:
  • The pictures should be copied to their final position in the folder and named permanently before including them to the HTML pages. If we move or rename them after, we need to correct all references to them in the HTML documents.
  • The name of the pictures should be short and meaningful.
  • We can give the sizes of the pictures in pixels or in percentage of the original size.
  • If we resize a picture using <img> attributes, we can add value to one of the attributes (width or height), and the picture is proportionally resized. If we give both sizes, the picture could appear distorted.
  • Although we can give the size with attributes, the best way is resizing the pictures with an image editor to the size we need them to appear. These pictures, together with the HTML files need to travel through the Internet, so unnecessarily big pictures slow down the loading speed of a webpage.

Example of the <img> tag:

The kv.jpg picture is beside the HTML document, so we only need to write its name. In the first example, the width is set to 100 pixels. The second picture has both sizes added, but the numbers are not proportional, that is why it appears distorted. The third tag refers to a nonexistent file, which is why the text given to the alt attribute appears.

If we add a caption to the first image: the text appears under the picture, the caption and the image appears separated from the other content, as a block.

The<map> tag:
  • We can read the coordinates needed from an image editor, but if we add sizes to the picture in the HTML tag the coordinates can slip.
  •  The picture we need to add the map, should be completed with a usemap attribute. The value of the attribute should be the map`s name we want to use.

    Example to the <map> tag:

The picture inserted is the kv.jpg, the original size is not changed in the code. The map named im is applied to the picture.

The map is described after the picture and contains three different shaped links:
The first link is polygon shaped, defined with four points. If we click on this part, the Wikipedia page about books opens.
The second link has the shape of a circle, the coordinates of the center and the radius is given. When clicked the Wikipedia page about coffee will open.
The third webpage opens, when we click anywhere else. This link refers to the page about web development.


Resizing pictures

For resizing a big picture, we can use the Paint program.

Home tab/Resize


We open the picture and select the Resize button. The size can be given in pixels or percentage. If the Mantain aspect ratio option is checked, only one size needs to be entered, the other one is calculated proportionally. 

If there is no Paint on your computer you could use any other image editor, like the free program GIMP or even an online image editor https://pixlr.com/editor/.

Searching for coordinates

To create a map we need coordinates. We can define coordinates opening the picture in Paint. Moving the cursor over the picture coordinates can be read from the bottom left part of the Paint window, (in the picture 290, 181). The size of the picture can be read from the bottom to (400, 300).

1. Insert the image named mike.jpg from the images folder after the first paragraph in index.html.
View the result
2. Apply a link to the picture you inserted in the previous exercise. By clicking on the picture the mike2.jpg from the images folder should appear in a new tab (which is a bigger picture).
View the result
3. Add a caption to the previously inserted picture in the index.html file. The text of the caption should be This is me.
View the result
4. Resize the code.jpg picture from the images folder to 500 pixel width in an image editor. Insert the code.jpg picture in the aspects.html file, before the title How do we make a website? Do not give a size to it in HTML.
View the result
5. Insert the file chart.jpg from the images folder into the tips.html document. The image should appear after the Work schedule table. Create a map for the image with the name pt. The map must contain at least two links, schematized in the shape of a rectangle. By clicking on the first 2 bars of the table, they should open a Wikipedia page on the musical genre mentioned:

The first bar’s link is: https://en.wikipedia.org/wiki/Indie_rock
The first bar coordinates are: 66,60,120,270
The second bar’s link is: https://en.wikipedia.org/wiki/Alternative_rock
The second bar’s coordinates are: 180,83,235,270

You can continue mapping the image and adding links to the rest of the music genres.
View the result
1. Which of the following statements is true?
2. What is the result of the following HTML part?
<a href="kv.jpg"download> <img src="kv.jpg"> </a>
3. Using a map we can use the following form:
4. Which one is the attribute of the <img> tag, that links the picture to a map?
5. What size will the picture bellow have?
<img src="kv.jpg" width="100">

Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept