Prev Next

HTML Images

Images enhance the visual appeal and clarity of webpages. The <img> tag is used to embed images in HTML. It's important to provide descriptive alt text for accessibility and to consider image dimensions, formats, and responsiveness when incorporating images into your designs.

Key Topics

Basic Image Usage

Example: Embedding a simple image with alt text. Below is an example using TryMeYourSelf-logo.png from the images folder.

<img src="images/TryMeYourSelf-logo.png" alt="Website Logo">

Example: Specifying width and height attributes to control the image size.

<img src="images/TryMeYourSelf-logo-1.png" alt="Logo Variant" width="200" height="100">

Image Showcase Example

This example demonstrates how to use images throughout a simple HTML page. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Showcase</title>
</head>
<body>
    <h1>Welcome to the Image Gallery</h1>
    <img src="images/TryMeYourSelf-logo-2.png" alt="Main Logo" style="display:block; margin-bottom:20px;">
    <p>The above image uses an inline style for spacing.</p>

    <div>
        <h2>Logo Variants</h2>
        <img src="images/TryMeYourSelf-logo-head.png" alt="Header Logo" width="150" style="margin:10px;">
        <img src="images/TryMeYourSelf-logo-3.png" alt="Alternate Logo" width="150" style="margin:10px;">
    </div>
</body>
</html>

Explanation: This page displays multiple images with alt text, different sizes, and spacing. Using descriptive alt attributes ensures accessibility, while adjusting width and inline styles helps control layout and presentation.

Images in a Table

This demonstration shows how images can be integrated into a table for product listings or visual data. Another full code sample is provided below.

<h2>Image Table</h2>
<table border="1" style="border-collapse:collapse; width:60%;">
    <tr>
        <th>Product</th>
        <th>Image</th>
    </tr>
    <tr>
        <td>Brand Logo</td>
        <td><img src="images/TryMeYourSelf-logo.png" alt="Brand Logo" width="100"></td>
    </tr>
    <tr>
        <td>Header Logo</td>
        <td><img src="images/TryMeYourSelf-logo-head.png" alt="Header Logo" width="100"></td>
    </tr>
</table>

Explanation: Integrating images into tables can help present information clearly, such as product catalogs or team profiles. Each image has an alt attribute for accessibility, and their sizes are adjusted to fit the layout.

Key Takeaways

  • Use <img> to embed images and alt for descriptive text.
  • Adjust image size with width/height attributes or CSS for better layout control.
  • Ensure images are accessible by providing meaningful alt text.
  • Incorporate images into various elements like paragraphs, divs, and tables.
  • Organize images thoughtfully to enhance user experience and visual appeal.
Prev Next