SL0720X - Le langage HTML

L'objectif de cette séance est de donner une introduction au langage HTML. Ainsi, vous comprendrez comment sont conçues les (la plupart des) pages web et apprendrez à en créer vous-même. Vous pourrez plus tard tirer parti de ces notions pour extraire de l'information sur le web.

Ci-après, pour télécharger un document, vous effectuerez un clic-droit sur le lien correspondant et sélectionnerez, suivant le navigateur que vous utilisez (en atelier, nous utiliserons Firefox), enregistrer sous ou enregistrer la cible du document sous.

Introduction : les balises

Les langages à balises (ou langages de balisage, markup language en anglais) sont un moyen de représenter de l'information, et dans notre cas, d'enrichir des données textuelles. HTML est un langage à balises parmi d'autres. Le principe des balises est commun à plusieurs langages (SGML dont HTML est issu, XML, etc.), mais la syntaxe d'HTML lui est propre. C'est, comme nous le verrons plus bas, à travers une balise HTML spécifique, que les textes des pages web sont interconnectés (HT pour HyperText).
En première approximation, on peut dire qu'une balise est constituée d'un chevron ouvrant < (signe inférieur), du nom de la balise et d'un chevron fermant > (signe supérieur). Exemple : <balise>
Les balises sont des "marqueurs" :

Une balise ouvrante ou vide peut comporter des attributs qui ont un nom et une valeur (cf. plus bas la balise <a href="...">) :
<balise nom_param1="valeur1" nom_param2="valeur2" nom_paramN="valeurN">

Les langages à balises sont généralement utilisés pour ajouter de l'information au texte, que celle-ci soit d'ordre structurelle, graphique ou sémantique (cette distinction n'ayant pas toujours lieu d'être).
HTML est le langage à balises qui permet d'ajouter certains types d'informations au texte des pages web ET de relier les documents par des hyperliens.

Dans certains langages (tels que XML), l'auteur d'un document peut créer ses propres balises. En HTML, les balises que l'on peut utiliser sont prédéfinies.

Document minimal

Téléchargez le squelette de document et :
  1. double-cliquez dessus pour le visualiser dans un navigateur;
  2. ouvrez le avec Textpad/Notepad : soit par un clic-droit sur le fichier et ouvrir avec/Textpad, soit lancez Textpad (bouton démarrer/programmes/...).

Ce document constitue une base minimale : imbriquée dans les balises <html> </html>, la paire de balises <body> </body> délimite le corps du document, i.e. son contenu visible.
La partie qui précède, entre <head> et </head> s'appelle l'en-tête (header). Elle peut contenir plusieurs types de méta-informations. Ici, seuls deux éléments sont présents :

Nous parlerons de ces deux derniers éléments dans la prochaine séance.

Dans l'éditeur de texte, modifiez le texte du document (entre les balises <body> </body>), enregistrez le document et, dans le navigateur, actualisez la page (menu affichage/actualiser, icône ou touche F5).
De même, modifiez dans l'éditeur de texte l'intitulé du titre (entre les balises <title> </title>), enregistrez le document et actualisez la page dans le navigateur. Observez la barre de titre de celui-ci.

Dans la suite, toute les manipulations suivront ce principe :

  1. modification du texte source HTML dans l'éditeur de texte
  2. sauvegarde du document
  3. affichage dans le navigateur
Édition du code HTML dans Textpad Rendu graphique dans Firefox
←→
squelette.html
↓ modification et sauvegarde ↓ F5 ou clic sur
←→
squelette.html

Structuration du texte : paragraphes

Mise en forme graphique

