[FAQ] fr.comp.infosystemes.www.auteurs : Html, Css, Dom
1 réponse
voir
Archive-Name: fr/www/faq-HtmlCssDom
Nota : Cette FAQ est en cours de réécriture.
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 egalement, 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.
Recommandations W3C
Les recommandations du W3C font donc office de norme.
* 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 paraitre 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 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é
<< 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 boite Microsoft et W3C
A 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é
A 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.
* Pratique du design web par Raphael Goetter (l'auteur est connu
pour son site web alsacreations et fait partie du collectif
openweb.eu.org).
* 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 developpeur Web
* L'extension Ocawa Toolbar
http://www.ocawa.com/fr/Fonctionnalites/OcawaToolbar.htm
permet de tester l'accessibilité d'un site.
* L'extension Console^3
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
* A 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
* validation (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
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 15 novembre 2006.
Si vous connaissez le principe de fonctionnement des wikis, vous
pouvez vous aussi participer à la maintenance de cette FAQ en
http://urlx.org/gnouf.info/3cda7.
Il vous est également possible de participer à la relecture des
documents publiés par fr.usenet.reponses en passant par la
plate-forme de travail sur http://gnouf.info/mediawiki.
Pour finir, vous pouvez toujours envoyer un courrier électronique
au gestionnaire de cette FAQ si certaines informations vous
semblent devoir être mises à jour.
