INF344 – Données du Web Le langage HTML
Antoine Amarilli 2 mai 2018
Présentation générale
• HyperText Markup Language
• Décrit une page Web (il n’y a pas que ça sur le Web...)
• Normalisé par leW3C(industriels et académiques) etWHATWG
• Format ouvertdocumenté: HTML5 specification (548 pages, 2014)
• Langage àbalises, structure et contenu du document
• Pas (ou peu) deprésentation(CSS)
• Pas decomportements dynamiques(JavaScript)
Versions
• Tentative complexe de langage général :SGML
• HTMLinspiré de SGML, versions 1 à 4
• Tentative plus simple de langage général :XML
• XHTML: HTML conforme à XML (1.0 et 1.1)
• HTML 5: pas du XML, mais... XHTML 5
• Autres formatsdérivés de XML
→ Contrairement à HTTP : plusieurs versions dans la nature, etpeu de respect pour les standards!
Table des matières
Généralités
Structure
Texte, listes et tableaux Multimédia
Formulaires
Principes du balisage
• Baliseouvrante(<em>) etfermante(</em>) : Exemple <em>illustratif</em>
• La nature et répétition desespacesest ignorée : Peu
importe !
• Balisessans fermeture:<br>pour un retour à la ligne.
(Ou<br/>par compatibilité avec XML.)
• Attributs:
<p>Un <a href="https://example.com/">lien</a>.</p>
• Commentaires:
<!-- non affiché -->
• Entités HTML: caractères rares et échappement
<p><p>C'est méta !</p></p>
Imbrication
• Il faut ouvrir et fermer les balises dans lebon ordre:
<a><b></b></a>et non<a><b></a></b>
• Règles: interdit de mettre n’importe quelle balise n’importe où (En théorie du moins...)
• Interprétationarborescente
<table>
<tr>
<th>A1</th>
<th>B1</th>
</tr>
<tr>
<td>A2</td>
table tr
td td tr
th th
Structure générale
• LeDOCTYPEprécise laversionde HTML utilisée
→ Cet exemple est en HTML5
• L’attributlang(optionnel) précise lalangue
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- en-tête -->
</head>
<body>
<!-- corps -->
</body>
</html>
(Démo : afficher le source dehttps://www.lemonde.fr/.)
Structure générale
• LeDOCTYPEprécise laversionde HTML utilisée
→ Cet exemple est en HTML5
• L’attributlang(optionnel) précise lalangue
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- en-tête -->
</head>
<body>
<!-- corps -->
</body>
</html>
En-tête
• L’en-tête contient lesméta-données:
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<meta name="description" content="blah">
<!-- ... -->
</head>
• Indiquer l’encodage
• Indiquer letitre
• Autres indications pour les moteurs de recherche, le cache...
• <script>: voir plus tard
Soupe de balises
• Les gens écrivent souvent du HTMLn’importe comment
• Compatibilité avectous les sitesdepuis les débuts du Web
→ Les navigateurs sonttrèstolérants
→ Émulationnon-standardiséedes défauts d’interprétations de certains anciens navigateurs ! (quirks mode)
(Démo : soupe de tags) (Démo : validateur W3C)
Soupe de balises
• Les gens écrivent souvent du HTMLn’importe comment
• Compatibilité avectous les sitesdepuis les débuts du Web
→ Les navigateurs sonttrèstolérants
→ Émulationnon-standardiséedes défauts d’interprétations de certains anciens navigateurs ! (quirks mode)
(Démo : soupe de tags)
(Démo : validateur W3C)
Soupe de balises
• Les gens écrivent souvent du HTMLn’importe comment
• Compatibilité avectous les sitesdepuis les débuts du Web
→ Les navigateurs sonttrèstolérants
→ Émulationnon-standardiséedes défauts d’interprétations de certains anciens navigateurs ! (quirks mode)
(Démo : soupe de tags) (Démo : validateur W3C)
Table des matières
Généralités Structure
Texte, listes et tableaux Multimédia
Formulaires
Texte
• Texte à mettre dans desparagraphes:
→ Paragraphes délimités avec<p> ... </p>
→ Pas de texte directement dans<body>!
• Retour à la ligneavec<br>
• Mettreen valeurdans un paragraphe :
→ <em> ... </em>
→ <strong> ... </strong>
→ <mark> ... </mark>
Titres et structure
• Titres: de<h1>à<h6>(importance décroissante)
• Autres façons (purement sémantiques) destructurerla page : En-tête avec<header>
Pied-de-page avec<footer>
Élément de navigation avec<nav>
Article avec<article>
Listes
• A
• B
• C
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
1. A 2. B 3. C
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
X A Y B Z C
<dl>
<dt>X</dt> <dd>A</dd>
<dt>Y</dt> <dd>B</dd>
<dt>Z</dt> <dd>C</dd>
</dl>
Tableaux
<table>
<tr>
<th>X1</th>
<th>X2</th>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
X1 X2 A1 A2 B1 B2
Tableaux complexes
<caption> Donner unelégendeau tableau
<thead> Délimiter l’en-têtedu tableau (en-têtes de colonnes)
<tfoot> Délimiter lepied de pagedu tableau (somme...)
<tbody> Délimiter lecorpsdu tableau
<col> Délimiter lescolonnes:
<table>
<colgroup>
<col id="cle">
<col span="2" id="valeurs">
<tr>
<td>K1</td>
<td>Va1</td>
<td>Vb1</td>
Liens
Lienshypertexte, d’oùHTTP,HTML!
<a href="https://www.telecom-paristech.fr/">Telecom</a>
Peut contenir un URLabsolu(comme avant), mais aussirelatif Considérons la pagehttps://example.com/foo/bar.html
Lien Résolution
/quux https://example.com/quux
.. https://example.com/
bar2.html https://example.com/foo/bar2.html
baz/toto.html https://example.com/foo/baz/toto.html
#top https://example.com/foo/bar.html#top
L’effet dufragment#topest de fairedéfilerjusqu’à l’élément portant
iFrames
• Afficher une autre page dans la page courante :
<iframe src="https://en.wikipedia.org/">
<p>Pas de support iFrame !</p>
</iframe>
• Parfois pratique, maisdéconseillé:
→ Peut êtreperturbantpour l’utilisateur
→ Pas toujours trèsflexible
→ Complexe pour lasécurité
→ Préférer des solutionscôté serveur(ou avec JavaScript)
Table des matières
Généralités Structure
Texte, listes et tableaux Multimédia
Formulaires
Images
• Depuis lapremière spécificationde HTML (1993) :
<img src="logo_telecom.png" alt="Logo Telecom">
• srcprécise l’URLoù chercher l’image (absolu ou relatif)
• altindique un texteobligatoirepour remplacer l’image :
→ image non trouvée
→ malvoyants
→ navigateurs texte
→ robots
Note : l’image peut se trouver sur untout autre serveur!
→ Requêtesmultiples et risques
Formats d’image
BMP Aucune compression, historique,à éviter JPEG Compression appropiée auxphotos WebP Alternative plusrécente(2010) par Google
PNG Compressionsans perteadaptée aux dessins GIF PNG en moins bien, mais supporte lesanimations APNG PNG avec animation, alternative à GIF ;rare
SVG Imagesvectorielles: rendu calculé à partir de formes géométriques, zoomables sans pixelisation
Audio et vidéo
• Nouveau enHTML5:
<audio src="audio.ogg">
<p>Pas de support audio :
<a href="audio.ogg">fichier audio.ogg</a>.</p>
</audio>
controls Afficher descontrôlesde lecture (pas par défaut !) autoplay Lectureautomatique(à éviter...)
loop Lecture enboucle
preload Choisir lepréchargementdu fichier
<source> Plusieursformatsalternatifs
Formats audio
Compliqué ! Codecs versus conteneurs WAV Sans compression,à éviter
MID Rendulogicield’une partition : ne pas confondre MP3 Formathistorique. Brevets, mauvaise qualité FLAC Compression audiosans perte
Speex Compression audio optimisée pour lavoix Ogg Vorbis Alternativelibreà MP3
Opus Alternativerécente, IETF
Formats vidéo
H.264 Format le plus répandu, mais problèmes debrevets Ogg Theora Alternative libre, maispeu utilisée
WebM Format proposé parGoogle, libre. VP8 et VP9
• Le standard HTML5 ne privilégie plusTheora
• IE et Safari supportentuniquement H.264
• Firefox, Chrome, Android supportenttout
• Controversé! Le standard doit-il préférer les formatsrépandus ou les formatssans brevets?
Table des matières
Généralités Structure
Texte, listes et tableaux Multimédia
Formulaires
Bases
• Structure générale d’un formulaire :
<form action="action.php" method="get">
<!-- contenu du formulaire ici -->
<input type="submit">
</form>
<input> Bouton pourvaliderle formulaire (ici) action URL vers lequelsoumettre
method Quelleméthodeutiliser pour la soumission enctype Commentencoderles données du formulaire
→ Le navigateur effectuera la requête demandée en fournissant les
Retour à HTTP
• GET: les paramètres sont transmis dans lechemin:
GET action.php?lastname=Dupond&firstname=Jean HTTP/1.1 Host: example.com
• POSTetapplication/x-www-form-urlencoded(par défaut) : c’est pareil, mais les données sont dans lecorps:
POST action.php HTTP/1.1 Host: example.com
Content-Type: application/x-www-form-urlencoded lastname=Dupond&firstname=Jean
Retour à HTTP (suite)
• POSTetmultipart/form-data: moins concis mais plus efficace pour de gros volumes :
POST action.php HTTP/1.1 Host: example.com
Content-Type: multipart/form-data; boundary=--e06 ----e06
Content-Disposition: form-data; name="lastname"
Dupond ----e06
Content-Disposition: form-data; name="firstname"
Champs texte
• Champ de base : lechamp texte:
<form action="action.php" method="get">
<label for="nom">Nom</label>
<input name="lastname" id="nom" type="text"><br>
<label for="prenom">Prénom</label>
<input name="firstname" id="prenom" type="text">
<input type="submit">
</form>
• L’élément<label>expliquele champ et y est lié par sonid
• L’attributnamedéfinit lenomdans la requête HTTP : POST action.php HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Attributs du champ texte
autofocus Champ àsélectionnerau chargement
placeholder Texteexplicatifaffiché quand le champ est vide disabled Champnon modifiable. (Aussireadonly.) autocomplete Tenter d’autocompléter avec valeurspassées
value Contenupar défaut
required Impose que le champ soitrempli type Multiples valeurs :
→ password(étoiles)
→ range(avecminetmax),tel,number,color...
pattern Valider avec uneexpression régulière:
→ pattern="[0-9]{5}"pour un code postal)
Boutons radio
• Sélectionner parmiplusieurs choix:
<input type="radio" name="choix" id="oui" value="oui">
<label for="oui">Oui</label><br>
<input type="radio" name="choix" id="pe" value="pe">
<label for="pe">Peut-être</label><br>
<input type="radio" name="choix" id="non" value="non">
<label for="non">Non</label><br>
• Partagent le mêmenamemais ont desvaluedifférentes
• Non exclusifssinamedifférents
Cases à cocher
• Sélectionner des choixnon exclusifs:
<input type="checkbox" name="lu" id="lu">
<label for="lu">Lu</label><br>
<input type="checkbox" name="approuve" id="approuve">
<label for="approuve">Approuvé</label>
• Autre possibilité :
<input type="checkbox" name="c[]" value="lu" id="lu">
<label for="lu">Lu</label><br>
<input type="checkbox" name="c[]" value="ap" id="ap">
<label for="ap">Approuvé</label>
• Attributchecked: cochépar défaut
Listes déroulantes
• Sélectionner parmi unelistede choix :
<label for="affiliation">Affiliation</label>
<select name="affiliation" id="affiliation">
<option value="ecp">École centrale de Paris</option>
<option value="x">École polytechnique</option>
<option value="ese">ESE</option>
<option value="instn">INSTN</option>
<option value="telecom">Télécom ParisTech</option>
<option value="sud">Université Paris-Sud</option>
</select>
selected Sélectionnépar défaut
size Liste dehauteur fixe(non déroulante) multiple Sélectionnerplusieurs éléments(utiliser[])
Upload de fichiers
• Joindre unfichierau formulaire :
<label for="fichier">Fichier à soumettre</label>
<input type="file" name="fichier" id="fichier">
• Impérativementutiliserpostetmultipart/form-data!
• Spécifier letype de fichierattendu (MIME) avecaccept
• multiplepourplusieurs fichiers
• Pas de garanties !À revalider
• Taille maximaleà imposer côté serveur
Boutons
<input type="submit"> Valide le formulaire
<input type="image" src="submit.png" alt="Submit"> Valide le formulaire (image)
<input type="reset"> Réinitialise le formulaire
<button> Ne fait rien (JavaScript) value="texte" Précise le texte du bouton
Autres
<fieldset> Regrouper des champs par groupes, annotés avec
<legend>
<datalist> Spécifier des autocomplétions possibles type="hidden" Champs cachés :
→ Forcer l’ajoutd’un champ à la requête
→ Pourquoi faire ? Voirplus tard
→ Àrevalidercôté serveur !
<textarea> Champ texte multilignes :
<textarea name="adresse" id="adresse" rows="3" cols="42">
(Valeur par défaut.)
Crédits
• Matériel de cours inspiré de notes par Pierre Senellart
• Merci à Marc Jeanmougin, Antonin Delpeuch et Pierre Senellart pour leur relecture
