Créer un site sur son PC

  • Publier un site

Guides prérequis

Jusqu’ici, tu as appris à écrire du HTML et du CSS dans les blocs d’exemple de ce guide. Pour créer un véritable site web, tu devras créer un dossier sur ton ordinateur qui contiendra ton site. À l’intérieur, chaque page HTML sera un fichier, et les visiteurs pourront naviguer entre les pages avec des liens <a href>.

Lorsque ton site te plaira sur ton ordinateur, nous verrons comment envoyer le dossier sur un serveur pour que tout le monde puisse consulter le site en écrivant son adresse. Et c’est entièrement gratuit !

Pour suivre ce guide, il vaut mieux être à l’aise avec les concepts de fichier et de dossier (créer, déplacer, renommer…). Si c’est le cas, tu verras que créer un site web est plutôt simple et fonctionne sur tous les ordinateurs (Windows, Mac, Linux), même s’il est ancien et peu puissant.

Installer un éditeur de code

En théorie, il serait possible de créer à la main des fichiers dont le nom se termine par l’extension .html et de les éditer dans le Bloc-notes. Ensuite, il suffirait d’ouvrir les fichiers HTML dans le navigateur pour les visualiser.

En réalité, ce ne serait pas très pratique, car le Bloc-notes ne permet pas la coloration syntaxique, qui colore ton code pour t’aider à repérer les erreurs. Avec un véritable éditeur de code, tu auras la coloration ainsi que divers outils qui te faciliteront la vie.

Pour débuter, je te conseille d’utiliser Visual Studio Code (abrégé en VS Code). C’est de loin l’éditeur de code le plus populaire (source), régulièrement mis à jour pour supporter les derniers outils, et disposant de nombreuses extensions.

Télécharge Visual Studio Code (code.visualstudio.com) et installe-le sur ton ordinateur. Sur Mac, pense à déplacer le fichier « Visual Studio Code.app » dans les Applications.

Dans VS Code, au lieu d’ouvrir des fichiers individuellement, il est préférable d’ouvrir le dossier de ton projet. Cela te permet d’explorer son arborescence dans le panneau de gauche et de lancer des commandes.

  1. Crée un dossier vide dans tes Documents. Appelle-le par exemple « mon-site ».
  2. Ouvre le dossier dans VS Code. Pour cela, tu peux glisser le dossier dans la fenêtre de VS Code, ou bien aller dans File > Open Folder depuis VS Code.
  3. VS Code affichera peut-être un avertissement de sécurité, pour te demander si tu fais confiance à l’auteur du dossier (« Do you trust the authors? »). Comme tu es l’auteur, tu peux bien sûr valider.

Créer un fichier HTML

Actuellement, ton dossier est vide. Commençons par créer la page d’accueil du site, qui doit être nommée index.html. Les autres pages pourront avoir le nom de ton choix.

Dans le panneau de gauche, clique sur le bouton New File et nomme le fichier index.html.

Création de fichier sur VS Code

Je t’ai caché quelque chose jusqu’ici… Un fichier HTML ne contient pas uniquement le contenu de la page, mais aussi des métadonnées. Ce sont des informations à propos de la page, qui sont utilisées par le navigateur, les moteurs de recherche ou encore les logiciels d’accessibilité. Voici la structure complète d’un fichier HTML :

HTML
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon site</title>
  </head>
  <body>
    <h1>Coucou !</h1>
    <p>...Y a quelqu'un ?</p>
  </body>
</html>

Qu’est-ce que tout cela signifie ?

<!doctype html>
Ligne à toujours insérer au début d’une page pour indiquer au navigateur de se baser sur HTML5, qui est la dernière version. En écrivant autre chose avant le doctype, tu pourrais déclencher un mode de compatibilité qui sert à afficher de très vieilles pages web.
<html>
Englobe l’entièreté du document. Pour aider les logiciels d’accessibilité et le référencement, tu peux y préciser la langue de la page, par exemple <html lang="en"> ou "fr".
<head>
Contient les métadonnées de la page détaillées ci-dessous, et bien d’autres encore qui sont optionnelles.
<meta charset="utf-8">
Indique au navigateur d’utiliser l’encodage UTF-8 pour les caractères. Sans cette ligne, les accents et autres caractères spéciaux peuvent mal s’afficher.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ligne essentielle pour que le site soit responsive, c’est-à-dire qu’il s’adapte correctement à la largeur de l’écran sur téléphone.
<title>
Contient le titre de la page, qui apparaît sur l’onglet et dans les résultats de recherche.
<meta name="description" content="Description">
<meta name="author" content="Votre nom">
Optionnels, ces champs peuvent être affichés dans les résultats de recherche et les aperçus de lien des réseaux sociaux.
<body>
Contient le contenu de la page.

Lorsque tu écrivais du code dans les exercices des guides précédents, tu écrivais en réalité dans un <body> ! Le reste de la structure était masqué pour te simplifier la vie.

Copie la structure de base d’une page HTML dans ton fichier index.html et insère du contenu dans le <body>.

Recopier cette structure dans chaque fichier HTML peut sembler fastidieux, mais pas d’inquiétude. Plus tard, tu utiliseras un générateur de site, qui permet d’inclure ces éléments automatiquement à toutes les pages.

Visiter le site

Tout d’abord, enregistre les modifications de ton fichier avec CtrlS . Lorsque tu as des modifications non enregistrées, une icône ronde te prévient sur l’onglet.

Indicateur de sauvegarde dans VS Code

Voyons maintenant ce que donne cette page en action.

Trouve ton dossier dans l’Explorateur de fichiers (ou Finder sur Mac) et ouvre le fichier index.html. Si cela ne fonctionne pas, tu peux aussi glisser le fichier dans la fenêtre de ton navigateur.

Et voilà, ta première page web ! Maintenant, lorsque tu fais des modifications dans VS Code puis que tu sauvegardes avec CtrlS , tu peux rafraîchir la page dans ton navigateur pour voir les nouveautés.

Comme c’est un peu fastidieux de changer constamment de fenêtre, l’équipe de VS Code a réalisé une extension pour visualiser la page en direct depuis l’éditeur. Elle n’est pas obligatoire, mais elle peut te simplifier la vie.

  1. Installe l’extension Live Preview en ouvrant le lien puis en cliquant sur le bouton Install depuis la fenêtre de VS Code.

  2. Reviens à l’onglet de ta page HTML. Une nouvelle icône est apparue pour ouvrir la prévisualisation.

Par la suite, tu utiliseras probablement des outils plus complets qui incluent leur propre serveur de prévisualisation. À ce moment-là, tu n’auras plus besoin de l’extension Live Preview, et tu pourras la désinstaller si tu le souhaites.

Ajouter du CSS à la page

Il existe deux moyens d’ajouter du CSS à un fichier HTML.

La balise <style>

Tu peux ajouter l’élément <style> n’importe où dans <head> ou <body> et écrire du CSS à l’intérieur.

HTML
<!doctype html>
<html>
  <head>
    <style>
      p {
        color: darkblue;
      }
    </style>
  </head>
  <body>
    <p>Je suis bleu.</p>
  </body>
</html>

Connecter un fichier CSS

Utiliser un fichier séparé est souvent préférable car cela rend ton code plus organisé et te permet de connecter le même CSS à plusieurs pages HTML. Dans le panneau de VS Code, crée un nouveau fichier et nomme-le style.css (ici le nom importe peu, tu peux renommer style). Puis ajoute cette ligne dans le <head> :

HTML
<!doctype html>
<html>
  <head>
    <link href="/style.css" rel="stylesheet" />
  </head>
  <body>
    ⋯
  </body>
</html>

Link ? Rel ?

L’élément <link> lie une ressource externe à la page. On l’utilise aussi pour définir l’icône de la page. rel est le type de relation, et stylesheet signifie « feuille de style ».

Tu peux voir que l’adresse du fichier CSS commence par un slash /. Voici ce que cela signifie.

  • L’absence de slash indique que l’on cherche dans le même dossier que le fichier actuel. Par exemple, href="style.css" pointe vers « le fichier style.css situé dans le même dossier que le fichier index.html ». Pour l’instant, cela fonctionne, mais si tu crées des fichiers HTML dans des sous-dossiers, ils ne retrouveront pas le CSS, car il sera situé dans un dossier différent.

  • Un slash / en début d’adresse indique que l’on cherche dans le dossier principal du projet, aussi appelé la racine du projet. Donc href="/style.css" pointe vers « le fichier style.css situé dans le dossier principal ». Cela fonctionne même si le fichier HTML est dans un autre dossier.

Crée un fichier CSS et relie-le à tes pages HTML avec une balise <link> à l’intérieur du <head>.

Tu pourrais créer plusieurs fichiers CSS, mais c’est rarement nécessaire. Pour ton premier site, tu devrais utiliser un seul fichier CSS et différencier les règles à l’aide de classes et de sélecteurs descendants.

Créer plusieurs pages

Tu peux ajouter plusieurs pages à ton site puis créer des liens avec <a href="">. Prenons l’exemple d’un nouveau fichier appelé a-propos.html :

Projet
index.html
a-propos.html
style.css
site.com/
site.com/a-propos.html
html
<p>Les pages de mon site :</p>
<a href="/">Accueil</a>
<a href="/a-propos.html">À propos</a>

On accède aux pages par leur nom de fichier, à une exception près : quand un fichier s’appelle index.html, il représente la page d’accueil du dossier dans lequel il se trouve. Ici, nous sommes dans le dossier principal du projet (la racine), donc le fichier représente la page d’accueil du site.

Pour rappel, commencer un lien par un slash / signifie que le point de départ du chemin est la racine du site. C’est pourquoi href="/" correspond à la page d’accueil.

Créer des sous-dossiers

Tu peux créer des sous-dossiers pour organiser les pages de ton site avec des chemins plus complexes. Par exemple, si tu crées un dossier « blog », le chemin des pages situées à l’intérieur commencera par https://site.com/blog.

Projet
index.html
a-propos.html
style.css
blog
index.html
article-1.html
site.com/
site.com/a-propos.html
 
 
site.com/blog
site.com/blog/article-1.html

Accueil du dossier

Dans le dossier « blog », un fichier est nommé index.html, ce qui signifie que c’est la page d’accueil du dossier.

À toi de jouer !

Avec un dossier de projet structuré comme ci-dessus, que faudrait-il écrire dans href pour créer un lien vers chacune des pages ?

Configurer VS Code

Tu peux personnaliser VS Code pour que ton expérience soit plus confortable. Rends-toi dans les paramètres (Settings) avec Ctrl, , puis utilise la barre de recherche pour trouver les paramètres suivants :

  • Auto Save : active la sauvegarde automatique en choisissant une valeur comme onFocusChange.

  • Word Wrap : active le retour à la ligne automatique pour empêcher l’écran de défiler vers la droite lorsque tu écris de longs textes.

  • Font Size : augmente la taille de la police pour lire plus confortablement.

  • Color Theme : choisis un thème de couleur. Si tu souhaites consulter un aperçu rapide des différents thèmes, ouvre le panneau de commandes avec CtrlShiftP , cherche la commande « Color Theme » puis navigue entre les thèmes avec les touches fléchées.

Tu découvriras progressivement que VS Code peut être personnalisé avec de nombreuses autres options et extensions !

À vos fourneaux

Il est temps de mettre à profit ce que tu as appris pour concocter une première version de ton site. Tu peux recopier le code que tu as écrit lors de l’étape précédente, ou bien parler d’un autre sujet : une recette de cuisine, une entrée de journal, un billet d’opinion, un Linktree fait maison, ta chanson préférée…

Pour le moment, ne sois pas trop perfectionniste : tu pourras toujours mettre à jour ton site plus tard. Cependant, si tu as besoin de quelque chose dont nous n’avons pas encore parlé, par exemple l’ajout d’images, tu peux prendre de l’avance et consulter les guides dans la section « HTML ».

Crée ton site web. Lorsqu’il est prêt, passe à la suite pour le publier !
Bonjour ! Je suis un assistant IA qui peut te donner des conseils pour réussir les exercices et améliorer ton code. Utilise le bouton « J'ai besoin d'aide » pour m'appeler !