Archive-Name: fr/www/faq-HtmlCssDom

             ________________________________________
            |                                        |
            |         [FAQ] HTML, CSS, DOM           |
            |                                        |
            |____fr.comp.infosystemes.www.auteurs____|

Théoriquement, ce document regroupe les questions relatives à l'HTML,
aux CSS et au DOM fréquemment posées dans ce groupe.
En pratique, ce document contient une foultitude de liens www
brièvement commentés.

Il est donc préférable de consulter ce document avant de poser une
question relative à ces thèmes dans ce groupe.

Ce document se voulant être utile et pratique, vos remarques,
critiques et propositions de modifications et d'ajouts sont attendues
à cette adresse: Raphael.Maree@student.ulg.ac.be

Remerciements:
Vincent Lefèvre, Christian Perrier, Éric Demeester, Marc Mongenet,
Karl Dubost, Dominique Tremblay.

Version HTML de ce document:
http://usenet-fr.news.eu.org/fr.usenet.reponses/www/faq-HtmlCssDom.html
___________________________________________________________________
0. Mises à jour
   - 4.2 (12 mars 2000): WebExpert
   - 3.1 (24 janvier 2000): Nouveau lien
   - 5 (24 janvier 2000): Nouveaux liens
   - 4.3 (24 janvier 2000): Alpha
___________________________________________________________________

1. HTML
 1.0 Introduction
 1.1 Versions, spécifications
 1.2 Guides
 1.3 Pour vérifier votre HTML
 
2. CSS
 2.0 Introduction
 2.1 Versions, spécifications
 2.2 Guides
 2.3 Pour vérifier vos CSS

3. DOM, DHTML
 3.0 Introduction
 3.1 Guides

4. Logiciels de création
 4.0 Introduction
 4.1 Amaya
 4.2 Pour Windows
 4.3 Pour MacOS
 4.4 Pour Unix

5. Sites www fédérateurs

___________________________________________________________________


=-=-=-=-=-=-= 1. HTML =-=-=-=-=-=-=


1.0 Introduction
----------------

Écrire des pages en HTML ne nécessite pas de notions de programmation
ou d'informatique. Par contre, un minimum de rigueur est requis lors
de l'écriture de la structure d'une page.
Le but de l'HTML n'est pas de faire de la mise en page (il faut
utiliser les CSS, voir section suivante) mais bien de structurer un
document: titre, sous-titres, paragraphes, ...

