• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

Sending your website onto the Web

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Your website really neat, clean and ready... but as it's on your hard drive, no one else is going to be able to enjoy it!

So you'd like to send it onto the Web, but... you don't know how.
In this annex, we're going to find out about everything you need to know to send you website onto the Web:

  1. How do you reserve a domain name?

  2. What is a hosting provider and how does it work?

  3. Finally, how do you use an FTP client to transfer files on the Net?

Domain name

Do you know what a domain name is?
In fact it's an address on the Web: google.com is a domain name, for example.

The domain name comprises two parts: google.com.

  • In red, the domain name itself. It's a name that you can usually choose freely, as long as no one has already reserved it before. It can contain letters and numbers.

  • In blue, the extension (also called "TLD" meaning Top-Level Domain). There is roughly one extension for each country (.es for Spain, .fr for France, .be for Belgium, .ca for Canada, etc.). However, there are also extensions used internationally such as .com, .net and .org. They were originally reserved for commercial websites, organizations, etc. but anybody has been able to reserve them for a long time now. And anyway, .com is probably the extension most widely used on the Web.

Reserving a domain name

I also want a domain name for my website! What should I do?

Well, I've got some good news and some bad news. As usual, we're going to start with the bad news:

  • the bad news is that: it's not free…

  • the good news is that: ... it's not really very expensive at all.

Indeed, a domain name costs between 7 and 12 euros a year.
The price can vary according to the extension. For instance, the extension .info is generally offered at a lower price and can prove to be an attractive alternative. But if you want a more "common" address, you would go more for an extension of the .com type.

To reserve a domain name, there are two solutions:

  • Go through a specialized registrar. This is an organization that acts as a bridge between ICANN (the organization that manages all domain names at international level) and yourself. GoDaddy, Tucows and Register are well-known registrars.

  • Better still: you can order the domain name along with your hosting provider (this is what I recommend). In this way, you kill two birds with one stone, as in any case you're going to need a hosting provider and a domain name.

In this chapter, we're going to see how to order a domain name along with the hosting provider, as this is by far the most simple and least expensive for you.

Hosting provider

Let's now turn to the hosting provider.

What is a hosting provider and why do I need one?

All websites on the Internet are stored on individual computers called servers (figure below). These are generally very powerful computers, which stay running the whole time. They contain website pages and provide Internet users with them on demand, at any time of day or night.

A server
A server

A server does not have a screen as it runs most of the time by itself without the need to do anything on it. As you can see, servers are very flat: they are packaged in a special server format (called "1U"). This allows them to be stacked in racks, in other words, a sort of air conditioned cabinet for servers (figure below).

A server rack
A server rack

As you can see, there's only one screen for the whole rack. This is sufficient as the screen is only connected to a server when it has a problem. The server fortunately works most of the time without flinching.

The hosting provider's role

The hosting provider is a company that is responsible for managing server racks. It ensures that servers work properly round-the-clock, seven days a week. Indeed, if one server fails, all the websites running on it become inaccessible (and that makes for unhappy customers).

These racks are located in specific places called datacenters (figure below). Datacenters can thus be thought of as "server warehouses" and access to them is highly protected.

A datacenter, containing several server racks
A datacenter, containing several server racks

In short, managing a server yourself is complex and individuals and businesses mostly rely on a professional hosting provider.

Finding a hosting provider

Unlike registrars, there are a lot of hosting providers. There are all kinds of them at all price ranges. To pick your way through the solutions they offer, you need to be aware of the terminology used:

    • Shared hosting: if you opt for a shared hosting solution, your website will be placed on a server managing several websites at once (maybe a hundred or more). This is the cheapest solution and the one I recommend you go for if you are starting your website.

    • Virtual dedicated hosting: this time, the server doesn't handle many websites (typically less than ten). This solution is generally suitable for websites that are, on the one hand, no longer suitable for shared hosting as they generate too much traffic (too many visitors), and on the other run by an owner who cannot afford a dedicated hosting solution (see below).

    • Dedicated Hosting (also known as "dedicated server"): this is the be-all and end-all solution. The server only handles your website and no other one. Note that this is quite expensive and it's advisable to have knowledge of Linux to administer the server remotely.

For example, Wikipedia itself uses a dedicated hosting provider as it has a lot of traffic.

But where can I find a web host?

Oh, this is very simple.
A Google search for "web host" will come up with several millions hits. You'll be spoiled for choice.

If I can give you some advice, I recommend you take a look at the PlanetHoster web host, which provides quality hosting services. They also grant discounts for all readers of this course!

So let's come back to PlanetHoster. This web host has several shared hosting solutions, as shown in the figure below.

PlanetHoster hosting

PlanetHoster gives special discounts on all its shared hosting for readers of this book:

  • 5% discount for the "Essential" plan;

  • 15% discount for the "Performance" and "Unlimited" plans.

These discounts are valid if you enter a promotional code (I'll go into more detail about this a bit later on) for a yearly annual order of one of these plans:

  • Essential plan: 10 GB disk space, 250 GB traffic, a domain name and an unlimited number of e-mail accounts;

  • Performance plan: 50 GB disk space, unlimited traffic, a domain name and unlimited e-mail accounts;

  • Unlimited plan: disk space, traffic and an unlimited number of e-mail accounts as well as a domain name.

These solutions are actually very similar and only differ in their storage space and traffic.

But what do they mean by "traffic"?

Traffic is the quantity of data sent per month to your website visitors. For example, if you have a 1 MB image on your website and it's loaded 500 times during the month by your visitors, then you create 500 MB worth of traffic.
In practice, it should be noted that visitors' browsers usually place images in cache, thereby avoiding them having to reload the same image several times. This also reduces the necessary traffic.
If you have a lot of visitors (and therefore high traffic), you should choose a plan that allows more traffic.

Order a hosting solution for your website

Clicking any "Add to cart" button takes you to the page shown in the figure below.

Planet Hoster order form

Planet Hoster order form

There are three items of information:

  • Choose a product: indicates the plan you've chosen. You can change this directly via this insert;

  • Domain name: this section allows you to choose your website's domain name. We'll come back to this.

  • Order summary: as its name suggests, this box summarizes your order with the chosen plan and the price to be paid.

The text field under Domain name prompts you to enter... your domain name. The PlanetHoster website will then check whether the domain is available. If it is, you can then go to the next step.
Otherwise, you have to choose another domain name as the domain is already taken, and you can't do much about it.
The website then asks whether you want it to save this domain or whether you want to save it separately (figure below).

PlanetHoster tells you if the domain name is already registered

PlanetHoster tells you if the domain name is already registered

All that's left for you to do is enter your personal details and complete the purchase by credit card or Paypal.
Once you have completed the formalities and payment, you're redirected to PlanetHoster, which confirms that your order has been registered. A little later on, you should receive an e-mail with all the information needed to set up your website. Keep this information in a safe place as you'll need it later.
Once you have received by email your login information for connecting to your hosting server, you can go on to the next step: send your website to your hosting server

Using an FTP client

Installing an FTP client

FTP stands for File Transfer Protocol and, put simply, is the way we use to send our files.
Software is available for using FTP to transfer your files over the Internet.

There are, of course, hundreds of free and pay for FTP programs.
To ensure that we are on the same page, I'll suggest the one I use, which is free: FileZilla (figure below).

The icon of the well known FileZilla FTP client
The icon of the well known FileZilla FTP client

Anyway, I'm going to show you the procedure with FileZilla. And the first step is of course to download it!

Download FileZilla

Take the version corresponding to your operating system (Windows, Mac OS X or Linux).

I'll trust you to install it. It's very simple and you shouldn't have any problems.
Run the software and you should see something that looks like the figure below.

FileZilla
FileZilla

At first sight, it seems a bit complicated (at first sight only). In fact, its principle is very straightforward.
There are four main fields to consider in the window:

  1. At the top, you'll see the messages the program sends and receives. If you're lucky, the server will even say hello to you (really, I'm not kidding). In general, this field doesn't really matter, unless there are error messages in red...

  2. Your hard drive is shown on the left. Your folders are shown at the top and the list of the files in the current folder are shown at the bottom.

  3. The list of files uploaded to the remote site is shown on the right. For the time being, nothing is shown as we're not connected, but this will come, don't worry.

  4. Finally, at the bottom, you'll see the files being sent (and the percentage sent).

The first step will be to connect to your hosting server.

Configuring the FTP client

Whatever hosting service you choose, it always works the same way. We're going to provide you with three items of information, which are essential for FileZilla to be able to connect to server:

  • IP: this is the server's "address". You'll mostly be given information on the type ftp.myhost.com, but it may also be a series of numbers such as 122.65.203.27.

  • Login: this is your user name, which you've probably been asked to choose. You may have entered your alias, or your website's name. My login could for example be mateo21.

  • Password: either you've been asked to choose a password, or (what's more likely) you've been automatically assigned one (something unpronounceable like crf45u7h).

If you have these three items of information, you'll be able to continue.
If you haven't, you'll have to look for them as they're essential. You were probably sent them by e-mail. If not, feel free to ask your web host for them (IP, login and password).

Now that we have this information, we're going to give them to FileZilla, which needs them to connect to the server.

Click the small icon at the top left (not the small arrow on the right, but the actual image), as shown in the figure below.

The FileZilla connection icon
The FileZilla connection icon

A window opens. Click New site and give it any name you want ("My super website", for example). On the right, you'll need to specify the three items of information I just mentioned, as in the figure below.

Adding a new website in FileZilla
Adding a new website in FileZilla

The web host is shown at the top (this is where you have to specify ftp.myhost.com, for example). Check Authentication type:Normal to allow you to enter your login and password.

Click Connection and you're (almost) done.

Transferring files

At this point, there are two possibilities:

  • Either the connection was successful: you'll then see a green message such as "Connected" at the top. In this case, the right field of the FileZilla window should be activated and you'll see the files that are already on the server (there may well be a few already).

  • Or it has crashed, in which case you'll have plenty of messages in red, in which case... there are no two ways about it: you've made a mistake entering the IP, the login or the password. One of these items is incorrect, so make sure to ask them from your web host again, if necessary, as if they are correct then it must work.

If the connection is successful, then what you have to do is very easy: on the left side, look to see where your .html and .css files (as well as where your .jpg, .png and .gif images, etc.) are located on your hard disk.
On the left, double-click the file you want to transfer. After a few seconds, it will appear on the right, meaning that it has been properly uploaded to the server, and is thus accessible on the Internet!

The figure below, for example, shows the result obtained after transferring an index.html file and a few other files.

Files are hosted on the FTP server
Files are hosted on the FTP server

This appears on the right, meaning that it's now available on the server.

You can also transfer whole folders in one go: just drag and drop the folder from the left side (or directly from the your operating system's window) onto the right side of the FileZilla window.

Once configured, you can see that sending files is very straightforward.

Summing up

  • For the time being, your website can only be seen by yourself on your computer. You have to upload it to the Web for it to be able to be seen by everyone.

  • You need two things:

    • A domain name: this is your website's address. You can reserve an address as a .com, .fr or .net domain. For example: google.com.

    • A web host: will store your website on a computer called a "server". Its job will be to submit your website to your visitors at any time of the day or night.

  • To transfer files from your website to your web host server, you have to use an FTP client such as FileZilla.

  • To connect to the server, you need three things: the server's IP address (or its host name), your login and your password. These are provided to you by your web host.

Exemple de certificat de réussite
Exemple de certificat de réussite