Sciences numériques et technologie (SNT) 2ⁿᵈᵉ

Ressources · 2ⁿᵈᵉ · Sciences numériques et technologie (SNT)

Langages HTML et CSS

Structure d'une page, balises, liens hypertextes, feuilles de style : écrire et modifier une page web (SNT de 2nde)

À propos de cette page

Ces exercices corrigés sur « Langages HTML et CSS » en seconde permettent de s'entraîner et de vérifier ses acquis en sciences numériques et technologie (SNT). Ils suivent le programme officiel de seconde et sont classés par difficulté (facile, moyen, difficile). Au programme : L'essentiel : HTML, CSS, balises et attributs, Structure d'une page HTML, Balises courantes et liens hypertextes, Feuilles de style CSS. Chaque exercice est suivi d'une correction rédigée, à déplier une fois la recherche faite au brouillon. Cet entraînement aide à mémoriser les méthodes, repérer ses erreurs et gagner en confiance avant un contrôle. Exercices gratuits proposés par un professeur particulier à Marseille pour réviser sciences numériques et technologie (SNT) en seconde.

Exercices corrigés, classés du plus simple au plus complexe. Cherche d'abord seul au brouillon, puis déplie la correction détaillée pour vérifier ta méthode et tes raisonnements.

Exercice 1 — Reconnaître balises et attributs

Facile

On donne l'extrait HTML suivant :

<h2>Le marché du samedi</h2>
<p>Le <strong>marché</strong> ouvre à <em>7 h</em>.</p>
<img src="etal.jpg" alt="Étal de légumes">

a) Citer toutes les balises utilisées dans cet extrait.
b) Relever les attributs de la balise image et donner la valeur de chacun.
c) Quelle balise de l'extrait ne possède pas de balise fermante ? Comment appelle-t-on ce type de balise ?
d) Quel mot est affiché en gras ? Quel texte est affiché en italique ?

a) On relève chaque nom placé entre chevrons : h2 (titre de niveau 2), p (paragraphe), strong (mot important), em (mise en valeur) et img (image). L'extrait utilise donc cinq balises : h2, p, strong, em, img.

b) Un attribut s'écrit nom="valeur" dans la balise ouvrante. La balise img a deux attributs : src de valeur etal.jpg (le fichier image à afficher) et alt de valeur « Étal de légumes » (le texte de remplacement).

c) h2, p, strong et em sont chacune fermées (</h2>, etc.). Seule img n'a pas de balise fermante : elle n'encadre aucun texte. C'est une balise orpheline (ou balise vide).

d) Par défaut, le navigateur affiche le contenu de strong en gras et celui de em en italique : « marché » est en gras et « 7 h » est en italique.

Exercice 2 — Contenu ou présentation ?

Facile

Le responsable du site d'un musée dresse la liste suivante :
(1) le titre « Salle des minéraux » ; (2) la couleur brique de tous les titres ; (3) la liste des horaires d'ouverture ; (4) la police Georgia des paragraphes ; (5) la largeur de 600 px de la zone de texte ; (6) le lien vers la page « Billetterie » ; (7) la photo d'une améthyste et sa description textuelle.

a) Classer chaque élément de la liste : relève-t-il du langage HTML ou du langage CSS ?
b) Justifier le classement de l'élément (7).
c) Expliquer l'intérêt de placer ces deux catégories d'informations dans deux fichiers différents.

a) HTML décrit ce que contient la page, CSS la façon dont elle est présentée.
• HTML (contenu) : (1) le titre (balise h1 ou h2), (3) la liste des horaires (ul et li), (6) le lien (a), (7) la photo et sa description (img avec alt).
• CSS (présentation) : (2) la couleur des titres (color), (4) la police (font-family), (5) la largeur (width).

b) La photo fait partie de l'information donnée au visiteur : elle est insérée par la balise <img>, et sa description textuelle est la valeur de l'attribut alt, lue par les lecteurs d'écran. L'élément (7) relève donc du HTML ; seule sa taille ou sa bordure éventuelle relèverait du CSS.

c) Toutes les pages du musée peuvent être reliées à une même feuille de style. Pour changer la couleur des titres sur tout le site, on modifie une seule ligne du fichier CSS au lieu de reprendre chaque page. Le code HTML reste plus court et plus lisible, et le même contenu peut recevoir une autre présentation (écran de téléphone, impression) sans être réécrit.

Exercice 3 — Compléter le squelette d'une page

