Insert and Style Images in HTML

Introduction

In this lab, you will learn how to effectively insert and style images in HTML using various techniques and attributes. The lab covers essential skills such as adding basic images with source and alternative text, setting fixed image dimensions, aligning images, and creating informative tooltips. By following the step-by-step instructions, you will gain practical experience in manipulating image elements to enhance web page design and improve user experience.

Through hands-on practice, you will explore different HTML attributes like src, alt, width, height, and title to control image presentation and accessibility. These skills are fundamental for web developers looking to create visually appealing and responsive web pages with properly integrated and styled images.

Add Basic Image with src and alt Attributes

In this step, you'll learn how to add basic images to an HTML page using the <img> tag and its essential attributes. Images are a crucial part of web design, helping to make web pages more visually appealing and informative.

First, let's create an HTML file to work with. 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>My First Images</title>
  </head>
  <body>
    <!-- We'll add our images here -->
  </body>
</html>

The <img> tag is a self-closing tag used to embed images in an HTML document. It has two critical attributes:

src (source): Specifies the path to the image file
alt (alternative text): Provides a text description of the image

Let's add an image to our HTML file:

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="LabEx Logo"
  />
</body>

The src attribute points to the image URL, and the alt attribute provides a description that:

Displays if the image fails to load
Helps screen readers describe the image for visually impaired users
Improves SEO by providing context to search engines

Save the file and open it in a web browser to see the image.

Notes: Learn more about How to preview HTML files in the WebIDE.

LabEx logo dark version

Set Fixed Image Dimensions with Width and Height

In this step, you'll learn how to control the size of images using the width and height attributes in HTML. These attributes allow you to specify the exact dimensions of an image, which can help improve page layout and loading performance.

Open the images.html file you created in the previous step. We'll modify the existing image and add a few more to demonstrate different sizing techniques.

HTML provides two attributes for setting image dimensions:

width: Sets the image width in pixels
height: Sets the image height in pixels

Let's update our previous image and add some new examples:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
  </head>
  <body>
    <!-- Original image with fixed dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
    />

    <!-- Another image with different dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="300"
      height="150"
    />

    <!-- Image with only width specified -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="250"
    />
  </body>
</html>

Key points about image dimensions:

Dimensions are specified in pixels
You can set either width, height, or both
If only one dimension is specified, the image scales proportionally
Setting dimensions helps prevent page layout shifts as images load

Example output in a web browser will show three images of different sizes.

Align Images Using Deprecated Align Attribute

In this step, you'll learn about the deprecated align attribute for positioning images in HTML. While modern web design uses CSS for layout, it's important to understand this historical method of image alignment.

Open the images.html file from the previous steps and modify it to demonstrate different image alignments:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
  </head>
  <body>
    <p>
      <!-- Left-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="left"
        width="150"
        height="75"
      />
      This text will flow around the left-aligned image.
    </p>

    <p>
      <!-- Right-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="right"
        width="150"
        height="75"
      />
      This text will flow around the right-aligned image.
    </p>

    <p>
      <!-- Center-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="middle"
        width="150"
        height="75"
      />
      This text is aligned with the middle of the image.
    </p>
  </body>
</html>

The align attribute supports three main values:

left: Aligns the image to the left, with text flowing around it
right: Aligns the image to the right, with text flowing around it
middle: Aligns the image vertically with the text baseline

Important notes:

The align attribute is deprecated in HTML5
Modern web design uses CSS float or flexbox for layout
This attribute is kept for historical understanding

Example output will show images positioned differently within paragraphs.

Note: The Labby dialog box may obscure the right-aligned image.

In this step, you'll learn how to use the title attribute to add tooltip information to images. Tooltips provide additional context or description when a user hovers over an element.

Open the images.html file from the previous steps and modify it to demonstrate tooltip usage:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
  </head>
  <body>
    <!-- Image with a simple tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="Official LabEx Logo"
    />

    <!-- Image with a more descriptive tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="LabEx Logo: Learn coding through hands-on labs"
    />

    <!-- Multiple images with different tooltips -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Programming Logo"
        width="150"
        height="75"
        title="Web Development"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Cloud Logo"
        width="150"
        height="75"
        title="Cloud Computing"
      />
    </div>
  </body>
</html>

Key points about the title attribute:

Provides additional information when hovering over an image
Works with images, text, and most HTML elements
Helps improve user experience by giving context
Displayed in a small popup when the mouse hovers over the element

When you hover over these images in a web browser, you'll see the tooltip text appear.

Summary

In this lab, participants learned how to effectively work with images in HTML by mastering key techniques for image embedding and styling. The lab covered essential skills such as adding images using the <img> tag with critical attributes like src and alt, which ensure proper image display and accessibility. Learners explored methods for controlling image dimensions through width and height attributes, understanding how these settings impact page layout and performance.

The practical exercises guided students through various image manipulation techniques, including setting fixed image sizes, adding tooltip information with the title attribute, and experimenting with different image alignment strategies. By working hands-on with HTML image elements, participants gained valuable insights into creating visually engaging and responsive web page designs.