HTML Images

In this tutorial, I am going to be putting you through everything you need to know about images in HTML and all the tags and attributes that you can use.

The three (3) elements I am going to be putting you through are: image, picture and map elements.

Image Element

• The <img> tag is used to embedded the image
• It takes the following major attributes:
  • src - used to define the image URL.
  • alt - used to show the alternate text to be displayed if the image for some reasons refuse to show.
• Other attributes can be used such as: width, height, float etc.

The reasons why images usually fail to show is because you didn't specify the URL of the image very well. Below I will be showing you how to access images from: folders and sub folders.

ACCESSING IMAGES FROM THE SAME FOLDER

This is when the image is located inside the same folder as your HTML document.

• All you need here is the image name only (together with the extension name - jpeg, png etc)
• jenifer.jpg

ACCESSING IMAGES FROM ANOTHER FOLDER (FRONTWARDS)

This is when the image is located inside another folder frontwards. There is general folder containing your HTML document and another images folder (which is containing the image).

• To access it, simply type the name of the folder - images
• then forward slash - /
• then name of the image (together with the extension name - jpeg, png etc). jenifer.jpg
• images/jenifer.jpg

ACCESSING IMAGES FROM SUB-FOLDERS (FRONTWARDS)

This is when the image is located inside a sub-folder inside a folder frontwards. There is general folder containing your HTML document and another images folder which contains a folder called sub folder (which is containing the image).

• To access it, simply type the name of the folder - document
• then forward slash - /
• the name of the sub folder - images
• then forward slash again - /
• then name of the image (together with the extension name - jpeg, png etc). jenifer.jpg
• document/images/jenifer.jpg

ACCESSING IMAGES FROM ANOTHER FOLDER (BACKWARDS)

This is when the image is located inside another folder backwards. There is general folder containing the image and another folder containing your HTML document.

• To access it, simply type dot twice and forward slash - ../
• then name of the image (together with the extension name - jpeg, png etc). jenifer.jpg
• ../jenifer.jpg

ACCESSING IMAGES FROM SUB-FOLDERS (BACKWARDS)

This is when the image is located inside sub folder backwards.There is general folder containing the image and another folder containing another sub folder that is containing the HTML document.

• To access it, simply type dot twice and forward slash - ../
• type another dot twice and forward slash again - ../
• then name of the image (together with the extension name - jpeg, png etc). jenifer.jpg
• ../../jenifer.jpg

EXTENSION	FILE FORMAT
.png	PNG (Portable Network Graphics)
.jpeg, jpg	JPEG (Joint Photographic Expert Group image)
.svg	SVG (Scalable Vector Graphics)
.gif	GIF (Graphics Interchange Format)
.apng	APNG (Animated Portable Network Graphics)
.icon	ICO (Microsoft Icon)

Picture Element

The picture element is used in HTML to display different pictures for different screen sizes (or device sizes).

• The <picture> tag is used as the container for other image elements for different screen sizes.
• The <source> tag is used specific different images for different screen sizes. It is placed inside the <picture>....</picture> tags.
• The <source> tag takes the following attributes:
  • srcset - used to define the image URL.
  • media - used to specific the screen size.
• Other attributes can be used such as: width, height, float etc.

Map Element

The map element is used in HTML to create clickable areas inside an image. The <map> is used to define the map element. Below are the steps on how to use it.

• First define your image using the <img>.
• Inside the <img> add the following attributes:
  • src - used to define the image URL.
  • usemap - used to create relationship between img and map element. Starts with # followed by the name. For example, usemap="#flyer"
• Secondly define the map element using the <map>....<map>.
• Inside the <map> add the attribute:
  • name - this contains the same value with the usemap but it doesn't start with #. For example, name="flyer"
• Thirdly, add clickable areas by using the <area>. This is place inside the <map> tag.
• Inside the <area> tag the following attributes can be used:
  • shape - use to define the shape of the clickable area. It has the following values:
    • rect - for rectangle shape.
    • circle - for circle shape.
    • poly - for polygon shapes.
    • default - for the entire area.
  • coords - use to define coordinates for the shape
    • Coordinates for rect comes in pairs; each x-axis and y-axis. It takes four (4) values. For example: coordinates 34,44 means 34 pixels from the left margin and 44 pixels from the top. Coordinates 270,350 means 270 pixels from the left margin and 350 pixels from the top
    • Coordinates for circle - takes two (3) values separated by comma: center coordinates and radius. (34,56,44)
    • Coordinates for poly - comes in multiple pairs of x-axis and y-axis, which can be used to create any shape.
    • href - contains the address or location to be directed to when that area is clicked.

Now lets, try it out. The example below contains a business flyer, when you click on the area that contains lady's picture used to design the flyer it will take you to another HTML document displaying her full picture