HTML Image Tag
Next let’s look at actually placing an image on our web site. I’ll use both a transparent and nontransparent image:
<HTML>
<HEAD><TITLE>Background Color</TITLE></HEAD>
<BODY bgcolor=”#0099CC” background=”tiletest.png”>
<center>Transparency is the difference between this:
<br>
<img src=”heart.png” width=10% height=10%><br>
and this:<br>
<img src=”transparentheart.png”></center>
</BODY>
</HTML>
Let me explain the <IMG> tag. In order to include images in your web site, you need to use the <IMG> tag. It works this way:
<IMG src=”filename.ext”>
Where filename.ext is the name of your graphic file. You can also include other attributes such as width, height, and alt.
<IMG src=”filename.ext” width=50px height=100px> will force the image to resize to 50×100. You can also use %, such as width=50%. This represents percentage of the screen in view, however, and not the actual image size. I don’t recommend using percent on images.
<IMG src=”filename.ext” alt=”My image”> will display “My image” in web browsers that can not show the image. If you mouse over the image on your page, “My image” will also be shown. Using alt is a good idea because search engines can not see what is in an image. By giving a small description of the image, search engines can get an idea for what they are. This can help with your search rankings.
Border used to be an attribute, but it is deprecated. No you should use this to achieve a borderless image (which is desirable, especially when an image is a link, to remove ugly blue and purple borders from the image):
<IMG src=”filename.ext” alt=”My image” style=”border: none;”> Actually, that is a bit of CSS. However, it is simple enough to include here, and is very useful. For example, both of these images are set as links to Amazon.com - however, the second one does not use the style=”border: none;” and gets the ugly border frame around it:
O.K. That’s it for this quick tutorial on how to use the image tag to insert image into your HTML web page.
Loading ...
If you like "Putting Image into Your HTML Web Page with Image Tag,"
please consider linking to this article:
[…] Putting Image into Your HTML Web Page with Image Tag […]
[…] Putting Image into Your HTML Web Page with Image Tag […]