Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

HTML — Éditeurs de code — Cours HTML | SovranCode

Contenu du coursHTML — Éditeurs de code · 26 leçons

Les bases de HTML

HTML — Introduction HTML — Éditeurs de code HTML — Structure d’un document HTML — En-tête et métadonnées HTML — Éléments et balises HTML — Attributs

Organiser le texte et le contenu

HTML — Titres h1 à h6 HTML — Paragraphes HTML — Mise en forme du texte

Ajouter des liens et des médias

HTML — Liens hypertextes HTML — Images HTML — Images adaptatives HTML — Audio et vidéo HTML — Iframes et intégration de pages

Présenter des listes et des tableaux

HTML — Listes HTML — Tableaux

Créer des formulaires

HTML — Formulaires HTML — Types de champs de saisie HTML — Listes de choix et zones de texte HTML — Boutons HTML — Validation des formulaires

Donner du sens à vos pages

HTML — Éléments sémantiques

Accessibilité et bonnes pratiques

HTML — Accessibilité HTML — Adaptation aux écrans HTML — Conventions d’écriture

Références et mise en pratique

HTML — Référence des éléments

HTML 38 min

HTML — Éditeurs de code

Écrivez votre HTML dans un fichier texte, enregistrez-le et observez le résultat. L’éditeur modifie le fichier ; le navigateur affiche le document enregistré.

Un éditeur HTML permet d’écrire le balisage dans un fichier texte. Il ne crée pas la page à votre place : il vous aide à organiser les fichiers, à repérer les erreurs de syntaxe et à passer rapidement du code à son aperçu. Tout éditeur de texte brut convient. Un éditeur de code ajoute les numéros de ligne, l’indentation, la coloration syntaxique et des outils de vérification.

Adoptez une méthode fiable pour modifier et vérifier votre page

Créez un dossier de projet et gardez les fichiers liés au même endroit. Commencez par index.html, enregistrez-le en texte UTF-8, puis ouvrez-le dans un navigateur, directement ou avec un serveur local. Faites une modification à la fois pour comprendre son effet sur le résultat affiché.

html-practice/
├── index.html
├── about.html
└── images/
    └── profile.jpg

Utilisez des noms de fichiers en minuscules, sans espaces.
Gardez l’extension .html visible.
Indentez les éléments imbriqués de manière cohérente.
Utilisez l’inspecteur du navigateur pour comparer la structure du code source au document obtenu.

<!-- Dans de nombreux éditeurs, saisissez ! pour créer la structure du document. -->
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Pratique avec l’éditeur</title>
  </head>
  <body>
    <h1>Ma page d’exercice</h1>
  </body>
</html>

APPROFONDIR ET PRATIQUER · ENVIRON 20 MIN

Comprenez. Créez. Expliquez.

Explorez l’exemple, essayez de corriger le code avant de consulter la solution, puis créez votre propre version.

Les objectifs de cet atelier

Résoudre un chemin à partir du fichier qui l’utilise
Distinguer l’ouverture directe d’un fichier d’un aperçu servi en HTTP
Trouver pourquoi un aperçu ne s’actualise pas, sans modifier le code au hasard

Le dossier du projet fait partie de votre travail

Imaginez index.html à côté des dossiers images et lessons. Depuis une page du dossier lessons, le chemin images/photo.jpg désigne un fichier dans lessons/images, et non dans le dossier situé à côté de index.html. Déplacer une page change le point de départ de ses chemins relatifs. Pour comprendre un chemin, repérez d’abord le document qui l’utilise, puis parcourez chaque segment.

Les majuscules et les minuscules peuvent compter après la mise en ligne, même si votre ordinateur accepte une différence. Photo.jpg et photo.jpg ne doivent pas être considérés comme identiques. Choisissez des noms en minuscules, affichez les extensions et gardez les ressources dans le projet pour qu’il fonctionne aussi sur un autre ordinateur.

Vérifiez l’aperçu avec méthode et notez vos observations

Un fichier ouvert directement utilise une URL file ; un serveur local fournit une URL HTTP. Certaines fonctions du navigateur et les liens relatifs à la racine ne se comportent pas de la même façon dans ces deux contextes. Vous pouvez ouvrir directement un document simple, puis tester le même projet en HTTP pour vérifier la navigation et le chargement des ressources.

Si une modification semble absente, enregistrez le fichier, vérifiez l’adresse et cherchez dans le code source reçu un mot que vous venez d’ajouter. S’il n’y figure pas, vous modifiez peut-être un autre fichier ou consultez une ancienne réponse. S’il est présent, examinez le DOM et les styles. Vous distinguerez ainsi un problème de fichier chargé d’un problème de balisage.

VOTRE ESPACE DE PRATIQUE

Créer des liens depuis une page dans un sous-dossier

Imaginez lessons/start.html à côté de lessons/next.html. Le fichier index.html et le dossier images se trouvent un niveau plus haut.

Ouvrir dans un nouvel onglet

