Cours sur XHTML 1.0 et ce qu'il implique !

Le contexte qui entoure XHTML
Un langage de balisage ?
Avant XHTML
Principes indissociables
Pourquoi passer à XHTML
Penser XHTML
Les technologies accompagnant XHTML
Un document XHTML
Entête
Corps
Les types de données
Les ressources indispensables
Ressources francophones
Ressources anglophones
Les outils de validation
La trousse à outils du webmestre
A propos
Remerciements
Réutilisations

Le contexte qui entoure XHTML

Un langage naît toujours dans un contexte particulier et il est généralement l'expression d'un besoin qui s'est fait ressentir à un moment donné. XHTML n'est pas une exception et j'ajouterai même que l'on ne peut pas comprendre l'intêret de ce langage de balisage sans connaître les enjeux de son existence.

Un langage de balisage

Avant d'aller plus loin, vous devez comprende une notion simple mais souvent oubliée, même par les initiés. XHTML est un langage de balisage. Cela signifie que la structure d'un document XHTML est créée à l'aide de balises. Ces balises, aussi appelées éléments, délimitent une fraction du document XHTML et se présentent comme suit :

 <html xmlns="http://www.w3.org/1999/xhtml">(...)</html>

On peut remarquer dans cet exemple qu'une balise peut contenir trois types d'informations :

  • Un nom de balise : 'html'.
  • Une liste d'attributs : La liste des attributs ne contient qu'une entrée, il s'agit de l'attribut 'xmlns' dont la valeur est 'http://www.w3.org/1999/xhtml'.
  • Une chaîne de caractèrees qui peut être de deux types : CDATA ou PCDATA qui vaut ici '(...)'. Chaque élément accepte l'un de ces deux types de données. La différence est que la première ne contient pas d'autre balises (son contenu ne sera donc pas interprété par le parseur XML), la seconde, au contraire en contient (et sera donc parsée). Pour des raisons pratiques, nous appelleront simplement ces chaînes de caratères le contenu des balises.

Comme vous pouvez le constater, un élément est ouvert par une balise de ce type : <html> (balise ouvrante) et il est fermé par une balise de ce type </html> (balise fermante) qui, ensemble, délimitent le contenu. Le nom de l'élément est dans chacune de ces balises, par contre, seule la balise ouvrante accepte des attributs. Il arrive parfois qu'une balise soit ouvrante et fermante à la fois, dans ce cas, elle se note comme suit : <balise />. Le contenu est donc nul pour ce genre de balise.

Dans l'exemple, ci-dessous, 'element1' est un élément parent de 'element2'. Autrement dit 'element2' est un élément enfant de 'element1'.

<element1>(...)<element2>(...)</element2>
(...)
</element1>

Lorsqu'une balise contient d'autres balises, des règles simples s'appliquent. Tout d'abord, un élément peut avoir plusieurs enfants, mais ne peut avoir qu'un parent direct. De plus, un élément ouvert à l'intérieur d'un autre doit obligatoirement être refermé avant la fermeture de son élément parent. Autrement dit, les balises ne doivent pas être imbriquées comme ceci :

<element1><element2></element1></element2> 

Enfin, il existe une hiérarchie qui oblige certaines balises à contenir obligatoirement une balise d'un type donné. Ainsi, la balise <ul> doit obligatoirement contenir des balises <li> et uniquement celles-cis.

Cela est très simple malgré un abord peu évident. Il faut absolument savoir ces bases pour bien comprendre la suite de ce tutoriel et pour bien utiliser XHTML.

Avant XHTML

Avant XHTML, le web existait déjà . On utilisait donc un autre langage pour créer des sites Internet. Ce langage est HTML. Il est même encore utilisé par de nombreux webmestres.

HTML est aussi un langage de balisage qui a été très utile pour le développement d'Internet. Pourquoi le remplacer ? Car il a vite montré ses limites. En effet, à une époque où Internet évoluait du jour au lendemain, les balises HTML normalisées par le W3C ont été détournées par les éditeurs des navigateurs les plus connus à l'époque (Netscape et Internet Explorer). Ainsi, chaque navigateur avait ses propres balises propriétaires et un site qui fonctionnait sur Netscape ne fonctionnait pas forcément avec Internet Explorer et vice-versa.

La vocation du web de devenir un espace de libre échange de l'information était donc en péril car pour qu'il se réalise, encore fallait-il échanger des informations de même nature pour bien se comprendre. En fait, ce problème a été résolu par de nouvelles versions d'HTML. Cependant, les mauvaises habitudes se sont transmises tel un virus de la pire espèce (que j'ai moi-même contracté) et rares sont les développeurs qui ont créé des sites conformes aux standards à cette époque. De plus, la tendance permissive du HTML a plutôt encouragé les mauvaises habitudes des webmestres.

Une question légitime vous vient sans doute à l'esprit. Pourquoi XHTML a-t-il réussi là où tous ont échoué ?

Pourquoi passer à XHTML

Le XHTML est un langage hybride entre le XML et le HTML. Il ne s'agit, en fait, que d'une reformulation de HTML pour le rendre compatible avec XML. Jusqu'ici, rien de plus que chez le HTML...

C'est en fait, la rigueur du langage XML, dont a hérité le XHTML qui le rend si attractif. En effet, des notions de valorisation sémantique, de dissociation de la forme et du fond et d'accessibilité existaient déjà avec le HTML. XML a apporté de la structure à HTML ce qui permet de le rendre beaucoup plus facile à analyser pour les ordinateurs. XHTML est ce que tout langage devrait être : structuré, rigoureux et sensible à la casse.

Mais la rigeur du langage n'induit pas qu'il est immuable. On peut personnaliser le XHTML et même inventer ses propres balises.

Quelle différence avec le HTML me direz-vous ! Eh bien, toujours la même ! La rigeur ! En effet, cette création de nouvelle balise est permise, mais selon une méthode standardisée (les DTD) et héritée de XML. Bref, le compromis parfait.

Les principes indissociables

Le passage à XHTML ne serait rien si plusieurs principes novateurs qui ont révolutionné le développement de sites Internet et acceléré leur mise aux normes n'étaient pas respectés.

La dissociation de la forme et du fond du document.

Vers les années 90 on a vu apparaître des logiciels de création de site Internet (Front Page, Dreamweaver etc...). Ces éditeurs ont vite évolué vers une version WYSIWYG ce qui signifie, ce que vous voyez est ce que vous obtiendrez. Ces versions permettent de créer un site Internet visuellement.

Le problème de ce mode de création est qu'il ne permet pas de faire la différence entre le contenu à proprement parler et la forme, l'apparence du site. Tant et si bien que les textes, l'essentiel de l'information, s'en trouvaient désordonnés, voire incompréhensibles pour un moteur de recherche. De plus, ces éditeurs ont eu pour conséquence de dévaloriser le métier de webmaster, laissant croire que n'importe qui, sans connaissances du HTML, pouvait créer un site Internet.

