Insert and Style Images with HTML img Tag

Introduction

In this lab, participants will learn the fundamentals of embedding and styling images using HTML's <img> tag. The comprehensive tutorial covers essential skills such as understanding image tag basics, setting fixed image dimensions, aligning images on web pages, adding image tooltips, and practicing image embedding techniques. Through hands-on exercises, learners will gain practical experience in manipulating images within HTML documents, exploring key attributes like src, alt, and various styling methods to enhance web page visual design and accessibility.

Participants will explore how to effectively use the <img> tag by understanding its core attributes, controlling image sizes, implementing proper alternative text, and applying different alignment and styling techniques. The lab provides step-by-step guidance with practical code examples, enabling students to develop a solid foundation in image handling and presentation within web development contexts.

Understand HTML img Tag Basics

In this step, you'll learn the basics of the HTML <img> tag, which is used to embed images in web pages. The <img> tag is a self-closing tag that allows you to display images directly in your HTML document.

Let's create a simple HTML file to demonstrate the basic usage of the <img> tag. Open the WebIDE and create a new file called images.html in the ~/project directory.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Image Basics</title>
  </head>
  <body>
    <h1>Learning HTML Image Tag</h1>

    <!-- Basic image embedding -->
    <img src="https://labex.io/logo.png" alt="LabEx Logo" />
  </body>
</html>

Let's break down the key attributes of the <img> tag:

src (source): This attribute specifies the path or URL of the image. It can be:
- An absolute URL (like in the example above)
- A relative path to an image in your project directory
- A local file path
alt (alternative text): This is a crucial attribute that provides a text description of the image. It serves several important purposes:
- Accessibility for screen readers
- Displays text if the image fails to load
- Helps with SEO (Search Engine Optimization)

Example output when you open this HTML file in a browser:
![LabEx Logo displayed on the page]

Key points to remember:

The <img> tag is an empty (self-closing) element
Always include the alt attribute for better accessibility
Images can be from local or remote sources

Set Fixed Image Dimensions

In this step, you'll learn how to set fixed dimensions for images using HTML attributes and CSS. Controlling image size is crucial for maintaining consistent layout and design on web pages.

