How to make a website Minihowto  (I am using ubuntu 8.04 and kde)  :-)                                                                         Back to Main Page

This i a minihowto about how to make a simple website, using the "Kompozer" web page creating program.

This is a "fairly" short version, and if you want to know more, go to the Internet etc.

This howto is without any guarantee, and you may use it on your own responsibility only.

There may be errors, but I do not want to use too much time to  write this howto.

To check specific words you may try:  http://en.wikipedia.org/wiki/Main_Page (search).
 
   



Index

A graphical example of the build up of a website

The files and images etc. you want on your website

To create the "index.html" webpage.

Writing some text on the "index.html" page.

Insert a small thumbnail image

A link to the flower.jpg image

A link to the page1.html page

A link to the "time_video.avi" video

To make a link to somewhere on the same page, use the "Anchor" butto

A link to the "anchor"

A link to the "horse.jpg" image in the "animals" director

A link to a website file, somewhere on the internet

To upload the files -and directories to the webhotel

In order to get your new site onto Google
                                                                                                                                                                                                            Go to Index
To test the example website

The Main Menu's of "Kompozer"

To insert a "Horizontal Line"

To remove a horizontal line





You need to get some web space on a web hotel and a domain name address, something like "http://www.some_website.org" which is the name I will use in this tutorial

(as an example only).

You could google for e.g. "webhotel supplier your_country" (I am using "www.surftown.eu", but are not related in other ways to this site)  :-)

The webhotel use to have a "Search Domain" button, where you can check out the name you would like (check that nobody else already has the name you want).

After you have ordered your webhotel space -and domain name, you will get the necessary information which mainly is:

The address of your site: "http://www.some_website.org"

A username -and password, needed to be able to login to your webhotel.

The ftp addres you will need in order to copy your site data from your harddisk onto the webhotel: "ftp://ws28.surftown.dk/some_website.org" (an example).







Above is shown in a graphical form an example of the build up of the website, namely a copy on your harddisk, and an exact copy placed on your web hotel.

Whenever you edit -og add new files onto your site, you always need to copy the changes into your webhotel directory.                            Go to Index



Now create a directory "some_website", which is to contain all the files -and directories which you will use to make up your website:

mkdir /home/user1/some_website (instead of "user1" you should use your own username - and you could give the directory another name if you like).



You should now have created the images etc. you want on your website, and copied them into the "/home/user1/some_website" directory (some examples):

             



To create the "index.html" webpage.                                                                                                                                                    Go to Index

Open Kompozer and choose "File -> Save As..." - insert "index":









Now you have created the "index.html" page in the "/home/user1/some_website" directory.                                                                        Go to Index



"index.html" is just another "html" page, but A VERY SPECIAL WEBPAGE, as this name always will be recognized as the main page of the website.

So, if you write "http://www.some_website.org" or "http://www.some_website.org/index.html" it is the same in all web browsers (a built in function) - which means that

you never should use the name "index.html" other than as the name of the main index page of a website.

"index.html" is the place where you write the main information which you are going to show on your website, and it is also the place where you can place images and

links to other images, html files -or websites etc.



We will now begin with writing some text on the "index.html" page.

It is important, that you write the most important information about your site on the top part of the page, as this is the first part you see, when you open a webpage, and

please always explain short, what your website is all about, as it will be a great help for the persons who opens your page, and if you do not, they will  probably

quickly leave the page again, without looking at it very much.

It is also important to place the most important search words here, so people will be able to find your page, using google etc. but please do not repeat the same word

several times, as the search engines then might skip your page (in order to avoid abuse of the Internet).



Please remember to click on the "Save" button often, to save your work on the page.                                                                                                        Go to Index



We will here insert a small thumbnail image - please place the cursor where you want the image inserted (should always be done first):








                                                                                                                                                                                                                                Go to Index

Now we will make a link to the flower.jpg image, so that when you click on the thumbnail, the flower image opens (to be done in a webbrowser!)









When you place the mouse cursor over the thumbnail in a webbrowser, it will show the location of the "flower.jpg" imge, and when you click with the left mouse cursor,

the flower image opens in another window, and you will have to click on the left arrow (top left in the browser) to return to the webpage.    Go to Index



Now we will make a link to the page1.html page:





                Go to Index



Then we will make a link to the "time_video.avi" video:





                Go to Index

To play the video in a webbrowser, just click on the video link, and the video opens in a new window - to return to the main page, click on the left arrow, top left in the

webbrowser.



I have made a "woman.png" file just to show the file format, but is not using the file in this tutorial :-(



To make a link to somewhere on the same page, use the "Anchor" button:

First we will make an "Anchor":



First we go to the text where we want to make the anchor - then we select the text with the left mouse cursor.

Then we click on the "Anchor" button, and can see that the text is inserted in the Anchor Name dialog window.

Then click on the "OK" button:

                    Go to Index



Then we will make a link to the "anchor" so when we click on the link, we will be brought to the "anchor text" position (on the same page).



                    Go to Index



Then we will make a link to the "horse.jpg" image in the "animals" directory:





                    Go to Index



Then we will make a link to a website file, somewhere on the internet:



                Go to Index




In order to upload the files -and directories to the webhotel:

Open the "/home/user1/some_website" directory in a konqueror file manager and select all "ctrl+a"  - or select with the left mouse cursor (window minimized):




Then open "ftp://ws28.surftown.dk/some_website.org" in another konqueror webbrowser window (minimized):

Here you have to insert your_username and password from, your webhotel.                        Go to Index


Then you have to drag and drop everything from "/home/user1/some_website" into "ftp://ws28.surftown.dk/some_website.org" (example addresses only)





In order to go to your new website, open a webbrowser and goto "http://www.some_website.org" (an example) and the "index.html" webpage opens up.



In order to get your new site onto Google click here



To test the example website                                                                                                                                                                                Go to Index



The Main Menu's of "Kompozer":




        Go to Index



In order to insert a "Horizontal Line" place the cursor where you want the line - then choose: Insert -> Horizontal Line




In order to remove some items from "Kompozer" it may be necessary to use the "Source Tab" and then click the "Source"

button.

Then you get into the "source" editor, and can remove some tags:



Above is shown how to remove a horizontal line (you can most often find the tags, relative to some text on the page "In order to insert a "Horizontal ....") - then just

delete the tags (< some_tags >).



I am using "Kompozer" to make my minihowtos, and it works very well, but there seems to be some minor bugs, which makes "Kompozer" behave a little odd, but nothing

important - I am generally very happy with "Kompozer"  :-)                                                                                                                                    Go to Index




8/2008