Adding Images to your web page

In previous lesson you learned how to use an image as a background for web pages. It was <BODY BACKGROUND="image.gif"> </BODY>

Here we want to learn how to add an image in a web page. Tag that will be used for this purpose is <IMG> tag. Actually we will need parameters for this tag that specify image file location, file name and other optional parameters. Look at this example:

Example: <HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <BODY BACKGROUND="background.gif"> This is an image: <IMG SRC="abanner.gif"> </BODY> </HTML>

In this example I have used both a background image and an image between text.Also you may have noticed that this tag is also a single tag that does not need an ending tag. If you want to show your image in a different size than its real size, you can specify its size as below.

Example: <HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <BODY BACKGROUND="image1.gif"> This is an image: <IMG SRC="abanner.gif" WIDTH=234 HEIGHT=30> </BODY> </HTML>

Alignment and border size for images You can align image in your web page by inclosing it in a paragraph that is aligned as aligned to left, right or center. See example below

Example: <HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <BODY BACKGROUND="image1.gif"> This is an image: <IMG SRC="abanner.gif"> </BODY> </HTML>

You can add a border to an image by adding a border parameter to <IMG> tag. See the results of this html code. You can see examples of this lesson in our site. Go to email course section in our site to see ready examples.

Example: <HTML> <HEAD> <TITLE>Example</TITLE> </HEAD> <IMG SRC="abanner.gif" border=3> </HTML>

Some of options we use may not be supported on other browsers. As most of web surfers use "MS Internet Explorer" we will work around this browser.

Alternative text for images Some web surfers may use browsers that do not support graphics. An example is lynx browser that is used in Unix text environments. If you want to consider these users, you can enter a text as an alternative to each image in your web page. In this way image will be replaced by its alternative text. It is very easy. Just add an ALT parameter to <IMG> tag.

You see it does not cost too much.

Path of image file In above examples, image file must be located in the same directory that html file is located. If our image file resides in other directory , we must add a relational path or a complete URL to this image. See examples below:

<IMG SRC="images/abanner.gif"> Image is located in "images" directory below the directory that html file resides.

<IMG SRC="../abanner.gif"> Image is located in parent directory of the directory of html file.

Post Comment