In this tutorial we will show you the solution of how to align image in HTML, align attribute used for change the direction of image position. When changing an image location we need to add align attribute within <img> tag and set its value to any direction.
Let see how to implement align concept in detail with step by step guidance.
Step By Step Guide On How To Align Image In HTML :-
For align a image we can use css also but we are here using align attribute within <img> tag.
Each direction of alignment values explained in detail below. Some of values only have text for differentiate purpose because the image aligned with respect to text.
<!DOCTYPE html> <html> <head> <title> Aligning image in html </title> </head> <body> <p>this line will helps you to see the alignment of middle <img src="./background.jpg" alt="sample image" width="30%" height="30%" align="middle"> </p><br> <p>this line will helps you to see the alignment of top <img src="./background.jpg" alt="sample image" width="30%" height="30%" align="top"> </p><br> <p>this line will helps you to see the alignment of bottom <img src="./background.jpg" alt="sample image" width="30%" height="30%" align="bottom"> </p><br> <img src="./background.jpg" alt="sample image" width="30%" height="30%" align="right"> <img src="./background.jpg" alt="sample image" width="30%" height="30%" align="left"> <center><img src="./background.jpg" alt="sample image" width="30%" height="30%"></center> </body> </html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and if need any external file those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Already we discussed about <img> tag used for display image on website. In <img> tag have two attributes src and alt, src attribute contains information about PATH of the image. alt in the sense of alternate name for the image.
- When giving path to src attribute it must be correct location because it leads to failed to load image on website. Then alt attribute name needs to describe about the image which is used to user can get idea about it.
- In <img> tag we can set width and height to any size. Align attribute value have five choices of location. Now see each values result will display on webpage.
- Here, we used some of text for middle, top, bottom values only because with the help of text we can see the alignment difference between them.
- Default alignment value for an image is left when align attribute value set to middle, image is aligned to middle respect to the line of text.
- If Align attribute value set to top, image top edge aligned respect to the line of text. Align attribute value is bottom means, image bottom edge aligned respect to the text.
- When sets align attribute value to left image will aligned to the left side, if the value is right image will automatically aligned to the right side.
- When center an image we need to use <center> tag between <img> tag it will aligned to center of the page.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on how to align image in HTML helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion we are know about how alignments will appear on websites.
Now we have idea about how to handle the alignments in webpage. Alignment is important thing because it decide how the layout of webpage will looks.
About Riya
