Working with Images

Images: adding them to your page

<IMG SRC="sample.gif" WIDTH="140" HEIGHT="64" ALT="Testing the ALT text trick" BORDER="0">

Images: adding them to your page

You can add graphic images in two formats to your web pages:

• GIF images (they end with a .gif file extension)
• JPEG images (they end with a .jpg file extension)

SRC=

If you have a graphic image with the filename my_picture.gif then you would enter the filename as

the Value for the SRC= attribute, like this:

<IMG SRC="my_picture.gif">

WIDTH= and HEIGHT=

You can set the height and width attributes like this: <IMG SRC="picname.gif" WIDTH="100" HEIGHT="200">

The numbers I used refer to the image size in PIXELS. The above image would therefore appear on the page as 100 pixels wide, and 200 pixels high.

ALT=

It is ALWAYS a good habit to include the ALT= attribute. Some people

turn OFF their browsers ability to display pictures for faster

performance, and if you do not have a text description to replace the graphic, they won't be able to do or see much on your site. This is especially important .if you have a menu built with graphic menu choices.

Put your mouse over the image below and watch what happens .A little box comes up with the text I specified in the image's ALT= attribute. This is how

you would code it:

<IMG SRC="sample.gif" WIDTH="140" HEIGHT="64" ALT="Testing the ALT

text trick"BORDER="0">

BORDER= You can specify that your image be displayed with or without a border by adding

a simpleBORDER= attribute, like this:

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="0"> BORDER="0" tells the browser not to use a border.

(technically you are telling the browser to display the graphic with a border 0 [zero] pixels wide) If I wanted to use a border I could use a 1 instead of a 0 (zero) like this:

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="1">

Try using a 2 or a 3 instead of a 1 and watch the results.

Image Dimensions: how to find out what they are You can usually check the dimensions of your images in a graphic editing program of some sort, like Paint Shop Pro, or Adobe Photoshop. Some browsers will even show you the dimensions of the image, in the title bar, if you use the browser to view your image. Just type in the path and filename of the image in your browser's address bar:

c:\pictures\my_picture.gif

Changing Image SizeHTML allows you to specify any dimensions you like IN THE TAG. The image itself may well be 200 pixels wide and 150 pixels in height, but you can tell the browser to display bigger or smaller just by adjusting the size in the Tag attribute

code.

To illustrate this, here is a sample image and it's coding: <IMG SRC="sample.gif" WIDTH="140" HEIGHT="64">

This image is 140 pixels wide and 64 pixels high. This is what it tells me in my image editing program.

Now let's just change the number values in the WIDTH= and HEIGHT= attributes and see what happens:

<IMG SRC="sample.gif" WIDTH="200" HEIGHT="100">

In this example all I have done is changed the coding. I have simply told the browser to display the image in the dimensions I have chosen. If the file was 15k to start with, it will remain as a 15k filesize. The only thing that changes is

the displayed dimensions.

PLEASE

NOTE: It is important to note that arbitrarily changing the dimensions candrastically degrade the image quality very badly (as you can see above). If you need to make major changes to the size of a graphic, change the dimensions in your image editor and re-save the graphic with the new dimensions.

Aligning text beside an image By adding the ALIGN= attribute to your Image tag, you can align

text around your image. This is how you would code the ALIGN attribute in your

tag:<IMG SRC="sample.gif" WIDTH="200" HEIGHT="100" ALIGN="left"> This is where your text would go and the

aligning would occur automatically since it is already coded into the image tag.

Correct Value's for this attribute are: "bottom", "top", "middle", "left" and "right" as shown below:

By default the text is aligned to the bottom of an image. You can see where it starts and how it wraps around the image. There is no need to use ALIGN=BOTTOM since it is the default setting.

This text is aligned with the top of the image (<IMG SRC="image.gif"

ALT="SampleImage"ALIGN=TOP>). Notice how the browser aligns

only one line and then goes down to the bottom of the image for the rest of the text.

And this text is centered on the image (<IMG SRC="image.gif"

ALT="SampleImage"ALIGN=MIDDLE>). Only one line of the text

is aligned in the middle, and the rest drops down below the image.

The text here wraps all along the right side of the image since the image is

aligned to the left of the text (<IMG SRC="image.gif"

ALT="SampleImage" ALIGN=LEFT>). All the text is

right until it completes it's span of the image and then it wraps under the

image.

And this text is left of the image as the image is aligned to the right (<IMG SRC="image.gif" ALT="SampleImage" ALIGN=RIGHT>). All the text is left until it completes it's span of the image and then it wraps under the image.

Using this method of aligning is handy if you have small descriptions, or commentary to add to an image, but for much more precise placing of text blocks around your images you should consider using

Note- Always be very simple in writing the html code. Every code is controlled within a bracket "<>" . Mind it the starting and ending with these bracket is the only thing to note. 

In mathematics you have learnt that left side bracket must be equal to right side bracket. Similarly her starting enclosure must have a ending enclosure. e.g . <u> kinds of internet business</u>. See this text will be underlined. You can control  the property of the enclosed text by writing code in first enclosure. e.g. <u align="centre"  fontsize="4" font="arial">kinds of internet business</u>