HTML permet d'opérer certaines mises en forme telles que texte en gras, en italique, en couleur. Ci-dessous, quelques exemples :
HTML rendu
<p>Pour mettre une portion de texte en évidence,<br>
<b>on peut utiliser du gras (bold),</b><br>
<i>de l'italique,</i><br>
<font color="red">de la couleur,</font>
<font size="6pt">ou jouer sur la taille du texte.</font></p>
<p><i><b>On peut même <font color="green">cumuler</font></b></i><br>
(même si c'est inesthétique)</p>

Pour mettre une portion de texte en évidence,
on peut utiliser du gras (bold),
de l'italique,
de la couleur.
ou jouer sur la taille du texte.

On peut même cumuler
(même si c'est inesthétique)

Utilisez ces éléments dans le document précédent (fakebook.html avec paragraphes) pour :
Exemple :

Mise en forme structurelle

Listes

Une série d'items peut être matérialisée par la paire de balises <ul> </ul> (unordered list) ou <ol> </ol> (ordered list), à l'intérieur de laquelle peuvent se trouver des éléments li (list item). Exemple :
HTML rendu
Liste non numérotée :
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Liste numérotée :
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol> 		Liste non numérotée :
  • item 1
  • item 2
  • item 3
Liste numérotée :
  1. item 1
  2. item 2
  3. item 3

Tableaux

Les tableaux sont délimités par les balises <table> </table>. À l'intérieur d'un tableau, les lignes sont délimitées par les balises <tr> </tr> (table raw). Enfin, à l'intérieur d'une ligne, les cellules sont délimitées par les balises <td> </td> (table data).
Exemple :
HTML rendu
<table border=1>
<tr>
    <td>ligne 1, col 1</td>
    <td>ligne 1, col 2</td>
    <td>ligne 1, col 3</td>
</tr>
<tr>
    <td>ligne 2, col 1</td>
    <td>ligne 2, col 2</td>
    <td>ligne 2, col 3</td>
</tr>
</table>
ligne 1, col 1 ligne 1, col 2 ligne 1, col 3
ligne 2, col 1 ligne 2, col 2 ligne 2, col 3

À l'aide de ces éléments, soit à la suite du document précédent, soit dans un nouveau document HTML (en repartant du document squelette), essayez de reproduire le texte et la mise en forme décrivant la liste des modules suivants (les modules obligatoires dans un tableau, les options dans une liste) :

Titres

Les titres de section peuvent être placés entre les paires de balises <h1> </h1> (titre de premier niveau), <h2> </h2> (titre de niveau 2), ... et <h6> </h6> (titres de niveau 6).
Exemple :
HTML rendu
<h1>SL0720X - Le langage HTML</h1>
<h2>Document minimal</h2>
Téléchargez...
<h2>Mise en forme structurelle</h2>
<h3>Listes</h3>
Une série d'items...

SL0720Y - Le langage HTML

Document minimal

Téléchargez...

Mise en forme structurelle

Listes

Une série d'items...

Les images

Les images d'une page web ne sont pas "contenues physiquement" dans la page, mais dans un fichier externe. La page web fait référence à ce fichier d'image via la balise img, qui n'a pas de balise fermante, mais un attribut src (source) qui précise l'adresse de l'image à afficher.
Exemple :
HTML rendu
Dialogue :<br>
<img src="http://sciences-du-langage.univ-tlse2.fr/medias/photo/dialogue10006-300x131_1418739737428-jpg"> 		Dialogue :

Vous pouvez copier l'adresse :
http://sciences-du-langage.univ-tlse2.fr/medias/photo/dialogue10006-300x131_1418739737428-jpg
de l'image ci-dessus dans la barre d'adresse de votre navigateur pour vérifier que le fichier image a bien une existence propre, ou cliquer sur le lien ci-dessous :
http://sciences-du-langage.univ-tlse2.fr/medias/photo/dialogue10006-300x131_1418739737428-jpg

Essayez d'insérer cette image dans votre document "liste des modules" : Lorsque vous visitez dans un navigateur la page d'accueil du département SDL, le déroulement est le suivant :
  1. vous (utilisateur) demandez au navigateur d'accéder à cette page
  2. le navigateur demande le fichier HTML correspondant au serveur web qui héberge le site dont la page est issue
  3. le navigateur reçoit ce fichier et analyse le code HTML
  4. si le code contient des balises <img src="...">, le navigateur télécharge chaque fichier image correspondant
  5. le navigateur peut alors afficher la page

Les hyperliens

Les hyperliens présents dans le texte contenu dans une page web, l'"hypertexte", font du web sa spécificité de réseau documentaire. Un lien est composé de 3 éléments : Un lien est constitué de la paire de balises <a> </a> (pour anchor/ancre) qui encadrent le texte du lien. La première balise (ouvrante) est assortie d'un attribut href (hyper reference) dont la valeur est l'adresse de la page cible :
<a href="adresse_de_la_page_cible"> texte du lien </a>

Exemple :
(lorsque vous cliquez sur un lien ci-dessous, cliquez ensuite sur le bouton Précédent, Prev ou Back, ou la flèche vers la gauche de votre navigateur pour revenir à cette page)
HTML rendu
Vous pouvez visiter la
<a href="http://sciences-du-langage.univ-tlse2.fr/accueil-sciences-du-langage/licence/">page Licence</a> du
Département <a href="http://sciences-du-langage.univ-tlse2.fr/">Sciences du Langage</a>. 		Vous pouvez visiter la page Licence du Département Sciences du Langage.

Dans cet exemple, la source du lien est la page courante (celle que vous êtes en train de lire), dont l'adresse est http://fsajous.free.fr/SDL/SL0720X/html/index.html
Le texte du premier lien est page Licence. Sa cible est la page décrivant la licence du département Sciences du Langage, dont l'adresse est http://sciences-du-langage.univ-tlse2.fr/accueil-sciences-du-langage/licence/

Lorsque vous cliquez sur un des liens ci-dessus, la page de destination du lien vient remplacer la page courante.
Pour conserver la page courante et ouvrir une nouvelle fenêtre du navigateur ou un nouvel onglet, on peut utiliser l'attribut _target (cible) comme suit :
HTML rendu
Vous pouvez visiter la
<a href="http://sciences-du-langage.univ-tlse2.fr/accueil-sciences-du-langage/licence/" target="_blank">page Licence</a> du
Département <a href="http://sciences-du-langage.univ-tlse2.fr/" target="_blank">Sciences du Langage</a>. 		Vous pouvez visiter la page Licence du Département Sciences du Langage.

Application :
De même que pour les images, le dernier lien (vers la page des masters) ne sera opérationnel que si votre ordinateur est connecté à internet. En revanche, les 3 liens vers l1, l2 et l3 marcheront même si vous n'êtes pas connecté : les liens pointent vers des documents qui sont présents "en local" sur votre machine (physiquement présents sur le disque dur de l'ordinateur que vous utilisez).


Nous distinguerons les liens absolus des liens relatifs. Les premiers sont essentiellement utilisés pour pointer, depuis un site donné, vers la page d'un autre site (eg. depuis la page du site www.lexilogos.com vers une page du site www.cnrtl.fr). Les liens relatifs sont utilisés pour pointer, depuis la page d'un site, vers une autre page du même site.

Dans les chemins relatifs, on indique le chemin à parcourir pour se placer dans le répertoire cible relativement au répertoire courant. Notons que pour séparer les répertoires, les chemins utilisent le caractère \ (backslash) sous Windows, alors que l'adresse des liens et des images se compose avec des / (slash).

Dans une sitution comme celle représentée ci-dessous,
            
contenu du répertoire C:\SL0720\HTMLcontenu du répertoire C:\SL0720\HTML\formations
 
contenu du répertoire C:\SL0720\HTML\imagescontenu du répertoire C:\SL0720\TreeTagger

Le document C:\SL0720\HTML\mondocument.html pourrait contenir les liens et images suivants :

Méta-balises et moteurs de recherche, pages de résultats

Effectuez une recherche sur Google avec les mots-clés suivants : sciences du langage toulouse
La page de résultats obtenue se présente comme suit :

page de résultats google

Le code source de l'en-tête HTML de la page correspondant au premier résultat est le suivant :
source de la page SDL

Pour chaque page résultat sont affichées :

Il arrive que les auteurs de pages web ne spécifient pas les champs title et description. Dans ce cas, il peut arriver que le moteur les remplace par une portion de texte contenue dans la page, qu'il juge être représentative.

Entités HTML

Il est nécessaire d'insérer un code symbolique littéral dans le code HTML pour produire le rendu de certains caractères. C'est le cas notamment des chevrons < et >. Ces deux caractères sont utilisés pour matérialiser les balises et sont donc des caractères « réservés ». Pour produire le caractère <, on écrit &lt; (less than). De même, pour produire le caractère >, on écrit &gt; (greater than). Enfin, le caractère & étant utilisé pour produire les entités HTML, on écrit &amp; (ampersand) pour produire ce symbole.
Vous trouverez une liste (non exhaustive) d'entités HTML ici.

Remarques

Structure et mise en forme

HTML, tel qu'il est présenté ici, mélange structure et mise en forme. Les balises permettent en effet de donner un découpage structurel du texte (paragraphes, titres de sections, etc.) et d'effectuer une mise en forme graphique (police, couleur, taille, etc.)
Ce mélange n'est pas toujours souhaitable : par exemple, dans le document "fakebook" mettant en évidence les NP, si l'on souhaitait changer la mise en forme des noms propres (actuellement en gras) pour les afficher dans une taille plus grande, il faudrait modifier manuellement les paires de balises <b> </b> correspondantes en <font size="..."> </font>. On pourrait automatiser cette opération en utilisant la fonction "rechercher/remplacer" dont disposent la plupart des éditeurs de textes.
Mais cette opération remplacerait TOUS les éléments en gras, y compris ceux qui ne correspondent pas aux noms propres, ce qui n'est pas le but recherché. Pour pallier ce type de problèmes (notamment) sont apparues des feuilles de styles CSS (Cascading Style Sheets). Un des principes est de définir des classes d'éléments et de définir un style (une mise en forme) pour ces éléments. On attribue ensuite ces classes à des éléments du document HTML, qui s'affichent tous de la manière spécifiée par le style. Ces éléments de style peuvent être spécifiés dans un fichier à part ou dans l'en-tête du document. Dans le cas précédent, cela donnerait :
Exemple :
HTML rendu
<html>
<head>
<title>Fakebook - SN mis en forme</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<style type="text/css">
.SN {
font-weight : bold;
}
</style>
</head>
<body>

<span class="SN">Facebook</span> : Tous les droits, pour toujours<br>
<br>
Le réseau social a modifié ses conditions d'utilisation, s'arrogeant tous les droits sur les contenus personnels.<br>
<br>
par <span class="SN">Alexandre Hervaud</span><br>
<br>
<p>Décidément, pas une semaine ne passe sans qu'une nouvelle polémique ne vienne entacher le succès fulgurant de <span class="SN">Facebook</span>.
Le réseau social, qui sort à peine d'une mini-polémique sur un nouveau système publicitaire (engagement ads) jugé intrusif pour beaucoup,
vient en effet de modifier ses conditions d'utilisation (terms of service)[...]</p>
</body>
</html> 		Facebook : Tous les droits, pour toujours

Le réseau social a modifié ses conditions d'utilisation, s'arrogeant tous les droits sur les contenus personnels.

par Alexandre Hervaud

Décidément, pas une semaine ne passe sans qu'une nouvelle polémique ne vienne entacher le succès fulgurant de Facebook. Le réseau social, qui sort à peine d'une mini-polémique sur un nouveau système publicitaire (engagement ads) jugé intrusif pour beaucoup, vient en effet de modifier ses conditions d'utilisation (terms of service)[...]

Nous avons utilisé ici la paire de balises <span> </span> qui se comporte comme une "délimitation logique" d'un segment auquel on peut affecter un attribut class (ici SN). Employée seule, cette balise n'a aucun effet sur le rendu. C'est le style associé à la classe, défini ici dans l'en-tête, à l'intérieur de la paire de balises <style> </style>, qui provoque une mise en forme particulière.

Si nous voulons désormais que les SN ne s'affichent plus en gras mais dans une police de taille plus importante, il suffit seulement de changer la définition du style dans l'en-tête sans toucher au texte :

HTML rendu
<html>
<head>
<title>Fakebook - SN mis en forme</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<style type="text/css">
.SN {
font-size : 20pt;
}
</style>
</head>
<body>

<span class="SN">Facebook</span> : Tous les droits, pour toujours<br>
<br>
Le réseau social a modifié ses conditions d'utilisation, s'arrogeant tous les droits sur les contenus personnels.<br>
<br>
par <span class="SN">Alexandre Hervaud</span><br>
<br>
<p>Décidément, pas une semaine ne passe sans qu'une nouvelle polémique ne vienne entacher le succès fulgurant de <span class="SN">Facebook</span>.
Le réseau social, qui sort à peine d'une mini-polémique sur un nouveau système publicitaire (engagement ads) jugé intrusif pour beaucoup,
vient en effet de modifier ses conditions d'utilisation (terms of service)[...]</p>
</body>
</html> 		Facebook : Tous les droits, pour toujours

Le réseau social a modifié ses conditions d'utilisation, s'arrogeant tous les droits sur les contenus personnels.

par Alexandre Hervaud

Décidément, pas une semaine ne passe sans qu'une nouvelle polémique ne vienne entacher le succès fulgurant de Facebook. Le réseau social, qui sort à peine d'une mini-polémique sur un nouveau système publicitaire (engagement ads) jugé intrusif pour beaucoup, vient en effet de modifier ses conditions d'utilisation (terms of service)[...]

Nous ne traiterons pas ici des mécanismes des feuilles de style, mais, de plus en plus répandues, il est bon de mentionner leur existence. Si vous souhaitez aller plus loin dans la mise en forme, vous trouverez nombre d'exemples et de tutoriels sur le web.

Accès au code source HTML d'une page web

Lorsque vous visualisez un document HTML avec votre navigateur, vous avez sous les yeux son rendu graphique. Pour accéder au code HTML qui a produit ce rendu, vous pouvez effectuer un clic droit sur la page (en dehors des images) et, suivant votre navigateur, sélectionner "code source de la page" ou équivalent. Lorsque la page fait partie d'un "jeu de cadres" (frameset), il faut sélectionner "ce cadre/code source du cadre" ou équivalent.
Dans certains cas, il est possible que javascript empêche l'affichage du menu contextuel. Il est néanmoins toujours possible de visualiser le code HTML en désactivant Javascript temporairement et en procédant comme décrit plus haut. Une autre solution consiste à sauver la page dans un répertoire donné (depuis votre navigateur : Fichier/Enregistrez sous) et de l'ouvrir depuis un éditeur de texte : ne pas double-cliquer sur le fichier, mais :

Bilan

Ce TD/TP ne présente pas de façon exhaustive HTML, mais vous devriez désormais comprendre son fonctionnement. Vous devriez être capable de produire des pages web. De plus, cela pourra permettre par la suite (dans d'autres modules) d'utiliser des pages web pour créer des ressources linguistiques.

Le paragraphe accès au code source HTML vous donne un moyen d'explorer le fonctionnement de certaines pages.
Les principes étudiés dans ce TD/TP vous donnent les bases pour comprendre les pages utilisant essentiellement du HTML. Néanmoins, HTML est de plus en plus couplé avec d'autres technologies (Javascript, Ajax, intégration de Flash ou de vidéos, etc.) qui dépassent le cadre de ce cours.

Si vous désirez aller plus loin, qu'il s'agisse de découvrir d'autres balises que celles présentées ici, ou si vous voulez découvrir les feuilles de styles CSS, vous trouverez de nombreux cours sur internet. Pour HTML, on peut mentionner les sites developpez.com ou commentcamarche.net.

Il existe des éditeurs HTML qui facilitent la saisie de code en insérant automatiquement des balises. Ces éditeurs spécialisés sont beaucoup plus pratiques que les éditeurs de textes classiques, mais il est bon, dans un premier temps, de saisir soi-même le code HTML pour comprendre les mécanismes sur lesquels il repose.

HTML, documents, web, internet...

Ce cours s'est concentré sur HTML. Afin de replacer ce langage dans la structure plus globale d'«internet» et les «pages web» dans le contexte d'interaction entre navigateurs et sites web, vous :
[ Retour sommaire SL0720 ]

[ Mention légale ]