Logo de pixelpirate, développeur créatif indépendant
Tasse posée sur un carnet de notes sur laquelle figure une fleur de passiflore

HTML & CSS – 01 – Introduction

Introduction

Le HTML et le CSS peuvent paraitre intimidants, mais ils ne devraient pas l’être ! Dans cette série de tutoriels, je vais vous accompagner pas à pas à travers les bases nécessaires pour créer des pages web élaborées. Aucune expérience préalable en programmation ne vous sera nécessaire, nous commencerons de zéro.

Ces tutoriels sont conçus pour être une ressource francophone gratuite et exhaustive d’introduction au HTML et au CSS. Ils se basent sur la documentation officielle et comportent plus d’une centaine d’exemples. Installez-vous confortablement, prenez une tasse de thé ou de café, et mettons-nous au travail !

Apprentissage pratique

Ce tutoriel repose sur l’apprentissage par la pratique. Pour en tirer le meilleur parti, il est recommandé de reproduire les exemples qui accompagnent les informations théoriques, en les saisissant à la main, plutôt que par copier-coller. Cette pratique vous permettra d’être acteur de votre apprentissage en plus de vous permettre d’acquérir une mémoire musculaire.

HTML, CSS & JavaScript

Le fonctionnement d’une page Web repose sur trois langages étroitement liés, chacun ayant un rôle bien défini :

  • HTML (HyperText Markup Language), pour le contenu brut
  • CSS (Cascading Style Sheets), pour la mise en page
  • JavaScript, pour l’interaction

En HTML, un paragraphe de texte se présente de la manière suivante :

1

<p>Ceci est un paragraphe.</p>

En CSS, on définit sa taille et sa couleur :

1
2
3
4

p {
	font-size: 18px;
	color: red;
}

En JavaScript, on lui ajoutera des instructions avancées à réaliser, lors du clic par exemple

1
2
3

document.querySelector("p").addEventListener("click", (event) => {
	console.log("Quelqu'un a cliqué sur ce paragraphe !");
});

Vous remarquerez dans les exemples précédents que HTML, CSS et JavaScript sont des langages assez différents dans leur syntaxe, mais réfèrent tous au même paragraphe. Presque toutes les pages que vous visitez contiennent ces trois langages.

Fondamentaux

Maîtriser le HTML et le CSS peut être comparé à l’invention de l’imprimerie. C’est l’art de structurer et de mettre en page du contenu, puis à relier ces pages ensemble pour former un site web cohérent.

Comme l’imprimerie, le développement Web dispose d’une myriade d’outils qui lui rendent la tâche plus simple (Bootstrap, Tailwind, etc.). Ce tutoriel se concentre sur les connaissances préalables fondamentales, et ne les aborde pas directement. Vous pourrez élargir votre palette d’outils au fil de votre progression, mais il est crucial de débuter de manière minimaliste.

Les seuls outils que nous utiliserons seront :

  • Un navigateur Web moderne, comme Firefox ou Chrome
  • Un éditeur de texte dédié à la programmation, comme VSCode

Le choix de votre éditeur de texte compte beaucoup ! Un bon éditeur proposera des suggestions de code, une navigation et une recherche efficace dans votre code et vos fichiers. Ces fonctionnalités vous feront gagner du temps et seront essentielles pour votre progression. C’est ce que nous explorerons dans la seconde partie.

Pour continuer