Principes généraux
Motivation initiale et premiers principes
La motivation initiale est de pouvoir échanger des documents en utilisant le réseau Internet.
La solution proposée sera le Web avec le protocole HTTP (HyperText Tranfer Protocol) pour formaliser les échanges, les navigateurs pour visualiser les documents et le langage HTML (HyperText Markup Language) pour décrire les documents.
HTML permet uniquement de décrire un document. Il ne s'agit pas d'un langage de programmation. Il est indépendant de la machine et est ouvert.
Techniquement, un fichier HTML est un simple fichier texte que l'on peut ouvrir et modifier avec un éditeur quelconque. Outre le texte du document, le fichier contient des balises qui vont préciser la structure ou l'apparence du document.
Balises et attributs
Une balise peut prendre trois formes.
- La première, la plus simple, un simple nom d'élément encadré par les
signes inférieur et supérieur :
Ce sera le cas pour les éléments qui n'ont pas de contenu, par exemple pour l'élément IMG qui introduit une image.
<nom_élément>
- Dans un deuxième temps, la balise peut porter sur une partie précise
du document, auquel cas, elle doit s'ouvrir et se refermer :
Le signe / annonce la balise fermante. Voir par exemple l'élément P qui fait du texte encapsulé un paragraphe.
<nom_élément>texte concerné</nom_élément>
- Enfin, il peut être nécessaire de préciser la nature du contenu balisé,
cela se fait avec des attributs au sein de la balise ouvrante, selon la syntaxe suivante :
Un attribut étant défini comme ceci :
<nom_élément liste_attributs>texte concerné</nom_élément>
Ainsi, un paragraphe étant défini à l'aide de l'élément P, l'attribut LANG précisera la langue utilisée dans le paragraphe.nom_attribut="valeur"
Caractères spéciaux et réservés
Les entités permettent d'obtenir des caractères qui ne sont pas toujours accessibles depuis une combinaison de touches au clavier, ou des caractères qui sont déjà réservés par le langage HTML.
Une entité est un code encadré par une esperluette (&) et un point-virgule (;). Quelques exemples :
| Entités | Caractères |
|---|---|
| É | É |
| œ | œ |
| À | À |
| © | © |
| û | û |
| ç | ç |
| < | < |
| > | > |
| & | & |
| ... | ... |
Structure d'un document
Le squelette de base que l'on retrouvera dans tout document HTML est le suivant :
<HTML>
<HEAD>
en-tête du document
</HEAD>
<BODY>
corps du document
</BODY>
</HTML>
Dans l'en-tête, on définira obligatoirement un titre à l'aide de l'élément TITLE.
Historiquement, BODY possède des attributs pour la définition des couleurs du document et d'une éventuelle image de fond.
Pour être plus rigoureux, la première ligne d'un document HTML doit mentionner un DOCTYPE, c'est-à-dire le langage HTML que l'on va utiliser dans la suite. Les variations possibles sont :
- respecter ou pas les contraintes d'un langage XML : si oui, il s'agit de XHTML, sinon de HTML 4.01 ;
- se restreindre aux éléments purement sémantiques ou s'autoriser les éléments de mise en forme : dans le premier cas on fait du Strict, sinon du Transitional.
Ainsi quatre dialectes HTML sont possibles, selon les choix faits sur ces deux questions.
Une autre précision important est l'encodage utilisé pour les caractères : il pourrait s'agir de latin1, d'utf8, etc.
Finalement, si l'on fait le choix d'un HTML avec contraintes XML, éléments de mise en forme et codage des caractères en UTF8, le squelette du document devient :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
en-tête du document avec un title
</head>
<body>
corps du document
</body>
</html>
Éléments, balises et attributs
Éléments de base
Ci-dessous une première liste d'éléments HTML.
| B | gras |
|---|---|
| I | italique |
| U | souligné |
| S | barré |
| TT | machine à écrire |
| BIG, SMALL | changement de taille de police |
| FONT | changement de police, taille et couleur |
| H1 ... H6 | titre de niveau 1, niveau 2, etc. |
| EM | texte mis en avant |
| STRONG | texte mis en avant, plus fortement encore |
| CENTER | centrage d'un contenu |
| PRE | du texte déjà mis en page |
| KBD | texte tapé au clavier |
| CODE, VAR, SAMP | contenus en lien avec des algorithmes ou des programmes |
| DFN | mot défini dans le contexte actuel |
| BLOCKQUOTE, Q, CITE | citations |
| DEL, INS | modifications d'un document |
| SUB | un indice |
| SUP | un exposant |
| BR | passage à la ligne |
| P | paragraphe |
| HR | trait horizontal |
| ABBR | abréviation |
| BLINK | texte clignotant |
| MARQUEE | texte défilant |
Nous détaillons maintenant d'autres éléments majeurs de HTML.
Images
L'insertion d'une image dans un document HTML se fait à l'aide de l'élément IMG. Son attribut ALT permet d'ajouter un texte décrivant l'image. Ce texte sera utile aux personnes malvoyantes, ainsi qu'aux programmes d'extraction d'information (comme les moteurs de recherche).
Liens hypertextes
Un seul élément, l'élément A, permet à partir d'un document de pointer sur un autre. C'est cet élément qui tisse les fils du web. Il permet également de créer des liens à l'intérieur d'un même document, de pointer vers un autre document local, de proposer l'envoi d'un mail, etc.
<!-- ancre au sein du même document --> <h1 id="titreprincipal">Cours sur HTML</h1> ... <a href="#titreprincipal">revenir en haut</a> <!-- lien externe --> <a href="http://www.google.fr/">Google</a> <!-- lien vers un document dans le même dossier --> <a href="cv.html">Curriculum Vitæ</a> <!-- utilisation de l'attribut title --> <a href="css.html" title="cours css">page suivante</a> <!-- image cliquable --> <a href="css.html" title="CSS"> <img src="right.png" alt=""> </a>
Listes
Il est possible en HTML de définir différents types de listes :
- des listes non ordonnées (élément UL, l'élément LI permet de définir chaque item) ;
- des listes ordonnées (élément OL, l'élément LI permet de définir chaque item) ;
- des listes de définition (DL, LH, DT et DD).
Il est naturellement possible d'imbriquer plusieurs listes, qu'elles soient de même type ou pas.
Tableaux
Quatre éléments sont essentiels pour définir des tableaux :
- TABLE : pour la définition du tableau ;
- TR : pour définir une ligne ;
- TH : pour une case de titre ;
- TD : pour une case de données, c'est-à-dire une case quelconque.
Signalons également l'élément COL qui permettra de manipulier les colonnes, en CSS ou en JavaScript.
<table> <!-- déclaration des colonnes pour usage ultérieur --> <col id="etudiants" /> <col id="notes" /> <!-- définition du tableau, ligne par ligne --> <tr><th>Étudiants</th><th>Notes</th></tr> <tr><td>Fabien</td><td>12</td></tr> <tr><td>Delphine</td><td>14</td></tr> <tr><td>Antonio</td><td>13</td></tr> </table>
Images réactives
La base est une image quelconque insérée avec l'élément IMG en précisant, à l'aide de l'attribut USEMAP qu'une carte est associée à l'image.
Les éléments MAP et AREA permettent ensuite de définir des régions dans l'image et d'associer des adresses à chacune de ces régions.
En cas de superposition de deux zones, c'est la première définie qui sera activée si l'utilisateur vient à cliquer dans la partie commune aux deux zones.
L'utilisation de telles images réactives est plutôt passée de mode sur le Web, peut-être pour des problèmes d'accessibilité et de référencement. A minima, si l'on souhaite intégrer une image réactive dans un document Web, il conviendra de bien renseigner l'attribut ALT pour l'image elle-même (IMG), mais aussi l'attribut ALT de chaque zone définie (AREA).
Langage HTML5
On décrit ici les nouveautés HTML5 (simplications, nouveaux éléments sémantiques et microdata) qui ne concernent pas les aspects dynamiques. Pour les questions de canvas ou de programmation Javascript, on se reportera au cours de JavaScript et à la page des travaux pratiques JavaScript.
Choix faits dans html5 : simplifications et nouveautés
Concernant la syntaxe xml, html5 laisse le choix : que l'on ferme systématiquement les balises ou non, le document sera considéré comme valide.
De plus, html5 introduit des simplifications du début des fichiers HTML : première ligne de DOCTYPE, déclaration du codage des caractères, lien vers la feuille de style, inclusion de code JavaScript.
Ainsi, le squelette général d'une page HTML5 sera :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script href="truc.js"></script>
en-tête du document avec un title
</head>
<body>
corps du document
</body>
</html>
Concernant les éléments de pure mise en forme, html5 ne les autorise plus et ils doivent donc disparaître des documents. Par exemple :
- fin des éléments center, tt, etc.
- fin des attributs des tableaux et des images comme align et valign, width et height, cellpadding et cellspacing, border,etc.
Nous verrons plus tard que la perte de la mise en forme en html sera avantageusement compensée par le langage CSS. En attendant, il nous faut structurer nos documents en utilisant les éléments html qu'il nous reste, les éléments sémantiques.
| H1 ... H6 | titre de niveau 1, niveau 2, etc. |
|---|---|
| P | paragraphe |
| UL etc. | listes |
| TABLE etc. | les tableaux |
| A | texte clignotant |
| EM | texte mis en avant |
| STRONG | texte mis en avant, plus fortement encore |
| IMG | insérer une image |
| PRE | du texte déjà mis en page |
| MAP & AREA | image réactive |
| HR | changement de sujet |
| ABBR | abréviation |
À noter, HR qui était un élément de mise en forme mais qui a changé de sémantique avec html5.
Évoquons également DIV et SPAN. Il s'agit d'éléments HTML dont le seul rôle est de délimiter une zone associée à un style : DIV pour les blocs de texte (à la manière d'un paragraphe), SPAN pour une suite de mots dans un texte. Sans style, ces balises ne produisent rien de particulier. Avant d'avoir recours à ces éléments pauvres sémantiquement, il est aujourd'hui préférable d'envisager l'utilisation des éléments sémantiques proposés par html5.
Nouveaux éléments html5
html5 propose essentiellement de nouveaux éléments sémantiques, destinés à faciliter l'extraction d'information et des traitements automatiques.
- main
- Délimite la portion principale du document.
- article
- Permet de définir un tout cohérent pouvant être extrait du document et resté autonome.
- section
- Identifie un bloc de contenu qui est lié au reste du document et qui par conséquent ne justifie une existence propre.
- nav
- Délimite une partie du document dédiée à un rassemblement de liens internes au site.
- aside
- Décrit un contenu sans rapport direct avec le contenu du document (publicités, archives du site, etc.).
- header et footer
- Spécifie l'en-tête et le pied du bloc concerné, ce bloc pouvant être le document lui-même, un article ou une section.
- figure & figcaption
- Encadre une ou plusieurs images, accompagnées d’une légende.
- details & summary
- Fournit une version longue et une version courte d'un même contenu.
- time
- Permet d'indiquer une date ou une durée.
- mark
- Encadre une portion de texte digne d'intérêt.
- wbr
- Précise où couper un mot, si la coupure n'est pas standard.
- time
- Indique une date ou une heure
- meter & progress
- Définissent des barres de progression.
Et des nouveaux éléments html5 pour le multimédia :
- audio & video
- Permet d'insérer un contenu multimédia (audio ou vidéo).
Les microdata
Il s'agit de définir des entités à travers les informations présentes dans un document html5, en particulier à des fins d'extraction. Différentes entités ont été choisies et pour les décrire des vocabulaires ont été définis. Ils sont rassemblés sur le site Schema.org.
Trois nouveaux attributs sont proposés en html5 pour faire le lien entre le document et les propriétés des différents schémas.
- itemscope
- Indique que l'élément contient la description d'une entité.
- itemtype
- Précise la nature de entité décrite (individu, entreprise, événement, etc.).
- itemprop
- Le nom de la propriété.
itemid et itemref permettent respectivement de nommer une entité et d'y faire référence ailleurs dans le document.
La valeur est en général le texte. Les exceptions : la valeur associée à un élément A est celle de l'attribut HREF, la valeur associée à un élément IMG est celle de l'attribut SRC.
Exemple pour décrire une personne :
<article itemscope="itemscope" itemtype="http://schema.org/Person"> <h1 itemprop="name">Fabien Torre</h1> <img itemprop="image" src="moi.jpg" alt="Fabien Torre" /> ... </article>
Formulaires
Questions et réponses (name, value... et id !)
Dans un formulaire, on trouve des questions et des réponses, elles seront respectivement codées par les attributs HTML name et value. Ce sont les valeurs de ces attributs qui seront transmises lors de l'envoi du formulaire.
Le nom d'une question donné dans un attribut name peut se terminer par des crochets []. Cela signifie que l'utilisateur pourra donner plusieurs réponses à une même question et c'est une liste de valeurs qui sera transmise.
Selon la forme que prend une question, son name peut apparaître une ou plusieurs fois. L'attribut value peut ne pas apparaître du tout, ou il peut être dans un élément qui porte l'élément name, ou ailleurs !
Enfin, les attributs id peuvent aussi être utilisés, pas spécifiquement pour le traitement des questions/réponses du formulaire, mais pour des mises en forme CSS et des manipulations JavaScript. Il faut alors une certaine discipline pour nommer et discerner le NAME et l'ID d'un même élément.
Le formulaire
Un premier élément permet de délimiter le formulaire et de préciser le traitement qui devra être effectué sur les données recueillies : FORM.
Il s'utilise avec ses attributs action et method : le premier indique l'adresse du script auquel il faut transmettre les réponses, le second la méthode de transmission (GET ou POST).
Les inputs
La majorité des entrées (texte et boutons) peut être réalisée avec l'élément INPUT. Son attribut type est à choisir parmi :
- text : saisie d'une ligne de texte,
- radio, checkbox : des boutons à cocher, choix unique ou choix multiples,
- submit / reset : boutons pour valider le formulaire ou le réinitialiser (l'attribut value précise le texte visible sur le bouton),
- range : valeur numérique sur un curseur hortizontal,
- number : saisie d'un nombre,
- hidden : champ caché à l'utilisateur,
- (week, month, date),
- (url),
- (password).
D'autres attributs peut être précisés :
- name pour donner le code de la question,
- value pour fixer la réponse,
- size pour fixer la taille du texte apparent,
- checked pour cocher un bouton à l'avance,
- placeholder pour donner une indication qui disparaîtra à la saisie,
- min, max, step.
Listes déroulantes
Pour une liste déroulante, il s'agira de l'élément SELECT associé à l'élément OPTION pour définir chacun des items de la liste.
- la balise SELECT porte l'attribut NAME,
- les balises OPTION portent les VALUEs.
On peut sélectionner une option particulière à l'avance avec l'attribut SELECTED.
Texte sur plus d'une ligne
Si l'on a besoin d'une saisie de texte s'étendant sur plusieurs lignes, on utilisera l'élément TEXTAREA avec attributs NAME, COLS et ROWS (les deux derniers permettant de préciser la taille apparente de la fenêtre de saisie).
Structurations
L'élément LABEL permet d'encadrer l'intitulé d'une question ou d'une réponse. L'attribut FOR permet de préciser l'ID de la question/réponse associée au label.
Les éléments FIELDSET et LEGEND permettent d'encadrer une question et ses options de réponses.
Enfin, l'élément OPTGROUP permet grouper des options dans une liste déroulante. L'attribut LABEL permet de donner un titre à un tel groupe.
Conclusion
HTML est le langage de publication sur le Web par excellence. Au cours de son évolution, on note l'abandon des éléments de pure mise en forme. Ainsi, il est recommandé de ne plus utiliser, en particulier en html5, les éléments comme FONT, CENTER, etc.
De manière générale, les balises HTML ne doivent plus être utilisées pour préciser son apparence, mais pour structurer le document et pour apporter des informations sémantiques sur le contenu.
La mise en forme du document reste importante mais elle est déléguée à un langage dédié à cela : les feuilles de style CSS.
