Décrire et manipuler un document numérique

Cours 4 : HTML

L. Grobol <lgrobol@parisnanterre.fr>

Université Paris Nanterre

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 
<!doctype html>
<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>

Page web, site web, etc.

On a plusieurs notions à démêler :

  • Page web Un document écrit en HTML affichable dans un navigateur
  • Site web Un ensemble de pages web regroupées en une seule ressource, reliées entre elles par des liens et en général accompagnées de ressources média (images, sons, vidéos…).
  • Internet Un réseau mondial d’ordinateurs connectés par des liaisons réseaux
  • Serveur web Un ordinateur relié à Internet qui héberge un site web.
  • Moteur de recherche Un site web qui aide à trouver d’autres pages web, comme Google, Bing, Yahoo ou DuckDuckGo.

Un premier site web

Cette partie s’inspire librement du tutoriel Démarrer avec le web de MDN

Installer un éditeur de texte

Si vous travaillez sur votre propre machine, installez vscode. Sinon tout devrait pouvoir de faire avec la version en ligne vscode.dev (c’est juste un peu moins agréable).

Si vous préférez utiliser une autre éditeur de texte ou environnement de développement, ça ne pose aucun problème. Assurez-vous juste qu’il s’agit bien d’un éditeur de texte et non d’un logiciel de traitement de texte.

Créer des fichiers textes

Les fichiers textes (qui ne contiennent qu’une suite de caractères) vont être notre focus ici et on va avoir besoin d’en créer plusieurs.

  1. Ouvrez votre explorateur de fichiers, allez dans le dossier où vous stockez vos documents de cours (ou n’importe où qui vous fait plaisir) et créez un dossier nommé site.
  2. Dans ce dossier, créez un fichier nommé hello.txt
  • Attention : il vous faudra peut-être configurer votre système pour qu’il affiche correctement les extensions
  1. Ouvrez votre dossier site dans vscode, et écrivez Hello, world! dans hello.txt.

Créer une page web

<!doctype html>
<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>
  1. Copiez-collez le code précédent dans un fichier texte et sauvegardez-le sous le nom hello.html
  2. Ouvrez votre fichier dans votre navigateur préféré (Firefox, donc).
  3. É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. Modifiez-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>…)

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.

La suite

Valider un fichier HTML

Copiez-collez votre fichier dans le validateur du W3C. Que constatez-vous ?

Le validateur donne normalement au moins deux avertissements :

  • Aucune langue n’est précisée
  • La <section> ne contient pas de titre (qui ici devrait être un <h2> puisqu’on a seulement un <h1>)

Le validateur donne aussi un lien vers de la documentation, qui n’est pas forcément la plus agréable à lire.

Apprendre et se documenter

Le W3C est une organisation qui propose divers standards pour le web, et notamment pour le format HTML. Elle publie de la documentation technique, plutôt à l’usage des développeureuses de navigateurs etc.

Pour apprendre, je vous recommande plutôt d’aller chercher sur MDN, qui est prévu pour être plus pédagogique et est au moins partiellement traduit en français.

Allez sur MDN et cherchez « section » pour trouver le problème signalé par le W3C

On trouve

Pour récapituler, chaque
doit être identifiée, généralement en incluant un titre (élément h1 à h6) comme enfant de l’élément

, autant que possible.

et un exemple

<section>
  <h2>Mon super titre</h2>
  <p>Beaucoup de contenu génial</p>
</section>

Complétez moi.html en tenant compte de cette information.

TODO

Dans le tutoriel Introduction à HTML, suivre les modules « Commencer avec le HTML », « Qu’avez-vous dans la tête ? Métadonnées en HTML », « Titres et paragraphes » et « Création d’hyperliens » puis « Testez vos compétences : les liens ». Vous devez lire le texte et faire les exercices interactifs, et me poser des questions si quelque chose n’est pas clair.

Je vous encourage à suivre autant que possible de ce tutoriel, il est long, mais assez complet. Si vous arrivez au bout en ayant tout compris, vous aurez l’essentiel de ce qu’il vous faut pour comprendre HTML.