Même si cela nécessite un temps d'adaptation, il est relativement aisé d'obtenir le même affichage en créant une page en XHTML qu'en HTML classique avec un éditeur WYSIWYG.

Les standards proposent de créer l'apparence d'un document indépendamment du contenu. Dès lors, les templates ne sont plus vraiment nécessaires et on peut proposer des designs alternatifs complètement différents pour un même site sans avoir à modifier la source XHTML du document.

C'est cela la dissociation de la forme et du fond. On considère, et à raison, que le contenu ne doit pas dépendre de la forme ce qui se traduit par une meilleure structure des données.

La valorisation sémantique du contenu.

Cette dissociation s'est aussi accompagnée de la suppression de certaines balises de mise en forme qui ne donnaient pas de sens sémantique au contenu. A ces dernières, on a préféré les balises qui permettent de donner un vrai sens aux contenus et de les valoriser au maximum.

Ainsi, les moteurs de recherche, tout comme les visiteurs ont beaucoup moins de problèmes de compréhension des documents mis en ligne.

L'accessibilité des sites Internet.

Pour nombre de développeurs, l'accessibilité est un terme assez abstrait, mais pour nombre d'utilisateurs, c'est, malheureusement, une réalité de tous les jours. Il faut savoir que les personnes non-voyantes peuvent utiliser des navigateurs vocaux et que la moindre incohérence dans votre document peut leur faire perdre un temps précieux de compréhension.

La tendance à façonner les pages d'une manière visuelle avec les éditeurs WYSIWYG a été une entrave totale à l'accessibilité d'Internet aux personnes non-voyantes. En effet, comment quelqu'un qui n'a jamais vu peut se faire une représentation visuelle d'un site Internet afin de comprendre son contenu ?

Il est bien plus logique de créer une page Internet, selon son contenu, puis, de l'agrémenter d'effets de style de façon indépendante. C'est le rôle que jouent les CSS avec XHTML. Ainsi, en retirant la feuille de style, on réduit le document à sa plus simple expression tout en le gardant compréhensible, ce qui n'est pas le cas d'une page archaïque qui lorsque que l'on retire certaines balises de présentation se retrouve désordonnée, incohérente et dénuée de sens. C'est vers cette notion d'accessibilité que nous vous orienterons grâce à ce tutoriel.

Penser XHTML

Pour entreprendre la rédaction d'un document XHTML, la première chose à faire, c'est se mettre en condition. Dans le cas contraire, vous seriez obligé de vous y reprendre à plusieurs fois.

Avant de parler de design, pensez au contenu. Que doit contenir mon document ? De quels types de données s'agit t-il ? Qu'est-ce qui est le plus important, qu'est-ce qui l'est moins ? Les réponses vous viendront naturellement et les balises XHTML répondront à vos besoins. Tant que votre document n'est pas terminé, ne pensez pas au design, ce n'est qu'une fois votre code définitivement fixé que vous pourrez vous pencher sur son allure graphique.

Les normes liées à XHTML

Même si elles ne sont pas l'objet de ce tutoriel, il fallait dire quelques mots au sujet des technologies qui accompagnent XHTML. Parmi elles, les feuilles de styles CSS qui permettent de positionner les différents éléments d'un site Internet et de les mettre en forme. Les CSS jouent un rôle prédominant dans la dissociation de la forme et du contenu.

On peut aussi citer le DOM qui signifie modèle objet de document. C'est une interface programmatique (API) qui permet de manipuler les différents éléments d'une page web grâce à des objets, propriétés et méthodes standardisés. Couplé à ECMAScript (la version standardisée de Javascript), il permet de gérer tout l'aspect évènementiel d'un document.

D'autres standards pointent leur nez tous les jours, mais on peut aussi citer les flux RSS et le XML.

Un document XHTML

Un document XHTML doit tout d'abord être déclaré en tant que tel, pour cela, il existe une formule toute faite qu'il suffit de copier/coller :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ensuite, il suffit d'ouvrir la première balise, la balise 'html'. Elle ne peut contenir que deux types de balises, la balise 'head' appelée entête du document et la balise 'body' appellée corps du document. Comme leurs noms l'indiquent, l'entête contient toutes les données relatives au document comme, par exemple, le titre (élément 'title') et le corps contient le contenu de la page à proprement parler, ce qui sera visible par le visiteur du site.

Pour suivre la logique d'un document XHTML, je vous présenterai l'entête du document en premier lieu, puis le corps. Je définirai les types de données qu'il peuvent contenir pour ensuite présenter les balises appropriées à ces données...

L'entête du document contient toutes les données nécessaires à son affichage dans le navigateur ainsi qu'à son indexation par les moteurs de recherche. Pour la créer on utilise la balise <head>.

Le titre

Le titre s'affiche dans le navigateur. Il permet, notamment, aux visiteurs de pouvoir passer d'une fenêtre à l'autre de son navigateur tout en sachant à quels documents elles correspondent.

C'est pour cela que votre titre doit être évocateur du contenu du document. Par exemple, pour ce tutoriel, le titre rappelle que vous êtes sur le site d'Elitwork et plus précisémment, sur la page consacrée au tutoriel XHTML. Un titre s'écrit avec la balise :

<title>Elitwork : Tutoriel XHTML</title>

Les références externes

Elles sont utilisées afin d'indiquer qu'un autre document est lié au document en cours. Cela peut être un script, une feuille de style ou encore un icône.

Pour faire référence à un script, il faut utiliser la balise <script>. Les scripts sont principalement écris en javascript et permettent de rendre certains éléments de la page dynamiques, voir transformer les pages html en de véritables programmes. Il est possible de les insérer dans l'entête du document, mais il est conseillé, pour les scripts les plus longs, de les ajouter à la fin de la balise <body> du document.

La balise <link> permet de faire référence à de nombreux types de documents, mais les principaux sont les feuilles de style et le favicon un icône qui s'affiche lorsqu'on le met dans les favoris de son navigateur. L'exemple suivant crée un lien vers deux feuilles de style, une pour l'affichage dans le navigateur et une pour l'impression éventuelle du document:

<link rel="stylesheet" type="text/css" href="http://server.elitwork.com/css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://server.elitwork.com/css/print.css" media="print" />

Cet exemple permet de proposer une icône pour les favoris du navigateur valide XHTML.

<link rel="icon" type="image/png" href="image/favicon.png" />
Les méta-données

Il s'agit de données qui permettent d'indexer le document de façon rapide sans le lire entièrement. Cela se fait grâce à la balise <meta> :

