You are here:   HomeHTML LanguageHTML TutorialHTML MARQUEE
by Dinesh Thakur Category: HTML

The label is used to insert images: <img>. This tag consists of a single instruction and so </ img> does not exist and their use is prohibited. We can insert an image in mid sentence as if it were a word of it and will be displayed by the browser after the text.

It can be seen that we have inserted an arrow in mid-sentence and after the image we
continued to write. Although we can create this effect with images of all sizes is not recommended do with those having a height much greater than the text .

 



To insert an image on a web page we need to have it in a separate file. There are many formats to store an image in a file: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc. each of which have characteristics. The selected format on the World Wide Web is the GIF format that distinguishes your files because they have the ". gif". We could say that all browsers are capable of show the images in this format. Text-based browsers often provide methods to view pictures using any external viewer program.

 

A second format which has been introduced in the WWW and is supported by most browsers (including the Explorer and Navigator) is JPEG. This format is especially useful for pictures and which is capable of compressing this type of image so they take up to 4 times less than the GIF format images. The files that contain pictures JPEG format usually have the extension ". jpg".

 

To add an image to an HTML document, you just need to include the <IMG> tag with a reference to the desired image. The <lMG> tag is an empty element i.e. it does not require a closing tag and you can use it to include from small icons to large Images.

 

Syntax: <IMG SRC = "URL" ALT = "ALTERNATIVE TEXT" >

 

SRC: Defines the URL of the image. It identifies the specific image to use with its type i.e. it not only specifies what image; it also specifies where the image is. The commonly used image file types are GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group).

 

ALT: To give text description of the image inserted. This attribute is useful in case of text only browsers (like lynx) where at times images are turned off to load files faster using this attribute visitor will at least get the text description of image if not the image itself.

 

For graphical browsers (Internet Explorer, Netscape Navigator etc.) the alternative text appears as the pop-up text i.e. whenever the visitor hovers the mouse over the image, the alternative text appears within a rectangular box. The following lines of code describe how to include an image with alternative text in a web page.

 

<HTMl>

<HEAD>

<TITLE>BASIC IMAGE TAGS</TITlE>

</HEAD>

<BODY>

<P> The Convair 580 in quebec city after the October 2001 Tropical storm Karen research flight <BR><BR>

<img SRC=”c:\AIRCRAFT\index\craft.jpg”

ALT = “ IMAGE OF AIRCRAFT”>

</body>

</html>

 

VARIOUS ATTRIBUTES USED WITH <IMG> TAG

 

(1) HEIGHT AND WIDTH: These attributes are used to set the dimensions of an image. The value from 1 to 100 percent. Specifying dimensions of an image decrease the loading time as well as it improves the overall appearance of the page. You first decide the image size, which will be most appropriate for your web page and then include that image.

 

In most of the browsers these attributes get precedence over the actual image size. When a browser starts loading a page, it first notes these attributes and leaves that much space for the image before it displays the remaining text. Ultimately it goes back and fills in the image.

 

In the absence of these attributes the browser first loads enough of the image to know how much space that image require, and tell then the rest of the page might not be displayed. So specify the dimensions to make your page load faster because it becomes easier for the browser.

 

Syntax <IMG SRC ="URL" HEIGHT= "PIXELS" WIDTH = "PIXELS">

 

Another use of "height" and "width" attributes would be to size images. This is rarely a good idea, as the image may end up being distorted. One way to avoid distortion is to shrink images in a proportional manner. Shrinking the image with these attributes does not affect the file size, while resizing the image beforehand will shrink the file and hence reduce the download time. However these are two drawbacks to specifying the "height" and "width".

• These are presentational attributes. So they ideally belong in a style sheet instead of in your <IMG> tag.

• If you have a very small image and specify its height and width, the Navigator and Internet Explorer won't be able to fit the alternate text inside the small image box for those users not displaying images.

