Scribd
Importer
7 vues33 pages

Resume HTML CSS JavaScript

Ce document est un guide de révision complet pour HTML, CSS et JavaScript, destiné aux examens de 2025-2026. Il couvre les définitions, la structure de base des pages HTML, les balises essentielles, les formulaires, les tableaux, et les médias, ainsi que des conseils sur les erreurs fréquentes et les différences entre les concepts. Le document inclut également des exemples pratiques pour illustrer chaque point abordé.

Transféré par

Adnen Ba
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
7 vues33 pages

Resume HTML CSS JavaScript

Ce document est un guide de révision complet pour HTML, CSS et JavaScript, destiné aux examens de 2025-2026. Il couvre les définitions, la structure de base des pages HTML, les balises essentielles, les formulaires, les tableaux, et les médias, ainsi que des conseils sur les erreurs fréquentes et les différences entre les concepts. Le document inclut également des exemples pratiques pour illustrer chaque point abordé.

Transféré par

Adnen Ba
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

🌐 RÉSUMÉ COMPLET

HTML • CSS • JavaScript


Guide de révision complet pour les examens
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📅 2025–2026
🟠 HTML
HyperText Markup Language

1. Définition
HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer et
structurer le contenu des pages web. Il utilise des balises (tags) pour définir la signification et la
structure des éléments.

2. Structure de base d'une page HTML


Toute page HTML suit une structure standardisée. Voici la structure minimale obligatoire :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Page</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Bonjour le Monde!</h1>
<p>Mon premier paragraphe.</p>
<script src="[Link]"></script>
</body>
</html>
// Structure complète d'une page HTML

Élément Rôle Obligatoire?


<!DOCTYPE html> Déclare que c'est du HTML5 Oui

<html> Racine de tout le document Oui

<head> Métadonnées (non visible) Oui

<meta charset> Définit l'encodage (UTF-8 = Recommandé


tous les caractères)

<meta viewport> Rend la page responsive Recommandé


(mobile)

<title> Titre de l'onglet du navigateur Oui

<body> Contenu visible de la page Oui

3. Tableau des balises essentielles


Balise Syntaxe Rôle
<h1>…<h6> <h1>Titre</h1> Titres de niveau 1 à 6 (h1 =
plus grand)

<p> <p>Texte</p> Paragraphe de texte


Balise Syntaxe Rôle
<a> <a href="url">Lien</a> Lien hypertexte

<img> <img src="[Link]" alt="desc"> Affiche une image (balise


auto-fermante)

<ul> <ul><li>Item</li></ul> Liste non ordonnée (puces)

<ol> <ol><li>Item</li></ol> Liste ordonnée (numéros)

<li> <li>Élément</li> Élément de liste

<table> Voir section tableaux Tableau de données

<form> <form>...</form> Formulaire de saisie

<input> <input type="text"> Champ de saisie

<div> <div>...</div> Conteneur générique (bloc)

<span> <span>...</span> Conteneur générique (inline)

<br> <br> Saut de ligne (auto-fermante)

<hr> <hr> Ligne horizontale (auto-


fermante)

<strong> <strong>Texte</strong> Texte important (gras


sémantique)

<em> <em>Texte</em> Texte en italique (emphase)

<b> <b>Texte</b> Texte gras (visuel seulement)

<i> <i>Texte</i> Italique (visuel seulement)

<u> <u>Texte</u> Texte souligné

<small> <small>Texte</small> Texte plus petit

<mark> <mark>Texte</mark> Texte surligné

<sub> H<sub>2</sub>O Indice (en dessous)

<sup> x<sup>2</sup> Exposant (en haut)

<code> <code>[Link]()</code> Affiche du code en ligne

<pre> <pre>code multiline</pre> Code préformaté (conserve


espaces)

<blockquote> <blockquote>Citation</blockquote> Bloc de citation

<video> <video src="v.mp4" controls> Vidéo intégrée

<audio> <audio src="s.mp3" controls> Audio intégré

<iframe> <iframe src="url"> Contenu externe intégré

<script> <script src="[Link]"> Lien vers JavaScript

<link> <link rel="stylesheet" href="[Link]"> Lien vers CSS

<meta> <meta charset="UTF-8"> Métadonnées de la page


4. Balises sémantiques HTML5
Les balises sémantiques donnent du sens au contenu et améliorent le référencement (SEO) et
l'accessibilité.

Équivalent non-
Balise Rôle
sémantique
<header> En-tête de la page ou section <div id="header">

<nav> Menu de navigation <div id="nav">

<main> Contenu principal de la page <div id="main">

<section> Section thématique <div class="section">

<article> Article indépendant (blog, <div class="article">


actualité)

<aside> Contenu secondaire (sidebar) <div id="sidebar">

<footer> Pied de page <div id="footer">

<figure> Image avec légende <div class="image">

<figcaption> Légende d'une image <p class="caption">

<time> Date/heure <span>

<address> Adresse de contact <p>

<details> Contenu repliable JavaScript requis

<summary> Titre du contenu <details> JavaScript requis

<!-- Structure sémantique complète -->


<body>
<header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>Titre article</h2>
<p>Contenu...</p>
</article>
</section>
<aside>Publicité ou info secondaire</aside>
</main>
<footer>
<p>Copyright 2025</p>
</footer>
</body>
// Structure sémantique complète HTML5
5. Les Listes
Type Balise Exemple Rendu
Non ordonnée <ul> <ul><li>Chat</li><li>Chien</li></ul> • Chat • Chien

Ordonnée <ol> <ol><li>A</li><li>B</li></ol> 1. A 2. B

Description <dl> <dl><dt>HTML</dt><dd>Langage...</dd></dl> Terme :


Définition

<!-- Liste imbriquée -->


<ul>
<li>Fruits
<ul>
<li>Pomme</li>
<li>Banane</li>
</ul>
</li>
<li>Légumes</li>
</ul>
// Liste non ordonnée imbriquée

6. Tableaux HTML
Balise Rôle
<table> Conteneur principal du tableau

<thead> Groupe l'en-tête du tableau

<tbody> Corps du tableau (données)

<tfoot> Pied du tableau

<tr> Ligne du tableau (table row)

<th> Cellule d'en-tête (gras, centré par défaut)

<td> Cellule de données

colspan="N" Fusionne N colonnes horizontalement

rowspan="N" Fusionne N lignes verticalement

<table border="1">
<thead>
<tr>
<th>Nom</th>
<th>Age</th>
<th>Ville</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ahmed</td>
<td>22</td>
<td>Tunis</td>
</tr>
<tr>
<td colspan="2">Total</td> <!-- fusion 2 colonnes -->
<td>1 personne</td>
</tr>
</tbody>
</table>
// Tableau HTML complet avec fusion de colonnes

7. Formulaires HTML
Attribut/Balise Valeur Rôle
<form action> action="/submit" URL où envoyer les
données

<form method> method="POST" ou "GET" Méthode HTTP d'envoi

<input type> text, password, email, number, Type de champ


checkbox, radio, file, submit, reset,
date, color, range

<label> <label for="id">Texte</label> Étiquette liée à un champ

<textarea> <textarea rows="4"> Zone de texte multilignes

<select> <select><option>...</option></select> Menu déroulant

<button> <button Bouton cliquable


type="submit">Envoyer</button>

placeholder placeholder="Votre nom" Texte fantôme dans le


champ

required required Champ obligatoire

disabled disabled Champ désactivé

readonly readonly Champ lecture seule

min / max min="0" max="100" Valeurs min/max pour


number/date

pattern pattern="[A-Za-z]+" Validation par expression


régulière

<form action="/register" method="POST">

<label for="nom">Nom :</label>


<input type="text" id="nom" name="nom" placeholder="Votre nom" required>

<label for="email">Email :</label>


<input type="email" id="email" name="email" required>

<label for="mdp">Mot de passe :</label>


<input type="password" id="mdp" name="mdp" minlength="8" required>

<label for="age">Age :</label>


<input type="number" id="age" name="age" min="18" max="99">

<!-- Radio buttons -->


<input type="radio" name="genre" value="homme" id="h">
<label for="h">Homme</label>
<input type="radio" name="genre" value="femme" id="f">
<label for="f">Femme</label>
<!-- Case à cocher -->
<input type="checkbox" id="cgu" name="cgu">
<label for="cgu">J'accepte les CGU</label>

<!-- Menu déroulant -->


<select name="pays">
<option value="tn">Tunisie</option>
<option value="fr">France</option>
</select>

<button type="submit">Inscription</button>
<button type="reset">Effacer</button>
</form>
// Formulaire d'inscription complet

8. Images et Médias
Balise Attribut Rôle
<img> src="chemin" Source de l'image (obligatoire)

<img> alt="description" Texte alternatif (SEO +


accessibilité)

<img> width / height Dimensions en pixels

<img> loading="lazy" Chargement différé pour


performance

<video> src, controls, autoplay, loop, Vidéo avec contrôles


muted

<audio> src, controls, autoplay, loop Audio avec contrôles

<source> src, type Source alternative (multiple


formats)

<iframe> src, width, height, Intégrer un autre site/vidéo


allowfullscreen

<!-- Image simple -->


<img src="[Link]" alt="Ma photo" width="300" height="200">

<!-- Image responsive -->


<img src="[Link]" alt="Photo" style="max-width:100%;">

<!-- Vidéo avec fallback -->


<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Votre navigateur ne supporte pas la vidéo.
</video>

<!-- YouTube embed -->


<iframe width="560" height="315"
src="[Link]
allowfullscreen>
</iframe>
// Images et médias HTML
⚠️ Attention: L'attribut alt est OBLIGATOIRE sur toutes les images pour l'accessibilité et le
SEO.

9. Liens hypertextes
Type de lien Syntaxe Explication
Lien externe <a Ouvre un autre site web
href="[Link]

Lien interne <a href="[Link]">Contact</a> Vers une autre page du site

