HTML / CSS – Putting Your Site On The Web

putting site on the web HTML / CSS   Putting Your Site On The Web

Your site is finished, looking good, ready… But as it is on your hard drive, nobody can see it !

You would therefore like to put it on the web but you don’t know how to do it icon biggrin HTML / CSS   Putting Your Site On The Web
In this chapter we’ll discover how to put sites on the internet. In this order :

  1. We’ll find out how to reserve a domain name
  2. Then we’ll see what a web host is and how it works
  3. Finally, when we’ve chosen a web host, we’ll see how to use an FTP client to transfer our files to the net icon smile HTML / CSS   Putting Your Site On The Web

Domain Names

Do you know what a domain name is ?
It is an address on the Web : europcsolutions.com for example is a domain name.

A domain name is made up of 2 parts :

domain name HTML / CSS   Putting Your Site On The Web

  • In red, the name of the domain. It is the name that you can normally choose as you wish, unless somebody reserved it before you. It can contain letters and numbers, but no special characters (like é, ç, space etc.).
  • In blue, the extension. There is more or less one extension per country (.co.uk for the United Kingdom, .fr for France, .ca for Canada). However, there are also extensions that are used at an international level like .com, .net, .org. At first they were reserved for commercial sites, organisations etc… but everybody can now reserve a domain with these extensions. As such, .com is probably the most used extension in the world.

Generally, the name of a website is preceded by www, like for example www.europcsolutions.com. This is not a part of the domain name : in fact, www is what we call a sub-domain, which you can in theory create as many as you want when you own the domain name. For example the sub-domain of this site is blog : blog.europcsolutions.com.
The www has been adopted by webmasters, as a sort of convention, but is not necessary.

Reserving A Domain Name

I want a domain name as well ! How can I get one ?

I have good and bad news icon biggrin HTML / CSS   Putting Your Site On The Web
As usual, we’ll start by the bad news :

  • Bad : It’s not free
  • Good : It’s not very expensive icon biggrin HTML / CSS   Putting Your Site On The Web

In effect, a domain name costs between £10 and £40 a year.
The price can change depending on the extension of the name. Therefore, the extension .info is generally proposed at a very low price and can be a very interesting alternative. However, if you want a more common address, you should look for .com or .co.uk (depending on where you live) extensions.

To reserve a domain name, there are 2 solutions :

  • Use a specialised registrar. It’s an organism which acts as an intermediate between ICANN (the organisation which controls the international names such as .com) and you. UK2.NET, 123-Reg and Go Daddy are popular registrars.
  • Even better, you can order the domain name at the same time as the hosting (which I highly recommend). That way you get everything sorted out, and in any case you’ll need both a name and hosting.

In this chapter, we’ll see how to order a domain name at the same time as the hosting, it’s the easiest and cheapest solution for you.

The Host

Now let’s have a look at the host.

What is a host and why do I need it ?

On the Internet, all the sites are stored on special computers called servers. These are very powerful computers that are turned on all the time. They store the web pages and send them to users at any time of the day.

Here’s what a server looks like :

server HTML / CSS   Putting Your Site On The Web

A server doesn’t have a screen because, most of the time, it works by itself without humans having to do anything to it. As you can see, servers are very flat : it’s a special format of server (called 1U). They can be piled up in bays (a sort of air-conditioned wardrobe for servers icon wink HTML / CSS   Putting Your Site On The Web ).

Here’s what a server bay looks like :

server bay HTML / CSS   Putting Your Site On The Web

As you can see, there’s one screen for the whole bay. That’s enough because the screen is only plugged into a server if there’s a problem. Luckily, most of the time, there are no problems icon biggrin HTML / CSS   Putting Your Site On The Web

The Hosts’ Purpose

The host is a business that manages all the server bays. It makes sure the servers work 7 days a week 24h/24. In effect, if one of them breaks down, all the sites on that server will stop working (which makes a lot of clients very unhappy icon biggrin HTML / CSS   Putting Your Site On The Web ).

The bays are kept in special locations called data centers. Data centers are warehouses for servers, and they’re very difficult to gain access to.

datacenter2 560x420 HTML / CSS   Putting Your Site On The Web

Theoretically it is also possible to host a site on your own computer. However, it’s complicated, you need to have good knowledge of using Linux, your computer needs to be powerful enough, it needs to be left on all the time and… most of all… you need a very fast internet connection (mainly when uploading, the speed of file transfer is very important). Most of the time, users don’t have a fast enough internet connection to host sites whereas data centers do : they use fibre optics (which gives a speed of several Gbps ! icon biggrin HTML / CSS   Putting Your Site On The Web ).

Managing a server yourself is complicated, and most of the time users and businesses use professional hosting services.

Finding A Host

Contrarily to registrars, there are a lot of hosts. There are lots of different types at a variety of prices. There is some vocabulary that you’ll need to know to understand their offers :

  • Shared Hosting : if you choose a shared hosting plan, your site will be placed on a server that’s hosting several sites at the same time (maybe 100 or more). It’s the cheapest offer and the one I recommend if you’re starting a web site.
  • Virtual Private Servers (VPS) : this time the server only hosts a few sites (about 10 or less). These servers are used for sites that have become too big for shared servers because they have too much traffic (visitors), when the owners can’t afford a dedicated server (see below) or they don’t need the power of a dedicated server.
  • Dedicated Servers (also known as dedicated hosting) : this is the ultra hosting plan. These servers only host one site. Be careful though, this plan is expensive (between £75 and £130 a month) and you need decent knowledge in Linux to manage the server from a distance.

But where can I find a host ?

Ah, that’s very easy icon biggrin HTML / CSS   Putting Your Site On The Web
Searching “hosting plan” in Google will give you thousands of results. You’ll just have to choose one.

logo HTML / CSS   Putting Your Site On The Web

If there is some advice I can give, I suggest that you have a look at the offers proposed by Just Host. They are the hosts that received the most positive reviews on The Top 10 Best Web Hosting Firms. I’ve also tried them out and I was very happy with their services icon biggrin HTML / CSS   Putting Your Site On The Web

However, if you find that the offers from Just Host are a bit too expensive at first, you can try 1&1, who often offer hosting at very low prices.
The rest of this chapter will show you how to buy a hosting package with Just Host, but things work the same way with any other host.

So then, back to Just Host. This site offers several hosting plans, here’s their hosting page :

hosting plans1 560x434 HTML / CSS   Putting Your Site On The Web

In the middle you can see their hosting plans. They offer 2 different plans :

  • Everything unlimited & 1 domain name
  • Everything unlimited & 3 domain names

These offers are very similar. It’s just the number of domain names that changes.

But what is Bandwidth Allowance ? icon surprised HTML / CSS   Putting Your Site On The Web

Bandwidth allowance, or traffic, is the quantity of information that’s sent to your visitors every month. For example, if you have a 1mb image on your site and it is loaded 500 times by visitors on the site, you’ll have a traffic of 500mb.
Really, browsers put images in the cache, which avoids loading the same image every time a same visitor goes on a site. This reduces the traffic.

Ordering Hosting For Your Site

Let’s suppose that we want the Just Plan offer. The following screen will ask you what name you want for your site :

choose domain name1 560x337 HTML / CSS   Putting Your Site On The Web

Most of the time you will create a new domain name. In this case I want to create www.newsiteforme.com.
Just Host will then check that the name is available.

As this name is still available, we can carry on icon smile HTML / CSS   Putting Your Site On The Web
If not, you’ll have to find a different domain name because if somebody else already has your name there’s not a lot you can do icon sad HTML / CSS   Putting Your Site On The Web

In the following page you have to insert your details :

enter details1 560x493 HTML / CSS   Putting Your Site On The Web

For the payment, if you’re using paypal, just click on the paypal button and the payment will be sorted after.
When you’ve finished entering your details you’ll be redirected to Paypal’s site (which you’ll probably know if you use eBay). It’s a safe and easy way to make payments on the Internet, which explains why it’s had so much success.

Just input your Paypal account details, then you’ll be redirected to Just Host to confirm that the payment has been accepted.

You should later receive an email containing the necessary details to set your site up. Keep it safe because you’ll need it later.

Using An FTP Client

Installing An FTP Client

FTP means File Transfer Protocol and, to keep things short and simple, it’s the way we’re going to send our files to the server.
There are programs that allow us to use FTP to send our files to the Internet.

Of course, there exist a lot of programs to do this.
So that we all know what we’re doing, I suggest using one that’s free and easy to use : FileZilla
First step : download the program icon wink HTML / CSS   Putting Your Site On The Web

Download FileZilla
Download FileZilla

I’ll trust you to install it correctly, it’s easy and you shouldn’t have any problems icon wink HTML / CSS   Putting Your Site On The Web
Launch the program, this is what you should see :

filezilla1 560x395 HTML / CSS   Putting Your Site On The Web

At first view, it seems a bit complicated (only at first view). In fact, it really is quite simple.
There are 4 main areas in the window to know :

  1. At the top, you’ll see the messages that the program sends and receives. If you’re lucky enough, you might even see the server say hello to you ! Generally, this area doesn’t interest us that much, apart from if there are error messages… and as they are written in red, they’re quite hard to miss icon biggrin HTML / CSS   Putting Your Site On The Web
  2. To the left is your hard drive. In the top part are the folders and underneath are the files inside the current folder.
  3. To the right are the files that are on the Internet. At the moment there isn’t anything because we aren’t connected, but that will come, don’t worry.
  4. Finally, at the bottom, you’ll see the files that are being transferred (and the percentage of completion).

The first step will be to connect yourself to the server of your host.

Setting Up The FTP Client

No matter which host you have chosen to go with, the procedure always works in the same way. You will be given 3 details that are indispensable for FileZilla to connect to the server :

  • The IP : the address of the server. Most often you will be given something like ftp.my-site.com, but it can also be a lot of numbers like 122.65.203.27.
  • The login : your username that you put when registering with the host. You might have put a username or the name of your site. Mine could be europcsolutions.
  • The password : either you were asked to give one when registering (most often) or you’ll have been given a default password (for example crf45u7h).

If you don’t have these 3 things, you’ll have to get them, they’re indispensable. Most of the time they’re sent to you by mail. If not check your account on your hosts website. If you still can’t find them don’t hesitate to contact your host to ask for them.

Now that we have these 3 bits of information, we’ll give them to FileZilla so that it can connect to the server.
Click on the small icon in the top left of the window (not on the small arrow to the right, but on the image) : site manager HTML / CSS   Putting Your Site On The Web

A new window appears. Click on New Site and give it the name you want (for example Euro PC Solutions). To the right you have to put in the three bits of information I was talking about just above, like this :

site1 HTML / CSS   Putting Your Site On The Web

At the top is the host (that’s where you have to give the IP address, something like ftp.europcsolutions.com.
To be able to enter your username and password, select Logon Type : Normal
Here the logon is username and the password is… hidden (you didn’t think I’d give it away did you ?! :p).

Click on Connect and everything is (nearly) sorted.

Transfering Files

Now there are two possibilities :

  • Either the connection goes ahead correctly, and at the top you’ll see messages in green like connected. In this case the right hand side of the screen should be activated and you’ll see the files that are on the server (there might already be a few).
  • Or it doesn’t work, you’ll have lots of messages written in red and in that case… there aren’t 36 solutions : you’ve messed up while inserting your IP, username and password. One of these elements is incorrect, try re-inserting them and if it still doesn’t work ask your host. If they’re correct it must work

If the connection works, what you now have to do is very easy : on the left side, find your site on your hard drive (including .html & .css files & images etc.)
Just select the files you want (in our case the whole site) and drag them over to the right hand side. Wait for FileZilla to say that the transfer queue has finished and your files will be on the internet !
Here’s an example :

transfer1 560x394 HTML / CSS   Putting Your Site On The Web

When the files appear to the right, they’re available on the server icon smile HTML / CSS   Putting Your Site On The Web

Make sure that your home page is called index.html. This is the page that the visitor goes to when writing www.site-name.com.

That’s about all you need to know.
Although you could have probably done a lot of that by yourselves I wrote this chapter because it can be tricky at first knowing what a registrar is and how to find a host.

Right, get to work, you have files to transfer I believe icon wink HTML / CSS   Putting Your Site On The Web

Leave a Reply