<meta name="description" content="Des explications simples pour les débutants, des précisions pour les confirmés, des exemples et enfin une source en XHTML conforme aux standards." />

Dans l'exemple ci-dessus, je donne les mots-clés sur lesquels je souhaite être référencé pour une recherche. L'attribut 'name' est le nom de la méta-donnée et 'content' son contenu.

Malheureusement, c'est encore l'anarchie quand à la nomenclature de ces méta-données. Il existe des standards, mais ils ne sont pas forcément reconnus. A vous de vous faire votre propre idée sur ce domaine. Personellement, je n'utilise que 'keywords' et 'description' car ils sont utilisés par de nombreux annuaires (qui préremplissent les formulaires de soumission) et certains moteurs qui affichent la description.

Le corps du document

Il s'agit de la partie visible du document XHTML. Pour des raisons de simplicité, je l'étendrai à un document en général. Il est introduit par la balise <body>.

Un document en XHTML fait généralement partie d'un tout que l'on appelle communément site Internet. De ce fait, certains aspects le différencient d'un document unique dans lequel seul le contenu est pris en compte.

En général, le corps d'un document XHTML est composé de quatre parties différentes. Une entête (à ne pas confondre avec l'entête réservée au navigateur), un menu, un contenu et un pied de page.

L'entête

Celle-ci est destinée à conserver une certaine continuité du site Internet, aussi bien visuellement, que structurellement. Elle est commune à tous les documents du site.

Le menu

Un site Internet est un ensemble de documents. Le menu les rassemble et permet d'accèder à chacun d'entre eux. Un document sans menu ne peut pas faire partie d'un site.

Le contenu

C'est le centre du document. Le contenu donne au document son interêt pour le visiteur. Il fait que voir ce document en particulier, à l'intérieur du site, a un interêt. C'est pourquoi, je vous conseille d'éviter les pages ne contenant qu'une phrase banale sans interêt réèl.

Le pied de page

Il joue un rôle similaire à l'entête, conservant l'unicité du site. Il fait souvent office de menu d'information, un menu que l'on ne visite qu'une seule fois et qui contient des informations d'ordre légal, accessoire etc.

Les types de données

Les données que je présente ci-après font partie du corps du document, la partie visible par le visiteur.

Les textes

Le texte est un fil continu de données que l'on ne peut ni classer, ni lister ou ordonner de quelque façon que ce soit. Si les données que vous devez présenter dans votre document ne correspondent pas à cette définition, c'est que vous n'êtes pas au bon endroit.

Un texte peut se composer d'un titre, d'un introduction, de paragraphes et d'une conclusion. Il peut aussi être délimité par des sous-titres comme c'est le cas dans le présent article. D'autres possibilités peuvent être envisagées, comme une référence à un auteur, un titre de roman ou encore une citation ou l'extrait d'un texte. Nous verrons ici, comment mettre en valeur vos textes grâce aux balises du XHTML.

Les titres

XHTML permet de titrer certaines parties d'un texte. Le titre le plus important d'un document devrait toujours se trouver entre les balises <title> dans l'entête du document. Les autre titres et sous-titres marquent le passage à un nouveau paragraphe. Pour cela, vous avez à votre disposition les balises <h1>, <h2>, <h3>, ..., <h6>. Outre le fait de marquer leur importance par rapport à un simple paragraphe, ces balises permettent un accès plus simple au contenu du document. Par exemple, dans ce tutorial, il vous est possible d'accèder à différents titres en cliquant sur un lien. Cela permet une bien meilleure navigation pour tous les utilisateurs. Les balises de titre ne doivent pas être contenues par des paragraphes, mais les précéder tout simplement.

Source du titre ci-dessous :

<h5 id="paragraphe"> Les paragraphes </h5> 
Les paragraphes

Le paragraphe est l'outil le plus courant pour la présentation d'un texte. Cela semble tout à fait logique, mais ce n'est pas toujours dans le bon contexte qu'il est employé. Par exemple, un tableau, ne devrait jamais être contenu dans un paragraphe puisque l'utilisation de cette balise sous-entend qu'elle contient du texte et non des données tabulaires.

Les paragraphes sont délimités par la balise et ne doivent être employés que lorsque leur contenu ne peut être présenté d'aucune autre manière.

Source du paragraphe ci-dessus :

<p> Les paragraphes (...) manière. </p>
Les extraits, citations, références

Il arrive souvent que dans un texte, on cite un auteur, un site internet, une source, ou encore, les paroles de quelqu'un ou un extrait d'un livre ou d'un article. Des balises spécifiques existent pour ce genre de contenu, et il est vivement recommandé de les utiliser lorsque le contexte s'y prête.

La balise <cite>

Cette balise est utilisée lorsque l'on cite une oeuvre, un artiste, une référence, marque, entreprise ou autre, en particulier lorsque le texte précédant ou suivant est en rapport direct avec ce dernier. Attention, il ne s'agit pas du tout d'une citation, il existe pour cela, les balises et <quote> et <blockquote> .

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Exemple d'utilisation :
Extrait du livre : Discours de la méthode de Descartes

Source :

Extrait du livre : <cite> Discours de la méthode </cite> de <cite> Descartes </cite>
La balise <q>

Cette balise sert à montrer que le texte qu'elle contient est une citation. Il s'agit, ici, d'une citation courte, pour des citations de plusieurs lignes, voire, de plusieurs paragraphes, préférez la balise <blockquote>

Type de balise : inline

Attributs pouvant être employés : lang, dir, title, cite.

Exemple d'utilisation :

Comme le disait Ronsard : Mignonne, allons voir si la rose...

Source :

Comme le disait <cite>Ronsard</cite> : <q>Mignonne, allons voir si la rose...</q>
La balise <blockquote>

Cette balise a le même sens que la balise à la différence près que celle-ci contient des citations et extraits de plusieurs lignes.

Type de balise : block

Attributs pouvant être employés : cite, lang, dir, title, cite.

Exemple d'utilisation :

Rappelle-toi Barbara
Il pleuvait sans cesse sur Brest ce jour-là
Et tu marchais souriante épanouie ravie ruisselante
Sous la pluie

Rappelle-toi Barbara
Il pleuvait sans cesse sur Brest
Et je t'ai croisée rue de Siam
Tu souriais
Et moi je souriais de même
Rappelle-toi Barbara
Toi que je ne connaissais pas
Toi qui ne me connaissais pas
Rappelle-toi
Rappelle-toi quand même ce jour-là
N'oublie pas
Un homme sous un porche s'abritait
Et il a crié ton nom
Barbara
Et tu as couru vers lui sous la pluie
Ruisselante ravie épanouie
Et tu t'es jetée dans ses bras
Rappelle-toi cela Barbara
Et ne m'en veux pas si je te tutoie
Je dis tu à tous ceux que j'aime
Même si je ne les ai vus qu'une seule fois
Je dis tu à tous ceux qui s'aiment
Même si je ne les connais pas
Rappelle-toi Barbara