Open the images.html file you created in the previous step, and modify it to demonstrate image dimension control:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
    <style>
      /* CSS method of setting image dimensions */
      .css-sized-image {
        width: 300px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h1>Image Dimension Control</h1>

    <!-- Using HTML attributes to set dimensions -->
    <img
      src="https://labex.io/logo.png"
      alt="LabEx Logo"
      width="250"
      height="150"
    />

    <!-- Using CSS to set dimensions -->
    <img
      src="https://labex.io/logo.png"
      alt="LabEx Logo"
      class="css-sized-image"
    />
  </body>
</html>

There are two primary ways to set image dimensions:

HTML Attributes:
- width: Sets the image width in pixels
- height: Sets the image height in pixels
- Example: <img src="image.jpg" width="250" height="150">
CSS Styling:
- Use width and height properties in a CSS class or inline style
- Provides more flexibility for responsive design
- Example: .image-class { width: 300px; height: 200px; }

Key considerations:

Maintain the image's aspect ratio to prevent distortion
Use consistent sizing for a uniform look
Consider responsive design for different screen sizes

Example output in a web browser:
![Images with fixed dimensions]

Align Images on Web Page

In this step, you'll learn how to align images on a web page using HTML and CSS. Proper image alignment helps create a more organized and visually appealing layout.

Open the images.html file and update it with different image alignment techniques:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
    <style>
      /* CSS alignment classes */
      .left-align {
        float: left;
        margin-right: 10px;
      }

      .right-align {
        float: right;
        margin-left: 10px;
      }

      .center-align {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h1>Image Alignment Techniques</h1>

    <h2>Left-Aligned Image</h2>
    <img
      src="https://labex.io/logo.png"
      alt="LabEx Logo"
      class="left-align"
      width="200"
      height="150"
    />
    <p>This text flows around the left-aligned image.</p>

    <h2>Right-Aligned Image</h2>
    <img
      src="https://labex.io/logo.png"
      alt="LabEx Logo"
      class="right-align"
      width="200"
      height="150"
    />
    <p>This text flows around the right-aligned image.</p>

    <h2>Centered Image</h2>
    <img
      src="https://labex.io/logo.png"
      alt="LabEx Logo"
      class="center-align"
      width="200"
      height="150"
    />
  </body>
</html>

Image Alignment Methods:

Left Alignment:
- Use float: left;
- Add margin to prevent text from touching the image
Right Alignment:
- Use float: right;
- Add margin to prevent text from touching the image
Center Alignment:
- Use margin-left: auto; margin-right: auto;
- Set display: block; to enable auto margins

Example output in a web browser:
![Images aligned left, right, and center]

Key points:

CSS provides flexible image alignment options
Use margins to control spacing around images
Experiment with different alignment techniques to achieve desired layout

Add Image Tooltips with Title Attribute

In this step, you'll learn how to add tooltips to images using the title attribute in HTML. Tooltips provide additional information when users hover over an image.

Open the images.html file and update it to demonstrate image tooltips:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
    <style>
      /* Optional: Add some styling to make tooltips more visible */
      img {
        border: 2px solid #333;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Image Tooltips Demonstration</h1>

    <!-- Basic tooltip using title attribute -->
    <img
      src="https://labex.io/logo.png"
      alt="LabEx Logo"
      title="Official LabEx Logo"
      width="200"
      height="150"
    />

    <!-- Multiple tooltips with different information -->
    <img
      src="https://labex.io/logo.png"
      alt="LabEx Mascot"
      title="LabEx Learning Platform Mascot"
      width="200"
      height="150"
    />
  </body>
</html>

Key points about image tooltips:

Use the title attribute to add tooltips
Tooltips appear when hovering over the image
Provide descriptive and helpful information
Works with both <img> tags and other HTML elements

Example tooltip behavior:

Hover over an image
A small text box appears with the title text
No additional JavaScript or CSS required

Example output in a web browser:
![Images with tooltips on hover]

Best practices:

Keep tooltip text concise
Provide meaningful information
Use for additional context or description

Practice Image Embedding and Styling

In this final step, you'll combine all the techniques you've learned to create a comprehensive image showcase that demonstrates various HTML and CSS image styling techniques.

Create a new file called image-gallery.html in the ~/project directory:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Gallery Showcase</title>
    <style>
      .image-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
      }

      .gallery-image {
        width: 250px;
        height: 200px;
        border: 3px solid #333;
        border-radius: 10px;
        margin: 10px;
        transition: transform 0.3s ease;
      }

      .gallery-image:hover {
        transform: scale(1.1);
      }

      .rounded {
        border-radius: 50%;
      }

      .grayscale {
        filter: grayscale(100%);
      }
    </style>
  </head>
  <body>
    <h1>Image Gallery Styling Practice</h1>

    <div class="image-container">
      <!-- Standard Image -->
      <img
        src="https://labex.io/logo.png"
        alt="LabEx Logo"
        class="gallery-image"
        title="Standard Image"
      />

      <!-- Rounded Image -->
      <img
        src="https://labex.io/logo.png"
        alt="LabEx Logo"
        class="gallery-image rounded"
        title="Rounded Image"
      />

      <!-- Grayscale Image -->
      <img
        src="https://labex.io/logo.png"
        alt="LabEx Logo"
        class="gallery-image grayscale"
        title="Grayscale Image"
      />
    </div>
  </body>
</html>

Key Styling Techniques Demonstrated:

Flexible image container using Flexbox
Consistent image dimensions
Border and border-radius styling
Hover effects with scale transformation
CSS filters for image appearance
Tooltips for additional information

Example output in a web browser:
![Image gallery with different styling effects]

Styling Concepts:

Use CSS classes for reusable styles
Experiment with different visual effects
Combine multiple techniques for unique designs

Summary

In this lab, participants learned the fundamentals of embedding and styling images using HTML's <img> tag. The lab covered essential techniques such as adding images with the src and alt attributes, understanding the importance of alternative text for accessibility and SEO, and exploring different methods of specifying image dimensions through HTML attributes and CSS.

The practical exercises guided learners through setting fixed image sizes, aligning images on web pages, and enhancing user experience by adding image tooltips using the title attribute. By working through these steps, students gained hands-on experience in manipulating and presenting images effectively in web development, developing critical skills for creating visually appealing and accessible web content.