image/svg+xml $ $ ing$ ing$ ces$ ces$ Res Res ea ea Res->ea ou ou Res->ou r r ea->r ch ch ea->ch r->ces$ r->ch ch->$ ch->ing$ T T T->ea ou->r

Le langage HTML

  1. Introduction
  2. HTML vs. XHTML
  3. Organisation d'une page HTML
    1. Exemple d'en-tête de page : balises ...
    2. Balises pour le corps de page
      1. Structuration de la page
      2. Sections et titres
      3. Texte
        1. Balises essentielles
        2. Retour à la ligne
        3. Caractères spéciaux
      4. Listes
      5. Tableaux
      6. Liens hypertextes
      7. Formulaires
        1. Entrée de texte
        2. Sélection parmi un ensemble de valeur
        3. Autres éléments de formulaires
      8. Eléments multimédias

Introduction

HTML vs. XHTML

Plus de contraintes pour la variante XHTML :

Exemple de page XHTML minimaliste :

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
    <head> 
        <title>Hello World</title> 
    </head> 
    <body> 
		<p>Hello <br /> World!</p>
	</body>
</html>

Organisation d'une page HTML

Exemple d'en-tête de page : balises <head>...</head>

<head>
	<title>Titre de la page</title>
	
	<!-- Quelques balises meta -->
	<meta charset="UTF-8" /> <!-- Jeu de caractères utilisé pour encoder le texte de la page -->
	<meta name="description" content="Résumé de la page, peut être utilisé par les moteurs de recherche pour afficher un snippet" />
	<meta name="keywords" content="motcle1, motcle2, ..." /> <!-- Des mots-clés de la page -->
	<meta name="author" content="John Doe" /> <!-- L'auteur de la page -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Pour indiquer le comportement d'affichage -->

	<!-- Des balises meta http-equiv qui jouent le rôle d'en-têtes HTTP (sans avoir besoin de configurer le serveur) -->
	<meta http-equiv="pragma" content="no-cache" /> <!-- La page ne doit pas être conservée dans le cache -->
	<meta http-equiv="refresh" content="60" /> <!-- La page doit être rafraîchie automatiquement toutes les minutes -->
	
	<!-- Balises link référençant des ressources utilisées par la page -->
	<link rel="stylesheet" href="mystyle.css" /> <!-- Indication d'une feuille de style CSS à appliquer -->
	<link rel="icon" type="image/png" href="logo.png" /> <!-- Chemin vers une icone (favicon) pour le site -->
	<link rel="canonical" href="http://example.com/page.html" /> <!-- Si la page est accessible à différentes adresses, on indique son adresse canonique de référence -->
	<link rel="alternate" hreflang="fr-ca" href="http://example.com/tabernacle.html" /> <!-- Indique une version alternative de notre document en québecquois -->

	<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Une petite introduction au langage HTML",
  "description": "Différentes choses plus ou moins intéressantes concernant le HTML et ses nombreuses balises diverses et variées.",
  "provider": {
    "@type": "Organization",
    "name": "Université Gustave Eiffel",
    "sameAs": "http://www.univ-eiffel.fr"
  }
}
	</script>
</head>

Quelques explications :

Balises pour le corps de page

Structuration de la page

Le corps d'une page est compris entre les balises <body> ... </body>. Une page peut comprendre les sections suivantes :

<body>
	<header>
		<img src="logo.png" alt="Un beau logo" />
		<nav>
			<a href="page1.html">Page 1</a> |
			<a href="page2.html">Page 2</a>
		</nav>
	</header>
	<main>
		<h1>Some comments</h1>
		<article>
			<h2>Comment0</h2>
			<p>Very interesting</p>
		</article>
		<article>
			<h2>Comment1</h2>
			<p>Bad!</p>
		</article>
	</main>
	<footer>
		<hr />
		Copyright John Doe, under CC By-NC-SA license
	</footer>
</body>

Sections et titres

Les balises <h1>...</h1> jusqu'à <h6>...</h6> permettent d'indiquer 6 niveaux de titre du plus important (h1) au moins important (h6). On les utilise généralement au début de section pour structurer le document comme présenté ici :

<section>
	<h1>Le langage HTML</h1>
	<p>HTML est un langage de description de page sympathique</p>
	
	<section>
		<h2>Partie head</h2>
		<p>
			Très important pour indiquer les méta-données de la page.
		</p>
	</section>
	
	<section>
		<h2>Partie body</h2>
		<p>
			C'est là que l'on a le contenu de la page
		</p>
		<section>
			<h3>Structuration</h3>
			<p>Blablabla...</p>
		</section>
	</section>
</section>

Texte

Balises essentielles

Les paragraphes de texte sont inclus entre balises <p>...</p>. Différentes balises peuvent être utilisées pour mettre en valeur des passages de texte :

Retour à la ligne

Par défaut les retours à la ligne ne sont pas pris en compte pour le rendu du texte : il faut utiliser la balise <br /> (en XHTML) pour indiquer un retour à la ligne.

Le texte entre balises <pre> ... </pre> est rendu avec les retours à la ligne et utilise par défaut une police à espacement fixe.

Caractères spéciaux

Certains caractères ont un rôle spécial :

Pour utiliser un caractères spécial dans le texte, on le déspécialise en utilisant leur entité HTML :

