Chapitre 1 : Qu'est-ce que le HTML ?
Le HTML est l'acronyme de HyperText Markup Language, ce qui signifie langage de balisage d’hypertexte. Ce n'est pas un langage de programmation comme le Python, mais un langage de balisage car il sert à indiquer au navigateur internet (comme Chrome, Firefox, Edge, Opera, Safari...) comment ils doivent afficher les pages web. Il fonctionne donc avec des balises qui permettent d'indiquer comment afficher le texte qu'elles encadrent.
A titre d'exemple :
<p style="text-align: center;">Ceci est un <strong>exemple</strong>.</p>
affichera :
Ceci est un exemple.
- On y trouve bien notre texte : Ceci est un exemple.
- Le tout est compris entre les balises <p> et </p> qui indiquent qu'il s'agit d'un paragraphe.
- style="text-align: center;" compris dans la balise <p> indique qu'il faut centrer le texte.
- Enfin, les balises <strong> et </strong> encadrent ce qui doit être affiché en Gras.
Un peu d'histoire
|
Le HTML a été créé en 1989 par Tim Berners-Lee, autour du concept d'hypertexte (avec des liens qui permettent de naviguer d'une page à l'autre 😉). Cela a marqué la naissance du World Wide Web (WWW), qui a initialement été conçu pour permettre aux chercheurs du CERN de partager des informations par ordinateur à-travers le monde. Il est rapidement devenu un langage universel pour structurer les documents en ligne. En 1994, Berners-Lee fonde le W3C (World Wide Web Consortium) pour développer le Web. Aujourd'hui, nous en sommes à la 5ème version du HTML, soit le HTML 5. 🤩 |
Le CERN, situé à Genève est l'Organisation européenne pour la recherche nucléaire. C'est l'un des plus grands et des plus prestigieux laboratoires scientifiques au monde. Il a pour vocation la physique fondamentale, la découverte des constituants et des lois de l'Univers. |
Analysons le code d'une page web
Savez-vous qu'on peut afficher le code source HTML de n'importe quelle page dans votre navigateur ? 😮
On va essayer tout de suite avec cette page (ou une autre). Dupliquez-la d'abord dans votre navigateur, pour ne pas perdre votre lecture. 😋

Ensuite, sous Chrome (je vous laisse chercher si vous utilisez un autre navigateur... 😜), faites un clic droit avec la souris et choisissez Inspecter :

Vous pourrez alors voir le code HTML de la page ainsi que le CSS (on verra après ce que c'est 😉) et vous pouvez même le modifier en tant réel pour changer l'affichage de la page dans votre navigateur (c'est dans l'encadré du haut : Elements 😉). Notez cependant que cela n'aura aucun impact sur le site web car votre navigateur n'est qu'un client qui affiche la page web livrée par le serveur. Or vous ne pouvez pas modifier les données du serveur comme ça (encore heureux ! sinon, bonjour le piratage ! 👹)

Sinon, vous pouvez aussi afficher le code source de la page dans une fenêtre entière, comme ça :

Mais à quoi ça sert ? 😱
A pas grand-chose pour l'utilisateur lambda. C'est sans doute pour ça que vous ne vous en êtes sûrement jamais servi jusqu'à présent. Mais pour le programmeur web, cela peut l'aider à débuguer sa page web, notamment en testant des styles en css ou en étudiant les conflits css... (mais on verra ça plus tard 😉).
Voilà pour ce chapitre,
Dans le suivant, nous créerons notre première page web ! (je vous rassure, elle sera moins compliquée ! ☺️)

English
Français