Tutorial on how to create your first web site with this free WYSIWYG web editor

If you've just downloaded the most recent version of the Google Authenticator app, see this article. If you're having trouble signing in to your Google Account with an Apple device, select one of the options below to start troubleshooting your issue. The Network Path is the Mac's IP address followed by the name of the shared folder on your Mac. To find your Mac's IP address, click the Apple icon, click System Preferences, and then click Network. The IP address displays next to Status.


by Christopher Heng, thesitewizard.com

KompoZer is a WYSIWYG (What You See Is What You Get)web editor based on Nvu,another free WYSIWYG web editor. It is essentially Nvu with some bugs fixed and a name change. KompoZer runs on Windows, Macintosh and Linux.

This article guides you through the steps of creating your first web site using KompoZer.

If you are interested in a more recent web editor, you may wish to read theBlueGriffon Tutorial.BlueGriffon is an open source web editor developed by the author of Nvu. Alternatively, you can also try theExpression Web Tutorialwhich deals with Microsoft's web editor, a sophisticated and feature-packed editor that was once sold in shops butis now free.

What You Will Need

You will need the following for this tutorial.

  1. You will need to have KompoZer. There are versions of KompoZer forWindows, Macintosh and Linux. Select the appropriate one for your system. Note that this tutorial deals with KompoZerversion 0.7.10, which was the latest stable version available at the time I wrote this. Do not usethe development version 0.8b3 (which seems to have been abandoned with no new versions since February 2010),since it will probably behave differently from my description here.

    And yes, 0.7.10 is very outdated, with no support for a lot of the modern features in use on websites today.As mentioned above, the original developer who created Nvu, on which KompoZer 0.7.10 is based, has moved on toBlueGriffon.In general, if you want to design a modern website, especially one that is mobile-friendly, I suggest you use eithermy BlueGriffonor Expression Webtutorials.

    UPDATE: the official site for KompoZer has gone. Even before that, the software appeared tohave been abandoned for years. As such, I have removed the link to the site that I previously placed here.

  2. You will need a web hostto publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which hascomputers that are permanently connected to the Internet. After you design your web page(s), you will needto 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 other things involved in getting your first web site up and running,such as getting your own domain name,creating a search engine friendly website andpromoting your web site. This tutorial howeverdoes not deal with those issues — it is strictly about designing (creating) and publishingyour website using KompoZer. For those who are total beginners, it may be useful to readHow to Create / Make a Website: The Beginner's A-Z Guidefor an overview of the entire process of website creation and maintenance.

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 otherpages 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 sothat it can be accessed on the Internet. By the end of this chapter, you will be viewingyour 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 makesit difficult to follow or understand if you're not doing the things mentioned.

Installing KompoZer

To install KompoZer, first download it.

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 todo 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 thingsmentioned in) How to Force Windows Explorerto 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 ofthe free archivers from the Free File Archivers andFile 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 atab 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 youcan 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 therest 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 foolsthe 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 taletold by an idiot, full of sound and fury, signifying nothing.

When you type, you are typing into KompoZer's 'Normal' mode. You can see whichmode you are using by glancing at the series of tabs at the bottom of the KompoZer window.

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 tutorialunless 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 menuthat appears. There are shortcuts to saving a file in KompoZer, as there are for the many commandsgiven in this tutorial. I shall, however, leave the discovery of minor things like thatto 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 togive a title to your page. Since this is the main page of your website, you should enter thename of your website here. For example, if you are publishing a personal web page, you mightwant to name your website 'Shakespeare's Website' (without the quotes) if your name happensto be Shakespeare. If you are publishing a company web page, the site name should be yourcompany'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 thequotes) into the file name part of the dialog box. Do not accept thedefault name given in the dialog box. Do not use another name. Donot use capital letters in the name (ie, uppercase). Most web hostsexpect the main page of your website to be called 'index.html'. Their computers are configured in such a way so that if you simplytype your domain name, like http://www.example.com/, the index.html file will be displayed. If you change the name to some other name, thiswill not work as expected.

After you've saved the file, you will be returned to KompoZer's main window. Look atthe 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 needto publish the page to your web host. One reason we're going to do this now, even beforewe've finished the page, is that KompoZer needs the information about your actualwebsite's address (or URL) before it can correctly handle things like links and images onyour 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 yourpage will be seen by no one but you. People will not visit your site out of the blue justbecause 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 withthe major stages in the design of a web page. Once you get this hurdle out of the way, and youknow how to get your web page from your computer into your web host's computer, you havemastered what is arguably the biggest technical challenge a newcomer is likely to face. Don'tlet 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 toyour 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'sprobably 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 yourwebsite. If you registereda domain name like 'example.com' for your site, enter 'http://www.example.com/' intothis box. This field is required because KompoZer will use this information to formlinks 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 yourweb 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 knownas your 'FTP address'. FTP, or File Transfer Protocol, is the usual means by which youtransfer your web pages from your own computer to your web host's computer. Transferring yourpages 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 FTPaddress is 'ftp.example.com'. You should substitute your real FTP address everytime yousee 'ftp.example.com' in the examples below.

    Before you enter that address though, you will need to know which directory (or folder) youneed to put your web pages. Some web hosts require you to put your web pages in a directorynamed 'www'. Others require you to put it in a 'public_html' directory. Still others saythat you are to put your web pages into the default directory that you see when you connectby 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 enterinto the 'Publishing address' field.

    If your FTP address is 'ftp.example.com', and the directory that you're supposed toupload to is 'www', enter 'ftp://ftp.example.com/www' here. Notice that you haveprefixed 'ftp://' to your FTP address ('ftp.example.com'), added a slash ('/') and followed itwith your web directory name ('www'). If your web host tells you to simply upload itto 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) andpassword that your web host assigned to you. It is needed so that KompoZer can connect to your FTP accountand upload (publish) your pages.

