HTML Tutorials: Images

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.

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:

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:

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.

The align values of left, right, and 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.

Now all you need to know is how to make images. For that you might want to check out our Photoshop Tutorials.

© Copyright 2003-2007 Templates Resource