An HTML editor is a software application for creating web pages. Although the HTML markup of a web page can be written with any text editor, specialised HTML editors can offer convenience and added functionality. For example, many HTML editors work not only with HTML, but also with related technologies such as CSS, XML and JavaScript. In some cases they also manage communication with remote web servers via FTP .

Below you can find some of the better free HTML editors :

Mozilla Composer
Mozilla’s HTML editor keeps getting better with dynamic image and table resizing, quick insert and delete of table cells, improved CSS support, and support for positioned layers. For all your simple documents and website projects, Composer is all you need.
Download here http://www.mozilla.org/products/mozilla1.x/

You can find our Mozilla tutorials here http://tutorials.ausweb.com.au/hosting/Tutorials/Website-Builder-Webpage-Editor/

Seamonkey
The SeaMonkey project is a community effort to deliver production-quality releases of code derived from the application formerly known as “Mozilla Application Suite”. Whereas the main focus of the Mozilla Foundation is on Mozilla Firefox and Mozilla Thunderbird, our group of dedicated volunteers works to ensure that you can have “everything but the kitchen sink” — and have it stable enough for corporate use.
Download here http://www.mozilla.org/projects/seamonkey/

Coffecup
Download here http://www.coffeecup.com/free-editor/

Aptana
Aptana is a robust, JavaScript-focused IDE for building dynamic web applications. Highlights include the following features:
Download here http://www.aptana.com/download_all.php

1st Page 2000
1st Page 2000 2.0 is the tool that lets you create powerful, great looking websites faster, easier and on-time. Once you use 1st Page 2000, you’ll never turn back to old notepad or any other html editing software.
Download here http://www.evrsoft.com/download.shtml

How to Design and Publish Your Website with Mozilla Composer

This article guides you through the steps of creating your first web site using Composer which is part of the Mozilla Suite. Mozilla Suite is a web browser, advanced email and newsgroup client, IRC chat client and HTML editing made simple — all your Internet needs in one application.

What You Will Need

You will need the following for this tutorial.

1. You need to have Mozilla Composer (obviously). This is a free WYSIWYG (What You See Is What You Get) web editor that comes with the Mozilla Suite. Simply download the Mozilla Suite from http://www.mozilla.org/products/mozilla1.x/, install it and you will have Composer on your system. There are versions of the Mozilla Suite for a multitude of platforms, including Windows, Macintosh, Linux, etc. Get the appropriate one for your system. Note that the Mozilla Suite is not the same as Mozilla Firefox. The latter is standalone web browser; the Mozilla Suite, on the other hand, includes a browser, an email and newsgroup client, an IRC chat client, and an HTML editor (Composer). You will need to download the Mozilla Suite for Mozilla Composer even if you are already using Firefox.
2. You will need a web host to publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which has computers that are permanently connected to the Internet. After you design your web page(s), you will need to transfer your pages to your web host’s computer (called a web server), so that the rest of the world can see it. WE highly recomend VERSION-NEXT for all your hosting needs.

There are other things involved in getting your first web site up and running, such as getting your own domain name and promoting your web site. This tutorial however does not deal with those matters – it is strictly about designing (creating) and publishing (uploading) your website using Mozilla Composer.

Overall Goals of this Tutorial

By the end of this tutorial, you will have set up a working website with multiple pages, including a main page, a feedback form, a Reciprocal Links page, an About Us page, and a Site Map. Your pages will contain images, multiple columns, a form, links to other pages within your site, links to other sites, text in different font sizes, etc. In other words, you will have a fully functional website.

More importantly, you will know how to use Mozilla Composer to create, design and publish your site so that you can design new sites any time you want.

Goal of this Chapter

In this chapter, you will learn to create a rudimentary web page and publish it so that it can be accessed on the Internet. By the end of this chapter, you will be viewing your web page on the Internet with your favourite web browser.

Starting Up Mozilla Composer

We will start off by creating a rudimentary web page. Don’t worry, we will polish it as we go along.

Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand it, you need to follow the steps as I describe them. The practical nature of this guide makes it difficult to follow or understand if you’re not doing the things mentioned.

Start up Mozilla Composer. You do this by first starting up the Mozilla web browser, then clicking the “File” menu, the “New” item on the menu that appears, and the “Composer Page” item that appears on the submenu. A new window should appear. This is the Composer window – the portion of Mozilla that lets you design your own web pages.

For convenience, in future, I shall write the sequence of clicking “File” then “New” then “Composer Page” simply as:

This means you are to click the “File” menu, followed by the “New” item, followed by the item “Composer Page”. There are actually shortcuts to starting Composer from Mozilla (as there are for many of the commands given in this tutorial), but I will leave the discovery of minor things like that to you and concentrate on the main task of creating a web page.

Creating A Simple First Web Page

To give you an idea how simple it is to create a web page, type the following into the Composer window. You don’t have to do anything special – just start typing. Note: you can type whatever you wish – I’m just furnishing you a block of text as an example. For ease of explanation, though, I will assume that you have typed the text here in the rest of the tutorial. (But don’t let that stop you from being creative.)

When you type, you are typing into Mozilla Composer’s “Normal” mode. You can see which mode you are using by glancing at the series of tabs at the bottom of the Mozilla Composer window.

To see how your page appears in an actual web browser, click the “Preview” tab to enter Mozilla Composer’s “Preview” mode. Return to the “Normal” mode before continuing. I shall assume that you are using the “Normal” mode in this tutorial unless otherwise specified. The “Normal” mode is Composer’s WYSIWYG editor mode. When you type text in this mode, Mozilla converts it into a HTML web document behind the scenes so that web browsers can recognize it as a web page. If you want to look at the HTML code that is generated from what you just typed, click the “HTML Source” tab at the bottom of Mozilla Composer. Remember to return to the “Normal” mode when you’ve finished admiring the code.

Now save the page onto your hard disk. Do this with “File | Save”. Remember – this means click the “File” menu followed by the “Save” item on that menu.

A dialog box will pop up, asking you to give a title to your page. Since this is the main page of your website, you should enter the name of your website here. For example, if you are publishing a personal web page, you might want to name your website “Shakespeare’s Website” (without the quotes) if your name happens to be Shakespeare. If you are publishing a company web page, the site name should be your company’s name, such as “XYZ Company” or the like.

Once you’ve finished with the title, click the OK button or simply hit the Enter key.

A new dialog box, prompting you for a filename, will appear. Navigate to a directory (ie, folder) on your computer where you want to save your page. Type “index.html” (without the quotes) into the file name part of the dialog box. Do not accept the default name given in the dialog box. Do not use another name. Do not use capital letters in the name (ie, uppercase). Most web hosts expect the main page of your website to be called “index.html”. If you change it, you may find that your website does not work as you expect.

After you’ve saved the file, you will be returned to the Composer main window. Look at the top of the window to the window’s title bar. Notice that instead of the words “untitled”, the title that you typed in earlier now appears in the window title bar.

Uploading or Publishing Your First Web Page

Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason we’re going to do this now, even before we’ve finished the page, is that Mozilla Composer needs the information about your actual website’s address (or URL) before it can correctly handle things like links and images on your web page. So even though the page is probably an embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.

Don’t worry about the page being so plain. If you’ve not advertised your website’s address (URL) to anyone, no one will even know your site exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. It’s not that easy to get visitors!

Another reason that you’re publishing your page at this time is so that you can get familiar with both the major stages in the design of a web page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host’s computer, you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don’t let this scare you though – it’s actually quite easy!

To publish the page, go to “File | Publish” (ie, the “Publish” item on the “File” menu). A “Publish Page” dialog box will appear asking you for more details.

• “Site Name” is the name that you want to give your website. Use the name that you gave to your website when asked for the title earlier (ie, “Shakespeare’s Website” or “XYZ Company” or whatever). This name is only used by Composer internally, to refer to your site, but it’s probably best to use the real name you ultimately wish to give to your site to minimize any confusion later.
• “Publishing address” is a bit more complicated to explain. When you signed up for your web hosting account from a commercial web host, you would have been given a whole bunch of details by your web host. Among these is something known as your “FTP address”. FTP, or File Transfer Protocol, is the usual means by which you transfer your web pages from your own computer to your web host’s computer. Transferring your pages from your computer to your web host’s computer is known as “publishing” or “uploading” your pages.

  For the purpose of this tutorial, I will assume that your web host told you that your FTP address is “ftp.example.com”. You should substitute your real FTP address everytime you see “ftp.example.com” in the examples below.

  Before you enter that address though, you will need to know which directory (or folder) you need to put your web pages. Some web hosts require you to put your web pages in a directory named “www”. Others require you to put it in a “public_html” directory. Still others say that you are to put your web pages into the default directory that you see when you connect by FTP. And so on. Find out the directory where you’re supposed to upload your web pages to.

  Once you’ve got all the details, you’re ready to form the address you have to enter into the “Publishing address” field.

  If your FTP address is “ftp.example.com”, and the directory that you’re supposed to upload to is “www”, enter “ftp://ftp.example.com/www” here. Notice that you have prefixed “ftp://” to your FTP address (“ftp.example.com”), added a slash (“/”) and followed it with your web directory name (“www”). If your web host tells you to simply upload it to the directory you are logged into when you connect by FTP, then just enter “ftp://ftp.example.com” here.

