Création d'un site HTML simple
1. Pourquoi un site en HTML ?
Bienvenue dans le monde passionnant du développement web ! Aujourd'hui, on va créer un site HTML simple et statique, et le mettre en ligne sur un serveur web que tu as configuré dans les conférences précédentes. Même si tu n’as jamais écrit de code HTML auparavant, pas de stress – tout sera super clair. Notre mission sera non seulement de comprendre les bases du HTML, mais aussi d’apprendre à rendre ton site accessible au monde via un serveur web.
Et maintenant, on passe à l’étape suivante – créer ton propre site en HTML et en configurer l'affichage avec ton serveur web. Prêt.e à conquérir le web ? Alors on y va !
HTML (HyperText Markup Language) – c’est la base de toutes les pages web. Il gère la structure et le contenu du site. Avec du HTML standard, tu peux décrire des titres, des textes, des images, des liens et même des tableaux. Il est facile à apprendre, mais assez puissant pour être la base de n’importe quel site.
Dans la vraie vie, les compétences en pages HTML statiques sont utiles dans plein de situations :
- Créer rapidement des prototypes d’applications web.
- Écrire et tester des pages statiques pour de la documentation.
- Préparer une interface de base pour des applications côté serveur.
Et HTML, c'est aussi une manière trop cool de faire un CV sous forme de page web (oui, oui, les recruteurs aiment parfois ça). Et pour nous, en tant que développeurs, connaître les bases du HTML est juste un must-have.
2. Étape 1. Les bases de HTML : créer votre première page
La programmation, c'est comme les LEGO : un passe-temps préféré pour tous les âges. Commençons par une petite « brique » — notre première page web.
Exemple minimal d'un document HTML
Créez un fichier nommé index.html dans n'importe quel éditeur de texte (par exemple, nano, vim, voire gedit si vous voulez un peu de graphisme) et écrivez le code suivant :
<!DOCTYPE html>
<html>
<head>
<title>Mon premier site</title>
</head>
<body>
<h1>Salut, le monde !</h1>
<p>Ceci est ma première page web en HTML.</p>
</body>
</html>Explication du code
<!DOCTYPE html>– informe le navigateur que nous utilisons HTML5.<html>– ouvre tout le document. Tout le contenu de la page se trouve dans cette balise.<head>– section pour les méta-données du site (par exemple, le titre de la page, le lien vers les styles ou les scripts).<title>– le titre de la page, affiché sur l'onglet du navigateur.<body>– section principale où tout le contenu visible est placé.<h1>– le titre de niveau un de la page (plus le chiffre est petit, plus le titre est grand).<p>– un paragraphe de texte.
Ouais, ce sont seulement sept lignes, mais elles seront la base de votre site !
3. Étape 2. Héberger un site HTML sur un serveur
Maintenant que notre page est prête, il est temps de la montrer au monde entier. Pour cela, on va utiliser notre serveur web.
Préparation du dossier du site
Crée un répertoire pour stocker les fichiers de ton site. Par exemple, si tu veux héberger ton site sur un hôte virtuel avec le domaine example.com, exécute :
sudo mkdir -p /var/www/example.com
Ensuite, déplace ton fichier index.html dans ce dossier :
sudo cp index.html /var/www/example.com/
C'est ici que la vraie magie commence – le fichier est prêt à fonctionner.
4. Étape 3. Configuration du serveur web pour héberger le site
Configuration pour Nginx
Ouvre le fichier de configuration pour le virtual host :
sudo nano /etc/nginx/sites-available/example.comAjoute la configuration suivante :
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Active le virtual host et redémarre le serveur :
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Configuration pour Apache
Ouvre le fichier de configuration pour le virtual host :
sudo nano /etc/apache2/sites-available/example.com.confAjoute la configuration suivante :
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Active le virtual host et redémarre le serveur :
sudo a2ensite example.com.conf sudo systemctl restart apache2
Vérification du site
Maintenant, ouvre ton navigateur, tape http://example.com (ou l'adresse IP de ton serveur) et profite du résultat. Si tu vois ton magnifique "Bonjour, monde !" – félicitations, tout fonctionne !
5. Étape 4. Embellir notre site
La statique, c'est bien, mais un peu de CSS ne fait de mal à personne. Ajoutons un peu de style.
Ajoutez un nouveau fichier style.css dans le même dossier /var/www/example.com/ :
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}Maintenant, mettez à jour votre fichier index.html en ajoutant un lien vers le CSS :
<!DOCTYPE html>
<html>
<head>
<title>Mon premier site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Salut, monde !</h1>
<p>Ceci est ma première page web en HTML.</p>
</body>
</html>Après avoir rechargé la page, vous verrez de petits changements dans le style. Maintenant, votre site est un peu plus joli !
6. Problèmes courants et leurs solutions
Quand tu travailles avec des sites web, tu peux rencontrer quelques soucis, mais ne t’inquiète pas, on a prévu le coup :
Erreur "403 Forbidden". Vérifie les permissions du dossier du site. Utilise :
sudo chmod -R 755 /var/www/example.comErreur "404 Not Found". Assure-toi que les fichiers du site sont dans le bon dossier et qu’ils ont les bons noms.
Le site ne s’affiche pas. Vérifie que ton service web est démarré :
sudo systemctl status nginx sudo systemctl status apache2
Maintenant ton site est accessible à tous ceux qui connaissent son adresse. Pas motivé ? Dans les prochaines conférences, tu apprendras encore plus : ajouter du HTTPS pour plus de sécurité et gérer les configurations côté serveur.
GO TO FULL VERSION