skip to content
logo picture logo text

Return to the Practice Menu

Kompozer Intro.

This is written as if you had downloaded a copy of Kompozer (It's free) and are ready to learn how to use it. But you can look through the tutorial first, if you want, to see what Kompozer is like and to decide if you want to download it. 

Getting Started:

Open Kompozer.  (Well, duh!)  You can go back and forth between this tutorial and Kompozer as you work.

Don't worry. The pictures get better!

 At first glance, the tool bars on Kompozer look very similar to the tool bars in a word processor. You'll recognize many of the functions.

Take a little look at this close up section and find it in your copy of Kompozer.

Recognize any of the icons? Good!

Toggle Between Normal View and Source View:

Write a few words in the big white box. Anything at all.

Next, take a look at this close up section. Find it in your copy of Kompozer. It will be in the bottom left corner.

Click on the word Source. The view changes so that you can see how the HTML is written. Now, how cool is that?!?

Click on the word Normal and you will go back to the normal view.

Now for some fun!

Body Text      Put your cursor somewhere in the writing.  Look at the far left of the middle row at the top of the Kompozer Window and find "Body Text." Click on it and a drop down list appears. There is an check mark by Body Text right now. Click on Heading 1. Your writing changes size and the title of the drop down list changes.

     Look back down at the bottom left. Click on Source and see how the HTML has changed. Whatever you have written now has the beginning heading tag <h1> in front of it and the closing heading tag at the end.</h1> You have just changed the body text to the biggest heading size!

     Try each of the other Heading Sizes. Look at the Source each time also to see how the HTML changes.  (Remember - bottom left -->Source to see the source code; --> Normal to see the normal view)

Try Paragraph also and see what changes. Don't worry about address or preformat for now.

     Click on Body Text to get ready to play in the next section.

Color Choices

Go to Edit --> Select all or Click and drag to highlight your text.

Look in the third line in your Kompozer program and find the two boxes just to the right of "Variable Width:. Click on the black box.
Font Bar

Color Choices
 A drop down list will appear like the one at the right.

Click in one of the little boxes. The information under the little boxes will change.

Click OK

Click somewhere on the page to remove the highlighting on the words. Your text color has changed to the color you chose.

We are learning some HTML, too, remember, so go down to the bottom left corner and click on source. Look in the body section and you'll see something similar to this:

<span style="color: rgb(153, 0, 0);">What you wrote</span><br>

The numbers will be different and the words you wrote, most likely will not be "What you wrote", but will be the actual words you wrote - well, you get the idea!

Play around with it a little, highlighting the words and changing the colors. Try clicking on the other screen and see what happens. Remember to look at "source" and see how the HTML changes.

Changing Fonts

Look at that third line again:

Font Bar

If you click on "Variable Width", a drop down list of your fonts shows up. The best way to choose the fonts for a web page is to use css, but for right now, just play around with highlighting the words you have written and then clicking on a font. Look at the changes in the "source" code, also. (Remember, bottom left corner --> click on source.)

The smaller "a" will change the test size to a smaller size. The larger "A" will change the text to a larger size.
The B will make the text bold
The slanted I will put the text in italics
The underlined U will cause the text to be underlined.

The next four choices will change the alignment.

Remember, you have to have the text highlighted for the changes to take place. Also, don't forget to check how the "source" code changes. Does any of that look familiar? Compare it to the Common HTML/XHTML tag file, if you want, or insert some of the tags while you're in the "source" view. Notice, everything you've been doing is showing up in the <body> section.

Adding links

to pages for the web (Includes adding links to Eon's groups, posts made in groups, or other things public on the web)

First you need to have the URL that you want to link to. Go to the group, group post or website that you want to link to. Copy the URL from the address box of your browser when you are on that page. 

Next, highlight the words in your Kompozer page that you are going to link FROM.

Look on the top line of the Kompozer program to the right of the middle of the line. Find the word "Link".  Click on "Link" and the following drop down box appears:

The words that you highlighted will appear in the Link Text box automatically. You could not highlight anything and put words such as "view link" or "Click here" in the Link Text box.

Paste the link to the URL you want to link to in the Link Location box.

Then, click on OK.

You've just linked to a web site, post, or group. Go down to the bottom left hand corner and click on source to see how it is written in HTML.

Aren't you smart!

This exercise is continued in "Adding an Image with Kompozer" If you prefer, you can Return to the Practice Menu.