Pack Complet : HTML • CSS • JavaScript
Un guide compact et pratique pour débuter et progresser — exemples, syntaxe essentielle et exercices corrigés.
1. HTML — Les bases
Définition
HTML (HyperText Markup Language) structure le contenu d'une page web : titres, paragraphes, images, liens,
formulaires, etc.
Structure de base
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre</title>
</head>
<body>
Contenu visible
</body>
</html>
Balises essentielles
- <h1>...</h1> : titres (<h1> à <h6>)
- <p> : paragraphe
- <a href="URL">Lien</a> : lien
- <img src="src" alt="desc"> : image (auto-fermant)
- <ul> / <ol> / <li> : listes
- <table> / <tr> / <th> / <td> : tableaux
Formulaire simple
<form action="/submit" method="post">
<input type="text" name="nom" placeholder="Votre nom">
<input type="submit" value="Envoyer">
</form>
Exemple HTML complet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<h1>Bonjour</h1>
<p>Bienvenue sur ma page.</p>
</body>
</html>
2. CSS — Mise en forme
Définition
CSS (Cascading Style Sheets) contrôle l'apparence : couleurs, marges, tailles, positionnement.
Sélecteurs de base
- element { ... } (ex. p { color: red; })
- .class { ... } (ex. .btn { padding: 10px; })
- #id { ... } (ex. #header { background: #eee; })
Exemple
<style>
body { font-family: Arial, sans-serif; }
h1 { color: blue; }
.btn { padding: 8px 12px; border-radius: 4px; }
</style>
Propriétés courantes
- color, background-color
- font-size, font-family, font-weight
- margin, padding, border
- display (block, inline, inline-block, flex, grid)
- width, height, max-width
- position (static, relative, absolute, fixed, sticky)
Exemple CSS séparé (link)
<!-- Dans le head -->
<link rel="stylesheet" href="[Link]">
/* Dans [Link] */
body { margin: 0; padding: 20px; }
.container { max-width: 900px; margin: 0 auto; }
3. JavaScript — Interaction
Définition
JavaScript permet d'ajouter de l'interactivité : réactions aux clics, manipulation du DOM, requêtes réseau (AJAX /
fetch).
Insertion basique
<script>
[Link]('Hello');
</script>
Exemple : clic sur un bouton
<button id="btn">Clique</button>
<script>
[Link]('btn').addEventListener('click', function(){
alert('Bouton cliqué');
});
</script>
Manipulation DOM & fetch
- [Link] / querySelectorAll
- [Link], [Link]
- fetch('url').then(res => [Link]()).then(data => [Link](data))
4. Exemple : Petite page complète (HTML + CSS + JS)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mini App</title>
<style>
body{font-family:Arial;margin:20px;}
#result{margin-top:10px;}
</style>
</head>
<body>
<input id="name" placeholder="Votre nom">
<button id="greet">Saluer</button>
<div id="result"></div>
<script>
[Link]('greet').addEventListener('click', function(){
const name = [Link]('name').value || 'inconnu';
[Link]('result').textContent = 'Bonjour, ' + name + '!';
});
</script>
</body>
</html>
5. Exercices pratiques (avec corrigés)
Exercice 1 : Créez une page contenant un formulaire (nom, email, message). Lors de la soumission, affichez les
données sous le formulaire (utilisez JS pour intercepter la soumission).
Corrigé (résumé) : Utiliser [Link]() sur 'submit', récupérer values via FormData ou inputs, puis afficher
en modifiant innerHTML de la zone résultat.
Exercice 2 : Stylisez une carte produit avec CSS (image, titre, prix, bouton) et adaptez la mise en page en responsive
(media queries).
Corrigé (résumé) : Utiliser flexbox, définir règles @media (max-width:600px) pour empiler les éléments
verticalement.
6. Ressources & conseils
- MDN Web Docs (documentation complète)
- [Link] (compatibilité navigateurs)
- Pratique : construire de petits projets (to-do, portfolio, mini blog)
- Apprendre Git et déployer sur GitHub Pages pour partager vos pages.
Bonne pratique : écrire du HTML sémantique (header, nav, main, footer) et séparer le style (CSS) et le comportement
(JS).
Fin du pack — Bon apprentissage !