Éducation, société et technologie

HTML, XML et XHTML

André Vincent — 2011-01-12T05:00:00Z

Bien que le terme ait été récemment remis à l'ordre du jour, le concept de web sémantique est présent depuis les origines du web. L'objectif premier du balisage hypertextuel depuis le SGML, au HTML, puis au XHTML en passant par le XML a toujours été de structurer le contenu d'un document afin d'en marquer, d'en souligner ou d'en révéler le sens : un titre, un intertitre, un paragraphe, une citation ou un encart, une emphase mise sur un passage, une liste, un tableau de données, etc...

Le HTML n'a jamais été conçu comme un système de balisage de présentation graphiquement ou même typographiquement riche. Face à cette insuffisance, les designers web se sont mis à développer toutes sortes de techniques pour reproduire la richesse graphique qu'ils connaissaient en production imprimée. Ils ont donc détourné le langage HTML de sa mission première [i.e. la structuration du contenu], à des fins de présentation graphique, notamment en faisant intervenir massivement des images ou des animations Flash en lieu et place de contenu textuel et en détournant certaines balises, comme les tableaux à des fins de mise en page, encouragés en cela par la vive concurrence que se livraient les éditeurs commerciaux de logiciels de mise en page web et de navigateurs web.

Avec l'apparition des feuilles de style en cascade (CSS) qui introduisent une richesse de présentation typographique et graphique tant réclamée, nous avons assisté au cours des dernières années à un retour aux origines du web. Le balisage (X)HTML ou XML pour structurer le contenu, le CSS pour le présenter graphiquement.

Le language de balisage XHTML est donc devenu la norme de facto utilisé par la plupart des sites Web de qualité, tant commerciaux, gouvernementaux, éducatifs qu'à caractère associatif ou personnel.

Toutefois, à cause de ceraines restrictions et des exigences de rigueur de sa syntaxe, peu de sites Web, encore aujourd'hui, se conforment strictement aux spécifications XHTML.

C'est une des raisons du développement actuel des spécifications de la prochaine génération du langage de balisage pour le Web : HTML5. HTML5 se veut une évolution à la fois du HTML et du XHTML. HTML5 se veut un retour à la simplicité et la souplesse du HTML tout en conservant certains aspects de la rigueur du XHTML ainsi qu'en introduisant de nouvelles fonctionnalités permettant notamment d'inclure et de paramétrer des contenus multimedia riches sans recours à des technologies externes et propriétaires. À suivre.

Voir en complément :

Suite : Du HTML au XHTML

Du HTML au XHTML

André Vincent — 2009-01-11T05:00:00Z

Le HTML serait-il mort pour faire place au XHTML ? Pas vraiment. Mais le W3C sonne la fin de la récréation. Est-il donc temps de revenir à un peu plus de rigueur ?

Sommaire

Du HTML au XHTML au html

Après les versions HTML 1, Html 2.0, HTML 3.2 et enfin HTML 4.01, le World Wide Web Consortium avait décidé d'en stopper les évolutions au profit du XHTML. Mais voilà qu'à l'aube de 2010 sont soumises à consultation de nouvelles spécifications pour HTML 5 et XHTML 5. Nous y reveindrons...

XHTML 1.0 adopte une approche conservatrice, en retenant un fort héritage du HTML. C'est à partir de XHTML 1.1 qu'apparaît un standard qui marque une nette coupure avec les réels débuts du Web : le HTML.

Le changement le plus significatif du XHTML 1.1 est la nette séparation de la structuration sémantique des données, d'une part, et leur présentation d'autre part. Le formatage de présentation n'est plus inclus dans le balisage des données et ne peut s'effectuer qu'en référence à une ou des feuilles de styles [Cascading Style Sheets - CSS]. Ce qui laisse les données disponibles pour toute espèce de réutilisation, traitement, interprétation ou rendu par une gamme de plus en plus large de nouveaux appareils, produits ou applications favorisant, notamment l'accessibilité aux handicapés.

Le XHTML est considéré compatible par le bas dans le domaine où ça compte le plus - au niveau de l'information. Les anciens logiciels de navigation qui ne supportent pas les feuilles de styles, et en conséquence, la présentation graphique des pages Web, n'afficheront pas les informations comme prévues, mais les informations demeurent parfaitement accessibles et lisibles.

Le XML et le XHTML

Le W3C a ainsi donné le jour à un autre langage sur le Web, plus restrictif, c'est-à-dire, le XML [pour EXtensible Markup Language]. Le XML est un métalangage, soit un ensemble de règles et de prescription pour permettre d'inventer de nouveaux langages (de là Extensible) avec ses propres balises. Cela signifie que XML n'est pas un langage fermé comme peut l'être le HTML mais au contraire un langage ouvert. C'est à dire que l'auteur d'un document XML peut créer ses propres balises, comme son ancêtre le SGML. Voir un exemple de document XML de type RSS, ne comportant aucune balise HTML : rss.xml. (Consulter le code source du document). Pour résumer grossièrement, le XHTML, c'est du HTML formé selon les règles plus rigoureuses du XML (well formed). Le XML n'est pas nécessairement destiné à être lu directement par des humains (bien que ce soit possible en y accolant un fichier de description des balises utilisées et une feuille de style) ; le XML est surtout présentement utilisé comme format de fichier intermédiaire d'échange de données.

Le XHTML est donc un descendant du XML qui lui-même descend du SGML.

Première exigence du XHTML : un DTD

Deuxième exigence : du XML bien formé

L'héritage du XML

Troisième exigence : aucune balise ou attribut propriétaire
Les balises et attributs propriétaires inventés, en particulier par Netscape et Microsoft, pour "enrichir" le HTML, mais qui n'ont jamais fait partie des spécifications d'AUCUNE version de HTML, doivent être abandonnées, de même que certaines balises dépréciées qui faisaient pourtant partie des spécifications de versions antérieures du HTML.

Validation

Pour nous aider à repérer les erreurs dans la structuration du code, le W3C met à notre disposition ou vérificateur de syntaxe. Cet outil n'est qu'une aide ; il ne doit pas être pris au pied de la lettre. Une page peut ne pas valider et être tout à fait bien formée ou sémantiquement correcte. De plus, il existe une foule de raisons tout à fait justifiées pour laquelle on souhaiterait s'écarter de la « conformité ». La validation d'un document HTML ou XHTML n'est pas une exigence de conformité aux standards, ce n'est qu'un indicateur à la disposition de ceux qui veulent aborder le XHTML (ou le HTML bien formé).

En anglais

Sur le site http://validator.w3.org/, vous pouvez indiquer l'adresse d'une page à vérifier ou télécharger un document pour en demander la validation.
Vous pouvez aussi glisser le favelet (mini application en javascipt) suivant dans la barre ou le menu des favoris ou des signets de votre logiciel de navigation :
Favelet -> Validation HTML/XHTML
Dans ce dernier cas, il n'y a plus qu'à cliquer sur le favori pour faire valider la page affichée dans la fenêtre de navigation.

En français

Validome - en lien avec l'excellente documentation de SELFHTML

Exemple de la structure de base d'un document XHTML

Le document XHTML

Lire aussi en complément :

Le XHTML

Pour une approche critique du XHTML, lire :

La documentation officielle sur le HTML et le XHTML

www.w3.org/MarkUp/

Enfin, un correcteur/convertisseur XHTML

Les bases du HTML et du XHTML

André Vincent — 2007-07-04T05:35:35Z

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

Sommaire

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

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 :
le contenu : texte ou d'autres éléments,
la balise fermante : exemple :

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 :
En XHTML :

É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

... texte ...

, 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 :

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 :

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 , head ou 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 .

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 , , ,...)
Toutes les éléments doivent être fermées.
Les éléments vides aussi :
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

<b><i>texte</i></b> BON
<b><i>texte</b></i> MAUVAIS

Télécharger

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é

<div>
<p>un premier paragraphe</p>
<div>
<p>autre chose</p>
</div>
</div>

Télécharger

Exemple non indenté

<div>
<p>un premier paragraphe</p>
<div>
<p>autre chose</p>
</div>
</div>

Télécharger

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).

version="1.0" encoding="utf-8"?>

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

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

Télécharger

Transitional

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">

Télécharger

Frameset

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">

Télécharger

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 .
On inclue dans la balise ouvrante des attributs pour spécifier l'espace de nommage utilisé par XHTML et la langue du document :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

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 :

<head>
<title>titre de la page</title>
<meta http-equiv="Content-Type" content="text/xhtml+xml; charset=utf-8" />
</head>

Télécharger

