ORdI&ORbI n'Web...

Accueil
Vous êtes ici : Mes favoris / informatiques / HTML, XHTML et CSS

HTML, XHTML et CSS

wiki des Pompeurs ***
Le wiki de la liste de dicussion des pompeurs : une liste de discussions pour créateurs de sites web.
http://www.publishtogether.com/pompeurs/PagePrincipale [fr]
Retour haut

CSS avancé, CSS3, experimentations...

Techniques CSS non utilisables car utilisant des règles de styles pas assez implémentées dans les navigateurs les plus courants.
css/edge **
Eric A. Meyer explore à fond la mise en page en pur CSS afin de démontrer tout son potentiel. Une démonstration réalisée sans le souci d'utiliser des techniques cross-browsers mais plutôt avec celui d'utiliser du CSS et de l'HTML 100% valide W3C.
http://www.meyerweb.com/eric/css/edge/ [en]
CSS3 Tests **
Un site qui offre un tableau de compatibilité des propriétés CSS3 dans les navigateurs.

http://geocities.com/seanmhall2003/css3/ [en]
Play Ground **
Une collection personnelle de pages stylées en CSS, mais parfois à but expérimental et sans souci de faire du cross-browser.
http://moronicbajebus.com/playground/ [en]
Retour haut

Accessibilité

acces-pour-tous.net ***
Des fiches techniques pour rendre un site accessible, un validateur, des outils de conversions (texte en javascript, accents ...) , un correcteur orthographique.

http://www.acces-pour-tous.net/ [fr]
HTML Techniques for Web Content Accessibility Guidelines 1.0 ***
Guide pour faire des sites accessibles aux personnes handicapées.

http://www.w3.org/TR/WCAG10-HTML-TECHS/ [en]
Video | Accessibility | COmputing @ UW
Une introduction au lecteur d'écran.

http://www.doit.wisc.edu/accessibility/video/... [en]
Retour haut

Argumentation sur les standards

En quoi la mise en page en tableau est stupide ***
Malgrès le titre un peu provocateur un très bon argumentaire illustré par des dessins humoristiques, et qui prone une utilisation à bon escient des balise XHTML et CSS. Cet argumentaire est raisonnable car il ne proscrit pas totalement l'usage des tableaux pour de la mise en page quand il est difficile de faire autrement en pur CSS.

http://www.cybercodeur.net/weblog/presentations/... [en]
CSS Vault unlocking creativity
Une collection de liens et de ressources CSS pour inspirer les web designers. Fait parti des sites de http://9rules.com

http://cssvault.com/ [en]
W3C Quality Assurance
Un article du W3C qui promouvoie les sites Web Standards
http://www.w3.org/QA/2002/07/WebAgency-Requirements [fr]
Retour haut

Contournements des bugs CSS des navigateurs

/*Position is everything*/ ***
Un site qui explique les CSS et les problèmes de bugs dans les navigateurs. Au programme :
- Une quinzaine de bugs IE
- Deux bugs Gecko dont un résolu
- Neuf bugs Opera

On y trouve également, un "pierfecta 3 col- layout" c'est à dire, une mise en page rigide en 3 colonnes de hauteurs égales, rendu possible grâce à des flottants aux marges négatives.
La colonne centrale est la première dans le source, mais c'est au prix d'un div qui vient enveloppé cette colonne avec celle de droite.


http://www.positioniseverything.net/ [en]
Back to Basics Part 2 — Internet Explorer for Windows, Box Models and More ***
Propose 3 solutions, dont 2 sans hacks pour contrer le Microsof box Model : ne pas apliquer le width d'une part et les padding et border d'autre part au même élément !
http://blog.vinniegarcia.com/oldstuff/2004/01/10/... [en]
Box Model Hack - css-discuss ***
Un recueil de hacks pour contourner les bugs CSS.

http://css-discuss.incutio.com/?page=BoxModelHack [en]
Contourner les défauts/limitations/bugs d'Internet Explorer ***
Une compilation de liens.
http://www.fastclemmy.com/index.php?viewlog=75 [fr]
dean.edwards.name ***
propose en open-source :
  • IE 7 : un travail en cours qui permet avec un DHTML behaviour d'élargir le champs d'interpretation des standards CSS de IE
  • moz-behaviors un lien XBL qui permet aux browsers Mozilla d'utiliser les DHTML behvior de Microsoft

http://dean.edwards.name [en]
Retour haut

Cours, tutoriaux, articles, FAQ

Alistapart, for people who make websites ***
Des articles sur la construction de site web en particulier sur les CSS.
http://www.alistapart.com [en]
Alsacreations, cours, astuces et tutoriels CSS et XHTML ***
Comme le titre l'indique, avec notamment des modèles de page et de menus stylés en CSS

http://www.alsacreations.com/articles/ [fr]
BrainJar.com: Using Style Sheet ***
Une bonne introduction assez complète à l'utilisation des feuilles de styles.
http://www.brainjar.com/css/using/ [en]
Complex Spiral Consulting ***
Une entreprise de formation et de services sur les standards web dans laquelle oeuvre Eric A. Meyer.
Le site offre quelques publications dont un super article sur les flottants.

http://www.complexspiral.com/ [en]
CSS - Débutant ***
Un cours de CSS, pour notamment styler des tableaux, faire des liste à avec des puces en image, et une astuce intéressante pour zoomer sur une image.

http://mammouthland.free.fr/cours/css/index.php [fr]
CSS et les standards en six mois ***
Plein de ressources sur les CSS.
http://www.neokraft.net/articles/les-standards-en-six-mois/ [fr]
css.maxdesign.com.au ***
Un recueil de liste stylé en CSS, des tutoriaux progressifs et détaillés pour styler des listes, utiliser le positionnement flottant ( float), ou utiliser les sélecteurs de règles de style.
http://css.maxdesign.com.au [en]
How To Create ***
Comment créer des pages qui fonctionnent sur tous les navigateurs. Ca devrait être aller de soi, malheureusement les standards n'étant pas encore bien supportés, ce n'est pas toujours facile. Ce site donne des trucs pour y arriver. Par exemple comment faire pour obtenir la transparence alpha des PNG dans IE.
http://www.howtocreate.co.uk/ [en]
Ibilab.net :: Développement web ***
Des articles sur les CSS, javascript, PHP. Notamment un article pour avoir des éléments en position fixed dans IE sans recours à du Javascript.
http://www.ibilab.net/webdev/index.php [fr]
joshuaink: A simple introduction to 3 column layouts ***
Une "simple" introduction au gabarit en 3 colonnes. C'est tout le talent de John Oxton que de rendre les choses simples et d'expliquer étapes par étapes comment faire un gabarit en 3 colonnes. Le tout est sémantiquement correct et accessible. Le tutorial est illustré par une page exemple à chacune des 14 étapes : de la page HTML brute à la page complétement stylée. Il fait flotter tout ces colonnes à gauche et utilise les marges (négatives ou positives) pour les positionner les une vis à vis des autres.
Par souci de simplification ce tutorial laisse de coté les problèmes rencontrés avec IE5.
Voir également une mise en oeuvre de ce gabarit sur mon blog.
http://joshuaink.com/blog/196... [en]
Le coin des expert - Comment s'initier aux feuille de styles ***
Des explications que j'ai trouvées très claires, avec des démos et le cas échéant la liste des navigateurs supportant telle ou telle règle de style. Ai parcouru nottament la page sur les calques.

http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_49... [fr]
openweb, pour les standard du web ***
Un site qui défend et illustre les standards du Web, et de belle façon avec notamment toute une série de cours sur les CSS , les differentes variantes de DTD en HTML, et les attributs devenus obsoléte avec les styles de remplacement, la façon de bien valider les formulaire en Javascript, et toute une quantité de bonnes choses.

http://openweb.eu.org/ [fr]
pompage.net - nous pompons pour vous ce qu'il y a de meilleurs. ***
Comme le titre l'indique, la traduction des meilleurs articles sur le développement web.
http://pompage.net/ [fr]
Pushing Your Limits ***
Une superbe présentation des CSS en 98 pages avec un minimum de texte et un maximum de schémas. Sont présentés, l'exemple du redesign de Blogger, des exemples de mises en page, des trucs CSS comme les portes coulissantes.

http://stopdesign.com/present/2004/sydney/... [en]
Ten CSS tricks you may not know : evolt.org, Code ***
10 astuces CSS que vous ne connaissez peut-être pas. Voir aussi les commentaires de Tantek sur ces asctuces.

http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know... [en]
Web Jardin ***
Web-jardin est destiné aux webmestres de sites "jardins" ou "plantes" mais devrait intéresser bien d'autres webmestres. On y trouve des conseils pour faire un site web et notamment une magnifique structure en arbre réalisée en CSS et comment émuler la position fixe dans IE avec moultes explications.
http://www.amaryllidaceae.org/web-jardin/... [fr]
WellStyled.com ***
Ce site regroupe des articles sur les CSS par Petr Stanicek. A voir :
http://wellstyled.com/index.html [en]
XHTML :: Comment réussir ***
Explique pourquoi le XHTML, quelles différences avec le HTML et comment rendre compatible les pages XHTML avec tous les navigateurs.
Sur ce site on trouve aussi une introduction au smart bookmarks et bookmarklets.

http://ptaff.ca/xhtml/ [fr]
CSS ASTUCES - codage CSS pour sites Web **
Des astuces CSS.
http://batraciens.net/css-astuces/index.htm [fr]
Styling
**
Comment styler les hr.
http://www.sovavsiti.cz/css/hr.html [fr]
XHTML .net Portail libre pour Webmasters **
un site sur le développement web en général, quelques articles sur les CSS

http://www.xhtml.net/ [fr]
Cours de XHTML conforme et accessible, par Normand Lamoureux
Comme le titre l'indique un petit cours en une dizaine de pages pour connaître l'essentiel du XHTML.
http://paginus.com/essai/index.html [fr]
CSS Enhancements in Internet Explorer 6
Cet article explique notament le !DOCTYPE "Switch" et le modèle de boîte standard CSS1 ainsi que toutes les diffèrence entre IE6 et ses prédécesseurs.
http://msdn.microsoft.com/library/en-us/dhtmltechcol/dndhtml... [en]
Développer avec les standards Web | 456 Berea Street
Recommandations et conseils pratiques

http://www.cybercodeur.net/weblog/presentations/dwws/... [fr]
Traduction : Remplacement Dynamique de Texte
Le remplacement de titre texte HTML par des images grâce à un script PHP, un JavaScript et 3 régles CSS. Le tout en respecte les standards.
http://www.pouipouidesign.net/index.php/2005/04/07/... [fr]
XHTML
Présentation du XHTML1.0 et 1.1
http://www.u-picardie.fr/~ferment/etude/deppe/... [fr]
XHTML tutorial
un tutorial sur le xhtml
http://www.w3schools.com/xhtml/ [en]
Retour haut

Modèles de menus ou de listes en CSS

Alsacreations, cours, astuces et tutoriels CSS et XHTML ***
Comme le titre l'indique, avec notamment des modèles de page et de menus stylés en CSS

http://www.alsacreations.com/articles/ [fr]
Menu CSS (menu déroulant) ***
Cette page montre comment faire un menu déroulant en respectant tout d'abord les standards, puis de le faire fonctionner quand même avec IE, en utilisant une extension propriétaire de ce dernier: les behaviors (comportements), pour externaliser au maximum les ajustements nécessaires. Seul bémol : ça ne fonctionnera pas sur IE Mac, mais les utilisateurs de Mac devront bien à un moment changer pour Safari ou pour Mozilla puisque IE Mac semble abandonné par Microsoft.

http://mguessan.free.fr/html/menu.html [fr]
Sensually Styled Definition Lists **
Une collection de liste stylée en CSS, avec notamment une liste en répertoire hierarchique, malheureusement ce n'est pas cross-browser IE6-Mozilla.
http://www.moronicbajebus.com/playground/cssplay/... [en]
CssCreator->Multi Level Menu
Un menu muti-niveaux en CSS qui peut être horizontal ou vertical. Avec un JavaScript bien simple pour IE PC. En revanche, ça ne fonctionne pas sur IE Mac.

http://www.csscreator.com/menu/multimenu.php [en]
Explorere Tree
Un explorateur d'arbre en CSS et JavaScript

http://www.scss.com.au/family/andrew/webdesign/... [en]
Simple website menu


http://www.brothercake.com/scripts/listmenu/ [en]
Sylvain Machefert
Présente notament un menu deroulant accessible.

http://iubito.free.fr/ [fr]
Retour haut

Modèles de pages CSS

/*Position is everything*/ ***
Un site qui explique les CSS et les problèmes de bugs dans les navigateurs. Au programme :
- Une quinzaine de bugs IE
- Deux bugs Gecko dont un résolu
- Neuf bugs Opera

On y trouve également, un "pierfecta 3 col- layout" c'est à dire, une mise en page rigide en 3 colonnes de hauteurs égales, rendu possible grâce à des flottants aux marges négatives.
La colonne centrale est la première dans le source, mais c'est au prix d'un div qui vient enveloppé cette colonne avec celle de droite.


http://www.positioniseverything.net/ [en]
3-col layout via CSS ***
Un gabarit en 3 colonnes de hauteurs indépendantes avec entête et pied de page.
Réalisé avec une colonne centrale dans le flux avec des marges à droite et à gauche que viennent recouvrir les colonnes gauche et droite qui sont flottantes. Deux divs imbriqués enveloppent les trois colonnes et contiennent chacune un background-image pour les fonds respectifs des colonnes droite et gauche. Un div avec un clear both permet de maintenir le footer en bas.
http://www.pixy.cz/blogg/clanky/css-3col-layout/ [en]
Alsacreations, cours, astuces et tutoriels CSS et XHTML ***
Comme le titre l'indique, avec notamment des modèles de page et de menus stylés en CSS

http://www.alsacreations.com/articles/ [fr]
css discuss ***
Un wiki collectant plein de ressource sur CSS. Nottament toute une collection de liens vers des gabarits à 3 colonnes.

http://css-discuss.incutio.com [en]
CSSlayout, 3 columns with Header and footer, ordered columns ***
Une mise en page en CSS en 3 colonnes avec entete et bas de page. Paramétrable par un formulaire. Ce n'est pas excellent d'un point de vue souplesse de la sémantique, puisqu'on regroupe au sein d'un même DIV deux des trois colonnes, mais ce serait difficile de faire autrement si on veux garder la colonne du centre en 1er dans le source. Donc c'est quand même très bien. La compatibilité anoncée avec Netscape 4 vue depuis un N4.5 Mac n'est pas parfaite (existence de marges entre les colonnes).
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml [en]
joshuaink: A simple introduction to 3 column layouts ***
Une "simple" introduction au gabarit en 3 colonnes. C'est tout le talent de John Oxton que de rendre les choses simples et d'expliquer étapes par étapes comment faire un gabarit en 3 colonnes. Le tout est sémantiquement correct et accessible. Le tutorial est illustré par une page exemple à chacune des 14 étapes : de la page HTML brute à la page complétement stylée. Il fait flotter tout ces colonnes à gauche et utilise les marges (négatives ou positives) pour les positionner les une vis à vis des autres.
Par souci de simplification ce tutorial laisse de coté les problèmes rencontrés avec IE5.
Voir également une mise en oeuvre de ce gabarit sur mon blog.
http://joshuaink.com/blog/196... [en]
Retour haut

Références

Feuilles de style en cascade, niveau 2 ***
Recommandation CSS2 du W3C en version française. Attention, cettte version date de 1998 et sera bientot remplacée par CSS2.1 qui est en RC depuis le 25 février 2004.

http://www.yoyodesign.org/doc/w3c/css2/cover.html [en]
XHTML™ 1.1 - XHTML modulaire ***
La traduction en français des spécifications XHTML 1.1 du W3C
http://www.la-grange.net/w3c/xhtml11/ [fr]