• The “HTTP address of your homepage” field specifies the actual web address (or URL) of your website. If you registered a domain name like “example.com” for your site, enter “http://www.example.com/” into this box. This field is required because Mozilla Composer will use this information to form links on your site. Be sure to enter the “http://” prefix as well.
• The “Login information” contains the user name (or login name) and password that your web host assigned to you. It is needed so that Mozilla Composer can connect to your FTP account and upload (publish) your pages.

When you’ve finished completing the information, click the “Publish” button. Mozilla Composer will proceed to connect to your FTP account on your web host and upload your pages. There will be a dialog box that pops up to tell you it is uploading your page. The box will automatically disappear when it Composer has completed its task.

Testing the Web Page

Before you proceed further, you need to test the version of the web page you have uploaded. This way, you will know whether you’ve made any mistake when entering your details earlier.

Switch back to Mozilla, or if you prefer, start up Internet Explorer or Opera or Netscape or Safari or Konqueror or whichever browser you normally use. Type the URL (web address) of your website. This is the address that you typed into the “HTTP address” field earlier. For example, type “http://www.example.com” if that is your URL.

If you’ve entered the “publishing address” earlier correctly, you should see the page you created earlier in your web browser.

If you get an error like “No DNS for www.example.com” or “Domain not found”, it probably means that your domain name has not yet propagated to your ISP. Put simply, this means that you probably only just bought your domain name. It takes time for a new domain name to be recognized across the world (usually 2 or more days), so it’s possible that your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly. Otherwise, you’ll just have to wait.

If you get an error like “404 File Not Found” or you get your web host’s preinstalled default page, you may need to go back and check your “publishing address” field. You may have published your page to a location that is not recognized by the web server as the default page to show when only your domain name is entered.

You can change the settings that you have just entered by accessing the “Edit | Publishing Site Settings” menu. One possibility for the page not showing is that you did not specify the correct directory on your web site to publish your index.html page to. A more remote possibility is that your web host requires that your page be named something other than “index.html”. This is very rare nowadays, so explore this last possibility only when you’ve ruled out all others. At worse, ask your web host’s support department or check their documentation for help.

If you get no errors at all, but see the page that you’ve designed earlier, congratulations! You’ve created and uploaded your first web page. It may be a rudimentary page but you have successfully walked through all the essential stages of designing and uploading a web page.

Next Chapter: Polishing Your Web Page

In the next chapter, you’ll learn how you can improve that rudimentary web page by adding pictures, making font changes, etc.

Mozilla Composer is part of the Mozilla Suite which includes – Web-browser, advanced e-mail and newsgroup client, IRC chat client, and HTML editing made simple — all your Internet needs in one application. The most attractive feature is it’s price, being Open Source software, it is free.

Download The Installer
Visit http://www.mozilla.org/products/mozilla1.x/ and select the download for your language and operating system. The Mozilla Suite is available for Windows, Linux, Mac OSX , OS2 and Solaris. This tutorial shows the installation on the Windows platform.

Installing The Software
When execute the downloaded executable file (installer), you will get the following window Click “Next”

The next window shows you the License agreement. It specifies what you are allowed to do with the software, accept the License Agreement Click “Next”.

Now we can select the installation mode. We will do a custom install. Select it and Click “Next”

Select The components you want to install. As we aren’t using Netscape for mailing or messenging, we don’t install this component. The Spelling Checker on the other hand may turn out to be useful and the Navigator is obligatory. Some make the according selection, as shown in the image below.

In the following step, we select some additional components. Only the “Developer Pack” is obligatory, but if you want and don’t have them already, you can install Sun Java 2 and Macromedia Flash Player also. Certainly check the “Developer Pack”!

Now you will be prompted to create a shortcut-group. Simply leave the default value.

In The following window, we can select some additional options. Uncheck Both Options.

In the next window, we can set one more option, uncheck this option also if you do not require this.

Confirm the start of the installation by clicking the “Install” button

Now you can sit back and wait for a while. You will see a number of  windows as shown below: Just wait until they are all gone:

Running Netscape Composer
Congratulations, you have finished the installation of Netscape with Netscape Composer. A Netscape Browser Window will open automatically, just close it, because you don’t need it. Now you can start your freshly installed copy of Netscape Composer. You’ll find it over here:

The first time you start Netscape, it will ask you to create an account, simply click Cancel.

Netscape will ask you if you are sure you want to cancel. Of course we are sure, so confirm your operation

Congratulations, you can now start using your freshly installed Netscape Composer. Have fun building your personal website….

Mozilla Composer Tutorial 3: How to Create Data Tables

In the previous chapter of this tutorial, we created a functional main page of your site. In this chapter, you will learn how to how to use tables to display your data. Even if you do not have any data that you need to display, you should not skip this chapter since it is the basis for our next chapter on how to create a multi-column layout for your website.

Creating Tables to Display Your Data in Mozilla Composer

For this section of the tutorial, you will be creating a new page for your site: the “About Us” page. By the end of this chapter, you will have a page that looks something like the diagram below. You will of course have to modify the content to suit your site. The main idea in this section is to introduce you to the use of data tables, which we will use (or misuse) to create multiple column layouts for our site later.

Steps to Take

1. If you’ve been observing the websites that you visit, you will have noticed that most pages on a particular site share a common design, with only the page-specific content differing from page to page. The common design not only saves the web designer time when designing a site, it also helps visitors – a common layout among the pages on a site make it easier for visitors to locate common elements like navigational links.
2. For this tutorial, we will use the index.html page that we created in the previous chapters as a template for our second page.
3. If you have not already done so, start up Mozilla Composer and open the web page you created earlier. You can use the File | Open File menu to do this.
4. Switch to the “<HTML> Source” mode. If you’ve forgotten how to do this, click the tab at the bottom of the Composer window with the label “<HTML> Source”.
5. Select all the text in that window – the shortcut to do this in Windows or Linux is Ctrl+A, while in Macintosh use Cmd+A.
6. Copy the selected text into the clipboard. One way to do this is to use the “Edit | Copy” menu item.
7. Open a new Mozilla Composer window. You can do this with “File | New | Composer Page”. A new empty Composer window will open.
8. Switch to the “<HTML> Source” mode in this window by clicking the “<HTML> Source” tab at the bottom of the window. Select all the text in this window using Ctrl+A (or Cmd+A in Macintosh). Use the “Edit | Paste” to paste the text you copied from the other window, overwriting the currently selected text.
9. Now switch back to the “Normal” mode in your new page. You may close the other window with the index.html file for now, since we won’t be needing it for this chapter.

   Explanation: although you can also use the same technique to select, copy and paste text from the “Normal” mode, a bug in the version of Mozilla Composer I tested (the one that comes with Mozilla 1.3.1) causes links that are copied this way to be modified incorrectly. (For the technically inclined, relative links like “index.html” get modified to local file references like “file:///C:/Data/index.html”. The links will thus fail when the page is published.) As such, it’s best to simply avoid the problem entirely by copying using the “HTML Source” mode. (If you don’t understand this paragraph, just skip on to the rest of the tutorial.)

10. At this point, the page is identical with the index.html that you created earlier, except possibly that if you had a graphic inserted in the page, it will show as a broken link. Don’t worry about this – it will be automatically solved after we publish the page.

    We will be changing this page to an “About Us” page. The “About Us” page on a site typically gives your site’s visitors information about a company (if yours is a company site) or about you (if yours is a personal site).

11. Now look at the diagram above and change the displayed heading accordingly. You don’t really have to call it “Shakespeare’s Website: About Me”. If you want to use that page as a resume, you can call it “Resume” or “[your name]: Resume” or the like. If yours is a company, call it either “About Us” or “XYZ Company: About Us” or something like that.
12. From the Format menu, click the “Page Title and Properties” menu item. Change the content of the Title field to the text you used for the header above, and press the ENTER key.
13. Replace the quote from Hamlet with the “Here are some of my achievements:” or, alternatively, substitute with the real content that you want on your finished site.
14. Hit ENTER a couple of times to leave a blank line before the start of your table.
15. From the menu, select Table | Insert | Table…
16. Basically we want to create a table with 5 rows and 2 columns. Change the fields in the dialog box that appears accordingly: enter 5 for “Rows” and 2 for “Columns”. Leave the “Width” entry alone: the default value of 100% means that the table will fill out the entire width of the browser, which is fine for our purposes. The “Border” value should be 1 pixel by default – you can leave that alone too. Once you’ve finished, click OK or hit the ENTER key.
17. A table should appear on your screen. Complete the table using the information given in the diagram at the start of this chapter. Alternatively, you can complete it using your real content. You can use the TAB key to move to the different columns and rows in the table or, if you prefer using the mouse, you can click in the appropriate cell to position your cursor. (Don’t worry about the constantly resizing columns.)

    Note: your table will not look exactly like the table in the diagram above. In particular, your table should fill out the width of the browser, while the table in my diagram does not. I mention this for the sake of those who might worry that they’re doing something wrong if their screen does not look the same as my diagram.

18. If you want to move the cursor outside your table, do not use the TAB key in the last cell. Use the arrow key instead. If you use the TAB key there, Mozilla Composer will automatically create another row in the table thinking that you want to extend the table. If this warning comes too late for you, and you’ve already accidentally created another empty row, you can easily delete it the extra row by moving your keyboard cursor to that row and use “Table | Delete | Row” to get rid of it.
19. Now look at your table. The first row of the table actually contains the header for the rest of the table. To indicate that it is the header, move your cursor to the “Year” field, then select “Table | Table Properties”. You will be greeted with a dialog box with two tabs at the top: “Tables” and “Cells”. Click the “Cells” tab. The dialog box contents will change when you do so. Now change the “Cell Style” in that dialog box from “Normal” to “Header”. Click OK. Now move your cursor to the “Play” field of your table and do the same here.

    You have indicated that the those two cells are headers for their respective columns. Browsers typically show such headers by displaying them in bold.

20. If you like, you can select the entire table and change the font face to “Helvetica, Arial”. Use the method mentioned in Chapter 2.
21. Preview the page, save it as “aboutus.html” and publish it.

Congratulations. You’ve created your first page with a table and used it to present data. In the next chapter, we will use a table to control the positioning of text on your web page in order to create a multiple column layout for your website.

Mozilla Composer Tutorial 2: Adding Images, Changing Fonts & Colours, Creating Links, Writing Your Content

In the previous chapter of this tutorial, we designed a rudimentary web page and uploaded it to the web host.

In this chapter, you will learn how to

• change font typefaces;
• change the point size of fonts;
• add section headers;
• insert images;
• change the colour of the background and the text;
• and add a navigation bar and create links to other pages on your site.

By the end of this chapter you should have a working main page of your real web site.

Changing Font Faces and Point Sizes

If you recall, in the previous chapter, we typed the following text into Mozilla Composer:

Let’s spruce up the page. As it stands, we have not specified the font face that your web page is to use. This means that your page will appear in the default font of the web browser your visitor is using, whatever that may be. For visitors using Internet Explorer on Windows, this usually means that the “Times New Roman” font face will be used (unless your visitor has changed the default setting). Since the actual font face varies from system to system, and browser to browser, you may want to specify that a particular font be used by the browser everytime it displays your page, so that you have more control over how your page appears.

To do this, select the text of the entire page. You can do this with the mouse by dragging the mouse cursor from the first “S” in “Shakespeare” to the full stop (period) after the last word. Alternatively, type Ctrl-A (type “a” while holding down the key labelled “Ctrl”) in Windows to select everything.

From the “Format | Font” submenu, select either “Helvetica, Arial”, “Times” or “Courier”. I will assume that you selected “Helvetica, Arial” in this tutorial. “Helvetica, Arial” (actually “Helvetica, Arial, sans-serif” although the menu does not say it) means that if the browser finds a font named “Helvetica” on the visitor’s computer, it will use it, otherwise it will use the “Arial” font. If the latter is not available either, the browser will try to use some other sans-serif typeface. For the curious: the Helvetica and Arial fonts are very similar in appearance. Arial is found by default in Windows systems, while Helvetica is available by default in a number of systems.

The appearance of the text should instantly change. If you are running Windows, the Preview window will now show your text using the “Arial” font.

You can also change the point size of the font on the page. For example, if you think that the text of the “To Be” passage is too small for your visitors (for example, your site caters to people who need large print such as the elderly or the visually impaired), select the “To Be” paragraph, and go to the “Format | Size” menu. You can experiment with the various sizes till the text of the page is to your liking. Be careful not to resize the text too small. What looks good on your computer with your particular monitor resolution may be unreadable on a different system with a high resolution monitor.

Do not change the point size of “Shakespeare’s Website”. We will do this next, using a different technique.

Specifying Headers / Titles

The text “Shakespeare’s Website” is actually the header of the paragraph, or perhaps of the entire page. By convention, both in print and on the web, headers are usually in bold and in a larger point size than the rest of the text on the page.

While it is possible to simply change the point size of the text using the technique described earlier, headers are usually specified in a different way.

Select the text “Shakespeare’s Website” at the top of the page. Go to the “Format | Paragraph” menu and select “Heading 1″. “Shakespeare’s Website” should now be in a large point size and in bold.

You may have noticed from that menu that there are a variety of header styles – “Heading 1″ to “Heading 6″. Although Mozilla Composer will not prevent you from doing so, you should only use “Heading 2″ after you have used “Heading 1″, “Heading 3″ after you have used “Heading 2″ etc. That is, “Heading 1″ is meant to be used as the topmost header in the hierarchy, with “Heading 2″ used for the lower level section headers, and so on.

Note that even though you’re using “Heading 1″ for “Shakespeare’s Website”, it is still possible to control or change the point size and font face using the method mentioned earlier.

Adding Images

1. If you want to add an image to your web page, you must have a means of creating that image. For that, you either need to have access to a graphics drawing program, or if you already have the picture on paper that you can use (such as a logo that is printed on your company’s letterhead), you will need to scan that picture into the computer.

   If you are creating your own pictures, you need a drawing program that can create either PNG, GIF or JPG files. If you have no idea where to get such a drawing program, you can find one such (free) program at http://www.gimp.org.

   A description of how to use a drawing program or a scanner is outside the scope of this tutorial. Nonetheless, you will need a graphics image for this tutorial. If you don’t have one readily available, and don’t want to create one now, you can always download one of the free samples available on the net, simply do a Google search on “free images” before you continue. (Be sure you read the licence terms on the use of those free samples.)

2. To insert an image beside the words “Shakespeare’s Website”, first position your cursor to the left of the word “Shakespeare” (or whatever word you have typed in the header). Next, select “Insert | Image…” from the menu. A dialog box will pop up asking you for the location of the image. Click the “Choose File” button to locate your file.
3. Ensure that the checkbox for “URL is relative to page location” is checked.
4. In the “Alternate text” field, enter “Logo for Shakespeare’s Website”. This field will be displayed if the visitor uses a browser that does not display graphics (or has the graphics display deliberately disabled). It is also useful for people who are blind or visually impaired, and rely on speech synthesizers to read web pages out aloud for them. As such, any time you add a picture, it is important that you add some sort of descriptive text in the “Alternate text” field. If the radio button beside the words “Alternate text” becomes unchecked as you type, use your mouse to click it to check it again. A bug in the Composer that comes with Mozilla 1.3 causes the radio button to become unchecked the moment you enter a space character into the alternate text field.
5. Click the tab “Appearance” in the dialog box. The dialog box should now allow you to change the alignment of the image. Under the “Align Text to Image” option, select the option “Wrap to the right”. This will cause any text that follows your picture to move to the right of the image.
6. Click the OK button. Your image should display to the left of the words “Shakespeare’s Website”. Depending on the height of your image, it is possible that some of the words in the paragraph that follows are also aligned to the right of the image.
7. Move your cursor to the start of the main paragraph, that is, move it to the first “T” in “To be or not to be”. Select “Insert | Break Below Image”. The paragraph should now start below the image and not wrap to the right of it as before.

At this point, your page may or may not look good, depending on the size of your image. If your image is too large and the text too small, the alignment will not look good. One way to fix that is to adjust either the size of the image (use your drawing program) or the size of your heading.

If putting the image to the left of your header does not work too well, you can insert the image above your header. To do this, delete the existing image by clicking on it with your mouse, and hitting the Delete key. Next, insert a blank line above your header and move your cursor upwards to the blank line. Insert the image as before, only this time, do not change the alignment of the image in the “Appearance” tab (just leave it set to the default).

If you insert an image in this way, you may want to centre both the image and the header “Shakespeare’s Website” on your web page. To do this, click on the image once to select it. Then select “Format | Align | Center”. Similarly, to centre “Shakespeare’s Website”, select the text, and then use “Format | Align | Center” from the menu again.

Background Colour and Text Colour

There may be occasions that you need to change the colour of certain aspects of your web page. For example, you may wish to change the background colour of your page. To do this, select “Format | Page Colors and Background” from the menu. Click “Use custom colors”, and then the colour button beside “Background”. You will be presented with a dialog box with many colours to choose from. Select your preferred colour then click OK to accept the changes.

If you are changing the colours of your background and text, be sure to select colours that will contrast well so that your text can be easily read.

Creating a Link to Another Page

In the chapters to come, we will create a number of other pages. In order for your visitors to reach those pages, you need to add links to those pages.

To create a series of links to the other pages on your site, do the following:

1. Move your cursor to the bottom of the page. Leave a blank line after the the paragraph above. We will be creating a navigation bar for this site at the bottom of this page.
2. Select “Insert | Link” from the menu.
3. Enter “Home” (without the quotes) in the box entitled “Enter text to display for the link”. This will be the underlined text that visitors will see.
4. For the “Link Location” field, enter “index.html”.
5. Click the OK button.
6. Using the same procedure, add links to the following pages as well:
   • About Us (aboutus.html)
   • Feedback Form (feedback.html)
   • Reciprocal Links (links.html)
   • Site Map (sitemap.html)

   Separate the links using a space and a vertical bar.

   When you’ve finished this, the bottom of your page should look like the following:

   Home | About Us | Feedback Form | Reciprocal Links | Site Map
7. Select the entire line at the bottom, centre the line with “Format | Align | Center”, and if you wish, change the font to “Helvetica, Arial” as before.

At this point, your page should look something like the following. I’m assuming that you have placed your picture above your main header, and centred both. Since I don’t know what picture you used nor its size, I’ve put a placeholder in the diagram below:

Writing the Real Content of Your Main Page

At this point, you have a working main page for your web site, except that the real text for the page has not yet been written. You will now replace the header on the page (if you have not already done so) and the speech by Hamlet with the real content of your site.

Here are some tips on what you can put on your main page.

1. The header “Shakespeare’s Website” should of course be replaced with the real name of your website.
2. Visitors arriving at your site at the main page should be able to tell what your site is about. The text and graphics in your site should work together to that end. This does not mean, though, that you have to write a long story on your front page describing the purpose of your site or company. However, simply putting a cryptic picture in place of the existing Shakespearean text will not help your visitors figure out what your site or your company is all about.
3. Your main page should also allow visitors to access the rest of the site. For the purpose of this tutorial, we have placed links to certain pages of the site that are found on a typical company website. If you intend to have other pages, for example a page listing your products, you should create a link to that page as well. Important: when creating filenames for these other pages, create names that do not have any capital letters or spaces in them. Spaces and capital letters in the names might lead to problems when you upload them to your web server.

Once you’ve finished rewriting the text on the page with more appropriate content for your site, publish your web page again. Select “File | Publish” and click the OK button to allow Mozilla Composer to upload your revised page to your web server.

Congratulations – you now have a functional main page for your website.

Next Chapter: Data Tables and Multi-Column Layouts

In the next chapter of this tutorial, you will learn how to use data tables as the first step to learning how to create multiple column layouts for your website.

If you look at the design of many web pages on the Internet, you will probably notice that a large number of them have multiple columns. For example, on thesitewizard.com, most pages have two columns: the left column holds the site logo and navigation buttons while the right has the main content. It is possible to have more than two columns too.

Since Mozilla Composer does not allow you to arbitrarily position text and graphics on your web page (or, at least, not the Composer that comes with versions of Mozilla up to version 1.6), you will have to use an old webmaster trick to accomplish this. Here is where the table creation tips that you learnt in the previous chapter of this tutorial come into play.

If you have not done the exercise given in Mozilla Composer Tutorial 3: How to Create Data Tables for your Web Page because you thought you will never need to use tables, you should return to that chapter and try it now. This chapter assumes that you already know how to create and configure tables.

Steps to Take to Create a Two-Column Layout

1. The basic idea here is to create an invisible table that has the number of columns you want. The table is configured so that it fills the entire width of the browser window.
2. Start Mozilla Composer with a blank page.
3. Insert a table with Table | Insert | Table. A dialog box will appear, asking you for details. Specify 1 row, 2 columns and a width of 100% of the window. For the “Border” field, enter 0. In other words, you are creating a table without any lines that occupy the entire width (100%) of the window.
4. Move your cursor into the left column (eg, by clicking in the blank space in that column with your mouse), and type the text given in the diagram above. The underlined items in my diagram represent links to the other pages on your site. They are the same links that you have been using in the earlier chapters of this tutorial. For your ease of reference (if you have been using the same page names that I have given in the earlier chapters), the links point to the following pages:
   • Home (index.html)
   • About Us (aboutus.html)
   • Feedback Form (feedback.html)
   • Reciprocal Links (links.html)
   • Site Map (sitemap.html)

   If you have forgotten how to create links, you can review chapter 2 again for the information. If you use the Mozilla Composer that comes with version 1.6 (and possibly other versions as well), you might find that the links you create do not appear to have the traditional blue underline. This is due to a bug in Composer; don’t worry – if you created the links correctly, they will be there when your website is viewed by a browser even if it doesn’t appear while you are creating the page.

5. Before you carry on further, save the page. When prompted for a title for the page, enter “Reciprocal Links”. For the filename, enter “links.html”. Don’t get creative here (unless you know what you’re doing): if you change the filename or the title of the page at this point, you will need to go back and change all the links that you have already created in the earlier chapters of this tutorial.

   (Note: once you have saved the page, you can open it in the main Mozilla browser or another browser to verify that your links were coded correctly and appear normal. You need to do this because Composer 1.6 doesn’t render the left column correctly, making it difficult for you to check visually in the web editor.)

6. Now move your cursor to the right column (eg, by clicking in it). Type the main content of your Reciprocal Links page here. If you have no idea what to type, use the example text given in the diagram above as a temporary placeholder. The URLs for the links in the diagram are as follows:
   • “please let us know” (feedback.html). Note that this sentence is just a placeholder until you get real links to place here. Once you have something, you can delete the sentence “If you wish to exchange link with us, please let us know” or, at your option, leave it above (or below) your list.
7. I’m sure you have noticed that the width of the right column expanded as you typed your text. Mozilla Composer mimics the behaviour of a web browser when rendering table columns that do not have an explicit width setting. While a column that changes its width dynamically according to its content is acceptable for most data tables, it is not what we want when we use (or abuse) a table as a container for our page content.

   To fix this, move the cursor to the left column (eg, by clicking in it). Select “Table | Properties” from the menu. Click on the “Cells” tab at the top of the dialog box that appears. Click the checkbox for “Width” to select it (“Width” can be found in the “Size” section). Type 20 in the Width field. Change the drop down box for “Width” from “Pixels” to “% of table”. Click the OK button.

   The left side of the table should change its width. If the width is still not acceptable for your content, try again and use a different number till you are satisfied with the width of the left column.

   Once you are satisfied with the width for the left column, repeat the procedure for the right column. The width for the right column should be 80 if you used 20 for your left column (ie, 100% – 20% = 80%). If you’ve used a number other than 20 for your left column, subtract that number from 100 to get the value you need to enter.

8. Many people use a different colour for their navigation panel (which is what the left column of your page currently functions as) to distinguish it from the main content of your page. To do this, make sure your cursor is in the left column, and select “Table | Table or Cell Background Color” from the menu. Select a colour other than black, blue or purple. (Actually, you are free to select whatever colour you want. But if you select either black, blue or purple, you will find that some of the text becomes extremely difficult to read under certain circumstances.) If you can’t decide, choose one of the yellow-based colours. For example, I selected the “#ffff99″ colour. (Every colour you choose has an associated colour value. This value appears in the field at the bottom of the dialog box. If you want to choose the same colour I did, click on the colours until you find one that has “#ffff99″ appearing in that field.)
9. If you have not already done so, you may wish to change the size of the text and the typeface used to something other than the default. For example, I used the “Helvetica, Arial” option in the “Format | Font” menu for the text. You can also use a graphic image with your site’s logo in place of the text “Shakespeare’s Website”. (Make sure that the width of the logo is suitably narrow so that it can fit into your left column when your site is viewed with a 800×640 screen resolution.)

   When you’re done with your changes, save the page and publish it.

How to Create a Three-Column (or More) Layout

Although you will not be creating any three-column page for the purpose of this tutorial, if you find you need such a layout, simply enter the required number (eg, “3″ for a three-column page) instead of “2″ for the “Columns” field when you create your table.

Special Cases

Sometimes you need to create a page that is basically two columns but with a single column either at the top or at the bottom of the page. For example, you may want to put a banner at the top of the page that spans both columns. Or you might want to put a copyright notice at the bottom of the page that stretches from the left side of the page to the right.

The easiest way to do this in Mozilla Composer is to simply place the banner or text before (or after) your table. Another method is to create a table with more than one row, and join the cells in top row (or the bottom row) so that there is only one column for that row. I leave these special cases as an exercise for the reader.

Creating a Site Map

At this point, you have sufficient knowledge to create a respectable-looking website with multiple pages. You can now consolidate your knowledge by creating (on your own) a Site Map for your website.

A Site Map is a page that links to every important document on your website. Such a page is a useful aid to your visitors in case they want to locate a particular page quickly. It is usually present in well-designed sites with multiple pages, and is one of the facilities that improve a site’s usability. Although your site has only a few pages at present, and all of them are listed in your left-column navigation panel, it is a good practice to always create a site map for your sites (unless the site only has one or two pages).

Your Site Map can be a straightforward list of links to all your pages if you like. In fact, it is best to keep your Site Map simple so that visitors can find what they want easily. Restrain yourself from making it into such a graphical feast that your visitors have to solve a maze of visual puzzles before they can locate your pages.