[FAQ] fr.comp.infosystemes.www.auteurs : Html, Css, Dom

voir@replyto.fr.invalid (Christophe Raverdy)

Archive-Name: fr/www/faq-HtmlCssDom

Présentation

   fr.comp.infosystemes.www.auteurs est le forum sur lequel on peut
   discuter de tout ce qui touche de près ou de loin à la conception
   de site Web (sur l'Internet ou réseaux privés) tant au niveau
   pratique que théorique.

   Vous trouverez plus d'informations dans les Conseils d'Utilisation
   de fr.comp.infosystemes.www.auteurs. L'utilité de ce dernier
   document doit cependant être relativisée dans l'attente de sa mise
   à jour : il ne prend pas en compte par exemple l'existence de
   fr.comp.infosystemes.www.serveurs.

   Voyez également, s'il y a lieu, du côté des forums consacrés à
   xml, javascript, perl, php,...

   Ce document se veut un point de départ pour les personnes qui
   découvrent HTML, CSS et DOM. Accessoirement il essaiera de prendre
   en compte des questions fréquemment posées dont la réponse ne
   serait pas évidente dans les documents de référence.

   Les sites renseignés seront de préférence des sites francophones ;
   les anglophones profiteront d'une vraie FAQ à
   http://www.htmlhelp.com/faq/html et d'autres documents utiles à
   partir de http://www.htmlhelp.com.

HTML, XHTML : les bases

  Introduction

   Chaque page Internet est écrite en utilisant du HTML ou du XHTML.
   Ces deux dialectes sont maintenus par un consortium, le W3C, qui
   les a fait évoluer au cours du temps. HTML est le dialecte
   historique du Web. Application de SGML, jugé lourd, le W3C a alors
   créé XHTML basé sur XML. Les recommandations du W3C font donc
   office de norme.

  Recommandations W3C

     * Pour HTML, la dernière version de HTML est la version 4.01
       dont vous trouverez les spécifications (en français) sur
       http://www.la-grange.net/w3c/html4.01/cover.html
     * Il existe plusieurs versions de XHTML :

          * version 1.0 : http://www.la-grange.net/w3c/xhtml1
          * version 1.1 : http://www.la-grange.net/w3c/xhtml11
          * version 2 : http://www.w3.org/TR/xhtml2 (document de
            travail 26/07/2006)

   Note : les traductions des recommandations dont les URL figurent
   ci-dessus sont reconnues par le W3C, qui les référence sur
   http://www.w3.org/2003/03/Translations/byLanguage?language=fr

   Vous pouvez vérifier la conformité d'un document (X)HTML en
   utilisant un validateur. Plusieurs services existent, vous en
   trouverez quelques uns à la rubrique "scripts" de la section
   "Outils".

  Que choisir, entre HTML 4.01, XHTML 1.0 et 1.1 ?

   Pour le concepteur et l'utilisateur, les avantages des différentes
   versions de XML tiennent en la nature même du langage : l'origine
   XML. Ainsi :

     * on peut utiliser toute technologie XML (XPath, XSL, ...) sur
       une page XHTML
     * il est possible d'intégrer d'autres dialectes XML au sein même
       d'une page XHTML (SVG, MathML, ...)

   Ces avantages peuvent paraître séduisants, mais malheureusement le
   parc des navigateurs actuels ne permet pas d'en profiter
   pleinement.

   Tout d'abord, pour être lu comme du XML par les navigateurs, un
   contenu XHTML doit être servi avec un type MIME adapté, différent
   de celui d'une page Web classique (c'est d'ailleurs une obligation
   lorsque l'on utilise du XHTML 1.1). Or le navigateur majoritaire,
   Microsoft Internet Explorer, ne supporte pas ces types MIME. Seul
   le XHTML 1.0 est donc utilisable sur le Web.

   Ensuite, considérant que des pages XHTML 1.0 seront lues comme du
   HTML classique, il faut prendre garde à plusieurs points
   importants, et qui apportent au final plusieurs contraintes.

   Vous trouverez un détail des points auxquels prendre garde dans
   cet article : http://pgoiffon.free.fr/info/inet/html_ou_xhtml.php

   Le document de référence sur le sujet, en anglais, a été écrit par
   Ian Hickson de Opera : http://hixie.ch/advocacy/xhtml.fr/

CSS : séparation du contenu et de la forme

  Introduction

   HTML ou XHTML, trois versions seront à votre disposition :

     * Strict
     * Transitional
     * Frameset

   Historiquement, le HTML a inclus de nombreuses balises de mise en
   forme. Le W3C a créé CSS, un langage permettant de définir des
   mises en forme. Attention : CSS ne s'applique pas uniquement à
   HTML ou XHTML. Dans le contexte de sites Web, en utilisant CSS
   l'idée est de séparer le contenu de tout le code de mise en forme.
   Ainsi, HTML ou XHTML ne sont plus utilisés que pour structurer le
   contenu, la mise en forme étant entièrement réalisée par CSS.

   Les avantages de procéder de la sorte sont :

     * légèreté des pages
     * possibilité de cacher le code concernant la mise en forme
     * maintenance grandement facilitée du code
     * structuration du contenu facilitant l'exploitation automatique
       (moteurs de recherche en particulier)

   Apparues en 1996, les CSS ont doucement évolué. Leur support dans
   les navigateurs a malheureusement été très en retard -- il reste
   d'ailleurs encore partiel aujourd'hui. L'industrie du Web a
   massivement adopté ces nouvelles méthodes de conception en
   considérant les nombreux avantages qui en découlent.

   Cette transition n'est cependant pas évidente : c'est un cycle de
   production entier qu'il faut revoir. Le lien internet
   http://www.w3.org/Style/Examples/011/firstcss devrait faciliter la
   transition depuis un HTML à l'ancienne mode (communément appelée
   « soupe de balises ») vers (X)HTML Strict avec séparation entre
   contenu et présentation.

   La dernière recommandation CSS est disponible à cette adresse :
   http://www.yoyodesign.org/doc/w3c/css2/cover.html

  Modèle de boîte Microsoft et W3C

   À rédiger... (mode de rendu suivant le doctype, ...)