L'élément </code> est le seul élément obligatoire à l'intérieur de l'élément <code class='spip_code' dir='ltr'><head></code>. 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 <code class='spip_code' dir='ltr'><meta></code> approprié.</p> <p><strong>body</strong></p> <p>L'élément <code class='spip_code' dir='ltr'><body></code> contient le contenu affiché (corps du document).</p> <h3 class="spip" id="outil_sommaire_14"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=25#outil_sommaire" class="sommaire_ancre"> </a>Modèle de page</h3> <p>Voici donc un modèle de page XHTML dans lequel il ne reste plus qu'à insérer le contenu :</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #00bbdd;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">html</span></a> xmlns<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://www.w3.org/1999/xhtml"</span> xml:<span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fr"</span> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fr"</span>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">head</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">title</span></a>></span>titre de la page<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">title</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">meta</span></a> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"Content-Type"</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/xhtml+xml; charset=utf-8"</span> <span style="color: #66cc66;">/</span>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;">head</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">body</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> </div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;">body</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;">html</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/f01a8f2e049987ef3f23027aaacfab22.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div><h3 class="spip" id="outil_sommaire_15"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=25#outil_sommaire" class="sommaire_ancre"> </a>Les balises</h3><h4 id="outil_sommaire_16"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=25#outil_sommaire" class="sommaire_ancre"> </a>Types de balises</h4> <p>Il existe deux types de balises. Le type aura un impact sur le comportement, le positionnement et l'affichage de l'élément.</p> <p><strong>bloc</strong></p> <p>Les éléments de type <strong>bloc</strong> ('<i>block</i>' en anglais) sont des éléments en rapport avec la <strong>structure générale</strong> du document et qui constituent l'<strong>arborescence</strong> ou le <strong>plan</strong> de la page comme les titres, paragraphes, blocs de citation, listes, ...</p> <p>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 <strong>en ligne</strong>.</p> <p><strong>inline</strong></p> <p>Les éléments de type « <strong>en ligne</strong> » ('<i>inline</i>' en anglais ou encore <i>« au fil du texte »</i>) sont utilisés pour <strong>enrichir localement</strong> des portions de texte : liens hypertextes, emphases et renforcement, ou tout autre effet possible sur du texte...</p> <p>Par défaut les éléments de type <strong>en ligne</strong> 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.</p> <h4 id="outil_sommaire_17"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=25#outil_sommaire" class="sommaire_ancre"> </a>Principales balises</h4> <p><strong>Balises de type <i>Bloc</i> </strong></p> <p><i>Titres</i></p> <p>On peut utiliser six niveaux hiérarchiques de titres.<br class='autobr' />On utilise la balise <code class='spip_code' dir='ltr'><hX> </hX></code>, où <code class='spip_code' dir='ltr'>X</code> est un nombre entre 1 et 6, 1 étant le niveau le plus important :</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;">h1</span></a>></span>Titre le plus important<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;">h1</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>></span>Titre moins important<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/h3.html"><span style="color: #000000; font-weight: bold;">h3</span></a>></span>Titre encore moins important<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h3.html"><span style="color: #000000; font-weight: bold;">h3</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/h4.html"><span style="color: #000000; font-weight: bold;">h4</span></a>></span>Titre encore moins important<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h4.html"><span style="color: #000000; font-weight: bold;">h4</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/h5.html"><span style="color: #000000; font-weight: bold;">h5</span></a>></span>Titre encore moins important<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h5.html"><span style="color: #000000; font-weight: bold;">h5</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/h6.html"><span style="color: #000000; font-weight: bold;">h6</span></a>></span>Titre le moins important<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h6.html"><span style="color: #000000; font-weight: bold;">h6</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/7d2ff53a4f10fe0e0ef449746d8acd38.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p>Cette balise déroge à la règle des balises de type <strong>bloc</strong> puisqu'elle ne peut pas contenir un autre élément de type <strong>bloc</strong>.</p> <p><i>Paragraphe</i></p> <p>La balise <code class='spip_code' dir='ltr'><p> </p></code> délimite un paragraphe de texte.<br class='manualbr' />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 <code class='spip_code' dir='ltr'><br /></code>, ce qui est sémantiquement incorrect. La marge extérieure des paragraphes se modifie via les CSS.</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>un paragraphe de texte...<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>un autre paragraphe<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/7b06f721120f17cc987a3818535cb07f.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p><i>Bloc de citation</i></p> <p>La balise <code class='spip_code' dir='ltr'><blockquote> </blockquote></code>, 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).</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/blockquote.html"><span style="color: #000000; font-weight: bold;">blockquote</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>premier paragraphe de la citation<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>deuxième paragraphe de la citation<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/blockquote.html"><span style="color: #000000; font-weight: bold;">blockquote</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/0cfecef60330dee8ab9c13ad23b67e53.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p><i>Div (conteneur)</i></p> <p>La balise <code class='spip_code' dir='ltr'><div> </div></code> est l'exception sémantique du XHTML, puisqu'elle n'a <strong>pas de sens</strong>. 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 <code class='spip_code' dir='ltr'>div</code> partout. Pensez à utiliser les bonnes balises, en fonction de leur sens (sémantique).</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>...<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>...<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> ...</div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/d19341949757fda2620eab10aacb39cf.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p><i>Formulaires</i></p> <p>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.</p> <p>La balise <code class='spip_code' dir='ltr'><form> </form></code> délimite un formulaire. Au minimum, il faut spécifier l'attribut <code class='spip_code' dir='ltr'>action</code> au formulaire. Par soucis de lisibilité, on spécifiera aussi l'attribut <code class='spip_code' dir='ltr'>method</code>.</p> <p>L'attribut <code class='spip_code' dir='ltr'>action</code> définit la cible où seront envoyées les données du formulaire.<br class='manualbr' />Elle peut être l'adresse d'une page php qui traitera les données, une adresse email de la forme <code class='spip_code' dir='ltr'>mailto:adresse@email.com</code> ou vide (La page s'enverra elle-même les données).<br class='manualbr' /><i>Note : Si vous utilisez l'envoi à une adresse email sans script de traitement, il faudra spécifier en plus l'attribut <code class='spip_code' dir='ltr'>enctype="text/plain"</code> dans la balise <code class='spip_code' dir='ltr'>form</code></i>.</p> <p>L'attribut <code class='spip_code' dir='ltr'>method</code> peut être <code class='spip_code' dir='ltr'>get</code> ou <code class='spip_code' dir='ltr'>post</code>.<br class='manualbr' />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 <code class='spip_code' dir='ltr'>nom</code> contenant <code class='spip_code' dir='ltr'>truc</code>, à la page <code class='spip_code' dir='ltr'>traitement.php</code> (page spécifiée dans action), on arrivera sur la page ayant pour URL : <code class='spip_code' dir='ltr'>traitement.php?nom=truc</code>.<br class='manualbr' />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 ...</p> <p><strong>Exemple</strong></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">form</span></a> <span style="color: #000066;">action</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"mailto:adresse@email.com"</span> <span style="color: #000066;">method</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"post"</span> <span style="color: #000066;">enctype</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/plain"</span>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style="">...</div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">form</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/dfc8b43b884b91ccf0fea5348f5c27f0.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <textarea readonly='readonly' cols='40' rows='4' class='spip_cadre' dir='ltr'><form action="traitement.php" method="post"> ... </form></textarea> <textarea readonly='readonly' cols='40' rows='4' class='spip_cadre' dir='ltr'><form action="page.php" method="get"> ... </form></textarea> <p><i>Tableaux</i></p> <p>La balise <code class='spip_code' dir='ltr'><table> </table></code> permet d'insérer des tableaux dans les pages. On utilise alors à l'intérieur de <code class='spip_code' dir='ltr'>table</code>, les balises <code class='spip_code' dir='ltr'><tr> </tr></code> pour délimiter les lignes, et à l'intéreur de ces lignes, les balises <code class='spip_code' dir='ltr'><td> </td></code> pour délimiter les cellules ou <code class='spip_code' dir='ltr'><th> </th></code> pour les cellules d'en-têtes. De plus, on peut ajouter une légende au tableau avec la balise <code class='spip_code' dir='ltr'><caption> </caption></code>. En XHTML Strict, l'attribut <code class='spip_code' dir='ltr'>summary</code> est obligatoire ; sa valeur est une description du tableau.</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;">table</span></a> <span style="color: #000066;">summary</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"Indiquez une description du tableau"</span>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/caption.html"><span style="color: #000000; font-weight: bold;">caption</span></a>></span>Mon tableau<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/caption.html"><span style="color: #000000; font-weight: bold;">caption</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span>colonne 1<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span>colonne 2<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span>colonne 3<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>></span>cellule 1-1<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>></span>cellule 1-2<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>></span>cellule 1-3<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">td</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span>cellule 2-1<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span>cellule 2-2<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span>cellule 2-3<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/th.html"><span style="color: #000000; font-weight: bold;">th</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">tr</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;">table</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/7249f18fc503fba85e35aaab47dd9afb.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p><strong>Résultat</strong></p> <div style='background-color: #ddd; padding: 1em;'> <table class='spip' summary="Indiquez une description du tableau"> <caption>Mon tableau</caption> <tr> <th>colonne 1</th> <th>colonne 2</th> <th>colonne 3</th> </tr> <tr> <td>cellule 1-1</td> <td>cellule 1-2</td> <td>cellule 1-3</td> </tr> <tr> <th>cellule 2-1</th> <th>cellule 2-2</th> <th>cellule 2-3</th> </tr> </table> </div> <p><i>Listes à puces (ordonnées/non ordonnées)</i></p> <p>Il existe deux types de listes à puce : liste ordonnée et non ordonnée.<br class='autobr' />La liste ordonnée est délimitée par la balise <code class='spip_code' dir='ltr'><ol> </ol></code> (<code class='spip_code' dir='ltr'>ol</code> pour <i>ordered list</i>) et la liste non ordonnée par la balise <code class='spip_code' dir='ltr'><ul> </ul></code> (<code class='spip_code' dir='ltr'>ul</code> pour <i>unordered list</i>).<br class='autobr' />Dans les deux cas, un élément (item) de liste est délimité par la balise <code class='spip_code' dir='ltr'><li> </li></code> (<code class='spip_code' dir='ltr'>li</code> pour <i>list item</i>).<br class='autobr' />Un élément de liste peut contenir une autre liste à puce et donc créer ainsi des listes imbriquées.</p> <p><strong>Liste non ordonnée (Liste à puces)</strong></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/47bb34e7451939740fb828bafa4a8a7f.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p><strong>Liste ordonnée (Liste à numéros)</strong></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/ol.html"><span style="color: #000000; font-weight: bold;">ol</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ol.html"><span style="color: #000000; font-weight: bold;">ol</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/fec1ced9ba61155a27d34cc3cf63751e.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p><strong>Listes imbriquées</strong></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/ol.html"><span style="color: #000000; font-weight: bold;">ol</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ul.html"><span style="color: #000000; font-weight: bold;">ul</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span>élément de liste<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/li.html"><span style="color: #000000; font-weight: bold;">li</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/ol.html"><span style="color: #000000; font-weight: bold;">ol</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/ddb7a0938a1444425a5ea8bf9bff678d.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p><strong>Balises de type <i>En ligne</i> </strong></p> <p><i>Liens hypertextes</i></p> <p>La balise <code class='spip_code' dir='ltr'><a> </a></code> permet de transformer du texte en un lien hypertxte.<br class='autobr' />L'attribut <code class='spip_code' dir='ltr'>href</code> est utilisé pour spécifier la cible du lien.</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>Visitez le <span style="color: #009900;"><<a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"http://doc.ubuntu-fr.org"</span>></span>wiki Ubuntu-fr<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">a</span></a>></span> pour en savoir plus sur votre distribution préférée !<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> </ol></div></div></div> <p><strong>Cas des ancres</strong></p> <p>Lorsque vous affectez un <strong>id</strong> à une balise (par exemple, <code class='spip_code' dir='ltr'><ul id="menu"></code>), vous pouvez emmener le visiteur directement à cette "ancre" par un lien de la forme <code class='spip_code' dir='ltr'>page.html#ancre</code> ou simplement <code class='spip_code' dir='ltr'>#ancre</code> si l'ancre est sur la même page.</p> <textarea readonly='readonly' cols='40' rows='8' class='spip_cadre' dir='ltr'>... <ul id="menu> ... </ul> ... <p><a href="#menu">retour au menu</a></p> ...</textarea> <p><i>Emphase simple</i></p> <p>Pour <i>mettre en valeur</i> du texte, on utilise la balise <code class='spip_code' dir='ltr'><em> </em></code>. 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)...</p> <textarea readonly='readonly' cols='40' rows='2' class='spip_cadre' dir='ltr'><p><em>Ce texte</em> est plus important que le reste</p></textarea> <p><i>Emphase forte</i></p> <p>Pour insister plus fortement sur du texte, on utilisera <code class='spip_code' dir='ltr'><strong> </strong></code> qui est plus fort que <code class='spip_code' dir='ltr'>em</code>. Par défaut les navigateurs graphiques représenteront ce texte en gras.</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>><<a href="http://december.com/html/4/element/em.html"><span style="color: #000000; font-weight: bold;">em</span></a>></span>Ce texte<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/em.html"><span style="color: #000000; font-weight: bold;">em</span></a>></span> est plus important que le reste, mais <span style="color: #009900;"><<a href="http://december.com/html/4/element/strong.html"><span style="color: #000000; font-weight: bold;">strong</span></a>></span>celui ci<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/strong.html"><span style="color: #000000; font-weight: bold;">strong</span></a>></span> l'est encore plus !<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> </ol></div></div></div> <p><i>Citation</i></p> <p>La balise <code class='spip_code' dir='ltr'><q> </q></code> sert à insérer une citation. Firefox par exemple, insèrera des guillemets typographiques autour de ce texte.</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/q.html"><span style="color: #000000; font-weight: bold;">q</span></a>></span>Le voyage est court. Essayons de le faire en première classe.<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/q.html"><span style="color: #000000; font-weight: bold;">q</span></a>></span> (de <span style="color: #009900;"><<a href="http://december.com/html/4/element/em.html"><span style="color: #000000; font-weight: bold;">em</span></a>></span>Philippe Noiret<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/em.html"><span style="color: #000000; font-weight: bold;">em</span></a>></span>)</div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/6089793227de3746a65a27687c88faf6.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p><i>Image</i></p> <p>Pour insérer une image dans le document, on utilise la balise <code class='spip_code' dir='ltr'></code>. Ces attributs minimaux sont <code class='spip_code' dir='ltr'>src</code> qui spécifie le chemin de l'image et <code class='spip_code' dir='ltr'>alt</code> 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...)</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">img</span></a> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"mon_image.png"</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"texte alternatif"</span> <span style="color: #66cc66;">/</span>></span></div></li> </ol></div></div></div> <p><i>Span</i></p> <p>Tout comme la balise <code class='spip_code' dir='ltr'>div</code> de type <i>block</i>, il existe une balise n'ayant aucun sens dans les balises inline : <code class='spip_code' dir='ltr'><span> </span></code>.<br class='autobr' />Cette balise peut servir surtout pour appliquer ses propres classes en CSS.</p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>Du texte et <span style="color: #009900;"><<a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">span</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"surligne"</span>></span>un texte spécial surligné<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">span</span></a>></span> par exemple...<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> </ol></div></div></div> <p>Ici on pourrait donc avoir une classe "surligne" qui ajouterait une couleur de fond au texte en CSS...</p> <p><strong>Éléments de formulaires</strong></p> <p>Tous ces éléments se placent à l'intérieur de la balise <code class='spip_code' dir='ltr'><form> </form></code>.</p> <p><i>Champ texte</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"le_champ"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"texte par défaut"</span> <span style="color: #66cc66;">/</span>></span></div></li> </ol></div></div></div> <p>L'attribut <code class='spip_code' dir='ltr'>type</code> spécifie qu'il s'agit d'un champ texte. L'attribut <code class='spip_code' dir='ltr'>name</code> est le nom du champ, qui sera utilisé pour récupérer les données entrées (avec du php, javascript etc). L'attribut <code class='spip_code' dir='ltr'>value</code> est facultatif et sert à spécifier un texte prédéfini dans le champ.</p> <p><i>Champ de mot de passe</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"password"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"pass"</span> <span style="color: #66cc66;">/</span>></span></div></li> </ol></div></div></div> <p>Le champ pour mot de passe est le même que celui de type texte, mais avec l'attribut <code class='spip_code' dir='ltr'>type="password"</code> 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...</p> <p><i>Champ caché</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"hidden"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"champ_cache"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"donnée à envoyer"</span> <span style="color: #66cc66;">/</span>></span></div></li> </ol></div></div></div> <p>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...</p> <p><i>Boutons radio</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"radio"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choix"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"1"</span> <span style="color: #000066;">checked</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"checked"</span> <span style="color: #66cc66;">/</span>></span> choix 1</div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"radio"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choix"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"2"</span> <span style="color: #66cc66;">/</span>></span> choix 2</div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"radio"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choix"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"3"</span> <span style="color: #66cc66;">/</span>></span> choix 3</div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/a773b1809802bfaafa1754095bf422f9.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p>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.<br class='manualbr' />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.<br class='manualbr' />L'attribut <code class='spip_code' dir='ltr'>checked="checked"</code> peut être ajouté pour cocher un bouton par défaut.</p> <p>Ils servent à donner une réponse unique parmi plusieurs choix (utile pour faire des quizz par exemple...)</p> <p><i>Cases à cocher</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span>De quel moyen de transport avez-vous peur ?<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">p</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"checkbox"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choix"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"voiture"</span> <span style="color: #66cc66;">/</span>></span> La voiture</div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"checkbox"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choix"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"bus"</span> <span style="color: #66cc66;">/</span>></span> Le bus</div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"checkbox"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choix"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"avion"</span> <span style="color: #66cc66;">/</span>></span> L'avion</div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"checkbox"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choix"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"train"</span> <span style="color: #66cc66;">/</span>></span> Le train</div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/47ec175ec96fdab3ab3a7f584aff930f.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p>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 <code class='spip_code' dir='ltr'>checked="checked"</code> pour cocher une case par défaut.</p> <p><i>Liste déroulante</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/select.html"><span style="color: #000000; font-weight: bold;">select</span></a> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choix"</span>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/optgroup.html"><span style="color: #000000; font-weight: bold;">optgroup</span></a> <span style="color: #000066;">label</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"première catégorie"</span>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"1"</span>></span>choix 1<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"2"</span>></span>choix 2<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/optgroup.html"><span style="color: #000000; font-weight: bold;">optgroup</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/optgroup.html"><span style="color: #000000; font-weight: bold;">optgroup</span></a> <span style="color: #000066;">label</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"deuxième catégorie"</span>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"3"</span>></span>choix 3<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"4"</span>></span>choix 4<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"5"</span>></span>choix 5<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/option.html"><span style="color: #000000; font-weight: bold;">option</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""> <span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/optgroup.html"><span style="color: #000000; font-weight: bold;">optgroup</span></a>></span></div></li> <li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/select.html"><span style="color: #000000; font-weight: bold;">select</span></a>></span></div></li> </ol></div></div><div class='cadre_download' style='text-align: right;'> <a href='http://edu.ca.edu/local/cache-code/6589da92f6b2b556dc1f823febe30564.txt' style='font-family: verdana, arial, sans; font-weight: bold; font-style: normal;'>Télécharger</a></div></div> <p>Ceci créera une liste déroulante avec cinq entrées réparties en deux catégories.<br class='manualbr' />L'attribut <code class='spip_code' dir='ltr'>name</code> de la balise <code class='spip_code' dir='ltr'>select</code> 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 <code class='spip_code' dir='ltr'>value</code> de la balise <code class='spip_code' dir='ltr'>option</code> sélectionnée par l'utilisateur.<br class='manualbr' /><i>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...</i></p> <p><i>Bouton</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"button"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"le_bouton"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"appuyez ici"</span> <span style="color: #66cc66;">/</span>></span></div></li> </ol></div></div></div> <p>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...</p> <p><i>Bouton d'initialisation</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"reset"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"tout effacer"</span> <span style="color: #66cc66;">/</span>></span></div></li> </ol></div></div></div> <p>Bouton servant à remettre à zéro le formulaire avec ici, le texte "tout effacer" inscrit.</p> <p><i>Bouton d'envoi</i></p> <div class="coloration_code"><div class="spip_html4strict cadre spip_cadre"><div class="html4strict"><ol><li style="font-weight: normal; vertical-align:top;"><div style=""><span style="color: #009900;"><<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"submit"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"OK"</span> <span style="color: #66cc66;">/</span>></span></div></li> </ol></div></div></div> <p>Lorsque l'on clique sur ce bouton, le contenu du formulaire est envoyé en fonction des paramètres <code class='spip_code' dir='ltr'>action</code> et <code class='spip_code' dir='ltr'>method</code> passés à la balise <code class='spip_code' dir='ltr'>form</code>.</p></div> <div class="hyperlien">Source : <a href="http://doc.ubuntu-fr.org/projets/ecole/web/initiation_xhtml" class="spip_out">Initiation au XHTML</a></div> </article> <article> <h1>Une liste de contrôle pour les normes et standards Web</h1> <p>2006-02-13T19:45:00Z</p> <div class='rss_chapo'><p>L'expression « standards Web » peut signifier différentes choses à différentes personnes. Pour certains, il s'agit de <i>« sites sans tableaux »</i>, pour d'autres <i>« d'utiliser du code valide »</i>. Toutefois, les standards sont beaucoup plus larges que cela. Un site développé selon les standards devrait <i>adhérer aux normes</i> (<a href="http://fr.wikipedia.org/wiki/HTML" class='spip_glossaire' rel='external'>HTML</a>, <a href="http://fr.wikipedia.org/wiki/XHTML" class='spip_glossaire' rel='external'>XHTML</a>, <a href="http://fr.wikipedia.org/wiki/XML" class='spip_glossaire' rel='external'>XML</a>, <a href="http://fr.wikipedia.org/wiki/CSS" class='spip_glossaire' rel='external'>CSS</a>, <a href="http://fr.wikipedia.org/wiki/XSLT" class='spip_glossaire' rel='external'>XSLT</a>, <a href="http://fr.wikipedia.org/wiki/DOM" class='spip_glossaire' rel='external'>DOM</a>, <a href="http://fr.wikipedia.org/wiki/MathML" class='spip_glossaire' rel='external'>MathML</a>, <a href="http://fr.wikipedia.org/wiki/SVG" class='spip_glossaire' rel='external'>SVG</a>, etc.) et <i>suivre les bonnes pratiques</i> (code valide, accessible et sémantiquement correct, <a href="http://fr.wikipedia.org/wiki/URL" class='spip_glossaire' rel='external'>URL</a> conviviaux, etc.).</p> <p>En d'autres mots, un site conçu selon les standards devrait idéalement <i>être léger, propre, conçu avec des feuilles de styles, accessible, utilisable, et convivial pour les moteurs de recherche</i>.</p></div> <div class='rss_texte'><div class="cs_sommaire cs_sommaire_avec_fond" id="outil_sommaire"><div class="cs_sommaire_inner"><div class="cs_sommaire_titre_avec_fond"> Sommaire </div><div class="cs_sommaire_corps"><ul><li><a title="À propos de la liste de contrôle" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_0">À propos de la liste de contrôle</a></li><li><a title="La liste de contrôle" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_1">La liste de contrôle</a></li><li><a title="1. Qualité du code" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_2">1. Qualité du code</a></li><li><a title="2. Degré de séparation entre le contenu et la présentation" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_3">2. Degré de séparation entre le contenu et la (...)</a></li><li><a title="3. Accessibilité pour les usagers" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_4">3. Accessibilité pour les usagers</a></li><li><a title="4. Accessiblité des dispositifs" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_5">4. Accessiblité des dispositifs</a></li><li><a title="5. Convivialité de base" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_6">5. Convivialité de base</a></li><li><a title="6. Gestion du site" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_7">6. Gestion du site</a></li></ul></div></div></div><h3 class="spip" id="outil_sommaire_0"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a>À propos de la liste de contrôle</h3> <p>Ce n'est pas une super exhaustive. Il y a probablement plusieurs éléments qui pourraient être ajoutés. De plus, elle ne devrait pas être vue comme une liste d'éléments qui <i>doivent</i> être évalués sur chacun des sites que vous développez. Il s'agit simplement d'un guide qui peut être utilisé :</p> <ul class="spip"><li> pour montrer l'ampleur des standards Web ;</li><li> comme un outil pratique pour les développeurs lors de la production d'un site Web ;</li><li> comme une aide pour les développeurs intéressés à aller vers les standards Web.</li></ul><h3 class="spip" id="outil_sommaire_1"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a>La liste de contrôle</h3> <p><strong><a href="#quality">1. Qualité du code</a></strong></p> <ol class="spip"><li> Le Doctype est-il correct ?<br class='manualbr' /><a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html" hreflang="en">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a></li><li> Y a-t-il un encodage de caractères ?<br class='manualbr' /><a href="http://www.w3.org/International/O-charset.html" hreflang="en">http://www.w3.org/International/O-charset.html</a></li><li> Le (X)HTML est-il valide ?<br class='manualbr' /><a class="externallink" href="http://validator.w3.org/" hreflang="en">http://validator.w3.org/</a></li><li> Le CSS est-il valide ?<br class='manualbr' /><a class="externallink" href="http://jigsaw.w3.org/css-validator/" hreflang="en">http://jigsaw.w3.org/css-validator/</a></li><li> Y a-t-il des astuces (<em lang="en">hacks</em>) CSS ?<br class='manualbr' /><a href="http://css-discuss.incutio.com/?page=CssHack" hreflang="en"> http://css-discuss.incutio.com/?page=CssHack</a></li><li> Y a-t-il des classes (<em lang="en">class</em>) ou des identifiants (<em lang="en">id</em>) inutiles ?</li><li> Le code est-il bien structuré ?<br class='manualbr' /><a class="externallink" href="http://www.w3.org/2003/12/semantic-extractor.html" hreflang="en">http://www.w3.org/2003/12/semantic-extractor.html</a></li><li> Y a-t-il des liens brisés ?<br class='manualbr' /><a class="externallink" href="http://validator.w3.org/checklink" hreflang="en">http://validator.w3.org/checklink</a></li><li> Comment est le site en terme de vitesse et taille des pages ?<br class='manualbr' /><a class="externallink" href="http://www.websiteoptimization.com/services/analyze/" hreflang="en">http://www.websiteoptimization.com/services/analyze/</a></li><li> Y a-t-il des erreurs de<i>JavaScript</i> ?</li></ol> <p><strong><a href="#degree">2. Degré de séparation entre le contenu et la présentation</a></strong></p> <ol class="spip"><li> Les feuilles de styles sont-elles utilisées pour tous les aspects de la présentation (polices, couleurs, marges, bordures, etc.) ?</li><li> Les images décoratives sont-elles dans les feuilles de styles ou dans le (X)HTML ? </li></ol> <p><strong><a href="#users">3. Accessibilité pour les usagers</a></strong></p> <ol class="spip"><li> L'attribut <strong>alt</strong> est-il utilisé pour toutes les images descriptives ou éditoriales ?</li><li> La taille du texte est-elle définie avec des unités de mesure variables plutôt que fixes ?</li><li> Certains éléments de mise en page sont-ils brisés si la taille du texte est augmentée ?</li><li> Y a-t-il des sauts de menu visibles ?</li><li> Les formulaires sont-ils accessibles ?</li><li> Les tableaux sont-ils accessibles ?</li><li> Les couleurs sont-elles suffisamment contrastées ?</li><li> La couleur est-elle utilisée seule pour des informations critiques ?</li><li> Y a-t-il un délai de réponse pour les menus déroulants (important pour les usagers qui ont des capacités motrices réduites) ?</li><li> Tous les liens sont-ils descriptifs (important pour les usagers aveugles) ?</li></ol> <p><strong><a href="#devices">4. Accessibilité des dispositifs</a></strong></p> <ol class="spip"><li> Le fonctionnement du site est-il acceptable autant sur les navigateurs modernes que sur les anciens navigateurs ?</li><li> Le contenu est-il accessible lorsque les feuilles de styles sont désactivées ou ne sont pas supportées ?</li><li> Le contenu est-il accessible lorsque les images sont désactivées ou ne sont pas supportées ?</li><li> Le site fonctionne-t-il avec des navigateurs textes tels que <i>Lynx</i> ?</li><li> Le site fonctionne-t-il correctement lorsqu'il est imprimé ?</li><li> Le site fonctionne-t-il correctement sur des assistants numériques personnels ?</li><li> Le site contient-il des métadonnées détaillées ?</li><li> Le site fonctionne-t-il correctement dans diverses résolutions d'écran ?</li></ol> <p><strong><a href="#usability">5. Convivialité de base</a></strong></p> <ol class="spip"><li> Y a-t-il une hiérarchie visuelle claire ?</li><li> Les niveaux d'en-tête se distinguent-ils facilement ?</li><li> La navigation est-elle simple à comprendre ?</li><li> La navigation est-elle consistante ?</li><li> Le niveau de langage du site est-il consistant et approprié ?</li><li> Y a-t-il une carte du site et une page de contact ? Sont-elles faciles à trouver ?</li><li> Y a-t-il un outil de recherche pour les gros sites ?</li><li> Y a-t-il un lien vers la page d'accueil sur toutes les pages du site ?</li><li> Les liens sont-ils soulignés ?</li><li> Les liens visités sont-ils clairement définis par une couleur unique ?</li></ol> <p><strong><a href="#site">6. Gestion du site</a></strong></p> <ol class="spip"><li> Y a-t-il une page d'erreur 404 simple et évocatrice qui fonctionne peu importe la profondeur du site ?</li><li> Les URL du site sont-ils conviviaux ?</li><li> Les URL du site fonctionnent-ils sans les « www » ?</li><li> Y a-t-il une icône de favori (<em lang="en">favicon</em>) sur le site ?</li></ol><h3 class="spip" id="outil_sommaire_2"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a><a name="quality"></a>1. Qualité du code</h3> <p><strong>1.1 Le Doctype est-il correct ?</strong></p> <blockquote cite="http://www.alistapart.com/articles/doctype/"> Un Doctype (version courte de « déclaration de type de document ») renseigne le validateur au sujet de la version de (X)HTML que vous utilisez et doit apparaître en haut de chaque page Web. Les Doctypes sont des éléments clés d'une page conforme : votre balisage et vos CSS ne valideront pas sans eux. <cite> <a href="http://www.alistapart.com/articles/doctype/" hreflang="en">http://www.alistapart.com/articles/doctype/</a> </cite> </blockquote> <p>Plus :</p> <ul class="spip"><li> <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html" hreflang="en">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a></li><li> <a href="http://css.maxdesign.com.au/listamatic/about-boxmodel.htm" hreflang="en">http://css.maxdesign.com.au/listamatic/about-boxmodel.htm</a></li><li> <a href="http://gutfeldt.ch/matthias/articles/doctypeswitch.html" hreflang="en">http://gutfeldt.ch/matthias/articles/doctypeswitch.html</a></li></ul> <p><strong>1.2 Y a-t'il un encodage de caractères ?</strong></p> <blockquote> Si un agent utilisateur (c.-à-d. un navigateur) est incapable de détecter l'encodage de caractères utilisé dans un document, l'usager pourrait recevoir du texte illisible. Cette information est particulièrement important lorsque l'on maintien un site multilingue, mais il est toujours important de déclarer l'encodage de caractères lorsque l'on produit du XHTML/HTML des CSS. <cite> <a href="http://www.w3.org/International/tutorials/tutorial-char-enc/" hreflang="en">http://www.w3.org/International/tutorials/tutorial-char-enc/</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.w3.org/International/O-charset.html" hreflang="en">http://www.w3.org/International/O-charset.html </a></li></ul> <p><strong>1.3 Le (X)HTML est-il valide ?</strong></p> <blockquote> Le code valide est rendu plus rapidement que le code qui contient des erreurs. Le code valide sera mieux rendu que le code invalide. Les navigateurs respectent de plus en plus les normes et il devient de plus en plus important d'écrire du HTML valide et conforme aux normes. <cite> <a href="http://www.maxdesign.com.au/presentation/sit2003/06.htm" hreflang="en">http://www.maxdesign.com.au/presentation/sit2003/06.htm</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://validator.w3.org/" hreflang="en">http://validator.w3.org/</a></li></ul> <p><strong>1.4 Le CSS est-il valide ?</strong></p> <blockquote> Vous devez vous assurer qu'il n'y a pas d'erreur ni dans votre HTML ni dans votre CSS, puisque des erreurs dans l'un ou l'autre peut donner un apparence négligée à vos documents. <cite> <a href="http://www.meyerweb.com/eric/articles/webrev/199904.html" hreflang="en">http://www.meyerweb.com/eric/articles/webrev/199904.html</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://jigsaw.w3.org/css-validator/" hreflang="en">http://jigsaw.w3.org/css-validator/</a></li></ul> <p><strong>1.5 Y a-t-il des astuces (<i>hacks</i>) CSS ?</strong></p> <blockquote> À la base, les astuces restent un choix personnel, la connaissance que vous avez des méthodes pour contourner un problème ainsi que de la mise en page que vous voulez obtenir. <cite> <a href="http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html" hreflang="en">http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://css-discuss.incutio.com/?page=CssHack" hreflang="en">http://css-discuss.incutio.com/?page=CssHack</a></li><li> <a href="http://css-discuss.incutio.com/?page=ToHackOrNotToHack" hreflang="en">http://css-discuss.incutio.com/?page=ToHackOrNotToHack</a></li><li> <a href="http://centricle.com/ref/css/filters/" hreflang="en">http://centricle.com/ref/css/filters/</a></li></ul> <p><strong>1.6 Y a-t-il des classes (<i>class</i>) ou des identifiants (<i>id</i>) inutiles ?</strong></p> <blockquote> J'ai remarqué que les développeurs apprenant de nouvelles techniques font souvent du bon CSS mais du mauvais XHTML. Précisément, le code HTML à tendance à être inutilement submergé de divs et ids. Résultat : du HTML ayant peu de sens et des feuilles de styles surchargées. <cite> <a href="http://www.clagnut.com/blog/228/" hreflang="en">http://www.clagnut.com/blog/228/</a> </cite> </blockquote> <p><strong>1.7 Le code est-il bien structuré ?</strong></p> <blockquote> Un balisage sémantiquement correct utilise les éléments HTML à bon escient. Du HTML bien structuré a une signification sémantique pour un grand nombre d'agents utilisateurs (navigateurs sans feuilles de styles, navigateurs textes, assistants électroniques personnels, engins de recherche etc.) <cite> <a href="http://www.maxdesign.com.au/presentation/benefits/index04.htm" hreflang="en">http://www.maxdesign.com.au/presentation/benefits/index04.htm</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.w3.org/2003/12/semantic-extractor.html" hreflang="en">http://www.w3.org/2003/12/semantic-extractor.html</a></li></ul> <p><strong>1.8 Y a-t-il des liens brisés ?</strong></p> <p> Les liens brisés peuvent frustrer vos usagers et potentiellement envoyer vos clients ailleur. Les liens brisés peuvent aussi nuire à la bonne indexation de votre site par les engins de recherche.</p> <p> Plus :</p> <ul class="spip"><li> <a href="http://validator.w3.org/checklink" hreflang="en">http://validator.w3.org/checklink</a></li></ul> <p><strong>1.9 Comment est le site en terme de vitesse et taille des pages ?</strong></p> <blockquote> Ne me faites pas attendre ! Tel est le message que nous transmet sondage après sondage. Même les usagers de la haute vitesse peuvent souffrir d'un long téléchargement. <cite> <a href="http://www.websiteoptimization.com/speed/" hreflang="en">http://www.websiteoptimization.com/speed/</a> </cite> </blockquote> <p><strong>1.10 Y a-t-il des erruers de <i>JavaScript</i> ?</strong></p> <p> Internet Explorer pour Windows permet d'activer un outil de débugage qui va ouvrir une nouvelle fenêtre pour vous indiquer les erreurs de <i>JavaScript</i> sur votre site. Allez sous 'Internet Options' dans l'onglet 'Advanced'. Désactivez 'Disable script debugging'.</p> <h3 class="spip" id="outil_sommaire_3"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a><a name="degree"></a>2. Degré de séparation entre le contenu et la présentation</h3> <p><strong>2.1 Les feuilles de styles sont-elles utilisées pour tous les aspects de la présentation (polices, couleurs, marges, bordures, etc) ?</strong></p> <blockquote> Servez-vous de feuilles de style pour contrôler la mise en page et la présentation. <cite> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-style-sheets" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-style-sheets</a> </cite> </blockquote> <p><strong>2.2 Les images décoratives sont-elles dans les feuilles de styles ou dans le (X)HTML ?</strong></p> <blockquote> L'objectif des développeurs devrait être d'enlever toute présentation du code HTML, le laissant ainsi propre et sémantiquement correct. <cite> <a href="http://www.maxdesign.com.au/presentation/benefits/index07.htm" hreflang="en">http://www.maxdesign.com.au/presentation/benefits/index07.htm</a> </cite> </blockquote><h3 class="spip" id="outil_sommaire_4"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a><a name="users"></a>3. Accessibilité pour les usagers</h3> <p><strong>3.1 L'attribut « <code class='spip_code' dir='ltr'>alt</code> » est-il utilisé pour toutes les images descriptives ?</strong></p> <blockquote> Fournissez un équivalent textuel pour tous les éléments non-textuels. <cite> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-text-equivalent" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-text-equivalent</a> </cite> </blockquote> <p><strong>3.2 Certains éléments de mise en page sont-ils brisés si la taille du texte est augmentée</strong></p> <blockquote> Utilisez des unitées de mesure relatives plutôt qu'absolue dans vos attributs de balisage et dans les propriétés de vos feuilles de style. <cite> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-relative-units" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-relative-units</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-relative-units" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-relative-units</a></li><li> <a href="http://www.clagnut.com/blog/348/" hreflang="en">http://www.clagnut.com/blog/348/</a></li></ul> <p><strong>3.3 Certains éléments de la mise en page sont-ils brisés si la taille du texte est augmentée ?</strong></p> <p> Faites ce simple test. Visitez votre site avec un navigateur qui supporte l'augmentation des tailles de polices. Maintenant, augmentez la taille de la police. Et encore. Et encore... Regardez votre site. Est-ce que la mise en page est encore correcte ? Il est dangereux pour les développeurs de supposer que tut le monde utilise la taille de police par défaut.</p> <p><strong>3.4 Y a-t-il des sautes de menu visibles ?</strong></p> <blockquote> Il faut offrir une méthode qui permet aux usagers de sauter par dessuis la navigation répétitive. <cite> <a href="http://www.section508.gov/index.cfm?FuseAction=Content&ID=12" hreflang="en">http://www.section508.gov/index.cfm?FuseAction=Content& ;ID=12</a> </cite> </blockquote> <blockquote> Groupez les liens relatifs, identifiez le groupe (pour les agents utilisateurs), et, jusqu'à ce que les agents utilisateurs le puissent, fournissez un moyen de sauter le groupe. <cite> <a href="http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#tech-group-links" hreflang="fr">http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#tech-group-links</a> </cite> </blockquote> <blockquote> ...les usagers aveugles ne sont pas les seuls qui peuvent être dérangés par de trop nombreux liens dans un espace de navigation. N'oubliez pas les gens à mobilité réduite qui ont de mauvaises technologies adaptative et qui risquent de devoir utilser la touche « tab » pour passer au travers de cette liste. <cite> <a href="http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020" hreflang="en">http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.niehs.nih.gov/websmith/508/o.htm" hreflang="en">http://www.niehs.nih.gov/websmith/508/o.htm</a></li></ul> <p><strong>3.5 Les formulaires sont-ils accessibles ?</strong></p> <blockquote> Les formulaires ne sont pas les éléments les plus simples à utiliser pour les gens ayant des handicaps. Naviguer d'une page avec du contenu écrit à une autre est une chose, sauter d'un champs de formulaire à l'autre et y insérer de l'information en est une autre. <cite> <a href="http://www.htmldog.com/guides/htmladvanced/forms/" hreflang="en">http://www.htmldog.com/guides/htmladvanced/forms/</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html" hreflang="en">http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html</a></li><li> <a href="http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp" hreflang="en">http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp</a></li><li> <a href="http://accessify.com/tutorials/better-accessible-forms.asp" hreflang="en">http://accessify.com/tutorials/better-accessible-forms.asp</a></li></ul> <p><strong>3.6 Les tableaux sont-ils accessibles ?</strong></p> <blockquote> Pour les tableaux de données, identifier les en-têtes de lignes et de colonnes. Par exemple, en HTML, utiliser TD pour signaler les cellules de données et TH pour signaler les en-têtes. <cite> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-table-headers" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-table-headers</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp" hreflang="en">http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp</a></li><li> <a href="http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp" hreflang="en">http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp</a></li><li> <a href="http://www.webaim.org/techniques/tables/" hreflang="en">http://www.webaim.org/techniques/tables/</a></li></ul> <p><strong>3.7 Les couleurs sont-elles suffisamment contrastées ?</strong></p> <blockquote> S'assurer que la combinaison de couleurs entre le premier plan et l'arrière-plan utilise suffisamment de contraste lorsqu'elle est utilisée par des personnes souffrant d'un déficit de perception des couleurs ou sur un écran noir et blanc. <cite> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-color-contrast" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-color-contrast</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.juicystudio.com/services/colourcontrast.asp" hreflang="en">http://www.juicystudio.com/services/colourcontrast.asp</a></li></ul> <p><strong>3.8 La couleur est-elle utilisée seule pour des informations critiques ?</strong></p> <blockquote> S'assurer que toute information convoyée par des couleurs est également accessible sans couleur, par exemple à partir du contexte ou de balises. <cite> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-color-convey" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-color-convey</a> </cite> </blockquote> <p> Il y a trois types principaux de daltonisme : deuteranope (une forme de daltonisme rouge/vert), protanop (une autre forme de daltonisme rouge/vert) et tritanope (une forme de daltonisme bleu/jaune - très rare).</p> <p> Plus :</p> <ul class="spip"><li> <a href="http://colorfilter.wickline.org/" hreflang="en">http://colourfilter.wickline.org/</a></li><li> <a href="http://www.toledo-bend.com/colorblind/Ishihara.html" hreflang="en">http://www.toledo-bend.com/colourblind/Ishihara.html</a></li><li> <a href="http://www.vischeck.com/vischeck/vischeckURL.php" hreflang="en">http://www.vischeck.com/vischeck/vischeckURL.php</a></li></ul> <p><strong>3.9 Y a-t-il un délai de réponse pour les menus déroulants (important pour les usagers qui ont des capacités motrices réduites) ?</strong></p> <p> Les usagers ayant des capacités motrices réduite peuvent trouver les menus déroulants difficiles à utiliser si le temps de réponse est trop rapide.</p> <p><strong>3.10 Tous les liens sont-ils descriptifs (important pour les usagers aveugles) ?</strong></p> <blockquote> Identifier clairement la cible de chaque lien. Les liens textes evraient être suffisemment explicites pour être compréhensibles même lorsque on les lit en dehors de leur contexte - de manière isolée ou parmi d'autres liens. Les liens textes doivent également être concis. <cite> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-meaningful-links" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-meaningful-links</a> </cite> </blockquote><h3 class="spip" id="outil_sommaire_5"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a><a name="devices"> </a> 4. Accessiblité des dispositifs</h3> <p><strong>4.1 Le fonctionnement du site est-il acceptable autant sur les navigateurs modernes que sur les anciens navigateurs ?</strong></p> <blockquote> Avant de commencer à construire votre mise en page CSS, vous devez décider les navigateurs à supporter et à quel niveau vous voulez les supporter. <cite> <a href="http://www.maxdesign.com.au/presentation/process/index_step01.cfm" hreflang="en">http://www.maxdesign.com.au/presentation/process/index_step01.cfm</a> </cite> </blockquote> <p><strong>4.2 Le contenu est-il accessible lorsque les feuilles de styles sont désactivées ou ne sont pas supportées ?</strong></p> <p> Certaines personnes peuvent visiter votre site avec un navigateur qui ne supporte pas les feuilles de styles ou encore un navigateur avec les feuilles de styles désactivées. Si le contenu est correctement structuré, ce ne sera pas un problème.</p> <p><strong>4.3 Le contenu est-il accessible lorsque les images sont désactivées ou ne sont pas supportées ?</strong></p> <p> Certaines personnes naviguent avec les images désactivées - en particulier les gens qui on de lentes connections. Le contenu doit encore être accessible à ces gens.</p> <p><strong>4.4 Le site fonctionne-t-il avec des navigateurs textes tels que <i>Lynx</i> ?</strong></p> <p> Ceci est similaire à une combinaise des images et des feuilles de style désactivées. Un navigateur texte va se fier à du contenu correctement structuré pour fournir du sens.</p> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.delorie.com/web/lynxview" hreflang="en">http://www.delorie.com/web/lynxview</a></li></ul> <p><strong>4.5 Le site fonctionne-t-il correctement lorsqu'il est imprimé ?</strong></p> <blockquote> Vous pouvez prendre n'importe quel document (X)HTML et créer un style assez simple pour l'impression, sans avoir à modifier le balisage. <cite> <a href="http://www.alistapart.com/articles/goingtoprint/" hreflang="en">http://www.alistapart.com/articles/goingtoprint/</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print" hreflang="en">http://www.d.umn.edu/itss/support/Training/Online/ webdesign/css.html#print</a></li></ul> <p><strong>4.6 Le site fonctionne-t-il correctement sur des assistants numériques personnels ?</strong></p> <p> C'est assez difficile à gérer tant que les assistants numériques personnels ne supportent pas leur type de média. Toutefois, certaines mises en pages fonctionnent mieux avec les <br class='autobr' /> <abbr title="assistants numériques personnels"><br class='autobr' /> asn<br class='autobr' /> </abbr><br class='autobr' /> actuels. Le support des asn sera dicté par le public cible.</p> <p><strong>4.7 Le site contient-il des métadonnées détaillées ?</strong></p> <blockquote> Les métadonnées sont de l'information compréhensible par des ordinateurs. <cite> <a href="http://www.w3.org/Metadata/" hreflang="en">http://www.w3.org/Metadata/</a> </cite> </blockquote> <p> Les métadonnées sont de l'information structurée qui est spécifiquement créée pour décrire une resource. En d'autre mots, les métadonnées sont des « données sur les données ».</p> <p><strong>4.8 Le site fonctionne-t-il correctement dans diverses tailles de fenêtres ?</strong></p> <p> Les développeurs supposent souvent que les tailles moyennes des écrans augmentent. Certains développeurs supposent que la moyenne est de 1024 pixels de large. Mais que faire avec les usagers ayant des plus petits écrans et les usagers ayant des assistants personnels ? Font-ils partie de votre public cible et sont-ils désavantagés ?</p> <h3 class="spip" id="outil_sommaire_6"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a><a name="usability"></a>5. Convivialité de base</h3> <p><strong>5.1 Y a-t-il une hiérarchie visuelle claire ?</strong></p> <blockquote> Organisez et priorisez le contenu d'une page en utilisant la taille, la proéminance et les relations entre le contenu <cite> <a href="http://www.great-web-design-tips.com/web-site-design/165.html" hreflang="en">http://www.great-web-design-tips.com/web-site-design/165.html</a> </cite> </blockquote> <p><strong>5.2 Les niveaux d'en-tête se distinguent-ils facilement ?</strong></p> <blockquote> Utiliser les éléments d'en-tête pour convoyer la structure du document, et les utiliser en conformité avec les spécifications <cite> <a href="http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-logical-headings" hreflang="fr">http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-logical-headings</a> </cite> </blockquote> <p><strong>5.3 La navigation est-elle simple à comprendre ?</strong></p> <blockquote> Votre système de navigation devrait donner à vos visiteurs une indications de l'endroit où ils se trouvent et où ils peuvent aller. <cite> <a href="http://www.1stsitefree.com/design_nav.htm" hreflang="en">http://www.1stsitefree.com/design_nav.htm</a> </cite> </blockquote> <p><strong>5.4 La navigation est-elle consistante ?</strong></p> <blockquote> Si chaque page de votre site a une présentation consistante, les visiteurs trouveront plus facile de naviguer d'une page à l'autre et de trouver de l'information <cite> <a href="http://www.juicystudio.com/tutorial/accessibility/navigation.asp" hreflang="en">http://www.juicystudio.com/tutorial/accessibility/navigation.asp</a> </cite> </blockquote> <p><strong>5.5 Le niveau de langage du site est-il consistant et approprié ?</strong></p> <blockquote> Pour communiquer efficacement, il faut utiliser un language simple et clair. Comprendre un texte avec une mauvaise grammaire peut-être difficile, en particulier si la langue n'est pas la langue maternelle du visiteur. <cite> <a href="http://www.juicystudio.com/tutorial/accessibility/clear.asp" hreflang="en">http://www.juicystudio.com/tutorial/accessibility/clear.asp</a> </cite> </blockquote> <p><strong>5.6 Y a-t-il une carte du site et une page de contact ? Sont-elles faciles à trouver ?</strong></p> <blockquote> La majeure partie des cartes de sites ne transmettent pas correctement les multiples niveaux d'un site. Dans des tests d'utilisabilité, les usagers n'utilisent pas les cartes de site ou ne peuvent pas les trouver. La complexité est aussi un problème : une carte devrait être une carte, pas une épreuve de navigation. <cite> <a href="http://www.useit.com/alertbox/20020106.html" hreflang="en">http://www.useit.com/alertbox/20020106.html</a> </cite> </blockquote> <p><strong>5.7 Y a-t-il un outil de recherche pour les gros sites ?</strong></p> <p> Bien que des outils de recherche ne soient pas nécessaire sur des petits sites et que certaines personnes ne s'en serviront jamais, des outils de recherche spécifiques à un site peuvent permettre aux usagers de choisir parmis différentes options de navigation.</p> <p><strong>5.8 Y a-t-il un lien vers la page d'accueil sur toutes les pages du site ?</strong></p> <p> Certains usagers aiment repasser par la page d'accueil d'un site après avoir navigué vers le contenu d'un site. La page d'accueil devient un camp de base pour ces usagers, leur permettant de regrouper l'information avant d'explorer d'autres parties du site.</p> <p><strong>5.9 Les liens sont-ils soulignés ?</strong></p> <blockquote> Pour maximiser la <a href="http://www.jnd.org/dn.mss/affordances-and-design.html" hreflang="en"> valeur perçu </a> des possibilités de cliquers, soulignez et colorez les liens. Les usagers ne devraient pas avoir à deviner où ils peuvent cliquer. <cite> <a href="http://www.useit.com/alertbox/20040510.html" hreflang="en">http://www.useit.com/alertbox/20040510.html</a> </cite> </blockquote> <p><strong>5.10 Les liens visités sont-ils clairement définis par une couleur unique ?</strong></p> <blockquote> Savoir quelles pages ils ont déjà visitées empêchent les visiteurs de revoir encore et encore les même pages. <cite> <a href="http://www.useit.com/alertbox/20040503.html" hreflang="en">http://www.useit.com/alertbox/20040503.html</a> </cite> </blockquote><h3 class="spip" id="outil_sommaire_7"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a><a name="site"></a>6. Gestion du site</h3> <p><strong>6.1 Y a-t-il une page d'erreur 404 simple et évocatrice qui fonctionne peu importe la profondeur du site ?</strong></p> <blockquote> Vous avez demandé une page - soit en tappant un URL directement dans la barre d'adresse, soit en cliquant un lien désuet et vous vous retrouvez nulle part en plein milieu du cyberespace. Un site convivial va vous aider alors que beaucoup d'autre ne feront rien, se fiant au capacités du navigateur de vous expliquer quel est le problème. <cite> <a href="http://www.alistapart.com/articles/perfect404/" hreflang="en">http://www.alistapart.com/articles/perfect404/</a> </cite> </blockquote> <p><strong>6.2 Les URL du site sont-ils conviviaux ?</strong></p> <blockquote> La majorité des moteurs de recherche (à quelques exceptions près - comme Google) ne vont pas indexer les pages qui ont des points d'interogation ou d'autres caractères (comme l'éperluette ou le signe d'égalité) dans l'URL... à quoi sert un site que personne ne peut trouver ? <cite> <a href="http://www.sitepoint.com/article/search-engine-friendly-urls" hreflang="en">http://www.sitepoint.com/article/search-engine-friendly-urls</a> </cite> </blockquote> <blockquote> Un des pires éléments du web du point de vue de l'usager est l'URL. Par contre, s'ils sont courts, logiques et qu'ils se corrigent eux-même, les URLs peuvent être relativement utilisables. <cite> <a href="http://www.merges.net/theory/20010305.html" hreflang="en">http://www.merges.net/theory/20010305.html</a> </cite> </blockquote> <p> Plus :</p> <ul class="spip"><li> <a href="http://www.sitepoint.com/article/search-engine-friendly-urls" hreflang="en">http://www.sitepoint.com/article/search-engine-friendly-urls</a></li><li> <a href="http://www.websitegoodies.com/article/32" hreflang="en">http://www.websitegoodies.com/article/32</a></li><li> <a href="http://www.merges.net/theory/20010305.html" hreflang="en">http://www.merges.net/theory/20010305.html</a></li></ul> <p><strong>6.3 Les URL du site fonctionnent-ils sans les « www » ?</strong></p> <p> Bien que ce nesoit pas critique et dans certains cas, c'est impossible, c'est toujours bon d'offrir aux usagers le choix. Si un usager entre votre nom de domaine sans www et n'obtient pas de site, vous et l'usager pourraient être désavantagés.</p> <p><strong>6.4 Y a-t-il une icône de favori (<em lang="en">favicon</em>) sur le site ?</strong></p> <blockquote> Un « favicon » est une image utilisée dans presque tout les sites professionnels. Ce dernier permet au webmestre de faire la promotion de son site et de créer une apparence encore plus personnalisée dans le navigateur du visiteur. <cite> <a href="http://www.favicon.com/" hreflang="en">http://www.favicon.com/</a> </cite> </blockquote> <p> Les « favicon » ne sont pas critiques. Par contre, lorsqu'ils sont absents, ils peuvent causer des erreur 404 dans vos logs (statistiques du site). Des navigateurs comme IE vont en faire la demande au serveur si le site est dans les favoris. Si le « favicon » n'est pas disponible, une page d'erreur 404 pourrait être générée. Ainsi, avoir un « favicon » pourrait limiter les erreurs 404 directement liées au favicon. Il en va de même pour le fichier « robots.txt ».</p> <p> Cette liste a d'abord <br class='autobr' /> <a href="http://www.mail-archive.com/wsg%40webstandardsgroup.org/msg05279.html" lang="en">été élaborée dans ses grandes lignes</a>sur la liste de diffusion <i>Web Standards</i><br class='autobr' /> en mai 2004. Elle a été <a href="http://www.maxdesign.com.au/presentation/checklist/" hreflang="en">présentée</a>au <i>Web Standards Group</i> de Sidney le 5 août 2004. Elle est aussi disponible en format <abbr lang="en" title="Portable Document File">PDF</abbr> pour les développeurs <a href="http://www.maxdesign.com.au/presentation/checklist/checklist.pdf" lang="en">anglophones</a> et <a href="http://www.elanceur.org/FractalCity/WebStandardsStructure/CheckListWebStandards.pdf" lang="en">francophones</a>. Également disponible sous forme de <a href="http://www.elanceur.org/FractalCity/WebStandardsStructure/CheckListWebStandards.pdf" lang="en">diaporama</a>.</p> <p>Cette liste est aussi disponible en :</p> <ul class="spip"><li> <a href="http://flashbg.org/tutorials/checklist/" hreflang="bg">bulgare</a>, merci à <a href="http://www.flashbg.org/">Boby Dimitrov</a> ;</li><li> <a href="http://www.niub.com/jjgod/wiki/WebStandardsCheckList.html" hreflang="zh">chinois</a>, merci à <a href="http://www.niub.com/jjgod/">Jjgod Jiang</a> ;</li><li> <a href="http://www.nocodestudio.com.ar/articulos/checklist/index.htm" hreflang="es">espagnol</a>, merci à <a href="http://www.nocodestudio.com.ar/blog/">Osvaldo Rainero</a> ;</li><li> <a href="http://www.webaccessibile.org/argomenti/argomento.asp?cat=481" hreflang="it">italienne</a>, merci à <a href="http://www.webaccessibile.org/default.asp">Franco Carcillo</a> ;</li><li> <a href="http://www.tiuvizeta.it/web_standards.html" hreflang="it">italienne</a>, merci à <a href="http://www.tiuvizeta.it/">Livio Mondini</a> ;</li><li> <a href="http://www.elanceur.org/FractalCity/Articles/Check-ListStandardsduWeb.html" hreflang="it">française</a>, merci à <a href="http://www.elanceur.org/FractalCity/">Christophe Ducamp</a> ;</li><li> et bien entendu dans sa <a href="http://www.maxdesign.com.au/presentation/checklist.cfm" hreflang="en">version originale anglaise</a>, telle qu'écrite par Russ Weakley.</li></ul> <p>Comme toujours, merci à <br class='autobr' /> <a href="http://www.maxdesign.com.au/about_rose.cfm" hreflang="en"><br class='autobr' /> Rose<br class='autobr' /> </a><br class='autobr' /> pour la relecture et à <br class='autobr' /> <a href="http://elysiansystems.com/" hreflang="en"><br class='autobr' /> Lea de Groot<br class='autobr' /> </a><br class='autobr' /> pour les suggestions de la liste pour les développeurs.</p> <p><i>Russ Weakley, 13 août 04</i></p> <p>Traduction québécoise (française) par <br class='autobr' /> <a href="http://www.divetheweb.com/" hreflang="fr"><br class='autobr' /> Chantal Ide<br class='autobr' /> </a><br class='autobr' /> pour <br class='autobr' /> <a href="http://www.w3qc.org/" hreflang="fr"><br class='autobr' /> W3Québec<br class='autobr' /> </a>.</p> <p>Relecture par <br class='autobr' /> <a href="http://www.paginus.com/lesechecs/auteur.html" hreflang="fr"><br class='autobr' /> Normand Lamoureux<br class='autobr' /> </a><br class='autobr' /> et <br class='autobr' /> <a href="http://www.cybercodeur.net/" hreflang="fr"><br class='autobr' /> Denis Boudreau</a>.</p></div> </article> <article> <h1>Jeux de caractères, encodages et entités</h1> <p>André Vincent — 2006-01-09T05:00:00Z</p> <div class='rss_chapo'><p>Les notions d'encodage et de jeu de caractères (souvent désignés sous le même terme anglais de <i>charset</i>) sont des notions fondamentales à bien comprendre dans la production de page web, surtout dans des langues autres que l'anglais.</p></div> <div class='rss_texte'><p><strong>Encodage et jeu de caractères</strong></p> <p>Le terme <strong>encodage</strong> (<i>encoding</i>) désigne la façon dont les caractères dans un ensemble ou un sous-ensemble d'un alphabet donné, sont convertis en octets dans un fichier informatique (et vice-versa). Certaines méthodes d'encodage sont spécifiques à un environnement informatique dans une langue ou un alphabet donné, d'autres sont multiplateformes et multilingues. Exemple d'encodage : <a href="http://fr.wikipedia.org/wiki/ASCII" class='spip_glossaire' rel='external'>ASCII</a>, <a href="http://fr.wikipedia.org/wiki/iso-8859-1" class='spip_glossaire' rel='external'>iso-8859-1</a>, <a href="http://fr.wikipedia.org/wiki/iso-8859-15" class='spip_glossaire' rel='external'>iso-8859-15</a>, <a href="http://fr.wikipedia.org/wiki/utf-8" class='spip_glossaire' rel='external'>utf-8</a>, <a href="http://fr.wikipedia.org/wiki/utf-16" class='spip_glossaire' rel='external'>utf-16</a>, etc.</p> <p>Le terme <strong>jeu de caractères</strong> (<i>character set</i>) refère à un ensemble ou un sous-ensemble des caractères (ou glyphes) disponibles dans un jeu de caractère donné. Ainsi, les jeux de caractères <strong>ISO Latin 1 - souvent désigné par son encodage : iso-8859-1</strong>, <strong>ANSI - Windows Latin 1</strong> et <strong>Mac OS Roman</strong>, bien qu'appartenant tous les trois à l'<a href="http://fr.wikipedia.org/wiki/alphabet_latin" class='spip_glossaire' rel='external'>alphabet latin</a> ne réfèrent qu'à des jeux partiels de caractères de ce même <a href="http://fr.wikipedia.org/wiki/alphabet_latin" class='spip_glossaire' rel='external'>alphabet latin</a> ; de plus, ils ne contiennent pas tous les même caractères. Voir : <a href="http://www.alanwood.net/demos/charsetdiffs.html" class='spip_out' rel='external'>Differences between ANSI, ISO-8859-1 and MacRoman character sets</a></p> <p>Par contre, le jeu de caractères <a href="http://fr.wikipedia.org/wiki/Unicode" class='spip_glossaire' rel='external'>Unicode</a>, lui peut représenter n'importe quel système d'écriture, de n'importe quelle langue dans n'importe quel environnement informatique.</p> <p><strong>Les encodages les plus courants</strong></p> <p>Les <strong>encodages multiplateformes</strong> les plus couramment utilisés dans les pages web sont :</p> <ul class="spip"><li> <strong>iso-8859-1</strong> (méthode d'encodage très limitatif d'un jeu partiel des caractères de l'<a href="http://fr.wikipedia.org/wiki/alphabet_latin" class='spip_glossaire' rel='external'>alphabet latin</a> <strong>ISO Latin 1</strong>)</li><li> <strong>utf-8</strong> (méthode d'encodage d'un jeu universel de caractères <strong>Unicode</strong> pour toutes les langues)</li></ul> <p>Les encodages spécifiques à certains systèmes d'exploitation pour les langues de l'Europe de l'ouest :</p> <ul class="spip"><li> <strong>windows-1252</strong> (méthode d'encodage du jeu partiel des caractères de l'alphabet latin <strong>ANSI - ou Windows Latin 1</strong>)</li><li> <strong>macintosh</strong> (méthode d'encodage du jeu partiel des caractères de l'alphabet latin <strong>Mac OS Roman</strong>)</li></ul> <p><strong>Déclaration de l'encodage en (X)HTML</strong></p> <p>En HTML et XHTML, en présence d'une profusion d'encodages différents des caractères variant selon les systèmes d'exploitation et les langues et afin d'assurer une interpolarité et une interprétation uniforme de ces caractères, il est nécessaire de bien indiquer en tout début de document, le type d'encodage des caractères utilisé dans la page. On l'indique à l'aide de l'élément META, inséré sous cette forme dans l'élément <strong>HEAD</strong> du document :</p> <textarea readonly='readonly' cols='40' rows='2' class='spip_cadre' dir='ltr'><meta http-equiv="content-type" content="text/html; charset=utf-8" /></textarea> <p>En XML, on utilisera plutôt la déclaration suivante dès la première ligne du document :</p> <textarea readonly='readonly' cols='40' rows='2' class='spip_cadre' dir='ltr'><?xml version="1.0" encoding="utf-8"?></textarea> <p><i> <strong>Remarque</strong> : la déclaration XML est ici beaucoup plus précise que la déclaration HTML ; en effet, utf-8 désigne effectivement une méthode d'encodage (<strong> <i>encoding</i> </strong>) plutôt qu'un jeu de caractère (<strong> <i>charset</i> </strong>). Dans notre exemple, le jeu de carctères est : <strong>Unicode</strong> </i>.</p> <p>En l'absence d'une telle déclaration en début d'un document HTML, les logiciels de navigation utiliseront un encodage par défaut (généralement <strong>iso-8859-1</strong>) ou selon les réglages des préférences du logiciel. Pour <strong>Firefox</strong>, par exemple, voir : <strong>Préférences -> Contenu : Polices par défaut -> Avancée... : Encodage par défaut</strong>.</p> <p><strong>L'encodage correct du fichier lors de l'enregistrement</strong></p> <p>Mais il ne suffit pas d'indiquer le jeu de caractères dans l'élément <strong>META</strong>. Encore faut-il que le document soit effectivement et correctement <strong>enregistré</strong> en utilisant l'encodage spécifié. Malheurement tous les éditeurs de texte ou les éditeurs HTML n'offrent pas cette option ou l'ont implémenté de façon incomplète.</p> <p>Tout éditeur de texte HTML moderne, opérant dans un système d'exploitation moderne doit aujourd'hui nous permettre d'utiliser directement toute la gamme des caractères Unicode et d'enregistrer et d'ouvrir des fichiers encodés en utf-8. Si votre logiciel ne vous le permet pas, changez de logiciels, il en existe de nombreux dans le monde du logiciel libre.</p> <p><strong>Quel encodage choisir ?</strong></p> <p>L'encodage utf-8 est de loin le meilleur choix.</p> <ul class="spip"><li> Utf-8 permet d'encoder tous les caractères Unicode, pour tous les environnements informatiques, dans toutes les langues.</li><li> Depuis au moins 10 ans, tous les logiciels de navigation majeurs sont en mesure de reconnaître l'encodage <strong>utf-8</strong>.</li><li> Tous les systèmes d'exploitations modernes savent gérer les caractères unicodes et fournissent généralement de base avec le système d'exploitation des polices unicodes.</li><li> La variété des polices unicodes est de plus en plus étendue, notamment disponibles au format .otf (Open Type Face) ou dans une moindre mesure, au format .ttf (True Type).</li></ul> <p><strong>Voir aussi :</strong></p> <ul class="spip"><li> <a href="http://www.la-grange.net/w3c/html4.01/charset.html" class='spip_out' rel='external'>Jeux de caractères et encodages dans un document HTML</a> - (Recommandations officielles du W3C)</li><li> <a href="http://tw.o0o.ch/weblog/2004/06/08/60-jeux-de-caracteres-c-est-quoi" class='spip_out' rel='external'>Jeux de caractères : c'est quoi ?</a></li><li> <a href="http://www.unicode.org/standard/translations/french.html" class='spip_out' rel='external'>Qu'est-ce qu'Unicode ?</a></li><li> <a href="http://www.cs.tut.fi/~jkorpela/chars/index.html" class='spip_out' rel='external'>Characters and encodings</a></li><li> <a href="http://www.cs.tut.fi/~jkorpela/chars.html" class='spip_out' rel='external'>A tutorial on character code issues</a></li><li> <a href="http://www.eki.ee/letter/" class='spip_out' rel='external'>Data languages</a></li><li> <a href="http://www.cs.tut.fi/~jkorpela/chars/sorted.html" class='spip_out' rel='external'>Liste des divers types d'encodage</a></li><li> <a href="http://intertwingly.net/stories/2004/04/14/i18n.html" class='spip_out' rel='external'>Iñtërnâtiônàlizætiøn</a></li><li> <a href="http://www.blog-and-blues.org/weblog/2005/02/19/391-css-charset" class='spip_out' rel='external'>Feuilles de style, jeux et codage de caractères</a></li></ul> <p><strong>Entités (X)HTML</strong></p> <p>En l'absence de la possibilité d'enregistrer le document dans le jeu de caractères approprié, la plupart des éditeurs HTML offrent l'option de convertir les caractères spéciaux (notamment les caractères accentués) en <strong>entités HTML</strong> pour représenter les caractères désirés. Cette méthode a par contre le désavantage de rendre le texte du document plus difficile à écrire, éditer et modifier.</p> <p>Ainsi, par exemple, la phrase suivante sera ainsi convertie dans le document HTML :</p> <p><strong>L'été à Noël ?</strong><br class='manualbr' /><code class='spip_code' dir='ltr'>L’été à Noël ?</code></p> <p>Il est donc préférable d'éviter de les utiliser et de ne les utiliser qu'en dernier recours.</p> <ul class="spip"><li> <a href="http://www.htmlhelp.org/reference/html40/entities/latin1.html" class='spip_out' rel='external'>Tableau des entités ISO Latin-1 pour HTML 4.0</a></li><li> <a href="http://www.htmlhelp.org/reference/html40/entities/special.html" class='spip_out' rel='external'>Tableau des entités des caractères spéciaux pour HTML 4.0</a></li></ul> <p><strong>Derniers conseils</strong></p> <ol class="spip"><li> Rédigez vos documents HTML en utilisant le jeu de caractères <strong>Unicode</strong> (encodage <strong>utf-8</strong>).</li><li> Identifiez bien l'encodage utilisé dans l'entête de vos pages HTML.</li><li> Enregistrez vos fichiers avec l'option d'encodage <strong>utf-8</strong>.</li></ol></div> </article> <article> <h1>Ergonomie, compatibilité et accessibilité</h1> <p>André Vincent — 2004-08-19T12:13:24Z</p> <div class='rss_chapo'><p>Les enjeux d'un site web sont multiples et sa compatibilité ainsi que sa qualité comptent parmi les premiers critères de sa réussite, tant au niveau quantitatif (trafic, nombre de commandes) que qualitatif.</p></div> <div class='rss_texte'><div class="cs_sommaire cs_sommaire_avec_fond" id="outil_sommaire"><div class="cs_sommaire_inner"><div class="cs_sommaire_titre_avec_fond"> Sommaire </div><div class="cs_sommaire_corps"><ul><li><a title="Règles d'ergonomie" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_0">Règles d'ergonomie</a></li><li><a title="Standards du web" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_1">Standards du web</a></li><li><a title="Normes d'Accessibilité" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_2">Normes d'Accessibilité</a></li><li><a title="Références :" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_3">Références</a></li></ul></div></div></div><p><strong>Source : cet article est essentiellement une adaptation d'un article paru sur <a href="http://www.alsacreations.com/articles/principes/" class='spip_out' rel='external'>www.alsacreations.com</a> rédigé par <i>Raphaël GOETTER</i> et <i>Olivier HUBAUT</i> </strong></p> <p>Pour être de qualité, un site doit être à la fois <strong>Utile</strong> (répondre à un besoin) et <strong>Utilisable</strong> (par tous).</p> <p>Nous allons développer dans cet article trois grandes parties qui seront autant de principes universels de qualité.</p> <p>Universels dans le sens où ils s'appliquent pour tous les sites web quel que soit leur thème (ludique, sobre, académique, artistique), leur concept (professionnel, commercial, associatif, amateur,...), leur objectif et le public visé.</p> <ul class="spip"><li> Règles d'ergonomie.</li><li> Standards du web.</li><li> Normes d'accessibilité.</li></ul><h3 class="spip" id="outil_sommaire_0"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a> Règles d'ergonomie </h3> <p>L'ergonomie est la façon de rendre un site <strong>utilisable</strong> par le plus grand nombre de personnes avec un maximum de confort et d'efficacité. Cette définition est souvent peu respectée au profit des technologies propriétaires (flash, scripts, balises propriétaires, etc...) qui rendent l'utilisation des sites souvent difficile.</p> <p>À noter que s'il ne fallait retenir que deux principes essentiels d'ergonomie, ils seraient :</p> <ul class="spip"><li> le <strong>Poids</strong> (de nos jours, 50 à 80ko pour une page web graphismes compris, semble correct) et </li><li> la <strong>Dimension</strong> (la norme reste encore la résolution 800 x 600 pixels, très largement utilisée). <a href="http://www.w3schools.com/browsers/browsers_stats.asp" class='spip_out' rel='external'>Cf statistiques du W3schools</a>)</li></ul> <p>Pour analyser en profondeur l'ergonomie d'un site, il est possible de faire des audits d'accessibilité et des test utilisateurs, mais il existe des principes de bases dont voici une liste (non exhaustive) :</p> <p><strong> Objectif du site : </strong></p> <ul class="spip"><li> Afficher le nom et le logo de l'organisation ou de l'entreprise, en gros et bien en vue, en début de page et en permanence sur chaque page.</li><li> Ajouter une signature, descriptin ou slogan qui résume explicitement l'activité du site, à moins que le titre du site soit lui-même explicite.</li><li> Mettre en valeur les fonctions principales pour que la page d'accueil remplisse pleinement son rôle de point d'orientation.</li></ul> <p><strong> Présentation des informations : </strong></p> <ul class="spip"><li> Inclure dans la page d'accueil un lien <strong>Contactez-nous</strong> ou <strong>À propos de nous</strong> qui pointe sur une page contenant toutes les coordonnées de l'organistion ou de l'entreprise.</li><li> Si le site receuille des informations sur les visiteurs ou les clients, ajouter sur la page d'accueil un lien <strong>Clause de confidentialité</strong> ou <strong>Politique éditoriale</strong> si le site autorise les visiteurs à laisser des commentaires ou contient une forme quelconque de forum.</li></ul> <p><strong> Rédaction du contenu : </strong></p> <ul class="spip"><li> Privilégier un vocabulaire centré sur les visiteurs (pas de termes internes, trop techniques ou jargon commercial), à moins évidemment que le site d'adresse s'adresse à un public spécialisé.</li><li> Eviter les redondances, même pour souligner leur importance.</li><li> Veiller à la cohérence de la casse (majuscules/minuscules).</li><li> Eviter les listes à puces contenant un seul élément.</li><li> Décrire les actions à accomplir de façon claire, employer de préférence l'impératif (<strong>« Découvrez ce CD »</strong> est plus accrocheur et explicite que que <strong>« Vous pouvez découvrir ce CD ici »</strong> par exemple).</li><li> Développer la première occurence de chaque abréviation, sigle ou acronyme.</li><li> Éviter les points d'exclamation !</li><li> Ne pas abuser des majuscules, notamment dans les titres ou intertitres ; au-delà de 4 mots, la lisibilité en est progressivement réduite.</li></ul> <p><strong> Illustration du contenu du site par des exemples : </strong></p> <ul class="spip"><li> Afficher une vignette, une illustration, un schéma ou une photo : ne pas se contenter de décrire.</li><li> Pour chaque exemple : proposer un lien direct vers l'article et non une page générique de catégorie.</li><li> Placer un lien vers la catégorie à côté de l'exemple.</li></ul> <p><strong> Liens : </strong></p> <ul class="spip"><li> Différencier les liens et les rendre facilement identifiables.</li><li> Ne pas utiliser de terme générique, comme <strong>« Cliquez ici »</strong>.</li><li> Attribuer une couleur différente aux liens visités et non-visités.</li><li> Quand le libellé du lien n'est pas suffisamment explicite, fournissez aussi une description reactive <a href="#" title="Simplement pour illustrer la chose: ce lien ne conduit nulle part.">comme ceci</a>.</li></ul> <p><strong> Navigation : </strong></p> <ul class="spip"><li> Installer la zone de navigation principale en un point stratégique, de préférence juste à côté du contenu principal de la page.</li><li> Regrouper les contrôles de navigation similaires.</li><li> Si le site propose une fonction de panier, insérer sur la page d'accueil un lien vers cette fonction.</li><li> Utiliser des icônes de navigation seulement si elles sont claires et universellement significatives.</li></ul> <p><strong> Recherche : </strong>.</p> <ul class="spip"><li> Proposer sur la page d'accueil une zone de saisie des critères de recherche (d'une taille suffisante et placée en haut de page). La recherche peut également être située visuellement en dessous du menu, à condition de rester sur le premier écran. Mais dans un tel cas, il faut veiller à rajouter un point d'accès en début de page.</li></ul> <p><strong> Outils et raccourcis aux fonctions : </strong></p> <ul class="spip"><li> Donner aux internautes un accès direct aux fonctions principales du site (technique du <i>« zéro clic »</i>) </li><li> Ne pas proposer d'outils qui se contentent de dupliquer des fonctions du navigateur (ajout aux favoris, en page de démarrage,...)</li></ul> <p><strong> Images et animations : </strong></p> <ul class="spip"><li> Se servir des images avant tout pour mettre en valeur le contenu plutôt que pour décorer simplement la page.</li><li> Ajouter une légende aux images et aux photos si le contexte ne suffit pas à les rendre explicites -* Ajuster les images à la taille d'affichage (plutôt rogner que rapetisser pour du jpg).</li><li> Eviter les éléments graphiques en filigrane (images en arrière-plan et texte au premier plan).</li><li> Ne pas utiliser d'animations en page d'accueil : déconseillées parce qu'elles n'apportent pas d'information et détournent l'utilisateur du contenu véritable.</li><li> Pas d'animation pour les éléments essentiels (logo, titre, signature) : c'est souvent assimilé à de la pub.</li></ul> <p><strong> Conception graphique : </strong></p> <ul class="spip"><li> Utiliser avec modération les différentes polices de caractère et autres enrichissements typographiques. Au delà de 3 polices de caractère, la lisibilité peut s'en trouver perturbée. -* Rendre le texte lisible (contraste suffisant avec le fond de page) et taille raisonnable. Il convient de systématiquement indiquer la couleur du texte ET la couleur de fond.</li><li> Éviter le défilement horizontal avec une résolution 800x600 (cette résolution est encore largement utilisée). En 800x600 : les éléments les plus importants doivent être visibles d'entrée.</li></ul> <p><strong> Interface Utilisateurs : </strong></p> <ul class="spip"><li> Eviter l'abondance de menus déroulants, surtout s'ils sont peu explicites.</li></ul> <p><strong> Barre de titre : </strong></p> <ul class="spip"><li> Commencer le titre de la page par le terme le plus informatif (nom de l'entreprise ou de l'organisation).</li><li> Ne pas mettre le nom de domaine, sauf s'il fait partie du nom de l'entreprise.</li><li> Inclure un bref descriptif du site.</li><li> Limiter le nombre de mots à 7 ou 8 au total.</li></ul><h3 class="spip" id="outil_sommaire_1"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a> Standards du web </h3> <p>Les langages du web (HTML, XHTML, XML, CSS,...) reposent sur des normes et des Standards. Les organisations de normalisation, comme le W3C, créent un consensus à travers ces groupes et ces experts pour maintenir et développer des principes architecturaux cohérents. Utiliser une norme permet la compatibilité du langage, de bénéficier des dernières innovations mais aussi de s'assurer de la pérennité des documents dans le futur.</p> <p>La norme actuelle est le XHTML (version 2.0 en préparation), en attendant le XML. Le XHTML est l'évolution du HTML dans la mesure où il facilite la maintenance et la relecture du code grâce à sa rigidité.</p> <p>De ces normes découlent plusieurs avantages importants :</p> <ul class="spip"><li> Utiliser les dernières technologies standard vous assurent une site web fait pour durer, tout au long de l'évolution des langages et des navigateurs </li><li> La norme est universelle et votre site sera compatible avec tous les navigateurs respectant cette norme. Fini les codes propriétaires qui ne fonctionnent que sous certains navigateurs ou systèmes d'exploitation ! </li><li> Des coûts et du temps de maintenance réduits ; en effet, la rigueur du XHTML permettent une lecture facile du code et une mise à jour très simple du design et de la mise en forme, celle-ci étant séparée du contenu. </li><li> Un design accessible. L'accessibilité aux divers handicaps (visuels, moteurs, auditifs, ...) a été intégrée dans un nombre important de normes. Un site doit pouvoir être disponible pour des utilisateurs aux demandes toujours plus importantes (voir partie suivante) </li><li> Allègement du code et accélération des pages : le code xhtml strict est léger du fait de sa séparation en feuilles de styles. La feuille de style étant placée en mémoire sur l'ordinateur (cache), la vitesse d'affichage des pages s'en trouve grandement améliorée. </li></ul> <p>Le XHTML repose sur le HTML (il ne lui rajoute rien mais lui retire certaines balises et attributs) ni plus, ni moins. La grande différence du XHTML avec son jumeau HTML est que sa syntaxe ne souffre d'aucune souplesse.</p> <p>Pourquoi alors avoir créé le XHTML si c'est pareil à du HTML ? Pour habituer les webdesigners à la rigidité syntaxique du XML qui détrône peu à peu le HTML. Mais le XHTML n'est pas uniquement destiné à servir de transition, il reste un langage à part qui suit lui-aussi des évolutions.</p> <p><strong> Syntaxe </strong></p> <p>La grammaire du XHTML répond à certaines règles :</p> <ul class="spip"><li> Les noms des balises et des attributs sont en minuscules. On écrit : <code class='spip_code' dir='ltr'><p></code> et plus <code class='spip_code' dir='ltr'><P></code>. </li><li> Les valeurs des attributs sont entre simple ou doubles quotes. On écrit : <code class='spip_code' dir='ltr'><p class="center"></code> et plus <code class='spip_code' dir='ltr'><p class=center></code>. </li><li> Tout attribut doit impérativement avoir une valeur. On écrit : <code class='spip_code' dir='ltr'><input type="checkbox" checked= "checked"></code>et plus <code class='spip_code' dir='ltr'><input type="checkbox" checked></code>.. </li><li> Toute balise ouvrante doit être refermée. On écrit : <code class='spip_code' dir='ltr'><p></code>blabla<code class='spip_code' dir='ltr'></p></code> et plus <code class='spip_code' dir='ltr'><p></code>blabla. </li><li> Toute balises unique doit également être refermée. On écrit : <code class='spip_code' dir='ltr'><br /></code> et plus <code class='spip_code' dir='ltr'><br></code> ou encore : <code class='spip_code' dir='ltr'><hr class="top" /></code> et plus <code class='spip_code' dir='ltr'><hr class="top"></code>. </li><li> Les balises doivent être correctement imbriquées. On écrit : <code class='spip_code' dir='ltr'><p></code><code class='spip_code' dir='ltr'><i></code>blabla<code class='spip_code' dir='ltr'></i></code><code class='spip_code' dir='ltr'></p></code> et pas <code class='spip_code' dir='ltr'><p></code><code class='spip_code' dir='ltr'><i></code>blabla<code class='spip_code' dir='ltr'></p></code><code class='spip_code' dir='ltr'></i></code>.</li></ul> <p>Tout document qui se conforme strictement à ces règles sera dit bien formé syntaxiquement.</p> <p><strong> Mise en forme logique </strong></p> <p>Le XML étant un système de balisage du contenu, les mises en forme qu'il opère sont purement logiques. Ainsi avec le XML, on ne se préoccupe que de la structure logique du document. Pour la mise en forme (caractères, couleurs, marges...), on utilisera les feuilles de styles.</p> <p>Voici donc la principale ligne de conduite du XHTML : séparer le contenu de la mise en forme.</p> <p>De même, en XHTML, il est recommandé d'abandonner les balises de mise en forme physique comme <code class='spip_code' dir='ltr'><i></code> (italic - pour mettre en italique) au profit des balises de mise en forme logique comme <code class='spip_code' dir='ltr'><em></code> (emphase pour mettre en valeur) ; idem pour la balise <code class='spip_code' dir='ltr'><strong></code> utilisée au profit de la balise <code class='spip_code' dir='ltr'><b></code>.</p> <p><strong> La sémantique </strong></p> <p>La sémantique d'un objet, c'est son SENS, ce pour quoi il est FAIT. Pour des questions d'<strong>Accessibilité</strong> (aux handicaps par exemple) et de maintenance , il est recommandé d'utiliser chaque balise de façon sémantiquement correcte.</p> <p>Exemple imagé :</p> <p>Quand vous buvez une soupe, vous utilisez une cuillère à soupe. Après, si vous tombez à cours, vous pouvez toujours vous rattraper en utilisant une cuillère à café. Ca sera moins pratique mais vous arriverez quand même à boire votre soupe. Le problème, c'est qu'elle risque d'être froide avant que vous l'ayez terminée.</p> <p>Pour le (X)HTML, c'est pareil. Pour définir un titre, on utiilise la balise <code class='spip_code' dir='ltr'><h1></code>, mais on pourrait arriver au même résultat VISUEL avec un <code class='spip_code' dir='ltr'><p font-face=7></code><code class='spip_code' dir='ltr'><b></code>. Seulement, c'est plus long à écrire, c'est pas fait pour, lorsque vous aurez à changer tous vos titres, vous mettrez nettement plus de temps que si vous aviez simplement à modifier UNE feuille de style.</p> <p>Dans le respect des règles, il y a non seulement l'aspect syntaxique, déjà souvent rapelé par divers sites, mais également l'aspect sémantique, trop souvent oublié. Il est tout a fait possible de faire un site rempli de tableaux pour la mise en page qui passera sans problème au validateur.</p> <p>Or un tableau est conçu initialement pour afficher des données... tabulaires (un forum par exemple) et non pour faire la présentation de sa page.</p> <p><strong> Feuilles de styles </strong></p> <p>L'idéal est d'abandonner toute balise de mise en forme pour n'utiliser que les deux balises suivantes : span et div. Ainsi, fini les font, center et autres aberrations !</p> <p>Evidemment, ces deux balises devront être associées à des feuilles de style pour pouvoir mettre en forme les pages.</p> <p>Exemple : <code class='spip_code' dir='ltr'><div style="font-family:verdana,arial; font-weight:bold; color:red;"></code> ou mieux : <code class='spip_code' dir='ltr'><div class="erreur"></code>.</p> <p>Note : Les balises <code class='spip_code' dir='ltr'><div></code> sont des balises neutres servant de conteneurs, de blocs. Ils désignent une boite rectangulaire invisible.</p> <p>Généralement, la balise <code class='spip_code' dir='ltr'><div></code> est assimilée au concept de "calque" (surtout sur les éditeurs html comme Dreamweaver).</p> <p>Un calque est un <code class='spip_code' dir='ltr'><div></code> qui a été positionné avec la propriété "position : absolute", "position : relative" ou "position : fixed" .</p> <p>Mais rien ne nous oblige à imposer cette propriété de position, on peut souvent s'en passer en plaçant les div les uns par rapport aux autres grâce à diverses autres propriétés telles <strong>float</strong> ou <strong>margin</strong>.</p> <p><strong> Pourquoi le XHTML, pourquoi valider ? </strong></p> <p>Le HTML 2 date de 1994 et le 3.2 de 1996. Le langage évoluait surtout suivant l'impulsion des éditeurs de navigateurs (d'abord Netscape puis Microsoft). La guerre entre MS et NS a vraiment éclaté avec Netscape 3 en 1996, soit à peu près en même temps que la recommendation 3.2. Le HTML 4.0 est le résultat d'un véritable travail de mise en commun des acteurs du net dont MS et NS ont fait partie. Les principaux ajouts dans cette version sont des balises sémantiques (les <strong>span</strong> entre autres) et quelques balises moins heureuses (le <strong>iframe</strong>).</p> <p>Devant cette jungle et le danger réel pour que chacun parle son propre langage sur le Web, ce qui allait à l'encontre des principes d'Internet (libre accès aux données, interopérabilité), le W3C a sorti plusieurs normes sur le HTML (2.0, 3.2, 4.0...) qui se sont efforcées de coller le plus possibles aux fonctionnalités des navigateurs. Aujourd'hui la situation est inversée : les normes actuelles sont clairement en avance par rapport aux navigateurs dans plusieurs cas.</p> <p>Le XHTML n'apporte rien d'autre qu'une simplification du langage, par la suppression d'attributs et un formalisme plus strict. On ne peut donc pas dire qu'il soit tellement « en avance » vu qu'il se base sur le HTML 4 qui date de 1997 et que tous les navigateurs actuels supportent à 99%.</p> <p>Pour ce qui est du CSS, effectivement, il est encore en avance, bien que le CSS 1 soit compris par tous les navigateurs dignes de ce nom... même si certains navigateurs populaires (IE entre autres) buttent encore parfois sur certaines propriétés.</p> <p>Le XHTML 1.0 et le HTML 4.01 existent en fait en 2 versions :</p> <ul class="spip"><li> une version dite <strong>Transitional</strong>. Cette version sert juste à valider la syntaxe par étape. Elle se contente donc de vérifier que le balisage est correct sans traiter les attributs qui sont retirés par après lors du passage à la version strict. </li><li> une version dite <strong>Strict</strong>. Beaucoup de d'éléments ou d'attributs sont dépréciés (et donc interdits). Ce sont en particuliers les balises de mise en forme (<code class='spip_code' dir='ltr'><center></code>, <code class='spip_code' dir='ltr'><font></code>...). Le but est de pousser les développeurs à utiliser le CSS pour la présentation et de ne laisser dans le document HTML que le contenu.</li></ul> <p>Faire un site aux normes, revient à faire 2 choses :</p> <ul class="spip"><li> Déclarer quelle version du HTML ou du XHMTL on utilise. On doit pour cela déclarer au début du document HTML un DOCTYPE (cf Références ci-dessous) .</li><li> Se conformer à cette déclaration. On peut pour cela utiliser les Validateurs du W3C, en sachant que le Validateurs ne font pas tout : un document peut être valide sans pour autant être propre sémantiquement parlant.</li></ul> <p>Le validateur (X)HTML : <a href="http://validator.w3.org/" class='spip_out' rel='external'>http://validator.w3.org/</a></p> <p>Le validateur CSS : <a href="http://jigsaw.w3.org/css-validator/" class='spip_out' rel='external'>http://jigsaw.w3.org/css-validator/</a></p> <p>Bien entendu, rien n'oblige un développeur à se conformer à une norme, mais cela présente plusieurs avantages : assurance que le site ne sera pas dégradé dans le futur, affichage correct sur une plus large palette de navigateurs, meilleure accessibilité, etc.</p> <p>De plus, faire un site aux normes <strong>strict</strong> c'est faire un code plus propre et plus facilement évolutif (par rapport aux futures normes). L'inconvénient est qu'il est beaucoup plus difficile d'avoir un site qui passe parfaitement sur les anciens navigateurs et sur les nouveaux. (mais on peut aussi tourner la question autrement. Avec les anciennes « techniques », peut-on faire la même chose qu'avec les CSS ? La réponse est non. Les torts sont donc partagés.)</p> <h3 class="spip" id="outil_sommaire_2"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a> Normes d'Accessibilité </h3> <p>Chaque individu est différent et internet doit être adapté à tout le monde, quel que soit son handicap (physique, auditif, visuel, ...).</p> <p>C'est pour cela qu'il existe également des standards et des normes d'<strong>Accessibilité du Web</strong> (<strong>WCAG</strong>)</p> <p>Pour info : l'agence fédérale américaine pour le handicap considère que l'obligation d'accessibilité aux lieux publics s'applique aussi à tous les sites Web. Rappelons que la Section 508 oblige déjà les sites gouvernementaux (ainsi que ceux qui sont financés en partie par le gouvernement, dont les fournisseurs du gouvernement) à être accessible. Plusieurs gouvernement occidentaux songent à emboîter le pas, dont le gouvernement du Canada.</p> <p><strong> Un mot sur l'Accessibilité </strong></p> <p>Les handicaps affectant l'accès au web peuvent être regroupés en quatre catégories :</p> <ul class="spip"><li> Les déficiences visuelles. L'utilisateur peut être aveugle, avoir une vision très faible, ne pas reconnaître les couleurs ou tout simplement porter des verres correcteurs. Les objets graphiques qui n'ont pas d'intitulé ou de descriptif, des caractères trop petits ou des couleurs peu contrastées sont autant de barrières pour accéder à l'information. </li><li> Les déficiences auditives. Le manque d'explications ou de transcription des éléments sonores peut priver les personnes malentendantes de certaines informations.</li><li> Les handicaps physiques. Certains utilisateurs peuvent avoir du mal à manipuler le clavier ou la souris. S'il existe des périphériques optiques ou manuels mieux adaptés, il n'en demeure pas moins que des caractères trop petits, notamment au niveau des liens, ne permettront pas à certains utilisateurs de pointer ou de sélectionner convenablement, ce qui les privera d'un accès complet au site. Il en est de même pour certains scripts ou menu qui exigent la souris et qui sont inutilisables pour cette catégorie de personnes. </li><li> Les déficiences mentales ou neurologiques. Le manque de repères clairs et précis ainsi qu'un système de navigation non intuitif peuvent troubler de nombreux utilisateurs. L'utilisation excessive de certains jargons dans des sites grand public peut fortement réduire l'intérêt ou la compréhension. L'abus d'effets visuels de type clignotement ou d'animations dont la fréquence est trop élevée peut avoir de sérieuses conséquences sur des sujets sensibles ou épileptiques.</li></ul> <p>On estime que de 10 à 20% des individus présentent l'unfe ou l'autre de ces déficiences dans la plupart des pays dits développés. Certaines de ces déficiences ne sont pas un obstacle pour accéder au web, mais n'oublions pas que nous serons tous plus ou moins affectés un jour ou l'autre par le vieillissement.</p> <p>Le W3C a donc lancé une Initiative pour l'<strong>Accessibilité du Web</strong> (<strong>WAI</strong>) en 1997 qui se donne pour objectif de s'assurer que les nouvelles technologies prennent en charge les questions d'accessibilité.</p> <p>C'est dans cette optique qu'a été créé le <strong>WCAG</strong> (<i>Web Content Authoring Guidelines</i>).</p> <p>Il s'agit de 14 directives qui décrivent les principes généraux du concept d'Accessibilité.</p> <p>Des points spécifiques sont proposés pour chacune des directives et donnent des applications pratiques pour chaque principe.</p> <p>Ces points de contrôle ont trois niveaux de priorité :</p> <ul class="spip"><li> niveau 1 : le point DOIT être satisfait, </li><li> niveau 2 : le point DEVRAIT être satisfait, </li><li> niveau 3 : le point POURRAIT être satisfait.</li></ul> <p>La conformité à ces trois niveaux est codée de la manière suivante : <strong>A</strong> lorsqu'un site répond à toutes les exigences d'un point de contrôle <strong>AA</strong> lorsque le site répond à deux points de contrôle. <strong>AAA</strong> lorsque le site répond à toutes les exigences.</p> <p>Il existe sur le net plusieurs outils de validation :</p> <ul class="spip"><li> <a href="http://bobby.watchfire.com/" class='spip_out' rel='external'>Bobby</a> </li><li> <a href="http://www.wave.webaim.org/" class='spip_out' rel='external'>Wave 3</a> </li><li> <a href="http://www.contentquality.com/Default.asp" class='spip_out' rel='external'>Cinthia's Report</a> </li><li> <a href="http://www.acces-pour-tous.net/" class='spip_out' rel='external'>Acces-pour-tous</a> (fr)</li></ul> <p>Chacun de ces sites web propose des outils de validation et de correction des erreurs.</p> <p>À l'heure actuelle la plupart des sites internet, même professionnels ou soi-disant « Grand Public », ne sont pas du tout accessibles aux handicapés.</p> <p>C'est pourtant la moindre des choses à faire, surtout lorsque ça ne nécessite pas de gros travail pour le mettre en oeuvre. Dans la vie « réelle », les choses bougent petit à petit pour les handicapés : places de parking, accès reservés, toilettes, accès spéciaux aux lieux publics... La prise en compte du handicap est devenu une évidence dans tous les cahiers de charges des travaux publics ou en architecture.</p> <p>Pourquoi le web devrait-il laisser cette population à l'écart ? La proportion de sites institutionnels ou gouvernementaux qui ne respectent ni les <strong>Standards</strong> ni l'<strong>Accessibilité</strong> est considérable (<a href="http://jerotito.org/validations/" class='spip_out' rel='external'>http://jerotito.org/validations/</a>).</p> <p>En annexe : liste des points de contrôle pour l'Accessibilité</p> <ul class="spip"><li> <a href="http://pompage.net/pompe/standards/" class='spip_out' rel='external'>Pourquoi les Standards sont-ils si importants ?</a></li></ul><h3 class="spip" id="outil_sommaire_3"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a> Références : </h3><ul class="spip"><li> <a href="http://www.developpez.com/" class='spip_out' rel='external'>developpez.com</a> </li><li> <a href="http://www.hardware.fr/" class='spip_out' rel='external'>Hardware.fr</a></li><li> <strong>L'art de la page d'accueil</strong> de Jakob Nielsen et Marie Tahir, éditions Eyrolles. </li><li> <strong>XHTML</strong> de Ann Navarro, aux éditions <i>solutions.net</i> </li></ul> <p>Liste des points de contrôle pour l'Accessibilité :</p> <ul class="spip"><li> <a href="http://www.la-grange.net/w3c/wcag1/full-checklist.html" class='spip_out' rel='external'>http://www.la-grange.net/w3c/wcag1/full-checklist.html</a> </li></ul> <p>Le doctype :</p> <ul class="spip"><li> <a href="http://pompage.net/pompe/doctype/" class='spip_out' rel='external'>http://pompage.net/pompe/doctype/</a></li></ul> <p><strong>Pour une liste complète des points à vérifier lors de production d'un site web, voir :</strong></p> <ul class="spip"><li> <a href="http://www.elanceur.org/FractalCity/Articles/Check-ListStandardsduWeb.html" class='spip_out' rel='external'>Check-list</a></li><li> <a href="http://www.opquast.com/bonnes-pratiques/?niveau=3&syndication=on&newsletter=on&ecommerce=on" class='spip_out' rel='external'>Liste des bonnes pratiques</a></li></ul></div> <div class="hyperlien">Source : <a href="http://www.alsacreations.com/articles/principes/" class="spip_out">Faire un site web de qualité : Ergonomie, Compatibilité, Accessibilité</a></div> </article> <article> <h1>Optimisation et performance des pages web</h1> <p>André Vincent — 2004-08-10T23:26:05Z</p> <div class='rss_chapo'><p>Conseils pour optimiser vos pages web, en augmenter la vitesse de téléchargement et en améliorer les performances.</p></div> <div class='rss_texte'><div class="cs_sommaire cs_sommaire_avec_fond" id="outil_sommaire"><div class="cs_sommaire_inner"><div class="cs_sommaire_titre_avec_fond"> Sommaire </div><div class="cs_sommaire_corps"><ul><li><a title="Un analyseur de performance" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_0">Un analyseur de performance</a></li><li><a title="Les facteurs affectant les performances d'une page web" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire_1">Les facteurs affectant les performances d'une (...)</a></li></ul></div></div></div><h3 class="spip" id="outil_sommaire_0"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a>Un analyseur de performance</h3> <p>Pour vérifier la perfomance de vos pages web :</p> <ul class="spip"><li> <a href="http://www.webpageanalyzer.com/" class='spip_out' rel='external'>Web Page Analyser</a></li><li> <a href="http://freewebsubmission.com/web-page-analyzer.html" class='spip_out' rel='external'>Web Paga Analysis</a></li></ul> <p>Disponible aussi directement par le menu de <a href="http://www.chrispederick.com/work/firefox/webdeveloper/" class='spip_out' rel='external'>Web Developper</a> (une extension pour <i>Mozilla</i> et <i>Firefox</i>) à <strong>Informations -> View Speed Report</strong></p> <h3 class="spip" id="outil_sommaire_1"><a title="Sommaire" href="http://edu.ca.edu/spip.php?page=backend&id_rubrique=19#outil_sommaire" class="sommaire_ancre"> </a>Les facteurs affectant les performances d'une page web </h3> <p><strong>Le nombre total des OBJETS à télécharger</strong></p> <p>Pour qu'une page web puisse s'afficher correctement, en plus du document HTML lui-même, le serveur web doit aussi envoyer les autres fichiers requis pour construire la page (fichiers CSS, scripts, images, médias, etc...). Chaque fichier constitue un objet qui exige une requête HTTP du client au serveur et réduit d'autant la vitesse d'affichage d'une page. La réduction du nombre de requêtes HTTP au serveur web est un élément crucial dans l'optimisation des performances d'une page web. Bien que la plupart des logiciels de navigation soient aujourd'hui en mesure d'envoyer plusieurs requêtes simultanément à un serveur web, ces requêtes sont en général réglées entre 4 et 8.</p> <ul class="spip"><li> Excellent : 5 et moins.</li><li> Bon : 9 et moins.</li><li> À optimiser : plus de 9.</li></ul> <p><strong>Le nombre total des IMAGES à télécharger</strong></p> <p>Les nombre d'images (et leur poid) contituent souvent le principal facteur de dégradation des performances d'une page web. Particulièrement la page d'accueil. Parce que la plupart des logiciels de navigation placent les images recues en cache locale, les autres pages d'un même site utilisant ces mêmes images ne feront pas de requête supplémentaire au site et verront leur performance améliorée.</p> <p>La mise en page par tableaux exigeant un découpage excessif des images en petits morceaux en est souvent la cause. Le positionnement des images en arrière fond (background-image) peut souvent résoudre ce problème (en fusionnant les multiples petites images en images plus grandes). Les images rétroactives (<i>rollovers</i>) peuvent aussi avantageusement être remplacées par le même effet à l'aide de règles CSS (voir : <a href="http://edu.ca.edu/css-menus-et-navigation" class='spip_in'>CSS - Menus et navigation</a>).</p> <ul class="spip"><li> Excellent : 4 et moins</li><li> Bon : 8 et moins</li><li> À optimiser : plus de 8</li></ul> <p>AUTRES FACTEURS (à venir)</p> <p><strong>Le nombre total des fichiers CSS à télécharger</strong></p> <p><strong>Le nombre total des fichiers MULTIMÉDIA à télécharger</strong></p> <p><strong>Le nombre total des fichiers de SCRIPTS à télécharger</strong></p> <p><strong>Le poid total des OBJETS à télécharger</strong></p> <p><strong>Le poid total des IMAGES à télécharger</strong></p> <p><strong>Le poid total des fichiers MULTIMÉDIA à télécharger</strong></p> <p><strong>Le poid total des fichiers CSS à télécharger</strong></p> <p><strong>Le poid total des fichiers de SCRIPTS à télécharger</strong></p> <p>Exemple pour <a href="http://www.websiteoptimization.com/services/analyze/wso.php?url=http://edu.ca.edu/article235.html" class='spip_out' rel='external'>la présente page</a></p> <p>Exemple pour <a href="http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.gouv.qc.ca/" class='spip_out' rel='external'>le portail du gouvernement du Québec</a></p></div> <div class="hyperlien">Source : <a href="http://www.webpageanalyzer.com" class="spip_out">Web Page Analyser</a></div> </article> <article> <h1>Les règles du XHTML</h1> <p>André Vincent — 2004-01-10T05:00:00Z</p> <div class='rss_chapo'><p>Voici les <strong>règles</strong> particulières du XHTML qui le distingue du HTML.</p></div> <div class='rss_texte'><ul class="spip"><li> Voir aussi : <a href="http://www.openweb.eu.org/articles/html_au_xhtml" class='spip_out' rel='external'>Passer du HTML au XHTML</a></li></ul> <p><strong>1. Ouvrir avec un DOCTYPE et un espace de nommage (<i>namespace</i>).</strong></p> <p>Une des particularités des langages de la famille du XML est de pouvoir définir ses propres balises par l'intermédiaire d'un DTD (<i>Document Type Declaration</i>). La référence à un DTD est indispensable car il contient la liste et la définition des balises utilisées dans le document.</p> <p>Il y a pour l'instant [début 2004], un seul type de document XHTML 1.1 et 3 types de document XHTML 1.0 :</p> <ul class="spip"><li> Strict </li><li> Transitional </li><li> Frameset </li></ul> <p>Tout document document XHTML devra donc commencer avec une balise qui indique à l'agent utilisateur (le logiciel de navigation) comment interpréter les autres balises du document. Voici un exemple de déclaration de DOCTYPE.</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code></div> <p>Voir d'autres type de DTDs : <a href="http://edu.ca.edu/la-declaration-du-type-de-document" class='spip_in'>La déclaration du type de document</a></p> <p>La déclaration du type de document XHTML 1.0 doit être suivie par la déclaration de l'espace de nommage suivant, inséré dans l'élément <strong>html</strong> :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"></code></div> <p>Pour le XHTML 1.1, on utilisera plutôt la déclaration suivante :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"></code></div> <p>Le DTD se place au début de tout document XHTML. La déclaration du DOCTYPE peut parfois être précédée du prologue XML inséré en tout début du document :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code><?xml version="1.0" encoding="iso-8859-1"?></code></div> <p>Ce prologue XML est toutefois optionnel et même déconseillé pour l'instant, car un bug de IE-6/Win le fait basculer en mode <strong>Quirk</strong>, en plus d'entraîner certains autres problèmes dans des navigateurs plus anciens.</p> <p>Un des rôles du prologue XML est de spécifier le type d'encodage des caractères qui est utilisé à l'intérieur du document. C'est l'encodage qui est spécifié lors de l'enregistrement du document.</p> <p>Si le prologue est omis, on peut tout aussi bien spécifier le type d'encodage en utilisant, à cet effet, un élément <strong>meta</strong> :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /></code></div> <p><i>ou, pour pour un document utilisant des caractères autres qu'occidentaux</i> :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /></code></div> <p><strong>2. Le document DOIT comporter au minimum les éléments de structure html, head et body.</strong></p> <p>De plus, l'élément de titre <strong>title</strong> DOIT être présent dans l'élément <strong>head</strong>.</p> <p>Le XML est très rigoureux quant à la structure du document. La structure de base d'un document XHTML est :</p> <div style='text-align: left;' class='spip_code' dir='ltr'><code><!DOCTYPE ...><br /> <html ... ><br /> <head><br /> ... <br /> <title> ... ... ...

