1. You need a web hosting service <> for example Go Daddy or IX Web hosting with 24-hour help <> or search 'web hosting' This costs $70 per year
Web hosting is the server that holds your webpages so people can open your webpage. Every website is hosted on a server. You can set up your own server, but I suggest hiring a web hosting service.
2. Select and register a domain name <> for example choose: bobswebsite.org etc <> call the web hosting company and they will check availability of bobswebsite.org.
If the domain is available, the web hosting company will register the domain for you. This costs about $10 per year to lease the domain name. You can buy up to 10 years. Frequently other companies will email you saying that your domain registration is expiring. Ignore these emails since they are trying to scam you into moving your registration to their service, and then they charge $150 per year for something that should cost $10. Call your web hosting company to make sure registration is current.
Now you are ready to write your webpage, and upload it to the web host server......
So let's start writing your webpage. Nothing fancy. Just old style text, tables, links, and images....
3. The following steps show how to write pages, add images, create links, load pages, and make your own website.
4. Click images (pictures) to see larger
5. If there are words you don't understand, check wikipedia
1.
Larger
1. Kompozer is a Free Download <> installs a folder on desktop or in My Documents
2. Filezilla is a Free Download <> installs red icon on desktop
3. You also need a program to resize images for the web:
<> Photoshop Elements $50-80 > offers Free trial but free trial is intrusive
or
<> Gimpshop editor is a Free Download
<> Paint shop pro costs money, but it will re-size images
You can web search how-to with each of the 3 required programs... but read below first to get the basic foundation.
2.
Click globe icon located inside Kompozer folder.
This will open Kompozer code writer.
Larger image
How to open Kompozer and get started
Kompozer free-download puts a folder on your computer
Open the folder. Click on globe-shaped icon
What is Kompozer?
Kompozer is html code-writing software for simple creation of webpages
What is html? .html is a format called an extension, just like .doc and .pdf are extensions.
Every type of file has extension, whether it is a product manual, or picture, or document, or webpage... and each extension is specific to the type of file.
Click on a.doc, and it opens in Word program. Click on a .pdf and it opens in adobe reader. Click on a .jpg and it opens in a photo viewer.
Click on .html opens in a web browser because .html is for websites.
So when Kompozer saves work, it automatically saves in .html format, just like when you save a document, it saves in .doc format.
Look at following link that got you to this page... see how it ends in .html:
http://waterheatertimer.org/Make-your-own-website-1-16.html
Look at link that goes to one of the pictures on this page... see how it ends in .jpg
http://waterheatertimer.org/images/Open-kompozer-500.jpg
Kompozer will write programming code used for websites, without you having to know how to write .html code. Of course you have to learn some basics, which is why you are here... to help with the basics. This page will help you write text, add photos, add links, and post your website... but not how to do pop ups or shopping carts... just a basic information-type webpage.
So find the Kompozer folder, open the folder, and click on globe-shaped icon and this will open Kompozer
3.
Larger image
Notice red arrow pointing at help at top. Plus you can webserch for answers.
Notice red arrows pointing at the Source and Preview tabs at bottom:
Preview tab is white space where work takes place > type text or drag-and-drop images into white space and Kompozer program automatically writes correct HTML code
Source tab shows actual HTML code > click source tab, and the code can be viewed, and changed here as you learn
Click between Preview and Source to see how the code changes after you type or drop a photos > good way to learn beginning code.
4.
Larger image
Click Table icon > or click insert and then click table > this lets you put a table in the workspace. With this type of old fashioned website, you always put content into a Table because it is good way to keep content organized.
Image icon > drag-and-drop image into Kompozer, and then click Image icon to put border around image and cite web location (details in later steps)
Link icon > convert text (and images) into links by clicking Link icon
Open icon > to open a saved page
Save icon > to save work in progress >< save work frequently to avoid disappointment
Bold, underline, center, etc for text editing
Table
icon
5.
Larger image
Click table icon > select number of cells by moving mouse over Insert Table box
Or click 'Inset' and choose table.
Example shows a 9-cell table inserted > pick as many cells as needed > and add and subtract cells as you go
Table cells are important for simple web pages since they let you place content exactly where you want on web page
Tables can be made invisible: set up your table and then go to Table icon and change Border to 0 ... note: I left lines visible on this webpage.
FYI: When making tables invisible, wait until page content is finshed.
6.
Larger image
Table dimensions are shown on top and side (circled in red)
When resizing tales, focus on width of table > experiment with different widths to see which is best for your content > don't worry about height
Width of 300-500 is good for most photos
Width 500 is good for text
You can add another table above or below existing table >
or add a table inside a cell >
> put cursor where you want new table > go to Insert on top toolbar > select Table > Insert Table box appears as shown in Step 5
7.
Change table border lines from thin to thick to invisible: Go to table, click table tab, change borders
Larger image
Put cursor anywhere on table, right-click mouse to bring up menu box
Table insert <> add another table or a table inside a cell
Table delete <> delete a row or a column or delete whole table <> use Undo icon if a mistake is made
Join Selected cells <> 1. select several cells by holding down shift key while clicking cells; 2. right-click mouse; 3. choose Join Selected cells
Split Cell <> after cells are joined, right click mouse, choose Split Cell
Table or cell background color <> make table any color you choose/ see Step 9
For more options <> put cursor on table then click Table Icon > for example you can change Border to 0 and make table invisible [but wait until page content is done before making final table adjustments]
8.
Add text to table by typing on keyboard
Larger image
Highlight text and use toolbar icons to 'underline' 'center' and 'italicize' text
To change text color: highlight text > go to Format at top > text color
Resize text: highlight text, and then choose Body Text drop-down box located top left or go to format > font, size etc
Notice the image on left shows 2 tables. New table was added below the first table; and 2 cells in the new table were joined using instructions from steps 6-7. [click image to see more info]
Also, green background color was added to one cell using instructions in next step
Table
icon
9.
Larger image
1. Put cursor in table cell you want to change
2. Click Table icon on toolbar
3. Table properties box comes up
4. Click small rectangle next to Background Color
5. Cell Background Color box comes up
6. Click color you want >> or click in rainbow area to customize
7. The selected color appears in square box
8. Click OK
9. Then click Apply > OK
10.
Larger image
A link is a 'web location' > each webpage on the internet has a unique, exact location
Here is a link to Wikipedia: http://en.wikipedia.org/wiki/Main_Page
Here is the same link using ordinary text
Here is same link again
So you can convert ordinary words into links by following simple steps shown on left, and below.
The important thing to remember is that the link location has to be exact, and it is very important to double-check every link location appearing on your page
Link icon
11.
Larger image
Highlight any text (or click any image) in Kompozer > click Link icon on toolbar > fill in exact link location as shown > and you will have a working link
Notice the exact Wikipedia web location appears in Link Location.
Links have to be exact. If there is a period or letter missing or a capital letter when it should be lower case, then link won't work.
Hint: go to Wikipedia page, copy link off the browser URL, and then paste it into the Link Location box.
To make a link to your homepage: highlight any text, for example Home (for homepage) , then click link icon, and fill in following web location: http://bobswebsite.org
Kompozer will make the link, and it will appear on workspace and look like ordinary link seen on any webpage.
Save icon
12.
Homepage is titled: index
Larger image
Click Save icon > Page Title box comes up
Your homepage is always titled: index with a small "i"
Your homepage must be title index... it cannot be titled bobswebpage.org
bobswebpage.com is your domain name, but not name of homepage.
For reasons too long to explain, all main homepages must be titled index.
So your first page is always titled index. This will be your homepage for bobswebpage.org
Fill in the title with index, and Kompozer automatically saves in correct format: .html
Review: Your web hosting service registers your website domain name bobswebsite.org, and your homepage or main page for bobswebsite.org is titled index.
When page is done, you will load index into the web host server, and this is covered later in the tutorial
You can make as many pages as you want for the same website.
Only 1 page is titled index.
To make another page in Kompozer, click 'new' icon and it opens a blank file where you can create another page.
14.
Only the Homepage is titled index. You can make as many pages as you want. Other pages are titled whatever you choose:
Do not title more than 1 page with same name. Each page must have unique name, so it will have a unique, exact web location.
Tip: do NOT leave any spaces in your title, use dash to fill spaces
Page title is what you enter when saving a webpage. The save-as title is not the same as the header 'title' that you type at top of webpage
Page title is what comes up when you click save-as, and title box appears
I suggest choosing a title that matches the words you would use to search the web to find your content
For example a second page on your website could be titled: Bobs-spaghetti-recipes.
Remember the page title is not the same as what you type on top of a webpage. The page title cannot have spaces, and must have hyphens or dash between each word.
You write whatever you want on new webpage, then click save... page title box comes up and you fill in: Bobs-spaghetti-recipes
Do not add .html. to end of title since Kompozer will automatically do that for you.
Notice the hyphen or dash between each word:
Always use dash or hyphen between words and letters when saving a new page
Another example: Bobs-recipes or How-to-cook-stew
Notice the dash between words. Always fill spaces in title with hyphen
Once second page is done and saved, you will want a link located on your homepage that goes to the second page:
> simply highlight any text on homepage, click link icon top of Kompozer, , then type http://bobswebsite.org/Bobs-spaghetti-recipes.html (this is the exact web location), and Kompozer will create a link
Change link on Kompozer: Once your link appears on Kompozer page... double click the link and link properties box appears and you can delete the link or change the link.
Notice the link properties box shows the exact web location typed into the properties box.
Once your pages are loaded (will cover this topic later), you want to check that all your links work correctly.
A different example: another page could be titled: How-to-cook-stew
> simply highlight any text on the homepage > click Link icon at top >
and fill in the exact Link Location for How-to-cook-stew which looks like this: http://bobswebsite.org/How-to-cook-stew.html
Notice the link begins with your website http://bobswebpage.org ... it does not start with http;//index
The link location for your homepage is http://bobswebpage.org
Since your second page will be loaded into your website, the web location for another page is http://bobswebpage.org/How-to-cook-stew.html
Be sure to put .html at end of each web location.
Please note: capitalization matters
If the page is titled how-to-cook-stew with small h.... then the web location must match exactly with small h
If the domain is bobswebsite.org ... then all web link locations must start with http://bobswebsite.org/
If the domain is Bobswebsite.org, then the web location must match that exactly with capital B
If you add extra period or space or comma anywhere in link, the link location will be incorrect and not work.
But now you also want a link on spaghetti recipes going back to homepage
Again... highlight any text... clink link icon and link properties box comes up, then fill in http://bobswebsite.org
http://bobswebsite.org will go to your homepage
15.
Larger image
Kompozer will save files in whichever folder you choose.
Open the folder, and find the file titled index
Find index > double click index and it will open in your browser
Note: .html web pages automatically open in your browser because Kompozer saved the file in .html format, and your computer knows to open .html files in the browser.
16.
Word documents are .doc format, and your computer knows to open them in Word document.
Adobe Reader is .pdf format
Images are in several different formats: .jpg or .JPEG or .gif or .png format
Your computer opens different formats in specific ways.
Webpages are in .html format
Your computer automatically opens .html format in your internet browser
For example, here is the exact web location of this page: [Notice it ends in .html]
Copy the web location and paste it into any browser, and it opens the exact, unique web location of this webpage
http://waterheatertimer.org/Make-your-own-website-1-16.html
What is html? It is a basic programming code used for websites, and Kompozer makes it simple since it writes the code for you and automatically saves in .html format
1. get a web host service and domain name from web hosting company
2. Open Kompozer and Make tables
3. Change tables
4. Add background color to tables
5. Add text, edit text
6. Make a link
7. Save homepage as index
8. Title and make links to your other pages
9. Open homepage in browser
Load your webpage to the internet server
