<html><head><title>Le titre de la page</title></head><body><h1>Un titre de niveau 1</h1><section><p>Bonjour, tout le <a href="https://fr.wikipedia.org/wiki/Hello_world">monde</a></p></section></body></html>
Entraînement
Créer une page
Copiez-collez le code précédent dans un fichier texte en utilisant l’éditeur de votre choix (le bloc notes si vous n’avez rien d’autre).
Sauvegarder votre fichier texte sous le nom hello.html (ou un autre nom qui vous ferait plaisir).
Ouvrez votre fichier dans votre navigateur préféré (Firefox, donc).
Émerveillez-vous.
Modifier une page
Reprenez votre fichier hello.html
Modifiez-le pour que le titre de la page soit votre nom.
Modidifiez-le encore : remplacer le paragraphe de texte par un paragraphe qui vous décrit en trois phrases et qui contient un lien vers la page Wikipédia de votre lieu de naissance (ou de la ville la plus proche qui a une page Wikipédia).
Sauvegardez le résultat sous le nom moi.html
Ouvrez ce nouveau fichier dans un navigateur, et autocongratulez-vous si tout a bien marché.
Balises
Les éléments entre chevrons< et > sont des balises (tags, elements)
<title>This is a title</title>
Les balises structurent le document :
html├─ head└─ body ├─ h1 └─ section └─ p
Elles le séparent en en-tête (<head>) et contenu (<body>)
Dans <head>, les éléments (comme <title>) indiquent des métadonnées.
Dans <body>, ils ont plusieurs rôles, entre autres :
Décrire une structure hiérarchique (<section>, <p>…)
Indiquer un titre (<h1>, <h2>…)
Enrichir le texte éléments (<a>…)
Approximations très grossières.
Les balises peuvent aussi contenir des métadonnées, comme la cible d’un lien :
En principe, l’information donnée est purement sémantique : on ne code pas la mise en forme.
TODO
Suivre le tutoriel Introduction à HTML sur MDN jusqu’à « Déboguer de l’HTML ». Il est partiellement interactif, assurez vous de bien tout lire avec attention, de faire tous les exercices et de venir vers moi si quelque chose coince.
Décrire et manipuler un document numérique Cours 4 : HTML Loïc Grobol <lgrobol@parisnanterre.fr> Université Paris Nanterre