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.

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.

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

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 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.

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.

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).