Inserting Images And Lists In A Web Page MODULE – 4

Database Concepts, Web

Designing

25

INSERTING IMAGES AND Notes

LISTS IN A WEB PAGE

In the previous lesson you have learnt how to create web pages with formatted
text. You know that web pages also contain images. Images make a web page
more colorful and interesting. If a web page contains text only then most of
the people may not like to read it completely. A page becomes more interesting
and attractive if it contains images to illustrate some concepts or just to show
the images of some events or personalities. In this lesson you will learn how
to insert images in a web page.

OBJECTIVES
After reading this lesson, you will be able to:
identify image files by their file name extension;
insert images in a web page;
format images and text on a web page.

25.1 IMAGE FORMATS

Digital images exist in many different formats like JPEG, GIF, Exif, TIFF, RIF,
PNG, BMP, and many more. Each of these file formats has its own pros and
cons. For the web pages, best suited file formats are JPG, GIF, and PNG.
JPG file format is the best option for images with lots of colors such as
photographs. Their file size is also small and can be further reduced to suit
the requirements.

Computer Science 457

 MODULE – 4 Inserting Images And Lists In A Web Page
Database Concepts, Web
Designing GIF file format is the best option for images with a few colors such as logos,
pencil drawings etc. A lot of small animations are also available in the form
of GIF files.
PNG file format is the best option for images with transparency effects. PNG
file format also supports lossless reduction in file size.
In any case the best way to judge the suitability of an image is your eyes. It
is always a better idea to preview any web page before publishing (uploading
Notes it on the Internet) it.

25.2 INSERTING IMAGES IN A WEB PAGE

An image can be inserted in a web page by <IMG> tag with with the following
attributes:
Attribute Possible values of Description
the attribute

SRC URL of the image to Specifies the URL (Location + FileName)

be inserted of the image to be inserted in the page. The
Location part of the URL is optional if the image
lies in the same folder in which web page is
stored.

ALIGN Top, bottom, middle, Specifies the alignment of the image

left, right according to surrounding elements

BORDER Number Specifies the width (in pixels) of the border

around the image.

HEIGHT Number Specifies the height (in pixels) of the image.

WIDTH Number Specifies the width (in pixels) of the image.

ALT Text Specifies the alternate text to be displayed if the

image is not available or cannot be displayed.

Out of these, SRC attribute is mandatory.

Example:
<IMG SRC = dream1.jpeg HEIGHT = 150 WIDTH = 200>
This statement will display an image dream1.jpg in the web page. Height and
Width of the image are 150 pixels and 200 pixels respectively. The value of SRC
attribute is just the file name. It means that the image exists in the same folder
in which the web page is stored.

458 Computer Science

Inserting Images And Lists In A Web Page MODULE – 4
Database Concepts, Web
If the image is stored in the folder “M:\HTML\Image” and the web page is stored Designing
in some other folder, then the <IMG> element will be specified as follows:
<IMG SRC = “M:\HTML\images\dream1.jpeg” HEIGHT = 150 WIDTH = 200>

Notes

Fig. 25.1: The browser window

One <IMG> tag inserts one image in the web page. By using multiple <IMG>
tags we can insert multiple images. Now let us see how various tags affect the
appearance of an image.
Let us now see the effect of various attributes of <IMG> tag.
The HEIGHT and WIDTH attributes are used to specify the height and width
both (in pixels) of the image to be displayed. If the size (height and width) of
an image is not as per the requirements of a web page, we specify the display
size of the image by using HEIGHT and WIDTH attributes of the <IMG> tag.
If these attributes are not specified then the image will be displayed in
original size.
BORDER tag is used to specify the size/width/thickness (in pixels) of the image
border. If BORDER attribute is not specified then the images will be displayed
without any border.
Sometimes, it may happen that the image to be displayed is not available or the
image cannot be displayed in the browser. In such cases, the browser places
a cross symbol (in place of the image) indicating that the image is not available
or could not be displayed. The user does not get any clue about which image
has to be displayed there. Using ALT attribute we can specify the alternate text
to be displayed if the image is not available or cannot be displayed.

