Recette, mise en ligne et suite du parcours

Votre site fonctionne sur votre ordinateur, mais il n’existe pour personne d’autre tant que vous ne l’avez pas publié. Cette dernière leçon vous accompagne dans les trois étapes finales : vérifier méthodiquement votre travail (la « recette »), comprendre les options de mise en ligne et de nom de domaine, puis savoir comment entretenir votre site et poursuivre votre apprentissage. Vous aurez alors bouclé le parcours, du premier <!DOCTYPE html> à un vrai site en ligne.

Étape 1 : la recette avant publication

La recette est la vérification finale d’un projet avant sa livraison. Prenez le temps de dérouler cette checklist, idéalement le lendemain d’avoir terminé, avec un œil neuf.

Contenu

• Les textes sont relus (orthographe, ton, informations de contact exactes) ;
• aucun « Lorem ipsum » ou « à compléter » ne subsiste ;
• vous détenez les droits de toutes les images et textes publiés ;
• les prix ou délais éventuels sont à jour.

Code et validité

• le HTML passe le validateur du W3C sans erreur ;
• chaque page a un title unique et une meta description ;
• lang, meta charset et meta viewport sont présents ;
• la console du navigateur ne signale aucune erreur ni ressource introuvable (404).

Liens et fichiers

• tous les liens internes fonctionnent (cliquez-les un par un) ;
• les liens externes sont corrects, et ouvrent un nouvel onglet seulement quand c’est justifié ;
• les noms de fichiers sont en minuscules, sans espaces ni accents (la casse compte sur la plupart des serveurs) ;
• le favicon s’affiche.

Responsive et affichage

• pas de défilement horizontal de 320 px à un grand écran ;
• texte lisible, cibles tactiles confortables ;
• test dans au moins deux navigateurs, et sur un vrai téléphone si possible ;
• l’aperçu à l’impression est correct si cela vous importe.

Accessibilité

• navigation entière au clavier, focus visible, lien d’évitement fonctionnel ;
• contrastes d’au moins 4,5 pour 1 pour le texte courant ;
• tous les alt sont pertinents ; tous les champs ont un label ;
• le texte reste lisible à 200 % de zoom ;
• les animations respectent prefers-reduced-motion.

Performance

• les images sont redimensionnées et compressées ;
• le chargement différé est en place hors de la zone visible ;
• aucun fichier inutile n’est chargé.

Étape 2 : comprendre l’hébergement

Pour qu’un site soit accessible, ses fichiers doivent être stockés sur un serveur connecté en permanence : c’est le rôle de l’hébergeur. Comme votre site est statique (HTML, CSS, images), vos besoins sont modestes : pas de base de données, pas de programme serveur. Plusieurs familles de solutions existent :

• L’hébergement web classique : un espace sur un serveur d’une entreprise d’hébergement, auquel on envoie ses fichiers ;
• L’hébergement statique spécialisé : des services conçus pour publier des sites sans serveur à gérer, souvent avec une offre gratuite pour les projets simples, et un déploiement automatique à partir d’un dépôt de code ;
• L’hébergement fourni avec un compte existant : certaines offres d’accès à Internet, d’établissements scolaires ou d’associations proposent un espace personnel.

Pour choisir, comparez plusieurs critères : le prix réel (et ce qui est inclus), la possibilité d’utiliser votre propre nom de domaine, le chiffrement HTTPS inclus, la localisation des données, la qualité du support et la facilité de prise en main. Lisez les conditions : un service gratuit peut s’accompagner de limites ou de publicités. Évitez de vous engager à long terme avant d’avoir testé.

Étape 3 : envoyer ses fichiers

Il existe trois grandes méthodes pour déposer vos fichiers, de la plus simple à la plus avancée :

1. Le gestionnaire de fichiers en ligne : certains hébergeurs proposent une interface dans le navigateur où l’on glisse ses fichiers ;
2. Le transfert de fichiers (FTP ou SFTP) : un logiciel client se connecte au serveur avec des identifiants et permet de copier les dossiers de votre ordinateur vers le serveur. Préférez la version sécurisée (SFTP) quand elle est proposée ;
3. Le déploiement depuis un dépôt Git : vous conservez votre site dans un dépôt de code, et chaque modification envoyée est publiée automatiquement. C’est la méthode la plus professionnelle, et le bon moment pour apprendre Git (voir plus bas).

Quelle que soit la méthode, respectez les consignes de l’hébergeur : un dossier racine particulier (souvent nommé public, www ou public_html), et la présence d’un fichier index.html à la racine. Envoyez le contenu de votre dossier (index.html, css, images…), en conservant la même arborescence que sur votre ordinateur, pour que les chemins relatifs fonctionnent.

Étape 4 : le nom de domaine

Un nom de domaine est l’adresse lisible de votre site (camille-morel.example, avec une extension comme .fr ou .com). Vous l’achetez, en général pour un an renouvelable, auprès d’un bureau d’enregistrement, puis vous le faites pointer vers votre hébergement grâce aux réglages DNS (le même annuaire que nous avons rencontré au tout début du cours). Quelques conseils :

• choisissez un nom court, facile à épeler et à retenir, sans tirets multiples ni chiffres inutiles ;
• vérifiez qu’il ne reprend pas la marque d’un tiers ;
• gardez bien le contrôle du compte du bureau d’enregistrement, et activez le renouvellement ou une alerte : laisser un domaine expirer, c’est perdre son adresse ;
• un site de démonstration sans nom de domaine personnalisé est tout à fait acceptable au début : l’hébergeur fournit généralement une adresse par défaut.

Étape 5 : le HTTPS

Le HTTPS chiffre les échanges entre le visiteur et le site. Il est aujourd’hui considéré comme la norme, et les navigateurs signalent comme « non sécurisés » les sites qui n’en disposent pas. La plupart des hébergeurs proposent un certificat intégré et automatique. Vérifiez qu’il est activé, et que l’adresse de votre site commence bien par https://.

Étape 6 : les obligations de base

Un site publié n’est pas qu’un objet technique : il est soumis à des règles. Voici les grandes lignes, à titre informatif et général (pour votre cas précis, appuyez-vous sur les sources officielles ou sur un professionnel) :

• Mentions légales : en France, un site doit généralement permettre d’identifier son éditeur et son hébergeur. Un particulier qui publie un site non professionnel peut, selon les cas, ne pas communiquer son identité directement, mais doit la communiquer à l’hébergeur ; un professionnel doit en revanche être clairement identifiable ;
• Données personnelles : si votre site collecte des données (le formulaire de contact en est une), vous devez informer les visiteurs de l’usage que vous en faites et de leurs droits. Le site de la CNIL propose des guides pratiques ;
• Traceurs (cookies) : si vous ajoutez des outils de mesure d’audience, des vidéos ou des cartes intégrées de services tiers, ils peuvent déposer des traceurs soumis, selon les cas, au consentement des visiteurs. Un site statique qui n’en utilise aucun est beaucoup plus simple à mettre en conformité ;
• Droit d’auteur : ne publiez que ce que vous avez le droit de publier, et respectez les licences des ressources utilisées.

Étape 7 : tester en ligne et maintenir

Une fois publié, testez le site tel que le voient vos visiteurs : depuis un autre appareil et un autre réseau, vérifiez que tout s’affiche et que les liens fonctionnent. Un problème qui n’existait pas en local (image en 404 à cause d’une majuscule, chemin absolu erroné) apparaît souvent à ce moment. Ensuite, un site se maintient :

• mettez à jour le contenu (projets, tarifs, coordonnées) ;
• surveillez les liens externes, qui peuvent disparaître ;
• conservez une sauvegarde de vos fichiers, sur un autre support que votre ordinateur de travail ;
• renouvelez votre nom de domaine et vérifiez le certificat HTTPS ;
• retestez de temps en temps sur de nouveaux appareils et navigateurs ;
• demandez-vous régulièrement si le site répond toujours à son objectif.

Et maintenant ? La suite du parcours

Vous savez construire un site statique complet, accessible et responsive. Voici les prolongements naturels, à aborder dans l’ordre qui vous inspire :

Piste	Ce que cela apporte
JavaScript	Rendre les pages interactives : menu mobile, validation personnalisée, galerie dynamique. C’est le prochain pilier du front-end
Git et un dépôt de code	Garder l’historique de votre travail, revenir en arrière, collaborer, déployer automatiquement
Accessibilité approfondie	Maîtriser les WCAG et le RGAA, tester avec des lecteurs d’écran, concevoir des composants accessibles
Frameworks et outils	Les bibliothèques et générateurs de sites pour gérer de grands projets ; à aborder après JavaScript
Contenus dynamiques	Back-end, bases de données et systèmes de gestion de contenu pour des sites qui évoluent sans toucher au code

Quelques conseils pour continuer à progresser :

• Pratiquez régulièrement, même vingt minutes : refaites un site que vous aimez, imitez une mise en page, améliorez votre portfolio ;
• Lisez la documentation de référence, en particulier MDN Web Docs (developer.mozilla.org) : c’est le meilleur compagnon d’un développeur web ;
• Apprenez à chercher : formuler précisément un problème est la moitié de sa résolution ;
• Construisez des projets réels : un site pour une association, un proche, un petit commerce ;
• Participez à une communauté d’entraide, et n’ayez pas peur de montrer votre travail pour recevoir des retours ;
• Soyez patient : tout le monde a commencé par un « Bonjour le web ! ».

À vous de jouer

1. Déroulez la checklist de recette sur votre site et cochez chaque point ;
2. choisissez une solution d’hébergement en comparant au moins trois critères (prix, HTTPS, nom de domaine) ;
3. publiez votre site (ou, si vous ne souhaitez pas le publier, simulez le processus en listant précisément les étapes que vous suivriez) ;
4. testez-le depuis un autre appareil et notez trois améliorations pour la version suivante.

Voir une solution

Un exemple de plan d’action : (1) valider le HTML, relire les textes, tester les liens ; (2) choisir un hébergement statique proposant HTTPS automatique et domaine personnalisé ; (3) envoyer le contenu du dossier du projet à la racine du site ; (4) ouvrir l’adresse publique depuis un téléphone en réseau mobile ; (5) noter : améliorer la vitesse de la galerie, ajouter un lien de téléchargement de plaquette, rédiger une page de tarifs.

Si votre site n’affiche pas les images après publication, vérifiez d’abord la casse des noms de fichiers et les chemins relatifs, puis la console et l’onglet Réseau : c’est la cause la plus fréquente.

Bravo : vous avez parcouru tout le chemin, de la première balise à un site complet. Il ne vous reste plus qu’à passer le quiz final pour valider vos acquis, puis à continuer à construire.