Code

<main lang="fr">
  <h1>Pratique avec l’éditeur</h1>
  <nav aria-label="Pages d’exercice">
    <a href="../index.html">Accueil</a>
    <a href="next.html">Leçon suivante</a>
  </nav>
  <p>Repère de version : saved-version-two.</p>
</main>

<main lang="fr">
  <h1>Pratique avec l’éditeur</h1>
  <nav aria-label="Pages d’exercice">
    <a href="../index.html">Accueil</a>
    <a href="next.html">Leçon suivante</a>
  </nav>
  <p>Repère de version : saved-version-two.</p>
</main>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Nom de la version

Vous pouvez conserver cinq versions nommées par exemple. Restaurer une version remplace le code dans l’éditeur sans modifier la version enregistrée. Connectez-vous avant de modifier le code pour enregistrer votre travail sur votre compte. Les brouillons invités restent sur cet appareil.

Chargement du travail enregistré…

Pourquoi cet exemple fonctionne

Le segment ../ remonte du dossier lessons vers son parent, puis le navigateur cherche index.html.
Le chemin next.html reste dans le dossier lessons courant ; il ne part pas de la racine du site.
Le repère de version permet de vérifier que le navigateur a bien reçu le fichier enregistré. Retirez ces repères temporaires avant la publication.

À VOUS DE CORRIGER

Un lien qui ne fonctionne que sur votre ordinateur

Repérez le problème et proposez une correction. Expliquez ce qu’elle améliore dans le document, même si les deux versions se ressemblent à l’écran.

<a href="C:\Users\Alex\Desktop\site\about.html">À propos</a>

Afficher la correction et son explication

<a href="about.html">À propos de ce projet</a>

Les visiteurs n’ont pas accès au dossier Bureau de votre ordinateur. Une URL relative décrit un lien entre des fichiers du projet publié. Testez le lien depuis la page qui le contient, plutôt qu’en ouvrant vous-même le fichier cible.

À VOUS DE CRÉER

Créez un petit site de trois pages que vous pouvez déplacer

Créez une page d’accueil et deux pages dans un sous-dossier. Le site entier doit pouvoir être déplacé vers un autre dossier.

Votre plan de réalisation

Créez index.html, lessons/start.html et lessons/next.html.
Ajoutez des liens pour avancer et revenir, sans utiliser de chemins propres à votre ordinateur.
Déplacez tout le dossier d’exercice, puis rouvrez sa page d’accueil.
Renommez volontairement un fichier cible, observez l’erreur, puis corrigez le lien qui le désigne.

Vérifiez votre travail

Cette grille vous aide à évaluer votre travail ; elle ne donne pas de note automatique. Enregistrez vos fichiers et vérifiez chaque critère avant de marquer la leçon comme terminée.

Les trois pages sont accessibles par des liens.
Le projet fonctionne encore après avoir été copié ailleurs.
Vos notes précisent le chemin incorrect et le document à partir duquel il a été interprété.

Pour aller plus loin : Servez le dossier en HTTP, puis comparez un lien relatif à la racine et un lien relatif au document.

Savez-vous expliquer votre choix ?

Répondez d’abord avec vos propres mots, puis comparez votre raisonnement.

Pourquoi un lien peut-il fonctionner sur votre ordinateur et échouer en ligne ?

Il peut utiliser un chemin local absolu, une différence de majuscules ou un fichier qui n’a pas été envoyé. Tester le lien sur le site déployé est différent d’ouvrir un fichier séparément.

Faut-il réinstaller l’éditeur si l’aperçu semble ancien ?

Vérifiez d’abord l’enregistrement, l’URL demandée et le code source reçu. Ces observations permettent de trouver les causes courantes sans changer un logiciel qui n’est peut-être pas en cause.

Vos choix de confidentialité

Les bases de HTML

Organiser le texte et le contenu

Ajouter des liens et des médias

Présenter des listes et des tableaux

Créer des formulaires

Donner du sens à vos pages

Accessibilité et bonnes pratiques

Références et mise en pratique

HTML — Éditeurs de code

Adoptez une méthode fiable pour modifier et vérifier votre page

Profitez des aides de l’éditeur en gardant votre jugement

Les erreurs à éviter

Mise en pratique guidée

À retenir

Comprenez. Créez. Expliquez.

Les objectifs de cet atelier

Le dossier du projet fait partie de votre travail

Vérifiez l’aperçu avec méthode et notez vos observations

Créer des liens depuis une page dans un sous-dossier

Code

Résultat

Pourquoi cet exemple fonctionne

Un lien qui ne fonctionne que sur votre ordinateur

Créez un petit site de trois pages que vous pouvez déplacer

Votre plan de réalisation

Vérifiez votre travail

Savez-vous expliquer votre choix ?

Entraînez-vous à enregistrer et à actualiser

Code

Résultat

Mettez en forme les éléments imbriqués

Code

Résultat

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris

Vérifiez vos acquis