Create Your Own Website

1|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Index:



Intro Create Your Own Website Page 3

Chapter 1 Why You Need A Website Page 6

Chapter 2 Setup Time… Page 8

Chapter 3 Web Editing Explained Page 10

Chapter 4 Adding Text To Your Web Page Page 26

Chapter 5 Changing Name Servers Page 36

Chapter 6 Publishing Your Web Page Page 47

Chapter 7 Web Page Sizing Page 58

Chapter 8 Adding Character To Your Page Page 72

Chapter 9 Creating A Link For Your Web Page Page 96

Chapter 10 How To Create Multiple Web Pages Page 101

Chapter 11 Linking To Another Website Page 105

Chapter 12 Spacing And Tables Page 109

Chapter 13 What Now? Page 116









2|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Introduction





The online world is one that contains masses of

information, endless interaction as well as one big

opportunity.



We are in an age where the internet provides a large

part of the world with the ability to keep informed

and stay in touch. However there is a world unknown

to most where a number of people are achieving

incredible incomes working from home and riding

the massive possibilities the internet provides for a

work at home lifestyle.



If you are reading this book right now then chances are you have most likely heard that the internet

could provide you a better lifestyle, your own business and the opportunity to work from home.



If this is true then you are correct as the last few years has bought about a change online for the better,

where many internet marketers have been created and the industry itself has flourished. If you have

simply done a Google search for “how to make money online” I am sure you were bombarded with

glossy advertisements, smiley faces and out of this world income claims.



So is it really possible to earn money online? This is a question that I was fortunate to have answered

very early on in my career; however it has been a fight to reach where I am today now writing this book

to you.



My journey started just like in the movies. One day I was with my parents visiting a rental home of

theirs, I recall walking into the place and meeting a fairly large man by the name of Mohammad

Ali…Now every time I tell this story I seem to get very odd looks but trust me my parents really did have

Mohammad Ali living in their house.



So anyway this meeting with Mohammad Ali when I was only 17 was one that would transform my

future and the possibilities the online world held. Before I met Mohammad I had never heard of online

marketing or ever even considered the possibility of selling information products online. Mohammad

had just recently quit a management role at Harvey Norman in order to run his business online. I

remember talking to Mohammad and hearing his email go off every five minutes that we

talked…”Bing”…”Bing” each time it went off he would laugh and say “Another Sale”. While I sat down

with Mohammad and found out about internet marketing I witnessed him earn over $200 in just that

hour alone. It was incredible, for a 17 year old $200 was a lot of cash to be making.



Over the next 6 months Mohammad would move to Auckland with his Wife $300,000 richer…



3|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

The only issue was that he had only left me 1 book, which I for the life of me could not understand. It

would talk about these html thingies and sales pages. I knew that if I did what Mohammad had done

that I could make money online…I had witnessed it with my own eyes, but for the life of me I couldn’t

grasp how it could be done.



Simply out of frustration and not having the slightest clue

where to start I gave up…I went back to working the 9-5

including part time as a bouncer of all things.



Two years would pass until the online marketing

opportunity would literally slam me in the face knocking

me to my senses.



Now I wake up and work from home each and every day

and have done so for the past year. In fact you can visit

my website that I created at http://sambakker.com. It was not an easy path though and I am going to be

real with you, it took a lot of hard work and at times I wanted to quit. Now that I have broken though

those barriers and make a living online though, I am happier then I have ever been and even more so

that I did carry it though and reach my goal of producing an income which allows me the freedom to

work from home each and every day.



It’s almost a daily occurrence now that I have people from all parts of my life asking me how I make

money online. For this simple reason I have written this eBook.



My promise to you is….



By the end of this Book you will have your own working website including multiple pages.

You’ll know everything you need to know to create design and publish a website and more importantly

you’ll be able to do it over and over again any time you want.



Before we move on there are some facts I need to share with you about this business that many others

won’t.



The majority of people who start an online business will not make any money….



That’s not to say that there aren’t a large number of people who don’t make money online because

there are. People fail because for some reason there seems to be this mentality that the online business

is easy…I will tell you now that it is just like any other business, It will take time and a steep learning

curve, you will make mistakes however if you stick with it and learn what you need to do in order to

succeed then you can make a very good living online.



Another reason that I believe a number of people fail to make money online is because of all the flashy

incomes claims that are made by some internet marketers, claiming that you can make thousands within

days online. This of course is not the case as these things take time.





4|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

In my experience a lot of people often get confused when they enter the online world, they see so much

information available and go into a mode of constant learning each time they see a “New way to make

money online”. This rotating path leads only to ‘information overload’ for most people and quite frankly

they don’t progress passed it.



I am telling you this now so that you don’t make the same mistake that so many do and throughout this

book I have included a number of valuable lessons that will save you a lot of time on your journey to

making money online.



The best advice I can give…



The best advice I can give you before you embark on creating your website is that this is a

business...Treat it exactly how you would if you just bought a large Franchise because if you do this as

well as keeping disciplined with the future in mind and the right attitude you will find success.



There are a number of different ways to do things online however I would advice that you pick one and

stick with it making continued progress towards producing a full time income. In my opinion the method

that I am going to share with you today will provide you with some massive steps in the right direction.



So lets get right to it then…









5|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 1 – Why You Need A Website

So why do I need to build my own website?

Now this may sound like an interesting question however it is not one that I could answer until I had

spent about 2 years searching for a way to make my online business work. I say this because as soon as

you run a Google search for “Create a website” or “Build a website” you’ll see two types of companies.

Those trying to sell you their web design services and those who offer free websites for you to use as a

package. Both of these should be avoided and there is a very good reason why.



Let me first of all start with the first website I wanted to create. Me

and a friend of mine had the fantastic idea to build a fully fletched

advertorial site for home based businesses when I was first getting

my legs online. We were going to make this website fairly basis but

with the intention and purpose of recruiting others into our home

based business opportunity.



We went ahead and had a meeting with the first designer who we

looked at online. He gave us some time to talk through what was

involved for a website with multiple pages and we talked about the

concept for all of 15 minutes. When we were done talking he

informed us that the website would cost $2000 to create. Our jaws dropped, we hadn’t even established

that this website was going to work and they were already trying to suck us dry. Not only that but

additional maintenance on the website would cost $50 per hour.



So apart from the cost of having a designer create your website what other issues do we face?



Well what if your website goes down? What are you going to do if the designer isn’t around when it

happens? It could mean for you the loss of a lot of money.



Or what happens if it comes time to add another page to your website? Are you really going to have the

skills to do so?



Free Websites…

Let’s look at the other scenario which is, that you use an already made free affiliate which incidentally is

where I first started online.



Actually before I dove into that I better explain exactly what an affiliate is and why it is so important

online in case you haven’t come across the term before.



An Affiliate is basically an online partner. In order to become an affiliate online you just have to agree to

