HTML5

Introduction

Pourquoi apprendre le Web ?

Le Web est de nos jours omniprésent, que ce soit via des :

• sites Web servant d'outils de communication (e.g. portefolio, vitrine, documentation en ligne, etc.) ;
• applications Web fournissant des services à des utilisateurs sans requérir d'installation, et sans se soucier de la plateforme utilisée.

En Sciences des Données, vous utilisez déjà (ou utiliserez) du Web pour des :

• formulaires en lignes (e.g. via Google form) ;
• exports Web de tableaux de bords ;
• productions de graphiques interactifs via Plotly, RShiny, etc.

Il existe une pléthore d'outils pour le Web. En tout premier lieu, il convient donc de choisir les bons outils pour les bons besoins, en fonction des contraintes du projet. Ces outils étant si nombreux, et en constante évolution, qu'il n'est pas possible de tous les étudier dans le cadre de cette formation.

Il est ainsi nécessaire d'apprendre les bases du Web afin que vous puissiez plus aisément vous adapter à de nouveaux outils, et les adapter à vos besoins et contraintes spécifiques (configurations, plugins, etc).

La formation ayant une coloration Cybersécurité, nous verrons aussi quelques notions de sécurité Web, vous permettant d'avoir un recul critique sur le Web.

D'où vient le Web ?

La problématique

Nous sommes en 1990, Tim Berners-Lee travaille au CERN. À l'époque, la documentation technique du CERN était rédigée via SGML, un méta-langage. SGML découpe les documents en 3 parties :

• le DTD (Document Type Definition) : la structure/le format du document.
• le contenu : les informations contenues dans le document.
• les feuilles de styles : comment afficher les informations.

Le DTD permet l'uniformisation des documents, permettant alors d'aisément traiter des lots de documents, notamment pour des opérations d'indexations, et de recherche.

Les feuilles de styles, quant à elles permettent de séparer le contenu de la présentation. Les ingénieurs peuvent ainsi écrire plus efficacement le contenu technique sans se soucier de la mise en forme. On ajoute ensuite une feuille de style permettant un affichage uniformisé des informations, mais différencié en fonction du support (écran, feuille A4, livre, etc).

À l'époque, les chercheurs au CERN travaillaient sur plusieurs lieux géographiques différents. Il était alors nécessaire de partager de la documentation, à distance. Pour cela ils utilisaient un protocole d'échange de fichiers à distance appelé FTP (File Transfert Protocol).

Le problème est que certains documents faisaient référence à d'autres. Pour cela les liens hypertextes sont très pratiques : dans le document, il suffit de cliquer sur le lien pour ouvrir le document référencé.

Sauf que... les liens hypertextes ne marchent que pour des documents locaux, comment ouvrir des documents à distance ?

Tim Berners-Lee va alors créer tout un ensemble d'outils et de concepts afin de résoudre ce problème.

Le début du Web

En tout premier lieu, il faut pouvoir indiquer la ressource distante référencée, donc avoir un moyen de l'identifier. Pour cela Tim Berners-Lee va créer le concept d'URL (Unique Resource Locator), une chaîne de caractère référençant une ressource distante et structurée de la sorte : .

Il faut ensuite pouvoir récupérer cette ressource. Le problème est que FTP a été conçu pour télécharger/uploader des fichiers par lots. Il n'est alors pas très adapté à des téléchargements ponctuels et temporaires de fichiers uniques. Tim Berners-Lee va alors créer HTTP (HyperText Transfert Protocol) qui permet d'obtenir très simplement une ressource à partir de son URL.

Tim Berners-Lee créée aussi le tout premier navigateur Web (WorldWideWeb) capable d'accéder à des ressources distantes à partir de son URL. Il supporte alors les protocoles suivants :

• : pour lire des ressources locales.
• : un ancêtre des forums en ligne.

Il ne reste alors plus qu'à définir un type de document SGML qui pourra contenir des liens hypertextes URL, et qui s'affichera dans le navigateur. Pour cela Tim Berners-Lee créée HTML (HyperText Markup Langage), une application de SGML.

HTML

Les balises HTML

HTML est un langage permettant de décrire une structure via des balises, e.g. :

• correspond à un retour à la ligne (*break line*).
• correspond à un paragraphe (*paragraph*).

Les éléments qui ne peuvent avoir de contenu s'écrivent avec une balise auto-fermante (self-closing tag) qui se présente sous la forme suivante : .

Les éléments qui peuvent avoir du contenu, e.g. un paragraphe peut contenir du texte, s'écrivent sous la forme suivante :

• est la balise ouvrante (opening tag).
• est la balise fermante (closing tag).
• est le contenu de la balise.

