Tutoriel HTML & CSS

Par Sébastien Laoût
Version 0.3

Ce tutoriel vous apprendra à créer des sites internet de manière à la fois simple et puissante.
Aucune connaissance préalable n'est requise : si c'est la première fois que vous apprenez le HTML, vous l'apprendrez correctement, sans les balises désuètes et en s'efforçant directement à séparer le contenu et la forme de votre site, vous évitant ainsi un "second apprentissage" plus tard.
En effet, nous utiliserons le HTML Strict pour le contenu, et le CSS pour la forme.

À qui s'adresse ce tutoriel ?

Pédagogie du tutoriel

Un peu plus bas sur cette page, nous commencerons par voir en quoi la séparation du contenu (HTML) et de la forme (CSS) est essentielle, ainsi que ses avantages par rapport aux éditeurs WYSIWYG classiques.

Puis, le tutoriel sera séparé en deux grandes parties théoriques. Nous nous intéresserons tout d'abord au HTML. Vous serez invité à créer petit à petit vos pages en guise d'application. Vous vous rendrez compte que cette partie est relativement simple et fort utile, même si vous avez déjà une connaissance des bases du HTML. Puis, nous nous intéresserons au CSS et en apprendrons les bases. Ceci sera assez théorique, mais nécessaire et toujours agrémenté d'exemples.

Ensuite, nous passerons à la pratique avec pas moins de deux parties conséquentes : tout d'abord en apprenant des techniques et exemples de mises en forme faciles et utiles, puis en reprenant nos pages HTML pour les mettre en forme grâce à une maquette de site internet typique. Toutes ces étapes seront effectuées progressivement et, si vous jouez le jeu, vous repartirez avec un site internet prêt à mettre en ligne. Ou vous aurez tout du moins une page pilote que vous pourrez recopier et ajuster pour le reste de votre site.

Nous terminerons par une introduction aux nouvelles fonctionnalités offertes par le CSS 3, et par un ensemble de liens vous permettant d'approfondir les sujets de votre choix concernant la création de sites internet.

Ce tutoriel étant gros, il est subdivisé en plusieurs pages.
Si vous préférez, vous pouvez télécharger la version hors-ligne du tutoriel complet.
La dernière version de ce tutoriel étant toujours disponible à l'adresse http://slaout.linux62.org/html_css/.

Séparation du contenu et de la forme

Il a beaucoup été mention de séparation du contenu et de la forme dans les sections précédentes. Cette notion est essentielle. Voici ce qu'elle représente :

Le contenu : les pages HTML
Toutes les pages internet de votre site sont dans ce format.
Le HTML est le format de fichier contenant à la fois le message et la structure vos pages.
Il est formé de blocs qui servent à délimiter et décrire la signification de chaque information.
Par exemple, vous y écrirez des titres, des paragraphes, des liens, des listes à puces ou numérotées...
Mais en aucun cas ce fichier ne contiendra la façon d'afficher les informations, telles que la mise en gras ou la coloration de textes, l'ajustement de la police de caractères...
La forme : la feuille de style CSS
Le CSS est un ou plusieurs fichiers séparés qui définissent la mise en page et la maquette graphique des pages HTML.
C'est là et seulement là que vous ajouterez des couleurs, des images de fond, structurerez le texte en plusieurs colonnes...