The speed advantage (as discussed above) of setting the "width" & “height” attributes may out weight the two drawbacks, especially if you are not using small images with a lot of alternate text.

The following lines of code display three different sizes of the sample image, in order to improve the image quality.

 

<HTML>

<HEAD>

<TITlE>BASIC IMAGE TAGS</TITLE>

< HEAD>

<BODY>

<P>The Convair 580 in Quebec city after the October 2001 Tropical Storm Karen research f1ight.<BR><BR>

< IMG SRC ="d:\aircraft.jpg" HEIGHT=50 WIDTH=80>

< IMG SRC="d:\aircraft.jpg" HEIGHT=100 WIDTH=160>

< IMG SRC="d:\aircraft.jpg" HEIGHT=150 WIDTH=240>

< /B0DY>

< /HTML>

 

2 ALIGN

 

HTML provides another appearance attribute, called the "align" attribute using which you can position your image in the web page. This attribute provides both horizontal and vertical alignment options. It can take any of the five values left, right, top, middle and bottom.

 

Syntax

 

<IMG SRC = "URL" ALIGN = "LEFTIRIGHT ITOP IMIDDLE IBOTTOM">

 

HORIZONTAL ALIGNMENT: Horizontally image can be aligned to left or right of the window.

LEFT: Images by default align to the left, with any text following the image appearing on the same line. However, if the text is long then it wraps to the bottom of the image. Specifying align = "left" forces the image to the current left margin and any accompanying text appears on the same line around the image's right margin. Its interpretations also depends on whether any images or other material with left alignment appear earlier or not. In that case former material will get preference and later image will appear on the right of the former one. Any text preceding the image forces it to appear on the next line.

RIGHT: It is similar to left except that image is forced to the right margin and any accompanying text appears on the same line around the image's left margin. In the following example you will see how the "align" attribute works. Here the same image is included thrice to show you all the possible horizontal alignments.

The code is as follows.

 

<HTML>

<HEAD>

<TITLE>BASIC IMAGE TAGS</TITLE>

</HEAD>

<BODY>

<IMG SRC="d:\AlRCRAFT _files\index_e_files\aircraft-small.jpg" HE1GHT="100" WIDTH = “160”>

<P>The Convair 580 in Quebec city after the October 2001 Tropical Storm Karen research flight.<BR><BR><BR>

<IMG SRC="d:\AIRCRAFT _files\index_e_files\aircraft-small.jpg" HEIGHT::"100" WIDTH="160"

ALIGN:"LEFT">

<P>The Convair 580 in Quebec city after the October 2001 Tropical Storm Karen research

flight.<BR><BR><BR><BR><BR><BR>

<IMG SRC="d:\AIRCRAFT _files\index_e_files\aircraft-small.jpg" HEIGHT::"100" WIDTH="160"

ALIGN:"RIGHT">

<P>The Convair 580 in Quebec city after the October 2001 Tropical Storm Karen research

flight.<BR><BR>

</BODY>

</HTML>

 

As you can see in the output the first image has default alignment which forces the long surrounding text to appear in the bottom of the image whereas specifying the alignment lets the surrounding text to appear besides the image.

 

VERTICAL ALIGNMENT: Vertically image can be aligned to the top, middle and bottom of the window.

 

Top : Aligns the top of the image with the top of the current text and the remainder of the image hangs below the text line.

 

MIDDLE: Aligns the vertical mid-line of the image to the current baseline of the surrounding text.

 

BOTTOM: This is default vertical alignment that aligns the bottom of the image with baseline of the accompanying text. The remainder of the image remains higher than the surrounding text setting.

 

<HTML>

<HEAD>

I

<TITLE>BASIC IMAGE TAGS</TITLE>

<BODY>

<Pi>The Convair 580 in Quebec city after I;

<IMG SRC="d:\AIRCRAFT _files\index_e_files\aircraft-small.jp9" HEIGHT ="100" WIDTH="160" ALIGN="TOP"> the October 2001 Tropical Storm Karen research flight.<8R><BR><BR> II

<P>The Convair 580 in Quebec city after

<IMG SRC="d:\AIRCRAFT _files\index_e_files\aircraft-small.jpg" HEIGHT =”100”

WIDTH="160" ALIGN="MIDDLE" ALT="MIDDLE ALIGNMENT"> the October 2001 Tropical

strom Karen research flight.<8R><BR><BR>

<P>The Convair 580 in Quebec city after

<IMG SRC="d:\AIRCRAFT_files\index_e_files\aircraft-small.jpg" HEIGHT ="100”

WIDTH="160" ALlGN:"BOTTOM"> the October 2001 Tropical Storm Karen research

flight.<BR><BR><BR> II

</BODY>

</HTML>

 

3. BORDER: By default no border appears around an image unless that image is a link. However, you can specify a border for an image by using the "border attribute in <IMG> tag.

 

Syntax

 

<lMG SRC = "URL” BORDER = "PIXELS”>

 

The width of the border is specified in pixels. If you use the border = “1”attribute in <lMG> tag, then a thin border will appear around the image. Also you can increase the border width by increasing the value in the border attribute. You can hide the border by specifying border =”0" to the <IMG> tag.

In order to add border to the image simply add this attribute in <IMG> tag

 

<IMG SRC = "D:\AIRCRAFT.JPG" ALT = "IMAGE ON AIRCRAFT" BORDER = "10">

 

An image's border width does not count towards determining. an image's height or width. So if you specify an image to be 100pixels wide (width = "100") and have a border width of 10 (Border=”10") then the image will take 120 pixels of horizontal space (because the border appears on both the left and right sides of the image).

 

In addition the image will take a few pixels more than 120 because browsers will put a small amount of space between an image and text. The amount of space allocated is determined by the HSPACE and VSPACE attributes.

 

4. VSPACE AND HSPACE: Internet Explorer and Navigator do not place images right next to text. Instead, they put a small margin of a few pixels in between text and an image. You can control the amount of horizontal space with the HSPACE attribute and the amount of vertical space with VSPACE attribute.

 

These spaces are also referred as white space. White space doesn't need to be white; it just means an empty space having color which depends on the background. Including white space around images makes the page's overall appearance better.

 

Syntax

 

<IMG SRC = "DRL" HSPACE="PIXELS" VSPACE="PIXELS">

 

The "HSPACE" attribute is used to insert a buffer of horizontal space on the left and right of an image while "VSPACE" attribute is used to insert a buffer of vertical space in between the top and bottom of the image and other objects.

 

The value of both attributes should be a positive number of pixels while under some browsers it may be possible to set the attribute values to percentage values, this is inadvisable, because very high values may produce strange results. By default these attribute values are small, non-zero numbers, which provide just enough space to keep the surrounding text away from the image.

 

The following lines of Code shows the use of "HSPACE" and "VSPACE" attribute in a web page.

 

<HTML>

<HEAD>

<TITLE>BASIC IMAGE TAGS</TITLE>

</HEAD>

<BODY>

<P> The Convair 580 in Quebec city after the October 2001 Tropical Storm Karen

research flight.

<IMG SRC="D:\AIRCRAFT _files\index_e_files\aircraft-small.jpg " BORDER="10"

HSPACE="150" VSPACE="100">

<HR WIDTH=100% SIZE=5 NOSHADE>

</BODY>

</HTML>

 

As you can see there is a text written before the <IMG> tag and it forces the image to appear in new line. Specifying white space keeps the surrounding text away from image.



About Dinesh Thakur

Dinesh ThakurDinesh Thakur holds an B.SC (Computer Science), MCSE, MCDBA, CCNA, CCNP, A+, SCJP certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps. For any type of query or something that you think is missing, please feel free to contact us.



What's New and Popular





Search Content







Advance Courses



Basic Courses



Advertise with Us