Vous remarquerez que HTML utilise et pour marquer le début et la fin d'une balise. Ainsi, est interprété par HTML comme étant une balise.

Pour éviter cela, on va échapper les caractères utilisés par HTML via des entités HTML (HTML entities) :

• devient (lesser than) ;
• devient (greater than) ;
• devient (quote) ;
• devient (ampersand).

💡 En HTML, les commentaires s'écrivent ainsi :

Les attributs HTML

Les attributs HTML (HTML attribute) permettent de configurer les éléments HTML :

• affiche l'image présente à l'URL indiquée par l'attribut .
• est un lien hypertexte pointant sur l'URL indiqué par l'attribut .

Les attributs HTML sont indiqués dans la balise ouvrante (ou auto-fermante) de l'élément HTML. Le nom de l'attribut est précédé d'un suivi de sa valeur entre guillemets.

💡 Une même balise HTML peut contenir plusieurs attributs, séparés par un espace :

• : ouvrir dans un nouvel onglet.
• • est le **type MIME** du fichier.
  • au clic, télécharge la ressource.
  • indique le nom par défaut du fichier téléchargé.

💡 Certains attributs n'ont pas besoin de valeur et configurent l'élément par leur seule présence. Ce sont les attributs booléens (boolean attributes), e.g. :

Chaque type d'élément HTML a sa propre liste d'attributs qui permettent de le configurer. Il existe cependant des attributs appelés attributs universels (global attributes) communs à tous les éléments HTML, e.g. :

• permet d'afficher une bulle d'information (tooltip) au survol de l'élément.

Données structurées

Listes

Une liste est un élément HTML qui contient plusieurs sous éléments (list item). Les listes peuvent être ordonnées (ordered list) ou non (unordered list).

Tableaux

Les tableaux (table) sont composés d'un (ou plusieurs) corps (table body) contenant des lignes (table row), elles-même composée de cellules (table data) :

💡 Il est possible d'ajouter les cellules d'en-têtes (table header), dans le corps de la table, mais aussi dans une en-tête (table header) ou un pied (table footer) :

Structure et sémantique

Par défaut, certains éléments HTML modifient l'affichage du texte :

De la même manière, les balises à permettent d'indiquer différents niveaux de titres.

⚠ Ils ne doivent pas être utilisés pour leur affichage par défaut, qui peut être modifié, mais pour leur sémantique, i.e. le sens qu'ils donnent.

⚠ Il ne doit y avoir qu'un seul par page.

Sémantique vs affichage

Pour rappel, HTML décrit la structure d'une page Web, mais pas la manière dont les éléments doivent être affichés dans la page Web.

Il est notamment possible d'intégrer e.g. des données sous la forme de listes ou de tableaux. Cependant, les listes et les tableaux ne doivent être utilisés que pour décrire la structure des données. Ils ne doivent pas être utilisés pour positionner des éléments sur une page Web.

Par exemple, pour afficher une liste d'utilisateurs avec différentes propriétés (e.g. ID, nom, prénom, mails) on utilisera un tableau. En revanche, on évitera de l'utiliser pour un ensemble d'images s'affichant sous la forme d'une grille.

Un tableau a un nombre de colonnes et de lignes fixe. Une grille quant à elle peut avoir un nombre de colonnes et de lignes variables afin d'adapter l'affichage à l'espace disponible, e.g. lié à la largeur de l'écran.

Structure d'une page Web

L'arbre DOM

Comme nous l'avons vu, un élément HTML peut contenir du texte ou d'autres éléments HTML. Il est d'ailleurs très fréquent d'utiliser les conteneurs génériques :

• pour grouper un contenu dans un "bloc".
• se comporte comme du texte inséré à la ligne courante.

On peut représenter cette hiérarchie sous la forme d'un arbre, appelé arbre DOM où chaque élément HTML est associé à un noeud (node), et a pour fils son contenu :

Document
├── div
│   ├── A
│   ├── div
│   │   └── B
│   └── C
└── div
    ├── D
    ├── span
    │   └── E
    └── F

On utilise alors la terminologie suivante :

Racine
├── ...
...

Parent
├── Enfant
...

Ancêtre
├── Descendant
... ├── Descendant
   ...

...
├── Frère
└── Frère

Inspecter une page Web

• inspecteur / sélecteurs

Afficher/inspecter l'arbre DOM de la page

• attributs globaux class/id
• sélecteurs (#, .)

Attributes => id et #id (unique) => class : pas besoin unique, séparés par un espace. => selecteurs + outils ? (inspecteur : all vs clic element - TP?) => + tagname + #id + .class (+ de choses + tard) => + attr [attr] / [attr=""] + plein d'autres, pas la peine de retenir par coeur. => sémantique (e.g.