Mémentos à télécharger
Fiche de deux pages prête à l'impression, permettant de se remémorer facilement les balises HTML/XHTML. Indispensable au webmaster débutant et au rédacteur Web.
Mémento de quatres pages, sous forme de fiches prêtes à l'impression, permettant de se remémorer facilement la syntaxe des feuilles de styles en cascade (CSS 2.1). Indispensable au webmaster débutant et très utile au développeur chevronné.
Fiche de deux pages, prête à l'impression, destinée à se remémorer les balises HTML de formulaires. Cette fiche complète le Mémento des balises HTML.
Bien démarrer...
Techniques pour bien démarrer ses pages HTML et ses feuilles de styles.
Cet outil en ligne permet de configurer et générer automatiquement le code d'une page (X)HTML de base avec choix de la DTD, des feuilles de styles, de 'lencodage, et même l'ajout de commentaires conditionnels IE.
Ce document contient toute une palette d'exemples d'utilisation de balises HTML courantes : emphase, citations, code, tableau, listes, etc. Il permet de tester les feuilles de styles et de vérifier leur capacité à présenter correctement les balises HTML standards.
Une feuille de style qui permet de véritablement construire la feuille de style à partir de 0. Elle élimine les mises en forme par défaut des navigateurs.
Une présentation très intelligente des fontes communes et de leurs substitutions. La page est accompagnée de nombreuses copie d'écran permettant de voir le rendu sur différents systèmes et navigateurs.
Permet de créer facilement une feuille de styles basées sur un rythme vertical, réputé plus plaisant à l'oeil.
Boutons graphiques et Sliding doors
Utiliser des boutons graphiques redimensionnables dans vos feuilles de styles CSS grâce aux techniques des portes coulissantes (Sliding doords).
Un excellent générateur de graphismes pour les interfaces utilisateurs du Web : boites, boutons, onglets avec dégradés, ombres, coins arrondis, texte, etc.
Titre original : "A List Apart: Articles: Sliding Doors of CSS".
La technique des Sliding Doors (portes coulissantes) permet de réaliser des boutons graphiques extensibles.
Sprites - images concaténées
Ressources sur l'utilisation des images concaténées (sprites) dans vos CSS. Le principe : une grosse image se charge plus vite que plusieurs petites.
Un tutoriel complet sur les différentes stratégies pour mettre en place des Sprites, c'est à dire d'utiliser des images concaténées dans vos CSS.
Une page permettant d'accéder à deux outils en ligne permettant de fabriquer des Sprites (=images concaténées) pour vos CSS.
Iconza est une page qui permet de générer une série de pictogrammes (flèches, email, enregistrement, avertissement, etc.) pour améliorer le repérage des éléments d'un site Web.
Grosse banque d'icones avec moteur de recherche, licences, et possibilité de rechercher des jeux complets
CSS et compatibilité aux navigateurs
Test en ligne qui affiche les sélecteurs CSS utilisables dans le navigateur courant.
Une présentation assez exhaustive des commentaires conditionnels d'Internet Explorer. Ils permettent de passer du code (HTML, CSS) à Internet Explorer, ou à une version précise d'IE, sans affecter les autres navigateurs. Indispensable pour corriger les bogues CSS d'IE.
Internet Explorer 5.5 et 6 ne reconnaissent pas les PNG translucides. Ce correctif dépasse cette limite.
Script HTC permettant de corriger le bogue d'Internet Explorer (ou plutôt la limitation) qui lui fait ignorer la prpriété :hover lorsqu'elle n'est pas sur <a>
Optimisation des CSS (et du site)
Une page présentant quelques outils permettant de concaténer et minifier les feuilles de styles CSS et/ou les javascripts.
Gabarits de page : Saint-Graal
Techniques pour réaliser un gabarit de page à 3 colonnes accessible et facilitant le référencement