Home / Tutoriel HTML et CSS

Grâce à ce tutoriel, vous allez apprendre à 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ésuettes et en s'efforcant 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 ?

À ceux qui veulent apprendre comment créer des sites internet : je vais vous apprendre tout de suite la meilleur méthode de le faire (selon moi, car 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 aurrez le moins possible besoin d'en lire d'autres : j'espère être le plus exaustif possible (dans le cas contraire, merci de m'envoyer un e-mail) ;
À ceux qui connaissent le HTML (ou utilisent un éditeur graphique) mais qui n'ont pas une très bonne structure pour leur site : voici comment le refondre (même juste une 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 un récapitulatif (mémo) des balises HTML et propriétés CSS : elles sont fournies en annexes, et quasiment tout ce dont vous avez besoin est fourni en deux pages (pas besoin de naviguer longtemps dans plusieurs documentations pour trouver ce que l'on cherche) ;
Enfin, même si vous restez récalcitrant à l'édition manuelle, vous appréhendrez 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 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

Après avoir vu pourquoi la séparation du contenu (HTML) et de la forme (CSS) est essentielle et ses avantages par rapport à des éditeurs WYSIWYG classiques, nous nous intéresserons d'abord plus particulièrement au HTML. Vous serez invité à créer petit à petit vos pages en guise d'application : vous verrez, c'est simple et vous n'aurez pas parcouru le tutoriel pour rien. Ensuite, nous nous intéresserons au CSS et en apprendrons les bases, ceci est assez théorique, mais nécessaire. Enfin, nous reprendrons nos pages pour les mettre en forme, cette étape sera aussi faite petit à petit. À la fin de ces trois parties (ou deux, si vous passez la partie théorique), si vous jouez le jeu, vous repartirez avec un site internet prêt à mettre en ligne (ou à une page pilote que vous recopierez et ajusterez pour le reste du site). Il ne vous restera plus que la partie sur les techniques avancées en CSS pour en apprendre plus sur le sujet, et notamment si vous avez un site avec une structure complexe.

Vous trouverez également deux annexes : une listant toutes les balises du HTML (Strict) et une autre listant les propriétés CSS. Ces deux pages seront vos compagnions idéaux lorsque vous travaillerez sur votre site : vous y trouverez condensé tout ce que vous désirez. Vous pourrez également reprendre la page sur les techniques CSS pour y copier / coller directement de belles présentations.

Bonne lecture.

Table des matières

Ce tutoriel étant gros, je l'ai subdivisé en plusieures pages.
Si, comme moi, vous n'aimez pas ça, je vous propose de télécharger la version Offline du tutoriel complet.