Computer Science 459

 MODULE – 4 Inserting Images And Lists In A Web Page
Database Concepts, Web
Designing An example of these attributes is given below. Carefully go through the HTML
code and the corresponding web page.

Notes

These four images, numbered 1,2,3, and 4, are due to statements numbered 7,
8, 9, and 10 respectively. You can easily observe the effect of various attributes.
Notice URL of the image in this example. The URL “images\Tejas.jpg” specifies
that the image file, Tejas.jpg, lies in the sub-folder images of the current folder.
ALIGN Attribute
ALIGN attribute of <IMG> tag specifies the alignment of the image according
to surrounding elements. Different possible values of ALIGN attribute and their
effects are given in the following table:

value of ALIGN
attribute Effect
Left Place the image at the left-most possible space in the window and
wrap the other contents around the right hand side of that image.
Right Place the image to the right-most possible space in the window.
Top Aligns the top of the image with the top of the current line.
Middle Aligns the middle of the image with the baseline of the current line.

Bottom Aligns the bottom of the image with the baseline of the current line.

460 Computer Science

Inserting Images And Lists In A Web Page MODULE – 4
Database Concepts, Web
An example of ALIGN attribute with different values is given below. Carefully Designing
go through the HTML code and the corresponding web page.

Notes

Fig. 25.2: Image tag with align attribute

Computer Science 461

 MODULE – 4 Inserting Images And Lists In A Web Page
Database Concepts, Web
Designing

INTEXT QUESTIONS 25.1

1. Fill in the blanks:
a. ........................... file format is the best option for images with lots of
colors such as photographs.

Notes b. ........................... file format is the best option for images with a few
colors such as logos, pencil drawings etc.
c. ........................... file format is the best option for images with
transparency effects.
d. ........................... tag is used to insert an image in a web page.
e. BORDER attribute of <IMG> tag specifies the border width in
............................
2. State whether the following statements are ture or false:
a. <IMG> tag has a corresponding </IMG> tag.
b. Using ALIGN attribute of <IMG> tag we can place an image in the
center of the browser window.
c. ALIGN = TOP places an image at the top of the browser window.
d. Using SRC attribute of <IMG> tag, we specify the URL of the image
to be displayed.
e. BORDER attribute is used to specify border color of the image.

25.3 INSERTING LISTS IN A WEB PAGE

A list is a sequence of elements. Using HTML we can insert three types of lists
in a web page. These lists are:
1. Unordered (Bulletted) Lists
2. Ordered (Numbered) Lists
3. Definition Lists
Unordered List
An unordered list is a bulletted list. An unordered list starts with <UL> and ends
with </UL>. Items are inserted in the list using <LI> tag. An example of an
unordered list is given below:

462 Computer Science

Inserting Images And Lists In A Web Page MODULE – 4
Database Concepts, Web
Designing
<UL>
<LI> Agricultural Aircraft </LI>
<LI>Fighter Aircrafts </LI>
<LI>Fighter Aircrafts </LI>
<LI>Helicopters</LI>
<LI>Engines </LI> Notes
<LI>Trainer Aircrafts </LI>
<LI>Observation Aircrafts </LI>
<LI>Transport Aircrafts </LI>
</UL>

This is a part of an HTML document to show the unordered list only and will
generate the following list:

Agricultural Aircraft
Fighter Aircrafts
Fighter Aircrafts
Helicopters
Engines
Trainer Aircrafts
Observation Aircrafts
Transport Aircrafts

Fig. 25.3: Unordered list

The shape of the bullets in a bulleted list can be changed by using the TYPE
attribute of <UL> tag as shown in the following table:

Value of TYPE attribute Effect (Shape of the bullet)

DISC (Filled Circle)

CIRCLE o (Empty Circle)

SQUARE (Filled Square)

Computer Science 463

 MODULE – 4 Inserting Images And Lists In A Web Page
Database Concepts, Web
Designing For example, if we use TYPE attribute with <UL> in the above code, it will
have the following effects:

<UL Type = DISC>(Default) <UL Type = CIRCLE> <UL Type = SQUARE>

Agricultural Aircraft o Agricultural Aircraft Agricultural Aircraft

Fighter Aircrafts o Fighter Aircrafts Fighter Aircrafts

Notes Fighter Aircrafts o Fighter Aircrafts Fighter Aircrafts

Helicopters o Helicopters Helicopters

Engines o Engines Engines

Trainer Aircrafts o Trainer Aircrafts Trainer Aircrafts

Observation Aircrafts o Observation Aircrafts Observation Aircrafts

Transport Aircrafts o Transport Aircrafts Transport Aircrafts

Ordered Lists
An ordered list is a list in which elements are given sequence numbers. Such
lists are generally created when order of elements in the list is important. An
ordered list is created using <OL> tag in the HTML code. Different items in
the list are inserted using <LI> tag as in an unordered list. An example of an
ordered list is given below:

<OL>
1. Agricultural Aircraft
<LI>Agricultural Aircraft </LI>
<LI>Fighter Aircrafts </LI>
2. Fighter Aircrafts

<LI>Fighter Aircrafts </LI> 3. Fighter Aircrafts

<LI>Helicopters</LI> 4. Helicopters
<LI>Engines </LI> 5. Engines
<LI>Trainer Aircrafts </LI> 6. Trainer Aircrafts
<LI>Observation Aircrafts </LI>
7. Observation Aircrafts
<LI>Transport Aircrafts </LI>
8. Transport Aircrafts
</OL>

464 Computer Science

Inserting Images And Lists In A Web Page MODULE – 4
Database Concepts, Web
Using TYPE attribute of <OL> tag we can change the type of sequence numbers Designing

<OL Type = 1> <OL Type = I> <OL Type = i>

1. Agricultural Aircraft I. Agricultural Aircraft i. Agricultural Aircraft
2. Fighter Aircrafts II. Fighter Aircrafts ii. Fighter Aircrafts
3. Fighter Aircrafts III. Fighter Aircrafts iii. Fighter Aircrafts
4. Helicopters IV. Helicopters iv. Helicopters
Notes
5. Engines V. Engines v. Engines
6. Trainer Aircrafts VI. Trainer Aircrafts vi. Trainer Aircrafts
7. Observation Aircrafts VII. Observation Aircrafts vii. Observation Aircrafts
8. Transport Aircrafts VIII. Transport Aircrafts viii. Transport Aircrafts

<OL Type = A> <OL Type = a>

A. Agricultural Aircraft a. Agricultural Aircraft
B. Fighter Aircrafts b. Fighter Aircrafts
C. Fighter Aircrafts c. Fighter Aircrafts
D. Helicopters d. Helicopters
E. Engines e. Engines
F. Trainer Aircrafts f. Trainer Aircrafts
G. Observation Aircrafts g. Observation Aircrafts
H. Transport Aircrafts h. Transport Aircrafts

We can also start the ordered list with a number other than 1 using START
attribute of <OL> tag. START attribute can take any integer value with which
we want to start the list. Two examples of lists with START attributes are given
below.
<OL START = 4> <OL Type = A START = 6>
4. Agricultural Aircraft F. Agricultural Aircraft
5. Fighter Aircrafts G. Fighter Aircrafts
6. Fighter Aircrafts H. Fighter Aircrafts
7. Helicopters I. Helicopters
8. Engines J. Engines
9. Trainer Aircrafts K. Trainer Aircrafts
10. Observation Aircrafts L. Observation Aircrafts
11. Transport Aircrafts M. Transport Aircrafts

Notice that START takes an integer value irrespective of the TYPE attribute.

Computer Science 465

 MODULE – 4 Inserting Images And Lists In A Web Page
Database Concepts, Web
Designing Definition List
Definition Lists are used when some terms have to be defined. A definition list
is created using <DL> tag. A definition list contains terms to be defined and
their definitions. Terms to be definied are specified using <DT> tag and the
corresponding definitions are specified using <DD> tag.
An example of a definition list to define some Aviation related terms is given
Notes below:

Fig. 25.4: Definition list

Nesting of lists
In HTML we can nest lists into one another upto any level. An example of a
nested list is given below:

466 Computer Science

Inserting Images And Lists In A Web Page MODULE – 4
Database Concepts, Web
This list is a numbered list (items marked L1) in which each item contains a Designing
bulleted (items marked L2). The third item of the ordered list contains an
unordered list in which each item again contains an unordered list (items marked
L1).
To write the HTML code for this list, we start with <OL> for the numbered
list. The first item of this list contains some text (Programming Languages) and
an unordered list. Therefore, the code goes as follows:
Notes

Like this we can nest any list (Unordered, Ordered, Definition) in any other
(Unordered, Ordered, Definition).

Computer Science 467

 MODULE – 4 Inserting Images And Lists In A Web Page
Database Concepts, Web
Designing Following is an example which combines the concepts of nested lists and images.
The code is followed by the corresponding web page.

Notes

468 Computer Science

Inserting Images And Lists In A Web Page MODULE – 4
Database Concepts, Web
Designing

Notes

Fig. 25.5: Nested list with images

INTEXT QUESTIONS 25.2

1. Fill in the blanks:
a. In an __________ each item is preceded by a sequence number.
b. __________ tag is used to create an unordered list.
c. __________ tag is used to insert item in an ordered or unordered list.
d. By default an ordered list starts with sequence number __________ .
e. Using __________ attribute we can change the bullet types in an
unordered list.

Computer Science 469

 MODULE – 4 Inserting Images And Lists In A Web Page
Database Concepts, Web
Designing 2. State whether the following statments are ture or false:
a. <DT> tag is used to start a definition list.
b. TYPE attribute can be used with <OL> as well as <UL> tag.
c. We can nest an ordered list in an unordered list.
d. Ordered list cannot be nested in a definition list.
e. START attribute is used with <OL> tag.
Notes

WHAT YOU HAVE LEARNT

1. Digital images exist in many different formats.
2. JPG, GIF, and PNG formats of images are generally used n web pages.
3. <IMG> tag along with SRC attribute is used to insert images in a web
page.
4. SRC, ALIGN, BORDER, HEIGHT, WIDTH, and ALT are the attributes
of <IMG> tag.
5. Different types of lists can be inserted in a web page. The types of lists are:
Unordered List, Ordered List, and Definition List.
6. Unordered lists are created using <UL> tag.
7. Ordered lists are created using <OL> tag.
8. <LI> tag is used to insert items in ordered and unordered lists.
9. Attributes of <OL> tag are TYPE and START.
10. Attributes of <UL> tag is TYPE.
11. Definition lists are created using <DL> tag.
12. In a definition list Definition Term is inserted using <DT> tag and Definition
Description is inserted using <DD> tag.
13. Any type of list can be nested in any other type of list.

TERMINAL EXERCISE
1. Name any five digital file formats.
2. When are the following file formats suitable:
JPG, GIF, PNG.

470 Computer Science

Inserting Images And Lists In A Web Page MODULE – 4
Database Concepts, Web
3. Which tag is used to insert images in a web page? How do we specify which Designing
image is to be inserted?
4. How is it possible to change the display size of the image without altering
the original image?
5. What happens if the image to be displayed in the web page is not available?
What is the use of ALT attribute in such a case?
6. What are the different possible values of ALIGN attribute of <IMG> tag? Notes
What are their effects?
7. What are the different types of lists that can be inserted in a web page?
8. Write an HTML code to create the following lists:
Streams
1. Non Medical science
2. Medical science
3. Commerece
4. Humanities
Subjects for Non-Medical Science
English
Computer Science
Physics
Chemistry
Maths

ANSWERS TO INTEXT QUESTIONS

25.1
1. a) JPEG b) GIF c) PNG d) <IMG> e) Pixels
2. a) False b) False c) True d) True e) False

25.2
1. a) Ordered List b) <UL> c) <LI> d) 1 e) TYPE
2 a) False b) True c) True d) False e) True

Computer Science 471