Mastering HTML Image Embedding

Introduction

The HTML <img> tag is used to embed images in web pages. It is an empty tag, which means it doesn't have a closing tag. The src attribute is mandatory and specifies the path or URL to the image. Other optional attributes include alt, title, height, width, etc. In this lab, you will learn how to use the HTML <img> tag to insert images into web pages.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/MultimediaandGraphicsGroup -.-> html/img_maps("`Image Maps`") subgraph Lab Skills html/basic_elems -.-> lab-70777{{"`HTML Image Embedding`"}} html/charset -.-> lab-70777{{"`HTML Image Embedding`"}} html/head_elems -.-> lab-70777{{"`HTML Image Embedding`"}} html/multimedia -.-> lab-70777{{"`HTML Image Embedding`"}} html/img_maps -.-> lab-70777{{"`HTML Image Embedding`"}} end

Set up your project

The first step is to create a new directory named "html-img-tag-lab", and inside it create a file named "index.html". Open the file in your code editor and add the following code to the <head> section:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

Add an image to your web page

To add an image to your web page, you will need an image file. For this example, let's assume you have an image named "logo.png" in a folder named "images" in your root directory. To add this image to your web page using the <img> tag, add the following code to the <body> section:

<img src="images/logo.png" alt="Logo" />

In this code, the src attribute specifies the path to the image file. The alt attribute provides alternative text that is displayed if the image cannot be loaded for some reason.

Add additional attributes to your image

You can add several additional attributes to your image to control its appearance and behavior. Here is an example that shows how to use some of the most common attributes:

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

In this code, the width and height attributes control the size of the image. The title attribute provides a tooltip when the user hovers their mouse over the image.

Use an image map

An image map is an image that has defined clickable areas, or "hotspots", that link to different destinations. To create an image map, you need to define the coordinates of each hotspot and the URL that it links to. Here is an example of an image map:

<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="North America"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="South America"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europe"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asia"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Africa"
  />
</map>

In this code, the usemap attribute specifies the name of the map, which is defined using the <map> tag. Each <area> tag defines a hotspot by specifying its shape (e.g., "rect" for rectangular), its coordinates, and the URL it links to.

Add an image as a background

You can also use an image as the background of an HTML element, such as the body of your web page. Here is an example:

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

In this code, the background-image property specifies the path to the image file, and the background-repeat property sets it to not repeat. The background-size property scales the image to cover the entire background.

Summary

Congratulations! You have successfully learned how to use the HTML <img> tag to add images to your web pages. You have also learned how to use several common attributes to control the size and appearance of your images, and how to create an image map and use an image as a background.

HTML Image Embedding