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:
