a guide to html img attributes

7/21/2019 a guide to html img attributes

http://slidepdf.com/reader/full/a-guide-to-html-img-attributes 1/12

Lesson 1 The Image Attributes UnitII

Image BORDER

Attribute HEIGHT

The Image Attribute

Images give life to the website. In fact, almost all websites at present use

images in their design and their user interface. Images help a lot in terms of the

user friendliness of the web. Usually images are the rst element noticed by the

website visitors. Therefore, adding images to your website is very essential. In

adding image to your web page, you can use the element <img src> within the

space where you type the image location or path. The image location or path is

where the image le is saved.

elow is the synta! on using the <img src> tag.

Syntax:

"I#$ %&' ( )Location of Image map* +ath of the Image map-

Attribute of the SRC element is shown on the table below.

Table 1

Attributes Values Description%&' )U&L %U&'/0 Location of

the image

KE!"#DS




elow is the sample program using the element "img src-.

$T%& 'rogram (




The Program Output of the HTML Program 1 is shown below. The image file box.gif

has been exported and displayed on the center of the webpage together with the displayed

caption “Sample output of Exported picture”.

'rogram "utput (

)ote #a2e sure that the html le and image le are both saved on the

des2top to appear the

image. If not, the complete path of the image should be correctly typed on

"img src-



tag.


Si*ing Image

To si3e an image, use the 4/I$4T and 5I6T4 attributes to stretch or shrin2 an

image to t into the allotted space, in case the image does not e!actly t tonthe

attribute number. The mentioned attribute lets the browser set aside the

appropriate space in image.

Attributes Values Description

&6/& )7pi!els&6/& 8 #odiesthe thic2ness of the

border.

4/I$4T )7pi!els4/I$4T 0 #odies the

height of the image

5I6T4 )7pi!els5I6T4 8 modies the

width of the image

9%+A'/ )7pi!els9/&TI'AL %+A'/ 8 it

adds vertical space inpi!els



4%+A'/ )7pi!els4&I:;TAL %+A'/ 8

it adds hori3ontalspace in pi!els


elow is an $T%& 'rogram using the $EI+$T, !IDT$, $S'A-E, an

VS'A-E attributes in the <img src> tag to resi3e an image.

$T%& 'rogram /




The following is the Program Output of the HTML Program 2 showing the effect of the

attributes used in the program. ou can noticed the resi!ed image in the webpage.

'rogram "utput /




&in0 an Image

"mages are best used as a na#igational tool in the web. $in%ing a web page with the use

of an "mage ma%es surfing interacti#e and fun. $in% or Anchor is initiated by the element

<a href! "RL#$ clic% to AS"A&'"ST(R.E)*.+' <%a$&

The "RL or "'iform Re(our)e Lo)ator is the path or location of the website while the

clic% to AS"A&'"ST(R.E)*.+' is the caption which you call the hypertext. The hypertext lin%s

the present web page on your browser to another web page. ,or you to create a lin%ing image-

substitute an image img/ element in place of the text you want to lin% or anchor. Then a 0uic%

clic% on the image will launch the webpage lin%ed to it.

The HTML Program * shows a hyperlin% a hrefe'roll&html!$ A goo+ (ub,e)t <%a$&

(nce the hyperlin% is clic%ed on- it directly connects you to the webpage. 'yperlin% texts are

commonly underlined and colored with blue.




HTML Program *




1elow is the Program Output of the HTML Program * showing a hyperlin%.

Program Output *




The following HTML program shows how to create lin% using an image. "n this program-

we uses a lin% of a bitmap image. (nce the image is clic%ed- it connects to the lin%ed webpage.

HTML Program -




1elow is the Program Output of the HTML Program - showing an image used as a

hyperlin%.

Program Output -




• 5e use the 4/I$4T and 5I6T4 attributes to stretch or shrin2 an image to

t into the allotted space in case the image does not e!actly t the

attribute number.

• "mages are best used as a na#igational tool in the web. $in%ing a web page with the

use of an "mage ma%es surfing interacti#e and fun.

• Usually images are the rst elements noticed by the website visitors.

Therefore, adding images to your website is essential. In adding Image to

your webpage, you can use the element <img src1> within the space

where you type the image location or path.

$A)DS2") A-TIVIT:

-reate a program that 3ill isplay images o4 5 i6erent 7ags o4 Asian

countries liste belo3:

(. 'hilippines

/. Korea

8. Inonesia

9. apan

5. Thailan

Then, lin0 to its corresponing escription or historical bac0groun.

.E/POI0T

Documents

a guide to html img attributes