When you've finished completing the information, click the 'Publish' button. KompoZerwill proceed to connect to your FTP account on your web host and upload your pages. Therewill be a dialog box that pops up to tell you it is uploading your page. The box willautomatically disappear when KompoZer has completed its task.

If you get an error message from KompoZer, look through the guide above again andrecheck all your settings. Most of the problems at this stage are caused by one of thesettings not being correctly entered. If you have eliminated all possible errors in yoursettings and still get an 'Unknown publishing error', check myFAQ 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 addressthat 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 youcreated earlier in your web browser.

If you get an error like 'No DNS for www.example.com' or 'Domain not found', it probably meansthat your domain name has not yet propagated to your ISP. Put simply, this means that youprobably only just bought your domain name.It takes time for a new domain name to be recognizedacross the world (usually 2 or more days), so it's possible that your ISP has not yet updated itsname servers to recognize your new domain. Some web hosts give you a temporary address which youcan use to access your website in meantime. If you have that, use the temporary address to checkthat 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 yourweb host's preinstalled defaultpage, you may need to go back and check your 'publishing server' field. You may have publishedyour page to a location that is not recognized by the web server as the default page to showwhen only your domain name is entered.

You can change the settings that you have just entered by accessing the 'Edit PublishingSite 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 specifythe correct directory on your web site to publish your index.html page to. A more remotepossibility 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'veruled out all others. At worse, ask your web host's support department or check theirdocumentation for help.

When you choose to use Epic direct payments, you save up to 20% as Epic passes along payment processing savings to you.Grab the latest Fortnite update to begin saving today! You don’t need to do anything!Epic direct payment on MobileToday, we’re also introducing a new way to pay on iOS and Android: Epic direct payment. App price drops mac.

If what you see is your domainparking page created by default when you first boughtyour domain name, it may mean that you forgot topoint your domain nameto your web hosting account. I strongly recommend that you go back and follow the steps given theHow to Start / Make a Website in additionto 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 havesuccessfully 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-2020 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard.com's KompoZer Series

You are here:Top >Getting Started with Your Website >KompoZer Tutorial 1: How to Design and Publish Your Website with KompoZer

Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

It will appear on your page as:


Copyright © 2003-2020 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 19 February 2020.

Guides to migrating a site from another web editor or site builder


by Christopher Heng, thesitewizard.com

If you have a website that was created using some other web editor, perhaps an online web editor, or if you have a sitecreated by someone else on your behalf, how do you use a web editor like Dreamweaver, Nvu or KompoZer to update it?

This was a question asked of me by a few of thesitewizard.com's visitors. They usually ask this question when theyrealise that my Dreamweaver,Nvu andKompoZer tutorialsare primarily directed at people creating a website from scratch, and they already have a pre-existing website thatthey want to edit using one of these software.

Things to Note Before You Begin

If your site was previously created using an online web site builder provided by your web host,and you want to migrate the site to Dreamweaver, Nvu or KompoZer because you are moving yoursite to a new host, you should scrutinize the site builder's terms of service agreement you had withyour previous web host carefully.

As mentioned in my articlecomparing onlinesite builders with normal web editors, many, if not all, web hosts do not allow you to use the design and graphics of a sitecreated by an online site builder on another web host.

In other words, you are either locked into your old web host, or if you want to befreed from their shackles, you willhave to redesign your websitefrom scratch.

This does not mean that you cannot salvage your content. Your content — your own words, photos and the picturesyou drew yourself — are your own property, which you can use wherever you like. What you cannot carry over arethe overall site design and the graphics that came with it. After redesigning a new appearance for your site in thenew editor, you can simply plug in your existing content.

Even if you are remaining with your existing web host, and are merely moving from your host's online site builder toDreamweaver, KompoZer or Nvu, you should seriously consider redesigning your site with your new editor, rather than preservingthe site builder's design and graphics. That way, when you find you want tomove web hosts, you will not have to do yetanother redesign. Since you're already changing editors at this time, you might as well do all the redesigning and relearningat this stage, to save yourself time in the future.

Steps to Moving a Site to a Different Web Editor

Unable To Open Kompozer App In Mac 10