N'oublie pas
Cette pluie sage et heureuse
Sur ton visage heureux
Sur cette ville heureuse
Cette pluie sur la mer
Sur l'arsenal
Sur le bateau d'Ouessant
Oh Barbara
Quelle connerie la guerre
Qu'es-tu devenue maintenant
Sous cette pluie de fer
De feu d'acier de sang
Et celui qui te serrait dans ses bras
Amoureusement
Est-il mort disparu ou bien encore vivant
Oh Barbara
Il pleut sans cesse sur Brest
Comme il pleuvait avant
Mais ce n'est plus pareil et tout est abimé
C'est une pluie de deuil terrible et désolée
Ce n'est même plus l'orage
De fer d'acier de sang
Tout simplement des nuages
Qui crèvent comme des chiens
Des chiens qui disparaissent
Au fil de l'eau sur Brest
Et vont pourrir au loin
Au loin très loin de Brest
Dont il ne reste rien.

Source :

<h5><cite> Barbara </cite> de <cite>Jacques Prévert</cite></h5>
<blockquote cite="http://wwwuser.gwdg.fr/~ctresor/Jacques_Prevert.html>
<p>(Le superbe poême que je n'ai pas osé couper...)</p>
<blockquote>

Les degrés d'importance

Dans le temps, avec HTML, on mettait des balises pour marquer un texte important. Mais maintenant, nous savons bien qu'il ne sert à rien de mettre ce genre de balise quand on sait pertinemment qu'elles n'introduisent aucune valeur au contenu, d'ailleurs, XHTML ne les permet pas. C'est pourquoi, nous possédons des balises bien plus explicites marquant une insistance dans le texte.

La balise <em>

Cette balise marque une insistance raisonnable (emphase), un passage important mais qui ne suscite pas non-plus le plus vif des intérêts.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Exemple d'utilisation :
Il serait utile pour notre société de s'étendre sur un marché plus vaste !

Source :

Il serait <em> utile </em> pour notre société de s'étendre sur un marché plus vaste !
La balise <strong>

Cette balise marque une insistance assez forte, elle permet entre autre d'interpeller le visiteur, plus pratique que des majuscules... :-)

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Exemple d'utilisation :
Il est vital que notre société s'étende sur un marché plus vaste !

Source :

Il est <strong> vital </strong> que notre société s'étende sur un marché plus vaste !

Abréviations, acronymes et définitions.

Les abréviations sont monnaie courante sur internet et, jusqu'à preuve du contraire, aucun programme n'a encore la faculté de reconnaître et comprendre des abréviations sans orthographe réelle. C'est pourquoi j'insiste pour que vous utilisiez les balises qui suivent aussi souvent que nécessaire. Il en va de la cohérence de votre document.

La balise : <abbr>

Cette balise est utilisée pour indiquer que ce qu'elle contient est une abréviation. Cette dernière n'est vraiment utile que si l'on indique son sens grâce à l'attribut title.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Exemple d'utilisation :
T'es pas cap de faire du XHTML ?

Source :

T'es pas <abbr title="capable>cap</abbr> de faire du XHTML ?
La balise : <dfn>

La balise s'utilise lorsque qu'un paragraphe est consacré à la définition d'un mot et que ce mot est contenu dans ce dernier. Dans ce cas, on le distingue des autres avec ce marqueur. C'est le cas au début de cet article avec XHTML. Attention, il existe les listes de définitions qui peuvent être utilisées lorsqu'il s'agit de définitions détachées du texte et non de sa continuité.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Exemple d'utilisation :
Le labrador est un chien doux et affectueux.

Source :

Le <dfn> labrador </dfn> est un chien doux et affectueux.
La balise : <acronym>

Cette balise s'utilise dans un cas bien spécifique, puisqu'il s'agit de donner le sens d'une abréviation, mais pas n'importe laquelle, il s'agit d'une abréviation composée des initiales du terme. Vous trouverez, au tout début de ce tutorial, quelques exemples concrets.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Exemple d'utilisation :
XCMS a été développé par Elitwork.

Source :

<acronym title="eXtensible Content Manager System lang="en"> XCMS </acronym> a été développé par Elitwork.

Les exposants et indices.

Les exposants et les indices sont très peu utilisés sur internet, et pourtant, dieu sait qu'ils seraient utiles dans bien des cas de figure, notamment, pour une utilisation scientifique de XHTML (sinon, pour des intégrations mathématiques plus complexes, il existe MathML).

La balise : <sub>

Permet de mettre un texte en indice, généralement, très court..

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Exemple d'utilisation :
La somme des termes d'une suite arithmétique au rang n s'écrit : Un = U + q * n

Source :

La somme des termes d'une suite arithmétique au rang n s'écrit : U <sub> n </sub> = U <sub> 0 </sub> + q * n
La balise : <sup>

Permet de mettre un texte en exposant.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Exemple d'utilisation :
La dérivée de xn est nxn-1.

Source :

La dérivée de x <sup>n</sup> est nx <sup>n-1</sup>.

Les listes

Les listes, comme leur nom le laisse entendre, sont utilisées pour présenter des données que l'on peut classer sous forme de liste (comme les menus de ce tutorial). Elles ne doivent pas être contenues dans un paragraphe mais peuvent être ajoutées à un texte dans lequel des données peuvent être présentées sous cette forme.

Listes non-ordonnées

Ce type de liste est à utiliser lorsqu'il n'y a pas d'ordre prédéfini pour leurs items.

La balise : <ul>

Cette balise permet l'ouverture d'une liste non-ordonnée.

Type de balise : block
Attributs pouvant être employés : lang, dir, title.

La balise : <li>

Cette balise permet l'ajout d'un nouvel item à une liste désordonnée.

Type de balise : inline
Attributs pouvant être employés : lang, dir, title.

Listes de définitions

Ce genre de liste est utile pour l'affichage d'une liste de définitions.

La balise : <dl>

Permet de créer une nouvelle liste de définition.

Type de balise : block
Attributs pouvant être employés : lang, dir, title.

La balise : <dt>

Cet item de la liste contient le mot à définir. Les synonymes de ces derniers doivent se trouver dans un autre item de ce type.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

La balise : <dd>

Cet item contient la définition du ou des mots. Un mot peut avoir deux sens différents, dans ce cas, on utilise plusieurs de ces balises pour chaque définition.

Type de balise : inline
Attributs pouvant être employés : lang, dir, title.

Listes numérotées

Ce sont aussi des listes, mais ordonnées. La type de numérotation se fait via les CSS.

La balise : <ol>

Permet de créer une nouvelle liste numérotée.

Type de balise : block

Attributs pouvant être employés : lang, dir, title.

La balise : <ul>

Comme pour les listes non-ordonnées, la balise permet de créer un nouvel item.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

Les tableaux

Les tableaux devraient tous être composés de la même manière, en effet, il n'y a pas deux, ni trois, mais une et une seule façon de créer un tableau en XHTML. Cela n'implique pas le fait que tous les tableaux sont organisés de façon identique, mais plutôt que l'organisation des tableaux doit être fixée de la même manière. Nous commencerons par présenter les différentes balises à utiliser (obligatoirement) dans un tableau.

Etapes fondamentales de la création d'un tableau

Avant de créer un tableau, comme pour tout objet XHTML, mais plus particulièrement celui-là , il faut s'interroger sur son contenu et la relation qu'entretiennent les données entre-elles à l'intérieur de ce dernier. Il faut aussi lui trouver un titre qui mette en valeur son contenu. Un tableau créé de manière irréfléchie sera un tableau dénué de sens.

La balise <table>

Cette balise marque la création d'un tableau, mais l'un de ses attributs est particulièrement important, l'attribut summary dans lequel doit être reportée votre réflexion sur la relation entre les données qui y sont présentées.

Type de balise : table

Attributs pouvant être employés : summary, lang, dir, title.

La balise <caption>

Il s'agit du titre du tableau, celui cité plus haut et qui doit être court et concis.

Type de balise : table-caption

Attributs pouvant être employés : lang, dir, title.

Présentation et organisation des données

Une fois créé, il faut ajouter son contenu à votre tableau. Mais pas de n'importe quelle façon, il est important de bien spécifier la manière dont ce dernier doit être arrangé.

La balise : <tr>

Elle permet de créer une nouvelle ligne dans votre tableau. Quelle que soit l'organisation de votre tableau, vous commencerez toujours par créer les lignes puis, par créer les cellules.

Type de balise : table-row

Attributs pouvant être employés : lang, dir, title.

La balise <th>

Cette balise permet de bien définir l'organisation des données. Il s'agit, en fait, d'une cellule titre d'une colonne (scope=col) ou d'une ligne (scope=row) traduisant la nature de son contenu. Inutile de préciser que l'attribut scope ne peut être omis et doit être justement renseigné !

Type de balise : table-cell

Attributs pouvant être employés : lang, dir, title, scope, colspan, rowspan.

La balise <td>

Elle permet elle aussi de créer une nouvelle cellule dans une ligne, mais n'a pas de valeur autre que celle de contenir des données.

Type de balise : table-cell

Attributs pouvant être employés : lang, dir, title, colspan, rowspan.

Compartimenter un tableau

Lorsque votre tableau est terminé, il vous reste à le compartimenter, c'est à dire à différencier le contenu des entêtes. Pour cela il existe les balises ci-dessous qui permettent, entre autre, de faire apparaître les lignes définies par et sur chaque page sur lesquelles le tableau sera imprimé. Ainsi, l'utilisateur n'a pas à se reporter aux pages précédentes pour savoir à quoi certaines lignes ou colonnes correspondent.

Lorsquelle sont utilisées, ces balises doivent apparaître dans cet ordre : <tr> , <th> et <td> . Cela permet d'afficher un tableau exploitable et ce même durant son téléchargement par le navigateur.

La balise <thead>

C'est elle qui contient l'entête du tableau, en général, la partie du tableau dont les cellules sont définies par des <th> . Utiliser cette balise permet à des navigateurs de réimprimier le contenu de l'entête du tableau toutes les n lignes ou sur chaque page lors de l'impression du document.

Type de balise : table-header-group

Attributs pouvant être employés : scope, lang, dir, title.

La balise <tfoot>

Elle a la même fonction que <thead> , mais cette fois-ci, pour le pied du tableau.

Type de balise : table-footer-group

Attributs pouvant être employés : lang, dir, title.

La balise <tbody>

Elle permet de délimiter la partie du tableau contenant uniquement les données de ce dernier.

Type de balise : table-row-group

Attributs pouvant être employés : lang, dir, title.

Exemple de tableau

Type de quelques balises xHTML
Nom de la baliseType
divblock
spaninline
tableblock

Source :

<table summary="Ce tableau présente des balises XHTML et leur type."> 
<caption> Type de quelques balises xHTML </caption>
<thead><tr>
<th scope="col"> Nom de la balise </th>
<th scope="col"> Type </th>
</tr></thead>
<tbody>
<tr><td>div</td><td>block</td></tr> <tr><td>span</td><td>inline</td></tr>
<tr>
<td>table</td><td>block</td></tr>
</tbody>

</table>

Les liens

Les liens ne sont rien de plus qu'un pont entre votre document et un contenu qui lui est lié. L'utilisation originelle du lien a été complétement oubliée par la majeure partie des webmestres. En effet, un lien ne devrait jamais être un échange ou encore, un outil de marketing. La création de ces derniers ne doit pas être gratuite (ni payante d'ailleurs) mais réfléchie. Il doit être directement en rapport avec le sujet dont la page traite. L'attribut target d'antan n'est plus permis en XHTML, il servait à obliger un lien à s'ouvrir dans une nouvelle fenêtre. N'essayez pas de contourner cela, mais réfléchissez plutôt au but de cette évolution.

En effet, le visiteur n'est-il pas maître de son ordinateur et ne peut-il pas considérer l'ouverture de fenêtres non solicitées comme une intrusion ou une prise de contrôle ? Un simple exemple : Je suis utilisateur de Mozilla Firefox dont l'un des principes les plus intéressants est la navigation par onglet. Plutôt que de naviguer dans plusieurs fenêtres, je navigue dans une seule mais sur plusieurs pages différentes grâce aux onglets (Internet Explorer est aujourd'hui compatible avec la navigation par onglet depuis la version 7). Imaginez mon désarroi lorsque, sans mon accord, des webmestres se permettent de perturber ma manière de naviguer ? Me croient-ils incapable de le faire correctement ? Et, entre nous, je développe souvent en même temps que je navigue et je dois dire que les fenêtres multiples de Dreamweaver, mIRC Chatzilla, Mozilla Firefox, Internet Explorer, la console Javascript de Mozilla Firefox et j'en passe, sont suffisantes pour ne pas avoir à en redemander ! Mais bon, revenons-en à nos moutons.

Le visiteur doit savoir où il va lorsqu'il s'apprête à cliquer sur un lien. Pour cela, il existe plusieurs attributs dont l'attribut title. Ce dernier doit expliquer brièvement ce que va provoquer un lien.

De plus, je fais parti de ceux qui ne parlent pas le russe couramment, et j'aime savoir en quelle langue est le document vers lequel un lien pointe. Pour cela, l'attribut hreflang peut être très utile. Vous pouvez ne l'utiliser que lorsque la langue change d'un document à l'autre.

Aussi, lorsqu'un lien pointe vers autre chose qu'un document Internet, il peut être judicieux de définir son contenu avant que le navigateur commence à le télécharger pour se rendre compte qu'il n'est pas fait pour lire ce dernier... C'est là que l'utilisation de l'attribut type est d'une utilité flagrante et un gain de temps inimaginable.

Par exemple, je hais les document Acrobat Reader (.pdf) et, comme je fais parti des 10% de la minorité des internautes qui savent ce qu'est une extension, je suis capable de les éviter, mais qu'en est-il pour quelqu'un qui n'y connaît rien et qui a la même aversion que moi si cet attribut n'est pas utilisé ? Je vous laisse imaginer la rancune que peut avoir un visiteur envers un webmestre qui aurait négligé ce point.

Enfin, n'oubliez pas l'existence de l'attribut rel (et sa réciproque rev). En effet, on voit souvent dans les sources des sites éparpillés sur le web, des etc... qui permettent de donner un style particulier à un lien.

L'alternative que je vous propose est une utilisation judicieuse de l'attribut rel et des CSS. Le W3C propose des valeurs pour l'attribut rel qui permettent d'indiquer de quel type de lien il s'agit. Par exemple, l'exemple précédent peut-être remplacé par qui sera correctement (sémantiquement) interprété par votre navigateur.

Après, grâce au CSS (et leur implémentation minimale, mais déjà intéressante, par les dernières versions de principaux navigateur), il suffit d'utiliser un sélecteur CSS sur l'attribut rel pour la valeur Next comme suit :

a[[rel=next]�]�:after { content:">>"; }

La balise <a>

Pour qui ne le saurait pas déjà , on l'utilise pour créer un lien vers un contenu identifié grâce à une URL spécifiée grâce à l'attribut href. URL signifie en français : Localiseur de ressource uniforme. En d'autres termes, il s'agit d'une nomenclature permettant de situer un document sur Internet, lui donner une adresse.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title, href, hreflang, type, rel, rev, charset.

Exemple d'utilisation :

Elitwork : Création de sites Internet est une société de création de sites Internet qui respecte les standards.

Source :

<a href="http://www.elitwork.com" title="Société de création de sites Internet> Elitwork </a> est une société de création de sites Internet qui respecte les standards.

Les images

Les images et leur utilisation sont assez ambigües si l'on souhaite rester dans l'optique de la dissociation de la forme et du fond. En effet, si nous restons dans notre logique, nous ne devrions insérer des images dans notre document que lorsqu'il s'agirait de l'illustration d'un texte mais pas du tout pour le design. C'est, à mon avis, le défi le plus difficile à réaliser, car nous somme en droit de nous demander si un logo pour notre site relève de l'illustration ou du design. Je pense plutôt au design, mais il s'agit ici de mon avis personnel et sur ce point, je ne saurais trancher à votre place...

Cependant, outre ces débats continuels, il est certaines règles que nous ne pouvons remettre en cause. Une image doit obligatoirement contenir un texte alternatif. Je pense que c'est cette règle qui doit nous permettre de trancher. Si aucun texte alternatif ne peut être mis pour cette image (j'entends par là , un texte alternatif utile à la compréhension du document), alors, elle ne peut servir à rien dans votre document et serait mieux dans les style CSS voire, ne devrait pas être utilisée. Si la description de l'image est très importante, l'attribut longdesc peut être utilisé plutôt que alt.