3. Écrire les balises en bas de case (minuscules)

XML étant sensible aux majuscules/minuscules (case sensitive], toutes les balises du XHTML doivent être écrites en minuscules, tant pour les éléments que les attributs ; par contre, les valeurs, elles ne sont pas obligatoirement assujetties à cette règle.

XHTML	HTML
`Bonjour`	`Bonjour`
`Le titre`	`Le titre`

4. La valeur des attributs doit toujours être écrites entre des guillemets (et ce même pour des valeurs numériques).

XHTML HTML




Test
Test

 5. Les balises d'images IMG doivent TOUJOURS comporter l'attribut alt pour le texte alternatif.

 XHTML  HTML 





 6. A toute balise d'ouverture doit correspondre une balise de fermeture.
 Fini les balises 
 et 
 orphelines...

 XHTML  HTML 


Bonjour

 
 1

 2

 
Bonjour
 

 1
 
2
 

 7. Les balises uniques doivent également être refermées.

 XHTML  HTML 




 

  


 

 

 L'utilisation d'une seconde balise fermante n'est pas en théorie erronée soit par exemple 

 mais les navigateurs des anciennes générations pourraient ne pas l'interpréter correctement, c'est pourquoi 
 [avec un espace avant la barre oblique /] est conseillé. Il en est de même pour les balises input hr meta et link :

 
 ...
 8. Les balises doivent être correctement imbriquées.

 XHTML  HTML 


