HTML, CSS et pages web : cours de SNT en Seconde

Chaque jour, tu ouvres des dizaines de pages web : un réseau social, un article, un site de ton lycée. Elles se ressemblent peu, et pourtant elles reposent sur les mêmes briques. Dans ce cours, tu vas découvrir ces briques, comprendre le rôle de chacune et apprendre à lire le code d'une page simple.

Tu verras surtout deux langages : le HTML, qui organise le contenu, et le CSS, qui s'occupe de l'apparence. Tu verras aussi où se place le JavaScript et comment une page arrive jusqu'à ton écran. Ce chapitre prépare la suite du thème « Le Web » : le fonctionnement de HTTP et des URL, les moteurs de recherche, puis les traces que tu laisses en naviguant.

Le terme « page » est un peu trompeur : il n'existe pas de définition technique stricte de la page web.⁵ Une page ne ressemble pas toujours à une feuille de papier. Elle peut réagir à tes clics, jouer un son ou afficher une vidéo. C'est pourquoi on la voit plutôt comme un ensemble d'éléments assemblés par ton navigateur.

Sur le plan technique, une page web est le plus souvent un document écrit en HTML pour la structure de base. À ce document s'ajoutent des images, des feuilles de style CSS pour la mise en page, et du JavaScript pour les fonctions plus avancées.⁵ Retiens donc cette répartition des rôles : un langage pour le contenu, un pour la forme, un pour le comportement.

Une page web est d'abord un simple fichier de texte. Il est rédigé dans un langage de description, le HTML.³ Tu peux donc l'ouvrir avec n'importe quel éditeur de texte et lire ce qu'il contient : ce n'est pas un format mystérieux réservé à des logiciels spéciaux.

Le HTML n'est pas un langage de programmation comme Python. Il ne calcule rien et ne prend aucune décision : il décrit ce que la page contient. Pour cela, il entoure chaque morceau de contenu par des balises. Une balise est un mot placé entre les signes < et >. La plupart fonctionnent par paires : une balise ouvrante et une balise fermante, avec le contenu entre les deux.

Les liens sont l'idée centrale du Web : sans eux, chaque page resterait isolée. On accède à une page en tapant son adresse dans la barre d'adresse du navigateur, ou en activant un lien présent dans une autre page, une application mobile, un courriel ou un document numérique.⁵

Le HTML peut aussi demander au navigateur d'aller chercher d'autres éléments : images, vidéos, sons, animations.⁵ Le texte de la page ne contient donc pas l'image elle-même, seulement l'indication de l'endroit où la trouver.

Un document HTML suit une organisation précise. Il est constitué de deux sections principales : l'en-tête, appelée head, et le corps de la page, appelé body.³ Voici un exemple minimal que tu peux recopier dans un éditeur de texte.

Lis ce code de haut en bas, en repérant chaque morceau.

• La déclaration <!DOCTYPE html> indique que le document est une page HTML écrite en HTML5.² Elle précise donc la version du langage utilisée.³
• La balise <html> enveloppe toute la page ; la balise fermante </html> se trouve à la dernière ligne du code.²
• La balise <head> définit le conteneur d'en-tête de la page.²
• La balise <body> contient tout ce que l'internaute voit à l'écran.

L'encodage mérite une remarque. Il indique comment les caractères du fichier sont codés, ce qui évite d'obtenir des signes bizarres à la place des lettres accentuées. Dans le code ci-dessus, l'élément meta charset joue ce rôle. Un fichier peut utiliser un autre encodage, mais il faut alors le déclarer dans cet élément : le navigateur doit connaître celui du fichier qu'il lit.⁴

Si tu affiches un fichier HTML sans aucun style, tu obtiens une page qui ne montre que le texte du fichier, avec la présentation par défaut du navigateur.² Pour la rendre agréable à lire, on lui associe du CSS.

Une règle CSS se compose de trois éléments : un sélecteur, qui désigne les éléments concernés, puis des propriétés avec leurs valeurs, entre accolades. Chaque propriété se termine par un point-virgule.

Le fichier CSS est généralement distinct du fichier HTML. Le head de la page contient alors une balise link qui indique où le trouver, comme dans l'exemple de la section précédente. Cette séparation est un grand avantage : en modifiant un seul fichier CSS, tu changes l'aspect de toutes les pages du site qui l'utilisent.

Une même page est consultée sur un grand écran d'ordinateur, une tablette, un smartphone ou un téléviseur. Les conditions varient énormément d'un appareil à l'autre. Les langages HTML et CSS permettent au navigateur d'adapter l'affichage selon ces conditions : taille de la fenêtre, polices disponibles, couleurs disponibles, préférences du visiteur.⁵

Les concepteurs du HTML ont prévu une consultation sur des supports très divers : petits ou grands écrans, affichage en mode texte, impression sur papier, afficheur braille ou lecture vocale.⁵ C'est une raison de plus de bien structurer le contenu. Une personne aveugle, par exemple, se sert d'un logiciel qui lit la page à voix haute : des titres et des liens correctement balisés lui permettent de s'orienter.

Quand tu consultes une page, tu ne charges pas un seul fichier. Une page web est constituée d'une ou de plusieurs ressources distinctes du World Wide Web. La ressource principale est généralement le document HTML.⁵ Les autres (images, vidéos, sons, feuilles de style, scripts) sont appelées par ce document.

Le détail du fonctionnement des URL et du protocole qui transporte les pages est le sujet du prochain chapitre (HTTP et URL). Pour l'instant, retiens simplement ceci : le navigateur lit le document HTML, repère toutes les ressources dont il a besoin, va les chercher grâce à leurs adresses, puis assemble le tout à l'écran.

On classe les pages en deux familles. Une page statique est toujours affichée de la même façon : son contenu est écrit une fois pour toutes dans le fichier. Une page dynamique change selon la situation : elle peut réagir aux actions de l'internaute ou avoir un contenu qui varie d'une visite à l'autre. Le Web connaît bien ces deux types de pages.⁵

Contrairement au HTML, qui se contente de décrire, le JavaScript permet d'écrire des instructions : afficher un message quand on clique sur un bouton, vérifier qu'un formulaire est bien rempli, mettre à jour une partie de la page sans la recharger. Ce type de programme est interprété côté client, c'est-à-dire par le navigateur sur ton propre appareil.⁴

D'autres langages, comme PHP ou Python, travaillent côté serveur. Avec PHP, les instructions sont insérées directement dans le fichier de la page HTML.⁴ Le serveur les exécute avant l'envoi, si bien que la page peut varier selon la personne ou le moment. De ton côté, tu reçois uniquement le résultat en HTML.

Pour créer une page, il suffit d'un éditeur de texte ou d'un éditeur HTML spécialisé.⁵ Pas besoin de logiciel coûteux : tu écris le code, tu enregistres le fichier avec l'extension .html, puis tu l'ouvres dans ton navigateur pour voir le résultat.

Les outils de création de sites proposent souvent un mode « visuel » qui affiche directement le résultat du code que tu écris.³ C'est pratique pour tester, mais comprendre le code reste indispensable pour corriger une erreur.

Une page enregistrée sur ton ordinateur n'est visible que par toi. Pour la mettre en ligne, il faut l'enregistrer sur un serveur web, que l'on appelle aussi un hébergeur web.⁵ Chaque internaute qui tape l'adresse de la page reçoit alors le fichier depuis ce serveur, et son navigateur l'affiche.