Ancre (#id) <a href="#section1">Aller à</a> Vers un endroit précis de la


page

Email <a Ouvre le client email


href="[Link]

Téléphone <a Appelle sur mobile


href="[Link]

Nouvel onglet target="_blank" Ouvre dans un nouvel


onglet

Télécharger download="nom" Force le téléchargement

10. ⚡ Différences importantes HTML


Concept 1 Concept 2 Différence clé
<b> <strong> <b> = gras visuel seulement.
<strong> = important
sémantiquement (lecteurs
d'écran, SEO)

<i> <em> <i> = italique visuel. <em> =


emphase sémantique

<div> <span> <div> = block (prend toute la


largeur). <span> = inline (reste
dans le flux)

id="x" class="x" id = unique sur la page. class =


peut se répéter sur plusieurs
éléments

href="" src="" href = lien/référence (a, link).


src = source de fichier (img,
script, video)

GET POST GET = données dans l'URL


(visible). POST = données
cachées dans le corps de la
requête

<input> <button> <input type='submit'> simple.


<button> peut contenir HTML à
l'intérieur
Concept 1 Concept 2 Différence clé
Block Inline Block = nouvelle ligne, prend
toute la largeur. Inline = dans le
texte

💡 Astuce examen: Pour mémoriser id vs class: pensez à la carte d'identité (unique) vs la


classe scolaire (plusieurs élèves).

11. ❌ Erreurs fréquentes en HTML


Erreur courante Mauvais exemple Bon exemple
Oublier de fermer une balise <p>Texte <div>... <p>Texte</p><div>...

Imbriquer incorrectement <b><p>texte</b></p> <p><b>texte</b></p>

Oublier alt sur img <img src="[Link]"> <img src="[Link]" alt="desc">

Mauvais doctype <!DOCTYPE HTML PUBLIC...> <!DOCTYPE html>

id dupliqué <div id="box">...<div id="box"> Utiliser des class à la place

Pas de charset (pas de meta charset) <meta charset="UTF-8">

Oublier le viewport (pas de meta viewport) <meta name="viewport" ...>


🔵 CSS
Cascading Style Sheets

1. Définition
CSS (Cascading Style Sheets) est le langage utilisé pour styliser et mettre en forme les pages HTML.
Il contrôle les couleurs, polices, espacements, animations, et la mise en page (layout).

2. Syntaxe CSS de base


/* Règle CSS = sélecteur + { déclarations } */
sélecteur {
propriété: valeur; /* Déclaration */
propriété2: valeur2;
}

/* Exemple concret */
h1 {
color: blue; /* couleur du texte */
font-size: 32px; /* taille du texte */
text-align: center; /* centrer */
}
// Syntaxe de base CSS

3. Sélecteurs CSS
Sélecteur Syntaxe Cible Priorité
Balise p{} Tous les <p> 1 (faible)

Classe .box { } Tous les class="box" 10

ID #header { } L'élément id="header" 100

Universel *{} Tous les éléments 0

Descendant div p { } Tout <p> dans un


<div>

Enfant direct div > p { } <p> enfant direct de


<div>

Adjacent h1 + p { } <p> juste après <h1>

Attribut input[type='text'] Input de type text

Pseudo-classe a:hover { } Lien survolé

Pseudo-classe li:first-child Premier enfant

Pseudo-classe li:nth-child(2) Deuxième enfant

Pseudo-élément p::before Avant le contenu de p

Pseudo-élément p::after Après le contenu de p

Groupement h1, h2, h3 { } h1 ET h2 ET h3


Sélecteur Syntaxe Cible Priorité
!important color: red !important; Force la règle (priorité Éviter
max)

/* Exemples de sélecteurs */
.card { border: 1px solid gray; } /* Classe */
#menu { background: navy; } /* ID */
nav a:hover { color: orange; } /* Pseudo-classe */
p::first-letter { font-size: 2em; } /* Pseudo-élément */
input[type='email'] { border: 2px solid blue; } /* Attribut */
li:nth-child(odd) { background: #f0f0f0; } /* Impairs */
// Exemples de sélecteurs CSS

4. Couleurs CSS
Format Exemple Description
Nom color: red; 147 noms prédéfinis

HEX color: #FF0000; #RRGGBB (rouge, vert, bleu


en hexadécimal)

HEX court color: #F00; Raccourci quand chaque paire


est identique

RGB color: rgb(255,0,0); Rouge Vert Bleu (0-255)

RGBA color: rgba(255,0,0,0.5); RGB + opacité (0=transparent,


1=opaque)

HSL color: hsl(0,100%,50%); Teinte, Saturation, Luminosité

HSLA color: hsla(0,100%,50%,0.8); HSL + opacité

5. Le Box Model CSS 📦


Chaque élément HTML est une boîte composée de 4 couches (de l'intérieur vers l'extérieur) :
+-------------------------------+
| MARGIN | ← Espace EXTÉRIEUR (transparent)
| +-------------------------+ |
| | BORDER | | ← Bordure
| | +-------------------+ | |
| | | PADDING | | | ← Espace INTÉRIEUR
| | | +-------------+ | | |
| | | | CONTENT | | | | ← Contenu (texte, image...)
| | | +-------------+ | | |
| | +-------------------+ | |
| +-------------------------+ |
+-------------------------------+

Propriété Exemple Rôle


margin margin: 20px; Espace EXTÉRIEUR (entre
éléments)
Propriété Exemple Rôle
margin margin: 10px 20px; Haut/Bas = 10px,
Droite/Gauche = 20px

margin margin: 5px 10px 15px 20px; Haut, Droite, Bas, Gauche
(sens horaire)

margin: auto margin: 0 auto; Centrer horizontalement un


bloc

padding padding: 15px; Espace INTÉRIEUR

border border: 2px solid red; Bordure (épaisseur, style,


couleur)

border-radius border-radius: 10px; Coins arrondis

border-radius: 50% border-radius: 50%; Cercle parfait

box-sizing box-sizing: border-box; Inclut padding+border dans la


largeur

width / height width: 300px; Largeur / Hauteur du contenu

max-width max-width: 1200px; Largeur maximale

min-height min-height: 100vh; Hauteur minimale

💡 box-sizing: border-box: Toujours mettre * { box-sizing: border-box; } en début de CSS. Ça


évite les calculs de largeur compliqués.

6. Display & Position


Propriété Valeur Comportement
display block Prend toute la largeur, nouvelle
ligne (div, p, h1)

display inline Dans le flux, taille du contenu


(span, a, strong)

display inline-block Inline mais peut avoir


width/height

display flex Conteneur Flexbox

display grid Conteneur Grid

display none Cache complètement l'élément


(pas d'espace)

visibility hidden Cache mais conserve l'espace

position static Normal (par défaut)

position relative Décalé par rapport à sa


position normale

position absolute Positionné par rapport au


parent positionné
Propriété Valeur Comportement
position fixed Fixé par rapport à la fenêtre
(navbar sticky)

position sticky Normal puis fixed quand on


défile

top/left/right/bottom top: 10px; Utilisé avec position (sauf


static)

z-index z-index: 100; Ordre en profondeur (qui passe


devant)

overflow overflow: hidden; Que faire si le contenu dépasse

7. Flexbox
Flexbox est un système de mise en page 1D (une direction). Parfait pour aligner des éléments en
ligne ou en colonne.
/* Activer Flexbox sur le conteneur */
.container {
display: flex;
flex-direction: row; /* row | column | row-reverse */
justify-content: center; /* axe principal */
align-items: center; /* axe transversal */
flex-wrap: wrap; /* passer à la ligne si nécessaire */
gap: 20px; /* espace entre éléments */
}

/* Sur les enfants (flex items) */


.item {
flex: 1; /* grandir pour remplir l'espace */
flex-grow: 1; /* facteur de croissance */
flex-shrink: 0; /* ne pas rétrécir */
flex-basis: 200px; /* taille de base */
align-self: flex-end; /* override align-items pour cet item */
order: 2; /* changer l'ordre d'affichage */
}
// Flexbox - conteneur et items

Propriété Valeurs Rôle (Conteneur)


justify-content flex-start, flex-end, center, Alignement sur l'axe principal
space-between, space-around,
space-evenly

align-items flex-start, flex-end, center, Alignement sur l'axe


stretch, baseline transversal

flex-direction row, column, row-reverse, Direction des items


column-reverse

flex-wrap nowrap, wrap, wrap-reverse Retour à la ligne

gap gap: 10px 20px; Espace entre les items (row-


gap col-gap)
8. CSS Grid
Grid est un système de mise en page 2D (lignes ET colonnes). Parfait pour les layouts complexes.
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr; /* 3 colonnes */
grid-template-rows: 80px auto 60px; /* 3 lignes */
gap: 10px; /* espace entre cellules */
grid-template-areas:
'header header header'
'sidebar main main '
'footer footer footer';
}

.header { grid-area: header; }


.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Raccourcis pour colonnes répétées */


.grid { grid-template-columns: repeat(3, 1fr); } /* 3 colonnes
égales */
.grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /*
responsive */

/* Placement manuel d'un item */


.special {
grid-column: 1 / 3; /* de colonne 1 à 3 (span 2 colonnes) */
grid-row: 2 / 4; /* de ligne 2 à 4 */
}
// CSS Grid - layout complet

Propriété Exemple Rôle


grid-template-columns repeat(3, 1fr) Définit les colonnes

grid-template-rows 100px auto Définit les lignes

gap gap: 20px Espace entre cellules

grid-area grid-area: header Nomme la zone pour template-


areas

grid-column 1/3 L'item s'étend de la colonne 1 à


3

grid-row 2/4 L'item s'étend de la ligne 2 à 4

fr 1fr Fraction de l'espace disponible

auto-fit + minmax repeat(auto-fit, minmax(250px, Colonnes responsives


1fr)) automatiques

9. Typographie
Propriété Exemple Rôle
font-family font-family: 'Arial', sans-serif; Police de caractères

font-size font-size: 16px; Taille du texte

font-weight font-weight: bold; ou 700; Épaisseur (100-900)


Propriété Exemple Rôle
font-style font-style: italic; Normal, italic, oblique

line-height line-height: 1.6; Interlignage

letter-spacing letter-spacing: 2px; Espacement entre lettres

text-align text-align: center; Alignement (left, center, right,


justify)

text-decoration text-decoration: underline; Soulignement, barré, etc.

text-transform text-transform: uppercase; MAJUSCULES, minuscules,


Capitalize

text-shadow text-shadow: 2px 2px 4px gray; Ombre du texte

white-space white-space: nowrap; Gestion des espaces/retours

word-break word-break: break-all; Coupure des mots longs

10. Background (Arrière-plan)


Propriété Exemple Rôle
background-color background-color: #f0f0f0; Couleur de fond

background-image background-image: url('[Link]'); Image de fond

background-size background-size: cover; cover=remplit tout,


contain=visible entier

background-position background-position: center; Position de l'image

background-repeat background-repeat: no-repeat; Répétition de l'image

background-attachment background-attachment: fixed; Effet parallaxe

background (raccourci) background: url('[Link]') Tout en une propriété


center/cover no-repeat;

Dégradé linéaire background: linear-gradient(to Dégradé


right, red, blue);

Dégradé radial background: radial- Dégradé circulaire


gradient(circle, red, blue);

11. Animations et Transitions


/* ══ TRANSITION ══ */
/* Changement progressif quand une propriété change */
.btn {
background: blue;
transition: background 0.3s ease; /* propriété durée timing */
}
.btn:hover { background: red; } /* déclenché au survol */

/* ══ ANIMATION ══ */
/* D'abord définir les keyframes */
@keyframes bouncer {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}

/* Ensuite appliquer l'animation */


.ball {
animation: bouncer 1s ease-in-out infinite;
/* nom durée timing répétition */
}

/* ══ TRANSFORM ══ */
.box {
transform: rotate(45deg); /* rotation */
transform: scale(1.5); /* agrandir x1.5 */
transform: translateX(50px); /* déplacer horizontalement */
transform: skew(10deg); /* incliner */
}
// Transitions, Animations et Transforms

Propriété animation Valeur exemple Rôle


animation-name bouncer Nom du @keyframes

animation-duration 1s Durée

animation-timing-function ease, linear, ease-in-out Courbe de vitesse

animation-iteration-count infinite, 3 Nombre de répétitions

animation-direction alternate Normal, reverse, alternate

animation-delay 0.5s Délai avant début

animation-fill-mode forwards État final après animation

12. Responsive Design & Media Queries


Le responsive design adapte la mise en page à la taille de l'écran. On utilise les media queries pour
ça.
/* Mobile First: on code d'abord pour mobile, puis on adapte */

/* Styles de base (mobile) */


.container { width: 100%; padding: 10px; }
.grid { grid-template-columns: 1fr; } /* 1 colonne sur mobile */

/* Tablette (768px et +) */
@media (min-width: 768px) {
.container { max-width: 768px; margin: 0 auto; }
.grid { grid-template-columns: repeat(2, 1fr); } /* 2 colonnes */
}

/* Desktop (1024px et +) */
@media (min-width: 1024px) {
.container { max-width: 1200px; }
.grid { grid-template-columns: repeat(3, 1fr); } /* 3 colonnes */
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: white; }
}
/* Impression */
@media print {
nav, footer { display: none; }
}
// Media Queries - approche Mobile First

Breakpoint commun Taille Cible


xs < 576px Petit mobile

sm ≥ 576px Mobile normal

md ≥ 768px Tablette

lg ≥ 1024px Laptop

xl ≥ 1280px Desktop

2xl ≥ 1536px Grand écran

13. Variables CSS (Custom Properties)


/* Déclarer des variables dans :root */
:root {
--primary-color: #264DE4;
--font-size-base: 16px;
--spacing-lg: 32px;
--border-radius: 8px;
}

/* Utiliser les variables */


.btn {
background-color: var(--primary-color);
font-size: var(--font-size-base);
padding: var(--spacing-lg);
border-radius: var(--border-radius);
}

/* Valeur par défaut si variable non définie */


.box { color: var(--text-color, black); }
// Variables CSS - réutilisabilité

14. ⚡ Différences importantes CSS


Concept 1 Concept 2 Différence clé
margin padding Margin = espace extérieur
(entre éléments). Padding =
espace intérieur

display: none visibility: hidden none = supprime l'espace.


hidden = garde l'espace mais
invisible

position: absolute position: fixed absolute = relatif au parent


positionné. fixed = relatif à la
fenêtre
Concept 1 Concept 2 Différence clé
em rem em = relatif au parent. rem =
relatif à la racine (html)

% vw/vh % = relatif au parent. vw/vh =


relatif à la fenêtre (viewport)

Flexbox Grid Flex = 1D (une direction). Grid


= 2D (lignes + colonnes)

transition animation Transition = changement entre


2 états. Animation = séquence
avec keyframes

class vs id CSS priorité id (100) > class (10) > balise


(1)

border-box content-box border-box: width inclut


padding+border. content-box
(défaut): width = contenu seul

min-width max-width min-width: écrans >= X. max-


width: écrans <= X
🟡 JavaScript
Le langage de programmation du Web

1. Définition
JavaScript est le langage de programmation du web qui rend les pages interactives. Il peut modifier le
HTML/CSS, communiquer avec des serveurs, et créer des applications complexes.

2. Variables : let, var, const


Mot-clé Portée Réassignable? Redéclarable? Hoisting?
var Fonction Oui Oui Oui
(undefined)

let Bloc {} Oui Non TDZ

const Bloc {} Non Non TDZ

// let : pour les valeurs qui changent


let compteur = 0;
compteur = 1; // OK

// const : pour les valeurs fixes


const PI = 3.14159;
// PI = 3; // ERREUR: Assignment to constant

// const avec objet : l'objet peut être modifié!


const user = { nom: 'Ahmed' };
[Link] = 'Ali'; // OK (on modifie l'objet, pas la référence)
// user = {}; // ERREUR

// var : portée de fonction (éviter en JS moderne)


function test() {
var x = 10;
if (true) {
var x = 20; // MÊME variable (remplace!)
let y = 30; // variable différente (bloc)
}
[Link](x); // 20 (var ignorait le bloc)
}
// let vs var vs const

💡 Règle d'or: Toujours utiliser const par défaut. Si la valeur change, utiliser let. Ne jamais
utiliser var.

3. Types de données
Type Exemple Vérification
String 'Bonjour' ou "Hello" ou `Texte` typeof x === 'string'

Number 42, 3.14, -10, Infinity, NaN typeof x === 'number'

Boolean true, false typeof x === 'boolean'


Type Exemple Vérification
undefined let x; // pas assigné typeof x === 'undefined'

null let x = null; // vide intentionnel x === null

Object { nom: 'Ali', age: 22 } typeof x === 'object'

Array [1, 2, 3] [Link](x)

Function function() { } typeof x === 'function'

Symbol Symbol('id') typeof x === 'symbol'

BigInt 9007199254740991n typeof x === 'bigint'

// Template literals (backticks) - très utiles!


const prenom = 'Ahmed';
const age = 22;
const message = `Bonjour ${prenom}, tu as ${age} ans!`;
// Résultat: 'Bonjour Ahmed, tu as 22 ans!'

// Conversions
Number('42'); // 42 (string -> number)
String(42); // '42' (number -> string)
Boolean(0); // false
Boolean(''); // false
Boolean('hello'); // true
parseInt('42.5px'); // 42 (arrête aux non-chiffres)
parseFloat('42.5px'); // 42.5
// Types et conversions en JavaScript

4. Opérateurs
Opérateur Exemple Résultat
== 5 == '5' true (compare valeur, pas type)

=== 5 === '5' false (compare valeur ET type)

!= 5 != '5' false

!== 5 !== '5' true

&& true && false false (ET logique)

|| true || false true (OU logique)

! !true false (NON logique)

?? null ?? 'défaut' 'défaut' (nullish coalescing)

?. user?.adresse?.ville undefined (optional chaining)

... (spread) [...arr1, ...arr2] Fusion de tableaux

... (rest) function(...args) Paramètres variables

ternaire x > 0 ? 'pos' : 'neg' Condition courte

⚠️ Attention: Toujours utiliser === et !== (comparaison stricte). L'opérateur == peut causer des
bugs surprenants (0 == false est true!).
5. Structures conditionnelles
// ══ IF / ELSE IF / ELSE ══
const note = 14;

if (note >= 18) {


[Link]('Excellent');
} else if (note >= 14) {
[Link]('Bien'); // ← exécuté ici
} else if (note >= 10) {
[Link]('Passable');
} else {
[Link]('Insuffisant');
}

// ══ SWITCH ══
const jour = 'lundi';

switch(jour) {
case 'lundi':
[Link]('Début de semaine');
break; // IMPORTANT: sans break, continue au suivant
case 'vendredi':
[Link]('Fin de semaine');
break;
default:
[Link]('Milieu de semaine');
}

// ══ TERNAIRE ══ (if/else court)


const statut = note >= 10 ? 'Reçu' : 'Recalé';

// ══ NULLISH COALESCING ?? ══
const nom = null ?? 'Anonyme'; // 'Anonyme'
const nom2 = '' ?? 'Anonyme'; // '' (car '' n'est pas null/undefined)
const nom3 = '' || 'Anonyme'; // 'Anonyme' (car '' est falsy avec ||)
// Conditions en JavaScript

6. Boucles
// ══ FOR ══
for (let i = 0; i < 5; i++) {
[Link](i); // 0, 1, 2, 3, 4
}

// ══ WHILE ══
let compteur = 0;
while (compteur < 3) {
[Link](compteur++); // 0, 1, 2
}

// ══ DO...WHILE ══ (s'exécute au moins 1 fois)


do {
[Link]('Au moins une fois');
} while (false);

// ══ FOR...OF ══ (valeurs d'un tableau/itérable)


const fruits = ['pomme', 'banane', 'cerise'];
for (const fruit of fruits) {
[Link](fruit); // pomme, banane, cerise
}

// ══ FOR...IN ══ (clés d'un objet)


const user = { nom: 'Ahmed', age: 22 };
for (const cle in user) {
[Link](`${cle}: ${user[cle]}`); // nom: Ahmed, age: 22
}

// break = arrêter la boucle


// continue = passer à l'itération suivante
// Toutes les boucles JavaScript

7. Fonctions
// ══ Fonction classique (declaration) ══
function additionner(a, b) {
return a + b;
}
[Link](additionner(3, 4)); // 7

// ══ Fonction expression ══
const multiplier = function(a, b) {
return a * b;
};

// ══ Arrow Function ══ (ES6)


const diviser = (a, b) => a / b; // retour implicite si 1 expression

const carre = x => x * x; // 1 paramètre: pas besoin de ()

const greet = (nom) => { // plusieurs instructions: {} et return


const msg = `Bonjour ${nom}`;
return msg;
};

// ══ Paramètres par défaut ══


function saluer(nom = 'Inconnu') {
return `Salut ${nom}!`;
}
saluer(); // 'Salut Inconnu!'
saluer('Ahmed'); // 'Salut Ahmed!'

// ══ Rest parameters ══
function somme(...nombres) {
return [Link]((acc, n) => acc + n, 0);
}
somme(1, 2, 3, 4); // 10
// Déclaration de fonctions en JavaScript

Type Syntaxe Hoisting? this?


Declaration function nom() { } Oui Contexte d'appel

Expression const f = function() { } Non Contexte d'appel

Arrow const f = () => { } Non Hérité du parent

💡 Arrow vs function: Les arrow functions n'ont pas leur propre 'this'. Utiliser function classique
pour les méthodes d'objets. Utiliser arrow pour les callbacks.
8. Tableaux (Arrays)
Méthode Exemple Rôle Modifie l'original?
push() [Link](5) Ajoute à la fin Oui

pop() [Link]() Supprime le dernier Oui

unshift() [Link](0) Ajoute au début Oui

shift() [Link]() Supprime le premier Oui

splice() [Link](1, 2) Supprime/insère Oui

sort() [Link]((a,b) => a-b) Trie Oui

reverse() [Link]() Inverse Oui

map() [Link](x => x*2) Transforme chaque Non


élément → nouveau
tableau

filter() [Link](x => x > 0) Filtre les éléments → Non


nouveau tableau

reduce() [Link]((acc,x) => Réduit à une valeur Non


acc+x, 0)

find() [Link](x => x > 5) Trouve le premier Non


élément

findIndex() [Link](x => x > Trouve l'index Non


5)

includes() [Link](3) Vérifie si élément Non


existe

indexOf() [Link](3) Trouve l'index (ou -1) Non

join() [Link](', ') Convertit en string Non

slice() [Link](1, 3) Extrait une portion Non

flat() [Link]() Aplatit un tableau Non


imbriqué

forEach() [Link](x => Itère (pas de retour) Non


[Link](x))

every() [Link](x => x > 0) true si TOUS validés Non

some() [Link](x => x > 0) true si AU MOINS UN Non


validé

concat() [Link](arr2) Fusionne tableaux Non

spread [...arr] [...arr1, ...arr2] Copie/fusionne Non

const nombres = [1, 2, 3, 4, 5, 6];

// map : transformer
const doubles = [Link](n => n * 2);
// [2, 4, 6, 8, 10, 12]
// filter : filtrer
const pairs = [Link](n => n % 2 === 0);
// [2, 4, 6]

// reduce : calculer
const somme = [Link]((acc, n) => acc + n, 0);
// 21

// Chaînage (chaining)
const resultat = nombres
.filter(n => n > 2)
.map(n => n * 10)
.reduce((acc, n) => acc + n, 0);
// (3+4+5+6)*10 = 180
// Méthodes fonctionnelles sur les tableaux

9. Objets (Objects)
// ══ Créer un objet ══
const personne = {
nom: 'Ahmed',
age: 22,
ville: 'Tunis',
saluer: function() { // méthode
return `Je suis ${[Link]}`;
}
};

// ══ Accéder aux propriétés ══


[Link]; // 'Ahmed' (notation point)
personne['age']; // 22 (notation crochets)

// ══ Modifier / Ajouter ══
[Link] = 23;
[Link] = 'ahmed@[Link]'; // nouvelle propriété

// ══ Supprimer ══
delete [Link];

// ══ Destructuring ══
const { nom, age } = personne;
const { nom: prenom, age: annees } = personne; // renommer

// ══ Spread Operator ══
const personne2 = { ...personne, age: 25 }; // copier + modifier

// ══ Object methods utiles ══


[Link](personne); // ['nom', 'age', ...]
[Link](personne); // ['Ahmed', 22, ...]
[Link](personne); // [['nom', 'Ahmed'], ['age', 22], ...]

// ══ Vérifier si propriété existe ══


'nom' in personne; // true
[Link]('nom'); // true
// Objets JavaScript

10. Le DOM (Document Object Model)


Le DOM représente la page HTML comme un arbre d'objets JavaScript. On peut lire et modifier
n'importe quel élément de la page.

Méthode Syntaxe Rôle


getElementById [Link]('id') Sélectionne par id (un
seul)

querySelector [Link]('.classe') Sélectionne le premier


(CSS selector)

querySelectorAll [Link]('p') Sélectionne tous


(NodeList)

getElementsByClassName [Link]('cls') Par classe


(HTMLCollection)

getElementsByTagName [Link]('p') Par balise


(HTMLCollection)

createElement [Link]('div') Crée un nouvel


élément

appendChild [Link](enfant) Ajoute à la fin du parent

removeChild [Link](enfant) Supprime un enfant

remove() [Link]() Supprime l'élément lui-


même

insertBefore [Link](new, ref) Insère avant un


élément

innerHTML [Link] = '<b>Texte</b>' HTML interne (avec


balises)

textContent [Link] = 'Texte' Texte uniquement (plus


sûr)

value [Link] Valeur d'un


input/textarea

style [Link] = 'red' Style inline CSS

classList [Link]('active') Gérer les classes CSS

setAttribute [Link]('href', '#') Définir un attribut

getAttribute [Link]('href') Lire un attribut

// ══ Sélectionner des éléments ══


const btn = [Link]('#monBouton');
const tous = [Link]('.carte');

// ══ Modifier le contenu ══
[Link] = 'Nouveau texte';
[Link] = '<b>Texte gras</b>';

// ══ Modifier les classes ══


[Link]('actif');
[Link]('actif');
[Link]('actif'); // ajoute si absent, enlève si présent
[Link]('actif'); // true/false

// ══ Créer et ajouter des éléments ══


const div = [Link]('div');
[Link] = 'Nouveau div';
[Link]('card');
[Link](div);

// ══ Modifier le style ══
[Link] = 'blue';
[Link] = '20px';
// Manipulation du DOM

11. Événements (Events)


Événement Déclencheur
click Clic sur l'élément

dblclick Double-clic

mouseover / mouseout Souris entre / sort

mousemove Souris se déplace

keydown / keyup / keypress Touche du clavier pressée/relâchée

input Chaque frappe dans un input

change Valeur changée (et confirmée)

submit Formulaire soumis

focus / blur Champ actif / désactivé

load Page entièrement chargée

DOMContentLoaded HTML chargé (avant images/CSS)

scroll Défilement de la page

resize Fenêtre redimensionnée

contextmenu Clic droit

touchstart / touchend Tactile (mobile)

// ══ addEventListener ══ (méthode recommandée)


const btn = [Link]('#btn');

[Link]('click', function(event) {
[Link]('Cliqué!');
[Link]([Link]); // l'élément cliqué
});

// Arrow function
[Link]('click', (e) => {
[Link](); // empêcher comportement par défaut
[Link](); // arrêter la propagation
});

// ══ Retirer un écouteur ══
[Link]('click', maFonction);

// ══ Exemple formulaire ══
const form = [Link]('form');
[Link]('submit', (e) => {
[Link](); // empêcher l'envoi par défaut
const nom = [Link]('#nom').value;
[Link]('Nom:', nom);
});

// ══ Délégation d'événements ══
[Link]('ul').addEventListener('click', (e) => {
if ([Link] === 'LI') {
[Link]('actif');
}
});
// Gestion des événements

12. Fetch, Promises, Async/Await


Fetch permet de faire des requêtes HTTP (appels API) depuis JavaScript. Les Promises et
async/await gèrent les opérations asynchrones.
// ══ PROMISE ══
const maPromesse = new Promise((resolve, reject) => {
const succes = true;
if (succes) resolve('Données reçues!');
else reject('Erreur!');
});

maPromesse
.then(data => [Link](data)) // succès
.catch(err => [Link](err)) // erreur
.finally(() => [Link]('Fin')); // toujours exécuté

// ══ FETCH avec .then() ══


fetch('[Link]
.then(response => {
if (![Link]) throw new Error('Erreur HTTP: ' + [Link]);
return [Link](); // parse le JSON
})
.then(data => [Link](data))
.catch(err => [Link](err));

// ══ ASYNC / AWAIT ══ (plus lisible)


async function chargerUtilisateurs() {
try {
const response = await fetch('[Link]
if (![Link]) throw new Error('Erreur ' + [Link]);
const data = await [Link]();
[Link](data);
return data;
} catch (erreur) {
[Link]('Problème:', [Link]);
}
}

// ══ POST avec Fetch ══


async function creerUtilisateur(nomUtilisateur) {
const response = await fetch('[Link] {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: [Link]({ nom: nomUtilisateur })
});
return await [Link]();
}
// Fetch, Promises et Async/Await

13. JSON (JavaScript Object Notation)


// JSON = format de données texte, ressemble à un objet JS

// ══ Convertir objet JS → JSON string ══


const user = { nom: 'Ahmed', age: 22 };
const jsonString = [Link](user);
// '{"nom":"Ahmed","age":22}'

// ══ Convertir JSON string → objet JS ══


const obj = [Link](jsonString);
// { nom: 'Ahmed', age: 22 }

// JSON avec formatage lisible


[Link](user, null, 2);
// {
// "nom": "Ahmed",
// "age": 22
// }
// JSON - sérialisation et désérialisation

14. localStorage et sessionStorage


API Durée de vie Méthodes
localStorage Permanente (jusqu'à setItem, getItem, removeItem,
effacement) clear

sessionStorage Session (onglet fermé = perdu) setItem, getItem, removeItem,


clear
// ══ localStorage ══
// Stocker (seulement des strings!)
[Link]('nom', 'Ahmed');
[Link]('user', [Link]({ nom: 'Ahmed', age: 22 }));

// Lire
const nom = [Link]('nom'); // 'Ahmed'
const user = [Link]([Link]('user'));

// Supprimer
[Link]('nom');
[Link](); // tout effacer
// localStorage - persister des données

15. Gestion des erreurs (try/catch)


try {
// Code qui peut échouer
const data = [Link]('json invalide{{{');
[Link](data);
} catch (erreur) {
// Gérer l'erreur
[Link]('Erreur:', [Link]);
} finally {
// Toujours exécuté (avec ou sans erreur)
[Link]('Bloc terminé');
}

// ══ Lancer une erreur personnalisée ══


function diviser(a, b) {
if (b === 0) throw new Error('Division par zéro impossible!');
return a / b;
}
// Try/Catch/Finally

16. ⚡ Différences importantes JavaScript


Concept 1 Concept 2 Différence clé
== === == compare valeur seulement.
=== compare valeur ET type

let var let = portée bloc {}. var = portée


fonction (éviter var)

null undefined null = vide intentionnel.


undefined = pas encore défini

function arrow function function a son propre this.


Arrow hérite le this du parent

forEach map forEach = pas de retour. map =


retourne un nouveau tableau

innerHTML textContent innerHTML interprète le HTML.


textContent = texte pur (plus
sûr)

querySelector getElementById querySelector = plus flexible


(CSS selectors).
getElementById = plus rapide

async/await .then/.catch async/await = plus lisible. .then


= chaînable. Les deux gèrent
les Promises

localStorage sessionStorage localStorage = permanent.


sessionStorage = onglet
seulement

spread ... rest ... spread = étaler un


tableau/objet. rest = collecter
en tableau

for...of for...in for...of = valeurs (tableaux).


for...in = clés (objets)
🚀 Mini Projets Complets
Projet 1 : Compteur cliquable
<!-- HTML -->
<div id='app'>
<h2 id='display'>0</h2>
<button id='dec'>-</button>
<button id='reset'>Reset</button>
<button id='inc'>+</button>
</div>
/* CSS */
#app { text-align: center; font-family: Arial; padding: 40px; }
button { padding: 10px 20px; font-size: 20px; margin: 5px; cursor: pointer;
}
#display { font-size: 60px; color: #264DE4; }
// JavaScript
let count = 0;
const display = [Link]('display');

[Link]('inc').addEventListener('click', () => {
count++;
[Link] = count;
});

[Link]('dec').addEventListener('click', () => {
count--;
[Link] = count;
});

[Link]('reset').addEventListener('click', () => {
count = 0;
[Link] = count;
});
// Compteur - utilise DOM + Events + Variables

Projet 2 : Liste de tâches (To-Do List)


<!-- HTML -->
<div id='todo-app'>
<input type='text' id='task-input' placeholder='Nouvelle tâche...'>
<button id='add-btn'>Ajouter</button>
<ul id='task-list'></ul>
</div>
// JavaScript complet
const input = [Link]('task-input');
const list = [Link]('task-list');
const addBtn = [Link]('add-btn');

function addTask() {
const taskText = [Link]();
if (!taskText) return; // validation

const li = [Link]('li');
[Link] = `
<span class='task-text'>${taskText}</span>
<button class='delete-btn'>Supprimer</button>
`;

// Marquer comme terminé au clic


[Link]('.task-text').addEventListener('click', () => {
[Link]('done');
});

// Supprimer la tâche
[Link]('.delete-btn').addEventListener('click', () => {
[Link]();
});

[Link](li);
[Link] = ''; // vider l'input
}

[Link]('click', addTask);

// Ajouter avec Entrée


[Link]('keydown', (e) => {
if ([Link] === 'Enter') addTask();
});
// To-Do List - utilise DOM, Events, Arrays, Functions

Projet 3 : Appel API (fetch)


<!-- HTML -->
<div>
<button id='load-btn'>Charger utilisateurs</button>
<div id='result'></div>
</div>
// JavaScript - Appel API REST
[Link]('load-btn').addEventListener('click', async () => {
const resultDiv = [Link]('result');
[Link] = '<p>Chargement...</p>';

try {
const response = await
fetch('[Link]
if (![Link]) throw new Error('Erreur: ' + [Link]);
const users = await [Link]();

[Link] = [Link](user => `


<div class='user-card'>
<h3>${[Link]}</h3>
<p>📧 ${[Link]}</p>
<p>🌐 ${[Link]}</p>
</div>
`).join('');

} catch (erreur) {
[Link] = `<p style='color:red'>Erreur:
${[Link]}</p>`;
}
});
// Fetch API - données réelles de [Link]
📋 RÉSUMÉ FINAL & ASTUCES EXAMEN
Syntaxes à mémoriser absolument
Technologie Syntaxe clé À retenir
HTML <!DOCTYPE html> Toujours en première ligne

HTML <meta charset="UTF-8"> Dans <head>, encodage

HTML <link rel="stylesheet" Lier le CSS


href="[Link]">

HTML <script src="[Link]" defer> Lier le JS (defer = après


HTML)

CSS box-sizing: border-box; * { box-sizing: border-box; }

CSS display: flex; justify-content: Centrer avec flex


center; align-items: center;

CSS @media (min-width: 768px) { } Media query tablet+

CSS position: absolute; top: 0; left: 0; Positionnement absolu

JS [Link]('#id') Sélectionner un élément

JS [Link]('click', Écouter un événement


callback)

JS const res = await fetch(url); Appel API


const data = await [Link]();

JS [Link]() / [Link]() Conversion JSON

JS [Link]() / .filter() / .reduce() Méthodes fonctionnelles

⚠️ Pièges d'examen les plus fréquents


Piège Erreur fréquente Bonne pratique
== vs === Utiliser == pour comparer Toujours utiliser ===

var vs let Utiliser var dans une boucle Utiliser let ou const

Oublier return function sans return Vérifier que la fonction retourne


bien

async sans await fetch sans await Mettre await devant chaque
Promise

innerHTML XSS innerHTML avec données Préférer textContent pour texte


utilisateur

[Link]() Oublier sur les forms Toujours l'appeler pour les


formulaires

Portée var var dans un if/for Préférer let (portée bloc)

Alt manquant img sans alt Toujours mettre alt='...'


Piège Erreur fréquente Bonne pratique
Fermer les balises Oublier </div>, </p>... Indenter et vérifier

null vs undefined Confondre les deux null=intentionnel,


undefined=pas défini

🎯 Conseil ultime examen: Lisez bien la question, commentez votre code, indentez
proprement. Un code lisible et bien structuré gagne des points même s'il est incomplet.

🌟 Bonne chance à l'examen! 🌟


HTML • CSS • JavaScript — Résumé complet 2025-2026

Vous aimerez peut-être aussi