Facile

On dispose du squelette suivant :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    [zone A]
  </head>
  <body>
    [zone B]
  </body>
</html>

a) Dans quelle zone faut-il écrire la ligne qui relie la page à la feuille de style recettes.css, placée dans le même dossier ? Écrire cette ligne.
b) Écrire, dans la zone qui convient, l'instruction qui affiche « Recettes de Léa » dans l'onglet du navigateur.
c) Écrire, dans la zone qui convient, un titre principal « Tarte aux pommes » suivi du paragraphe « Préparation : 25 minutes. ».
d) Le fichier recettes.css est finalement déplacé dans un sous-dossier styles. Réécrire la ligne de la question a).

a) Le lien vers la feuille de style est une information pour le navigateur, non affichée : il se place dans l'en-tête, donc en zone A :
<link rel="stylesheet" href="recettes.css">

b) Le texte de l'onglet est donné par la balise title, qui appartient elle aussi à l'en-tête (zone A) :
<title>Recettes de Léa</title>

c) Le titre et le paragraphe sont affichés dans la fenêtre : ils vont dans le corps, en zone B. Le titre principal utilise h1 :
<h1>Tarte aux pommes</h1>
<p>Préparation : 25 minutes.</p>

d) Depuis la page, il faut descendre dans le sous-dossier styles puis désigner le fichier : le chemin relatif devient styles/recettes.css.
<link rel="stylesheet" href="styles/recettes.css">

Exercice 4 — Liens hypertextes et chemins relatifs

Moyen

Le site d'un club sportif est organisé ainsi :

site/
├── index.html
├── contact.html
├── sports/
│   ├── handball.html
│   └── natation.html
└── images/
    └── logo.png

a) Dans index.html, écrire un lien de texte « Handball » vers la page handball.html.
b) Dans handball.html, écrire un lien de texte « Natation » vers natation.html.
c) Dans natation.html, écrire un lien de texte « Accueil » vers index.html.
d) Dans handball.html, insérer l'image logo.png avec le texte alternatif « Logo du club ».
e) Dans index.html, écrire un lien « S'inscrire » vers l'élément d'identifiant inscriptions de cette même page.

Un chemin relatif se lit à partir du dossier de la page qui contient le lien.

a) index.html est dans site ; handball.html est dans le sous-dossier sports : on descend dans ce dossier.
<a href="sports/handball.html">Handball</a>

b) Les deux pages sont dans le même dossier sports : le nom du fichier suffit.
<a href="natation.html">Natation</a>

c) natation.html est dans sports ; il faut remonter d'un dossier (../) pour atteindre site, qui contient index.html.
<a href="../index.html">Accueil</a>

d) Depuis sports, on remonte dans site puis on descend dans images. Une image s'insère avec img, l'attribut src pour le fichier et alt pour le texte alternatif.
<img src="../images/logo.png" alt="Logo du club">

e) Un lien vers un élément de la même page utilise le dièse suivi de l'identifiant ; l'élément visé doit porter id="inscriptions".
<a href="#inscriptions">S'inscrire</a>

Exercice 5 — Écrire des règles CSS

Moyen

Écrire la feuille de style qui réalise chacune des consignes suivantes.

a) Tous les titres h2 sont écrits en vert, de code #2E8B57.
b) Tous les paragraphes sont écrits en 17 pixels, avec un texte justifié.
c) Les éléments de classe prix sont en gras et en rouge brique #B22222. Écrire aussi le code HTML d'un paragraphe « 12,50 € » de cette classe.
d) L'élément d'identifiant bandeau a un fond noir et un texte blanc.

a) Le sélecteur de balise h2 vise tous les titres de niveau 2 ; la couleur du texte est fixée par color :
h2 { color: #2E8B57; }

b) La taille se règle avec font-size et l'alignement avec text-align ; deux déclarations séparées par un point-virgule :
p { font-size: 17px; text-align: justify; }

c) Une classe est visée par un point devant son nom. Le gras correspond à font-weight: bold :
.prix { font-weight: bold; color: #B22222; }
Côté HTML, on ajoute l'attribut class : <p class="prix">12,50 €</p>.

d) Un identifiant est visé par un dièse. Le fond se règle avec background-color, le texte avec color :
#bandeau { background-color: black; color: white; }
On pouvait aussi écrire #000000 et #FFFFFF.

Exercice 6 — Couleurs en hexadécimal

Moyen

En CSS, le code #RRGGBB indique en hexadécimal les quantités de rouge (RR), de vert (GG) et de bleu (BB), chacune entre 0 et 255.

a) Écrire la couleur #1E90C8 sous la forme rgb(…, …, …).
b) Écrire la couleur rgb(255, 165, 0) sous la forme hexadécimale.
c) Montrer que #808080 est un gris.
d) Des deux couleurs #333333 et #CCCCCC, laquelle est la plus claire ? Justifier.

En hexadécimal, les chiffres vont de 0 à 9 puis A = 10, B = 11, C = 12, D = 13, E = 14, F = 15 ; un nombre à deux chiffres xy vaut x × 16 + y.

a) 1E = 1 × 16 + 14 = 30 ; 90 = 9 × 16 + 0 = 144 ; C8 = 12 × 16 + 8 = 200.
#1E90C8 = rgb(30, 144, 200) (un bleu moyen).

b) 255 = 15 × 16 + 15, soit FF ; 165 = 10 × 16 + 5, soit A5 ; 0 s'écrit 00.
rgb(255, 165, 0) = #FFA500 (un orange).

c) 80 = 8 × 16 + 0 = 128, donc #808080 = rgb(128, 128, 128). Les trois composantes sont égales : aucune couleur ne domine, on obtient une nuance entre le noir rgb(0, 0, 0) et le blanc rgb(255, 255, 255). C'est donc un gris (gris moyen).

d) 33 = 3 × 16 + 3 = 51 et CC = 12 × 16 + 12 = 204. Les deux couleurs sont des gris ; plus les composantes sont grandes, plus la couleur est proche du blanc. Comme 204 > 51, #CCCCCC est la plus claire.

Exercice 7 — Expliquer les erreurs d'une page

Moyen

Un élève a écrit le code suivant, puis la règle CSS placée dessous :

<h1>Mon blog de voyage</h2>
<p>Départ pour <b>Lisbonne <i>demain</b></i>.</p>
<img src="tram.jpg">
<a href="itineraire.html">Voir l'itinéraire
<p>Bon voyage !</p>

p { color = purple }

a) Expliquer l'erreur de la ligne 1, puis celle de la ligne 2.
b) La ligne 3 s'affiche correctement. Expliquer pourquoi elle reste pourtant incomplète.
c) Expliquer l'effet de l'erreur de la ligne 4 sur l'affichage.
d) Expliquer pourquoi la règle CSS n'a aucun effet, puis la corriger.

a) Ligne 1 : la balise ouvrante est h1 mais la balise fermante est </h2> ; une balise se ferme par la balise de même nom. Correction : <h1>Mon blog de voyage</h1>.
Ligne 2 : les balises sont mal imbriquées. i est ouverte à l'intérieur de b, elle doit donc être fermée avant b. Correction : <b>Lisbonne <i>demain</i></b>.

b) L'image s'affiche car l'attribut src est présent, mais il manque l'attribut alt. Sans lui, un lecteur d'écran ne peut pas décrire l'image et aucun texte ne la remplace si le fichier ne se charge pas : la page n'est pas accessible. Correction : <img src="tram.jpg" alt="Tramway jaune dans une rue en pente">.

c) La balise </a> est absente : le lien n'est jamais fermé, donc le navigateur rend cliquable tout le texte qui suit, y compris « Bon voyage ! ». Correction : <a href="itineraire.html">Voir l'itinéraire</a>.

d) En CSS, propriété et valeur sont séparées par deux-points, pas par un signe égal. Le navigateur ne comprend pas la déclaration et l'ignore sans afficher d'erreur. Correction : p { color: purple; } (le point-virgule final est recommandé).

Exercice 8 — Type bac — Prévoir le rendu d'une page stylée

Difficile

Document 1 — corps de la page labo.html

<body>
  <h1 id="titre">Portes ouvertes du laboratoire</h1>
  <p>Venez découvrir nos <em>expériences</em>.</p>
  <p class="info">Entrée libre.</p>
  <ul>
    <li class="info">Salle B12 : chimie</li>
    <li>Salle B15 : robotique</li>
  </ul>
</body>

Document 2 — feuille de style labo.css, reliée à la page

