The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Adding Images

Next ►
►

In this lesson, we will learn how to add images to an HTML document. Images are a crucial part of web design as they can enhance the visual appeal and provide additional context to the content.

Key Concepts

  1. Image Tag (<img>): The HTML tag used to embed images.
  2. Attributes: Essential attributes for the <img> tag, such as src, alt, width, and height.
  3. Image Formats: Common image formats used on the web (JPEG, PNG, GIF, SVG).
  4. Best Practices: Tips for optimizing images for web use.

The <img> Tag

The <img> tag is used to embed an image in an HTML page. It is an empty tag, meaning it does not have a closing tag. Here is the basic syntax:

<img src="image-url" alt="description">

Attributes of the <img> Tag

  1. src (Source): Specifies the path to the image file.
  2. alt (Alternative Text): Provides a textual description of the image, which is important for accessibility and SEO.
  3. width and height: Define the dimensions of the image.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding Images</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <img src="https://example.com/image.jpg" alt="A beautiful scenery" width="600" height="400">
</body>
</html>

In this example:

  • The src attribute points to the URL of the image.
  • The alt attribute provides a description of the image.
  • The width and height attributes set the size of the image.

Common Image Formats

  1. JPEG (Joint Photographic Experts Group): Good for photographs and images with many colors.
  2. PNG (Portable Network Graphics): Supports transparency and is good for images with text, logos, or simple graphics.
  3. GIF (Graphics Interchange Format): Supports animation and is good for simple graphics with limited colors.
  4. SVG (Scalable Vector Graphics): Vector format that is scalable without losing quality, ideal for logos and icons.

Example with Different Formats

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Formats</title>
</head>
<body>
    <h2>JPEG Image</h2>
    <img src="image.jpg" alt="A JPEG image" width="300">

    <h2>PNG Image</h2>
    <img src="image.png" alt="A PNG image" width="300">

    <h2>GIF Image</h2>
    <img src="image.gif" alt="A GIF image" width="300">

    <h2>SVG Image</h2>
    <img src="image.svg" alt="An SVG image" width="300">
</body>
</html>

Best Practices for Adding Images

  1. Use Descriptive alt Text: Always provide meaningful alternative text for accessibility.
  2. Optimize Image Size: Compress images to reduce load times without compromising quality.
  3. Use Appropriate Formats: Choose the right image format based on the content and use case.
  4. Responsive Images: Ensure images are responsive and adapt to different screen sizes.

Example of Responsive Image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Responsive Image Example</h1>
    <img src="https://example.com/image.jpg" alt="A responsive image">
</body>
</html>

In this example, the CSS ensures that the image scales proportionally to fit the width of its container.

Practical Exercise

Task

Create an HTML page that includes three images of different formats (JPEG, PNG, and SVG). Ensure each image has appropriate alt text and is responsive.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Image Gallery</h1>
    <h2>JPEG Image</h2>
    <img src="image.jpg" alt="A beautiful scenery in JPEG format">

    <h2>PNG Image</h2>
    <img src="image.png" alt="A logo in PNG format">

    <h2>SVG Image</h2>
    <img src="image.svg" alt="An icon in SVG format">
</body>
</html>

Conclusion

In this lesson, we covered how to add images to an HTML document using the <img> tag. We discussed the importance of attributes like src and alt, explored different image formats, and learned best practices for optimizing and making images responsive. By following these guidelines, you can effectively incorporate images into your web pages, enhancing both their visual appeal and accessibility.

Next, we will learn about embedding videos in HTML.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved