Coder un site web consiste à écrire des fichiers HTML pour la structure, CSS pour l’apparence et, si besoin, JavaScript pour l’interactivité. Ces fichiers se testent dans un navigateur, puis se déposent chez un hébergeur relié à un nom de domaine. Un éditeur de texte et un navigateur suffisent pour démarrer, et rien n’est payant avant la mise en ligne. Cette méthode convient à un site vitrine, un portfolio ou une page personnelle ; pour un blog à publier chaque jour ou une boutique, un outil sans code va plus vite.
Définir les pages du site avant de coder
Avant la première ligne, listez les pages du site : accueil, présentation, contact, éventuellement une page par service ou par réalisation. Un croquis sur papier de chaque page, avec la place du titre, du menu et des images, évite de tout recommencer ensuite.
Un site de quelques pages se code sans base de données : c’est un site statique, composé uniquement de fichiers. Chaque page est un fichier HTML, et le menu relie ces fichiers entre eux. Dès que le contenu doit changer sans toucher au code, par exemple pour publier des articles, un gestionnaire de contenu devient plus adapté.
Installer un éditeur de code et un navigateur
Un éditeur de code se distingue d’un traitement de texte par la coloration syntaxique, qui affiche les balises en couleur, et par l’indentation automatique. Il en existe de gratuits pour tous les systèmes. Créez un dossier de projet, puis un premier fichier nommé index.html : c’est la page d’accueil que le serveur affichera par défaut.
Le navigateur sert à la fois de lecteur et d’outil de diagnostic. Son inspecteur (touche F12 dans la plupart des navigateurs) montre le code de la page affichée, les styles appliqués à chaque élément et les erreurs de chargement.
Écrire la structure de la page en HTML
Un document HTML commence par la déclaration doctype, suivie de la balise html, qui contient tout le reste. La balise head regroupe les informations non visibles : l’encodage, avec la balise meta charset réglée sur utf-8, et le titre de la page, affiché dans l’onglet du navigateur. La balise body contient ce que le visiteur voit.
Ajoutez dans le head une balise meta viewport, qui demande au navigateur mobile d’adapter la largeur de la page à celle de l’écran. Dans le body, les balises sémantiques header, nav, main et footer décrivent le rôle de chaque zone, ce qui aide les moteurs de recherche et les lecteurs d’écran. Les titres h1 à h3 hiérarchisent le contenu, et la balise a crée les liens entre les pages.
Mettre en forme avec CSS et adapter l’affichage au mobile
Le CSS se place dans une feuille de style externe, reliée à chaque page par une balise link dans le head. Une règle se compose d’un sélecteur, qui désigne les éléments visés, et de propriétés comme la couleur, la taille de police ou les marges. Une seule feuille pour tout le site garantit que les pages gardent le même aspect.
Pour la disposition, flexbox aligne des éléments en ligne ou en colonne, et la grille CSS organise une page en lignes et en colonnes. Les media queries appliquent des règles différentes selon la largeur de l’écran, par exemple pour empiler les colonnes sur téléphone. Les principes d’un site adaptable à tous les écrans sont détaillés dans les principes d’un site réactif.
Ajouter du JavaScript seulement si le site l’exige
JavaScript ajoute du comportement à la page : ouvrir un menu sur mobile, vérifier qu’un champ de formulaire est rempli avant l’envoi, afficher une image en grand au clic. Un site vitrine peut s’en passer entièrement.
Le script se charge par une balise script placée en fin de body, ou dans le head avec l’attribut defer, pour que la page s’affiche avant l’exécution du code. Chaque script ajouté alourdit la page, donc n’en ajoutez que lorsqu’une fonction le justifie.
Tester et valider le code HTML et CSS
Avant la mise en ligne, vérifiez les points suivants :
- L’affichage dans plusieurs navigateurs, et sur un vrai téléphone ou avec le mode responsive de l’inspecteur, qui simule différentes largeurs d’écran.
- La conformité du code : le service de validation du W3C contrôle le HTML d’un document envoyé par adresse, par fichier ou par copier-coller, et un validateur CSS distinct existe aussi.
- Les liens internes, qui doivent tous mener à un fichier existant, et le poids des images, à réduire avant de les ajouter au dossier.
Un lien cassé affiche une erreur 404 au visiteur. Prévoyez une page 404 claire qui renvoie vers l’accueil ; le repérage des pages introuvables explique comment les détecter.
Mettre le site en ligne : nom de domaine, hébergement et HTTPS
Le nom de domaine se réserve auprès d’un bureau d’enregistrement accrédité, dont l’Afnic publie l’annuaire pour les extensions qu’elle gère. Il s’obtient pour une durée déterminée et se renouvelle ensuite ; les tarifs et la durée varient selon l’extension et le bureau choisi.
Pour l’hébergement, une offre de site statique suffit : aucun langage serveur ni base de données n’est nécessaire. Il faut transférer les fichiers du dossier de projet vers l’espace d’hébergement, en conservant la même arborescence que sur votre ordinateur, puis relier le nom de domaine à cet hébergement dans sa zone DNS.
Activez ensuite le HTTPS, qui chiffre les échanges entre le visiteur et le site et évite l’avertissement « non sécurisé » affiché par les navigateurs. Le fonctionnement est expliqué dans le certificat SSL et le passage en HTTPS.
Ajoutez enfin les mentions légales propres à un site édité en France, en vous reportant à la page de service-public.fr consacrée à ce sujet. Le référencement vient en dernier : les fondamentaux du référencement s’appliquent dès les premières pages.
Un site codé à la main reste léger et simple à déplacer d’un hébergeur à l’autre, puisqu’il se résume à un dossier de fichiers. Pour la première version, trois pages bien construites valent mieux qu’un site entier laissé en chantier.
