Comprendre HTML & CSS
Toute page web est ecrite avec deux langages : HTML decrit la structure (titres, paragraphes, images), CSS s'occupe du style (couleurs, polices, mise en page). Voici comment ils fonctionnent ensemble.
HTML et CSS : la difference
HTML
HyperText Markup Language. C'est le squelette de la page : il dit ce qui est un titre, un paragraphe, une image, un lien. Sans HTML, pas de contenu.
CSS
Cascading Style Sheets. C'est l'habillage : couleurs, polices, espacements, animations. Sans CSS, une page serait noir et blanc avec Times New Roman partout.
La structure d'un document HTML
<!DOCTYPE html>Indique au navigateur que le document est en HTML5
<html>Element racine qui englobe TOUT le contenu de la page
<head>Contient les metadonnees : titre, encodage, liens CSS, scripts
<body>Contient le contenu visible : textes, images, boutons, formulaires
<h1> a <h6>Titres hierarchises (h1 le plus important, h6 le moins)
<p>Paragraphe de texte
<a href='...'>Lien hypertexte qui mene a une autre page
<img src='...'>Image affichee dans la page
Les proprietes CSS essentielles
colorCouleur du texte
color: #e11d48;backgroundCouleur ou image de fond
background: #1e293b;font-sizeTaille du texte
font-size: 18px;marginEspace exterieur autour de l'element
margin: 20px;paddingEspace interieur dans l'element
padding: 10px;displayMode d'affichage : block, flex, grid, none
display: flex;Exemple complet
Voici une vraie page HTML qui combine structure (HTML) et style (CSS). Copie-colle ce code dans un fichierpage.htmlet ouvre-le dans un navigateur :
<!DOCTYPE html>
<html>
<head>
<title>Ma premiere page</title>
<style>
body { font-family: Arial; background: #f0f9ff; }
h1 { color: #7c3aed; }
p { line-height: 1.6; }
.badge { background: #fbbf24; padding: 4px 12px; border-radius: 8px; }
</style>
</head>
<body>
<h1>Bienvenue !</h1>
<p>Voici ma <span class="badge">premiere page web</span>.</p>
<a href="https://www.example.com">Cliquer ici</a>
</body>
</html>