Apprendre l'HTML : Les images

Introduction

This tutorial will guide you through the process of adding images to your web pages using HTML. Images enhance the visual appeal of a webpage and provide additional context to your content. We will learn how to use the <img> tag effectively and explore different image formats available today.

Step 1: Understanding the <img> Tag

The <img> tag is used to embed images in an HTML document. Here’s how to use it:

• Basic Syntax:

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

  • src: Specifies the path to the image file.
  • alt: Provides alternative text for the image, important for accessibility and SEO.

• Practical Tips:

  • Always include the alt attribute to describe the image, which helps users who rely on screen readers.
  • Use relative paths for images stored in your project folder, or absolute paths for images hosted online.

Step 2: Specifying Image Dimensions

You can control the size of the images using the width and height attributes.

• Example:

  <img src="image-url" alt="description" width="300" height="200">
  

• Practical Advice:
  • Specify dimensions to ensure your layout remains consistent, especially for responsive designs.
  • Avoid stretching images by maintaining the aspect ratio (width and height ratio).

Step 3: Exploring Image Formats

Different image formats serve various purposes. Here are the most commonly used formats:

• JPEG (or JPG):

  • Best for photographs and images with gradients.
  • Offers good compression and quality balance.

• PNG:

  • Supports transparency and is suitable for images with text or graphics.
  • Larger file sizes compared to JPEG.

• GIF:

  • Supports animation but limited to 256 colors.
  • Great for simple graphics and short animations.

• SVG:

  • A vector format ideal for logos and icons.
  • Scales without losing quality.

Step 4: Using CSS for Image Styling

You can style images using CSS to enhance their appearance.

• Example CSS Styles:

  img {
      border: 2px solid #000;
      border-radius: 8px;
      width: auto; /* Maintain original size */
      height: auto; /* Maintain original size */
  }
  

• Practical Tips:
  • Use CSS to add borders, shadows, or hover effects to images for improved aesthetics.
  • Ensure that CSS styles do not distort the image dimensions.

Step 5: Responsive Images

To ensure images look good on all devices, use responsive techniques.

• Using CSS:

  img {
      max-width: 100%;
      height: auto;
  }
  

• Practical Advice:
  • This CSS rule allows images to scale according to their container, ensuring they do not overflow or become too small.

Conclusion

In this tutorial, you learned how to insert images into your HTML pages using the <img> tag, specify dimensions, explore various image formats, and apply CSS for styling. Next, consider experimenting with responsive images to enhance user experience across different devices. Start incorporating images into your web projects to make them visually appealing and engaging!