body   { color: #2F4F4F; font-family: Verdana, sans-serif; }
h1     { color: #8B0000; text-align: center; }
#titre { color: #4B0082; }
p      { font-size: 15px; }
.info  { color: #006400; font-weight: bold; }
li     { color: #FF8C00; }

1. Quelle est la couleur du titre h1 ? Est-il centré ? Justifier.
2. Décrire l'affichage de la phrase « Venez découvrir nos expériences. » : couleur, taille, style du mot « expériences ».
3. Décrire l'affichage de « Entrée libre. ».
4. Donner la couleur de chacun des deux éléments de la liste en justifiant.
5. Montrer que la règle h1 { color: #8B0000; } n'a aucun effet visible sur la couleur, puis proposer, sans écrire de nouvelle règle CSS, une modification du HTML qui affiche « Salle B15 : robotique » comme « Salle B12 : chimie ».

1. Deux règles fixent la couleur du titre : h1 (sélecteur de balise) et #titre (sélecteur d'identifiant, puisque le titre porte id="titre"). L'identifiant est plus spécifique qu'une balise : la couleur est #4B0082 (un violet indigo). La propriété text-align: center de la règle h1 n'est contredite par aucune autre règle : le titre est centré.

2. Aucune règle ne fixe color pour p : la couleur est héritée de body, soit #2F4F4F (gris ardoise foncé), en police Verdana (héritée elle aussi). La règle p impose une taille de 15 px. Le mot « expériences », dans em, hérite couleur, police et taille du paragraphe et s'affiche en italique (style par défaut de em).

3. Ce paragraphe est visé par p (taille 15 px) et par .info (couleur et gras). Il s'affiche en vert foncé #006400, en gras, en 15 px, en Verdana.

4. « Salle B12 : chimie » est visé par li et par .info, qui fixent tous deux la couleur ; la classe est plus spécifique que la balise : vert foncé #006400, en gras.
« Salle B15 : robotique » n'est visé que par li : orange foncé #FF8C00, sans gras. La règle p ne concerne pas les li : leur taille est celle par défaut.

5. Le seul élément h1 de la page porte l'identifiant titre. Pour la propriété color, la règle #titre l'emporte toujours sur la règle h1, quel que soit leur ordre d'écriture. La valeur #8B0000 n'est donc jamais appliquée : cette déclaration n'a aucun effet visible (seul text-align de cette règle agit).
Pour la dernière question, il suffit d'ajouter la classe au second élément de liste : <li class="info">Salle B15 : robotique</li>. Il sera alors vert foncé et en gras, comme le premier.

Exercice 9 — Type bac — Diagnostiquer des liens cassés

Difficile

Document 1 — arborescence du site du lycée

lycee/
├── accueil.html
├── cdi/
│   ├── horaires.html
│   └── nouveautes.html
└── vie/
    ├── ateliers.html
    └── photos/
        └── theatre.jpg

Document 2 — liens écrits dans la page vie/ateliers.html

Lien	Code
1	`<a href="../accueil.html">Accueil</a>`
2	`<img src="photos/theatre.jpg" alt="Répétition de l'atelier théâtre">`
3	`<a href="horaires.html">Horaires du CDI</a>`
4	`<a href="https://fr.wikipedia.org/wiki/Théâtre">Le théâtre</a>`

1. Pour chacun des liens 1, 2 et 3, indiquer le fichier atteint ou expliquer pourquoi le lien est cassé.
2. Corriger le lien 3.
3. Le lien 4 utilise un autre type de chemin. Lequel ? Pourquoi est-il nécessaire ici ?
4. Le webmestre renomme le dossier vie en vie-lyceenne. Les liens 1 et 2 de la page ateliers.html fonctionnent-ils encore ? Quels liens du site risquent en revanche d'être cassés ?
5. Expliquer pourquoi on préfère des chemins relatifs pour les liens internes d'un site.

1. La page ateliers.html est dans le dossier lycee/vie : tous les chemins relatifs partent de là.
• Lien 1 : .. remonte dans lycee, qui contient accueil.html : il atteint lycee/accueil.html, il fonctionne.
• Lien 2 : on descend de vie dans photos : il atteint lycee/vie/photos/theatre.jpg, l'image s'affiche.
• Lien 3 : sans dossier indiqué, le navigateur cherche lycee/vie/horaires.html. Ce fichier n'existe pas (il est dans cdi) : le serveur répond par une erreur, le lien est cassé.

2. Depuis vie, il faut remonter dans lycee puis descendre dans cdi :
<a href="../cdi/horaires.html">Horaires du CDI</a>

3. Le lien 4 utilise un chemin absolu (adresse complète commençant par https://). La page visée n'appartient pas au site du lycée : aucun chemin relatif ne peut y mener, il faut indiquer le serveur qui l'héberge.

4. Les liens 1 et 2 sont écrits par rapport à la page elle-même. Après le renommage, ateliers.html est dans vie-lyceenne, qui est toujours un sous-dossier de lycee et contient toujours photos : ../accueil.html et photos/theatre.jpg désignent toujours les bons fichiers. Les liens 1 et 2 fonctionnent encore.
En revanche, tous les liens des autres pages qui visaient vie/ateliers.html (par exemple depuis accueil.html) contiennent l'ancien nom du dossier : ils sont cassés et doivent être corrigés.

5. Un chemin relatif ne contient pas le nom du serveur. Si le site entier est copié sur un autre serveur, ou testé sur l'ordinateur du webmestre, ses liens internes restent valides tant que l'organisation des dossiers est conservée. Avec des chemins absolus, il faudrait réécrire chaque lien. C'est pourquoi on réserve le chemin absolu aux liens vers d'autres sites.

Exercice 10 — Type bac — Style intégré ou feuille de style externe ?

Difficile

Un site de 23 pages doit avoir partout la même présentation. Deux solutions sont comparées.
Document 1 — les deux versions

Version	Organisation
A	Chaque page contient, dans son `head`, un même bloc `<style>…</style>` de 1 480 octets.
B	Un fichier `commun.css` de 1 480 octets ; chaque page contient la ligne `<link rel="stylesheet" href="commun.css">`, de 42 octets (retour à la ligne compris).

Document 2 — fonctionnement du cache
Un navigateur garde en mémoire (cache) un fichier CSS déjà téléchargé et ne le redemande pas au serveur pour les pages suivantes du même site.

1. Calculer la place occupée par les informations de style sur le serveur dans la version A, puis dans la version B.
2. Montrer que la version B occupe plus de 13 fois moins de place que la version A pour ces informations.
3. Un visiteur consulte 6 pages du site. Calculer, pour chaque version, le nombre d'octets de style qu'il télécharge.
4. On veut changer la couleur de tous les titres. Combien de fichiers faut-il modifier dans chaque version ?
5. Un élève affirme : « La version B est plus lente, car le navigateur doit demander un fichier de plus. » Discuter cette affirmation à l'aide des résultats précédents.

1. Version A : le bloc de 1 480 octets est recopié dans chacune des 23 pages : 23 × 1 480 = 34 040 octets.
Version B : le fichier commun.css (1 480 octets) plus une ligne de 42 octets par page : 1 480 + 23 × 42 = 1 480 + 966 = 2 446 octets.

2. On calcule le rapport : 34 040 ÷ 2 446 ≈ 13,9. Comme 13 × 2 446 = 31 798 < 34 040, la version A occupe plus de 13 fois la place de la version B : la version B occupe plus de 13 fois moins de place.

3. Version A : chaque page contient son bloc de style, téléchargé 6 fois : 6 × 1 480 = 8 880 octets.
Version B : le fichier CSS est téléchargé une seule fois, puis lu dans le cache (document 2) ; s'y ajoutent les 6 lignes link : 1 480 + 6 × 42 = 1 480 + 252 = 1 732 octets.

4. Version A : la règle des titres est recopiée dans chaque page, il faut modifier 23 fichiers (avec un risque d'en oublier un et d'obtenir un site incohérent). Version B : on modifie un seul fichier, commun.css, et les 23 pages changent ensemble.

5. L'affirmation est vraie pour la première page visitée : le navigateur envoie une requête de plus pour obtenir commun.css. Mais ce fichier est ensuite conservé dans le cache : dès la deuxième page, il n'est plus redemandé. Sur 6 pages, la version B fait télécharger 1 732 octets de style contre 8 880 pour la version A, soit environ cinq fois moins. L'affirmation est donc fausse dès que le visiteur consulte plusieurs pages, et la version B est en outre bien plus simple à maintenir : c'est l'intérêt de séparer contenu (HTML) et présentation (CSS).

Bloqué sur ce chapitre ?

Moi c'est Ben, j'ai créé ce site pour aider le plus d'élèves possible, partout en France. Je peux aussi reprendre avec toi ce qui coince en cours particulier : en visio, ou à domicile si tu es à Marseille.

Réserver un 1^er cours → Voir les tarifs

Soutien scolaire à Marseille · Cours particuliers au lycée · Aide aux devoirs