Tutoriel HTML & CSS

À qui s'adresse ce tutoriel ?

• À ceux qui veulent apprendre comment créer des sites internet : je vais vous apprendre tout de suite la meilleure méthode de le faire. En effet, le HTML est un standard très riche et permissif. Sans un bon guide, il est possible de se perdre entre les différentes méthodes. Ce fut mon cas : mes premiers sites sont mal faits et ce n'est que petit à petit que j'en suis venu au HTML + CSS. Après ce tutoriel, j'espère que vous aurez le moins possible besoin d'en lire d'autres. J'espère être le plus exhaustif possible. Dans le cas contraire, merci de m'envoyer un e-mail ;
• À ceux qui connaissent le HTML ou utilisent un éditeur graphique, mais qui souhaitent améliorer la structure de leur site : voici comment le refondre, même juste en partie, ou en modifier la structure vers du CSS ;
• À ceux qui souhaitent apprendre rapidement la plupart des méthodes utiles en CSS pour se passer de tableaux et avoir un code propre et sain. Vous apprendrez à avoir des pages conformes aux standards du Web ;
• Pour avoir une liste de ressources permettant de compléter votre apprentissage. J'ai essayé d'offrir une liste de liens concise tout en étant pertinent et en touchant des aspects variés de la création de sites internet ;
• Enfin, même si vous restez récalcitrant à l'édition manuelle, vous appréhenderez sûrement différemment la création de sites Web. Par exemple, en s'efforçant de définir des titres et des listes, plutôt qu'en les mettant directement en forme. Même les logiciels WYSIWYG (les logiciels d'édition graphique de type What You See Is What You Get) permettent de baliser vos pages et de définir une feuille de style. Vous n'en sortirez que plus fort en les comprenant.

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 :

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 pages HTML sont organisées et structurées, lisibles autant par des humains que par des robots. En effet, les moteurs de recherche peuvent identifier les titres des pages, et classer votre site en y accordant une plus grande importance. Les personnes malvoyantes peuvent utiliser un logiciel de synthèse vocale qui saura prononcer les titres plus fort. J'ai utilisé les titres comme exemple frappant, mais l'ordinateur pouvant comprendre la structure des pages, beaucoup d'applications en prennent parti ;
• Vous ne définissez la maquette graphique d'un site une seule fois, dans un seul fichier. Vous pouvez ainsi la changer très simplement, une seule fois, que ce soit juste pour une petite modification ou pour la refonte complète de la charte du site ;
• Les pages HTML ne contiennent que l'essentiel et sont donc très légères à télécharger et rapides à s'afficher. De plus, la présentation étant dans un seul fichier, celui-ci n'a pas à être re-téléchargé à chaque page que les visiteurs téléchargent. Même si les connexions internet ont un très haut débit de nos jours, il ne faut pas oublier que l'internet sur téléphone portable, avec un débit bien plus lent, est de plus en plus en vogue. Ce qui ramène la problématique d'optimisation au cœur des débats ;
• Les fichiers HTML sont très clairs à éditer : il n'y a que le minimum de code, sans fioritures et sans s'occuper de la présentation, qui peut être déléguée à un graphiste.

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 :

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 :

• Mozilla Firefox : il est conseillé de tester dans ce navigateur avant Internet Explorer. En effet, Internet Explorer est le seul à ne pas respecter entièrement les standards (même s'il s'améliore constamment). Il est plus simple de développer votre site avec du CSS standard puis d'y apporter quelques modifications pour le faire fonctionner dans Internet Explorer que l'inverse ;
• Internet Explorer : c'est le navigateur le plus utilisé. Il est donc primordial de s'assurer que votre site est compatible ;
• Safari : c'est le navigateur utilisé par défaut par les possesseurs de Mac OS X. Il est donc important de s'assurer de ne pas se couper d'une partie des visiteurs. Safari est disponible pour Windows, ce qui vous facilitera la tâche. De plus, son moteur WebKit est utilisé dans l'iPhone, quelques autres téléphones, et est dérivé du moteur utilisé dans le navigateur Konqueror, très utilisé sous Linux, après Mozilla Firefox. Donc, s'assurer du bon fonctionnement de votre site dans Safari vous assurera également de sa validité avec plusieurs autres navigateurs ;
• Opera : ce navigateur respectant les standards autant que Mozilla Firefox et Safari, votre site devrait être affiché de la même façon dans Opera, que certains surfeurs préfèrent. Son moteur Opera Mobile est également utilisé dans certains téléphones portable et sur la console de jeu Wii ;
• Lynx : si vous devez réaliser un site accessible aux personnes malvoyantes (pour un site gouvernemental, par exemple), il est intéressant de vérifier votre site dans un navigateur textuel comme celui-ci. Ici, les images, le CSS et le Javascript ne sont pas pris en compte. Vous verrez le site tel qu'une personne malvoyante peut l'entendre avec un logiciel de synthèse vocal, ou le lire avec un périphérique braille. Vous le verrez également tel que les moteurs de recherche le perçoivent afin d'en déduire sa structure et sa pertinence.

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 :

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 :