Certains conseillent de renseigner le texte de remplacement d'une image par alt= lorsqu'il s'agit d'un spacer (image permettant la mise en forme dans certains cas). Là, je crie au feu ! En effet, être conforme XHTML, ce n'est pas seulement passer l'épreuve du validateur ! Utiliser un spacer est totalement contraîre à l'esprit XHTML. Ce cas ne devrait jamais se présenter.

Attention : N'oubliez pas qu'en XHTML toute balise ouverte doit être fermée !

La balise

Insertion d'une image au document.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title, src, alt, longdesc, usemap, ismap, width, height.

Exemple d'utilisation :
Logo XCMS

Source :

<img src="http://www.elitwork.com/images/product/xcms/xcms.png" alt="Logo de XCMS" />

Cette balise est fréquemment utilisée avec une balise ouvrante et fermante à la fois.

Les objets

Un objet, en XHTML, c'est des données intégrées au document et qui ne dispose pas de leur balise spécifique. Cela peut aller de l'applet Java à la bande son, de la vidéo à l'animation flash etc... Je ne peux malheusement pas vous décrire tous les types d'objets possibles et leur utilisation, mais je décrirai simplement leur utilisation pour quelques exemples concrets et fréquents sur Internet.

Le texte contenu entre les balises d'ouverture et de fermeture de la balise est le texte qu'aura l'utilisateur qui n'a pas le plugin de l'objet installé ou encore, un personne victime d'un handicap visuel. C'est pour cette raison que vous devez y insérer les données relative au plug-in nécessaire pour le visionner ainsi qu'une description pour les personnes déficientes visuelles de l'objet en question.

