Éducation, société et technologie

Les bases du HTML et du XHTML

mercredi 4 juillet 2007 par André Vincent

Cours d’initiation au langage de balisage (X)HTML.

Ce document est une adaptation d’un cours orignalement produit par Cyrille Grosdemange.

Lire aussi en complément :

 Présentation

Le XHTML est un langage de balisage servant à créer des pages Web. Il est la dernière norme proposée par le World Wide Web (w3c).
La version 1.0 que l’on va utiliser ici est en fait une simple reformulation du langage HTML avec une syntaxe XML.
De ce fait, il sert de langage de transition entre le HTML et le XML. Il offre donc la possibilité de créer une page qui sera lue à la fois par un ancien navigateur ne comprenant que le HTML et les nouveaux navigateurs qui interprètent le XML.

 Définitions

Le XHTML est un langage de balisage. On va donc voir les éléments composant ce langage :

 Balises

Les balises servent à marquer le contenu du document afin de le structurer. Une balise est constituée d’un chevron ouvrant et d’un chevron fermant (< >). Les balises ne sont pas affichée dans une page Web, elle sont interprétées et produisent un rendu spécifique selon leur élément.

On distingue :

  • la balise ouvrante : exemple : <p>
  • le contenu : texte ou d’autres éléments,
  • la balise fermante : exemple : </p>

Certains éléments n’ont pas de balises fermantes. On pourrait les qualifier de d’élément simples, vides ou auto-fermantes (Note : ces termes sont personnels).
Exemple :
En HTML : <br>
En XHTML : <br />

 Éléments

Les éléments sont les premières lettres que l’on trouve immédiatement après le chevron ouvrant d’une balise. Ainsi, dans un texte balisé par <p> ... texte ... </p>, p constitue l’élément et sera interprété comme un paragraphe.

 Attributs

Les éléments peuvent prendre des attributs.
Ces attributs auront une valeur associée.
La syntaxe est :
<balise attribut="valeur">

Certains éléments exigent un ou des attributs obligatoires. Ainsi, l’élément img exige obligatoirement l’attribut src ayant comme valeur l’URI (adresse) du fichier de l’image à insérer, ainsi que l’attribut alt qui décrit textuellement l’image. Exemple :
<img src="/img/logo.png" alt="Logo du site" />

 Différence entre HTML et XHTML

La différence entre HTML et XHTML porte principalement sur les règles de syntaxe de ces deux langages.

 En HTML

  • Des éléments comme <html>, head ou <body> sont optionnels.
  • Certaines balises fermantes sont optionnelles, notamment pour p (paragraphe) et li (item de liste).
  • Les noms de balises et de leurs attributs peuvent mélanger majuscules et minuscules.
  • Les guillemets ne sont pas toujours obligatoires autour des valeurs d’attribut.
  • Les éléments vides n’ont pas de balise fermante <img src="image.png" alt="image">.

Vous l’aurez compris : HTML est assez souple sur la syntaxe.
XHTML lui est beaucoup plus strict et donc apporte une rigueur de syntaxe qui est un "plus" en développement Web.

 En XHTML

  • Tous les éléments doivent être explicitement balisés (et donc <html>, <head>, <body>,...)
  • Toutes les éléments doivent être fermées.
  • Les éléments vides aussi : <img src="image.png" alt="image.png" />
  • Les noms de éléments et d’attributs doivent être en minuscules.
  • Tous les attributs doivent avoir une valeur explicite.
  • Les valeurs d’attributs doivent être entre guillemets (simple ou double).

 Syntaxe et grammaire

En plus de ces règles de syntaxe, les balises d’un document XHTML se doivent d’être bien imbriquées, c’est à dire que si on ouvre une balise X puis une balise Y, il faudra d’abord refermer la balise Y avant de refermer la balise X. La règle générale étant : la dernière balise ouverte doit être la première refermée.

Exemple

