📄
Structure et sémantiqueHTML (HyperText Markup Language) est le langage de balisage qui structure le contenu d'une page web. Chaque élément est délimité par des balises, souvent par paires ouvrante/fermante, comme <p> pour un paragraphe. Les balises peuvent avoir des attributs, par exemple href sur une balise <a> pour définir un lien. La sémantique est essentielle : utiliser <header>, <nav>, <main>, <footer> plutôt que des <div> génériques améliore l'accessibilité et le référencement. Un document HTML valide commence par <!DOCTYPE html> et contient <head> (métadonnées) et <body> (contenu visible).
📖 Définition
Une balise HTML est un élément de marquage délimité par des chevrons, comme <h1> ou <img>, qui indique la nature du contenu.
💡 À retenir : HTML donne du sens au contenu, pas son apparence.
🎨
Styles et mise en pageCSS (Cascading Style Sheets) décrit la présentation visuelle des éléments HTML. On cible les éléments avec des sélecteurs (type, classe .ma-classe, identifiant #mon-id) et on applique des déclarations sous forme propriété: valeur. La cascade résout les conflits selon la spécificité, l'ordre et l'importance (!important). Les boîtes flexibles (display: flex) et les grilles (display: grid) permettent des mises en page responsives adaptées aux écrans de smartphone ou d'ordinateur. Les media queries ajustent les styles selon la largeur de l'écran.
⭐ À retenir
Toujours lier la feuille de style externe via <link rel='stylesheet' href='style.css'> plutôt que d'utiliser des styles en ligne.
💡 À retenir : CSS sépare le fond (HTML) de la forme (styles).
⚙️
Interactivité et dynamismeJavaScript est un langage de programmation interprété par le navigateur qui permet de modifier le DOM (Document Object Model) et de réagir aux événements utilisateur. On peut sélectionner un élément avec document.querySelector, modifier son contenu avec textContent ou innerHTML, et changer son style via la propriété style. Les écouteurs d'événements (addEventListener) déclenchent des actions lors d'un clic, d'une saisie ou d'un survol. Les variables, conditions, boucles et fonctions offrent toute la logique nécessaire pour créer des applications riches comme des jeux ou des formulaires dynamiques. Le code JavaScript peut être intégré dans une balise <script> ou dans un fichier externe .js.
📖 Définition
Le DOM est une représentation arborescente de la page HTML que JavaScript peut lire et modifier en temps réel.
💡 À retenir : JavaScript manipule la page après son chargement, sans recharger.
🔗
Assembler et optimiserUne page web moderne repose sur la séparation des préoccupations : HTML pour la structure, CSS pour la présentation, JavaScript pour le comportement. Les trois sont liés par des fichiers distincts ou par des balises <link> et <script> dans le <head> ou en fin de <body>. Il est crucial de valider son code (W3C), de tester sur plusieurs navigateurs et de penser à l'accessibilité (contrastes, alternatives textuelles, navigation au clavier). Les outils de développement intégrés aux navigateurs (F12) permettent d'inspecter le DOM, de déboguer le JavaScript et d'analyser les performances. Enfin, les frameworks comme React ou Vue.js facilitent la création d'interfaces complexes, mais reposent toujours sur ces trois piliers.
⭐ À retenir
Placez les scripts en bas de page ou utilisez defer pour ne pas bloquer le rendu.
🔍 Exemple
Un site e-commerce : HTML liste les produits, CSS les met en grille, JavaScript gère le panier sans rechargement.
💡 À retenir : La qualité d'un site repose sur la cohérence et la performance des trois couches.