Html editor v3


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html editor v3

  1. 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. 2. HTML Editor: KompoZer1.0 What is HTML Editor?HTML Editor is an applicationpackage that assists in the creation ofweb pages. Earlier, the Notepad wasused as an editor and it is limited inits functionalities. KompoZer is anopen source WYSIWYG HTML 1 2 3 4editor. It is a complete WebAuthoring System and it integrateswith web page development and webfile management. It is easy to useand improve the productivity ofdesigning web pages.In this module, you will learn tocreate simple web pages using theKompoZer. The diagram shows thelayout of KompoZer.You can download KompoZerfrom 5 6 7Overview:1. Menu Bar2. Composition Toolbar3. Format Toolbar4. Page Tab5. Site Manager6. Page Area7. Edit Mode ToolbarDavid Asirvatham® Page: 2
  3. 3. HTML Editor: KompoZer2.0 To create a web page: 1 41. To create a new page, select File -> New2. 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 animals 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. 34. Once you completed, save your file: File -> Save As5. Select a folder and give a filename: teeth 5David Asirvatham® Page: 3
  4. 4. HTML Editor: KompoZer3.0 To format the text:1. To Bold the title (Teeth), 2 select/highlight the title using the mouse2. 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 4David Asirvatham® Page: 4
  5. 5. HTML Editor: KompoZer4.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. 73. Select the image that you want to insert. Select the folder icon followed by the image filename. 34. 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 5David Asirvatham® Page: 5
  6. 6. HTML Editor: KompoZer5.0 To create Table in web pages: 11. Open a new file.2. Type a title: Types of Teeth3. 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 25. 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. 5David Asirvatham® Page: 6
  7. 7. HTML Editor: KompoZer6.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 Cells4. 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. 6David Asirvatham® Page: 7
  8. 8. HTML Editor: KompoZer7.0 To insert images into the table:1. Place the cursor in the second row first column. 22. Select the Image icon. The Image Property panel will appear. 33. 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. 77. The image will be inserted into the table.8. Repeat the steps to insert the other images too. 8David Asirvatham® Page: 8
  9. 9. HTML Editor: KompoZer8.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. 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