Embedded Files
🎯 Introduction
🎯 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
🎯 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
🎯 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
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
🎯 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
🎯 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
🎯 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
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:
The <img> tag is used to display images in HTML.
You can display online images by providing the URL in the src attribute of the <img> tag.
The alt attribute allows you to specify alternative text for an image, which is displayed if the image fails to load.
Adjust the width and height of an image using the width and height attributes.
Create clickable images that act as links by wrapping the <img> tag inside an <a> tag.
Images can be aligned using the align attribute, with options such as bottom, middle, and top.
Page updated
Report abuse