Anda di halaman 1dari 29

Starting Your Own Website

Simple, easy and detail.

Author
Amol Patil

A Future Eazy Publication


© 2010 by Future Eazy – Making things eazy | All rights reserved
Table of Contents

SOME FACTS ABOUT WEBSITE DESIGNING................................................................................................... 3


LET’S GET STARTED ....................................................................................................................................... 4
Components of any website ..................................................................................................................... 4
THE METAMORPHIC COMPARISONS ............................................................................................................ 5
Domain Name ........................................................................................................................................... 5
Web Hosting.............................................................................................................................................. 5
Script/ Website design.............................................................................................................................. 6
WHAT’S NEXT? ..............................................................................................................................................7
THE ‘ACTUAL’ PART....................................................................................................................................... 8
Domain Name ........................................................................................................................................... 8
Web Hosting............................................................................................................................................ 12
Tricky Part….............................................................................................................................................15
LINKING EVERYTHING .................................................................................................................................16
Domain Part ............................................................................................................................................16
Web Hosting Part....................................................................................................................................17
LET’S SUMMARIZE EVERYTHING ................................................................................................................. 20
FREQUENTLY ASKED QUESTIONS (FAQ’S)...................................................................................................21
FRONTEND AND BACKEND..........................................................................................................................23
WORDPRESS – An Introduction…................................................................................................................ 24
‘Managing your site’ ...............................................................................................................................24
SECTIONS IN WORDPRESS – A brief description......................................................................................... 26
Posts........................................................................................................................................................26
General Settings...................................................................................................................................... 27
Pages .......................................................................................................................................................27
END NOTE ................................................................................................................................................... 28
BULLET POINTS............................................................................................................................................29

2
SOME FACTS ABOUT WEBSITE DESIGNING….

You do not need to be a pro in internet and computers to use this guide. The
tutorials in this book are self explanatory with pictures and complete details and
are written in easiest language possible. I tried to keep everything simple, easy
but in detail.

Myth: A website can be created by anyone knowing HTML or To create a website


you have to know HTML.

Truth: Given the various platforms today, if you know how to email your friends
you can start your own website. That is all the knowledge it takes to start your
website.

Myth: It needs a lot of money or at least some money to start a website.

Truth: You can have your own website up and running in as little as 2 hours
without paying even a single penny!

Myth: If I have money and knowledge, I can start a website.

Truth: The most important thing needed to start a website and mainly to keep it
running is dedication.

3
LET’S GET STARTED…

A website can be as simple as a simple single HTML page or a complex script*


powering heavy sites like eBay, Google etc.
(A script can be regarded as software like the one you use on your computer. Just this software runs on servers and
needs you to be connected to internet.)

Components of any website

WEBSITE

Domain name Web Hosting Script/Site Design

(Diagram 1.1)

Don’t worry about the technical terms mentioned in the above diagram. They are
not as hard and bad as they sound. For now, just have a look at it as any other
diagram in your academic syllabus!

To keep things simple and easy, I will compare designing a website


metamorphically with some other things similar to it. This according to me will
make things easier for you to understand.

4
THE METAMORPHIC COMPARISONS….

Domain Name
When you visit Google or say Yahoo you just type Google.com in your address bar
or Yahoo.com, for that matter, and the site opens. The address that you type in
the address bar of your browser (Internet Explorer, Firefox etc) is called domain
name of the site. That’s all you need to know for now. (It’s wasn’t that hard
right?)

Web Hosting
When you start a site, it’s obvious that you will create a page that will be
displayed to your visitors. May be you will also add photos to that page. At times
even some download links etc. So where do you keep all this stuff? Like, when
you copy something to your computer it gets copied to your hard drive. This is the
space where everything will be stored. When you want to access something from
your computer you simple go to that particular path and open the file. Similarly,
you need some space somewhere to store your files that are needed by your
website to run. You cannot store those files on your computer as your computer
cannot run and be connected to the internet 24 x 7. This space is provided by the
Web Hosting providers.

What are Web Hosting providers?

For now just understand that web hosting providers are companies who give out
space (sell to be more correct) for some cost per month or year. But there are
many such providers who will give you some space totally free of cost. We will be
using just those!

5
So where are my files stored exactly by these so called “providers”?

