Langages HTML et CSS

Créer et mettre en forme des pages web — thème « Le Web » (programme SNT 2nde)

À propos de cette page

Ces problèmes corrigés sur « Langages HTML et CSS » en seconde permettent d'appliquer le cours à des situations concrètes en sciences numériques et technologie (SNT). Ils suivent le programme officiel de seconde et se résolvent étape par étape. Au programme : Qu'est-ce que le HTML ?, Structure d'une page HTML, Les principales balises HTML, Les hyperliens et les images. Cherche au brouillon, saisis ta réponse puis clique sur « Vérifier » pour te corriger. Idéal pour développer le raisonnement, la rigueur et la confiance avant une évaluation. Problèmes gratuits proposés par un professeur particulier à Marseille pour progresser en sciences numériques et technologie (SNT) en seconde.

Résous chaque problème, écris ta réponse puis clique sur « Vérifier ». Pose tes calculs au brouillon.

Facile

Problème 1 — Créer une page personnelleTu veux créer une page web présentant ton club de sport. Elle doit contenir : un titre principal avec le nom du club, un paragraphe de présentation, une liste de 3 activités proposées, et un lien vers le site de la fédération.

Quelle balise utilises-tu pour le titre principal du club ?

Quelle balise utilises-tu pour la liste des activités ?

Écris la balise complète pour créer un lien texte « Fédération » pointant vers https://www.fffa.fr.

Dans quel fichier et dans quelle balise dois-tu placer le lien vers le fichier style.css ?

Voir le corrigé

<h1> — <h1> est la balise de titre de niveau 1, la plus importante de la page.
- Réponse libre — exemple : <a href="https://www.fffa.fr">Fédération</a>
- Réponse libre — exemple : Dans le fichier index.html, dans la balise <head> : <link rel="stylesheet" href="style.css">

Moyen

Problème 2 — Mise en forme CSSTu as une page HTML avec des titres <h1> et des paragraphes <p>. Tu veux : titres en bleu foncé (#1a3a6b), paragraphes en gris (#555), fond de page blanc cassé (#f9f9f9), et les paragraphes centrés.

Écris la règle CSS pour mettre les titres h1 en bleu foncé (#1a3a6b).

Écris la règle CSS pour centrer le texte des paragraphes et les mettre en gris #555.

Quelle propriété CSS appliques-tu sur la balise <body> pour définir la couleur de fond de la page ?

Si tu veux que ces styles s'appliquent à toutes les pages du site, quel type de CSS dois-tu utiliser ?

Voir le corrigé

Réponse libre — exemple : h1 { color: #1a3a6b; }
Réponse libre — exemple : p { color: #555; text-align: center; }
background-color — body { background-color: #f9f9f9; } définit la couleur de fond de toute la page.
CSS externe — Un fichier CSS externe (style.css) lié à chaque page HTML garantit une mise en forme cohérente sur tout le site.

Problème 3 — Déboguer du code HTMLVoici du code HTML comportant des erreurs :

<html>
<head><title>Ma page</title>
</head>
<body>
<h1>Bienvenue<h1>
<p>Bonjour !
<img src="photo.jpg">
</body></html>

Quelle erreur y a-t-il sur la balise de titre ?

Quelle directive HTML5 est absente en début de fichier ?

Quel attribut obligatoire manque dans la balise <img> ?

La balise <p> est-elle correctement fermée ? Comment corriger ?

Voir le corrigé

</h1> manquant — <h1>Bienvenue<h1> devrait être <h1>Bienvenue</h1> (slash manquant dans la balise fermante).
— La déclaration doit être la première ligne du fichier.
alt — L'attribut alt est obligatoire : <img src="photo.jpg" alt="description">.
Réponse libre — exemple : Non, la balise <p> n'est pas fermée. Il faut ajouter </p> après « Bonjour ! » : <p>Bonjour !</p>.

Difficile

Problème 4 — Architecture d'un site webTu crées un site composé de deux pages : index.html (accueil) et contact.html. Les deux partagent le même fichier style.css. Le site est stocké dans le dossier monsite/. Dans ce dossier se trouve aussi un sous-dossier images/ contenant logo.png.

Écris le chemin relatif à utiliser dans src pour afficher logo.png depuis index.html.

Écris la balise complète pour créer, depuis index.html, un lien vers contact.html.

Pourquoi est-il préférable d'utiliser des chemins relatifs plutôt qu'absolus pour les ressources internes d'un site ?

Comment la page contact.html doit-elle lier le fichier style.css ? Écris la balise.

Voir le corrigé

images/logo.png — Depuis index.html situé dans monsite/, le chemin relatif vers logo.png est images/logo.png.
<a href="contact.html">contact</a> — <a href="contact.html">Contactez-nous</a> utilise un chemin relatif.
Réponse libre — exemple : Les chemins relatifs fonctionnent quel que soit l'emplacement du site (sur un serveur, sur un disque local, dans un sous-dossier), contrairement aux chemins absolus qui dépendent d'une adresse précise et risquent de casser si le site est déplacé.
Réponse libre — exemple : <link rel="stylesheet" href="style.css"> dans le <head> de contact.html.

Problème 5 — Calcul et modèle boîteUn développeur applique le CSS suivant à un élément .carte :
width: 300px; padding: 20px; border: 4px solid; margin: 15px;

Quelle est la largeur totale de la boîte (contenu + padding + border), sans compter la marge ?

Quelle est l'espace total occupé horizontalement (en comptant les marges des deux côtés) ?

Si on applique margin: 0 auto; à la place, quel est l'effet visuel ?

Que se passe-t-il si on enlève la propriété width ? Comment se comporte un

par défaut ?

Voir le corrigé

348px — Largeur totale = 300 + 2×20 + 2×4 = 300 + 40 + 8 = 348 px.
378px — Largeur totale avec marges = 348 + 2×15 = 378 px.
centrage horizontal — margin: 0 auto centre la boîte horizontalement si elle a une largeur fixe.
Réponse libre — exemple : Sans width, un
(élément de type bloc) s'étend sur toute la largeur disponible de son conteneur parent, c'est son comportement par défaut.

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