Voici un schéma illustrant succinctement ce concept avec deux pages internet fictives et une feuille de style appliquée à ces deux pages.
Le contenu (les pages du site) décrit les données (le texte) et leur structure sémantique (certains textes sont des titres, d'autres des paragraphes, ou des liens...), le HTML ne fait qu'indiquer la signification du texte à l'ordinateur, sans jamais l'informer de la représentation graphique de ces informations. La présentation CSS, quant à elle, décrit comment afficher chaque type de texte :

Schéma proposant deux contenus HTML et une présentation CSS, ainsi que le résultat à l'écran

Je pense que vous commencez à saisir ce qu'est cette fameuse séparation.
Vous devez surement déjà entrevoir les avantages qui en découlent :

Les recommandations de ce tutoriel :
Nous travaillerons directement avec du HTML Strict, sans les balises de transition, et reconnu par tous les navigateurs.
Avec les tournures du style "Il est interdit de", nous nous référerons à ce format strict.
Il est parfois possible de passer outre ces interdictions (ou plutôt, recommandations) mais vous perdrez la compatibilité de vos pages avec les standards du Web.
Le but de justement travailler avec les standards : être quasiment sûr que les pages passent partout... et d'être reconnu non seulement par tous les navigateurs présents et à venir, mais aussi par les moteurs de recherches, etc.

HTML ou xHTML ?
Ce tutoriel utilise le HTML et non le xHTML car ce dernier n'est pas encore totalement utilisable dans Internet Explorer. Cependant, toutes les balises, propriétés, etc. sont données en minuscules et chaque attribut de balise HTML est entourée par des guillemets. Ces recommandations sont facultatives en HTML mais je vous conseille vivement de les suivre, car elles vous permettront de passer facilement et rapidement au xHTML (futur du HTML) sans devoir changer trop de choses si vous le souhaitez plus tard. Pour en savoir plus, vous pouvez lire XHTML :: Comment réussir. Le contenu de ce tutoriel reste valide, mais la syntaxe différera légèrement sur certains points.

Les éditeurs HTML

Un simple éditeur de texte basic, tel que Notepad sous Windows, suffit pour créer des fichiers HTML et CSS. Cependant pour améliorer la rapidité de production, un éditeur spécialisé est recommandé, ne serait-ce que pour la coloration syntaxique du code.

Sous Windows, Notepad2 est simple, agréable à utiliser, et très léger, il propose toutes les fonctionnalités que l'on est en droit d'attendre et peut amplement remplacer Notepad, notamment par sa simplicité et sa rapidité d'ouverture. Vous pouvez également opter pour Notepad++, un peu plus rustre, mais offrant de nombreuses autres fonctionnalités, tels que les onglets pour ouvrir toutes les pages du site dans une seule fenêtre.

Sous Mac OS X, TextMate est un éditeur très riche mais malheureusement payant. Smultron, plus simple, pourra convenir si vous ne souhaitez pas débourser d'argent. Enfin, l'édition Community de Aptana Studio ravira certainement beaucoup de personnes car offrant de gérer tout votre projet Web.

Sous Linux, il existe Quanta Plus. Il supporte la coloration syntaxique, et offre pas mal d'options. Comme par exemple, s'assurer que x lignes soient toujours visibles au dessus et en dessous du curseur, afficher les numéros de ligne, les retours à la ligne, la modification d'une balise HTML modifiant aussi la balise fermante... Mais aussi, et le plus important, il permet de définir des raccourcis claviers non seulement pour chaque balise, mais aussi pour autant de balises personnalisées que vous le souhaitez ! Par exemple, configurez un raccourci clavier pour <code></code> : sélectionnez un texte, pressez le raccourci et le texte est automatiquement entouré de balises code. Si vous ne voulez pas de la partie gestion de projets, KWrite est plus simple, et Kate permettra en plus l'ouverture de fichiers dans des onglets.

Organisation de votre site

Lorsque vous faites un site, pensez dès le début à une organisation de fichiers : vous pouvez soit mettre toutes les pages HTML dans le dossier racine, les fichiers dans un sous dossier images... Ou alors, si votre site est composé de plusieurs rubriques, faire un sous dossier par rubrique et placer tous les fichiers concernant une rubrique dans son dossier (en incluant le ou les fichiers HTML).

Lorsque vous nommez vos pages, fichiers et dossiers, il est conseillé de leur donner un nom court (mais descriptif) sans majuscules, espaces ou caractères accentués. En effet, certains serveurs font la distinction entre majuscules et minuscules. De même, vos visiteurs retiendront mieux des adresses courtes dont tous les caractères sont en minuscules. Il est recommandé d'utiliser les lettres minuscules, les chiffres et les caractères '.', '-' et '_'. Les autres caractères sont à éviter.

Voici un exemple d'arborescence et de nomenclature pour les fichiers d'un site simple :

Arborescence des fichiers d'un site simple

En ce qui concerne les images, il est recommandé de les compresser en .png pour la plupart des images (ou en .gif pour les graphismes ayant très peu de nuances, mais la qualité sera moins bonne), et en .jpg pour les photos. Le format .png est meilleur que le .gif car il est aussi sans perte ou limitation de couleurs ! Je vous recommande de l'utiliser pour une meilleure qualité. Cependant, Internet Explorer 6 et précédents rendent mal les .png avec plus d'un seul niveau de transparence : il vaut donc mieux se limiter à un seule couleur de transparence au maximum (de toute façon le format .gif ne permet pas non plus d'aller plus haut).

Testez votre site

Même si les formats HTML Strict et du CSS sont des standards du Web et donc reconnus par tous les navigateurs, il est fortement conseillé de tester vos pages Web (surtout les CSS) dans au moins deux navigateurs :

Validez votre site

L'action de validation signifie que vous envoyez vos pages HTML et / ou feuilles CSS à un programme qui va étudier vos fichiers et vous indiquer les endroits où il y a des erreurs. En pratique, vous enverrez vos pages au site internet du W3C, l'organisme ayant notamment définit les normes HTML et CSS. Ces programmes vont, par exemple, vous alerter si vous avez oublié de fermer une balise HTML, si vous avez utilisé une balises HTML à un endroit inapproprié, si vous avez fait une faute en écrivant le nom d'une propriété CSS, etc.

Valider ses fichiers permet non seulement de s'assurer que votre site est conforme aux recommandations du W3C, et donc passe sur tous les navigateurs le supportant, mais aussi pour corriger vos erreurs. Vous verrez ainsi qu'après quelques validations, vous aurez progressé assez rapidement dans la connaissance du HTML et du CSS et par la suite, le validateur ne vous affichera plus beaucoup d'erreurs, et vous préviendra plutôt d'erreurs inhabituelles.

Vous trouverez l'adresse des validateurs HTML et CSS dans la catégorie Outils de la page de liens de ce tutoriel.
Une fois que votre site passe l'étape de de validation avec succès, il peut arborer ces fameux logos :

Logos HTML Valid et CSS Valid

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 :
Disponible sur le Play Store