It's always nice to be able to position images just the way you want them. In this tutorial, you can learn about all the image aligning features built into HTML.
Sponsors - Spoono Host
Once you have images created and put on your server, you only need to use some simple code to put them in. We're going to tool around with this image: How did I make that appear? Here's how:
<img src="pic.gif">
This code puts the file "pic.gif" into the web page. Now, you can add some other features, by adding these attributes inside that line
width="size (in pixels)" to change the width
height="size (in pixels)" to change the height
border="size (in pixels)" to change the border size
You can also link images to different web pages. A common practice in the Internet world is to use images like buttons as links and to use an image as your homepage. Also, when a user puts his/her mouse over the image, you can make a little popup text come up that gives information about the image (called ALT text). For example:
<a href="mypage.html"><img src="pic.gif" width="22" height="22" border="2" alt="Here is the ALT text I talked about."></a>
Produces:
I linked the image to mypage.html and shrunk the dimensions to 22x22 pixels. If the user puts his/her mouse over the image, the message "Here is the ALT text I talked about." pops up.
There is one more attribute you can use with images, the align attribute. Here is a table showing the different types of vertical alignments that you can use. Once again, the attribute goes inside the <img src> tag.
<img src="pic.gif" align="texttop"> Spoono Spoono
<img src="pic.gif" align="middle">
Spoono Spoono
<img src="pic.gif" align="absmiddle">
Spoono Spoono
<img src="pic.gif" align="bottom">
Spoono Spoono
The align values of left, right, center can also be used to change the horizontal alignment of an image relative to the objects surrounding it. If perchance you have the need to align an image both horizontally and vertically at the same time, then you will need to organize your images and other content with tables or layers.