sell someone else’s product for a percentage of the profits (Average being 50%). I guess it could be

closely compared to a full commission sales man in the offline world.







6|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Affiliate Marketing is very popular online and a lot of successful marketers take part in affiliate

marketing. It’s important to note though Affiliate Marketing should only be attempted if you already

have a database of people you can market to. This is because as an affiliate marketer you are given a site

to promote as well as a product but not told how you can actually do it. This in turn leads to failure and

frustration for those who don’t yet have a database of subscribers or the ability to attract buyers online

at will.



For this very reason you should not consider affiliate marketing or using a free affiliate marketing

website until you have built a database of contacts which you can offer products to. I will dig more in-

depth into creating a database and its importance later in this book however for now let’s get into the

benefits of creating your own personal website.







The Benefits Of Creating Your Own Website



 You’ll learn all you need to know in order to have

complete control of future changes to your

website and the ability to fix any part of your

website if something was to happen.



 You’ll have full ownership of your own valuable

piece of internet real estate, this is essential if

you want to make a living online.



 You’ll be able to create more websites in future which is going to mean that your

marketing efforts will be much more effective.



In short you’ll have full control of your business online and as things grow this control is going

to become more important.



A website is your ticket to establishing a long lasting internet business so it is essential that you

learn what you need to now so nothing will stop you when your business starts to build in

popularity.









7|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 2 – Setup Time!



Now if you are completely new to creating a website I don’t want you to worry because over

the coming chapters you are going to learn everything you need to know in detail to have your

website up and running today.









Choose your domain name:

First of all it is important that you choose a domain name. What a domain name is is the

‘website address’ that your website can be found on when someone types it in.







This is your websites identity and a brand for your website so it is important that you choose a

domain you would like your website to continue to be associated with.



It is also important that you choose the right extension for your domain name. For example, if

you want your website to appeal to a worldwide audience then I would recommend you use a

.com domain name. However if you were say a local business who lived in New Zealand then

you would most likely want to register your domain name as a .co.nz because it is specific to

the country. For the benefit of this guide, I recommend that you purchase the most common

domain extension which is .com





8|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You can usually buy a domain for about $10 at a domain registrar. I recommend that you use a

website at http://www.namecheap.com to register your domain name. Their support is second

to none and if you need a hand at any stage in the process they will help you out.



Choose a hosting account:

Once you have bought your domain then you are going to need to purchase a hosting account.



When you buy a hosting account for a website what you are doing is hiring your space online

just as you would in the offline world if you were to hire a space in a mall. The hosting account

that you buy will enable you to show your webpage’s online.



Here is an example of where a hosting company fits into the scheme of things:









There are many great hosting companies around online and you can expect to pay around $5 –

$15 per month for web hosting. I personally recommend http://www.justhost.com as they have

been a very good company for me to deal with in the past and again the support they offer is

truly excellent.



Once you have figured out which host is right for you then they will ask you for a few very

straight forward details about yourself. Once you have signed up you’ll receive an email in your

inbox with your user and password details.

9|P ag e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 3 – Web Editing Explained

Creating your first Web Page

In order to create your first web page you’re going

to need to use something called a web editor. Now

I know that this may sound a little scary but I

assure you it’s really not. I will from now on be

providing you with detailed screenshots and also

the opportunity to click through to videos where I

talk you through the steps in detail. Now

remember you are going to be creating your own

website and in order to do this it is important that

you stick with me throughout all the steps and in

no time you’ll be finding the whole process a breeze .



So what is a web editor you may ask?



Well a web editor is much like Microsoft word except a version which can change the

appearance of certain pages online. It recognizes text that you type in as well as images and can

format everything in a way which can be added online as a web page or website.



Now there are a number of different web editors around, if you talk to a web designer chances

are they will rattle off something like Adobe Dreamweaver or InDesign. Fortunately we don’t

have to go near those editors because all we need is a very basic and free web editor which is

available online.



What we need to do now then is download the website editor in order to begin using it.



The web editor which we will be using today is called KompoZer and can be downloaded for

free at http://moderncogs.com/kompozer



Now if you are not used to downloading files online and installing them then I have prepared a

full video walkthrough for you here which will show you all the steps which you need to take.



Click Here to watch a download tutorial



How to Download Kompozer:

10 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Windows and Apple Macs have different versions of this particular editor.



In order to download your copy of Kompozer for windows use this link:

http://moderncogs.com/kompozer



However if you are a Apple Mac user then you can use this link

http://moderncogs.com/kompozermac



Once you click the download button the following box will appear asking you if you would like

to either “Open With” or “Save File”









Select “Save File” and then “OK”



The files will then download fully, if you are using the firefox web browser it will look like this:









Now in order to open this file and install the KompoZer web editor all you need to do is double

click on the image of the computer you see above in the download tab. Once you have done

this the installation program will start.



11 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Click “Next >”



You’ll then be taken to the following screen









12 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

What this agreement is, is that you agree to the rules of their license when using the software. If you

would like to read the license agreement then you are welcome to do so. Afterwards select “I accept the

agreement” and click “Next >”









13 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You now have the ability to select where abouts on your computer you would like the files to be held.

This step is much similar to saving a Microsoft word document or any other file. If you are not happy

that the files are being added to “Program Files” then you can select “Browse” to choose from other

places on your computer. If you are satisfied that “Program Files” is the best place to store the KomoZer

files though then you can click “Next >” and go to the next screen.









14 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You now have the ability to choose what name you would like KompoZer to appear as. To keep things

simple, don’t rename KompoZer and instead click “Next >”









15 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

When you get to this next menu you’ll notice that both “Create a desktop icon” and “Create a Quick

Launch icon” are both un-ticked. Click on the boxes to tick them so that you will be able to see the

KompoZer icon on your desktop or “Start” menu for quick access at all times. Then click “Next >”









Now just click “Install” to add the web editor to your computer 









16 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

KompoZer will then run and install the item like you can see in the image above.









17 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Finally all you need to do is check that “Launch KompoZer” is ticked and click “Finish”



KompoZer will then open and we are ready to start creating our first web page.



First of all, in order to access kompoZer again in future all you will need to do is go to your desktop on

your computer and double click on the following image:









So now it’s time to get back to KompoZer. You’ll notice that there is a “KompoZer tips” popup that

comes up.









Use the “X” in order to remove this popup so that you can get started using KompoZer…



Now you will be able to start creating and editing your web pages.



This tool is very simple to use as you’ll find out soon as well, it is just a small step up from Word.



First of all I need you to learn the basics of this tool In order to setup the first page ready for editing.







18 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Here is the main view of KompoZer. I would like to first of all draw your attention towards the top tabs

“File, Edit, View etc” These hold a lot of importance for this tool and we will dig into them in details

shortly.









