Lesson 1 The Image Attributes

II

Unit

KEYWORD
S
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 first 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 file is saved.
Below is the syntax on using the <img src> tag.
Syntax:
<IMG SRC = Location of Image map/ Path of the Image map>

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

Table 1
Attributes
SRC

Values
URL

Description
SOURCE- Location of
the image

Lesson 1 The Image Attributes

II
Below is the sample program using the element <img src>.
HTML Program 1

Unit

Lesson 1 The Image Attributes

II

Unit

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.
Program Output 1

Note:

Make sure that the html file and image file are both saved on the

desktop to appear the

image. If not, the complete path of the image should be correctly typed on
<img src>

tag.

Lesson 1 The Image Attributes

II

Unit

Sizing Image
To size an image, use the HEIGHT and WIDTH attributes to stretch or shrink an
image to fit into the allotted space, in case the image does not exactly fit tonthe
attribute number. The mentioned attribute lets the browser set aside the
appropriate space in image.
Attributes

Values

Description

BORDER

#pixels

BORDER Modifies
the thickness of the
border.

HEIGHT

#pixels

HEIGHT - Modifies the

height of the image

WIDTH

#pixels

WIDTH modifies the

width of the image

#pixels

VERTICAL SPACE it
adds vertical space in
pixels

VSPACE

HSPACE

#pixels

HORIZONTAL SPACE
it adds horizontal
space in pixels

Lesson 1 The Image Attributes

II
Below is an HTML Program using the HEIGHT, WIDTH, HSPACE, and
VSPACE attributes in the <img src> tag to resize an image.
HTML Program 2

Unit

Lesson 1 The Image Attributes

II

Unit

The following is the Program Output of the HTML Program 2 showing the effect of the
attributes used in the program. You can noticed the resized image in the webpage.
Program Output 2

Lesson 1 The Image Attributes

II

Unit

Link and Image

Images are best used as a navigational tool in the web. Linking a web page with the use
of an Image makes surfing interactive and fun. Link or Anchor is initiated by the element
<a href= URL> click to ASIANHISTORY.EDU.PH </a>.
The URL or Uniform Resource Locator is the path or location of the website while the
click to ASIANHISTORY.EDU.PH is the caption which you call the hypertext. The hypertext links
the present web page on your browser to another web page. For you to create a linking image,
substitute an image <img> element in place of the text you want to link or anchor. Then a quick
click on the image will launch the webpage linked to it.
The HTML Program 3 shows a hyperlink <a href=enroll.html> A good subject </a>.
Once the hyperlink is clicked on, it directly connects you to the webpage. Hyperlink texts are
commonly underlined and colored with blue.

Lesson 1 The Image Attributes

II
HTML Program 3

Unit

Lesson 1 The Image Attributes

II
Below is the Program Output of the HTML Program 3 showing a hyperlink.
Program Output 3

Unit

Lesson 1 The Image Attributes

II

Unit

The following HTML program shows how to create link using an image. In this program,
we uses a link of a bitmap image. Once the image is clicked, it connects to the linked webpage.
HTML Program 4

Lesson 1 The Image Attributes

II

Unit

Below is the Program Output of the HTML Program 4 showing an image used as a
hyperlink.
Program Output 4

Lesson 1 The Image Attributes

II

Unit

KEYPOINTS

We use the HEIGHT and WIDTH attributes to stretch or shrink an image to

fit into the allotted space in case the image does not exactly fit the
attribute number.

Images are best used as a navigational tool in the web. Linking a web page with the
use of an Image makes surfing interactive and fun.

Usually images are the first 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 src=> within the space
where you type the image location or path.

HANDS-ON ACTIVITY:

Create a program that will display images of 5 different flags of Asian

countries listed below:
1. Philippines
2. Korea
3. Indonesia
4. Japan
5. Thailand
Then, link to its corresponding description or historical background.