Web hosting providers have servers (like your CPU just without monitor!) where
everything is stored and computed. Your files are stored here. They are connected
to the internet 24 x 7 and web hosting companies manage their maintenance. You
don’t have to worry about the electricity, internet and viruses related problems
then. Everything is handled by the web hosts.

This was a bit lengthy part but I hope I have cleared it. In case you have some
problems understanding it, I suggest you please go through it again. It’s isn’t that
difficult either!

Script/ Website design


Like I had explained above (Missed it? Don’t worry that was in small font
anyways) script can be regarded as a software just like the one you use on your
computer. So script is nothing but a piece of code written in some programming
language(s). Even if you have a single HTML page, it can still be called a script.
Following is as example of how small a website, script and an HTML page can be:

HTML CODE: WEBSITE PREVIEW:

<html> This is just a test page.


<head>
<body>

This is just a test page.

</head>
</body>
</html>

6
WHAT’S NEXT?…

Refer to the diagram 1.1 given earlier and refresh your memory with the
components of a website. I hope the picture becomes a little clearer now. The
above three components when work together creates a website and runs it! How,
read further.
Reference Paragraph 1.1

Let’s say you installed a game on your computer. The installation created a
shortcut on your desktop that points to the game .exe file. The game files will be
stored on your hard drive and those files contain the code needed to run the
game. Let’s translate this in website and internet language.

The domain name is your shortcut, the hard drive space is your web hosting
and the files are your script that is coded to run your website. It’s as simple as
that! And you thought you didn’t know how a website runs!

So why wait let’s start creating your website now. (I recommend you to do
actually do the things mentioned now onwards so that you understand everything
well.)

7
THE ‘ACTUAL’ PART….

Domain Name
First of all we will need a domain name for your site. After all, the site needs a
good name first to have a good first impression. But we need a free domain name
as we don’t want/have money to spend. Normally, domains are provided by
‘domain name registrars’. Godaddy.com, name.com, namecheap.com are
examples are a few domain name providers. Every domain name has to be
registered with ICANN, which is an organization that handles domain registrations
worldwide. The domain registrars act as a mediator between you and the ICANN.
(Google ICANN to know more about them) For now, it’s more than enough for
you to know that a domain is given by ICANN, which is registered through domain
name registrars.

Since we need a free domain we will use ‘co.cc’ which provides free domains*.
Such domains are best while learning and experimenting things.
*They are not exactly domains but act just like a normal paid domain. Hence they are free. I will come to it in the
later part of the tutorial.

When you head to www.co.cc , you will see a page that has something like this:

Check whether the domain that you want is available or someone has already
registered it. Just enter the name that you want your website to have in the text
box and then click on ‘Check availability’. You will see the following screen then.

8
I searched for ‘creatingwebsite’ which was available but they were asking me $3
for that domain name. So what do you do? Click back and change the name to
something else so that you can get it for free. Something like ‘mysiterocks’

Luckily, I got it available this time and for free. So I will go ahead and click
‘Continue registration’. If you still didn’t get your desired domain go back and
keep trying until you get one that is available for free.

9
After you click ‘Continue registration’ you will get the following screen. Click
‘Create an account now’. If you are redirected somewhere else, look for create
account now link and register an account for yourself.

Once you fill up the registration form with all your details and click submit on that
page you will get this screen.

10
Congratulations, your domain is registered and you have got one of the three
components of your site. Now proceed to set up your domain by clicking ‘Set up’
button. Click ‘set up now’ in the screen after that as well and you will be greeted
with this screen.

Don’t be afraid by seeing those many settings. We will need to use just one
setting i.e. setting number 3. URL forwarding. Rest all can be very well ignored.
But leave this as it is for now and we will come back to domain after sometime
when we get out component number two (web hosting). Read further to find out
how to get component number two.

11
Web Hosting

Like I said, web hosts provide you space (or sell) but they also provide some
free space. There are many web hosts out there that provide free hosting.
We will be using one of them. My personal favorite of them is
byethost.com. They have never let me down during my early years. So just
go to www.byethost.com and click on the ‘Not a Member’ button which is
in green color. (You might be re-directed to megabyte but it’s the same
site.)

