Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
Unit III: Working with Kompozer
Working with Kompozer
KompoZer, an open source html editor.
This is a very basic and lightweight program that will allow you to edit your webpage if you do not have
access to Adobe Dreamweaver.
It is considered a what-you-see-is-what-you-get (WYSIWUG) html publisher.
It utilizes a "publish" tool that will upload your files automatically, instead of you having to manually
copy and paste updated documents to your public web page folder location.
Installing and Launching KompoZer
1. To download KompoZer on your home computer, visit http://kompozer.net/ and download the correct
version for your operating system (Windows, Mac OS X, Linux).
2. To host your web page on the HSU UserWeb, visit http://www.humboldt.edu/its/web-users-connect and
follow the instruction closely.
3. Unzip this file, and click on the KompoZer application to launch
Department of Computer Engineering Page 1
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
Creating an HTML File in KompoZer
In the KompoZer window...
1. Type "ABC123 GIS Portfolio" (insert your desired name instead of "ABC123") into the large text
window under the tab "Untitled".
2. Click on "File" and then "Save"
3. A window requiring a title for your web site will pop up (example: "Smith GIS Portfolio")
Department of Computer Engineering Page 2
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
4. Type in your desired title and click "OK
5. Create a folder for web page files (example: "Web Portfolio")
6. Navigate to this new folder
7. Type the file name "index.html" and click "Save"
Department of Computer Engineering Page 3
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
Your KompoZer window will not display your webpage name
Publishing your Web Page
1. Select "File" and then "Publish"
Make sure you have the following website information:
1. HTTP Address
2. Publishing Address
3. Username and Password (assigned by web host/HSU)
2. Connecting to public_html
3. Click the "Publish" button
Department of Computer Engineering Page 4
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
KompoZer will publish your page to your public_html folder
If you wish to change the settings entered in the publish page window, click on "Edit" and "Publish Site
Settings" to make those changes
4. Test your web page
Open an internet browser (Google Chrome, Mozilla Firefox, etc.)
Type your website address (example: http//users.humboldt.edu/abc123)
If you followed the previous stpes, your web page should load.
Changing the Style (Font/Size/etc.) of Your Web Page
1. Highlight all of the text "ABC123 GIS Portfolio")
(Hold CTRL+A to select all)
Click on "Format" on the toolbar
Select "Font
Department of Computer Engineering Page 5
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
Formatting your Web Page Content
1. Designate the text in your main text window as the "header" of your first paragraph:
Click on "Format" -> "Paragraph"
Select "Heading 1"
For smaller subsections of your web page, you can choose to use Heading 2.
If you need further subsections, use Heading 3 only after using Heading 2.
This will keep it organized and easy to edit later on.
Select "File" then "Save"
Creating Lists
Adding bulleted or numbered lists in Kompozer is similar to doing so in Microsoft Word.
1. Type your first item into the Kompozer window
2. Highlight the line, and select "Format" -> "List" -> and either "Bulleted" List, or "Numbered" List.
Department of Computer Engineering Page 6
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
3. You can hit "Enter" on your keyboard to type the next list item.
4. Hit "Enter" twice to end the list.
5. You can have multiple lists of different types.
Department of Computer Engineering Page 7
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
Adding Images to your Web Page
1. To add images to your portfolio/web page, create an "Images" folder in the same place as your
"index.html" file.
2. Copy the images you wish to add to your web page to this new "Images" folder.
3. Place your cursor where you would like to add the image (example: before your web page title)
4. Select "Insert" -> "Image"
5. Navigate to your image file location
Department of Computer Engineering Page 8
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
1. Select your image file (.jpeg, .png, etc.) and click "Open"
2. You'll need to enter "Alternate Text" for those that cannot see the image in the web browser
3. Click "OK"
Adding a Link to your Web Page
1. Place your cursor where you want your link to be added
Select "Insert" -> "Link"
Department of Computer Engineering Page 9
Subject Name: Static Webpage Design Unit No: III Subject Code: 4311603
Type "Home" in the "Link Text" field
Navigate to your "index.html" file and select it for the "Link Location" field.
Click "OK"
2. Repeat these steps to create links to other pages you want to have on your website (example: Labs,
Resume or CV, Contact Information, etc.)
You will need to create new .html files (example: resume.html) located in your web page folder
to link to these pages
Department of Computer Engineering Page 10
