Cours Complet : HTML, CSS et JavaScript
pour Débutants
Introduction
Bienvenue dans ce cours dédié aux fondamentaux du développement web. Que vous souhaitiez
créer votre premier site internet, comprendre comment fonctionnent les pages que vous visitez au
quotidien, ou vous lancer dans une carrière de développeur, vous êtes au bon endroit.
Ce cours est conçu pour des débutants complets. Aucune connaissance en programmation n'est
requise. Nous allons avancer pas à pas, en alternant théorie et pratique, pour vous donner toutes
les clés nécessaires à la création de pages web interactives et modernes.
Pourquoi apprendre le HTML, le CSS et le JavaScript ?
Ces trois langages sont les piliers du développement web frontal (Front-End). Chacun a un rôle
spécifique et complémentaire :
HTML (HyperText Markup Language) : C'est le squelette de votre page web. Il
permet de structurer le contenu (titres, paragraphes, images, liens, etc.).
CSS (Cascading Style Sheets) : C'est la peau et le maquillage. Il permet de mettre en
forme et de styliser les éléments HTML (couleurs, polices, mise en page, etc.) pour
rendre votre site attractif et agréable à regarder.
JavaScript : C'est le cerveau et les muscles. Il rend votre page web interactive et
dynamique (gérer des clics, animer des éléments, récupérer des données, etc.).
En somme, le HTML structure, le CSS embellit, et JavaScript anime.
Prérequis et environnement de travail
Avant de commencer, assurez-vous de disposer de :
1. Un ordinateur et une connexion internet.
2. Un navigateur web moderne (Google Chrome, Mozilla Firefox, Microsoft Edge, etc.).
3. Un éditeur de texte pour écrire votre code. Nous vous recommandons Visual Studio
Code, un éditeur gratuit, puissant et très utilisé par les professionnels. Vous pouvez
également utiliser des éditeurs plus simples comme Notepad++ (Windows) ou Sublime
Text.
Partie 1 : Le HTML - Structurez votre contenu
Chapitre 1 : Qu'est-ce que le HTML ?
Le HTML est un langage de balisage. Cela signifie qu'il utilise des balises (ou tags) pour décrire
la structure et le sens du contenu d'une page web. Ces balises sont des mots-clés encadrés par des
chevrons, comme <balise>.
Chapitre 2 : Structure de base d'une page HTML
Tout document HTML commence par une structure minimale. Voici le code de base :
html
<!DOCTYPE html><html lang="fr"><head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon premier site</title></head><body> <!-- Le contenu visible de ma
page va ici --></body></html>
Explication des balises :
<!DOCTYPE html> : Indique au navigateur qu'il s'agit d'un document HTML5.
<html> : La balise racine qui englobe toute la page.
<head> : Contient des informations sur la page (métadonnées) qui ne sont pas affichées
directement. On y trouve le titre de la page (<title>), l'encodage des caractères (<meta
charset="UTF-8">), etc.
<body> : C'est le corps de la page. Tout ce qui est écrit entre les balises <body> et
</body> sera visible par l'utilisateur dans le navigateur.
Chapitre 3 : Les balises de contenu essentielles
Voici les balises les plus courantes pour structurer votre contenu :
Balise Description Exemple
<h1> à Titres, du plus important (<h1>) au moins <h1>Bienvenue sur mon site</h1>
<h6> important (<h6>).
<p> Paragraphe de texte. <p>Ceci est un paragraphe.</p>
<a
<a>
Lien hypertexte. L'attribut href définit la href="[Link]
destination. sur Google</a>
<img>
Image. Les attributs src (source) et alt <img src="[Link]"
(texte alternatif) sont obligatoires. alt="Description de l'image">
<ul> et Listes non ordonnées (<ul>) et ordonnées <ul><li>Item 1</li><li>Item
<ol> (<ol>). Les éléments sont des <li>. 2</li></ul>
<div>
Conteneur générique pour regrouper d'autres <div class="header">...</div>
éléments.
<span> Conteneur en ligne pour styliser une partie <p>Ceci est un <span
de texte. style="color:red;">mot</span>
rouge.</p>
Chapitre 4 : Les attributs HTML
Les balises peuvent avoir des attributs qui fournissent des informations supplémentaires. Ils
s'écrivent toujours sous la forme nom="valeur". Les plus importants sont :
id : Identifiant unique pour un élément.
class : Classe pour regrouper plusieurs éléments et leur appliquer un même style.
style : Permet d'appliquer directement du CSS à un élément (à utiliser avec parcimonie).
Exercice pratique HTML
Objectif : Créez votre première page web.
1. Créez un nouveau fichier nommé [Link].
2. Copiez-y la structure de base.
3. Dans le <body>, ajoutez :
o Un titre principal <h1> avec le nom de votre site.
o Un paragraphe <p> de présentation.
o Une liste de vos hobbies avec <ul> et <li>.
o Un lien vers votre réseau social préféré avec <a>.
o Une image (téléchargez une image ou utilisez une URL en ligne).
Partie 2 : Le CSS - Mettez en forme et embellissez
Chapitre 1 : Qu'est-ce que le CSS ?
Le CSS est un langage qui permet de définir l'apparence des éléments HTML. Il fonctionne sur
un principe de règles. Une règle CSS est composée d'un sélecteur (qui cible un élément HTML)
et d'un bloc de déclarations (les styles à appliquer).
Chapitre 2 : Comment intégrer le CSS ?
Il existe trois façons d'ajouter du CSS à votre page HTML :
4. CSS externe (Recommandé) : Dans un fichier .css séparé, que vous liez à votre HTML
avec la balise <link> dans le <head>.
5. html
6. <head> <link rel="stylesheet" href="[Link]"></head>
7. CSS interne : Dans la balise <style> placée dans le <head> de votre page.
8. CSS en ligne : Directement dans l'attribut style d'une balise HTML (à éviter pour du
code maintenable).
Chapitre 3 : Syntaxe de base d'une règle CSS
css
sélecteur { propriété: valeur; propriété: valeur;}
Sélecteur : Cible l'élément à styliser.
Propriété : L'aspect que vous voulez modifier (ex: color, font-size, background-
color).
Valeur : La nouvelle valeur pour cette propriété.
Chapitre 4 : Les sélecteurs CSS
Sélecteur de type : Cible tous les éléments d'un type donné. Ex: p { color: blue; }.
Sélecteur de classe : Cible les éléments avec une classe spécifique. On utilise un point ..
Ex: .ma-classe { font-weight: bold; }.
Sélecteur d'ID : Cible un élément avec un ID spécifique. On utilise un dièse #. Ex:
#mon-id { background-color: yellow; }.
Chapitre 5 : Les propriétés CSS incontournables
Voici quelques propriétés pour commencer à styliser vos pages :
Propriété Description Exemple
color Couleur du texte. color: red; ou color: #FF0000;
background-
color Couleur de fond. background-color: lightblue;
font-size Taille de la police. font-size: 16px;
font-family: Arial, sans-
font-family Police de caractères. serif;
width et height Largeur et hauteur. width: 50%;
margin Marge extérieure. margin: 10px;
padding
Marge intérieure (espacement padding: 20px;
interne).
border Bordure. border: 1px solid black;
Exercice pratique CSS
Objectif : Stylisez la page HTML créée précédemment.
1. Créez un fichier [Link].
2. Liez-le à votre fichier [Link].
3. Dans [Link], écrivez des règles pour :
o Changer la couleur de fond de la page.
o Changer la couleur et la taille des titres.
o Centrer le texte de vos paragraphes.
o Ajouter une bordure et un fond de couleur à votre liste.
o Changer la couleur d'un lien lorsqu'on passe la souris dessus (utilisez le sélecteur
a:hover).
Partie 3 : Le JavaScript - Rendez votre page interactive
Chapitre 1 : Qu'est-ce que le JavaScript ?
JavaScript est un langage de programmation qui permet d'ajouter de l'interactivité et de la
dynamique à vos pages web. Il peut réagir aux actions de l'utilisateur (clic, survol, saisie),
modifier le contenu de la page en temps réel, et bien plus encore.
Chapitre 2 : Comment intégrer le JavaScript ?
Comme pour le CSS, il y a plusieurs méthodes. La plus courante est d'utiliser un fichier externe :
4. JavaScript externe : Dans un fichier .js séparé, que vous liez à votre HTML avec la
balise <script> (généralement placée juste avant la fin du <body> pour ne pas bloquer le
chargement de la page).
5. html
6. <body> <!-- ... contenu de la page ... --> <script
src="[Link]"></script></body>
7. JavaScript interne : Dans une balise <script> placée dans le <head> ou le <body>.
Chapitre 3 : Premiers pas avec la syntaxe JavaScript
Variables : Pour stocker des informations. On utilise let ou const.
javascript
let monNom = "Alice";const age = 30;
Types de données : Nombres, chaînes de caractères (texte), booléens (vrai/faux),
tableaux, objets.
Fonctions : Blocs de code réutilisables.
javascript
function direBonjour() { alert("Bonjour !");}
Conditions : Pour exécuter du code en fonction d'une condition (if, else).
Boucles : Pour répéter des actions (for, while).
Chapitre 4 : Interagir avec la page (Le DOM)
Le DOM (Document Object Model) est une représentation structurée de votre page HTML.
JavaScript peut le "voir" et le manipuler. C'est ainsi qu'il peut modifier le contenu ou le style de
la page.
Sélectionner un élément :
javascript
// Par son IDlet monTitre = [Link]("monTitre");// Par
sa classe (renvoie une liste)let mesParagraphes =
[Link]("maClasse");// Avec un sélecteur CSS (le
plus moderne et flexible)let monElement =
[Link](".maClasse");
Modifier un élément :
javascript
// Changer le [Link] = "Nouveau texte !";// Changer
le [Link] = "blue";// Ajouter une classe
[Link]("nouvelle-classe");
Réagir à un événement :
javascript
let monBouton =
[Link]("monBouton");[Link]("click",
function() { alert("Vous avez cliqué !");});
Exercice pratique JavaScript
Objectif : Ajoutez de l'interactivité à votre page.
1. Créez un fichier [Link].
2. Liez-le à votre fichier [Link].
3. Dans [Link], écrivez du code pour :
o Sélectionner votre titre principal avec JavaScript.
o Ajouter un écouteur d'événement sur le titre pour qu'il change de couleur
lorsqu'on clique dessus.
o Créer un bouton dans votre HTML (avec <button>) et, via JavaScript, afficher un
message dans la console ([Link]()) ou une alerte (alert()) lorsqu'on
clique dessus.
o Créer un deuxième bouton qui, lorsqu'on clique dessus, modifie le texte d'un
paragraphe.
Conclusion et Prochaines Étapes
Félicitations ! Vous avez maintenant les bases solides pour créer vos propres pages web. Vous
savez structurer le contenu avec HTML, le mettre en forme avec CSS, et le rendre interactif avec
JavaScript.
Pour continuer à progresser :
4. Pratiquez, pratiquez, pratiquez : La programmation s'apprend en faisant. Créez des
petits projets personnels (une page de présentation, un blog, un mini-jeu).
5. Explorez des ressources en ligne : Des sites comme MDN Web Docs, OpenClassrooms,
ou FreeCodeCamp proposent des cours et des tutoriels gratuits et complets.
6. Inspirez-vous des autres : Examinez le code source des sites web que vous aimez (clic
droit -> "Inspecter").
7. Apprenez des concepts plus avancés : Une fois à l'aise, vous pourrez vous intéresser au
responsive design, aux frameworks (React, [Link]), ou au développement back-end
([Link], PHP).
Le plus important est de rester curieux et de ne pas avoir peur de vous lancer. Bonne
continuation dans votre aventure de développeur web !