skip to content
.
logo picture logo text
Return to the Practice Menu

SeaMonkey Composer Intro.

This is written as if you had downloaded a copy of SeaMonkey browser and composer (It's free) and are ready to learn how to use it. But you can just look through the tutorial to see how it works. You might also want to view  "An Introduction to HTML" to get a general idea of how an HTML page looks in source code. Enough of that. Let's get started.

Opening a Composer Page

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

Then you go to File --> New --> Composer Page.  If you are already in the composer section and want to start a new page, the choice for Composer Page will be at the top of the drop down menu.


new page

SeaMonkey composer is not that much different from another HTML editor: Kompozer. SeaMonkey doesn't have as many choices as Kompozer. Here's it's tool bar:


Seamonkey
              toolbar left

At first glance, the tool bars look very similar to the tool bars in a word processor. Recognize any of the icons? Good!

Looking at the Source code

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 SeaMonkey. It will be in the bottom left corner. Sea Bottom

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.

Choosing a "container"

Look at the menu in the SeaMonkey Composer page. Look to the far left and you'll see "Body Text" on the bottom row.

Seamonkey
              toolbar left
Body Text

Type "This is a heading" in the white box (composing window) on the Composer page.  Go to "Body Text" in the menu and click on it.  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. "This is a heading" 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.

Color Choices

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

Look at the menu in your SeaMonkey composer program and find the two boxes just to the right of "Body Text". Click on the black box.

Seamonkey
              toolbar left

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!
Color Choices

Changing Fonts and Text

Generally, most choices for font will be made in the external CSS style sheet. However, we will look at some choices that can be done with SeaMonkey for the rare times you might want to style just one word or a few words. Later, you can learn how to do this with CSS classes.

At the very top of the SeaMonkey Window, you will see:

Sea Monkey   File   Edit   View   Insert   Format   Table   Tools   Window    Help

When you click on Format, you will have choices to change the font, the font size, the text style and text color. 

You can also make some of these changes using the tool bar. On the last line, just to the right of the two color boxes, you will see a little A, (makes text smaller) a bigger A (makes text larger) a B (bold) a slanted I (italics) and and underlined U (underline)

Seamonkey
                toolbar left

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. 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 SeaMonkey page that you are going to link FROM.

Look on the top line of the SeaMonkey toolbar. Find the word "Link".  Click on "Link"

SeaMonkey
                toolbar right

A drop down box appears: (Actually, this is a picture from Kompozer, but it will look similar.)

link
                      window
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.


Adding an image

There are two ways to add images - with relative links or with direct links. Usually, when you are creating a website, you will organize your folders on your computer in the same way as you will have them on your web host. Generally, you will have the images that you are going to use in a folder called "images" inside your website folder on your computer. When you upload your website, you will create a directory (folder) called images and upload all your images to that folder. Most folks will then use relative links to the images so that it will be easier if you have to move your website.

Relative links

Click on the "image" icon next to the "anchor" icon in the top line of the SeaMonkey toolbar.

SeaMonkey
                toolbar right

A drop down list will appear that looks similar to the "link" drop down.
  • Click on the folder icon that is on the right of the "image location" box
  • Navigate to the image folder within your website folder
  • Click on the picture you want to use and click "OK"
  • Put one or a few words to name the picture in the "alternate text" box
  • Click OK

Now you have a picture on your page. You can make some choices about styling the image with SeaMonkey (See direct links), but it's best to use CSS if you are creating a website.

Direct Links

Generally, direct links to images are not used when creating websites. However, there could be times you'd need to use a direct link such as in a custom 404 error page or on a social networking site that allows HTML.

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 "anchor" icon in the top line of the SeaMonkey toolbar.

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

If you are creating code to use in a message on Eons or another HTML site, you might want to add some style. There are a few things you can do. 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. 
Play around with it a bit. As you make changes, you can look at the source and see how those changes are written in HTML. (Bottom left ---->Click on Source;  To return to normal view, click on normal)


Now you have an idea of some of the things that you can let SeaMonkey do for you! Play around with it until you feel comfortable. Try some of the other areas. 

Tip: You could use SeaMonkey for posts to the group or write PM's. When you are satisfied with what you have done, 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.

Here are some templates/projects that you might want to play with:

   Create a one page "Greeting" or "Special" page
   Create a web page with Pomodora Template
   Create a "Links" File
   Styling your HTML pages

Have Fun!