Images are very simple to setup and use, there are also a number of options we can use with our images which include making them clickable (a hyper link). Image tags work the exact same way as other tags, as they are very similar to what there name. So with an image tag, we'll just shorten the word "image" to "img" and this will be our opening tag. With images there is an extra tag, called a source, which is used to tell the browser the location of the image file. The source tag works the same way as any other HTML tag, so we'll shorting "source" to "src" and this will be the tag we use. Let us take a look at an example of an image tag.
Code Example
<img src="http://www.domain.com/location/of/image.gif">
We won’t display an example of this code as it will just display whatever we link to in the source section. But let's keep moving and learn a few other options we can use with the image tag. There are just a few extra options we can use with our images; one of the most important tags would be the alt tag which will be sort of like the name of the image. Many search engines use this tag to give images a name for those users or systems that can't or won’t display images. Let's take a look at an example of an image tag utilizing the alt tag. We’ll use the same example as above but with the alt tag added to it.
Code Example
<img src="http://www.domain.com/location/of/image.gif" alt="Image Name">
Output Example
With this example we can see a picture, but nothing special about it; but if we hold our mouse over the top of the image for about three seconds, we'll see the alt text displayed behind the mouse. This is a great way to add a caption to an image and also let search engines or other systems know exactly what the image is.
As we can see from the above example to add an alt tag we would use the same syntax as all other HTML code and simply add the tag name, followed by an equal sign then put the information we'd like within quotes. Remember that all HTML will follow this simple syntax and if a user isn't careful they may miss this and cause errors within their code.
Next we'll take a look at how we can align our images to better format them within our site. This is a great way to add images in paragraph bodies and add a little extra to our documents. There are quite a few options that can be used with the align tag, but first let us take a look at how it's coded then we'll take a look at all the options available.
Code Example
<img src="http://www.domain.com/location/of/image.gif" align="right">
Output Example
As we can see adding the align tag is very simple and works just like any other HTML code. We'll simply add "align" followed by the option we'd like to use with the tag, which in this case is right which will display the image to the right or wherever the code is located. The location of the image can differs depending on the location of the image code, different sections of the HTML document will place the image in different locations, and we’ll go over more about locations with tables after we finish up with images.
Now that we know how to properly use the align tag, we need to take a look at all the options that can be used with the align tag. In the table below is a list of tags that can be used with the align tag.
Align Tag Options
- Available
- Middle
- Bottom
- Top
- Absmiddle
- Absbottom
- Left
- Right
- Top
- Texttop
- Center
- Baseline
Keep in mind that these tags and code can be used within the same image tag. Let's take a look at one utilizing all of the options we can use with the image tag.
Code Example
<img src="http://www.domain.com/location/of/image.gif" alt="Image Name" align="middle">
Output Example
As we can see from the above code, everything is setup and coded the same way as before except we’d add a few extra tags in to achieve the complete effect we’d like. But once again, all of these tags and commands can be used together to create the effect we’re looking for.
We can also use the width and height tags within the image tag to determine the correct width and height of an image. The width and height tags are great to use for older browsers that need to know the exact size of an image to display it correctly. The width and height tags are very simple to use and code, the tag name is the same as the name itself. Let’s take a look at an example using the width and height tags.
Code Example
<img src=" http://www.domain.com/location/of/image.gif " alt="Image Name" width="76" height="35">
Output Example
As we can see from the above nothing has changed because the width and height are the correct width and height for the image, some users will change the width and height of an image to make it fit somewhere and in most cases will distorted the image, so be careful where they are used.