gras et italique
gras et italique

 La règle générale est la suivante : 
 la dernière balise ouverte doit être la première refermée .
 9. On ne doit pas utiliser de notations compactes ou raccourcies dans les attributs.

 XHTML  HTML 



  
 

  
 

 Voir la liste complète des notations compactes ou raccourcies
 10. On utilisera l'attribut ID plutôt que l'attribut NAME pour identifier un élément comme A, APPLET, FRAME, IFRAME, IMG, et MAP.

 XHTML  HTML 


Ancre
Ancre

 Toutefois, on notera que pour garder une compatibilité avec les navigateurs des générations précédentes, on peut garder à la fois name et id avec les mêmes attributs comme ceci
Ancre
 Mais cette méthode n'est valide que dans un document utilisant un DTD XHTML 1.0 "Transitional".


La déclaration du type de document
André Vincent — 2004-01-09T05:00:00Z
La liste des principaux DTDs (Document Type Declaration) en usage actuellement. Pour des explications plus détaillées, voir : Les DTD HTML4.01 et XHTML1.0 : comment choisir ?
 Sommaire 
Pourquoi un DOCTYPE ?
Les DTDs les plus courants
Quel DOCTYPE choisir ?
 Pourquoi un DOCTYPE ?
 Selon les spécifications du HTML et du XHTML, un DOCTYPE (contraction pour Document Type Declaration) informe l'agent utilisateur (le navigateur) de la version de HTML ou XHTML que le document utilise, et doit apparaitre en première position dans chaque page web. Le DOCTYPE est une composante essentielle pour les pages conformes aux spécifications : ni le balisage, ni les CSS ne passeront une validation sans DOCTYPE.
 Les DOCTYPEs sont essentiels pour que les documents web s'affichent et fonctionnent correctement dans des navigateurs conformes aux standards, comme Mozilla, IE5/Mac, IE6/Win, Safari, Firefox, Camino, Omniweb, etc.
 Un DOCTYPE récent qui inclut une URI complète (une adresse web complète) commande à ces navigateurs d'afficher votre page en utilisant le mode conforme (standard compliant mode), traitant ainsi le document (X)HTML, CSS, et DOM (Document Object Model) d'une façon prévisible.
 Utiliser un DOCTYPE incomplet ou obsolète - voire aucun DOCTYPE - déclenche dans ces navigateurs le mode Quirks (que l'on pourrait traduire par : « imprévisible ») qui va considérer le balisage comme invalide et/ou démodé, conforme seulement aux interprétation inconsistantes de l'industrie de la fin des années 90.
 Dans ce mode, le navigateur va essayer de traiter la page en mode de rétro-compatibilité, affichant vos CSS comme IE4 aurait pu le faire, et retournant à un DOM propriétaire et spécifique au navigateur (IE retourne au DOM IE ; Mozilla et Netscape 6 retournent vers Dieu sait quoi) [1].
 Parfois, c'est ce qui est désiré ; mais la plupart du temps, ce n'est pas souhaitable. Mais c'est souvent ce que nous obtiendrons, à cause de la prépondérance des informations erronées ou incomplètes sur le DOCTYPE. De là l'importance d'utiliser le DTD le plus approprié.
 Les DTDs les plus courants
 HTML 4.01 - Strict, Transitional, Frameset :
 
 
 
 
 
  XHTML 1.0 - Strict, Transitional, Frameset :
 
 
 
 
 
 XHTML 1.1 - DTD :
 
 Un exemple de gabarit minimal
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p>... Votre contenu ici ...</p> </body> </html> Pour une liste complète des DTD disponibles, voir :
 List of valid DTDs you can use in your document.
 Quel DOCTYPE choisir ?
 Utilisez de préférence XHTML1.0 Strict : c'est a priori le plus adapté à de nombreux besoins et c'est la plus facile à utiliser et à apprendre.
 Si vous utilisez des iframe ou un attribut target, utilisez XHTML1.0 transitional.
 Si vous voulez utiliser les frameset et frame : utilisez la DTD XHTML1.0 frameset.
 Conclusion
 En guise de conclusion [2], soulignons quatre constats sur lesquels les malentendus sont fréquents :
 XHTML1.0 ne sépare pas plus le contenu et la présentation qu'HTML4.01 : dans les deux cas, c'est en fait le choix entre tansitional et strict qui fait la différence, ce dernier exigeant une nette séparation du contenu et de la présentation ;
 Aucune de ces DTD n'apporte plus d'accessibilité a priori : XHTML1.0 n'est pas plus accessible qu'HTML4.01. C'est l'usage que vous en ferez qui fera la différence ;
 XHTML1.0 n'apporte aucun gain « sémantique » par rapport à HTML4.01, dont il reprend les éléments et la quasi-totalité des attributs. Là encore, ce sont les bonnes pratiques que vous adopterez qui fera la différence.
 XHTML1.0 n'est pas plus difficile à apprendre qu'HTML4.01, au contraire : la syntaxe rigoureuse limite les confusions et les risques d'erreurs.
Source : Les DTD HTML4.01 et XHTML1.0 : comment choisir ?

 [1] Le navigateur Opera ne joue pas suivant ces règles ; il essaie toujours d'afficher les pages en mode conforme aux normes. D'un autre coté, il n'offre pas encore un support solide du DOM W3C. Mais c'est en passe de changer.
 [2] Ces conclusions sont tirées de l'excellent livre de Raphaël Goetter CSS2 Pratique du design web également webmestre du site Alsacréations consacré au XHTML, CSS et Accessibilité