Build a web page with SeaMonkey Composer

SeaMonkey Composer is a free graphical interface (WYSIWYG) HTML editor. This tutorial teaches you how to install SeaMonkey and build a simple web page for your homework assignments.

Download and Install SeaMonkey

SeaMonkey can be found here: http://www.seamonkey-project.org/releases/.

Download and install SeaMonkey. Don't forget to *always* virus check any program that you download.

If you are not going to use the Mail and Newsreader (for email and subscribing to newsgroups) or Chatzilla (for chatting online), choose "Custom" and UNcheck those options during the install process.

Create a homework directory

If you don't already have a homework folder on your hard drive, create one now. You will save all your homework images and web pages into this folder.

Create a subfolder on your hard drive called "homework" or something else that you will remember; perhaps the name of your course such as "photoshopintro" The best place to create this subfolder is likely in the Folder called "My Documents"

This new folder is where you'll save your html pages and your assignment images so that the paths in the code that SeaMonkey generates is correct and your images will show up on the web page. When saving files for the web, use all lowercase letters and no spaces in the file name. This will save you a lot of headaches later. :)

Create the web page

Start SeaMonkey. The browser (navigator) will open.
Open the Composer. Click on "Window" on the menu bar and choose "Composer" from the drop down menu.

It will automatically begin a new document for you.
Save the document. Go File > Save.

Type a name for your page: week1 for example if this is the page for your week 1 homework and click the "OK" button.

Navigate to the folder you created for your homework and click the "Save" button.
Create a heading for your page. Click the little arrowhead beside "Body Text" to open the dropdown menu and choose "Heading 1".

If you'd like to center this heading, click the "Align Center" button.

Type the heading for your page, then hit the "Enter" key on your keyboard to drop down to the next line for the next item we'll add to the page. Notice that the area we changed to "Heading 1" earlier has reverted back to "Body Text".
Type some text for your page. Just start typing in the editor window and you'll see your text appear on the page. When you're done typing, hit the enter key a couple of times to give you some space and we'll add an image.
Add a picture to your page. Click the "Image" button to open the dialog box.
1. Use the "Choose File" button to navigate to your homework folder and choose the image you want to embed here. When you've found it, select it and click the "Open" button. The "Select Image File" dialog will close and the "Image Properties" dialog box will open.
2. Make sure that the "URL is relative to page location" box is CHECKED.
3. Add your alt text. Use this area to give a brief description of your image.
Click the "OK" button to complete the process. The dialog box will close and your image will be embedded on the page. However, the image never shows for me when I first do this so if you don't see your image, follow the instructions below to fix that.
- Save the page by clicking on the "Save" button and then close the Composer window by clicking on the little red X in the upper right corner.
- Now re-open Composer as we did earlier in this tutorial or by clicking on the little Composer button in the bottom left corner of the SeaMonkey Navigator.
- Re-open the page by going File > Recent Pages and choosing it from the list.
- The image will appear and you can continue adding more text and/or images to your page. Click once after your image and then hit the "Enter" to get to a new line before adding your new text or image.
Don't forget to save often. If anything happens and your computer locks up or the program stops responding, you'd lose all your hard work unless you've been saving as you go along. :)
Upload your files. Be sure to upload both the html document *and* the image files to your online web site. If you are using the LVS student hosting (either free or paid) follow the instructions given in the hosting tutorial. If you are using web space somewhere else, it is assumed that you know how to upload there.

Pretty up your page

You can change the colors and size and font-family of your text if you want to play more once you've got the basics down.

Change the color of your text. Select some of the text in your document by running your cursor across it. When it is highlighted, click the little square at the top of the color picker button. It will be black right now because that is the color of your text. When you click it, the "Text Color" picker will open and you can choose a new color for the text that is selected.
Change the background color of your page. You change the background color of the page by clicking on the other square in that button. The "Block Background Color" picker opens and you can choose a new background color for your page. Please make sure that the color of your text and background color of your page have enough contrast to make for easy reading. :)
Change the background color of selected text. Use the highlight button to change the background color of text that is selected if you want to highlight just a sentence or a word.
Change the size of your text. Select the text you want to change the size of, and use the buttons with the letter A and up or down arrows to change the size of your text.
Change the font-family of selected text. Select the text you want to change and go Format > Font on the Menu bar. Choose the font you want to use from the list of fonts that appear. Remember that not all computers have all the fonts that you might have. It is best to stick with the most common ones such as Arial, Helvetica, Times New Roman so that others will see the same text that you do. If a visitor doesn't have the font that you've chosen, his/her browser will show your text in their default text.
Change text to Bold, Italics, or Underlined Use the B, I, and U buttons to change selected text to the chosen style.

This concludes the tutorial on building a page with SeaMonkey. I hope you have enjoyed it and learned something. There are more features in this program that you can check out as you become more comfortable with it. Have fun!