Exploring Simple HTML Programs for Images and Image Alignment

🎯 Introduction

In this article, we will delve into simple HTML programs that involve working with images and image alignment. We will explore different techniques and attributes to enhance the appearance and functionality of images in your web pages. Let's get started!

🎯 HTML Image Tag

The <img> tag is used to display images in HTML. Here's an example program that showcases a simple image:

<html>

  <body>

    <h1>Image Example Program</h1>

    <img src="E:\Logo.png"/>

  </body>

</html>

🎯 Displaying Online Images

To display images hosted online, you can provide the URL of the image in the src attribute of the <img> tag. Here's an updated version of the previous program:

<html>

  <body>

    <h1>Image Example Program</h1>

    <img src="https://example.com/Logo.png"/>

  </body>

</html>

🎯 The Alt Attribute

The alt attribute allows you to specify alternative text for an image. If the image fails to load, the browser will display this alternative text. Here's an example program with the alt attribute:

<html>

  <body>

    <h1>Image Example Program</h1>

    <img src="https://example.com/Logo.png" alt="www.example.com Logo"/>

  </body>

</html>

🎯 Setting Image Dimensions

You can adjust the width and height of an image using the width and height attributes. Here's an example program that demonstrates this:


<html>

  <body>

    <h1>Image Example Program</h1>

    <img src="https://example.com/Logo.png" alt="www.example.com Logo" width="100" height="50"/>

  </body>

</html>

🎯 Adding Links to Images

By wrapping an <img> tag inside an <a> tag, you can create a clickable image that acts as a link. Here's an example program:


<html>

  <body>

    <h1>Image Example Program</h1>

    <a href="https://example.com">

      <img src="https://example.com/Logo.png" alt="www.example.com Logo"/>

    </a>

  </body>

</html>

🎯 Image Alignment

You can align images using the align attribute, which accepts three values: bottom, middle, and top. If no alignment is specified, bottom is the default. Here's an example program showcasing different alignments:


<html>

  <body>

    <h1>Image Example Program</h1>

    <p>www.example.com</p>

    <img src="https://example.com/Logo.png" alt="www.example.com Logo" align="top"/>

    - Used For Learning Purpose

    <br/>

    <p>www.example.com</p>

    <img src="https://example.com/Logo.png" alt="www.example.com Logo" align="bottom"/>

    - Used For Learning Purpose

    <br/>

    <p>www.example.com</p>

    <img src="https://example.com/Logo.png" alt="www.example.com Logo" align="middle"/>

    - Used For Learning Purpose

    <br/>

  </body>

</html>


In this article, we explored various HTML programs for working with images and image alignment. We learned how to display images, handle online images, add alternative text, adjust image dimensions, create image links, and align images. By applying these techniques, you can enhance the visual appeal and functionality of your web pages.

Summary and Key Points

In this article, we discussed several HTML programs for working with images and image alignment. We explored different techniques and attributes to enhance the appearance and functionality of images on web pages. Here are the key points we covered: