{{tag>programmation internet}} ---- ====== 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. Ce cours a été mené par [[utilisateurs:_Enchained]]. ===== 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 [[http://www.w3.org|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 : ==== Balises ==== Les balises servent à marquer le contenu du document afin de le structurer. On distingue : * la balise //ouvrante// : exemple : ''

'' * la balise //fermante// : exemple : ''

'' 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 : ''
'' ==== Attributs ==== Les balises peuvent prendre des attributs.\\ Ces attributs auront une valeur associée.\\ La syntaxe est : '''' ===== 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 ''image''. Vous l'aurez compris : HTML est assez souple sur la syntaxe.\\ XHTML lui est beacoup 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 balises doivent être fermées. * Les éléments vides aussi : ''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**

texte

BON

texte

MAUVAIS
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é**

un premier paragraphe

autre chose

**non indenté**

un premier paragraphe

autre chose

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é. 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. ==== 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). ==== DTD ==== Ensuite, il faut déclarer quelle DTD on utilise.\\ La DTD 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 DTD : === 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. ==== Éléments de base d'une page ==== === Racine === La racine d'un document est la balise ''html''.\\ On inclue dans la balise '''' ouvrante des attributs pour spécifier l'espace de nommage utilisé par XHTML et la langue du document : === head === Sous l'élément '''', se trouve l'élément '''' qui contiendra les meta-données du document, dont le titre de la page et l'encodage des caractères : titre de la page === body === L'élément '''' 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 : titre de la page ===== 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. === 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. ==== Principales balises ==== === Balises Block === == Titres == On peut utiliser six niveaux hiérarchiques de titres. On utilise la balise '' '', où ''X'' est un nombre entre 1 et 6, 1 étant le niveau le plus important :

Titre le plus important

Titre moins important

Titre encore moins important

Titre encore moins important

Titre encore moins important
Titre le moins important
Cette balise déroge à la règle des balises block puisqu'elle ne peut pas contenir un autre élément block. == Paragraphe == La balise ''

'' 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 ''
'', ce qui est sémantiquement incorrect. La marge extérieure des paragraphes se modifie via les CSS.

un paragraphe de texte...

un autre paragraphe

== Bloc de citation == La balise ''
'', 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).

premier paragraphe de la citation

deuxième paragraphe de la citation

== Div (conteneur) == La balise ''
'' 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 ''
'' 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 ''
'' permet d'insérer des tableaux dans les pages. On utilise alors à l'intérieur de ''table'', les balises '' '' pour délimiter les lignes, et à l'intéreur de ces lignes, les balises '' '' pour délimiter les cellules ou '' '' pour les cellules d'en-têtes. De plus, on peut ajouter une légende au tableau avec la balise '' ''.
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'' pour //ordered list//) et la liste non ordonnée par la balise '''' (''ul'' pour //unordered list//). Dans les deux cas, un élément (item) de liste est délimité par la balise ''
  • '' (''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)**
    1. élément de liste
    2. élément de liste
    3. élément de liste
    **Listes imbriquées**
    1. élément de liste
    2. élément de liste
      • élément de liste
      • élément de liste
      • élément de liste
    3. élément de liste
    === Balises inline === == Liens hypertextes == La balise '' '' permet de transformer du texte en un lien hypertxte. L'attribut ''href'' est utilisé pour spécifier la cible du lien.

    Visitez le wiki Ubuntu-fr pour en savoir plus sur votre distribution préférée !

    **Cas des ancres** Lorsque vous affectez un **id** à une balise (par exemple, ''