Understanding Image Tags

This tutorial will help you learn different commands that will allow you to manipulate your images to your liking. The code given is written in HTML (HyperText Markup Language) similar to the code you copy and paste from image hosting sites, to view your images at a desired location. To best understand this tutorial you must understand the basic html structure. Insert the actual content codes here

To properly use code in examples copy and paste content the examples inside < >

Basics of the Image tag

The image tag allows you to display images in many formats on a webpage. The tag used for displaying an image in html code is img. With all html there are certain attributes that can be associated with the image tag to allow it to perform different functions. These include:

Src Attribute - REQUIRED

The source (src) attribute is the location or URL where the image resides on the internet. This attribute must always be used or your image will not be shown as the browser will not know where to retrieve it from.

Example: img src="http://www.iuploadhere.com/image.jpg"

Alt Attribute - OPTIONAL

The alternate text (alt) attribute is used to displayed text in place of an image that cannot be found or when image downloading is turned off by the user. This feature is to help the user understand what he/she should be viewing if the image doesn't display.

Example: img src="http://www.iuploadhere.com/image.jpg" alt="My Image"

Align Attribute - OPTIONAL

The align image command allows you to position the image in correspondence with the surrounding text. Commands used include top, bottom, middle, left, and right.

Example: img src="http://www.iuploadhere.com/image.jpg" alt="My Image" align="Top"

Width and Height Attributes - OPTIONAL

These commands allow you to change the size of the image on the website. The attributes used are width="#" and height="#" where the # represents a number (in pixels) that you wish to use. Remember when using this command that you are not actually modifying the image but only temporarily changing the size which can cause distorted images.

Example: img src="http://www.iuploadhere.com/image.jpg" alt="My Image" align="top" width="50" height="40"

Background Image Attribute

The background image command allows you to place your image in the background of your website as a wallpaper. As you can see in the example below, this attribute must be placed within the tag at the beginning of your HTML document. If your image is smaller then the area of the page it will tile itself.

Example: body background="http://www.iuploadhere.com/background.jpg"

Turning an image into a Link

This command allows you to turn your image into a link that people can click to direct them to another webpage on the internet. When the user scrolls over the image the mouse cursor will change from the arrow to a hand with it's index finger pointing. This command requires you to surround your image tag with the html tags shown below in bolded text.

Example:

a href="http://www.iuploadhere.com">img src="http://www.iuploadhere.com/image.jpg" alt="My Image">