Comment fabrique-t-on une page web ?

Une fenêtre de navigateur avec une page, et à côté le code HTML

📖 En bref

Chaque page que tu vois sur Internet, comme celle que tu lis en ce moment, est écrite dans un langage spécial appelé HTML. Le navigateur lit ce langage et dessine à partir de lui les titres, les images, les boutons et les couleurs. La page est comme une recette, et le navigateur comme un cuisinier habile !

🤩 Le savais-tu ?

Dans beaucoup de navigateurs, tu peux voir le code de la page en appuyant sur Ctrl + U.
HTML est l'abréviation d'une expression anglaise qui veut dire « langage de balisage hypertexte ».
La toute première page web de l'histoire ne contenait que du texte et des liens, sans images.
Une même page s'adapte à l'écran du téléphone comme au grand écran de l'ordinateur.

🔎 En savoir plus

🌟 Le navigateur

Le navigateur est le logiciel qui sert à visiter les sites. On y tape le nom du site, il demande la page au serveur, puis il nous l'affiche. Il a un bouton pour revenir à la page précédente et un autre pour actualiser la page.

🔍 HTML : la structure

Le HTML dit ce qu'il y a dans la page : ceci est un titre, ceci un paragraphe, ceci une image, ceci un lien. Il s'écrit avec des balises entre deux petits chevrons, comme <h1> pour le grand titre.

💡 CSS : la décoration

Le CSS dit à quoi ressemble la page : la couleur du titre, la taille des lettres, les espaces et la forme des boutons. Sans lui, la page n'est que du texte noir sur fond blanc.

🎯 JavaScript : le mouvement

Le JavaScript fait réagir la page : il retourne la carte quand tu cliques dessus et compte tes points dans le jeu. Tous les jeux de ce site sont écrits avec !

🧭 Les balises

En HTML, on met le texte entre des « balises » : la balise <p> pour le début d'un paragraphe et </p> pour sa fin. La balise <img> place une image, et la balise <a> crée un lien.

🌈 Des pages pour tout le monde

Une bonne page convient à tout le monde : un texte de remplacement pour chaque image, lu par un logiciel spécial pour les personnes qui ne voient pas, des couleurs bien contrastées et de gros boutons. C'est ce qu'on appelle l'« accessibilité ».

📊 Regarde comment ça marche

Une page web, c'est trois couches : HTML pour la structure, CSS pour la décoration et JavaScript pour le mouvement — Une page web a trois couches : la structure en HTML, la décoration en CSS et le mouvement en JavaScript.

Ce qu'on écrit en HTML (un titre, une image, un paragraphe, un bouton) et ce que le navigateur dessine à partir de là — Ce qu'on écrit en HTML, et ce que le navigateur dessine à partir de là.

📚 Mots importants

Le navigateur: Le logiciel qui sert à visiter les sites
La balise: Une marque en HTML qui dit de quel type est une partie
L'accessibilité: Le fait qu'une page convienne à tout le monde

🧪 Essaie à la maison

Dessine la page de ton site sur une feuille : un grand titre, une image, un paragraphe et un bouton. Puis écris à côté de chaque partie le nom de sa balise : h1 pour le titre, img pour l'image, p pour le paragraphe et button pour le bouton.

🧩 Teste-toi

1 Comment s'appelle le langage dans lequel on écrit la structure des pages ?

2 Qu'est-ce qui fait bouger la page et réagir à tes gestes ?