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 just look through the
tutorial to see what Kompozer is like to see if you want to download
it. You might also want to view "An
Introduction to HTML/XHTML" to get a general idea of how an
HTML page looks in source code. Enough of that. Let's get 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!
Now, 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.
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.
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.
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.
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.
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!
(These instructions are for images stored somewhere besides your computer - such as Eons, photobucket, etc.)
First, get the URL of your picture. If it is a picture stored on Eons or photobucket, then copy the direct link (It will start with http: and end with .jpg, .jpeg, or .gif).
Then, click on the "image" icon next to the "link" icon in the top line of the Kompozer program.
A drop down list will appear that looks similar to the "link" drop down.
Double click the picture.The "image" drop down box will appear again. Note the four tabs at the top of the drop down box.
Now you have an idea of some of the things that you can let Kompozer do for you! Play around with it until you feel comfortable. Try some of the other areas. If you have, questions, post them in The Studio and we'll try to answer.
Tip: You could use Kompozer for posts to the group or write PM's. When you are satisfied with what you have done in Kompozer, change to source view. Then copy what is between the body tags, <body> </body> but not the body tags themselves. Paste the results in the message box on Eons. Preview and then Post.
Note: The message box on Eons is picky so you will need to delete extra line spaces. Just put your cursor in front of whatever is on a line in the body. Then delete until it is on another line. Do this until everything is on one line.
Here are some templates/projects that you might want to play with:
Create a one page "Greeting" or "Special" page - http://ccs.110mb.com/how/TemplateOnePage.html
Create a web page with Pomodora Template - http://ccs.110mb.com/eons/KompPomodoraCSSsame2.html
Create a "Links" File - http://ccs.110mb.com/how/Links.html
Styling your HTML pages - http://ccs.110mb.com/eons/ProjectLinks2CSS.html
Once you get comfortable with this, you might want to make your own web page!
Take a little look at this close up section and find it in your copy of Kompozer.
Recognize any of the icons? Good!
Now, 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!
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.
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: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!
Adding an image
Note: More detailed instructions are in a new file, Adding an Image with Kompozer: http://ccs.110mb.com/how/AddingImageWKompozer.html(These instructions are for images stored somewhere besides your computer - such as Eons, photobucket, etc.)
First, get the URL of your picture. If it is a picture stored on Eons or photobucket, then copy the direct link (It will start with http: and end with .jpg, .jpeg, or .gif).
Then, click on the "image" icon next to the "link" icon in the top line of the Kompozer program.
A drop down list will appear that looks similar to the "link" drop down.
- Paste the URL in the "image location" box
- Put one or a few words to name the picture in the "alternate text" box
- Click OK
Double click the picture.The "image" drop down box will appear again. Note the four tabs at the top of the drop down box.
- The first one is the page where you put the URL. You can see the size of the image has automatically been added to the information in a box on the bottom left.
- The next tab is "Dimensions." You can change the size of the image. Well, you're not really changing the actual size of the picture, but how big it appears to be.
- The "Appearance tab" - You can put spacing around your picture, if you want, by using the boxes on the left. You can align your picture with your text by using the drop down list on the right.
Now you have an idea of some of the things that you can let Kompozer do for you! Play around with it until you feel comfortable. Try some of the other areas. If you have, questions, post them in The Studio and we'll try to answer.
Tip: You could use Kompozer for posts to the group or write PM's. When you are satisfied with what you have done in Kompozer, change to source view. Then copy what is between the body tags, <body> </body> but not the body tags themselves. Paste the results in the message box on Eons. Preview and then Post.
Note: The message box on Eons is picky so you will need to delete extra line spaces. Just put your cursor in front of whatever is on a line in the body. Then delete until it is on another line. Do this until everything is on one line.
Here are some templates/projects that you might want to play with:
Create a one page "Greeting" or "Special" page - http://ccs.110mb.com/how/TemplateOnePage.html
Create a web page with Pomodora Template - http://ccs.110mb.com/eons/KompPomodoraCSSsame2.html
Create a "Links" File - http://ccs.110mb.com/how/Links.html
Styling your HTML pages - http://ccs.110mb.com/eons/ProjectLinks2CSS.html
Once you get comfortable with this, you might want to make your own web page!