The first thing you will need to do is to download a copy of your entire webite onto a folder on your own hard disk. AlthoughDreamweaveris able to work with files directly on your website without your taking this step, having a copy of your site on your harddisk is useful for a couple of reasons:

Unable To Open Kompozer App In Mac Shortcut

  • Backup

    The copy on your hard disk functions as a backup of your website. Should your web server's hard disk crash and your host finds thatthey cannot restore your site from their backup, you will not need to worry. You will have your own up-to-date local copy. Or,if your web host unexpectedly closes, you cansimply get a new account at another web host andupload all your files without even skipping a beat.

  • Only Upload a Polished Copy

    If you directly edit your site online, all your mistakes are instantly 'live' on the Internet when you save. Working on your filesoffline allows you to make tentative changes, view them in your browser to check it out and fix your errors, without affecting your publicsite. You can then publish only when you are satisfied with your modifications.

How to Download Your Web Site to Your Own Computer

The best way to download a copy of your website is to get a program known as an FTP client. There are numerous free onesavailable at thefreecountry.com'sFree FTP Clients page. For the purposeof this guide, I shall use FileZilla, a free FTP program listed on that page.

If you are not familiar with using FTP clients, please see my tutorial onHow to Upload a File Using FileZillato learn how to install and configure FileZilla. I will not repeat the information here. You can however skip the part aboutactually uploading (publishing) a file. You won't need to do that - in fact, what you need to do is the opposite.

Unable To Open Kompozer App In Mac Version

In the 'Local Site' pane of FileZilla, which shows the files and folders on your computer, navigate till you are in the folder where you want toplace your website files. (If you don't know where the 'Local Site' pane is, go back to theFileZilla tutorial again.)Make sure it is a new folder rather than your desktop, otherwise you will end up cluttering your desktopwith all the files you're downloading from your site. If you haven't created a new folder yet, just create one the usual way you normallycreate folders on your computer, then go to that subdirectory in FileZilla.

In the Remote Site pane of FileZilla, which displays the files and folders on your web server, navigate till you are in thefolder where your website's files are kept. This is usually a folder called 'www', 'public_html' or even 'htdocs'. If thereis no such folder when you log in, and you see files like 'index.html' instead, it is possible that you are already in yourweb directory.

Alternative To Kompozer

Select all the files and folders in the web directory in the Remote Site pane and drag them into your Local Site pane. Make sure that you selectall the files and folders so that you preserve the directory structure of your website. Otherwise, if you change things aroundor only selectively download files, you may find that you have a lot of broken links and broken images when you edit and publishyour website in the new editor.

Once you've finished downloading your site, skip to the relevant section for your web editor. That is, if you useDreamweaver, go to theDreamweaversection of this tutorial. If you use Nvu or KompoZer, go to theNvu/KompoZer sectioninstead.

For Dreamweaver Users Only

Nvu or KompoZer users can skip this section.

Although you can immediately edit your website with Dreamweaver, it's much better to define your site in Dreamweaver'sSite Manager. After all, when you bought the editor, you paid for the sophisticated facilities available in it, so youmight as well use it to the full. Using the Site Manager gives you the additional site management features availablein the editor.

After starting Dreamweaver, follow the steps inchapter 1 of my Dreamweaver Tutorialto define a new site. When you get to the 'Editing Files, Part 3' part of the wizard, you will be asked 'Where onyour computer do you want to store your files?'

Do not accept the default folder given. Instead, click the folder icon to the right of the box, and look for the folderwhere you downloaded your website's files, and select that instead.

Apart from this step, the rest are the same as those described in theDreamweaver tutorial.

For Nvu and KompoZer Users Only

Dreamweaver users can skip this section.

To edit an existing site with either Nvu or KompoZer, just start the editor, and click the 'File' menu and the 'Open' itemon the menu that drops down. From the dialog box that appears, navigate to the place where you saved your website's files earlier.Choose the file you wish to edit and click the 'Open' button. Your page will then appear in the editor.

Note: Nvu and KompoZer have bugs in the way they handle sites usingCSS(which is a technology used by webmasters and web editors to specify what a website is to look like). Since your sitewas originally designed using a different editor, which may have better CSS-handling support, it is entirely possiblethat your page will not render correctly in Nvu and KompoZer. This is normal. That is, it is probably not your mistakethat caused it.

There is no real workaround for this. If you're willing to work blind, you can simply make your changes in the editor, andcheck the same file using a real browser to make sure it appears correct. That is, while working in Nvu or KompoZer,your site may look ghastly, but if it looks fine in a varietyof real web browsers on your computer, it will probably appear the same way in those browsers when it is uploaded to your site.

Conclusion

That's it. With the above steps, you have imported your website for use with either Dreamweaver, Nvu or KompoZer. At this stage,you can make modifications to your site as well as use any of the tips and tricks given in any of myDreamweaver,KompoZer orNvu tutorial series.

Copyright © 2008-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

It will appear on your page as:

Kompozer Download


Kompozer Web Editor

Copyright © 2008-2017 by Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 30 April 2017.

Unable To Open Kompozer App In Mac Pro


Coments are closed
Scroll to top