3. Simple HTML Programs For Images and Image Alignment

HTML Image simple Example Program

In HTML, 

<img> tag used for show images.

 

Simple Image HTML Example Program ( For Your System )

(Consider your image name is Logo.png in E:\)

<html>

<body>

<h1>Image Example Program</h1>

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

</body>

</html>

Sample Output:

 

Simple Image HTML Example Program ( For Online Image )

<html>

<body>

<h1>Image Example Program</h1>

<img src="https://sites.google.com/a/thiyagaraaj.com/little-bit/tutorials/html-example-programs/3-simple-html-programs-for-images-and-image-alignment/Logo.png"/>

</body>

</html>

Sample Output:

 

HTML Immage Example Program with The Alt Attribute

If image cannot be diaplay. browser shows alternative text

 

Simple Image HTML Example Program with alt Attribute

<html>

<body>

<h1>Image Example Program</h1>

<img src="https://sites.google.com/a/thiyagaraaj.com/little-bit/tutorials/html-example-programs/3-simple-html-programs-for-images-and-image-alignment/Logo.png"

alt="www.thiyagaraaj.com Logo"/>

</body>

</html>

Sample Output:

 

HTML Immage Example Program with Weight and Height

we can set height and weight for images with the help of height and weight attributes

Simple Image HTML Example Program with Weight and Height

<html>

<body>

<h1>Image Example Program</h1>

<img src="https://sites.google.com/a/thiyagaraaj.com/little-bit/tutorials/html-example-programs/3-simple-html-programs-for-images-and-image-alignment/Logo.png"

alt="www.thiyagaraaj.com Logo"

width="100" height="50"

/>

</body>

</html>

Sample Output:

 

HTML Immage Example Program with Link

we can set link for images with the help of <a> tag.

 

Simple Image HTML Example Program with Link

<html>

<body>

<h1>Image Example Program</h1>

<a href="www.thiyagaraaj.com">

<img src="https://sites.google.com/a/thiyagaraaj.com/little-bit/tutorials/html-example-programs/3-simple-html-programs-for-images-and-image-alignment/Logo.png"

alt="www.thiyagaraaj.com Logo"

/>

</a>

</body>

</html>

Sample Output:

 

HTML Image Example Program for Image Alignment 

Three Type of Alignment:

  • bottom
  • midddle
  • top

Note : Bottom is default

Simple Image HTML Example Program with bottom,top and middle alignment

<html>

<body>

<h1>Image Example Program</h1>

<p>www.thiyagaraaj.com

<img src="https://sites.google.com/a/thiyagaraaj.com/little-bit/tutorials/html-example-programs/3-simple-html-programs-for-images-and-image-alignment/Logo.png"

alt="www.thiyagaraaj.com Logo" align="top"/>

-Used For Learning Purpose</p>

<br/>

<p>www.thiyagaraaj.com

<img src="https://sites.google.com/a/thiyagaraaj.com/little-bit/tutorials/html-example-programs/3-simple-html-programs-for-images-and-image-alignment/Logo.png"

alt="www.thiyagaraaj.com Logo" align="bottom"/>

-Used For Learning Purpose</p>

<br/>

<p>www.thiyagaraaj.com

<img src="https://sites.google.com/a/thiyagaraaj.com/little-bit/tutorials/html-example-programs/3-simple-html-programs-for-images-and-image-alignment/Logo.png"

alt="www.thiyagaraaj.com Logo" align="middle"/>

-Used For Learning Purpose</p>

</a>

<br/>

</body>

</html>

Sample Output: