Web et standards

• But du cours
• Web et standards
• Fondamentaux

• Première page en XHTML
• Organiser le contenu
• Contenu dans notre page
• Ajouter un menu
• Ajouter un formulaire

• Première feuille de style
• Les sélecteurs
• Les unités
• Typographie
• Zones principales
• Taille des boites
• Positionnement
• Mise en forme du menu
• Images d'arrière plan

Le langage HTML

Le HTML permet de décrire des documents. Il n'a pas été créé pour définir le rendu visuel des documents web, mais pour définir la structure des donnés du document, et organiser le contenu de ceux-ci

Depuis qu'il a été publié en 1993, le HTML a de plus en plus été utilisé pour agir sur la présentation des pages web.

Ce sont les navigateurs web (Netscape et IE) qui créent de nouvelles balises et communiquent pour que les webmasters les diffusent : des balises de présentation sont créées à tour de bras : il n'existe pas à l'époque d'autre moyen de pésenter des pages web que d'utiliser le balisage HTML

En 1995, le W3C - regroupant les principaux acteurs du web - et créé. Il a pour mission d'uniformiser la syntaxe du HTML pour réduire les incompatibilités. Cependant, ses recommandations ne sont pas encore suivies par les éditeurs.

L'apparition des styles - qui permettent de séparer la présentation du contenu - date de 1997 avec HTML 4.0. Les navigateurs n'intègrent pas tout de suite leur gestion, ce qui retarde d'autant leur diffusion.

Séparer forme et fond

La gestion correcte des styles (CSS) par les navigateurs est assez récente. C'est pourquoi de nombreux sites sont encore présentés en utilisant les balises html

D'autres sites sont - il y a peu - passés à une présentation en CSS, nottamment des sites très visités. Refondre un site web important demande du temps et des moyens, quels sont donc les avantages de la séparation contenu/contenant ?

Les avantages de la présentation CSS

• Economie de bande passante pour le serveur (comme le client)
  • Les styles sont chargés une fois pour toutes et mis en cache du navigateur, ils sont généralement utilisés sur tout le site
  • Economies de balises : toutes les balises de présentation disparaissent, nottamment celles qui étaient répétées tout le long de la page, avec les mêmes attributs
• Site plus facilement maintenable
  • Changer la présentation d'un site pour un évênement particulier devient très aisé : il suffit de changer la feuille de style et tout le site change d'aspect
  • On retrouve plus facilement dans une page de code source la zone à modifier
  • Les modifications n'influent pas sur le rendu du site
• Le site s'adapte plus facilement à d'autres media : navigateurs texte, lecteurs vocaux, PDA ...
• Rend possible une multitude de présentations irréalisables sans CSS

Inconvénients d'une présentation en CSS

• Ça change les habitudes du webmaster
• Certaines choses sont plus difficiles à faire.

Rendre son site accessible à tous

L'accessibilité d'un site web aux personnes handicapées passe par les standarts, mais pas uniquement. Le respect de ceux-ci ne garantit pas qu'un site soit accessible, mais c'est un moyen d'y arriver.

Par accessibilité à tous j'entend :

Accessibilité à tous les navigateurs graphiques récents

En respectant les standarts, nottamment la syntaxe, on évite beaucoup de problèmes de rendu.

Cependant tous les navigateurs n'appliquent pas les standarts à la lettre, il conviendra de tester son site sur IE et firefox au moins (pour les navigateurs graphiques)

Accessibilité à tous les vieux navigateurs

Que tout ceux qui utilisent un vieux navigateur ou un navigateur non graphique puissent accéder facilement aux informations contenues dans votre site. Le rendu sera forcément différent, mais la page doit être lisible et organisée

Testez toutes vos pages avec lynx pour voir !

Accessibilité aux non-voyants

Celà passe par une sémantique riche (utilisez les bonnes balises, par exemple strong), et le renseignement d'attributs (alt pour les images pour ne pas le citer) de maniére intelligente

Ne pas oublier que le plus important non voyant du web s'appelle google (comme l'explique très bien Jeffrey Zeldman) : il a le pouvoir d'attirer des millions voire des milliards de visites sur votre site !

Le XHTML

Nous allons créer un site web en XHTML, et nous n'avons parlé que de HTML ! Quelle est la différence ?

Le XHTML, défini par le W3C, n'est qu'une reformulation du HTML 4.0 en XML. La syntaxe du XHTML est donc très proche de celle du HTML, mais pas complètement identique.

Le XHTML constitue le standart qui permet à nos sites d'être lu par les anciens navigateurs tout en ne nous fermant pas les portes des navigateurs d'avenir : autant commencer par ce langage !