HTML, CSS et pages web : exercices corrigés de Seconde

Le texte et les images font partie du contenu : le HTML organise ce contenu (besoins 1 et 4).

Couleur, police et agencement relèvent de l'apparence : c'est le rôle du CSS (besoins 2 et 5).

Un menu qui réagit aux actions est une fonctionnalité plus avancée, donc du ressort de JavaScript (besoin 3).

La première ligne, la déclaration de type de document, annonce une page HTML écrite en HTML5.²

L'en-tête (la balise head) regroupe les informations pour le navigateur : encodage, feuille de style, informations pour les moteurs de recherche.³

Ces informations ne s'affichent pas dans la page elle-même ; elles aident le navigateur à lire correctement la page.³ Seul le titre de la page apparaît, mais dans l'onglet du navigateur.

Le contenu visible se trouve dans l'autre section : tu verras « Bienvenue » et « Nous nous retrouvons chaque jeudi. ».

La ligne d'encodage indique au navigateur comment lire les caractères, ce qui lui permet d'afficher correctement les accents.

Le document HTML est la ressource principale : 1.⁵

Ajoute la feuille de style CSS : 1 ressource de plus.

Ajoute les quatre images : 4 ressources de plus.

Ajoute le fichier JavaScript : 1 ressource de plus.

Total : $1 + 1 + 4 + 1 = 7$ ressources.

Chaque ressource est identifiée par son adresse (URL) ; si le chargement de l'une échoue, la page doit être consultée sans elle, donc de façon incomplète.⁵

Il manque la première ligne qui annonce le type de document et la version HTML5.²³

L'en-tête est placé après la partie visible : il doit venir en premier, car il donne au navigateur ce dont il a besoin pour lire la page.³

Le titre de la page est dans la partie visible alors qu'il appartient à l'en-tête, avec l'encodage.³

On regroupe donc l'encodage et le titre dans l'en-tête, puis on garde les textes à afficher dans la partie visible.

Version corrigée :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Recettes</title>
  </head>
  <body>
    <h1>Mes recettes</h1>
    <p>Crêpes, gaufres et far breton.</p>
  </body>
</html>

Changer une date, c'est changer le texte : fichier HTML.

Changer la couleur de fond touche l'apparence : CSS.²

Ajouter une photo ajoute une ressource dans le contenu : HTML, qui permet d'appeler des images.⁵

Couleur des titres et marges relèvent de la mise en page : CSS, qui règle l'apparence de la page.²⁵

Première ligne : la déclaration de type de document, qui précise qu'il s'agit d'une page HTML5.²

Ouvre la balise html, puis l'en-tête : il contient l'encodage des caractères et le titre de la page.³

Ferme l'en-tête, ouvre le corps et place le titre principal puis le paragraphe.

Ferme le corps, puis la balise html. Exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cuisine de Léa</title>
  </head>
  <body>
    <h1>Cuisine de Léa</h1>
    <p>Je partage ici mes recettes préférées.</p>
  </body>
</html>

Sans feuille de style, la page ne contient que le texte du fichier HTML : pour la mettre en forme, il faut du CSS.² Il permettrait de choisir couleurs, polices et agencement.²

Les langages HTML et CSS permettent au navigateur d'adapter le rendu aux conditions de consultation.⁵

Le rendu peut dépendre des dimensions de la fenêtre, des polices disponibles, des couleurs disponibles et des préférences du visiteur.⁵

Entre un téléphone et un téléviseur, ces conditions varient beaucoup, d'où des présentations différentes pour un même contenu.⁵

Le HTML permet aussi une consultation avec des dispositifs variés : terminal en mode texte, imprimante, dispositif braille ou synthétiseur vocal.⁵

Le mot « page » évoque une feuille fixe alors que la consultation peut être interactive et adaptée à l'appareil.

Pour créer une page, un éditeur de texte ou un éditeur HTML spécialisé suffit.⁵

Pour la mettre en ligne, Inès enregistre ses fichiers sur un serveur web, chez un hébergeur.⁵

Chaque page est repérée par une adresse web, que l'on tape dans la barre d'adresse du navigateur.⁵

La page d'accueil est la page dont l'adresse correspond à la racine du site.⁵

On peut aussi activer un hyperlien présent dans une autre page, une application mobile, un courriel ou un document numérique : l'adresse visée reste la même, donc la page affichée aussi.⁵