There are many editors out there, that will assist in writing the HTML code for a web page.  However they usually force the user to work with the actual code.  Instead of that, we will be using an editor called Kompozer, which allows you to edit web pages in much the same way as you would edit a Microsoft Word document. This type of editor is called a What You See Is What You Get (or WYSIWYG, pronounced whi-see-wig) editor.  This type of editor probably won't be very useful to a professional web-site creator, but it is great for starting out because it allows you to seamlessly bounce back and forth between the code for the page and a view of the page that you can see what it looks like (and edit it). Once you get the basics down, then you can move on to more advanced design tools.

Kompozer Window

Writing text, formatting

Writing text for your page works in a manner that is very similar to Microsoft Word or Open Office Write.  You type text in the main window, and then use the buttons in the toolbar to format it.

Formatting Toolbars

There are two lines of tools for formatting, located below the main tool bar and above the document.  The first line has the following tools, from left to right:
Text format - This allows you to specify that text is a section header, part of the body of the text, or a few other options. 
Empty Bar - Ignore the next drop down.
Emphasize - Will add emphasis to text (basically the same as italics).
Strong Emphasize - Will add strong emphasis to text (basically the same as bold).
Numbered List - Creates a lits where items are sequential in order.
Bulleted List - Creates a list where items aren't in a particular order, so have bullets in front of them.
Increase Indent - Moves the section of text further to the right.
Decrease Indent - Moves the section of text further to the left.

On the second line are the following tools:
Font - Pick the font you want to use. Be careful with this, as web pages need to be viewed from all computers and not all computers have the same fonts installed. 
Text/Background Color - Pick the color of the text and/or background.
Highlighter - Highlight text
Decrease Text Size - Make text smaller.
Increase Text Size - Make text larger.
Bold - Make text bold.
Italics - Put text in italics
Underline - Put a line under the text.
Left Justify - Make the left side of the text lineup
Center - Make each line of text centered
Right Justify - Make the right side of the text lineup
Align Justified - Stretch the text so that both the left and right sides lineup

Go ahead and write some text about you and some topic that interests you. Use the various formatting tools.

Sample text


Links are the key to any web page. To make a link, select the text that you want to be the link.  Then click the Link button from the main toolbar.  Now you can enter the address of the web page you want the link to go to. This can be a full URL (called "absolute") like http://google.com/MyPage.html or it can be a local URL (called relative) like MyFolder/MyPage.html.  Then click OK.  That's all there is to it!

Now go to your example page that you are creating, and add a link to the Wikipedia page for your topic.



Putting an image in a page with Kompozer is similar to a link.  Click the spot where you want the link to go, then click the image button from the main toolbar.  Here you enter the URL for the image. In addition, every time you put in an image, you should enter the alternate text for the image. This allows people to read what the image is about before it loads and allows people who can't see the web page to still understand what is on the page.

Again adding on to our example page, add an image about your topic of choice.

Adding an Image

So now our final page will look something like this:

Now that we have a complete page, we'll need to save it.  Just click the save button up at the top of the window. This will pop up a dialog asking you what you want the title of your page to be. The title is what will show up in the tab of your browser window, but not actually within the page.

Setting the Title

View Source/Split

One of the most important parts of any web page editor is the ability to look at the code for the page. Because HTML is very complicated and can do many different things, it isn't possible to make an editor like Kompozer that can do everything graphically. Sometimes an author will need to go into the code and make changes because it is the only way to do it. Other times, it is just faster to make changes in the code view. Either way, it is an important feature to have.

There are two different modes for viewing the code in Kompozer.  The first is the Split view. If you look at the bottom of the screen, you will see the split tab between the Design (the view we've been using so far) and Source tabs.  This view will show you just the portion of the code that is relevant to where you have your mouse cursor. Go put your cursor on the line with your link, and then select the Split view.


You'll notice here that you can see the <a href="">...</a> tag for the link, as well as the <p>...</p> tags for this paragraph. This mode is great for editing a small piece of code in the page. 

The final viewing mode for Kompozer is the source mode. This is the most powerful mode, and lets you see all the source for the page at one time. Once you have a good feel for all the tags and code in HTML, it is very easy to use the source mode to make a lot of changes to the page, very quickly. 


You can see in the source view that all the tags are right there, easy to pick out.

That's about all you need to know to make some basic pages using Kompozer.