Tutoriels pour apprendre HTML & CSS

Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux. D’autant plus que la majorité des tutoriels présents dans cette liste sont en français !

Mis à jour : 04/11/2012

[New!] Cours sur les CSS – Un cours complet et structuré proposé par Christophe F. pour Développez.com.

• Introduction aux CSS
• La syntaxe d’une règle CSS
• [A venir] Comment insérer des règles CSS dans un document (X)HTML

Learn HTML & CSS présente 10 leçons proposées par @shayhowe pour débuter avec HTML & CSS et développer votre premier site web :

1. Terminologie, syntaxe et introduction — Avant de commencer ce voyage dans HTML & CSS il est important de bien comprendre les termes utilisés.
2. Eléments et sémantique — Passage en revue des balises HTML et la sémantique qui leur est associée.
3. Modèle de boite et positionnement — Comment gérer la taille des éléments (largeur, hauteur, marges internes et externes, bordures) et comment les positionner (positionnement flottant, absolu, fixé).
4. Typographie — Mettre en gras, en italique, en exergue, utiliser les polices de caractère. Bref, tout ce qu’il faut savoir sur la gestion du texte pour rendre vos compositions plus belles et plus lisibles.
5. Fonds et dégradés — Les fonds sont un élément important pour attirer l’attention des visiteurs. Apprenez comment mettre une image en background ou un dégradé avec CSS3.
6. Listes (ordonnées, non-ordonnées et définition) — Les listes font partie de notre vie quotidienne : recettes, choses à faire, instructions, etc.
7. Images, audio et vidéo — Apprenez à gérer l’affichage des médias sur le web avec les dernières technologies et les fallbacks qui vont bien. Le point également sur les éléments figure et figcaption.
8. Formulaires — Les bases concernant les formulaires, les bonnes pratiques, des exemples.
9. Données tabulaires (tableaux) — La gestion des tableaux peut s’avérer complexe. Cette page fait le point sur chaque élément à connaitre.
10. Bonnes pratiques de développement et ressources — Les bonnes pratique de développement avec HTML & CSS : balisage sémantique et valide, bonne utilisation des attributs (notamment title et alt), séparation du fond et de la forme, les commentaires, les préfixes vendeurs, le regroupement et l’alignement des déclarations, etc.

Un bien joli site très didactique qui donne, pour chaque rubrique, l’ensemble des éléments et des attributs à prendre en compte avec de nombreux exemples pratiques. Un must-read (et oui, toutes ces bonnes choses sont écrites en anglais). Via @pomeh

CSS Débutant — Si vous êtes plus à l’aise avec le français, je vous invite à consulter le site de @PascaleLC où vous pourrez cultiver les standards du web :

1. Premiers pas en CSS — Pour appréhender progressivement et facilement les feuilles de style et les rudiments du HTML
2. Tutoriels CSS — Techniques pour réaliser des boutons, des formulaires, des menus, etc.
3. CSS3 – Créer des ombres, arrondir les coins, ou encore adapter ses pages aussi bien aux grands écrans qu’aux smartphones.
4. Boite à outils — Besoin d’un générateur de CSS ou de bouton, d’outils de développement ou d ‘une liste de discussion peuplée de gens compétents et sympas ? C’est là que ça se passe.

CSS : l’Art & la Science — Encore en français — et suggéré par LeonsaysHi –, ce tutoriel empreint de poésie et d’humour aborde avec intelligence les neuf points suivants :

1. Un tango se danse à deux — HTML & CSS, attributs, sémantique, flux
2. Le pinceau CSS — Syntaxe, sélecteurs, héritage
3. Au plaisir des yeux — Color, font, text, word
4. L’abîme — Background, sprite
5. La dimension de nos espérances — Height, width, margin, padding, border
6. Au vent favorable — Float, clear
7. La prise, l’empire du désir — Position : relative, absolute, fixed, static
8. Pratiques de base — Le petit bassin
9. Bonnes pratiques — Le grand bassin

Cours de XHTML conforme et accessible – Ce cours proposé par Normand Lamoureux est conçu pour vous permettre d’apprendre le XHTML 1.0 (langage de balisage hypertexte extensible). Un concentré de bonnes pratiques pour créer des pages Web qui répondent aux normes de qualité du W3C. 

Plan de cours :

1. Les outils
2. Balisage et absence de balisage
3. Les en-têtes et les paragraphes
4. Créer et imbriquer des listes
5. Votre premier fichier valide
6. Parenthèse sur le rôle du langage CSS
7. Faire des citations
8. Le gras, l’italique et compagnie
9. Créer des liens hypertextes

 

Articles sur le même sujet

• Check your <body> avec le W3C
• Quelques notes — Programme de formation HTML & CSS
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours
• Quelques notes sur la balise h1 avec HTML5
• HTML5 et CSS pour l'intégrateur web

10 commentaires » | Publié le Mercredi 18 avril 2012 dans HTML & CSS
Vous pouvez laisser un commentaire ou un trackback depuis votre site.