Introduction à HTML & CSS

Accueil > Ressources > Les cours > Assistant web marketing > Introduction à HTML & CSS

1. Introduction au développement web

1.1. Qu’est-ce que le HTML ?

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.

1.2. Qu’est-ce que le CSS ?

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.

1.3. Comment fonctionnent HTML et CSS ensemble ?

HTML construit la structure, CSS améliore le visuel.
On peut comparer HTML à un squelette et CSS aux vêtements.

2. HTML : les bases essentielles

2.1. La structure minimale d’un document HTML (RDV sur JSFiddle)

Voici le modèle standard d’une page web :

<!DOCTYPE html>

<html>

<head>

<title>Ma première page</title>

</head>

<body>

<h1>Bienvenue</h1>

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

</body>

</html>

2.2. Les balises les plus courantes

<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

2.3. Les attributs

Les attributs complètent les balises.
Exemples :

3. CSS : les bases essentielles

3.1. Trois façons d’ajouter du CSS

Dans un fichier externe

Dans l’en-tête via <style>

<style>

p { color: blue; }

</style>

Dans une balise via style=""

<p style="color: red;">Texte rouge</p>

3.2. Les sélecteurs

Balise : p { }
Classe : .ma-classe { }
Identifiant : #mon-id { }
Descendant : div p { }

3.3. Les propriétés essentielles

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

3.4. Exemple simple

body {

font-family: Arial;

}

h1 {

color: darkgreen;

}

p {

font-size: 16px;

line-height: 1.5;

}

4. Assembler HTML et CSS

Exemple complet minimal

<!DOCTYPE html>

<html>

<head>

<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>

Activité Pratique : Construire une mini page web d’entraînement

Objectif

Créer une page simple contenant :

un titre
une image
deux paragraphes
une zone stylisée avec CSS
une liste

Instructions

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.

Code de départ

<!DOCTYPE html>

<html>

<head>

<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>

<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>

Manipulations possibles

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.

Module 2 – Installer le thème Astra

Étape 1 – Accéder à la bibliothèque de thèmes

Dans WordPress, allez dans :
Apparence → Thèmes → Ajouter

Étape 2 – Rechercher Astra

Dans la barre de recherche, écrivez Astra
Cliquez sur Installer
Cliquez sur Activer

Module 3 – Installer Elementor

Étape 1 – Ajouter une extension

Dans WordPress :
Extensions → Ajouter

Étape 2 – Installer Elementor

Recherchez “Elementor Website Builder”
Cliquez : Installer → Activer

Elementor est maintenant prêt.

Module 4 – Comprendre WordPress, Astra et Elementor (pédagogie)

A – WordPress : le système de gestion (CMS)

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

B – Astra : le thème (design global)

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.

C – Elementor : le constructeur visuel de pages

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

Module 5 – Démarrer la création du site

Première réalisation : construire une page d’accueil

Étape 1 – Configurer la page d’accueil

Aller dans :
Pages → Ajouter
Nommer la page : Accueil
Publier
Aller dans :
Réglages → Lecture → Page d’accueil statique
Choisir Accueil

Étape 2 – Éditer avec Elementor

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

Étape 3 – Construire la première section

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

Étape 4 – Créer un bouton d'appel à l'action

Ajouter un widget Bouton
Modifier le texte : “Me contacter”
Lier vers la page Contact

Résultat attendu pour vous

Une première page structurée, comprenant :

un titre
une image
un bouton
une section élégante

Page updated

Google Sites

Report abuse