HTML, CSS et JavaScript
HTML, CSS et JavaScript sont les trois piliers du développement web front-end.
1
Rôles des trois langages
Base commune
HTML
- Décrit la structure du document.
- Porte le contenu et la sémantique.
- Organise titres, listes, liens et images.
CSS + JavaScript
- CSS présente visuellement la page.
- JavaScript ajoute le comportement.
- Ils complètent le HTML sans le remplacer.
Séparation des responsabilités
Mémo express
==H = hiérarchie, C = couleur, J = jeu d’actions==. Ne mélange pas structure, présentation et logique.
2
HTML et sémantique
Sémantique utile
La sémantique HTML choisit la bonne balise pour donner du sens au contenu.
- Une balise structure le document.
- Un attribut complète l’information.
Accessibilité et structure
- Hiérarchie logique des titres.
- Textes alternatifs pour les images.
Vocabulaire HTML
- balise
- Élément HTML qui encadre un contenu.
- attribut
- Information ajoutée à une balise.
- sémantique
- Sens donné par la structure du code.
3
CSS : cascade et Flexbox
Cascade
| Principe | Idée clé |
|---|---|
| spécificité | Un sélecteur plus précis l’emporte. |
| ordre | La règle la plus tardive peut gagner. |
| héritage | Certaines propriétés se transmettent. |
Flexbox
Conteneur flex
- Active le modèle Flexbox.
- Définit l’axe principal.
Items flex
- Se placent dans le conteneur.
- S’alignent selon les axes.
Piège classique
L’axe principal n’est pas toujours horizontal. Flexbox sert à aligner, centrer et répartir l’espace.
4
JavaScript, DOM et événements
DOM et interaction
Événements courants
- Clic, saisie, soumission et chargement.
- Un écouteur réagit à une action.
Mini-défi
- Que représente le DOM dans le navigateur ?
- Quel rôle joue un écouteur d’événements ?
À retenir
Conclusion rapide
- HTML structure et donne du sens.
- CSS présente et organise visuellement.
- JavaScript rend la page interactive.
- La séparation des responsabilités améliore le code.