DOM

   Le "Document Object Model" (modèle objet du document) est le
   squelette d'un document. Il définit la structure d'un document
   (sous forme d'arbre) et permet l'accès à ses éléments
   constitutifs. Ainsi, ce "langage" permet de modifier dynamiquement
   le contenu, la structure et la présentation d'un document. Vous
   trouverez à partir de
   http://www.w3.org/2003/03/Translations/byLanguage?language=fr les
   traductions de documents relatifs au DOM.

Accessibilité

   À rédiger...

Ressources utiles

  Tutoriels

   Vous trouverez une approche plus didactique en français de
   (X)HTML, CSS, DOM, javascript,... à http://fr.selfhtml.org : les
   éléments sont présentés avec des exemples dont il est possible
   d'observer le rendu.

   Quelques sites en français :

     * http://openweb.eu.org
     * http://www.alsacreations.com
     * http://www.pompage.net
     * http://www.temesis.com
     * http://www.kalitee.org
     * http://www.csszengarden.com/tr/francais

   Sites centrés sur l'accessibilité :

     * http://www.accessiweb.org
     * http://www.acces-pour-tous.net

  Livres

    Pour les débutants :

     * CSS2 Pratique du design web par Raphaël Goetter (l'auteur est
       connu pour son site web alsacreations et fait partie du
       collectif openweb.eu.org) : recommandé par plusieurs
       utilisateurs de ce forum.

     * Réussir son site web avec XHTML et CSS par Mathieu Nebra
       (l'auteur est connu pour son site web siteduzero).

    Pour les personnes déjà familiarisées :

   (à compléter)

Les outils

  logiciels

   Concevoir des pages HTML ne nécessite pas un logiciel particulier,
   de par la nature de ces pages : un fichier texte. Ainsi, un simple
   éditeur de texte peut être suffisant.

   Il existe cependant des logiciels qui permettent de simplifier le
   travail d'écriture :

     * NVU (logiciel libre) est le successeur de l'ancien Composer de
       Mozilla et Netscape. Il permet de créer du code HTML conforme
       aux standards. Il comporte également un éditeur CSS. On le
       trouvera ici : http://www.nvu.com/

     * Amaya (logiciel libre "w3c") est à la fois un éditeur wysiwyg
       et un navigateur. Il est développé par le W3C et permet par
       conséquent de tester les dernières nouveautés en matière
       d'HTML (4.01), XHTML (1.1), CSS2 et inclut un éditeur
       d'équations mathématiques en MathML. La version 8.52 existe
       pour windows98, la version 9.52 est disponible pour windowsXP
       et linux. On les trouvera ici : http://www.w3.org/Amaya

     * Dreamweaver (version 8) (logiciel commercial avec numéro de
       série et activation) que vous trouverez en
       http://www.adobe.com/fr/products/dreamweaver

     * Homesite (logiciel commercial), en version 5.5 est maintenant
       un produit "adobe" que l'on trouvera en
       http://www.adobe.com/products/homesite.

     * WebExpert (version 6.5) de Visic, similaire à Homesite. Vous
       le trouverez en
       http://software.visicommedia.com/fr/products/webexpert Vous
       trouverez sur developper.com un test de ce logiciel

     * BBEdit (8.5) Pour MacOSX de BarBones software,
       http://www.barebones.com/

     * FreeWay 4.3 de SoftPress, http://www.softpress.com Pour
       MacOSX, il existe encore une version pour MacOS9

     * BlueFish (http://bluefish.openoffice.nl) un éditeur pour
       linux.

  Débogage

   Différents outils existent pour déboguer les pages HTML et les
   feuilles de scripts. Ce sont souvent des extensions des
   navigateurs :

     * Pour Mozilla Firefox

          * L'inspecteur DOM fourni avec Firefox
          * L'extension Web Developper
            http://chrispederick.com/work/webdeveloper/ est une barre
            d'outils permettant d'inspecter en profondeur une page
            Web, de voir son aspect avec différents handicaps etc.
            Indispensable à tout développeur Web
          * L'extension Ocawa Toolbar
            http://www.ocawa.com/fr/Fonctionnalites/OcawaToolbar.htm
            permet de tester l'accessibilité d'un site.
          * L'extension Console³
            http://forums.mozillazine.org/viewtopic.php?t=318102
            permet d'améliorer la console d'erreur de Firefox
          * validateur html pour firefox :
            http://extensions.geckozone.org/HTMLValidator

     * Pour Internet Explorer

          * À compléter...

  scripts

   Il existe des scripts qui permettent de vérifier la qualité

     * vérifier le code html: http://validator.w3.org ou
       http://www.htmlhelp.com/tools/validator/index.html.fr
     * vérifier les css  : http://jigsaw.w3.org/css-validator
     * valider (x)html et css : http://www.validome.org/lang/fr
     * vérifier l'état des liens : http://validator.w3.org/checklink
     * choisir des couleurs :
       http://wellstyled.com/tools/colorscheme2/index-en.html
     * vérifier le rendu en fonction de différents navigateurs :
       http://browsershots.org

A titre de conclusion

   Cette FAQ a longtemps été maintenue par Raphael Maree, elle l'est
   actuellement par Christophe Raverdy.
   Sa dernière mise à jour remonte au 17 décembre 2007.

   Dans l'attente de son rattachement à un nouveau domaine le wiki
   associé à cette FAQ est temporairement fermé.

   Pour finir, vous pouvez toujours envoyer un courrier électronique
   au gestionnaire de cette FAQ si certaines informations vous
   semblent devoir être mises à jour.

[Retour au sommaire]