Guide pour héberger un site web facilement
Guide pour héberger un site web facilement
4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel,
puis cliquez sur Commit changes.
Note : Assurez-vous que votre dossier comporte bien un fichier [Link].
5. Maintenant, naviguez jusqu'à [Link] pour voir votre site web en ligne. Par
exemple, pour le nom d'utilisateur abcFes, allez à [Link].
Note : Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne
fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.
Qu'est-ce qu'un serveur web ?
Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et
pourquoi ils sont importants.
Un « serveur web » peut faire référence à des composants logiciels (software) ou à des
composants matériels (hardware) ou à des composants logiciels et matériels qui fonctionnent
ensemble.
1. Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les
fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles
de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le
site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de
domaine tel que [Link].
2. Au niveau des composants logiciels, un serveur web contient différents fragments qui
contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera au
minimum un serveur HTTP. Un serveur HTTP est un logiciel qui comprend les URL et le
protocole HTTP (le protocole utilisé par le navigateur pour afficher les pages web).
Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur
un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP.
Quand la requête atteint le bon serveur web (matériel), le serveur HTTP (logiciel) renvoie le
document demandé, également grâce à HTTP.
Pour publier un site web, vous aurez besoin d'un serveur web statique ou dynamique.
Un serveur web statique (aussi appelé une pile) est composé d'un ordinateur (matériel) et
d'un serveur HTTP (logiciel). Il est appelé « statique » car le serveur envoie les fichiers hébergés
« tels quels » vers le navigateur.
Un serveur web dynamique possède d'autres composants logiciels, certains qu'on retrouve
fréquemment dont un serveur d'applications et une base de données. Il est appelé « dynamique
» car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au
navigateur via HTTP.
Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur
d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des
sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML
réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont
utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à
disposition le contenu et de maintenir plus efficacement le site.
Aller plus loin
Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci
traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve
le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section,
nous allons décrire en détails chacune de ces étapes.
Héberger des fichiers
Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous
les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de
styles, les fichiers de fontes, les vidéos, etc.
D'un point de vue technique, il serait tout à fait possible de stocker tous ces éléments sur
son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné
spécifiquement à cela car il devra :
Toujours être en fonctionnement
Toujours être connecté à internet
Conserver la même adresse ip au cours du temps (tous les fournisseurs d'accès ne
fournissent pas une adresse ip fixe pour les particuliers)
Etre maintenu par un fournisseur tiers.
Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre
site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui
correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 dh et plusieurs
milliers d'euros par mois selon ce qui est demandé).
Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous
convient, il vous suffira de transférer vos fichiers vers le serveur web.
Communiquer via HTTP
Un serveur web supporte le protocole HTTP (pour HyperText Transfer Protocol en anglais
soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment
transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux
ordinateurs.
Ici, un protocole est un ensemble de règles définissant la communication entre deux
ordinateurs. HTTP est un protocole textuel, sans état.
Textuel
Toutes les commandes qui sont échangées sont du texte pouvant être lu par un
humain.
Sans état
Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent
des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un
serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est
en cours (pour gérer cela, il faut utiliser un serveur d'applications).
HTTP fournit des règles claires qui indiquent comment un client et un serveur
communiquent. HTTP fait l'objet d'un article technique à part entière. Pour le moment, voici les
points les plus importants à garder en mémoire :
Seuls les clients peuvent effectuer des requêtes HTTP et uniquement vers
des serveurs. Les serveurs ne peuvent que répondre à la requête d'un client.
Lorsque le client demande un fichier via HTTP, il doit fournir l'URL du fichier en question.
Le serveur web doit répondre à chaque requête HTTP même si la réponse est un message
d'erreur.
Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et
de leurs réponses.
1. Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond
à un fichier existant.
2. Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur
d'applications génère le fichier nécessaire.
3. Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un
message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est 404
Page non trouvée (cette erreur étant plutôt fréquente, certains ont même personnalisé et
adapté les pages d'erreurs 404 de leurs sites).
Contenu statique et contenu dynamique
En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu «
statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre
en œuvre et il sera donc préférable de commencer par un site statique.
Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée
depuis les informations contenues dans une base de données. Cette solution est plus flexible
mais beaucoup plus complexe à mettre en œuvre.
Prenons l'exemple d’une page. Sur le serveur web qui l'héberge, il y a un serveur
d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents
modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur.
Ici, le serveur d'applications s'appelle Kuma et est construit en Python (grâce
au framework Django). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins
spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement
construites sur d'autres technologies.
Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier.
Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les
blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés CMS (pour Content Management
Systems en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous
construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir
celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de
programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre
serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).
Comprendre les noms de domaine
Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont
organisés et comment en avoir un.
Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des
adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur
Internet.
Tout ordinateur relié à Internet peut être contacté via une adresse IP publique. En IPv4,
cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes,
compris entre 0 et 225, séparés par des points (par exemple [Link]). Avec IPv6, on a
128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par
exemple 2001:0db8:85a3:0042:1000:8a2e:0370:7334). Les ordinateurs n'ont aucun problème
pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le
rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager »
sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse
correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle
adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise
des adresses compréhensibles appelée noms de domaine.
La structure d'un nom de domaine
Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces
différents composants sont lus de droite à gauche :
Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.
TLD (Top-Level Domain en anglais qui signifie domaine de premier niveau)
Le TLD fournit une information générique purement indicative sur le service associé
au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un
pays donné (par exemple : .us, .fr ou .ma qui correspondent aux États-Unis, à la France et
au Maroc), d'autres TLD sont génériques (par exemple : .com, .org, .net).
Composant
Les composants sont les différents fragments d'un nom de domaine (le TLD est le
premier composant). Un composant peut être une lettre ou une phrase entière (sans
espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième
niveau » (ou Secondary Level Domain (SLD) en anglais). Un nom de domaine peut avoir
plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par
exemple, [Link] est un nom de domaine tout à fait correct (il a 5 composants
dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par
exemple : [Link]), on peut créer d'autres noms de domaines sous celui-ci (par
exemple : [Link]), ceux-ci sont parfois appelés « sous-domaines ».
Acheter un nom de domaine
Qui possède un nom de domaine ?
Il est impossible d'« acheter » un nom de domaine. Vous payez pour le droit d'utiliser un
nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de
renouveler ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui
souhaiteraient bénéficier de ce nom de domaine.
Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent
les registres contenant les informations techniques et administratives qui vous lient à votre nom
de domaine.
Note : Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui
gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.
Trouver un nom de domaine disponible
Pour déterminer si un nom de domaine est disponible :
Vous pouvez vous rendre sur le site d'un bureau d'enregistrement. La plupart fournissent
un service « whois » (littéralement « qui est-ce ? » en anglais) qui indique si un nom de
domaine est disponible.
Si vous utilisez un système qui possède un outil en ligne de commande, vous pouvez y
saisir la commande whois. Voici un exemple avec [Link]:
$ whois [Link]
Registrar Info
NameMarkMonitor Inc.
Whois Server[Link]
Referral URL[Link]
StatusclientDeleteProhibited [Link]
clientTransferProhibited [Link]
clientUpdateProhibited [Link]
Important Dates
Expires On2023-01-23
Registered On1998-01-24
Updated On2020-12-22 Registrant ID:mmr-33684
Registrant Name:DNS Admin
Registrant Organization:Mozilla Foundation
Registrant Street: 650 Castro St Ste 300
Registrant City:Mountain View
Registrant State/Province:CA
Registrant Postal Code:94041
Registrant Country:US
Registrant Phone:+1.6509030800
Comme on peut le voir ici, on ne peut pas réserver [Link] car ce nom de domaine est
déjà réservé par la Fondation Mozilla.
Essayons avec un autre, par exemple unnomé[Link] :
> whois unnomé[Link]
...
%% No entries found in the AFNIC Database.
On voit ici que ce nom de domaine n'existe pas dans les bases de données de
serveurs whois (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez
réserver ce nom !
Obtenir un nom de domaine
Le processus est assez simple :
1. Aller sur le site web d'un bureau d'enregistrement
2. Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité
d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse
3. Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails.
Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre
nom de domaine ! Une fois que vous aurez payé, il sera trop tard !
4. Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et
vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de
domaine soit enregistré.
Note : Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse
postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains
pays peuvent fermer un domaine si l'adresse fournie est invalide.
Rafraîchissement du DNS
Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde.
Ces serveurs font tous référence à un serveur racine et à quelques-uns appelés « serveurs
faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information
pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de
données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations
pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS
demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à
jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent
des informations « rafraîchies ».
Note : Ce temps est parfois appelé temps de propagation. Cependant ce terme n'est pas
précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les
différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui
demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations
pour un nom de domaine ou que celles-ci sont arrivées à expiration.
Comment fonctionne une requête DNS ?
Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via
un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir
l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse :
1. Vous saisissez [Link] dans la barre d'adresse du navigateur.
2. Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à
votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un
cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et
la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est
tout.
3. Si votre ordinateur ne connait pas l'adresse IP associée au nom [Link], il continue et
demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de
domaine demandé.
4. Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à
échanger du contenu avec le serveur web.
Note : Si c'est la première fois que quelqu'un demande l'adresse IP pour [Link] au
serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui
possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.
Publier sur le Web : combien ça coûte ?
Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet
article, nous verrons les différentes dépenses et leur raison d'être.
Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de
façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à
quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).
Logiciels
ÉDITEURS DE TEXTE
Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation
(Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt,
un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres
fonctionnalités) vous rendra un meilleur service.
De nombreux éditeurs sont gratuits : Bluefish, TextWrangler, Eclipse et Netbeans. Certains
comme Sublime Text peuvent être utilisés librement mais vous serez invité à payer si vous les
utilisez continuellement ou dans un cadre professionnel. D'autres comme PhpStorm peuvent
coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement
choisi. Enfin, certains comme Microsoft Visual Studio peuvent coûter plusieurs centaines voire
plusieurs milliers d'euros selon l'utilisation qui en est faite.
Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants
disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous
prévoyez de n'écrire que du HTML, CSS et Javascript simples, vous pouvez utiliser un éditeur
simple.
Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et
de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté
d'extensions (plugins) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.
ÉDITEURS GRAPHIQUES
Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint
pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités
et vous pourrez avoir besoin de fonctionnalités supplémentaires.
Les éditeurs graphiques peuvent être gratuits (GIMP), payants (PaintShop Pro, moins de 100
€) voire assez chers (Adobe Photoshop pour plusieurs centaines d'euros).
Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont très
proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs
fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres
concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre
d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats
spécifiques.
ÉDITEURS MULTIMÉDIA
Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser
des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos
depuis ces sites ou vous pourrez créer vos propres vidéos (voir ci-après quant à la bande
passante).
Pour éditer des fichiers audio, il existe des logiciels gratuits (Audacity, Wavosaur) ou
d'autres qui coûtent quelques centaines d'euros (Sony Sound Forge, Adobe Audition). Les
logiciels d'édition vidéo peuvent être gratuits (PiTiVi, OpenShot pour Linux, iMovie pour Mac),
coûter moins d'une centaine d'euros (Adobe Premiere Elements) ou coûter plusieurs centaines
d'euros (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). Le logiciel qui est fourni avec
votre caméra peut également parfaitement subvenir à vos besoins.
OUTILS DE PUBLICATION : CLIENT FTP
Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disque
dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP.
Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce
soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous
incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP
dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre
les emplacements locaux et les répertoires distants.
Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et
gratuites : FileZilla pour toutes les plateformes, WinSCP pour Windows, Cyberduck pour Mac et
Windows et d'autres encore.
Note : Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync
et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne
les aborderons pas dans cette section.
Navigateurs
Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon,
vous pouvez télécharger Firefox ou télécharger Google Chrome.
Accès au Web
ORDINATEUR / MODEM
Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur
peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. A
minima vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est
donc possible de commencer le développement web avec un ordinateur d'entrée de gamme.
Bien sûr, vous aurez besoin d'un ordinateur plus performant si vous voulez produire des
concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo.
Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous
aurez besoin d'un modem et d'un accès Internet. Cela revient généralement à plusieurs euros
par mois, que vous payez à un fournisseur d'accès Internet.
ACCÈS INTERNET
Assurez-vous d'avoir suffisamment de bande passante :
Un accès bas-débit devrait suffire pour un site web « simple » (des images de taille
raisonnable, du texte, un peu de CSS et de JavaScript).
Si, en revanche, vous souhaitez maintenir un site plus volumineux avec des centaines de
fichiers voire servir des fichiers audio/vidéo depuis votre propre serveur web, vous aurez
besoin d'un accès ADSL voire d'un accès à la fibre. Le prix et la disponibilité d'un tel accès
peuvent varier selon votre situation géographique et selon que vous êtes un professionnel
ou un particulier.
Hébergement
COMPRENDRE CE QU'EST LA « BANDE PASSANTE »
Le tarif d'un hébergeur variera en fonction de la bande passante consommée par votre site
web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de
l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs
vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une
formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande
passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre).
Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment
de visiteurs coûte entre 10 et 15 euros par mois.
Note : Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande
passante, attendez-vous à devoir payer en conséquence.
NOM DE DOMAINE
Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou
bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement
(1&1 et Gandi sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de
domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction :
Des obligations locales (certains noms de domaines locaux sont plus chers car en fonction
du pays, le prix fixé est différent)
Des services associés au nom de domaine : certains bureaux d'enregistrement fournissent
par exemple une protection contre le spam en masquant votre adresse physique et votre
adresse électronique derrière leur adresse.
HÉBERGEMENT « MAISON » ET HÉBERGEMENT « PACKAGÉ »
Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place
une base de données si nécessaire, installer un système de gestion de contenu (CMS)
(comme Wordpress, Dotclear, spip, etc.), transférer vos modèles de fichiers ou utiliser vos
propres modèles.
Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou
souscrire à un service d'hébergement avec des CMS pré-paramétrés
(Wordpress, Tumblr, Blogger). Avec cette dernière option, vous pourrez avoir un hébergement
gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du
site web.
HÉBERGEMENT GRATUIT ET HÉBERGEMENT PAYANT
Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ?
1. Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient
et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire.
2. Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins
votre contenu.
Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de
domaine et un hébergeur payant et utilisent un service gratuit pour héberger des contenus
moins stratégiques.
Agences web professionnelles et hébergement
Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement
une agence web qui le développera pour vous.
Le coût d'un tel projet varie selon plusieurs facteurs :
Est-ce que le site web ne contient que quelques pages de texte ou est-ce un site complexe
avec plusieurs centaines de pages ?
Le site est-il mis à jour régulièrement ou s'agit-il d'un site web statique ?
Est-ce que le site web doit être connecté au service informatique de votre entreprise pour
récolter du contenu (par exemple des données internes) ?
Souhaitez-vous que votre site brille de mille feux avec les dernières mises en forme à la
mode ?
Est-ce que l'agence web doit détecter et résoudre des problèmes de scénarios et
d'ergonomie complexes (en organisant par exemples des tests utilisateurs ou du A/B
testing afin de déterminer une meilleure solution) ?
De plus, en ce qui concerne l'hébergement :
Faut-il des serveurs redondants au cas où un serveur tombe en panne ?
Est-ce qu'une fiabilité de 95% est suffisante ou faut-il un service qui fonctionne 24H/24,
7J/7 ?
Un serveur partagé est-il suffisant ou faut-il préférer une machine dédiée avec de hautes
performances ?
Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et
plusieurs centaines de milliers d'euros.
Référencement
Le référencement est l’ensemble des techniques qui permettent d’inscrire un site dans les
moteurs de recherche ou dans les annuaires. Le référencement est souvent associé avec le
positionnement.
Il existe deux types de référencements :
Le référencement naturel consiste à optimiser les différentes pages de son site Web
afin d’apparaître dans les « top » positions des résultats de moteurs de recherche.
Les liens sponsorisés ou positionnement publicitaire consiste à payer (aux enchères,
donc très coûteux) les moteurs de recherche pour obtenir un positionnement dans les
espaces réservés à cet effet.
Terminologie
L’annuaire
Il fonctionne telle une encyclopédie : les sites y sont classés par thème et par ordre
alphabétique.
Le moteur de recherche
C’est un système automatique qui parcourt l’Internet et ajoute les sites et les pages
qu’il rencontre à sa base.
Le positionnement
C’est le fait qu’un site donné soit en haut des résultats de recherche. Tout site peut
être référencé (dans la base des outils de recherche) mais mal positionné (n’est pas
présent dans les premiers résultats d’une recherche sur un mot spécifique)
Importance du référencement Web
Le nombre des utilisateurs du Web est des milliards d’utilisateurs dont la plupart se basent
sur les moteurs de recherche pour trouver et accéder à l’information.
Donc, le référencement Web est une étape incontournable pour augmenter le nombre de
visiteur. Il permet de faire apparaître un site Web suite à des requêtes ce qui assure qu’un site
donné soit mieux placé que ses concurrents.
Un site Internet sans référencement dans les moteurs de recherche c’est l’équivalent d’un
véhicule sans roue. En effet, un site internet n’est qu’un support de communication comme les
autres, s’il n’est pas mis en avant (dans les dix premiers), il restera introuvable et donc sans
lecteur. Il faut aussi savoir qu’un référencement ne se fait pas en une seule fois. Il faut surveiller
la position de son site régulièrement.
Les techniques de référencement naturelles
Il existe quelques techniques de conception de site permettant de donner plus d’efficacité
au référencement des pages d’un site :
Un contenu original et attractif,
Un titre bien choisi,
Une url adaptée,
Un corps de texte lisible par les moteurs,
Des balises <meta> décrivant précisément le contenu de la page,
Des liens hypertextes bien pensés,
Des attributs alt pour décrire le contenu des images.
Le contenu de la page Web
Les moteurs de recherche et les annuaires cherchent avant tout à fournir un service de
qualité à leurs utilisateurs en leur donnant les résultats les plus pertinents en fonction de leur
recherche ainsi il est indispensable de s’attacher à créer un contenu consistant et original.
Un contenu original ne signifie pas un contenu qui n’est proposé par aucun autre site, cela
serait une mission impossible. En revanche, il est possible de traiter un sujet et de lui ajouter une
valeur et ceci en approfondissant certains points, en l’organisant d’une manière originale et/ou
en mettant en relation différentes informations.
D’autre part, toujours dans l’objectif de fournir le meilleur contenu aux visiteurs, les
moteurs de recherche et les annuaires accordent de l’importance à la mise à jour des
informations. Le fait de mettre à jour les pages du site permet donc d’augmenter l’indice accordé
par le moteur au site.
Le titre de la page
Il faut veiller à ce que les titres des pages Web soient pertinents et contiennent des mots
intéressants pour le référencement et qu’ils soient différents sur chaque page. Les titres des
pages Web sont utilisés par les moteurs de recherche pour deux raisons :
– L’indexation des pages – L’affichage de votre page dans les résultats du moteur de
recherche
L’insertion d’un titre se fait comme suit :
<tilte>le titre de la page</title>
Le titre doit décrire le plus précisément possible le contenu de la page Web et sa longueur
totale recommandée ne doit pas dépasser 60 de caractères soit 6 ou 7 mots au maximum. Le
titre est d’autant plus important qu’il s’agit de l’information qui s’affichera dans les favoris de
l’internaute, ainsi que dans son historique.
L’URL de la page
Certains moteurs de recherche accordent une importance capitale aux mots-clés présents
dans l’URL, notamment les mots-clés présents dans le nom de domaine. Il est donc conseillé de
mettre un nom de fichier adapté, contenant un ou deux mots-clés, pour chacun des fichiers du
site plutôt que des noms du genre “[Link]”, “[Link]”, etc.
Le corps de la page
Afin de valoriser au maximum le contenu de chaque page il est nécessaire que celui-ci soit
transparent (par opposition aux contenus d’un site développé par exemple avec flash), c’est-à-
dire qu’il comporte un maximum de texte indexable par les moteurs.
Les cadres (frames) sont fortement déconseillés car ils empêchent parfois l’indexation du
site dans de bonnes conditions.
L’utilisation des titres et des sous titres sont très important pour le référencement. Il est
intéressant aussi d’utiliser une barre de maillage ou bien un menu qui permet de naviguer entre
toutes les rubriques principales du site : l’internaute peut ainsi naviguer facilement et savoir
dans quel page il se trouve et cela augmente aussi le maillage des pages du site ce qui est très
apprécié par les moteurs de recherche.
Les balises <meta>
Les méta données sont des informations situées au sein d’un document afin de le décrire.
Les métadonnées sont ainsi utilisées par les moteurs de recherche lors du référencement de la
page Web. Grâce à ces balises non affichées, il est ainsi possible de renseigner des informations
relatives à la page où au site afin de mieux en décrire le contenu, en particulier des informations
sur le ou les auteur(s) du document, sa limite de validité, la langue utilisée, etc.
On appelle ainsi « méta tags » (en français « méta-balises ») des balises spéciales situées
dans l’en-tête du document HTML (c’est-à-dire la balise <head>, située avant la balise <body>),
afin de fournir des informations permettant aux moteurs de recherche d’indexer la page Web.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>ISET Fes</title>
<meta name="keywords" content="ISET Fès, INSTITUT SUPERIEUR ETUDES
TECHNOLOGIQUES, Maroc, fés, ista, ofppt">
<meta name="description" content="Le site Web de l'institut superieur des
etudes technologiques de fès">
</head>
<body>
<!-- ... -->
</body>
</html>
Les différents types de balises méta
On distingue cinq types de méta tags :
Les métas name, permettant de décrire la page HTML :
<meta name="nom du tag" content="attribut" />
Le méta charset, permettant de définir le jeu de caractères qui devrait être utilisé pour le
document.
<meta charset="utf-8" />
Les métas http-equiv, permettant d’envoyer des informations supplémentaires au
navigateur via le protocole HTTP. Depuis HTML5, 3 HTTP en-têtes étaient standardisés
pour être utilisés définir dans ces balises méta (“Content-Security-Policy”, “default-style”,
“refresh”) :
<meta http-equiv="nom du tag" content="attribut" />
Les métas itemprop, permettant de définir des métadonnées supplémentaires qui ne sont
pas destinées aux navigateurs Web. Ils sont par exemple utilisés pour définir les
informations sémantiques pour le protocole [Link] qui est utilisé par les moteurs de
recherches comme Google Search pour explorer les sites Web.
<meta itemprop="nom du propriété" content="valeur" />
Les métas property, permettant aussi de définir des métadonnées supplémentaires qui ne
sont pas destinés aux navigateurs Web. Ils sont par exemple utilisés par définir les
informations sémantiques pour le protocole Open Graph Protocol qui est utilisé par le site
social Facebook pour explorer les pages Web
<meta property="nom du propriété" content="valeur" />
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Un démo des meta données en HTML" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
</body>
</html>
Il est possible de renseigner plusieurs métas les uns après les autres dans l’en-tête de la
page.
Exemples de balises méta name
author
Elle permet de présenter des informations sur l’auteur de la page
<meta name="author" content="nom prénom">
Copyright
Elle permet de référencer des informations de droits d’auteur
<meta name="copyright" content="nom prénom 2017-2018, All Rights Reserved." />
Description
Elle permet de décrire le contenu d’une page Web par un court texte son contenu apparait
dans les pages de résultats de certains outils de recherche. Voici quelques conseils pour créer la
balise méta description :
Elle ne doit pas faire plus de 250 caractères
Il faut créer un résumé avec des phrases et éviter les fautes d’orthographes
Et pour la page d’accueil il faut faire une balise description décrivant le site dans son
ensemble
<meta name="description" content="Le site Web de l'institut supérieur des
études technologiques de Fès">
Generator
Elle permet de décrire le nom de logiciel utilisé pour générer la page Web si la création de
la page était automatisée.
Keywords
Elle permet de décrire le contenu d’une page Web par une liste de mots clés. Voici quelques
conseils pour créer la balise meta keywords :
Pour une bonne efficacité on recommande de ne mettre que 5 ou 6 mots par pages
séparés par une virgule.
Un mot clé peut être composé de plusieurs mots. Il est recommandé d’utiliser des termes
simples et précis (par exemple au lieu de choisir le mot clé « ISET de Fès » on choisit «
ISET Fès»)
<meta name="keywords" content="ISET Fès, INSTITUT SUPERIEUR ETUDES
TECHNOLOGIQUES, Maroc, fés, ista, ofppt">
Robots
Elle permet de spécifier le comportement du moteur de recherche à la rencontre de la page
(indexation, suivi de liens…). Voici un tableau présentant les différentes valeurs de l’attribut
content des robots :
Index Le “robots” indexera la page.
Noinde Le “robots” n’indexera pas la page.
x
Follow Les liens seront indexés et suivis.
Nofollo Les liens ne seront pas indexés, ni suivis.
w
All Les liens ne seront pas indexés, ni suivis.
None Le “robots” passe mais n’indexe pas la page ni les
liens
<meta name="robots" content="index, follow">
Liens hypertextes
Afin de donner le maximum de visibilité à chacune des pages d’un site, il est conseillé
d’établir des liens internes entre ces pages pour permettre aux robots indexeurs (appelés
crawlers) de parcourir la totalité de l’arborescence du site. Ainsi, il peut être intéressant de créer
une page présentant l’architecture du site et contenant des pointeurs vers chacune des pages
qui le constitue.
D’autre part, il est important d’avoir des liens externes pointant vers le site Web car cela
augmente d’une part le trafic et d’autre part la visibilité de ce site. Certains moteurs de
recherches prennent en compte le nombre et la qualité des liens pointant vers un site pour
caractériser son niveau de pertinence (c’est le cas de Google avec son indice appelé PageRank).
L’Attribut alt de l’image
Les images du site sont opaques pour les moteurs de recherche, c’est-à-dire qu’ils ne sont
pas capables d’en indexer le contenu, il est donc conseillé de mettre un attribut alt sur chacune
des images, permettant d’en décrire le contenu.
Voici un exemple de balise <img> avec l’attribut alt :
<img src="images/[Link]" alt="logo de l'ISET Fès">
Le fichier [Link]
Le mot robot ou encore spider désigne un programme circulant sur le Web dédié au
traitement de documents Web en vue de leur indexation et intégration dans le moteur de
recherche. Chaque moteur de recherche est caractérisé par un robot.
Présentation de [Link]
Sur un site Web, on essaie de faire en sorte que ces pages soient indexées au mieux par les
robots des moteurs de recherche. Mais il peut également arriver que certaines de ces pages
soient confidentielles, (ou en travaux) ou en tout cas ils ne doivent pas être diffusés largement
sur les moteurs de recherche. Il faut alors empêcher les robots de les prendre en compte.
Cela peut se faire à l’aide d’un fichier texte, appelé [Link], présent sur la racine du site.
Ce fichier va donner des indications au spider du moteur qui va vouloir explorer le site : ce qu’il
peut faire ou ne doit pas faire sur le site.
Dès que le spider d’un moteur arrive sur un site (par exemple [Link] il va
rechercher le document présent à l’adresse [Link] avant d’effectuer la
moindre indexation du document. Si ce fichier existe, il le lit et suit les indications inscrites. S’il
ne le trouve pas, il commence son travail de lecture et d’enregistrement de la page qu’il est
venu visiter ainsi que de celles qui peuvent y être liées, considérant que rien ne lui est interdit.
Structure du fichier [Link]
Il ne doit exister qu’un seul fichier [Link] sur un site, et il doit se trouver au niveau de la
racine du site. Le nom du fichier ([Link]) doit toujours être créé en minuscules. Voici un
exemple de structure d’un fichier [Link] :
User-agent: *
Disallow: /cgi-bin/
Disallow: /settings/
Disallow: /profile/[Link]
Disallow: /[Link]
Dans cet exemple :
User-agent: * signifie que l’accès est accordé à tous les agents (tous les spiders), quels
qu’ils soient.
Le robot n’ira pas explorer les répertoires /cgi-bin/ et /settings/ du serveur ni les
fichiers /profile/[Link] et /[Link].
Le répertoire /settings/, par exemple, correspond à l’adresse [Link] .
Chaque répertoire à exclure de l’aspiration du spider doit faire l’objet d’une
ligne Disallow: spécifique. La commande Disallow: permet d’indiquer que “tout ce qui
commence par” l’expression indiquée ne doit pas être indexé.
Disallow: /profile ne permettra l’indexation ni de [Link] ni
de [Link]
Disallow: /profile/ n’indexera pas [Link] mais ne
s’appliquera pas à l’adresse [Link]
Voici quelques commandes très classiques et importantes du fichier [Link] :
le fichier [Link] ne doit pas contenir de lignes vierges.
L’étoile (*) n’est acceptée que dans le champ User-agent.
Elle ne peut pas servir de joker comme par exemple : Disallow: /entravaux/*
Il n’existe pas de champ correspondant à la permission, de type Allow:
Les deux champs de description (User-agent et Disallow) peuvent être indifféremment
saisis en minuscules ou en majuscules
Les lignes qui commencent par un signe “#” représentent des commentaires.
Disallow: / Permet d’exclure toutes les pages du serveur (aucune aspiration possible).
Disallow: Permet de n’exclure aucune page du serveur (aucune contrainte).
Un fichier [Link] vide ou inexistant aura une conséquence identique.
Disallow: /profile/[Link] : interdiction de visiter ou d’indexer la page [Link] du
répertoire profile.
Disallow: /download/*.zip : interdiction de visiter ou d’indexer les fichiers à
extension .zip du répertoire download.
User-Agent: googlebot permet d’identifier un robot particulier (ici, celui de Google).
User-agent: googlebot
Disallow:
User-agent: *
Disallow: /
# Permet au spider de google de tout aspirer, mais refuse les autres robots.
[Link] et [Link]
Afin d’aider les moteurs de recherche (Google, Yahoo,…) à indexer le site Web, on précise
dans le fichier [Link] l’arborescente du site décrite dans un fichier [Link]. Le
fichier [Link] est un document XML permettant notamment de déclarer les URL d’un site
Web dans l’objectif d’une indexation par les robots des moteurs de recherche.
On peut ajouter par exemple dans le fichier [Link] l’instruction suivante :
sitemap: [Link]
Les logiciels de mesure d’audience
Les logiciels de mesure d’audience peuvent fournir des informations précieuses pour
analyser et suivre les effets d’un référencement (nombre de visites, profil des visiteurs, mots-
clés …). En voici quelques-uns :
Google Analytics
Google Analytics n’est pas un logiciel mais un service Internet qui permet de suivre avec
précisions l’évolution du trafic d’un site Web. Son principal avantage réside dans le fait qu’il ne
nécessite aucune installation coté serveur. Il suffit seulement d’insérer un petit code sur chacune
des pages de son site.
Les statistiques proposés sont facilement exploitables et certaines vous permettent de
mesurer l’impact de votre référencement : analyse des sites affluents (sites, moteurs de
recherche), identification des mots-clés, …
Matomo (Piwik)
Logiciel très répandu chez les hébergeurs de sites Web qui permet de visualiser et de
mesurer la fréquentation de son site Web. On trouve aussi des statistiques (sous formes
d’histogrammes et de tableaux) concernant les référents et moteurs de recherche qui ont permis
d’atteindre un site donné.
Remarque :
Il existe plusieurs exemples de logiciel d’aide au référencement tels que : Submitic, The
SkyFox Promotion, Yooda seeUrank, GenerMTag, GSA Auto SoftSubmit, AdaUrl,…
Mais, il est déconseillé d’utiliser ce type de logiciels car certains moteurs de recherche
rejetteront les sites qui sont référencés à l’aide des logiciels de référencement automatique