Retourner à la page d'accueil de TJS
Frosty nous propose cette introduction aux normes du W3C.
Le site Tout JavaScript.com est né bien avant l'apparition de ces normes. Cela représenterait un travail colossal de tout reprendre.
En revanche pour les développements nouveaux, il est fortement recommandé d'utiliser les normes du W3C :)

1. Objectifs
  • Standardiser la description de documents (langage XHTML et technologie CSS)
  • Rendre les documents consultables quelque soit le navigateur utilisé :
    Courant
    MSIE, Mozilla, Opera, Netscape...
    Ancien
    IE 4.0 et NS 4.7 par exemple.
    Spécifique
    Synthétiseur vocal, plage braille (pour les aveugles et malvoyants)...
  • Séparer le contenu (XHTML) de la présentation (CSS). Ceci permet de faciliter les développements et la maintenance des sites ou applications web : plus besoin d'utiliser de tableaux ou d'images transparentes pour effectuer la mise en page, ce qui allège énormément le code.
2. Le XHTML

Vous connaissez le HTML ? Alors il n'y a qu'un pas à franchir pour coder vos pages web en XHTML.

Cependant, il vous faudra peut-être changer certaines habitudes.
Voici un résumé des principaux changements par rapport au HTML :

  • Chaque page web doit commencer par un prologue XML suivi d'un en-tête DTD. Pas de panique, il suffit de copier-coller ceci :
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!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">
    
    	<!-- votre code XHTML ici //-->
    	
    </html>
  • Ecrire toutes les balises et attributs en minuscules :
    <div>Contenu du calque</div>
  • Mettre les valeurs d'attributs entre guillemets :
    <div class="ma_classe">Contenu du calque</div>
  • Fermer chaque balise ouverte (syntaxe XML) :
    <li>Un element de liste</li>
    <br />
  • Ne pas oublier les attributs obligatoires (même s'ils sont vides) :
    <img src="repertoire/image_importante.gif" alt="quelquechose d'important" />
    <img src="repertoire/image_insignifiante.gif" alt="" />
  • Inversement, ne pas utiliser d'attributs et balises obsolètes tels :
    align="center"
    bgcolor="#FF0000"
    <font>...</font>
    <center>...</center>

Lors de la rédaction de sa page web, plus besoin de se soucier de la mise en forme ; on peut se concentrer sur le contenu.

On peut très bien écrire un menu comme ceci, sans utiliser le moindre tableau :

<ul id="menu">
<li><a href="#">Partie 1</a></li>
<li><a href="#">Partie 2</a></li>
<li><a href="#">Partie 3</a></li>
</ul>

Pour s'assurer que son document est aux normes, utiliser le Validateur W3C.

3. Les CSS pour la mise en forme

Grâce aux normes CSS1 et CSS2, il est possible de donner l'aspect graphique de son choix à une page web, indépendamment de son contenu. Plus besoin de sauter des lignes ou d'utiliser les tableaux pour obtenir le résultat souhaité.

Voici deux exemples de présentation avec le menu de tout à l'heure :

* { font-size:12px; font-family:Verdana; text-align:center; }

ul#menu { width:150px; margin:10px auto 10px auto; padding:10px;
	border:#AAC solid 2px; list-style-type:none; background:#DDF; }

ul#menu a { display:block; width:130px; margin:5px auto 5px auto;
	padding:5px; text-decoration:none; color:black; font-weight:bold;
	border:#BBD dashed 1px; background:#CCE; }

ul#menu a:hover { background:#FCFCFF; border:#55A solid 1px; color:#88A; }

Copie d'écran du résultat : Menu d'apparence 1

* { font-size:12px; font-family:Verdana; text-align:center; }

ul#menu { width:460px; height:35px; margin:10px auto 10px auto;
	padding:10px; border:#866 solid 2px; list-style-type:none;
	background:#A88; }

ul#menu li { float:left; }

ul#menu a { display:block; width:130px; margin:5px; padding:5px; text-decoration:none;
	color:#FDD; font-weight:bold; border:#B99 solid 1px; background:#CAA; }

ul#menu a:hover { background:#FFFCFC; border:#A55 solid 1px; color:#A88; }

Copie d'écran du résultat : Menu d'apparence 2

Il est donc tout à fait possible de changer compètement l'aspect visuel souhaité, tout en conservant le même code XHTML. De plus, on peut aisément définir une feuille de style pour les écrans classiques, une autre pour les PDA, une autre pour l'impression du document... Pour cela, on utilise l'attribut media lors de l'inclusion de la feuille de style. Pour un PDA, cela donne :

<link rel="stylesheet" type="text/css" href="menu2.css" media="handheld" />

Le Validateur W3C permet également de s'assurer que ses feuilles de style sont aux normes.

4. Strict, Transitional, Frameset

Il existe en effet trois types de documents XHTML.

Strict
Il faut respecter rigoureusement la syntaxe XHTML (résumée dans la partie 2.)
Transitional
Accepte encore les balises et attributs obsolètes, afin de pouvoir mettre progressivement ses pages aux normes.
Frameset
Permet de déclarer un jeu de cadres. Ne pas oublier d'utiliser ceci :
<noframe>

Il est fortement recommandé d'écrire ses pages suivant la norme "strict", ce qui permettra un accès universel à leur contenu.

Cependant, vous constaterez que de nombreuses fonctionnalités (cadres, attributs d'alignement) ne sont plus utilisables avec cette norme. En effet, aujourd'hui certaines fonctionnalités apportent plus d'inconvénients que d'avantages.

Par exemple, les cadres (ou frames/iframes) :

  • Ne permettent pas d'indexation correcte par les moteurs de recherche
  • Rendent l'impression hasardeuse (tout le monde ne sait pas qu'il faut cliquer dans un cadre pour que son contenu soit imprimé)
  • Rendent la navigation difficile avec des navigateurs spécifiques pour les aveugles et malvoyants
  • Ne permettent pas de séparer complètement présentation et contenu
  • Empêchent de mettre facilement dans les favoris une page appartenant à un jeu de cadres
  • ...

D'autant plus qu'il est devenu simple d'afficher un menu, un en-tête et un pied de page sur tout un site grâce à des langages de programmation tels PHP ou ASP, ou les templates de Dreamweaver.

5. Aller plus loin
  • De nombreux articles très intéressants sont à lire sur OpenWeb
  • Un très bel exemple de séparation contenu/présentation sur CSS Zen Garden
  • Bien entendu, toutes les références se trouvent sur le site du W3C, ainsi que le validateur.
Merci à Frosty ;)

Chercher une fonction, un objet, ...

Le 24/11/2017 13:46:03 sur php7 en 13.38 ms