Академический Документы
Профессиональный Документы
Культура Документы
[[ projets:ecole:web:initiation_xhtml ]]
Présentation
Définitions
Balises
Attributs
Différence entre HTML et XHTML
En HTML
En XHTML
Syntaxe et grammaire
Structure d'une page
Choix de l'encodage
Déclaration XML
DTD
Éléments de base d'une page
Modèle de page
Les balises
Types de balises
Principales balises
Initiation au XHTML
Cette page résulte de la session de cours qui s'est déroulé le 14.12.06 sur le chan #ubuntu-fr-classroom
du réseau Freenode.
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 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 à balises. On va donc voir les éléments composant ce langage :
On distingue :
Certaines balises n'ont qu'un seul élément. On pourrait les qualifier de balises simples ou auto-fermantes
(Note: ces termes sont personnels).
Elle ressemble alors a une balise ouvrante fermée à la fin. exemple : <br />
Tous les éléments doivent être explicitement balisés (et donc html, head, body,...)
Toutes les balises doivent être fermées.
Les éléments vides aussi : <img src="image.png" alt="image.png" />
Les noms de balises et d'attributs doivent être en minuscules.
Tous les attributs doivent avoir une valeur explicite.
Les valeurs d'attributs doivent être entre guillemets.
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.
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é
non indenté
On remarquera que le premier exemple est beaucoup plus lisible, puisqu'on voit visuellement
"l'arborescence" du document.
Sous Ubuntu, l'encodage utilisé par le système (par défaut) est UTF-8.
Sous Windows, c'est un "pseudo" ISO-8859-1 qui est utilisé.
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, ...)
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 de toutes les langues.
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 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).
Strict
Transitional
Frameset
La DTD Frameset est prévue pour faire un site utilisant les Frames, ce qui est vivement déconseillé pour
des raisons d'accessibilité.
La DTD Transitional est une version un peu plus souple que la Strict, vous autorisant à mettre quelques
informations de mise en page dans le XHTML, ce qui rendra un changement de design plus compliqué.
La DTD Strict, elle, 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.
Racine
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 :
body
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
Il existe deux types de balises. Le type aura un impact sur le comportement, le positionnement et
l'affichage de l'élément.
block
Les éléments de types "block" sont des éléments en rapport avec la structure générale du document et
qui marquent 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 inline.
inline
Les éléments "inline" ("en ligne" 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 inline sont placés "dans le flux", c'est à dire à la suite du texte sans en
perturber la disposition. Ils ont aussi des marges internes et externes nulles.
Balises Block
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 block puisqu'elle ne peut pas contenir un autre élément block.
Paragraphe
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.
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>.
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.
Listes imbriquées
Balises inline
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.
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.
... <ul id="menu> ... </ul> ... <p><a href="#menu">retour au menu</a></p> ...
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.
<p><em>Ce texte</em> est plus important que le reste, mais <strong>celui ci</strong>
l'est encore plus !</p>
Citation
La balise <q> </q> sert à insérer une citation. Firefox par exemple, insèrera des guillemets typographiques
autour de ce texte.
<p> <q>Le voyage est court. Essayons de le faire en première classe.</q> (de
<em>Philippe Noiret</em>) </p>
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.
http://doc.ubuntu-fr.org/projets/ecole/web/initiation_xhtml Page 8 sur 11
projets:ecole:web:initiation_xhtml - Documentation Ubuntu Francophone 08-04-08 15:27
<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
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.
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.
http://doc.ubuntu-fr.org/projets/ecole/web/initiation_xhtml Page 9 sur 11
projets:ecole:web:initiation_xhtml - Documentation Ubuntu Francophone 08-04-08 15:27
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
<p>De quel moyen de transport avez-vous peur ?</p> <input type="checkbox" name="choix"
value="voiture" /> La voiture <input type="checkbox" name="choix" value="bus" /> Le bus
<input type="checkbox" name="choix" value="avion" /> L'avion <input type="checkbox"
name="choix" value="train" /> Le train
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.