Next we have the following menu, this menu provides us with some valuable options such as “Open”

which allows us to open previous projects, “Save” which allows us to save paves and “Publish” which

gives us the ability through the tool to Publish our pages to our url. There are also some other options

on this toolbar such as “Anchor, Link and Image” which we will use in the development of our first page

in one of the coming chapters.









Finally we have a tab which is currently labeled (Untitled). This is our first web page. You’ll notice that

there is room to the right of the tab as well; this room gives us the opportunity to add another web page

so that we can navigate multiple pages with only a few clicks.





19 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You’ll also notice the following three options at the bottom of the web editor. These each represent a

different way to edit the page. “Design” gives you the ability to use this web editor much like Microsoft

Word in the way you can just write text and it will add it online, this is the option that you will use 99%

of the time in this course. “Source” gives you the ability to look at the coding of the page (Which sounds

hard but trust me it’s not) and “Split” gives you the change to edit both at the same time.



Ok so now that we have established the basic options we have available to us it is time to start the first

part of your web page creation process. This process should always start by naming the page. There are

a number of reasons why naming a page is important. Here is an example of one of how eBay has

named themselves.









You’ll see in the top of the task bar the words “Ebay – New & used electronics, cars, apparel,

collectibles, sporting goods & more at low prices” This is Ebay.com’s title



You need to add a title to every page you create which is related to what is on the page. This is not only

good for telling visitors to your website but it will keep you informed about what page you are on as well

as Google. I will not get into the benefits for Google right now however if you were to run a Google

search you would see a number of results like the search I ran below.









As you can see the title is what shows in these Google results. Where your website is seen in Google is

important for what is called Search Engine Optimization or SEO for short. SEO is defined by where your

website is featured in the Google search engine. Where your website features is important because it

could mean you get a lot of traffic to your website for little work.





20 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Don’t worry about that for now though there is plenty of time to fill you in on Ranking in Google in

another session. For now though let’s focus on changing the title of your page.



Click Format









It will then provide you with the following options:









Click on “Page Title and Properties”



You will then be taken to the next page which is:









21 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now this menu gives you the opportunity to edit some background labels for your web page. First of all

let’s name your page where it says title:









22 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

As you can see I have named my page “Create Your Website Test Page” You can name the page what

you want to but keep in mind that it needs to be related to your page in some way. I would advise

looking through Google for similar pages to see what others have named there’s. This is nothing

complicated at all though and at this stage it is not important what you call the page because we are still

learning. One thing to keep in mind is to always use 60 characters including spaces or less for your title.

This is because Google will only show 60 characters when people search for your website.



While we are in this menu, let’s now also add the author of the page and the description.



The author is pretty self explanatory so just write your name as I have below.









23 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Great! Easy as that.



Next let’s write a small description for your page. This description will show in Google and also tell

others about the web page which you are creating.



Here is an example of a description from Google:









This description should be no longer then 140 characters long including spaces and give a brief overview

of your web page. Since you may not yet be sure what your website is about, you can just add a test

description for now.



I added the description: A create your website course test page for people who want to learn how to

make their first website









24 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now that you have completed this step, click “OK”



Lets see what has changed to our web page now…









You can see that the title is now showing in the top bar of KompoZer where it should be.









Now only that but you’ll notice the name of your page is featured in the tab above the white editing

area. If you can see both of these parts changed then you have carried out this step correctly and you

deserve a pat on the back ;). Guess what the next step is then?





25 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 4 – Adding Text To Your Webpage



It’s now time to start adding the first text to your web page. I don’t want you to worry about how this

will look or what you write because we just want to get a feel first for how to add text and have it show

online.



Here is an example of what I have written below on my own web page









Feel free to copy what I have written or write a couple of sentences for yourself.









Saving your Web Page

Now that you have added a title to our page and added text there is something that you must

always remember when you do something in KompoZer. You must always remember to save

your page, I can’t emphasize the importance of doing this enough.



This is the one step of the process so far which is much different to Microsoft Word. When it

comes to saving a web page it is a bit more of a process, it’s not hard or anything but you will

need to get it right.









26 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

I can recall when I first started online saving files was one thing that I was never told how to do,

as a result I spent weeks without a clue of what I was doing wrong. When it clicked to me it

seemed so obvious and basic.



Make sure you focus for this section though so you don’t have to make the mistakes I made. If

you feel like you need a coffee break, now is a good time to do so, so that you can come back

ready and revived to get this process right.



Step 1: Go to the “File” tab at the top left hand side of KompoZer









It will then drop down the following menu



Click Save As…









Once you have done that you’ll be shown a folder on your computer called “My Documents” as

you can see below.







27 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Step 2:



Go up to the top right hand side of the folder and select the icon which looks like this



Once you have clicked on that icon a new folder will appear called “New Folder” as you can see

below









28 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Use the mouse to right click on the folder named “New Folder” and select “Rename”









29 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Once you have selected “Rename” you will be given the opportunity to rename the folder.

Rename it “My Site”









30 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now what I want you to do is double click on the new folder you created called “My Site” so

that you’re inside the folder as shown below.









31 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

This folder has been created for the website which you are creating. From now on, everything

that you do to your website including any files whether they be images, text or anything else

need to be added to this folder first.



As you’ll notice there is nothing currently in the folder rendering it 100% empty. This is good

and completely normal.







Now what we need to do is create our “File Name”. You’ll see that currently the name is

“Create Your Website Test Page” because that is what I decided to name my title as. Yours may

be different depending on what you wrote as your web pages title.



Either way we do not want to Save our file with a name like “Create Your Website Test Page”

this is because if we do then when we add our page online it will not show as our main web

page which is what we want it to do.



In order for our new page to be added to our main domain name which we bought earlier we

always need to name the first page or main page we create for a website “Index.html”.

32 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

The reason for naming it so weirdly is because

“Index.html” is what our website host will recognize as the main page of our website. It will not

recognize other names.



For this reason we always need to name the main page we create that we want to show first on

our website “Index.html”.



In order to rename the file just click and drag your mouse across the current text then type in

“Index” like I have below.









You’ll notice now also that underneath where I typed in “index” there is another line of text

which says “HTML Files” and before that “Save as type”. This is telling you what file extension

you are about to save the file under. There are a number of different file extensions available to

save which serve all different purposes. For a web page or website though we always want to

save as type “HTML Files”. If you see “HTML Files” in your folder then proceed to click “Save”









33 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

CONGRATULATIONS!!!



You have now saved your first web page. This is all very exciting. You’re well on your way to

having this website live and published on your very own website and it’s taking next to no time

at all.



Just to remind you that if you need to access this file again in future all you will need to do is go

to “My Documents” click on the file called “My Site” and you are at the folder you need to be.



In order to now check that the file has been saved, return to KompoZer and check the top

status bar, it should now show the following:









