Skip to Main Content or Page Contents

HTML Tutorial using KompoZer Web Editor

How to
1. How to Use the KompoZer Web Editor in conjunction with this HTML & CSS Tutorial.
2. Make you First Web Page

Results per page:

Match: any search words all search words

This Page's Contents

  1. KompoZer Pros & Cons
  2. Initial KompoZer Web Editor Setup
  3. Creating a New Web Page with KompoZer

1. KompoZer Pros & Cons

Critique of KompoZer Pros

  • Its FREE
  • The editor is reasonably easy to use
  • It has a good range of features. Extremely good for a free editor.
  • Its a WYSIWYG web editor
  • KompoZer Tutorials & Videos available on the web

Critique of KompoZer Cons

  • Active development has stopped. No more updates.
  • You have to manually update the DOCTYPE to <!DOCTYPE HTML>
  • KompoZer inserts extra i.e. not required line breaks <br> tags when pressing Enter.
    • These extra <br> tags can be removed using the Markup Cleaner in the Tools Menu
  • The HTML tags mode does not display <br> tags
  • It has not been updated for several years
  • KompoZer occasionally crashes. Save your work frequently to save losing it.
  • The Split Screen does not work very well
  • Version 7 the version I use for this tutorial has a few bugs in it.
  • Version 8 a beta version tends to be less stable than version 7.

2. Initial KompoZer Web Editor Setup

In KompoZer

Ensure the following setting are as follows

  1. Tools > Preferences
  2. In Options Window Click General
    1. Maximum number of pages listed. enter 10
    2. Select Retain original source formatting
    3. Tick Maintain table layout when inserting or deleting cells
    4. Use CSS styles instead of HTML elements & attributes
    5. Always open a document in a new tab
    6. Use system icons
  3. Still In Options Window Click Advanced
    1. Markup Select HTML 4 & Strict
    2. Tick Return in a paragraph always creates a new paragraph
    3. Ticking Underline misspelled words SLOWS the performance of KompoZer using it's American Spelling Checker
    4. Special Characters Select HTML 4 special characters
  4. Click OK

2. Create a New Web Page with KompoZer Web Editor

 

Video of KompoZer Web Editor



 

 

Before Starting it's advisable to carry out the Initial KompoZer Web Editor Setup instructions above.

  1. Open KompoZer
  2. On opening a Tool Tip Pops up, read & Close
  3. Click File > New
    In the Create a new document
    1. Select A blank document and ensure Strict DTD tick is ticked
    2. Create in: New Tab
    3. Click Create
  4. Click the Source button ( below the large blank window)
    1. View the source code
      1. Note that there is no content in both the <title> & <body> tags. 
      2. Content will now be added
  5. Click the Preview button
  6. Click Format (Near top of window)
    1. Mouse down to Paragraph slide over to the right
    2. Click Paragraph
  7. In the Large blank Design Window Type in or Copy from the Tutorial & Paste into Kompozer design Screen
    Your Page CONTENT goes here and is in a Paragraph
  8. Click Format > Page Title and Properties
  9. In the Page Properties window
    1. Type or Paste in
      Your Page TITLE goes here
  10. Click OK
  11. Click the Source button ( below the large blank window)
  12. View the source code it should look like this:


  13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" 
http-equiv="content-type">
  <title>Your Page TITLE goes here</title>
</head>
<body>
<p>Your Page CONTENT goes here and is in a Paragraph<br></p>
</body>
</html>
  14. Note that
    1. Your Page TITLE goes here
      has been placed within the <title> tags and
    2. <p>Your Page CONTENT goes here and is in a Paragraph</p>
      between the <body> tags as follows
    3. KompoZer - annoyingly often adds a <br> line break tag. These can be removed by using:
  15. Click File > Save as
    1. In File name:
      ALTER the suggested name probably
      Your Page TITLE goes here.html
      to
      index.html
      Note: File names in HTML should never contain spaces
    2. Choose the folder you created which I suggested as:
      C: > Users > Your User Name >my-first-web-pages
    3. Click Save button

KompoZer Create a New Web Page

 

The above creates a document that is similar to our lesson

  2. compare it with our tutorials code of 
     

© tutorials4u.com
HTML Tutorial by John McGuinn.