☠ La génération de code HTML depuis une entrée externe impose la déspécialisation de ces caractères ; dans le cas contraire un attaquant contrôlant l'entrée peut injecter du code JavaScript arbitraire dans la page qui peut avoir des conséquences fâcheuses (vol de cookies de session par exemple)

Listes

Voici un exemple :

<p>Liste de courses</p>
<ol>
	<li>Fruits
		<ul>
			<li>Bananes</li>
			<li>Pommes</li>
			<li>Cerises</li>
		</ul>
	</li>
	<li>Légumes
		<ul>
			<li>Tomates</li>
			<li>Oignons</li>
		</ul>
	</li>
</ol>

☞ Il est possible de modifier le style de numérotation (pour ol) ou de tirets (pour ul) en utilisant le style CSS list-style-type

Tableaux

Les tableaux permettent d'organiser du contenu sur plusieurs lignes et colonnes avec <table> ... </table> :

Réalisons comme un exemple un tableau récapitulant les différentes versions de HTML ainsi que leur année d'apparition :

<table>
	<caption>Tableau des différentes versions de HTML</caption>
	<colgroup>
		<col style="background-color: gray" />
		<col style="" span="2" />
	</colgroup>
	<thead>
		<tr>
			<th>Année</th>
			<th>Version</th>
			<th>Commentaires</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1993</td>
			<td>1.0</td>
			<td>La première version issue des propositions de Tim Berners-Lee</td>
		</tr>
		<tr>
			<td>1995</td>
			<td>2.0</td>
			<td>Définie dans la RFC 1866</td>
		</tr>
		<tr>
			<td>1997</td>
			<td>3.2</td>
			<td>Standardisation des tables</td>
		</tr>
		<tr>
			<td>1997</td>
			<td>4.0</td>
			<td>Introduction des frames, de l'utilisation des scripts</td>
		</tr>
		<tr>
			<td>2008</td>
			<td>5.0</td>
			<td>Nouvelles balises pour la structuration des pages, balises multimédia audio et video</td>
		</tr>
	</tbody>
</table>

Liens hypertextes

Un lien hypertexte renvoie vers une autre ressource. Il est définissable avec la balise <a href="chemin/vers/ressource">Texte du lien</a>. Le chemin vers la ressource peut être exprimé de diverses façons :

Il est possible d'ajouter une ancre à l'URL : page.html#anchor. Le navigateur se rendra sur la page et défilera jusqu'à l'élément de la page dont l'identifiant est anchor (par exemple <p id="anchor">blabla</p>). L'ancre n'est pas transmise au serveur et peut aussi être utilisée pour paramétrer le code JavaScript.

Différents attributs peuvent être ajoutés dans un lien hypertexte :

Formulaires

Un formulaire permet de recueillir des informations de l'utilisateur. Un formulaire est compris dans des balises <form> ... </form>. La balise ouvrante form peut accueillir des attributs indiquant comment le contenu du formulaire peut être envoyé vers le serveur :

☞ Il est aussi possible d'envoyer les données programmatiquement par du code JavaScript. Un formulaire peut aussi servir à modifier la page localement sans réaliser de requête d'envoi.

Un formulaire peut contenir divers éléments que nous décrivons ci-après.

Entrée de texte

La balise <input name="fieldname" type="text"> permet d'afficher une zone de texte. On peut l'associer avec un label :

<label for="comment">Enter a comment</label>
<input type="text" id="comment" name="comment" value="default prefilled value" />

Il existe différentes valeurs de type pour input en fonction des données attendues (certains types ne sont pas supportés par tous les navigateurs) :

Pour entrer du texte sur plusieurs lignes, l'élément textarea est plus adapté :

<textarea name="comment" rows="3" cols="50">
Default text
</textarea>

On peut récupérer le contenu d'un champ programmatiquement en JavaScript avec sa propriété value (de type string) :

window.alert("You entered " + document.querySelector("input[name='comment']").value);

Autres variantes de la propriété value (autre type que string) :

Sélection parmi un ensemble de valeur

Nous pouvons afficher des boutons radio pour permettre la sélection d'une valeur parmi un ensemble (une seule valeur peut être cochée parmi boutons du même nom) :

<label><input type="radio" name="power" value="electricity">Electricité</label><br />
<label><input type="radio" name="power" value="oil">Essence</label><br />
<label><input type="radio" name="power" value="gasoil">Diesel</label><br />
<label><input type="radio" name="power" value="hydrogen">Hydrogène</label><br />

Alternativement, nous pouvons afficher une liste déroulante avec l'élément select :

 <select name="power">
  <option value="electricity">Electricité</option>
  <option value="oil">Essence</option>
  <option value="gasoil">Diesel</option>
  <option value="hydrogen">Hydrogène</option>
</select>

select peut utiliser les attributs suivants de configuration :

Autres éléments de formulaires

Voici d'autres éléments qui peuvent être utilisés dans des formulaires :

Eléments multimédias

Une page HTML peut incorporer des images, sons et vidéos. On utilise à cet effet les balises <img>, <audio> et <video> qui peuvent accueillir les attributs suivants :

Il existe une API JavaScript afin de contrôler programmatiquement la lecture de sons/vidéos.