Afin d’obtenir un code lisible (humainement), on veillera à bien indenter le code (l’indentation consiste à insérer une tabulation (ou des espaces selon ce que l’on préfère) à chaque fois qu’on descend d’un niveau dans l’imbrication des balises, et à l’inverse à supprimer une tabulation (ou espaces) lorsque l’on remonte d’un niveau dans l’imbrication.

Exemple bien indenté

Exemple non indenté

On remarquera que le premier exemple est beaucoup plus lisible, puisqu’on voit visuellement l’arborescence du document.

 Structure d’une page

 Choix de l’encodage

Avant de commencer à rédiger une page en XHTML, il faut se poser la question de l’encodage de caractères utilisé.

Sur le présent site, l’encodage utilisé par le système SPIP (par défaut) est UTF-8.

Vous devez donc choisir si vous aller coder votre page en ISO ou en UTF-8.

L’encodage iso-8859-1 prend en compte les caractères spéciaux des langues d’europe occidentale comme le français (accents, cédilles, ...), mais pas nécessairement tous les signes ou glyphes disponibles dans une police de caractères donnée.
L’encodage iso-8859-15 est le même, avec en plus le support du € et d’autres symboles.
L’encodage utf-8, lui comprend tous les caractères, symboles et glyphes de toutes les langues.

Si votre éditeur HTML le permet, il est fortement recommandé d’utiliser l’encodage utf-8.

Une fois l’encodage choisi, il faut savoir que vous devrez spécifier cet encodage dans vos fichiers et que les fichiers eux mêmes doivent être enregistrés avec cet encodage, et donc il faudra veiller à ce que l’éditeur texte et le système d’exploitation utilisé prenne en charge cet encodage.
De plus, il faudra aussi que le serveur qui délivrera vos pages aux visiteurs supporte l’encodage choisi. La vaste majorité des serveurs courants l’autorise.

 Déclaration XML

La première ligne du document spécifie qu’on va utiliser une syntaxe de type XML avec l’encodage utf-8 (remplacer par l’encodage choisi si différent).

La déclaration XML est optionnelle en XHTML 1.0. Il est même fortement déconseillé de la déclarer afin de garantir une compatibilité optimale avec IE6.

 DOCTYPE ou DTD

Ensuite, il faut déclarer quelle DTD ou DOCTYPE (contraction pour Document Type Declaration) on utilise. Le DOCTYPE va indiquer au navigateur web quelles sont les règles de syntaxe et de grammaire que respecte le document (et donc comment les interpréter).

Pour chaque version de XHTML (comme pour HTML), il existe 3 DOCTYPE :

Strict

Transitional

Frameset

Le DOCTYPE Frameset est prévue pour faire un site utilisant les Frames, ce qui est vivement déconseillé pour des raisons d’accessibilité.

Le DOCTYPE Transitional est une version un peu plus souple que la version Strict, vous autorisant à mettre quelques informations de mise en page dans le XHTML et d’utiliser quelques éléments considérés obsolètes, ce qui rendra un changement de design plus compliqué dans le futur.

Le DOCTYPE Strict, vise à réaliser un site Web en séparant contenu (structure) et sa mise en page. C’est la façon la plus rigoureuse de faire un site web et donc celle qu’on choisira. L’intérêt de la séparation du contenu et de la mise en page est que tout le design sera géré via un seul fichier (une feuille de style CSS), et donc on pourra changer le design d’un site entier en modifiant un seul fichier.

Voir en complément La déclaration du type de document

 Éléments de base d’une page

Racine

La racine d’un document est la balise <html>.
On inclue dans la balise <html> ouvrante des attributs pour spécifier l’espace de nommage utilisé par XHTML et la langue du document :

head

Sous l’élément <html>, se trouve l’élément <head> qui contiendra les meta-données du document, dont le titre de la page et l’encodage des caractères :

L’élément <title> est le seul élément obligatoire à l’intérieur de l’élément <head>. Il toutefois fortement recommandé, si la page est rédigée dans une autre langue que l’anglais, de spécifier la langue dans un élément <meta> approprié.

body

L’élément <body> contient le contenu affiché (corps du document).

 Modèle de page

Voici donc un modèle de page XHTML dans lequel il ne reste plus qu’à insérer le contenu :

 Les balises

 Types de balises

Il existe deux types de balises. Le type aura un impact sur le comportement, le positionnement et l’affichage de l’élément.

bloc

Les éléments de type bloc (’block’ en anglais) sont des éléments en rapport avec la structure générale du document et qui constituent l’arborescence ou le plan de la page comme les titres, paragraphes, blocs de citation, listes, ...

Ils sont placés par défaut les uns en dessous des autres dans le navigateur et forment un bloc. Ils peuvent prendre des dimensions (largeur, hauteur, profondeur) et peuvent être positionnés (avec les CSS) pour sortir du flux du document. Ils peuvent contenir d’autres éléments blocs (eux aussi positionnés et dimensionnés) et/ou des éléments de type en ligne.

inline

Les éléments de type « en ligne » (’inline’ en anglais ou encore « au fil du texte ») sont utilisés pour enrichir localement des portions de texte : liens hypertextes, emphases et renforcement, ou tout autre effet possible sur du texte...

Par défaut les éléments de type en ligne sont placés dans le flux du texte, c’est à dire à la suite du texte sans en perturber la disposition. Ils ont aussi des marges internes et externes nulles.

 Principales balises

Balises de type Bloc

Titres

On peut utiliser six niveaux hiérarchiques de titres.
On utilise la balise <hX> </hX>, où X est un nombre entre 1 et 6, 1 étant le niveau le plus important :

Cette balise déroge à la règle des balises de type bloc puisqu’elle ne peut pas contenir un autre élément de type bloc.

Paragraphe

La balise <p> </p> délimite un paragraphe de texte.
Entre deux paragraphes, le navigateur insère en général un espace (marge extérieure par défaut). L’erreur la plus courante est de vouloir augmenter l’espace entre 2 paragraphes en y insérant des balises de retour à la ligne <br />, ce qui est sémantiquement incorrect. La marge extérieure des paragraphes se modifie via les CSS.

Bloc de citation

La balise <blockquote> </blockquote>, comme son nom l’indique (pour les anglophones), spécifie un bloc de citation. Le texte inséré dans un bloc doit être contenu dans un/des paragraphe(s).

Div (conteneur)

La balise <div> </div> est l’exception sémantique du XHTML, puisqu’elle n’a pas de sens. C’est un conteneur qui sert à regrouper d’autres balises block pour structurer le document. Utile avec l’utilisation de CSS, mais attention à ne pas tomber dans l’excès et à mettre des div partout. Pensez à utiliser les bonnes balises, en fonction de leur sens (sémantique).

Formulaires

Les formulaires permettent au visiteur de communiquer avec votre page, ou vous même. Ils permettent au visiteur d’entrer des données qui seront alors traitées par la suite.

La balise <form> </form> délimite un formulaire. Au minimum, il faut spécifier l’attribut action au formulaire. Par soucis de lisibilité, on spécifiera aussi l’attribut method.

L’attribut action définit la cible où seront envoyées les données du formulaire.
Elle peut être l’adresse d’une page php qui traitera les données, une adresse email de la forme mailto:adresse@email.com ou vide (La page s’enverra elle-même les données).
Note : Si vous utilisez l’envoi à une adresse email sans script de traitement, il faudra spécifier en plus l’attribut enctype="text/plain" dans la balise form.

L’attribut method peut être get ou post.
Si en envoie les données en GET, les données du formulaire sont transmises dans l’url. C’est à dire, si on envoie une donnée nom contenant truc, à la page traitement.php (page spécifiée dans action), on arrivera sur la page ayant pour URL : traitement.php?nom=truc.
Si on envoie les données en POST, on ne voit pas (sauf avec des outils spécifiques) les données envoyées. C’est donc déjà plus approprié pour envoyer un mot de passe par exemple... imaginez une url de la forme page.php ?motDePasse=truc ...

Exemple

Tableaux

La balise <table> </table> permet d’insérer des tableaux dans les pages. On utilise alors à l’intérieur de table, les balises <tr> </tr> pour délimiter les lignes, et à l’intéreur de ces lignes, les balises <td> </td> pour délimiter les cellules ou <th> </th> pour les cellules d’en-têtes. De plus, on peut ajouter une légende au tableau avec la balise <caption> </caption>. En XHTML Strict, l’attribut summary est obligatoire ; sa valeur est une description du tableau.

Résultat

Mon tableau
colonne 1 colonne 2 colonne 3
cellule 1-1 cellule 1-2 cellule 1-3
cellule 2-1 cellule 2-2 cellule 2-3

Listes à puces (ordonnées/non ordonnées)

Il existe deux types de listes à puce : liste ordonnée et non ordonnée.
La liste ordonnée est délimitée par la balise <ol> </ol> (ol pour ordered list) et la liste non ordonnée par la balise <ul> </ul> (ul pour unordered list).
Dans les deux cas, un élément (item) de liste est délimité par la balise <li> </li> (li pour list item).
Un élément de liste peut contenir une autre liste à puce et donc créer ainsi des listes imbriquées.

Liste non ordonnée (Liste à puces)

Liste ordonnée (Liste à numéros)

Listes imbriquées

Balises de type En ligne

Liens hypertextes

La balise <a> </a> permet de transformer du texte en un lien hypertxte.
L’attribut href est utilisé pour spécifier la cible du lien.

Cas des ancres

Lorsque vous affectez un id à une balise (par exemple, <ul id="menu">), vous pouvez emmener le visiteur directement à cette "ancre" par un lien de la forme page.html#ancre ou simplement #ancre si l’ancre est sur la même page.

Emphase simple

Pour mettre en valeur du texte, on utilise la balise <em> </em>. Par défaut la plupart des navigateurs graphiques afficheront ce texte en italique, mais l’apparence du texte mis en emphase peut être modifiée via les CSS (comme pour toutes les balises)...

Emphase forte

Pour insister plus fortement sur du texte, on utilisera <strong> </strong> qui est plus fort que em. Par défaut les navigateurs graphiques représenteront ce texte en gras.

Citation

La balise <q> </q> sert à insérer une citation. Firefox par exemple, insèrera des guillemets typographiques autour de ce texte.

Image

Pour insérer une image dans le document, on utilise la balise <img />. Ces attributs minimaux sont src qui spécifie le chemin de l’image et alt qui donne un texte alternatif, au cas où l’image ne pourrait être affichée (raisons techniques, navigateurs en mode texte, ou synthétiseur vocaux...)

Span

Tout comme la balise div de type block, il existe une balise n’ayant aucun sens dans les balises inline : <span> </span>.
Cette balise peut servir surtout pour appliquer ses propres classes en CSS.

Ici on pourrait donc avoir une classe "surligne" qui ajouterait une couleur de fond au texte en CSS...

Éléments de formulaires

Tous ces éléments se placent à l’intérieur de la balise <form> </form>.

Champ texte

L’attribut type spécifie qu’il s’agit d’un champ texte. L’attribut name est le nom du champ, qui sera utilisé pour récupérer les données entrées (avec du php, javascript etc). L’attribut value est facultatif et sert à spécifier un texte prédéfini dans le champ.

Champ de mot de passe

Le champ pour mot de passe est le même que celui de type texte, mais avec l’attribut type="password" et il affichera des •••• au lieu du texte lorsque l’utilisateur entre les données dedans. Firefox par exemple, reconnait ce champ et vous propose d’enregistrer le mot de passe...

Champ caché

Les champs cachés permettent d’envoyer avec le formulaire des données invisibles pour le visiteur, comme des informations complémentaires inutiles pour le visiteur mais utiles au traitement des données pour vous...

Boutons radio

Ce sont les boutons ronds que l’on peut cocher. Cocher un bouton décoche automatiquement les autres boutons du même "groupe". On spécifie le même "name" pour les boutons du même groupe pour rendre ce comportement possible.
Le texte mis à coté du bouton et la valeur envoyée ne sont pas forcément les même. Le texte affiché est utile pour le visiteur et la valeur vous est utile pour le traitement du formulaire.
L’attribut checked="checked" peut être ajouté pour cocher un bouton par défaut.

Ils servent à donner une réponse unique parmi plusieurs choix (utile pour faire des quizz par exemple...)

Cases à cocher

Elles ressemblent aux boutons radios dans la syntaxe, mais ici, plusieurs cases peuvent être cochées simultanément. Tout comme les boutons radios, on peut ajouter checked="checked" pour cocher une case par défaut.

Liste déroulante

Ceci créera une liste déroulante avec cinq entrées réparties en deux catégories.
L’attribut name de la balise select est le nom qu isera utilisé pour l’envoi de l’entrée sélectionnée. La valeur envoyée sera celle de l’attribut value de la balise option sélectionnée par l’utilisateur.
Note : Les optgroup sont complètement optionnels est servent à séparer les entrées de la liste en plusieurs sous-groupes. Par exemple pour une liste des départements français séparés en régions...

Bouton

Ceci crée un simple bouton avec le texte "appuyez ici" inscrit. Libre à vous, par la suite, d’y associer des fonctions javascript par exemple...

Bouton d’initialisation

Bouton servant à remettre à zéro le formulaire avec ici, le texte "tout effacer" inscrit.

Bouton d’envoi

Lorsque l’on clique sur ce bouton, le contenu du formulaire est envoyé en fonction des paramètres action et method passés à la balise form.


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 7739 / 1820693

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site Normes et standards   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 4