HTML Full Course (Day 05)

1. Adding images with the img tag:

In HTML, images are added using the `<img>` tag. It is a self-closing tag that does not require a closing tag. Here's how it works:

   - `<img>`:

 The `<img>` tag is used to insert an image into an HTML document. The `src` attribute specifies the source (URL or file path) of the image file. The image is fetched from the specified source and displayed within the HTML document.

   Here's an example of the `<img>` tag usage:

   ```HTML

   <img src="path/to/image.jpg" alt="Description of the image">

   ```

2. Image sources and alt attributes:

When adding images to HTML, you need to specify the source (`src`) attribute, which indicates the location of the image file. The source can be an absolute URL or a relative file path. Additionally, it is essential to include the `alt` attribute, which provides alternative text for the image. Here's how they work:

   - `src` attribute: 

The `src` attribute specifies the source of the image. It can be a relative path to an image file within the website's directory structure or an absolute URL pointing to an image hosted on another website.

   - `alt` attribute: 

The `alt` attribute provides alternative text for the image. It is used to describe the image content when the image cannot be displayed or for accessibility purposes. The text should be descriptive and convey the purpose or meaning of the image.

   Here's an example that demonstrates the usage of both attributes:

   ``HTML

   <img src="path/to/image.jpg" alt="A beautiful sunset over the ocean">

   ```

3. Image dimensions and alignment:

You can control the dimensions and alignment of images using CSS or by specifying the width and height attributes directly in the `<img>` tag. Here's how it works:

   - Width and height attributes: 

The `width` and `height` attributes allow you to specify the dimensions of the image in pixels. These attributes can be added to the `<img>` tag to define the desired width and height of the image.

   - CSS styling: 

Alternatively, you can use CSS to control the dimensions and alignment of images. By targeting the `<img>` tag or applying a class or ID, you can use CSS properties like `width`, `height`, `margin`, `float`, or `text-align` to control the size and positioning of the image.

   Here's an example that demonstrates setting image dimensions using attributes:

   ```HTML

   <img src="path/to/image.jpg" alt="A beautiful sunset over the ocean" width="500" height="300">

   ```

4. Creating image maps:

Image maps allow you to define clickable regions on an image, where each region corresponds to a specific link or action. HTML provides the `<map>` and `<area>` tags to create image maps. Here's how it works:

   - `<map>`: 

The `<map>` tag is used to define an image map. It is placed immediately after the `<img>` tag and contains one or more `<area>` tags.

   - `<area>`: 

The `<area>` tag defines a specific region within the image map. It specifies the shape (rectangular, circular, or polygonal) and the coordinates of the region. Additionally, you can use the `href` attribute to specify the destination URL when the region is clicked.

   Here's an example of creating an image map with two clickable regions:

   ```html

   <img src="path/to/image.jpg" alt="A world map" usemap="#map">

   <map name="map">

     <area shape="rect" coords="0,0,100,100" href="link1.html" alt="Region 1">

     <area shape="circle" coords="200,200,50" href="link2.html" alt="Region 2">

   </map>

   ```

By understanding how to add images with the `<img>` tag, specifying image sources and alt attributes, controlling image dimensions and alignment, and creating image maps, you can effectively incorporate images into your HTML documents and enhance the visual appeal and interactivity of your web pages.