Fill up the form above. Enter any name under subdomain. Don’t worry that
won’t be the name of your site as we have already registered our domain
with co.cc earlier. Next fill in your Name and other details. Also enter the
12
captcha (words in picture) which is for verification. After you fill up the
form and click submit you will get a message saying “Account created, please
check yourname@emaiID.com for all usernames / passwords”. That’s it! You are done
with registering for a free web hosting. Now you have a free space on the
internet where you can upload (store) files for your website.

Although, we have done with registering a web hosting account we need to


set it up first with proper settings. That’s not hard don’t worry. But before
that, check your email address that you just gave for registering the
account. You would get a username, password and other details required to
log in at your email address. Take a paper (or a notepad file) and save these
details from that mail.

1. Username
2. Password (we will change it later)
3. Domain URL which should be like: yoursitename.megabyet.net
4. Control Panel link which should be like:
www.yoursitename.megabyet.net/cpanel

13
Now open your cpanel link in your browser and enter your username and
password in the window that opens. Once you log in you will see a screen
like this:

The first icon that you will see there is “Change Password”. Click on it and
change your password to a more secure and easy to remember password.
Our current password is auto generated and hence MUST be changed.
Make sure you update your notepad details with your new password.

14
Tricky Part…

Ok now comes a bit tricky part. There’s no way to explain it in more simple
way so kindly forgive me for that. Let’s do a checklist of the things that we
needed to do and have completed as of now.
 Domain Name – CHECKED
 Web Hosting – CHECKED
 Script/Website Design – CHECKED (When? Well our webhost will provide
that so we don’t have to worry about that. More on this in later part.)

Remember the Reference Paragraph 1.1 in the previous page. I had said
that when the above three things work together, a site is created. Although
we are done with all the three things, we have not yet connected them or
not yet instructed them how to work together.
e.g. If you have a shortcut on your desktop, game installed on your hard
drive and files in the folder they still need to know where each of them are
to work. If you move your installation folder, your shortcut on the desktop
won’t work right? Similarly if you change the path in your shortcut file, it
will be unable to locate your game installation folder. In short they MUST
know where each of them is and their respective locations.

Similarly, though we have completed registering each of the individual


three components, we still haven’t yet told them where they are! THIS is
what we will do now which is that second last step towards creating your
site. (Pretty close huh?)

15
LINKING EVERYTHING…

Domain Part

Remember when we were signing up for a domain at co.cc I had left you on
the screen where it says “URL Forwarding” and other such settings. It’s now
time to get back to that page. In case you have closed that page, just log in
to co.cc with your details and click on your domain there to come to that
screen. Once you get to that screen here’s what you need to do:

Expand the URL Forwarding tab and enter your domain URL in the box. (You
had noted the Domain URL earlier, remember?). Enter the page title that
you would want to be displayed in the title window. In the frame option

16
select “URL Hiding”. Enter any description that you would like and then
click ‘set up’. Congratulations the domain part is over (Forever at last!). It
might take some time for changes to take effect.

Web Hosting Part

Now comes the hosting part. Log in to your hosting account Control Panel
in case you have closed the window. After that look for ‘Fantastico Deluxe’
installer as shown in the circle. After clicking that, you will see a screen as
shown on the next page.

17
The names on the left hand side are that of various scripts. Out of these we
would be using ‘Wordpress’ which is the last under ‘Blogs’ category. Just
click on that and you should see a window like this:

18
Click on ‘New Installation’ as shown in the box above .After clicking you will
get the following screen. Fill in the data in it as shown in the picture. Leave
the empty boxes shown in the picture empty in yours too. Fill in other
boxes as shown in the picture.

Click on install wordpress. Click on ‘Finish Installation’ in the window that


appears later. Now return to your Control Panel home or close it
altogether. It’s your wish. (The Control Panel home link is on the top right
corner).

CONGRATULATIONS your site is now up and live at


www.yoursitename.co.cc! Yes that was all. Check for yourself to believe it.
(Note sometimes it might take a time of about 1-2 hours for changes to
reflect).

19
LET’S SUMMARIZE EVERYTHING….

 What we actually did was register for a domain name at co.cc.


 Then we registered for free hosting space at byethost.com
(megabyte.net).
 The script that we needed (wordpress) was already present with our
