HTML (HyperText Markup Language) est le langage qui structure le contenu d’une page web.
Il permet par exemple d’afficher du texte, des images, des liens, des tableaux ou des formulaires.
CSS (Cascading Style Sheets) est le langage qui permet de styliser une page web.
Il gère les couleurs, polices, tailles, alignements, mises en page, marges, animations, etc.
HTML construit la structure, CSS améliore le visuel.
On peut comparer HTML à un squelette et CSS aux vêtements.
Voici le modèle standard d’une page web :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma première page</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
<h1> à <h6> : titres
<p> : paragraphe
<a> : lien hypertexte
<img> : image
<div> : conteneur générique
<span> : conteneur en ligne
<ul>, <ol>, <li> : listes
<header>, <footer>, <nav>, <section> : balises sémantiques
Les attributs complètent les balises.
Exemples :
<a href="https://example.com">Un lien</a>
<img src="image.jpg" alt="Description">
Dans un fichier externe
<link rel="stylesheet" href="style.css">
Dans l’en-tête via <style>
<style>
p { color: blue; }
</style>
Dans une balise via style=""
<p style="color: red;">Texte rouge</p>
Balise : p { }
Classe : .ma-classe { }
Identifiant : #mon-id { }
Descendant : div p { }
Couleurs : color, background-color
Texte : font-size, font-family, text-align
Mise en forme : margin, padding, border
Dimensions : width, height
Mise en page : display, flex, grid
body {
font-family: Arial;
}
h1 {
color: darkgreen;
}
p {
font-size: 16px;
line-height: 1.5;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exemple</title>
<style>
body { font-family: Arial; background-color: #f0f0f0; }
h1 { color: navy; }
p { background-color: white; padding: 10px; }
</style>
</head>
<body>
<h1>Titre stylisé</h1>
<p>Ceci est un paragraphe dans un cadre blanc.</p>
</body>
</html>
Créer une page simple contenant :
un titre
une image
deux paragraphes
une zone stylisée avec CSS
une liste
Ouvre un playground (JSFiddle, CodePen ou W3Schools TryIt).
Copie-colle le code de départ ci-dessous.
Modifie les éléments demandés au fur et à mesure.
Observe immédiatement les changements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page d'essai</title>
<style>
body { font-family: Arial; }
h1 { color: darkred; }
.bloc {
background-color: #eee;
padding: 20px;
margin-top: 20px;
border-left: 4px solid #555;
}
</style>
</head>
<body>
<h1>Mon titre</h1>
<p>Ceci est mon premier paragraphe.</p>
<p>Ceci est mon second paragraphe.</p>
<img src="https://via.placeholder.com/150" alt="Image exemple">
<div class="bloc">
<h2>Liste d'exemple</h2>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</div>
</body>
</html>
Change les couleurs du texte ou du fond.
Modifie la taille de la police.
Ajoute un troisième paragraphe.
Remplace l’image par une image de ton choix.
Ajoute une classe ou un identifiant pour tester d'autres sélecteurs CSS.
Dans WordPress, allez dans :
Apparence → Thèmes → Ajouter
Dans la barre de recherche, écrivez Astra
Cliquez sur Installer
Cliquez sur Activer
Dans WordPress :
Extensions → Ajouter
Recherchez “Elementor Website Builder”
Cliquez : Installer → Activer
Elementor est maintenant prêt.
WordPress est :
un gestionnaire de contenu
un tableau de bord où l’on gère pages, articles, menus, médias
la “structure” du site
comparable au moteur d’une voiture
Ce qu’il gère :
l’architecture du site
les utilisateurs
les réglages
la sécurité
les extensions
Astra sert à définir :
la mise en page générale (header, footer, sidebar…)
les polices et couleurs par défaut
le style global du site
Comparaison :
Astra = la carrosserie et le style général, l'apparence du site
Il est léger, rapide, idéal pour Elementor.
Elementor sert à :
créer des pages en glisser-déposer
ajouter des sections, colonnes, boutons, images
construire des designs sur mesure
voir les modifications en direct
Comparaison :
Elementor = les outils de personnalisation avancée
L’apprenant construit page après page sans coder
Aller dans :
Pages → Ajouter
Nommer la page : Accueil
Publier
Aller dans :
Réglages → Lecture → Page d’accueil statique
Choisir Accueil
Retournez dans Pages
Cliquez sur Modifier avec Elementor
L’apprenant arrive dans l’interface visuelle :
À gauche : les widgets
Au centre : la page
En haut : le menu d’édition
Cliquez sur “+” pour ajouter une section
Choisissez une structure à 2 colonnes
Ajoutez un widget Titre à gauche
Ajoutez un widget Image à droite
Personnalisez la police, les couleurs
Ajouter un widget Bouton
Modifier le texte : “Me contacter”
Lier vers la page Contact
Une première page structurée, comprenant :
un titre
une image
un bouton
une section élégante