La balise <object>

Utilisé pour créer un nouvel objet dans un document.

Type de balise : block

Attributs pouvant être employés : lang, dir, title, classid, codebase, codetype, data, type, archive, declare, standby, usemap, name, width, height.

La balise <param>

Permet de passer des paramètres à l'objet qui la contient.

Type de balise : inline

Attributs pouvant être employés : name, value.

Intégrer une animation flash à votre page

Insérer du flash dans une page web en XHTML et accessible AAA, c'est comme boire un pastis en mangeant du foie gras. Mais bon, pour information :

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/-utzHo3fEWM&hl=fr&fs=1" style="width:400px; height:300px">
<param name="movie" value="http://www.youtube.com/v/-utzHo3fEWM" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
Vous n'avez pas Flash, ce qui n'est pas une mauvaise chose.
</object>

Intégrer un applet à votre page

Si vous désirez insérer un applet java à votre site, ceci peut vous aider. Sachant, qu'au niveau accessibilité, c'est pas terrible.

Source :

<object type="application/x-java-applet" codebase="data" classid="java:text.class" style="width:400px; height:300px">
<param name="codebase" value="data" />
<param name="code" value="test" />
Vous ne disposez pas de la machine virtuelle Java de Sun Microsystems.
</object>

Un cadre (frame) valide xHTML 1.0 Strict

