IINNTTRROODDUUCCTTIIOONN TTOO KKoommppooZZeerr ((HHTTMMLL EEddiittoorr))

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

HTML Editor: KompoZer

David Asirvatham® Page: 2

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 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 Overview: 1. Menu Bar 2. Composition Toolbar 3. Format Toolbar 4. Page Tab 5. Site Manager 6. Page Area 7. Edit Mode Toolbar

1

5 6 7

2 3 4

HTML Editor: KompoZer

2.0 To create a web page: 1. To create a new page, select File

-> New

2. Select “A blank document”

3. Type the text the below in the Page Area:

4. Once you completed, save your

file: File -> Save As

5. Select a folder and give a filename: teeth

1 4

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

5

David Asirvatham® Page: 3

HTML Editor: KompoZer

3.0 To format the text:

1. To Bold the title (Teeth),

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

2

1 3

4

David Asirvatham® Page: 4

HTML Editor: KompoZer

4.0 To insert an image:

1. Before you insert an image, you

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.

3. Select the image that you want to

insert. Select the folder icon followed by the image filename.

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.

2

3

7

4 5

David Asirvatham® Page: 5

HTML Editor: KompoZer

5.0 To create Table in web

pages:

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

5. Select 5 rows and 2 columns by

highlighting with your mouse.

6. Select OK and the table will be inserted.

7. Save your file.

1

3 2

4

5

David Asirvatham® Page: 6

HTML Editor: KompoZer

6.0 To insert data into the

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:

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.

3

1

Man is omnivorous, so his teeth are formed for cutting, tearing, and grinding food. The human permanent dentition is divided into four classes of teeth based on appearance and function or position.

4 5

6

David Asirvatham® Page: 7

HTML Editor: KompoZer

7.0 To insert images into the

table:

1. Place the cursor in the second

row first column.

2. Select the Image icon. The Image Property panel will appear.

3. To select the image that you

want to insert, select the folder icon followed by the image filename.

4. You will be able to view the

image in the panel.

5. Type the Alternate text as “Bicuspid”

6. Select OK and the image will be

inserted into the text.

7. The image will be inserted into the table.

8. Repeat the steps to insert the

other images too.

2

3

5

6

7

8

David Asirvatham® Page: 8

HTML Editor: KompoZer

8.0 Insert text into table:

1. Insert the following text into

each row.

2. Do the necessary formatting.

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.

1 2 Molars--Molars are located in the 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.

David Asirvatham® Page: 9

David Asirvatham® Page: 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.