As you can see here the following “*File:/…/index.html+” has appeared in the status bar. This

tells us that our file has been successfully saved.



Loading a file for re-editing

In order to load a file which you have saved in future all you need to do is go to the “Open” icon





34 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Click on Open and then locate where you saved the file. In our case it would be “My Documents

> My Site” and then select the saved file which has been named in this example “Index”









Excellent!! Now that we have mastered creating a website folder and saving an html file we are

ready to move on to publishing our page.



If you still would like to run through this once again to make sure you fully understand this

chapter you can view a video tutorial here.









35 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 5 – Name Servers Explained



Now it is important that if you are using a domain registered on a separate website to your host

e.g. Domain registered at Namecheap.com, Hosting account registered at Justhost.com



Then you will need to connect the two. This is done through what are called Nameservers.



This process is a very easy one which I have filmed a video about here.



I will talk you through this process now so that we can get back into publishing our website.



If you have registered your domain name on the same host as you bought it from e.g.

Godaddy.com then you can skip this section.



There are two steps to connecting a domain name with a host. The first step is to connect the

domain with the host and then the second is to add the domain with the host. Both are very

simple and I will cover them in detail.



First of all what you need to do is go to the account you setup to register your domain. With

every purchase you make in buying a domain you need to sign in.



I will be using NameCheap for the example:



Here is a screenshot of my domain backend









36 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You’ll see that I have 10 different domains currently in this account.



Next you need to select “Manage Domains” in the toolbar









37 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Once you have selected “Manage Domains” you’ll be taken to a page that looks like this









38 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

This shows you the domains which you own. Chances are you will only have one domain

showing on this page.



Click on the domain which you would like to have your website added to. In my case it will be

“MrWebCoach.com”









39 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You will then be taken to the next screen









40 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Select the option “Domain Name Server Setup”









Once you have selected “Domain Name Server Setup” you will be taken to the next page









41 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You have now reached the area that you need to be in, in order to change the domain servers.

The information you enter into the top two forms is the information for the domain to connect

with the host so your files show on the URL when you publish them to your host. This is a

process you will have to complete for every domain you buy that’s from a website different to

that of the host.



In order to find the name server details for your hosting account a quick Google search using

the keywords “*Insert Hostname* Name Servers” will find you the information you need.



Because I have bought my hosting at JustHost.com I carried out a Google search and found out

that my Name Server codes which I need to enter are:



Ns1.Justhost.com



Ns2.Justhost.com



If you used Justhost to buy your hosting then you can enter the two above codes into the

spaces provided and connect your domain with your host.





42 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now that you have entered in the Name Server information press “Save Changes” and you have

successfully connected your domain name with your host.



Add a domain to your host

The final step in connecting your host and your domain is to do is “Add on” a domain. This quite simply

is just a process of notifying the host about which domain the information will be added onto.



It’s very easy with Justhost as well if that was your chosen method.



First of all log into your host.



Once you log into your host you should be presented with a control panel like the one below.









43 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Scroll down till you find an icon called “Add-on Domains”









Click “Add-on Domains” and you’ll be taken to the next page









44 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Next what you need to do is fill out the following forms. These are very basic and all you really need to

remember is what your domain name was. Choose a password and let the “Document Root” fill itself in.



Here is my Add-on Domain once I had finished.









45 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Once you have done this then click the button “Add Domain” and you’ll be told that the add-on domain

was successful like below:









Once this step is complete you can go and get another cup of coffee because that is all that it takes to

connect your domain with your host and you now know how to do that. I am sure if you asked the



46 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

majority of your friends who are savvy internet users they wouldn’t even be able to tell you how to do

what you just did. Good Job!



When you reset Name Servers it can take up to 24 hours to change. If this is the case and in the coming

sections you get an error when you are uploading your website, don’t panic…chances are the Name

Server is still in the process of being reset.



Alright now that you have successfully connected your host and your domain it’s time to get back to

publishing your first web page online.









47 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 6 – Publishing Your Web Page









That’s right, it’s that time now!



Ok so I know that we haven’t exactly made our website the most glossy thing in the world, but

it’s time to upload your first page onto the internet so that when we do get into making your

new website look a lot nicer you’ll be able to update it online any time you like.



This section is probably the toughest in this book. Not because it’s hard but because it is going

to be difficult for me to explain. I can’t emphasize the importance of taking your time on this

chapter to get it right.



If you at have access to high speed internet then it might be a really good idea for you to watch

my video tutorial as I talk you through this step.



View the video tutorial here



Now if you don’t yet have your domain or hosting then it is impossible to add your website

online so I recommend that you go ahead and do this right now.



Again for you I recommend that you use http://www.namecheap.com for buying a domain



I recommend http://www.justhost.com for buying hosting.









48 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Lets get into it then…



Today we are going to be using the internal “Publish” button KompoZer offers. With most

things online there are many ways to do things and this is only one method of adding a website

to the internet. For what we need to do today using the easy Kompozer publishing function will

make things simple to carry out.



So click on the “Publish” Button in the KompoZer menu bar









Once you have done that you’ll be taken to the next menu which is:









When I first saw something that looked like this when I was starting out, the first thing that

came to mind was “You can’t be serious”. After I worked out what each of the necessary empty

forms were though things got a lot clearer.



What we now need to do is create what is called an “FTP account” with our host “Justhost”.



49 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

This FTP account will enable KompoZer to communicate with the host and send add the files

onto the web.



This step is actually really easy; all you need to know is where to get the right account

information. Thankfully Justhost make it very easy to get this information.



If you are using another host this step may vary, however you are still looking for the exact

some information that we are and the options should be the same as well.



First of all you need to log into your Hosts control panel.



Now that you have logged in, you should be presented with the following view









Next scroll down till you see an icon that says “FTP Accounts”









50 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Click “FTP Accounts” and go to the next menu which should show as follows…



You’ll notice below that you are presented with the opportunity to add an FTP Account. This is exactly

what we want to do.



You will also notice that I have a domain called “dietsolutionprogramtips.com” with the @ sign in front

of it. I have this there because it is the main domain which was registered to my account. It does

however not effect in any way how we create an FTP Account. You should have a domain of your own

which has been added beside the “Login” option as well.









Enter in a name you would like as your “Login” as well as a “Password” you can remember and leave

the other options as they are.



Once you have done that your FTP information should look similar to mine below







51 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Once you have completed this so it is looking much similar to mine then click on “Create FTP Account”



You will now be given all the information that we are going to use to fill out the nasty “Publish” form

that you opened up at the beginning of this chapter.









52 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

My settings are:









Now that we have setup our FTP account in our host we are going to use the information it has given to

us to publish our website in the following panel.









Here are the FTP settings inserted into my publishing page.



I will now talk you through each of these forms and what you need to add. If you have any problem in

future with this menu you can mouse over each of the forms and it will give you an explanation of what