web host and hence that wasn’t a pain for us.
 We then connected our domain name and our web hosting account
by means of URL forwarding. We told our domain name that
whenever someone enters its address, it should go to the registered
address of our web host (which was mysiterocks.megabyet.net in
our case).
 Thus our domain and web host were connected.
 We then installed the script on our webhost using Fantastico Panel.
 Our site was up and running live.

This whole thing should not have taken you more than 2 hours no matter how
slow you do it!

20
FREQUENTLY ASKED QUESTIONS (FAQ’S)….

Why did we sign up for a free domain at co.cc?

Because it shortened the name of your site from www.sitename.megabyet.net to


www.sitename.co.cc. It is easy to remember for everyone.

So does it mean the name is changed (shortened) permanently?

NO! The name ‘actually’ is not shortened. It is only made to look so. Co.cc hides
the real part ‘sitename.megabyet.net’ from your domain and replaces it with
‘sitename.co.cc’. That’s it. It doesn’t actually change anything.

So does this mean if I had not registered for co.cc, I would still be able to use
sitename.megabyet.net domain?

YES absolutely. Technically there is NO difference between using just the above
domain or with co.cc. You can do anything and everything without co.cc domain
too. But it just makes it look better and professional doesn’t it?

What about the Web Hosting? Will it be free forever?

Yes again. They won’t charge you a single penny until you grow MUCH. And by
that time you would be already well established to understand all those things. So
just chill for now and enjoy your site.

21
I still don’t get it. Even though my site is up and running how and where do I add
something to my site?

Good question. I never said the tutorial is over. I just said that your site is up and
live now. This means we are done with setting up website part. We still haven’t
yet finished with adding data to your site, managing it and editing the same. That
is covered in Part II of the tutorial called ‘MANAGING YOUR SITE’.

Oh no! So this means another long and complicated tutorial!

Thankfully no! The script that we are using is pretty much easy. It’s self
explanatory actually. I will just introduce you to the basic concepts and rest you
will figure out for sure. It’s one of the easiest things on the internet so don’t
worry!

22
FRONTEND AND BACKEND….

Whatever you see at www.sitename.co.cc is called ‘frontend’. All the changes


need to be done in the ‘backend’. Think of it like a cooking recipe. You do
everything in your kitchen (backend) and then present (frontend) the food on the
table for your guests (visitors). To make changes to your website backend, you
will need to login first. These login details are the same that you entered under
‘Admin name and Password’ while setting up wordpress. To login go to:
www.sitename.megabyet.net/wp-admin (Replace sitename with the name of
your site that you used while registering at web hosting). So in my case the site
name would be: www.mysiterocks.megabyet.net

Why use sitename.megabyet.net when we registered for a co.cc? Well because


like I had said co.cc is not an actual domain. It just forwards all requests received
to it to sitename.megabyet.net. So you need to use a ‘real’ domain while setting
up anything in the backend. I recommend, whenever you use your site backend
ALWAYS use your ‘real’ site name and not the co.cc name. That is just for your
visitors.

Ok so when you enter that link, you will be greeted with a login window. Enter
your Admin Name and Password there that you entered while installing
wordpress via the fantastic from your web host. Once logged in, you will see the
actual backend of your site. That is the backend of a wordpress script. This is just
like the control panel for your site. Everything can be done from here. Adding,
editing, removing and everything related to management. So let’s get started with
‘Wordpress’.

23
WORDPRESS – An Introduction…

So what is wordpress? Well wordpress is nothing but a script. And what is a


script? It can be regarded as software that runs on internet. So in short,
wordpress is nothing but software. Now that is clear, let’s get in a little more
detail about wordpress.

Wordpress, in the internet language, is called a blogging platform or a CMS


(Content Management System). While you must have heard about blog, CMS
might be a new term to you. Well, CMS is pretty much self explanatory. It’s a
system that manages your content (e.g. text, images and other files) and hence is
called a Content Management System.

‘Managing your site’

Think of it like a theatre stage. You perform ON the stage and audiences see only
that is performed ON the stage. But you get ready BEHIND the stage. Here the
stage is your site ‘frontend’ (what you see when you visit yoursite.co.cc) and the
audience are your visitors. While the site BEHIND THE STAGE is your site
‘backend’. So in short, to make any changes to your site frontend you must visit
the backend. You can visit your site’s backend at
‘www.yoursite.megabyet.net/wp-admin’.

