1. INTRODUCTION TO KompoZer
(HTML Editor)
Workshop
on
Multimedia Content Development
In Collaboration with
Commonwealth Educational Media
Centre for Asia (India)
Date: 05-09 Feb., 2011;
Venue: Bangladesh Open University, Gazipur.
By
David Asirvatham, PhD
University of Malaya

2. HTML Editor: KompoZer
1.0 What is HTML Editor?
HTML Editor is an application
package that assists in the creation of
web pages. Earlier, the Notepad was
used as an editor and it is limited in
its functionalities. KompoZer is an
open source WYSIWYG HTML 1 2 3 4
editor. It is a complete Web
Authoring System and it integrates
with web page development and web
file management. It is easy to use
and improve the productivity of
designing web pages.
In this module, you will learn to
create simple web pages using the
KompoZer. The diagram shows the
layout of KompoZer.
You can download KompoZer
from http://www.kompozer.net 5 6 7
Overview:
1. Menu Bar
2. Composition Toolbar
3. Format Toolbar
4. Page Tab
5. Site Manager
6. Page Area
7. Edit Mode Toolbar
David Asirvatham® Page: 2

3. HTML Editor: KompoZer
2.0 To create a web page:
1 4
1. To create a new page, select File
-> New
2. Select “A blank document”
3. Type the text the below in the
Page Area:
Teeth
Teeth are among the most
distinctive (and long-lasting)
features of mammal species.
Paleontologists use teeth to identify
fossil species and determine their
relationships. The shape of the
animal's teeth are related to its
diet. For example, plant matter is
hard to digest, so herbivores have
many molars for chewing and
grinding. Carnivores, on the other
hand, need canines to kill prey and
to tear meat. 3
4. Once you completed, save your
file: File -> Save As
5. Select a folder and give a
filename: teeth
5
David Asirvatham® Page: 3

4. HTML Editor: KompoZer
3.0 To format the text:
1. To Bold the title (Teeth), 2
select/highlight the title using
the mouse
2. Select the Colour and Font Size.
3. To align the text, highlight the
entire paragraph and select the
align button.
4. Save your file
1
3
4
David Asirvatham® Page: 4

5. HTML Editor: KompoZer
4.0 To insert an image:
1. Before you insert an image, you 2
will need to download or copy
the image to the current folder.
The web page and the image
must be in the current working
folder.
2. Select the Image icon. The
Image Property panel will appear.
7
3. Select the image that you want to
insert. Select the folder icon
followed by the image filename.
3
4. You will be able to view the
image in the panel.
5. Type the Alternate text as
“Smile”
6. Select OK and the image will be
inserted into the text.
7. To view it in the Browser, select
Browse.
4 5
David Asirvatham® Page: 5

6. HTML Editor: KompoZer
5.0 To create Table in web
pages: 1
1. Open a new file.
2. Type a title:
Types of Teeth
3. Change the colour and font size
of the title.
4. To insert a table, place the curser
at the position where you want
the table, and select Table
3 2
5. Select 5 rows and 2 columns by 4
highlighting with your mouse.
6. Select OK and the table will be
inserted.
7. Save your file.
5
David Asirvatham® Page: 6

7. HTML Editor: KompoZer
6.0 To insert data into the 1
table:
1. To merge the first two columns
of the first row, highlight the
first row by selecting the cells.
2. Right click the mouse to view
the menu.
3. Select Join Selected Cells
4. Type the text below in the first
row:
Man is omnivorous, so his teeth 3
are formed for cutting, tearing, and
grinding food. The human 4 5
permanent dentition is divided into
four classes of teeth based on
appearance and function or
position.
5. To change the background colour
of the cell, Right Click in the
first row and select Table or Cell
Background Color.
6. Select a suitable colour from the
panel.
7. Save your file. 6
David Asirvatham® Page: 7

8. HTML Editor: KompoZer
7.0 To insert images into the
table:
1. Place the cursor in the second
row first column.
2
2. Select the Image icon. The
Image Property panel will appear.
3
3. To select the image that you
want to insert, select the folder
5
icon followed by the image
filename.
4. You will be able to view the 6
image in the panel.
5. Type the Alternate text as
“Bicuspid”
6. Select OK and the image will be
inserted into the text.
7
7. The image will be inserted into
the table.
8. Repeat the steps to insert the
other images too.
8
David Asirvatham® Page: 8

9. HTML Editor: KompoZer
8.0 Insert text into table:
1. Insert the following text into
each row.
Incisors--Incisors are named
because they are used to incise
food. They are located in the front
of the mouth and have sharp, thin
edges for cutting.
Cuspids--cuspids, also referred to
as canines, are at the angles of the
mouth. Each has a single cusp in
stead of an incisal edge and are
designed for cutting and tearing.
Bicuspids--Bicuspids, also referred
to as premolars, are similar to the
cuspids. They have two cusps used
for cutting and tearing, and an
occlusal surface that is wider to
crush food.
Molars--Molars are located in the 1 2
back of the mouth; their size
gradually gets smaller from the
first to third molar. Each molar
has four or five cusps, is shorter
and more blunt in shape than other
teeth and provides a broad surface
for grinding and chewing solid
masses of food.
2. Do the necessary formatting.
David Asirvatham® Page: 9

10. HTML Editor: KompoZer
9.0 Exercise
1. Develop a web page that discusses about the heart and how blood is
circulated in the heart.
2. Use the text and diagrams provided. You may select your own style and
design of the web page.
3. Use tables if necessary.
4. Format all the text so that it is neatly presented.
5. Save your file.
David Asirvatham® Page: 10