you need to add.



53 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

The first option we are presented with is “Site Name” this is the name that you would like to call your

site. This can be called whatever you want it to be however for now name it after your domain like I

have above.









The next option is the http address of your homepage. All that you need to add for this form is your

domain name with http://www. At the front. We need to add http://www. At the front of our urls

because without it the internet will not recognize our website as a domain name.









Next the “Publishing Address”, this is one of the more tricky things to find however you should have

received an email from your host when you purchased the hosting account which will give you the

information you need in order to add the right detail.









Here is an example of an email I received:









54 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Where I have added the arrow is the address that you are going to use.



Just add “ftp.” “ftp://ftp”. In front of that domain you are given in the FTP information and it will be

correct.



If you run into trouble in this step or you have lost the email it is the easiest option to get in touch with

your web host about it. They are very quick and supportive when it comes to matters like this.



Finally for the username and the password we will use the same details that were created for us by our

host.









Remember?



Here is the screenshot of where you should have got your information:





55 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

The username is your FTP Username and the password is whatever the password you typed in.









I can understand that if this is your first time hearing about FTP let alone actually using it to upload a

web page, it is a big step. If you have not yet been able to get the settings correct yet don’t worry just

get in touch with your web host and they will talk you through it for free. I can remember the first few

times I added a website I had to do exactly that.



Now for to finish off the chapter it’s time to do something that you’ve probably been very excited to do

for awhile now…



And that is PUBLISH!!!



Click the button at the bottom of the settings as you can see below and your website will be live within

the next few seconds.









56 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now you will have returned to your editing page.



Before we move onto anything else though it is always essential that we test an upload to the web

worked.



Type in your domain address into your internet browser….



Click “Enter”



Then you should return the following successful page!









Congratulations!!! What an achievement. It is not every day you meet someone who knows now what

you do…



You have successfully created and now published your own website!



I bet that you’re surprised at how easy it really was, there really is no need for a designer or anyone else

when it comes to setting up and publishing a page. In learning this you have opened up masses of

possibilities for yourself online and I can guarantee you have just put yourself ahead of many people

online. If you would like to view a video describing the whole publishing process then you can do so here

57 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 7 – Web Page Sizing









As you’ll know if you have been on the internet for any sort of time, websites come in many shapes and

sizes. For the type of website we are going to build we need to ensure that we get the sizing right first

up so our pages can look crisp and sharp as their created.



Thankfully resizing a web page is very easy in KompoZer and can be completed in a few short steps.



Before we get into taking action though it’s important to understand when certain sizes online are used

and when they are not.



You’ll notice online if you’ve had a good look at other websites out there, that there are some pages

which appear in the center of the page and appear almost quite thin. What you may not know is that

there is intention behind the sizing of various websites and in fact it can have a big impact on profits if

done incorrectly. I will provide you with two examples of the types of sites that are around as quite

simply they are either “thin placed in the center of the page” or wide covering most of the page.



The first page I would like to show you is what I would usually call the “Plain website”



This is a website which takes up the majority of the available space from left to right like the example

below.









58 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now obviously we all know about EBay. It is a website that looks nice and uses a fairly wide design that

covers a lot of the page. Other websites which typically use large spaces are Ecommerce websites, blogs,

information sites and websites which promote local businesses or services. These websites tend to have

a number of internal pages and a lot of content.



The other common size is called the “Sales Page” website. This website typically is a lot shorter in width

and a whole lot longer than other sites. Here is an example of a sales page.









59 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

As you can see there is a lot of space on either side and you’re really drawn to the centre of the page.

These types of pages are some of the most popular pages online today with online marketers. This is

because they’re direct, they convert and they are very simple to create.



For the benefit of your learning today we are going to create the second option which is the sales page.

This is because if you want to make money online this is the best kind of website to start as you’ll find

out later on. If you would like to create a larger website after we have created our sales page website

then you will have all the necessary skills to do so as well by the end of this book.



So let’s get into it…









Resizing a web page

Currently your KompoZer screen will look like this









60 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

If your design panel does not look like this but still has an additional menu to the left hand side, remove

that menu by clicking your mouse on the right hand side outline of the menu and drag it to the right.

Once you have dragged it across near to the end it will disappear.



As you can see from the example above, our current website takes up the entire screen. This means that

it is currently the size of a normal website. We can tell this by looking at how far across the words go.



Another way to tell how far in width your website is, is by looking at the number just above the design

page that currently says “798px”. This represents the current width of the website and we need to

change that to something that is closer to “650px” as this is the average size of the type of web page we

want to create.



First of all we need to create an area that the website can be defined by. This is important because if we

define how big the page should be, we have the ability to do much more with it.



To define the page using a table it is very easy as you will be able to see below.



First of all open up a new web page



Then click the icon above the design panel that’s called “Table”.





61 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Once you have selected “Table” you will be shown the following form









Once you see this menu select the tab that says “Precisely” and you’ll now be shown the following form









Make sure that you set “Rows” and “Columns” to 1 as well as 650pixels in width.



If your form looks the same as the one above then click “OK”



Now your design view should look like this.









62 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Excellent! Now increase the length of the table. To increase the length, all you need to do Is select the

border surrounding it and then you’ll notice that small square like icons will appear surrounding the

border as shown below.









Select the square which is in the bottom centre of the form and drag it down holding the mouse button

down. This will increase the size of the form.



That wasn’t too hard now was it?



Now your form should look like this on the page.









63 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Great! now that your page is looking like the one above we need to centre the table which will also

centre our website. You should always centre your websites no matter what industry because websites

that appear on one side just plain do not look good on the eye.



In order to centre our website we need to double click inside the table so that a new window appears.

This window will have the title “Table Properties” and it has a number of options which will give us the

ability to successfully centre our new page.









64 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Click on the tab that says “Table” and it will show the following options









Select the drop down box beside “Table Alignment” and select “Centre”



Once you have done this then click “OK” and you will find that your website is now centered.



Good Job…









65 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now that you have successfully centered the page it is time to start to customize it. It is quite simple to

customize a page.



Let’s first of all start by creating a background color for our webpage.



Click on “Format” in the top menu bar then “Page Colors and Background” and then “Use Custom

Colors”



You’ll now be presented with the following window.









66 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

When you have this window open click on the white color image beside the word “Background:”









67 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now you have the opportunity to select a color of your choice for your web pages background.









Once you have selected a color that you like click “OK” and then “OK” again and you’ll be taken back to

your web page.



What you’ll notice is that the color has flooded the webpage entirely with whatever color you selected

so we now need to change that…









68 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

To change the table so it appears as white on a blue background you need to again double click over the

table to activate the following window.









69 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

As you can now see your in the “Table Properties” again. Click on “Table” to go to the next window

which will look like this:









Click inside the clear square you can see circled in the example above beside the words “Background

