Path: asynchrone!news.valadon.net!news.glou.org!fr-chartes!maintfaq From: Raphael.Maree@student.Ulg.ac.be (Raphael Maree) Newsgroups: fr.comp.infosystemes.www.auteurs,fr.usenet.reponses Subject: [FAQ] fr.comp.infosystemes.www.auteurs : Html, Css, Dom Supersedes: Followup-To: poster Date: Sun, 2 Feb 2003 04:46:58 GMT Approved: fr-reponses@frmug.org User-Agent: MaintFaq version 2.1b Expires: Wed, 19 Feb 2003 04:46:58 GMT Message-ID: Content-Type: text/plain; charset=iso-8859-15 Content-Transfer-Encoding: 8bit X-No-Productlink: yes Lines: 460 Xref: asynchrone fr.comp.infosystemes.www.auteurs:10057 fr.usenet.reponses:8890 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 ( , ...) 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 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 , 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. 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: italique 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) ___________________________________________________________________ ___________________________________________________________________ --