Un cadre (frame) valide XHTML 1.0 Strict, pas possible me diront certains ! Mais si, c'est possible, et de la façon la plus simple du monde. Seul problème, on ne peut communiquer en Javascript que de l'objet au document principal et pas l'inverse (à moins que mes recherches n'aient pas été correctement menées). C'est pas vraiment dans l'esprit accessibilité, mais j'avoue y avoir eu recours pour une liste de contacts.

Source :

<object data="cadre.html" type="text/html" style="width:400px; height:300px">
<a href="cadre.html" title="Voir la page">Page HTML</a>
</object>

Les scripts

Les scripts en XHTML ne différent qu'en peu de choses de ce que nous avons pu connaître avant. Cependant, il est important de signaler que l'attribut language est périmé et qu'on utilise l'attribut type en remplacement. De plus, il est tout à fait conseillé de ne pas inclure les scripts aux pages, mais de les utiliser en document externes.

Source :

<script type="text/javascript" src="javascript.js"></script>

Les formulaires

Les formulaires sont très important en XHTML car ils permettent aux visiteurs d'intéragir avec le document. Ils servent à collecter des informations qui seront ensuite renvoyées vers le serveur pour être traitées. Il peut s'agir d'une recherche ou encore d'un formulaire de contact.

Une chose importante quand on crée un formulaire, c'est de bien penser à l'usage que l'on veut en faire. Un formulaire doit être compréhensible et ordonné pour être utilisable.

La création du formulaire

Voici les réflexes à adopter lorsque l'on crée un formulaire.

La balise <form>

A chaque fois que vous souhaitez permettre au visiteur d'intéragir avec le serveur, vous devez obligatoirement insérer cette balise. Sont à proscrire, les champs de recherche introduits sans cette balise, par exemple.

La balise <fieldset>

cette balise sert à organiser un formulaire en plusieurs sous partie pour plus de clarté. On peut leur donner un titre grâce à la balise

La balise <legend>

Il paraît souvent déroutant, losque l'on a pas l'habitude de travailler de cette manière, d'organiser un formulaire et de le compartimenter de façon judicieuse. Commencer par définir le contenu de la balise de chaque partie peut vous aider.

La balise <label>

Elle permet de faire le lien entre un champs et son intitulé par le biais de l'attribut 'for'.

Les champs <input>

La balise <input> a de nombreuses applications dans les formulaires. C'est l'attribut 'type' qui est déterminant quand à sa fonction dans le formulaire.

Attributs pouvant être employés : accept, checked, disabled, readonly, maxlength, name, size, value, type, lang, dir, title.

Les boutons

Un formulaire doit toujours contenir, au moins, un bouton de soumission. En effet, pendant longtemps, des webmasters ont utilisé la méthode de soumission d'un formulaire grâce à une image sur laquelle un lien contenant une instruction javascript était présent. Le problème, c'est que sans javascript, on ne pouvait pas soumettre le formulaire. Il faut dire qu'à l'époque, on ne pouvait pas modeler l'apparence des boutons grâce aux CSS.

