Images are very important to make a page beautiful and more informative . This tutorial will take you through simple steps to use images in your web pages.
This tag is an empty tag that includes attributes only, There is no need for any closing tag for html image tag.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the simple syntax to use.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/images/codingtag.png" alt = "Image text" />
</body>
</html>
Image Width/Height
The heights and the widths are custom ,means you can change them how we can be. You can specify width and height of the image in terms of either pixels or percentage of its actual size,
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/images/codingtag.png" alt = "Image text" width = "150" height = "100"/>
</body>
</html>
Set Image Border
Hey By default, image have a border, and the left work you have is only to specify thickness in terms of pixels using border attribute.
NOTE,
If the thickness is “zero” , no border around the picture
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/images/codingtag.png" alt = "Image text" border = "3"/>
</body>
</html>
Set Image Alignment
Image is aligned at the left side of the page by default, but to align the image to another side of the page like right left and center, it needs to use align attribute to set it
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/images/codingtag.png" alt = "Image text" border = "3" align = "right"/>
</body>
</html>
Well done you have done great, Learning small can give you high returns So keep doing your Showcasing practice and learning layout from now. Being a intermediate type all the code above in any editor like notepad and save with an extension (.html), and after the saving part your unique work will be shown by any browser.
You can easily prepare html interview questions and answers from coding tag for by implementing all examples.
Coding Tag 