What You Will NeedYou will need the following for this tutorial.
More importantly, you will know how to use KompoZer to create, design and publish your site so that you can design new sites any time you want.
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.
If you use Windows, and don't know what to do with the zip file after you have downloaded it, do the following.
Create a new folder on your desktop. Call it "kompozer" (without the quotes). Double-click the zip file you downloaded. A window will open. Drag the files in that window to the folder that you have created earlier. Then go to that new folder, and click the right mouse button on the file kompozer.exe. Click the "Send To" menu item in the menu that pops up. Next, click the "Desktop (create shortcut)" menu item. A shortcut to KompoZer will be placed on your desktop. To run KompoZer, all you have to do is to double-click this shortcut.
You will be greeted with a window that contains a menu (the top line of the window that says "File Edit View Insert..." etc), a few lines of toolbars (containing buttons like "New", "Open", etc), a left panel with a heading "Site Manager", and a large pane on the right-hand side that has a tab called "Untitled". This large pane is where you will design your web page.
Type the following into the KompoZer. You don't have to do anything special — just start typing. Note that 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. Don't let that stop you from being creative, though.
To see how your page appears in an actual web browser, click the "Preview" tab to enter KompoZer'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 KompoZer's WYSIWYG editor mode. When you type text in this mode, KompoZer 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 KompoZer. Remember to return to the "Normal" mode when you've finished admiring the code.
Now save the page onto your hard disk. Do this by clicking on the "File" menu, then the "Save" item on the menu that appears. A dialog box should appear asking you for the Page Title.
Note: For convenience, in future, I shall refer to this sequence of clicking on the "File" menu, followed by the "Save" item simply as:
As mentioned earlier, when you use "File | Save", 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 "ABCDEF Company" or the like.
Once you've finished with the title, click the OK button or simply hit the Enter key (or Return key on the Mac).
A new dialog box will appear, prompting you for a filename. 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". Their computers are configured in such a way so that if you simply type your domain name, like http://www.example.com/, the index.html file will be displayed. If you change the name to some other name, this will not work as expected.
After you've saved the file, you will be returned to KompoZer's main window. Look at the top of the window at the window's title bar. Notice that instead of the words "untitled", the title that you typed in earlier now appears there.
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 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.
If you get an error message from KompoZer, look through the guide above again and recheck all your settings. Most of the problems at this stage are caused by one of the settings not being correctly entered. If you have eliminated all possible errors in your settings and still get an "Unknown publishing error", check my FAQ on this.
Start up your browser. 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 server" 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 server" 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. Then click the name of your website in the left pane, under "Publishing sites". 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 what you see is your domain parking page created by default when you first bought your domain name, it may mean that you forgot to point your domain name to your web hosting account. I strongly recommend that you go back and follow the steps given the How to Start / Make a Website in addition to following this tutorial. As mentioned before, there's more to creating a website than just using a web editor.
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: KompoZer Tutorial Chapter 2: Adding Images, Changing Fonts, Changing Colours, Creating a Navigation Bar, Writing Your Content.
Copyright 2003-2009 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.
- You will need to have KompoZer. You can obtain it free of charge from http://www.kompozer.net/download.php. There are versions of KompoZer for Windows, Macintosh and Linux. Select the appropriate one for your system.
- 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. There are numerous web hosts around — you can find a list of cheap web hostson http://www.thefreecountry.com/webhosting/budget1.shtml
Overall Goals of this Tutorial
By the end of this tutorial series, you will have created a fully functional website with multiple pages, including a main page, a working feedback form, a Reciprocal Links page, an About Us page, and a Site Map. Your website will contain images, multiple columns, a form, links to other pages within your site, links to other sites, text in different font sizes, and so on.More importantly, you will know how to use KompoZer 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.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.
Installing KompoZer
To install KompoZer, first download the correct file for your system.If you use Windows, and don't know what to do with the zip file after you have downloaded it, do the following.
Create a new folder on your desktop. Call it "kompozer" (without the quotes). Double-click the zip file you downloaded. A window will open. Drag the files in that window to the folder that you have created earlier. Then go to that new folder, and click the right mouse button on the file kompozer.exe. Click the "Send To" menu item in the menu that pops up. Next, click the "Desktop (create shortcut)" menu item. A shortcut to KompoZer will be placed on your desktop. To run KompoZer, all you have to do is to double-click this shortcut.
If You Can't Find "Kompozer.exe"
If you cannot find any file called "kompozer.exe", it means that Windows is hiding part of the filename from you. Please read (and do the things mentioned in) How to Force Windows Explorer to Always Show You the File Extensions so that you can locate the correct file.If You Use Windows 95, 98, 98 SE, 2000 or ME
In the unlikely situation that you use a version of Windows earlier than Windows XP, Windows Vista or Windows 7, you may need to install one of the free archivers from the Free File Archivers and File Compression Utilities page before you can double-click the zip file to open it. That is, after you install the archiver, just open the "kompozer" folder on your desktop the normal way by double-clicking it. You should now be able to open the folder. Early versions of Windows lacked the ability to open zip files unless you install an archiver that supports it.Creating A Simple First Web Page
To give you an idea how simple it is to create a web page, first start up KompoZer.You will be greeted with a window that contains a menu (the top line of the window that says "File Edit View Insert..." etc), a few lines of toolbars (containing buttons like "New", "Open", etc), a left panel with a heading "Site Manager", and a large pane on the right-hand side that has a tab called "Untitled". This large pane is where you will design your web page.
Type the following into the KompoZer. You don't have to do anything special — just start typing. Note that 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. Don't let that stop you from being creative, though.
Shakespeare's Website
Tomorrow, and tomorrow, and tomorrow, creeps in this petty pace from day to day, to the last syllable of recorded time; and all our yesterdays have lighted fools the way to dusty death. Out, out, brief candle! Life's but a walking shadow; a poor player, that struts and frets his hour upon the stage and then is heard no more. It is a tale told by an idiot, full of sound and fury, signifying nothing.
When you type, you are typing into KompoZer's "Normal" mode. You can see which mode you are using by glancing at the series of tabs at the bottom of the KompoZer window. Tomorrow, and tomorrow, and tomorrow, creeps in this petty pace from day to day, to the last syllable of recorded time; and all our yesterdays have lighted fools the way to dusty death. Out, out, brief candle! Life's but a walking shadow; a poor player, that struts and frets his hour upon the stage and then is heard no more. It is a tale told by an idiot, full of sound and fury, signifying nothing.
To see how your page appears in an actual web browser, click the "Preview" tab to enter KompoZer'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 KompoZer's WYSIWYG editor mode. When you type text in this mode, KompoZer 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 KompoZer. Remember to return to the "Normal" mode when you've finished admiring the code.
Now save the page onto your hard disk. Do this by clicking on the "File" menu, then the "Save" item on the menu that appears. A dialog box should appear asking you for the Page Title.
Note: For convenience, in future, I shall refer to this sequence of clicking on the "File" menu, followed by the "Save" item simply as:
File | Save
This means that you are to click on the "File" menu, followed by the "Save" item on the menu that appears. There are shortcuts to saving a file in KompoZer, as there are for the many commands given in this tutorial. I shall, however, leave the discovery of minor things like that to you and concentrate on the main task of creating a web page. As mentioned earlier, when you use "File | Save", 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 "ABCDEF Company" or the like.
Once you've finished with the title, click the OK button or simply hit the Enter key (or Return key on the Mac).
A new dialog box will appear, prompting you for a filename. 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". Their computers are configured in such a way so that if you simply type your domain name, like http://www.example.com/, the index.html file will be displayed. If you change the name to some other name, this will not work as expected.
After you've saved the file, you will be returned to KompoZer's main window. Look at the top of the window at the window's title bar. Notice that instead of the words "untitled", the title that you typed in earlier now appears there.
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 KompoZer 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 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 KompoZer 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.
- 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 KompoZer will use this information to form links on your site. Be sure to enter the "http://" prefix as well.
- "Publishing server" 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 "User name" and "Password" fields in the dialog box refers to user name (or login name) and password that your web host assigned to you. It is needed so that KompoZer can connect to your FTP account and upload (publish) your pages.
If you get an error message from KompoZer, look through the guide above again and recheck all your settings. Most of the problems at this stage are caused by one of the settings not being correctly entered. If you have eliminated all possible errors in your settings and still get an "Unknown publishing error", check my FAQ on this.
Testing the Web Page
Before you proceed further, you need to test the web page you have uploaded. This way, you will know whether you've made any mistake when entering your details earlier.Start up your browser. 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 server" 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 server" 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. Then click the name of your website in the left pane, under "Publishing sites". 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 what you see is your domain parking page created by default when you first bought your domain name, it may mean that you forgot to point your domain name to your web hosting account. I strongly recommend that you go back and follow the steps given the How to Start / Make a Website in addition to following this tutorial. As mentioned before, there's more to creating a website than just using a web editor.
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.Next: KompoZer Tutorial Chapter 2: Adding Images, Changing Fonts, Changing Colours, Creating a Navigation Bar, Writing Your Content.
Copyright 2003-2009 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.
thesitewizard.com's KompoZer Series
- KompoZer Tutorial 1: How to Design and Publish Your Website with KompoZer
- KompoZer Tutorial 2: How to Add Images, Change Fonts and Colours, Create Links, and Write Your Content in KompoZer (Tutorial)
- KompoZer Tutorial 3: How to Create Data Tables in KompoZer
- KompoZer Tutorial 4: How to Create a Multiple Column Layout for your Web Page in KompoZer
- KompoZer Tutorial 5: How to Add a Feedback Form to Your Website Using KompoZer
- How to Insert Raw HTML Code in KompoZer
- More Kompozer Tutorials
No comments:
Post a Comment