Color”



Select white



Then select “OK”



You have now successfully re-sized and added a color scheme to your web page.









70 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Good Job. Now that we have completed this step it’s time to get into the ‘fun’ that is adding content to

our page .









71 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 8 – Adding Character To Your Page!









It’s time to get right into creating a lively and attractive web page. The best way to customize a page is

to start by adding various fonts, colors and images to it.



KompoZer really does make the job simple.



By the end of this chapter you’re going to have all the skills you need to create a good looking page with

a nice font, various colored text and images.



Let’s get into it then.



First of all before we get into changing and testing fonts you need to type in some text that we can use

to test with.



Here is what I added to my page, feel free to copy and paste it into your web page:



The fact is that to do anything in the world worth doing, we must not stand back shivering and thinking

of the cold and danger, but jump in and scramble through as well as we can.



This is actually a quote by Robert Cushing but I thought that is was appropriate because you are really



72 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

jumping into it and fully committing to finishing your website which is excellent.





So copy and paste the quote above, or if you would like, write your own message so we can get ready

for the next segment which is….



How to change the font

First of all I know I keep mentioning it but this really is once again like Microsoft word.



It’s really just a matter of getting to know the icons and how everything works…



Alright I have just come back from the coffee machine with a double shot latte so it’s time to get right

into this thing.



You should have been able to paste in the text from the above chapter and your page should now look

like this…









73 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You can see the wording there in the text box itself. Currently the text is a default font however we can

change this very easily.



Now as you’ll already know, there are a number of different fonts available today. What I personally like

to use on websites of mine is the font “Verdana”. Let’s find out where this font is then.



First of all you need to highlight the text on your webpage. You can do this by clicking one end of the

text and then holding down the mouse and dragging to the other end of the text. You’ll see by the end

of it that you text will be highlighted dark blue.









Once you have highlighted the text on your webpage click on the tab that says “Variable Width”









74 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

If you have selected this then you will be able to view a number of different fonts in from the drop down

menu. You can see the options available below, scroll up and down to find what you would like to use.

For the example I have selected “Verdana”









If you are selecting the font “Verdana” as I have then your text should now look like this









Now that we have done that lets play a little bit with the placement of the text. Often on a page we will

need to centre the header text on a page or text down the page. This is very easy using Kompozer and



75 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

all you need to do is once again highlight your text so it appears as if it had a dark background and then

select the following icon









Once you have clicked on the “Align Center” icon you will see your text change and look like the

following









Good Job! If you have some issues centering the text then you can lower it by selecting the start of the

sentence e.g. Click before the word “The” from our example



Then push “Enter” and it will cause the text to go to the lower line which should solve any formatting

issues.



Using Bold, Italic and underline

Now it is time to move on to basic use of Bold, italic and underlining.



These three features can make a word, sentence or header really stand out from the crowd and should

be used frequently in website text to keep things interesting for the reader.



Let’s start with Bold.



To bold a word you need to first of all highlight that individual word. This can be done by simply clicking

the mouse either before or after the word then still holding the mouse button down dragging the curser

to the other side of the word so it looks like this

76 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Once you have selected let’s say the word “danger” all you need to do is click on the big icon with the

letter “B” on it.









This will then cause the letter to Bold like this: danger.



Next we want to add italics to the word in our text which is “Scramble”



In order to do this once again highlight the word “Scramble” and this time select the icon with a “I” on

the front of it like below.









Once you have selected the “I” you word will now look like this: scramble.



Finally let’s underline the word “fact”



Again it’s the same story, just highlight the word “fact” and then select the icon with the U on the front

of it this time.









77 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Once you have selected the U icon then the word fact will look like this: fact.



Use these three icons to emphasize different words and phrases on your web site effectively.



Alright now that we have learnt how to change font, format text, add Bold, italics and underline it’s time

to get into the next section which is resizing text.



Resizing Text

Resizing text is very easy and again very similar to that of the last section. All that you need to do is

highlight the text and then go ahead and click one of the following icons.









As you can see there is a small “A” and a bigger “A” used for the icons. When you select the bigger “A”

the size of your text will increase and when you select the smaller “A” the size of your text will decrease.



Here is what the result will look like if you click the larger “A” twice.









78 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Adding color to text

In this section we are going to cover the basics of adding colors to text. Different colors are used often

on web pages to bring out certain words or titles down the page. The most common use on the type of

website that we are creating is as a header.



To change the color of a specific word it’s no different to what we did when we used “Bold, italic and

Underline” in the Bold, italics and Underline section.



First off let’s change the word “shivering” into blue.



To do this first of all highlight the word “shivering” and then select the following icon in KompoZer









You’ll see in the image above all you need to do is select the front color square which is currently set to

Black.



We want to change “Shivering” to red though so in order to do that we need to click on the black square

and bring up the following window









79 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

When you get to this menu select the color you want to change you text to. In our case for this example

we are going to select a red color for our text. Use the “Predefined colors:” to the right to select a Red.

Then once you’ve selected red click “OK”.









As you can see “shivering” is now red. You can dictate the color of any text in order to create colorful

and attractive text for those visiting your web pages with ease now.



Next we are going to get into changing background colors so get ready.



Changing Background Colors

Background shading can be used as another method for really emphasizing words online and offline. It is

important that you learn how to do this correctly as chances are the time will come that you’ll want to

use it. Here is what background shading looks like.







80 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

First of all you need to once again highlight the text that you want to add a background to. Lets for this

example highlight the background of “danger”.



Highlight the word “danger” then click on the following icon.









Click on the pen icon in order to shade the background of the text “danger”.



Once you have clicked on the pen icon you’ll see the following window.









81 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Select a color such as yellow for this example (This is the most common background for text used)



Now your word should look like this:









Good job! You have successfully highlighted “danger” and can highlight the background of text

whenever you want to emphasize it in that way.



Next we want to take using background color one step further and highlight entire blocks of text.



I want you to first of all highlight the entire text on your web page and select the following icon.









You’ll see that the background square represents Background color for a block of text.



Click on the square that is currently white and it will now show you the following color window.









82 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Select the same yellow color that you used to change the text color before.



Once you have done that the background of your text paragraph should look like the following.









Now that we have created this color for our block of text we can also extend the color down the page.

This is a great way to make a web page look very attractive and compelling. I always add a slight yellow

color to my newsletters and this is how I do it.



You’ll see the height PX image on the left hand side of your web page as follows









83 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Use your mouse and click on the bottom line of the box that says 68px in it. Hold the mouse down and

drag the color down the page to the bottom of the page so it looks like this.









Now there is white space at the top of the page. This has happened for me because I added spaces

above my text by pushing enter. In order to get rid of that space if it is showing on your web page to is

by clicking on the white space right at the top of the page and clicking the “Delete” button on your

keyboard. This will move the color and text up to the top of the page.









