Décrire et manipuler un document numérique

Cours 4 : HTML

Loïc Grobol <lgrobol@parisnanterre.fr>

Université Paris Nanterre

2024-02-05

HTML

Hypertext Markup Language

  • Créé autour de 1991 par Tim Berners-Lee
    • Avec les adresses URL et le protocole HTTP c’est ce qui fait le web
    • Objectif : un format simple pour décrire des documents textuels structurés, incluant des ressources multimédia et liés entre eux.
  • À l’origine un cas particulier de SGML, s’en éloigne avec le temps
  • Toujours en évolution pour s’adapter aux usages 
<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

  1. 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).
  2. Sauvegarder votre fichier texte sous le nom hello.html (ou un autre nom qui vous ferait plaisir).
  3. Ouvrez votre fichier dans votre navigateur préféré (Firefox, donc).
  4. Émerveillez-vous.

Modifier une page

  1. Reprenez votre fichier hello.html
  2. Modifiez-le pour que le titre de la page soit votre nom.
  3. 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).
  4. Sauvegardez le résultat sous le nom moi.html
  5. 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 :

<a href="https://fr.wikipedia.org/wiki/Hello_world">monde</a>

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