The username for logging in is: admin and the password is the same as your web
hosting control panel password. Once logged in, you will see a screen like the
once shown on the next page.

24
This is the backend of the wordpress script. This is the control panel from where
you will control everything about your site. The menu on the left side is called
‘Navigation Panel’. The NP (Navigation Panel) consists of various sections like
Dashboard, Posts, Media, Links, Pages, and Settings etc.

Next topic will consist of a brief description of each of the following sections in
the NP using which whole of wordpress can be managed. Although I can’t and
won’t explain everything here (as that might require more knowledge) but I will
surely mention important and necessary points.

25
SECTIONS IN WORDPRESS – A brief description

Posts
The ‘Posts’ section contains edit; add new, post tags and
categories sub section. As you might have figured from the
name itself, this is from where you make new posts to your
site. Posts are nothing but the articles that will appear on your
site. Any information that you want to be displayed on your
site has to be written from this section. All the content in
wordpress is arranged and categorized in terms of posts. So you can very well say
that posts are one of most important and integral part of wordpress.

To make new posts, click on the ‘Add New’ and a new window will appear as
shown below. Below ‘Add New Post’ in the center of the window, is the space
where you can give title to your post. In the box below that is the space where
you can write your content, post images, videos, sound clips and links etc.

Once you are done writing your post, write few ‘tags’ for the post in the box on
the right hand side. Tags are nothing but important words or phrases that
describe your post. E.g. if your post is about ‘cars’ your tags be sport cars, latest
cars info, car spare parts. Select the proper category for your post and if there
isn’t a category then you can create one there itself. Then click on ‘Publish’ button
in the blue. That’s it! Your wordpress post is now published and live on your site.

26
General Settings

General settings option can be found under ‘Settings’ on the NP. From there you
can change the title of your site, your email address, date format and other such
settings. You can also add a tagline or description of your site from general
settings. It’s pretty much self explanatory and you will figure out most of the
things as soon as you open it. So go ahead and don’t hesitate. Rest of the options
under the ‘Settings’ are a bit advanced and I would recommend you to NOT make
any changes to them, unless you are familiar with the basics.

Pages

This is from where you can add a new page to your site. Generally people create a
‘About Me’ page on their site that has information about the website creator or
the website. You might want to create a contact me page for your visitors so that
if needed, they could contact you on your email address. The creation,
modification and everything about pages is just the same as that of the posts.
Simply go to Pages and click ‘Add new’ and start creating your page.

27
END NOTE:

From my 2+ years in the online freelancing field, I have very well understood that
starting your own site isn’t difficult at all. In hardly 3 months even a newbie can
have his own basic website up and running all by himself. However, most difficult
part is maintaining the website. It’s a pain to update your site daily and keep it
going with the same enthusiasm, as you had the very first day. Dedication and
consistency is most important when it comes to online field. If you are starting
your website just for fun or just as a hobby even then you HAVE to be loyal.
Otherwise one day you will find yourself not even logging on to your own site for
as long as six months or may be forever!

Although, I haven’t written about wordpress in much detail it doesn’t mean that
you cannot proceed. I, in fact, purposely didn’t write about it in much detail as
that will provoke you to start learning things by yourself and wordpress is quite
easy to figure. This will in turn create your interest and possible keep you glued to
it. However, I am not letting you off the hook totally. Here are a few links where
you can find answers to all your wordpress related questions.

 http://codex.wordpress.org/WordPress_Lessons
 http://ithemes.com/tutorials/
 http://www.themelab.com/wordpress-tutorials/

And lastly, if you have any questions, please feel free to mail me on amol@amol-
patil.com and I will get back to your queries as soon as possible.

I hope I was able to keep this guide – Simple, easy and detail!

28
BULLET POINTS

These are few important topics in the tutorial with their page numbers.

 Facts about site designing – page 3


 Components of website diagram – page 4
 Reference paragraph 1.1 – page 7
 Tricky Part – page 15
 Summary – page 20
 FAQ’s – page 21 to 22
 Bullet points – this page itself!

Tutorial brought to you for FREE by:

29

Anda mungkin juga menyukai