Chapitre 1 : Comprendre le fonctionnement du web
Comment une page web arrive sur votre écran
Avant d'écrire une ligne de code, comprenons ce qui se passe quand vous tapez une adresse dans votre navigateur.
Le trajet d'une page
- Vous tapez
hem-skills.comdans la barre d'adresse - Votre navigateur demande à un serveur de lui envoyer la page
- Le serveur répond en envoyant des fichiers : du HTML, du CSS, du JavaScript, des images
- Votre navigateur assemble le tout et affiche la page
Tout ce que vous voyez sur un site est donc un ensemble de fichiers texte interprétés par votre navigateur.
Les trois langages du web
Chacun a un rôle précis, et il ne faut pas les confondre.
| Langage | Rôle | Analogie |
|---|---|---|
| HTML | la structure et le contenu | les murs et les pièces d'une maison |
| CSS | l'apparence | la peinture, le mobilier, la décoration |
| JavaScript | le comportement | l'électricité, les interrupteurs, la domotique |
Une page peut exister avec du HTML seul : elle sera moche mais fonctionnelle. Sans HTML, le CSS et le JavaScript n'ont rien sur quoi agir.
Le navigateur, votre premier outil
Chaque navigateur embarque des outils de développement. Appuyez sur F12 sur n'importe quelle page pour les ouvrir.
L'onglet Éléments montre le HTML de la page en cours. Vous pouvez y modifier le texte en direct — les changements disparaissent au rechargement, mais c'est un excellent terrain d'expérimentation.
Prenez trente secondes maintenant : ouvrez F12 sur cette page et repérez le titre de cette leçon dans le code affiché.
Ce qu'il vous faut pour coder
- Un éditeur de texte : Visual Studio Code, gratuit, est le standard actuel
- Un navigateur : celui que vous utilisez déjà
- Rien d'autre pour commencer
Vos fichiers seront enregistrés sur votre ordinateur et ouverts directement dans le navigateur. La mise en ligne viendra plus tard.
Vous consultez cette leçon en aperçu gratuit.
Inscrivez-vous au cours pour accéder à l'intégralité du contenu, suivre votre progression, passer les évaluations et obtenir votre attestation.
Vous avez déjà un compte ? Connectez-vous.