Our webpage is starting to look pretty good.



If you don’t like your background color then I would recommend changing it again using the instructions

above to a lighter shade. The best part about knowing this information about creating a web page is that

you have the ability to go back and change aspects of your web page anytime you want.



We have learnt all about the various things we can do to text aliments on the page and backgrounds so

it’s time to add an image to our page.



84 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Adding Images

Adding an image is essential for a website because it adds character as well as giving the visitor

something to look at or associate with the pages content.



In order to add an image to your page, again it’s a slightly more complicated process then adding color

to text or with one click adding Bold to a word.



It needs just a little planning.



You’ll recall at the start of this book we created a project folder where we saved our website into. Then

we published the contents of that folder online. When we publish content online we do so with that

folder that we created. If there is anything which has been added to our web page that is from another

source or folder and not also in our project folder then it will not be uploaded and that aspect of the

web page will error.



This is a very important idea to learn when you are creating a web page. You must always add the image

to your project folder before adding it to your web page.



I will now talk you through the easiest way to do this.



First of all you need to locate where the image file you want to add is. In my case it’s in the “My

Pictures” folder of my computer.



Right click on the windows “Start” button and it will open up a window which contains a number of

different folders and files.



Drag the window to the other side of your screen by clicking the top blue task bar, holding the mouse

down and moving it to the other side of the screen









85 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now open up another window using the same method.



Right click on Start then click on “Explore”



Once you have done that right click inside both folders and select “View” and then “Details” this will

help the files appear more easily for you.









86 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Your screen should now look like this









We need to open two folders so that we can copy files from one folder to another quickly and easily.



In the first window you now need to locate your image. In my case this is in “My Pictures” so I will go

ahead and do that. In the second window you need to locate your project file. This will be called “my

site” and be located in the “My Documents” folder.







87 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

To locate a file just click on a folder and it will open beside your window in the next one. Also if a folder

you are trying to access has a + sign beside it, this means that it has other folders inside of it. To access

those other folders just use your mouse to click on the + sign and you’ll be able to see them.



Below you can see what my windows look like now that I have found both









Now right click on the image that you would like to add to your web page and select “Copy”









88 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Then once you have copied the image. Right click inside your project folder named “My Site” and click

“Paste”









89 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now your folder should look like this:









90 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Good Job! Now you have successfully copied the image file you want to use for your website to your

project folder. With all images you add you must follow this process and always paste the image into the

correct project folder for your website.



It is time to now add the image to your website.



Go back to KompoZer



Click on some empty space underneath the text









91 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now once you have done this click on the image icon as you can see below.









Once you have clicked “Image” the following window will pop up









You’ll see the words “Image Location:” across from that there is the folder icon. Click on the folder and

it will take you to your files.









92 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Select your image from the project folder “My Site” and select “Open”



You’ll then be taken back to the “Image Properties” window to find that the “Image Location” has been

filled in with where your file is located.









93 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Don’t do anything before you fill in the “Alternative text” which can be associated with your image.

Alternative text is important because if someone cannot open your image due to a slow internet

connection then they need to know what the image is. We can tell them by using good alternative text

to describe the image in a few words.



Write in some text which describes your image









Once you have added the “Alternative text” click “OK” and look what’s happened to your web page.

94 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You’ll notice that there are 8 squares surrounding the image. You can adjust the images size by dragging

these either out or in till you get the size that you want. When you are satisfied that the size is correct

then you can easily just click outside of the box and the border will be removed.



Congratulations!!! You have now successfully added an image to your page as well. Our website is

starting to really take shape so it’s time to publish it again.



Before you go ahead and “publish” make sure that you have saved the file.



To publish all you need to do is click the icon which says “Publish” and it will publish the index page and

the image to your website instantly.



If you have any problems with this section then all you need to do is go back to the section about ftp and

repeat the step again.









95 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 9 – Creating A Link For Your Web

Page

We are going to start to create the first 3 links on our website. In the section after this we will be

creating three new pages, but before we do that we need to be able to link them up so that visitors to

our website can click through to them from the home page.



This is quite a simple process.



First of all I want you to push enter until you get close to the bottom of your web page. Then I want you

to select the “Align left” icon which you can find here









Once you have done that then type in the following with spaces separating the text



“Home” “About Us” and “Articles” at the bottom of the page









96 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Your page should look like this…



I have named the links like this because every website should have a link to the home page.



Every website should also have a link to an About Us page.



And if you want people to stay on your website creating a section for articles is always very effective.



We will link these pages on the home page to other pages which we are about to create.



To link each of these words we first of all need to highlight over a word. Highlight over “Home” to start.









Once you have highlighted “Home” then you just need to go to the “Link” icon at the top of the page in

the task bar. It looks like this









Select the “Link” icon and then you will be presented with the following window







97 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

As you’ll see there is a space to insert a “Link Location”. Because we want to link to the home page we

need to use the home page file name. If you can recall we named the home page file “index.html”.

Because we named the home page “index.html” then that is what we will add to the “Link Location”.



In doing this we are telling the editor that it is the location we want it to send people when they click on

the link.



If you can’t remember for whatever reason in future what you called a page you would like to link to

then it is no problem either. The file icon to the right of the “Link Location” entry space gives you the

ability to navigate your files and find the correct one if you need to.



Once you have typed in index.html into the window as below then click OK









98 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now the “Home” text should look like this









Let’s now repeat the process however we are going to name the “About Us” and “Articles” pages

before they are created yet.



So first of all remember to highlight the words “About Us” and then click on the “Link” button.



This time because we are naming the file for the first time type into the space “about-us.html”



This is because when you create files with two words, you must always remember to add a

“-“ to them otherwise the web won’t recognize them because all it will interpret is blank space.



Also always make sure your file names are lower case. This is because the internet is case sensitive. If

you name a file with a capital and then tell someone where they can visit the page you created then

they will not be able to if they don’t type in the right case.



So your “Link Location” should look like this now









99 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Once you confirm that you window matches mine then you can select “OK” and the link will show as

follows.









Excellent! Good Job if you have made your links look like this, your really getting the hang of it if you can

do this step.



Finally to finish the three links off name the “Articles” link file “articles.html” and you will have

completed three links









Perfect! Now that you have whizzed through linking it’s time to get into the best part of this course,

which is…







Chapter 10 – How To Create Multiple Pages

It’s time to start creating two additional pages for the two links that we created. This section will be a

recap of what we have already covered more than anything so I am confident that you’ll speed though.







100 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

First of all you need to open up a new page. This new page will form a new tab alongside the current

one like the example below.









You’ll see that there are now two tabs, one has the title of your home page and the other is currently

titled (untitled). In future when you start to create even more pages you may need to navigate between

various pages. You can do this by simply clicking on the tab you want to open. Try clicking on the “Create

