Tutoriel HTML & CSS

Références

TODO: séparer "Références HTML" et "Références CSS"

• Sommaire de référence sur les marques HTML : très complet, avec des exemples simples pour chaque balises, tout en offrant une navigation aisée. Ce sommaire remplace mon aide mémoire HTML car il est plus complet.
• Sommaire de référence sur le CSS : très complet, avec des exemples simples pour chaque propriétés, tout en offrant une navigation aisée. Ce sommaire remplace mon aide mémoire CSS car il est plus complet.
• Spécifications W3C officielles du HTML 4.01 : la traduction française des spécifications complètes du W3C concernant le HTML 4.01. Si vous cherchez un détail précis sur le HTML, c'est là qu'il faut se rendre.
• Spécifications W3C officielles du CSS 2 : la traduction française des spécifications complètes du W3C concernant le CSS 2. Si vous cherchez un détail précis sur le CSS, c'est là qu'il faut se rendre.
• Aide mémoires imprimables sur une ou deux pages A4 : TODO: Élire le meilleur mémento, en trouver un meilleur, ou en faire un propre à ce site.

        http://www.bizetfamily.net/index.php/2007/05/18/380-mementos-indispensable-pour-webmasters-developpeurs
           http://www.ilovejackdaniels.com/cheat-sheets/html-cheat-sheet/
              http://www.ilovejackdaniels.com/html-cheat-sheet.pdf
        http://ddata.over-blog.com/xxxyyy/0/08/58/81/pdf/mementoxhtmlv1.0.1.pdf
        http://www.iut-arles.up.univ-mrs.fr/ralbrand/memo/Memento_HTM.pdf

• Caractères spéciaux et entités HTML, par Alexandre Alapetite : liste des caractères monétaires, lettres grecques, caractères mathématiques...
• Web browser CSS support : un tableau très complet et utile décrivant le niveau de support du CSS par les différents navigateurs, incluant le CSS 3. Il existe également le même tableau pour les autres standards du Web.
• Jardin Zen css : ce site démontre la puissance du CSS en utilisant une méthode très simple. Il s'agit d'une page HTML qui ne change jamais, et sur laquelle vous pouvez appliquer de nombreuses feuilles de styles. Chaque feuille de style habille le site de façon radicalement différente. Ce site existe pour démontrer les avantages de la séparation du contenu (le code HTML est toujours le même) et la forme (les multiples feuilles de style CSS), ainsi que les possibilités offertes par le CSS, uniquement limitées par l'imagination des graphistes.
• Unicode et les jeux de caractères : il vous arrivera probablement d'avoir des problèmes d'accents en déplaçant vos pages sur votre serveur ou en changeant de système d'exploitation. Cette page explique de manière très simple un problème qui paraît complexe.

Avant de commencer la lecture, et pour vous donner l'envie d'apprendre,
Découvrez Snaky 360, le jeu de serpent addictif réalisé par l'auteur de ce tutoriel...

Créé entièrement en HTML, CSS et JavaScript, sans Flash
(sauf pour les musiques et effets sonores, en attendant HTML 5)
Bientôt, vous pourrez en faire de même !
Ou alors, jouez à sa version Android :

Pendant qu'on y est, je peux aussi vous présenter la carte du monde que j'ai réalisé :
en très grand format pour vos murs, au design naturel et artistique :

Compléments à ce tutoriel

• Les bases du xHTML : Un complément très utile à ce tutoriel. Il vous permettra de migrer du HTML au xHTML très facilement lorsque Internet Explorer supportera le xHTML de façon décente. À noter qu'avec ce tutoriel, j'ai fait en sorte de vous apprendre de bonnes pratiques vous demandant un minimum d'effort pour passer au xHTML
• Créer votre site Internet : un complément utile à ce tutoriel technique. Ce site vous donnera des conseils supplémentaires en design, et en gestion de sites internet.
• Methods to hide email addresses from page source (en anglais) : exposer son adresse de courriel sur son site internet risque de vous attirer les _foudres_ des personnes envoyant des messages publicitaires non sollicité. Afin d'éviter cela, ce site expose une pléthore de méthodes permettant de cacher votre adresse aux yeux robots récoltant ces adresses.
• Idées : référencement, Javascript, PHP --- accessibilité

Outils

• Firebug : une extension très utile pour Firefox. Elle vous permet de déboguer vos pages internet, au niveau du HTML et du CSS tout comme au niveau du Javascript. Elle vous fait remarquer vos erreurs, et son explorateur DOM (la structure interne de la page) vous fera gagner énormément de temps dans votre développement CSS. Un seul exemple : passez votre souris sur une balise et les marges et espacements seront colorés, vous faisant ainsi réaliser les erreurs de placement.
• Validateur HTML pour Firefox : contrairement à Firebug qui ne rapporte que les erreurs graves que le navigateur n'a pas pu corriger, cette extension Firefox valide en permanence vos pages HTML et affiche dans la barre de statut le nombre d'erreurs. Plus besoin d'envoyer une à une vos pages au validateur Web ci-dessous. Vous êtes prévenu dès la moindre erreur et vous pouvez la corriger rapidement. Cela évitera de vous laisser déborder, car habituellement on oublie de valider fréquemment les pages et les erreurs s'accumulent alors très vite. Non contente de valider vos pages HTML avec le validateur officiel, cette extension valide également vos pages avec TidyHTML, un outil très pratique qui vous permet de garder vos codes sources propres.
• Validateur HTML : donnez-lui une adresse de page Web ou votre code source HTML et il vous indiquera vos erreurs de conformité au standard HTML.
• Validateur CSS : donnez-lui une adresse de feuille de style ou votre code source CSS et il vous indiquera vos erreurs de conformité au standard CSS.
• Vérificateur grammatical de site Web : entrez une adresse de page Web et cet outil fera une vérification d'orthographe et de grammaire sur toutes les pages de votre site.

Graphisme

• Color Vision : ce site vous propose de percevoir les couleurs que perçoivent les personnes atteintes de déficiences de la vision, comme par exemple les daltoniens, mais il existe bien d'autres déficiences...
• Les couleurs du Web : mythes et réalités

Sites intéressants

• Openweb Group
• Cours et tutoriels Web sur Developpez.com
• Apprenez à créer votre site Web !, sur "Le Site du Zér0". Très complet.
• Tutoriel CSS, débuter avec HTML + CSS : une alternative intéressante à ce tutoriel. Il prend une page HTML et la met progressivement en forme grâce au CSS.
• Corecss.com (en anglais) : une mine de liens très intéressants.
• Oxygen Icons (en anglais) : je remercie les artistes ayant créé le thème d'icônes Oxygen, pour le bureau KDE 4, sous Linux. Elles sont sous licence Creative Common. Je m'en suis servi pour agrémenter ce tutoriel.

Faites une pause, vous l'avez bien mérité :
Découvrez Snaky 360, le jeu de serpent addictif réalisé par l'auteur de ce tutoriel...

Créé entièrement en HTML, CSS et JavaScript, sans Flash
(sauf pour les musiques et effets sonores, en attendant HTML 5)
Bientôt, vous pourrez en faire de même !
Ou alors, jouez à sa version Android :

Pendant qu'on y est, je peux aussi vous présenter la carte du monde que j'ai réalisé :
en très grand format pour vos murs, au design naturel et artistique :