HTML et CSS : exercices corrigés de Première NSI

La balise ouvrante est <p class="note"> : elle va du premier < au premier >.

La balise fermante est </p> : elle reprend le nom p précédé d'un /.

Dans la balise ouvrante, on lit class="note" : l'attribut s'appelle class et sa valeur est note.

Le texte affiché est ce qui se trouve entre les deux balises : Suite du cours.

Ligne 1 : <html lang="fr"> est une balise ouvrante (1). L'attribut lang ne crée pas de balise supplémentaire.

Ligne 2 : <head> (2) puis <title> (3). Le </title> et le </head> sont des balises fermantes, on ne les compte pas.

Ligne 3 : <body> (4).

Ligne 4 : <h1> (5). Ligne 5 : <p> (6).

Les lignes 6 et 7 ne contiennent que des balises fermantes. Le total est donc de 6 balises ouvrantes : html, head, title, body, h1, p.

Le body est placé avant le head : l'élément racine doit contenir le head puis le body.

Le paragraphe <p>Bonjour n'est jamais refermé : il manque </p>.

La langue n'est pas indiquée : on ajoute l'attribut lang="fr" à l'élément racine.

On réécrit le document dans le bon ordre, avec toutes les fermetures.

<html lang="fr">
<head><title>Salut</title></head>
<body>
<p>Bonjour</p>
</body>
</html>

Les éléments du fragment sont : h1, p, span, strong, p. Parmi eux, seuls span et strong sont de type texte, soit 2 éléments.

Le premier p contient du texte, un élément span et un élément strong. Le titre h1 et le second p ne contiennent que du texte.

L'élément span est entièrement placé entre <p> et </p> : il est donc bien inclus dans le premier paragraphe, c'est un élément enfant de ce p.

On écrit l'élément racine avec la langue anglaise : <html lang="en">.

On ajoute le head avec le titre de l'onglet : <head><title>My holidays</title></head>.

Dans le body, on place le titre principal : <h1>Holidays in Spain</h1>.

On écrit le paragraphe en plaçant le mot « sea » dans l'élément strong : <p>I love the <strong>sea</strong>.</p>.

On assemble et on referme chaque élément.

<html lang="en">
<head><title>My holidays</title></head>
<body>
<h1>Holidays in Spain</h1>
<p>I love the <strong>sea</strong>.</p>
</body>
</html>

Le sélecteur p vise chaque élément p du document. On lit trois balises <p> : Paris, Rome et Oslo. La règle s'applique donc à 3 éléments.

Le titre est un élément h1, pas un p : il n'est pas concerné et garde sa couleur habituelle.

Pour viser le titre, on remplace le sélecteur et la valeur : h1 { color: red; }.

Dans le head, <title>Recettes<title> ouvre une seconde fois l'élément au lieu de le fermer : il faut écrire </title>.

Le titre principal est ouvert par <h1> mais fermé par </h2> : les noms ne correspondent pas, il faut </h1>.

Dans le paragraphe, le nom d'attribut clas est mal écrit : le navigateur ne signale rien, mais l'effet attendu n'a pas lieu. Il faut écrire class.

Par habitude, on met aussi la valeur de lang entre guillemets : lang="fr".

Le code corrigé :

<html lang="fr">
<head>
<title>Recettes</title>
</head>
<body>
<h1>Crêpes</h1>
<p class="note">Pâte à préparer la veille</p>
</body>
</html>

Avec class, l'attribut est reconnu : le paragraphe porte bien la classe note, que le CSS pourra ensuite viser.