Qu'est-ce que le HTML et le CSS ?
Pour comprendre le développement web, imaginez une maison : le HTML (HyperText Markup Language) est la structure — les murs, le toit, les pièces. Le CSS (Cascading Style Sheets) est la décoration — la peinture, les meubles, l'esthétique. Ensemble, ces deux langages forment la base de toute page web.
Votre premier fichier HTML
Pour commencer, vous n'avez besoin que d'un éditeur de texte (comme VS Code, gratuit) et d'un navigateur web. Créez un fichier nommé index.html et copiez ce code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Ma première page web est en ligne.</p>
</body>
</html>Ouvrez ce fichier dans votre navigateur et vous verrez votre première page web !
Les balises HTML essentielles à connaître
| Balise | Rôle | Exemple |
|---|---|---|
<h1> à <h6> | Titres (du plus grand au plus petit) | <h2>Mon titre</h2> |
<p> | Paragraphe de texte | <p>Mon texte.</p> |
<a> | Lien hypertexte | <a href="url">Cliquez</a> |
<img> | Image | <img src="photo.jpg" alt="Photo"> |
<ul> / <li> | Liste à puces | <ul><li>Élément</li></ul> |
<div> | Conteneur générique | <div class="section">...</div> |
Ajouter du style avec le CSS
Créez un fichier style.css dans le même dossier et liez-le dans votre HTML avec <link rel="stylesheet" href="style.css"> dans la balise <head>. Voici quelques propriétés CSS de base :
- color — couleur du texte (
color: blue;) - background-color — couleur de fond (
background-color: #f0f0f0;) - font-size — taille de la police (
font-size: 18px;) - margin / padding — espacement extérieur / intérieur
- border — bordure autour d'un élément
La structure d'une règle CSS
Une règle CSS se compose d'un sélecteur (ce qu'on cible) et de déclarations (ce qu'on applique) :
h1 {
color: #2563EB;
font-size: 32px;
text-align: center;
}Ressources gratuites pour aller plus loin
- MDN Web Docs (developer.mozilla.org) — la référence officielle, disponible en français
- freeCodeCamp — cours interactifs entièrement gratuits
- The Odin Project — parcours complet du débutant au développeur
La pratique est la clé : codez chaque jour, même 15 minutes, et vous progresserez rapidement !