CSS et XHTML - Les standards du web

Il ne semble pas évident ni facile de changer ses habitudes dans la conception d'un site web.
La mise en page par CSS nous oblige à tout oublier pour repartir sur de nouvelles bases, dont on a parfois du mal, au début, à saisir toutes les subtilités.
Passer du HTML au XHTML, plus rigide et rigoureux, peut sembler tout aussi difficile et déroutant.
Alors pourquoi se compliquer la tâche lorsque l'on a déjà un site web que tout le monde semble voir correctement ? Cette page est là pour répondre à cette question et, sinon vous convaincre, au moins tenter d'expliquer le bien-fondé d'une telle démarche.
Faire un site aux normes "strict", c'est l' assurance qu'il ne sera pas dégradé dans le futur, avec un affichage correct sur la plupart des navigateurs, et une meilleure accessibilité.

C'est faire un code plus propre et plus facilement évolutif (par rapport aux futures normes).
L'inconvénient est qu'il est plus difficile d'avoir un site qui s'affiche correctement sur les anciens navigateurs; et le résultat est même désastreux sur Netscape 4 (et sûrement aussi sur I.E.3 ou 4), mais qui utilise encore ces vieux navigateurs?

CSS

XHTML

PHP

Liens

Notre site a été testé sur :

Mozilla 1.4, Mozilla Firebird, Firefox

Netscape 6 et 7

Opera 5, 6 et 7

Neo Planet

k-meleon

Internet Explorer 5 et 6.

Mais si vous utilisez d'autres navigateurs, n'hésitez pas à nous faire part du résultat,
ou à nous signaler d'éventuels bugs.

Haut de la page

CSS

Tableless

La mise en page et la disposition des divers éléments graphiques se fait depuis longtemps à l'aide de multiples tableaux imbriqués et de cellules, générant un code lourd et parfois bien difficile à lire.

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 !
Evidemment, ces deux balises doivent être associées à des feuilles de style pour pouvoir mettre en forme les pages.
Les feuilles de style CSS sont un outil à la fois puissant et souple d'usage pour séparer strictement forme et contenu.

Définition des styles

Les CSS permettent de contrôler tous les aspects du design d'un site : typographie, couleur et mise en page.

Mises à jour

En contrôlant tous les aspects de présentation d'un site avec une seule feuille de style, les CSS offrent un niveau de contrôle inégalé sur la mise en page d'un document XHTML et ce, avec un indice de bande passante incroyablement peu élevé.
Quand les feuilles de style sont utilisées à bon escient, à l'intérieur d'un document correctement structuré en (X)HTML, elles rendent un site plus facile à maintenir et à mettre à jour.
Il est possible de modifier tout l'aspect et le ressenti d'une page ou d'un site entier en appliquant simplement une nouvelle feuille de style.

Conclusions

Gestion simplifiée et économique de la présentation d'un site à l'aide de quelques feuilles de style (ou même d'une seule) pour toutes les pages, aisément modifiables ;
Allègement du code-source des pages Web, et donc économie de bande passante : une feuille de style n'est chargée qu'une fois par un navigateur, qui l'applique sans délai si nécessaire aux pages visitées par la suite ;
Meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.

Haut de la page

XHTML

Définition

Extensible Hypertext Markup Language.
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 le HTML est que sa syntaxe ne souffre d'aucune souplesse.
Le (X)HTML définit tout un tas de balises. Chacune de ces balises sont destinées à indiquer la nature du contenu qu'elles encadrent. (C'est le cas pour la version strict du HTML et XHTML, les autres versions ayant d'autres balises pour spécifier l'apparence du contenu). C'est ce que l'on appelle la sémantique.

Le XHTML n'apporte rien d'autre qu'une simplification du langage, par la suppression d'attributs et un formalisme plus strict.

Utilité

Le respect de la sémantique des balises, en encadrant un contenu avec la balise adéquate, permet de structurer un document correctement, indépendamment de sa présentation et mise en page. Les programmes qui traiteront l'information contenue dans la page pourront ainsi l'interpréter correctement.
Ces programmes sont nombreux : les navigateurs classiques bien sûr, mais aussi les robots d'indexation des moteurs de recherche, les lecteurs à synthèse vocale pour les mal-voyants, etc...

Cela rend ainsi les pages accessibles à tous les outils de navigations.

Conclusions

La suppression de la plupart des attributs rend le code source beaucoup plus clair et "lisible".
S'il me semblait impossible de me passer d'un éditeur html avec l'utilisation des tables et du HTML4 (difficile de s'y retrouver au milieu d'une multitude de td, tr, font, colspan, etc...), je tape aujourd'hui directement mon code sans la moindre difficulté, n'utilisant plus mon éditeur que pour visualiser le résultat.
Même les tableaux (ils restent bien sûr utiles pour présenter des données ...tabulaires), sont désormais simplifiés et plus clairs, et j'ai pu enfin comprendre comment celà fonctionnait!
Et cet "apprentissage" (xhtml et mise en page css) ne m'a pris qu'un week-end!
Bon, c'était pas encore parfait au niveau des css (ça ne l'est toujours pas!), mais je pourrais très facilement les rectifier par la suite sans modifier la moindre page du site. Quel confort !

Haut de la page

PHP

Définition

En français, Hypertext Preprocesseur ( Pre-HyperTexte-Processor ).
PHP est un langage utilisé dans des applications web pour écrire des scripts HTML. L'essentiel de sa syntaxe est empruntée aux langages C, Java et Perl, mais y est ajouté plusieurs fonctionnalités uniques. Le but premier de ce langage est de permettre aux développeurs web de concevoir rapidement des sites aux pages dynamiques.

Possibilités

Php est un langage exécuté coté serveur, à la différence de javascript et html, donc le code n' apparaît pas dans la source de la page web, et seules les informations que l'on souhaite afficher seront visibles par les visiteurs.

Il permet entre autres de rendre automatiques des tâches répétitives, notamment grâce à la communication avec une base de données.

La fonction include permet d'insérer à tout endroit d'une page PHP, le contenu d'un fichier autant de fois qu'on l'appelle.

Ce langage très puissant offre plus de 1200 fonctions.

Conclusions

Débuter en PHP n'est pas très difficile, et l'on peut se limiter au départ à l'utilisation de quelques fonctions élémentaires, comme include ou l'utilisation de variables pour afficher les fichiers dans une même page.
Et l'on gagne là encore beaucoup de temps et de faciliter dans la maintenance et le développement d'un site.

Haut de la page