Puisqu'il vous est impossible d'évaluer le résultat de vos pages avec
tous les browsers existants sur les multiples plate-formes du marché
(voir http://browserwatch.internet.com/browsers.html), respectez les
recommendations du W3C: http://www.w3.org/MarkUp/ qui sont en principe
respectées par tous les browsers.
Le W3C n'est pas une organisation occulte, c'est un groupement (un
consortium) des "grands" du monde de l'information, de la
communication et de l'informatique en général. Voir
http://www.w3.org/Consortium/Member/List.html


1.1 Versions, spécifications
----------------------------

La dernière version de l'HTML est la version 4.0
Les recommendations du W3C sont disponibles, en anglais sur
http://www.w3.org/TR/REC-html40/

En cours, une traduction en français:
http://www.normandieweb.org/karl/HTML4/

1.2 Guides
----------

L'HTML 4.0 en français et agréablement présenté:
http://noirblan.citeweb.net/toc.html

http://www.htmlhelp.com/reference/html40/
En anglais, une approche plus didactique de l'HTML 4.0 que le site du
W3C: les nouveautés de cette version, la structure de l'HTML, une
liste alphabétique ou organisée des balises, une table des caractères
spéciaux (Latin-1, Symbol, Grecs).
On peut télécharger ce guide (format .zip) ici:
http://www.htmlhelp.com/distribution/

Un chapitre d'UNGI est consacré aux nouveautés apportées par
l'HTML 4.0 par rapport à l'HTML 3.2 (en français) :
http://ungi.nirvanet.net/chap29.htm


1.3 Pour vérifier votre HTML
----------------------------

Le W3C propose gratuitement la validation de l'HTML de tout URL
directement sur le site http://validator.w3.org/

http://www.cast.org/bobby/
Insérez l'adresse de la page que vous voulez faire analyser par Bobby
et il vous dira, en se basant sur quelques conseils du W3C
(http://www.w3.org/TR/WAI-WEBCONTENT), si le code de votre page est
écrit de manière à rendre son contenu accessible aux personnes +/-
infirmes.
Ce "validateur" peut-être chargé et exécuté sur une machine non
connectée à internet (équipée d'une JVM).


_____________________________________________________________________


=-=-=-=-=-=-= 2. CSS =-=-=-=-=-=-=


2.0 Introduction
----------------

Les balises et attributs de présentation de l'HTML (<FONT> , ...) sont
désapprouvés (et tendent donc à disparaître) par le W3C au profit des
Cascading Style Sheets (feuilles de style) qui permettent de mettre en
page un document de manière beaucoup plus souple.
Par mise en page on entend polices de caractères, couleurs,
positionnement (marge, "indentation", etc.) et divers effets visuels.
Les CSS se superposent à l'HTML. Leur utilisation ne rend donc pas
impossible l'accès au contenu pour les visiteurs utilisant un
butineur ne reconnaissant pas les CSS (ou les personnes ayant
désactivés les CSS), le contenu sera simplement présenté selon les
préférences du browser du visiteur.

On trouve plusieurs documents expliquant l'intérêt de la séparation de
la structure (HTML) et de la présentation (CSS) d'un document à partir
d'ici http://www.w3.org/Style/ et d'ici http://www.w3.org/WAI/

Notamment, le caractère nuisible des <FONT> de l'HTML:
http://www.mcsr.olemiss.edu/~mudws/font.html (anglais) et
http://www.isoc.org:8080/web_ml/html/fontface.html (en français).


2.1 Versions, spécifications
----------------------------

La dernière version des CSS est la version 2 dont les recommendations
du W3C sont disponibles en anglais ici: http://www.w3.org/TR/REC-CSS2/


2.2 Guides
----------

http://www.htmlhelp.com/reference/css/
Le Web Design Group propose cette référence en anglais des CSS 1.

UNGI propose une introduction en français aux CSS (niveau 1):
http://ungi.nirvanet.net/style.htm

D'autres liens: http://www.w3.org/Style/css/#learn et
http://css.nu/pointers/


2.3 Pour vérifier vos CSS
-------------------------

À l'instar du "validateur HTML", le W3C vous propose de vérifier
on-line ou off-line (classes java à télécharger) vos déclarations de
style sur le site: http://jigsaw.w3.org/css-validator/


_____________________________________________________________________


=-=-=-=-=-=-= 3. DOM, DHTML =-=-=-=-=-=-=


3.0 Introduction
----------------

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.
Les recommendations du W3C en anglais:
http://www.w3.org/TR/REC-DOM-Level-1/
Le niveau 2 est en cours d'écriture:
http://www.w3.org/TR/WD-DOM-Level-2/

L'ancêtre non-standardisé du DOM est le Dynamic HTML (DHTML), il
regroupe les feuilles de style (CSS), l'HTML et le JavaScript. À ma
connaissance, il n'existe qu'à partir des versions 4 de Netscape
Navigator et Microsoft Internet Explorer et dans des versions
différentes (N-Navigator utilise la balise <LAYER>, les instructions
JavaScript layerWrite, etc.). Donc à utiliser avec modération et
attention.


3.1 Guides, didacticiels
------------------------

Une introduction au DOM en français:
http://www.webdeveloppeur.com/DHTML/DOM.html

Concernant le DHTML, on trouve une foultitude de guides, Resauce
http://www.digitalthread.com/resauce/ en répertorie, parmi ceux-ci:

http://www.dansteinman.com/dynduo/
Dynamic Duo, en anglais, une trentaine de "leçons" sous forme
d'exemples pour réaliser des effets visuels ou sonores sous
N-Navigator et MS-Internet Explorer. À consulter en ligne ou à
télécharger.

<http://www.dannyg.com/>
Danny GOODMAN est l'auteur de nombreux ouvrages, dont "JavaScript
Bible" et "Dynamic HTML: The Complete Reference", ainsi que
d'articles didactiques que l'on peut consulter avec profit sur
son site. Un partisan convaincant du code JavaScript cross-platform.
(commentaire de J.J.SOLARI)

_____________________________________________________________________


=-=-=-=-=-=-= 4. Logiciels de création =-=-=-=-=-=-=


4.0 Introduction
----------------

Concevoir des pages HTML ne nécessite pas un logiciel particulier, de
par la nature de ces pages: un fichier texte.
Ainsi, le "bloc-notes" de Windows, "SimpleText" du MacOs ou "vi" sous
Unix sont suffisants.

Cependant, il existe de nombreux logiciels d'édition de pages HTML,
ils sont de deux sortes.
- La famille des éditeurs en mode texte où l'on tape soit-même le
  "code" de la page. Ces éditeurs sont agrémentés d'une multitude
  d'icônes et boîtes de dialogues qui permettent d'accélerer
  l'insertion d'élements comme les images, tables, frames, style
  sheets, etc.
 
- La seconde famille est celle des éditeurs wysiwyg, contraction de
  "What you see is what you get". En d'autres termes, on y édite sa
  page HTML comme on édite un document avec un traitement texte
  (Ms-Word ou autres), ce qui est bcp plus facile pour débuter.
  L'insertion d'éléments se fait en les déplaçant, les
  redimensionnant,... le tout (ou presque) à la souris.
  L'inconvénient majeur de certains de ces éditeurs est qu'ils
  produisent parfois (souvent) du code illisible et mal organisé, par
  exemple: <I></I><I>italique</I><I></I> et d'autres absurdités.

  On peut trouver une liste et un tableau comparatif d' éditeurs
  wysiwyg ici: http://ungi.nirvanet.net/chap27.htm


4.1 Amaya
---------

Amaya est à la fois un éditeur wysiwyg et un browser. Il est développé
par le W3C et permet par conséquent de tester les dernières nouveautés
en matière d'HTML. Il supporte le format d'image PNG, partiellement
les CSS et inclut un éditeur d'équations mathématiques en MathML.
La version 2.1 est disponible (sources et binaires) ici
http://www.w3.org/Amaya/ pour Unix (solaris, aix, sgi, ...),
Windows'95/NT, Linux.


4.2 Pour Windows
----------------

- Éditeur HTML en mode texte:

  * Homesite d'Allaire.
  Une version de 1996, la 1.2, est freeware (c-à-d gratuite).
  La dernière version en date est la 4.0 et est disponible sur
  http://www.allaire.com/ en version d'évaluation non bridée.
  Cette version intègre un mini-éditeur wysiwyg, un parser (pour
  valider le code HTML de vos pages), un éditeur de feuilles de
  style, une documentation complète sur l'HTML et toutes les options
  des précédentes versions: coloration syntaxique (que l'on peut
  configurer), "templates", recherche avancée, etc.
  Il supporte l'HTML 4.0.
  Son interface est souple et bien pensée.
  Une critique plus complète:
  http://www.stud.montefiore.ulg.ac.be/~maree/info/hs4.htm
 
  * WebExpert de Visic.
  En français, ressemble à Homesite.
  http://www.visic.com/webexpert/


- Éditeur wysiwyg:

  * Dreamweaver 2.0 de Macromedia.
  http://www.macromedia.com/dreamweaver/
  Il supporte l'HTML 4.0, permet l'édition d'un grand nombre d'attributs
  de présentation CSS, nettoie le code HTML (en retirant les balises
  redondantes et en le formattant), importe du XML, permet
  d'effectuer des effets visuels rapidement (déplacement d'objets,
  OnMouseOver, ...).
  Une version d'évaluation non bridée est disponible sur le site.

  * HotMetaL 5.0 de SoftQuad, http://www.sq.com/
  Selon Christian Perrier:
  « HotMetaL 4.0 ne sort QUE du HTML valide... (...) HoTMetaL
    possède également, comme tout bon outil SGML, des mécanismes
    pour s'adapter à l'évolution de la DTD HTML. (...) »
  Une version d'évaluation limitée d'HoTMetaL Pro 4.0 est
  disponible en téléchargement ici:
  http://www.softquad.com/products/hotmetal/hm-ftp.htm
  (taille du fichier: 20mo)


- Sur http://www.davecentral.com/webauth.html on trouve des critiques
d'éditeurs de pages www, mais aussi de nombreux utilitaires:
statistiques, vérification des liens, convertisseurs, création d'image
map, serveurs www, etc.



4.3 Pour MacOs
--------------

- Éditeur en mode texte:

  * BBEdit de BarBones software,
  http://www.barebones.com/
 
  * Alpha
  http://alpha.olm.net/
  Un éditeur en shareware entièrement modulable et paramétrable (à la
  Emacs) bâti autour du langage de script TCL. Une vingtaine de modules
  sont disponibles (Ada, C, C++, Fortran, HTML, Java, Pascal, Modula-2,
  Perl, Postscript, Scheme, SQL, Tcl, and TeX (incluant LaTeX et LaTeX2e).
  (commentaire de J.J.SOLARI)


- Éditeur wysiwyg:

  * FreeWay 2.0 de SoftPress, http://www.softpress.com/
  Il supporte les CSS, l'HTML 4.0, le DHTML.
  Démo de 30 jours.

  * CyberStudio 3.1 de GoLive, http://www.golive.com/
  Support des Css, layers, Javascript.

  * Dreamweaver 2.0 de Macromedia.
  http://www.macromedia.com/dreamweaver/
  Voir section 4.2


- Autres utilitaires en tous genres: http://arpp.carleton.ca/mac/tool/


4.4 Pour Unix
-------------

- Éditeur en mode texte:

  * AsWedit 4.0 d'Advasoft, http://www.advasoft.com/asWedit.html
  Il a un bon nombre de ressemblances avec Homesite sous Windows, il
  propose entre autres:
  -coloration syntaxique
  -l'insertion +/- "paramétrable" d'images, tables, frames et
  formulaires, listes, etc.
  -insertion de caractères spéciaux (des sigles droits d'auteurs aux
  majuscules accentuées en passant par l'alphabet grec)
  Il offre également quelques outils et filtres (il est possible
  d'en créer soi-même) pour vous faciliter l'édition.
  Toutes ces options ne sont accessibles qu'en activant le mode HTML
  qui vérifie que l'HTML de la page est correct.
  Support de l'HTML 4.0.

  * GNU Emacs agrémenté du 'html-mode' et du 'css-mode'.
  http://www.stud.ifi.uio.no/~larsga/download/css-mode.html

____________________________________________________________________


=-=-=-=-=-=-= 5. Sites www fédérateurs =-=-=-=-=-=-=


http://www.devsearch.com/ (en)
DevSearch vous permet de faire des recherches (mot ou phrase)
parmi de nombreux sites de références (html, css, dom, perl, etc.)
dont W3.org, Builder.com, Apache.org, DHTMLZone, InsideDHTML,
Linux.org, MS Sitebuilder, Perl.com, WebMonkey.

http://www.useit.com/ (en)
L'utilisation du www, les erreurs à ne pas commettre, l'actualité,
etc.

http://www.infohiway.com/faster/index.html (en)
The « Bandwidth Conservation Society », conseils pour la création de
pages www, astuces pour alléger les images, etc.

http://www.worldnet.fr/~hertgen/anybrowser.html (fr)
La campagne « best viewed with any browser », pourquoi écrire de
l'HTML conforme, comment réaliser un site accessible, etc.

http://www.stud.ifi.uio.no/~larsga/linker/XMLtools.html (en)
Une liste d'outils (editeurs, parsers, browsers, convertisseurs)
XML, XSL, DSSL, DOM.

http://www.eyrolles.com/livres/michard/ (fr)
Logiciels (éditeurs, boîtes à outils, etc.) et exemples XML.

http://ungi.nirvanet.net/ (fr)
Les chapitres 26 à 52 sont consacrés à la conception
www dont l'HTML, les CSS, le DHTML et les outils de création.

http://www.webreference.com/ (en)
Tutoriels et articles de fond sur JavaScript, DHtml, Perl, XML, design,
etc. Indispensable dans le carnet d'adresse.
(commentaire de J.J.SOLARI)

http://www.hotwired.com/ (en)
Emanation d'un pionnier de l'édition en ligne, Wired Magazine, articles
sur l'évolution du Web et tutoriels pour ceux qui débutent en HTML, CSS
et JavaScript.
(commentaire de J.J.SOLARI)

http://www.devshed.com/ (en)
Tutoriels et articles de fond sur JavaScript, CSS, DHtml avec un accent
particulier sur le langage de script PHP.
(commentaire de J.J.SOLARI)

http://www.irt.org/ (en)
Organisation regroupant professionnels et intervenants chevronnés pour
la promotion des technologies du Web. Articles de fond, tutoriels, faq,
exemples de développement sur toutes les technologies disponibles. Une
seule étape pour Html, Css, Dhtml, JavaScript, Java, Perl, PHP, CGI, base
de données, etc.
(commentaire de J.J.SOLARI)

___________________________________________________________________
___________________________________________________________________

--