Ci-dessous, un exemple de bouton de soumission (contenant une petite astuce Javascript permettant d'éviter les soumissions multiples).

<input type="submit" value="Valider" onclick="this.value='Patientez...'; this.disabled=true;" />

D'autres type de boutons existent, par exemple, le bouton 'reset', mais je ne vous conseille pas de les utiliser car il arrive souvent de vider entièrement le formulaire par mégarde... Une solution serait un code de ce genre :

<input type="reset" value="Remettre à zéro" />
Les champs de texte

Ils servent à saisir du texte sur une seule et même ligne.

Exemple d'utilisation :

<label>Saisissez votre nom : <input type="text" name="nom" /></label>
Les cases à cocher

Les cases à cocher servent à faire choisir d'envoyer ou non une information au serveur. Si la case est cochée, la valeur de l'élément est envoyée, sinon, rien n'est transmis. A utiliser pour une valeur de type booléen.

Exemple :

<label><input type="checkbox" value="1" /> Je souhaite m'abonner à la lettre d'information.</input>
Les boutons radio

Ils servent à effectuer un choix, comme pour la balise . Sauf qu'ici, aucun choix multiple n'est possible. Il faut donner la même valeur pour l'attribut name afin de grouper les choix possible. Le navigateur transmettra la bonne valeur en fonction du choix de l'utilisateur.

Exemple d'utilisation :

<label><input type"radio" name="option" value="1" checked="checked" /> Option numéro 1</label>
<label><input type"radio" name="option" value="2" /> Option numéro 2</label>
<label><input type"radio" name="option" value="3" /> Option numéro 3</label>

Pour information, checked="checked", signifie que la case est cochée par défaut.

Les champs de mots de passe

Pour permettre à vos visiteur de composer leur mot de passe à l'abri des regards indiscrets ce champs est idéal. Mais attention, évitez de donner une valeur à ce champs car, dans le code source, ce mot de passe sera visible !

Exemple :

<label>Saisissez votre mot de passe : <input type="password" name="passe" /></label>
Les champs de fichiers

Télécharger un fichier sur le serveur est possible grâce à ce champs. Un aménagement spécial doit être ajouté à la balise pour que cela fonctionne.

Exemple de formulaire d'envoi de fichier :

<label>Votre logo : <input type="file" name="logo" /></label>
:
Les champs cachés

Ils servent à envoyer des informations au serveur sans que l'utilisateur ne s'en rende compte :

<input type="hidden" onload="this.value=navigator.appName" />

Ce code devrait permettre de détecter la version du navigateur du visiteur (je ne l'ai pas testé).

Les zones de texte

Les zones de texte sont utilisées pour saisir un texte multiligne. Elles sont introduites pas l'élément <textarea>.

La balise <textarea>

Exemple d'utilisation :

<label>Description : <br />
<textarea name="description">Votre texte ici...</textarea></label>

Les attributs cols et rows permettent de définir respectivement le nombre de colonnes (largeur) et le nombre de lignes (hauteur).

Les listes de choix

Les listes de choix permettent de sélectionner plusieurs options d'une liste.

La balise <select>

La balise <select> introduit une liste de choix.

La balise <option>

La balise <option>, contenue dans la balise introduit un nouveau choix dans la liste.

La balise <optgroup>

La balise <optgroup> permet de regourper les options en différents groupes selon leur proximité.

Exemple d'utilisation des listes de choix :

<label>Situation familiale : <select>
<option value="0">Célibataire</option>
<optionvalue="1">Marié</option>
<option value="2">divorcé </option>
</select></label>

Les éléments propres au design

Oui, à votre grand étonnement, il existe des balises spécifiques au design en XHTML. En fait, elles ne définissent pas vraiment le design, mais elles délimitent des zones qui vont nous servir ensuite pour le design. Dans cette page, par exemple, j'ai été contraint de placer plusieurs balises pour mettre le menu à gauche et le contenu à droite... Bien que ces dernières soient pratiques, rappellez-vous que ces balises sont tout à fait neutres et ne changent rien au contenu. Ne les utilisez que si vous y êtes vraiment obligés.

Une erreur commune est de considérer que la balise <div> est un outil de séparation de zones d'un document XHTML. J'ai régulièrement été confronté à des personnes prêchant pour cette définition. La réponse figure dans les spécifications HTML du W3C : The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.. En français : Les éléments 'div' et 'span' sont un méchanisme générique pour ajouter de la structure à votre document.

La balise <span>

Cette balise permet de délimiter une zone inline pour ensuite vous permettre d'en modifier l'allure avec les CSS.

Type de balise : inline

Attributs pouvant être employés : lang, dir, title.

La balise <div>

Même chose que span mais en block.

Type de balise : block

Attributs pouvant être employés : lang, dir, title.

Les ressources indispensables à la création de site internet

Ce tutoriel ne doit pas être la seule ressource de votre travail et/ou apprentissage, tout d'abord, parceque je n'ai pas la prétention qu'il soit plus clair que les autres et aussi parceque confronter les informations s'avère être toujours le meilleur moyen d'en tirer le maximum. C'est pourquoi, les meilleurs sites dans le domaine vous sont présentés ici. N'hésitez pas à me contacter pour me reprendre !

Les sites français

Ils n'étaient pas très nombreux à l'époque de la création de ce tutoriel. Depuis, ils fleurissent un peu partout. Mais je n'en ajoute pas pour autant car ils ne sont, malheureusement pas tous crédibles... Commencez par rendre la pareille et contactez-moi si vous souhaitez paraître dans cette liste.

  • Open Web :
    Open web est un très bon site regroupant un bon nombre d'informations sur le xHTML, les CSS et l'accessibilité. Des expliquations très détaillées complèteront à merveille ce tutorial. De plus, ce site permet une navigation selon votre niveau et ainsi de vous familiariser plus procéduralement au développement de sites conformes et accessibles.
  • Tutorial CSS :
    Ce tutorial est remarquablement réalisé, je souhaite d'ailleurs, adresser à son auteur toute ma gratitude car je ne suis vraiment pas un bon designer et ce site m'a beaucoup aidé.
  • PHPFrance :
    Oui, ce site traite de PHP, non, il ne sera pas inutile à tous. En effet, le thème de ce site n'est pas spécialement XHTML, mais je souhaite, ici, encourager les dévellopeurs PHP à venir sur ce site pour la qualité de ses tutoriaux et pour son chat IRC très actif sur lequel beaucoup de webmasters sont prêt à vous rendre service.
  • Pompage.net :
    Ce site traduit de l'anglais les meilleurs articles et tutoriaux d'Internet pour palier notre retard flagrant sur le monde anglophone. C'est le principal point d'entrée sur les standards. Un conseil, Pour les nouvelles les plus fraîches au sujet des standards, passez régulièrement par cette mine d'informations utiles.

Les sites anglais

Si vous savez lire l'anglais, je ne peux que vous conseiller de vous renseigner à la source.

Les outils de validation

  • Les validateurs du W3C :
    Le W3C met à votre disposition tout un tas de validateurs pour vérifier votre conformité aux normes, c'est une étape obligatoire avant toute publication d'un document. Des liens vers des validateurs en accessibilité sont présents sur ce site.
  • HTMLHelp.com :
    Pas envie de publier vos pages avant de les valider ? Ce site propose des outils de validation pour des pages en local !

La trousse à outils du webmestre

  • Firefox :
    Le navigateur pour webmestre, par excellence. Une console et un débuggeur javascript, un visionneur de structure de page permettant de modifier en temps réèl les CSS, la navigation par onglets et bien d'autres fonctionnalités intéressantes !
  • Web Develloper :
    Une barre d'outil pour Mozilla et Firefox qui vous permet de gagner un temps précieux, si vous ne l'avez pas déjà , téléchargez-la !
  • BBComposer : Editeur BBCodes :
    Le BBComposer est une barre d'outils pour Firefox qui permet d'éditer des BBCodes en WYSIWYG tout en restant conforme au xhtml et en respectant la sémantique. Il est très pratique pour la publication (CMS, blogs... etc). Je suis l'auteur de cette barre d'outil, si vous rencontrez des problèmes, n'hésitez pas à m'en faire part.
  • KGen : KGen est aussi une extension Firefox de ma création. Elle permet d'extraire les mots les plus importants d'une page en prenant en compte la sémantique. En fait, elle reproduit le comportement des moteurs. Très utile pour un référencement organique de pointe.

A propos

Ce tutoriel a été créé par Nicolas FROIDURE en 2004 et modifié lors de son transfert sur Elitwork. Si vous souhaitez aller plus loin dans l'application des standards, Elitwork propose des formations et des consultations animées par l'auteur de ce tutoriel. Les lecteurs étudiants ou à la recherche d'un emploi peuvent aussi consulter nos propositions d'emploi et de stages. Contactez-nous pour plus d'informations.

Remerciements

Un petit clin d'oeil à ceux qui ont spontanément donné leur crédit à ce tutoriel par le biais d'un lien.

Réutilisations

Ce tutoriel peut-être réutilisé dans le cadre de l'éducation, voici les quelques adresses où vous pouvez retrouver son contenu. Si vous souhaitez faire de même, merci de bien vouloir citer votre source et m'avertir.

Derniers sites créés

Hocco

HoccoHocco loue des studios de répétition condition scène pour les plus grands artistes français et internationaux. Nous avons adapté l'ancien site d'Hocco à notre CMS pour leur permettre de modifier son contenu régulièrement. Suite

Actualité

Performance améliorée

Nous avons profité d'un changement de serveur web pour améliorer une fois encore la performance de nos hébergements. Suite

A propos

Nous avons créé l'agence Elitwork en 2006 au coeur du Nord-Pas-de-Calais dans le triangle Arras - Cambrai - Douai. Depuis, nous forgeons notre savoir-faire au jour le jour afin rester experts du web et des technologies d'Internet en général.
Spécialisés dans la créations de sites Internet et le développement d'application/progiciels web sur mesure, nous permettons à nos clients de réussir leur transition vers un système d'information connecté. En savoir plus

Actu de l'agence

Orange HTML5 Hackathon

Orange HTML5 HackathonNicolas Froidure, le développeur d'Elitwork a remporté avec son équipe le grand prix du jury du concours de hacking Orange HTML5 Hackathon. Découvrez cette folle journée ! Suite

Nous contacter

Elitwork SARL
10, rue Antoine DEQUEANT
62860 Oisy le Verger
Tél. : 03 21 59 62 24
E-mail