Your Website Test Page” tab now and see what happens. Now go back to the tab that says “(untitled)”.



Now that you have opened the new page again, we need to add a title as we did in the first segment of

this book. Go ahead and do so now.



Use: Format > Page Title and Properties



Once you have done that your tabs should both now look like this









Good Job!



Now I want you to first of all resize the page so that it is 650px like the other page and add in some text.

Make it interesting.



First you will also want to add in a title and making sure it is big and stands out. It should say “About Us”



Here is some text for you’re to type in to the About Us Page underneath the title:







101 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Welcome to this page, this is a page dedicated to showing you how cool I am for learning how to create

a website and doing so within less than a day. If you would like to find out more about this website then

you will have to click on the next page I create which will be a page with articles on it….Look at the

image below.



Excellent, now that you have copied and pasted your text in after making the appropriate changes your

About Us page should be looking like the page below.









Once have successfully created your About Us page, it is time to publish it to the web.



First of all make sure that you save the file in your project folder “My Site” with the name about-

us.html. If you do not do this then the page will not show when you complete the process.



Just as before select “Publish” and then visit your website url.



The pages should now look like this:









102 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

You’ll also notice if you scroll down that your links have been published as well. Click them to test that

they work.



Congratulations  you have successfully created a web page now with two pages.



Let’s finish off this section by completing the article page just as you have with these and then upload it

to the web.



The title should be “(Whatever your website is about) Articles” I am going to make mine about

Marketing so the title will be “Marketing Articles”



You may use the text below for your page.



In this section you can find a wide variety of articles that have been written to help you with your

marketing. Be sure to check back on a regular basis as we will update this page on a regular basis.

103 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Then once again add an image to the page.



Here is what my page looks like:









Once you have finished your page, once again remember to save it into your project folder with the

name you used in the link which in this case was “articles.html”.



Once you have finished that then publish it to your website and you now have successfully created three

web pages. Congratulations!!



I just want to nail home for a second what you have actually achieved, yes sure your not yet a web

designer creating flashy designs however you have successfully created a fully fletched website and

published it online. Very few people who have an online business even know how to do what you have

just done. The opportunities that you now have opened yourself up to are enormous.



Ok now it’s time to learn how to link to another website.









104 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 11 – Linking To Another Website

Often online there are resources or other websites that we want to give credit to or give our reader the

opportunity to view. This is called an “External Link” and is created just like the links we created before,

except it will take them to another website and not just another page in your website.



In order to create an external link it is very easy and much similar to the last links we created.



First of all we need to decide what we want to link to. In this case let’s link to “Ebay.com” because we

used eBay in a previous example of ours.



Now I want you to type underneath our last paragraph the word “Ebay” so it looks like the following.









Once you have written eBay I would like you to highlight over (like we have done about a million times

so far in this book) and then go to the same icon we used last time for linking which you can view below.









105 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Excellent now click on the “Link” icon and you’ll see the following once again.









106 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Now once again we need to use the “Link Location” space to add our link. Because the place that we are

linking to is on a different website and its files are not contained in our project folder we need to write

the full web address for that link. This means that if we are linking to eBay we need to add

http://www.ebay.com in order for the link to go to eBay when clicked.



Your screen should now look like this









Once you have typed in the external link URL then click “OK” and you have successfully added an

external link to your website. Good Job!



Now publish your website once again and you will be able to test your external link.









107 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Well Done! You really are doing well now. These skills are going to be such a great help for anything you

do online in future. I only wish that I knew this a few years ago when I first started out…no one taught

me and it has been an absolute battle at times as a result. Thankfully you will not have to go through

what I did.









108 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 12 – Spacing & Tables

You’ll notice that many websites around today look very nice as a result of the way the page is spaced

and the variety in which they add text and images. In this section you’re going to learn how you can do

this as well for your website so it can look professional and easy on the eye.



First of all you are going to use a table just like you did when you resized the page except for this time

the table is going to be much smaller and serve a different purpose.



Select the space a couple of lines under the “eBay” text you just created on your page and then right

click so the following menu is bought up.









Once you have selected “Table” you will be shown the following window, make sure that you then

select the tab “Precisely” to be taken to the following window.









109 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Make sure that “Rows” and “Columns” are both set to “1” and then push “OK”



Now you have created a table. Good Job, it should look like this.









Now what you need to do is decide how big you would like the table to be.







110 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

The following Squares give you the ability to resize the table any way you want.



I want you to drag the table so it is 250px long. You can look at the top above the main design page at

how wide the PX is of the table as you drag. This is the easiest way to adjust a tables sizing.









Now that you have correctly resized the table the next step is to center it.



In order to center the form, make sure the form is highlighted and then click the “Align Center” icon



It should now look like this









111 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Good job!



Now I want you to type in the following text inside the form



This form is used to add character to a page and also help emphasize a point.



Now that you have typed this into the form it should look like this









112 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

The next step is to add color to the inside of the form. This is a much similar step to when we shaded the

background of our main page in one of the earlier chapters.



Highlight the text and then select the pen icon in the toolbar.









Once you have clicked on the pen icon the following window will appear









113 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Select a color which will bring out the form from the page. Darker yellow is a color which is frequently

used to give this effect. Once you have selected a color press “OK” and you have successfully added

color to the background of your table.









114 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Excellent! Now that you have done this you are able to create new tables in your websites to add color

and flair to tables. You can also add images to these tables and emphasize parts of your web page you

want to.



You now have all the necessary skills to create a basic website from scratch.









115 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

Chapter 13 – What Now?

Now there is still a lot that can be learnt when creating websites however you now have more

knowledge then most. It’s crazy how many people want to make money online but don’t put in the time

to learn the basic skills to create a website. Now that you have made the decision to learn these skills

you are positioning yourself to get ahead and achieve what many never will.



If you would like to further your learning about

Kompozer they have a very good website

(kompozer.net) which can take you through a

number of further more advanced tutorials.

However you have all the basics that you need right

now in my opinion and if you continue to practice

and begin to setup your own website your skills will

develop and you will be able to create the site that

you want to.



I would encourage you now to take what you have

leant from this book and start putting it into

practice. If you have an idea for a website or something you would like to get online why not start now?



If you got hold of this book from one of my websites then you are now also a part of my weekly

newsletter which will give you additional learning about creating a website and how you can make

money online with your own website. However if you are not and would like to learn what the next step

is to creating a business from you’re new website then you can register at http://sambakker.com.



Keep an eye on your inbox for that, if you have any problems then you can reach me at

sam@sambakker.com at any time.



Again I wish you the best of luck on your journey online. In getting to the end of this book you have

really proven that you have what it takes to move to the next step and start making money online.



Wishing you the best of success









Sam Bakker

http://sambakker.com





116 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited

117 | P a g e For More Information Visit http://SamBakker.com

CopyRight ModernCogs Limited