\documentclass[a4paper,11pt]{article}

\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[francais,bloc,completemulti]{automultiplechoice}
\usepackage[french]{babel}
\usepackage{amsmath, amssymb}

\title{Structure HTML}
\date{Numérique et sciences informatiques}

\begin{document}

\noindent\textbf{Structure HTML} \hfill \textit{Numérique et sciences informatiques}\\[0.4em]
Nom~: \dotfill\ Prénom~: \dotfill

\bigskip

\element{premierehtmlstructure}{
  \begin{question}{q01}
    Que signifie l'acronyme \textbf{HTML} ?
    \begin{choices}
    \wrongchoice{High Tech Modern Language}
    \wrongchoice{Hypertext Modern Layout}
    \wrongchoice{Home Tool Markup Language}
    \correctchoice{HyperText Markup Language}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q02}
    Quelle est la \textbf{forme générale} d'une balise HTML ?
    \begin{choices}
    \wrongchoice{\texttt{balise(contenu)}}
    \correctchoice{\texttt{<balise>contenu</balise>}}
    \wrongchoice{\texttt{\{balise contenu\}}}
    \wrongchoice{\texttt{[balise: contenu]}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q03}
    Que doit contenir la \textbf{première ligne} d'un
document HTML moderne ?
    \begin{choices}
    \wrongchoice{\texttt{<body>}}
    \wrongchoice{\texttt{<html>}}
    \correctchoice{\texttt{<!DOCTYPE html>}}
    \wrongchoice{\texttt{<head>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q04}
    Quelle est la \textbf{structure minimale} d'une page
HTML5 ?
    \begin{choices}
    \correctchoice{\begin{lstlisting}
<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<html><body>...</body></html>
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<body>...</body>
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<main>...</main>
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q05}
    Quelle balise produit un titre de \textbf{niveau 1}
(le plus grand) ?
    \begin{choices}
    \wrongchoice{\texttt{<head>}}
    \wrongchoice{\texttt{<title1>}}
    \wrongchoice{\texttt{<title>}}
    \correctchoice{\texttt{<h1>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q06}
    Quelle balise délimite un \textbf{paragraphe} de texte ?
    \begin{choices}
    \wrongchoice{\texttt{<para>}}
    \wrongchoice{\texttt{<paragraph>}}
    \wrongchoice{\texttt{<text>}}
    \correctchoice{\texttt{<p>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q07}
    Quelle est la syntaxe d'un \textbf{lien} vers
\texttt{https://example.com} ?
    \begin{choices}
    \wrongchoice{\texttt{<link href="https://example.com">texte</link>}}
    \wrongchoice{\texttt{<href="https://example.com">texte</href>}}
    \wrongchoice{\texttt{<url="https://example.com">texte</url>}}
    \correctchoice{\texttt{<a href="https://example.com">texte</a>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q08}
    Quelle est la balise pour afficher une \textbf{image} ?
    \begin{choices}
    \wrongchoice{\texttt{<image src="...">}}
    \wrongchoice{\texttt{<picture src="...">}}
    \wrongchoice{\texttt{<src="...">}}
    \correctchoice{\texttt{<img src="..." alt="...">}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q09}
    Quelle balise crée une \textbf{liste à puces} ?
    \begin{choices}
    \wrongchoice{\texttt{<ol>} (ordered list)}
    \wrongchoice{\texttt{<list>}}
    \correctchoice{\texttt{<ul>} (unordered list)}
    \wrongchoice{\texttt{<bullet>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q10}
    Dans \texttt{<a href="page.html">lien</a>}, qu'est-ce
que \texttt{href} ?
    \begin{choices}
    \wrongchoice{Une variable JavaScript}
    \wrongchoice{Une balise}
    \wrongchoice{Une fonction}
    \correctchoice{Un attribut de la balise \texttt{<a>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q11}
    Pourquoi préfère-t-on les balises \textbf{sémantiques}
(\texttt{<header>}, \texttt{<nav>}, \texttt{<article>}, \texttt{<footer>})
à des \texttt{<div>} génériques ?
    \begin{choices}
    \correctchoice{Pour l'accessibilité (lecteurs d'écran), le référencement (SEO) et la lisibilité du code}
    \wrongchoice{Parce que \texttt{<div>} est obsolète}
    \wrongchoice{Pour le rendu visuel}
    \wrongchoice{Parce que ces balises sont plus rapides}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q12}
    Quelle est la différence entre \texttt{<div>} et
\texttt{<span>} ?
    \begin{choices}
    \wrongchoice{\texttt{<div>} est obsolète}
    \correctchoice{\texttt{<div>} est un conteneur de bloc (prend toute la largeur, saut de ligne) ; \texttt{<span>} est un conteneur inline (intégré dans le flux du texte)}
    \wrongchoice{Aucune}
    \wrongchoice{\texttt{<span>} ne fonctionne que dans \texttt{<head>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q13}
    À quoi sert
\texttt{<meta charset="utf-8">} dans \texttt{<head>} ?
    \begin{choices}
    \wrongchoice{À définir la couleur de la page}
    \correctchoice{À indiquer au navigateur l'encodage des caractères du document (ici UTF-8, qui supporte les caractères français, asiatiques, emojis...)}
    \wrongchoice{À activer JavaScript}
    \wrongchoice{À cacher la page aux moteurs de recherche}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q14}
    Quelle est la différence entre les attributs
\texttt{class} et \texttt{id} ?
    \begin{choices}
    \wrongchoice{\texttt{class} est obsolète}
    \correctchoice{\texttt{id} doit être unique dans la page ; \texttt{class} peut être attribuée à plusieurs éléments}
    \wrongchoice{\texttt{id} ne fonctionne pas en HTML5}
    \wrongchoice{Aucune, ce sont des synonymes}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q15}
    Quelles balises HTML structurent un \textbf{tableau} ?
    \begin{choices}
    \correctchoice{\texttt{<table>}, \texttt{<tr>} (table row), \texttt{<td>} (table data) et \texttt{<th>} (table header)}
    \wrongchoice{\texttt{<grid>}, \texttt{<row>}, \texttt{<cell>}}
    \wrongchoice{\texttt{<table>} seul suffit}
    \wrongchoice{\texttt{<spreadsheet>}, \texttt{<line>}, \texttt{<column>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q16}
    Lequel des codes suivants est \textbf{incorrect} ?
    \begin{choices}
    \wrongchoice{\begin{lstlisting}
<a href="x"><strong>texte</strong></a>
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<ul><li>élément</li></ul>
\end{lstlisting}
}
    \wrongchoice{\begin{lstlisting}
<p>Voici un <strong>mot</strong> important.</p>
\end{lstlisting}
}
    \correctchoice{\begin{lstlisting}
<p>Texte <p>imbriqué</p>.</p>
\end{lstlisting}
}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q17}
    Lesquelles de ces balises sont \textbf{auto-fermantes}
(sans balise fermante) ?
    \begin{choices}
    \correctchoice{\texttt{<img>}, \texttt{<br>}, \texttt{<hr>}, \texttt{<meta>}, \texttt{<link>}, \texttt{<input>}}
    \wrongchoice{\texttt{<p>}, \texttt{<div>}, \texttt{<span>}}
    \wrongchoice{\texttt{<title>}}
    \wrongchoice{\texttt{<head>}, \texttt{<body>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q18}
    Quelle balise utilise-t-on pour mettre un mot
\textbf{important} en valeur ?
    \begin{choices}
    \wrongchoice{\texttt{<important>}}
    \wrongchoice{\texttt{<text-bold>}}
    \wrongchoice{\texttt{<bold>}}
    \correctchoice{\texttt{<strong>} ou \texttt{<b>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q19}
    Si la page est \texttt{/site/index.html} et l'image
est \texttt{/site/img/photo.jpg}, quel \texttt{src} utiliser
pour le chemin \textbf{relatif} ?
    \begin{choices}
    \wrongchoice{\texttt{../img/photo.jpg}}
    \wrongchoice{\texttt{https://./img/photo.jpg}}
    \correctchoice{\texttt{img/photo.jpg}}
    \wrongchoice{\texttt{/img/photo.jpg}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q20}
    Quelle pratique améliore le plus
l'\textbf{accessibilité} d'une page web ?
    \begin{choices}
    \wrongchoice{Désactiver le clavier}
    \wrongchoice{Utiliser des couleurs vives}
    \wrongchoice{Mettre tout le texte en gras}
    \correctchoice{Fournir des textes alternatifs (\texttt{alt}) pour les images, utiliser des balises sémantiques, structurer avec des titres \texttt{<h1>...<h6>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q21}
    Que produit visuellement le code suivant ?
\begin{lstlisting}
<ul>
  <li>Pomme</li>
  <li>Banane</li>
  <ol>
    <li>Cerise</li>
  </ol>
</ul>
\end{lstlisting}
    \begin{choices}
    \wrongchoice{Une liste à puces avec « Pomme », « Banane » et une sous-liste numérotée contenant « Cerise »}
    \wrongchoice{Une erreur empêche tout affichage}
    \correctchoice{Le code est mal structuré : \texttt{<ol>} doit être imbriqué dans un \texttt{<li>}}
    \wrongchoice{Une seule liste fusionnée}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q22}
    Quel élément est manquant dans cette structure
pour un document HTML5 conforme ?
\begin{lstlisting}
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>
\end{lstlisting}
    \begin{choices}
    \correctchoice{Un \texttt{<title>} dans \texttt{<head>}}
    \wrongchoice{Un attribut \texttt{lang} sur \texttt{<html>}}
    \wrongchoice{Un \texttt{<script>}}
    \wrongchoice{Une balise \texttt{<style>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q23}
    Pourquoi utiliser un \texttt{<table>} pour la \textbf{mise en
page} d'une page web (en dehors de présenter
des données tabulaires) est-il fortement
déconseillé ?
    \begin{choices}
    \wrongchoice{Aucune raison, c'est une bonne pratique}
    \correctchoice{Mauvaise sémantique (les tableaux décrivent des données tabulaires), accessibilité dégradée (lecteurs d'écran annoncent « tableau »), code rigide difficile à adapter (responsive)}
    \wrongchoice{HTML5 a supprimé \texttt{<table>}}
    \wrongchoice{Cela ralentit le navigateur}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q24}
    Comment \textbf{vérifier} que son code HTML est
conforme au standard ?
    \begin{choices}
    \correctchoice{En utilisant le validateur du W3C (validator.w3.org) qui détecte les erreurs de syntaxe et de structure}
    \wrongchoice{En lançant un programme Python}
    \wrongchoice{En relisant le code visuellement}
    \wrongchoice{En attendant que ça plante}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q25}
    Parmi les affirmations suivantes sur HTML,
laquelle est \textbf{fausse} ?
    \begin{choices}
    \wrongchoice{Les balises sémantiques (\texttt{<header>}, \texttt{<nav>}, etc.) améliorent l'accessibilité et le SEO}
    \wrongchoice{La structure d'une page comprend toujours \texttt{<head>} et \texttt{<body>} dans \texttt{<html>}}
    \wrongchoice{HTML est un langage de balisage (pas un langage de programmation)}
    \correctchoice{Un même \texttt{id} peut être utilisé pour plusieurs éléments dans la même page}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q26}
    Dans la balise \texttt{<head>} d'une page HTML, à quoi sert
la balise suivante ?

\begin{lstlisting}
<meta name="description" content="Cours de NSI en ligne">
\end{lstlisting}
    \begin{choices}
    \correctchoice{À fournir une description de la page utilisée par les moteurs de recherche dans leurs résultats}
    \wrongchoice{À définir le titre affiché dans l'onglet du navigateur}
    \wrongchoice{À empêcher l'indexation de la page}
    \wrongchoice{À afficher la phrase « Cours de NSI en ligne » sur la page}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q27}
    Quelle balise HTML permet d'intégrer le contenu
d'une autre page web à l'intérieur de la page
courante ?
    \begin{choices}
    \correctchoice{\texttt{<iframe>}}
    \wrongchoice{\texttt{<embed>}}
    \wrongchoice{\texttt{<include>}}
    \wrongchoice{\texttt{<link>}}
    \end{choices}
  \end{question}
}

\element{premierehtmlstructure}{
  \begin{question}{q28}
    Parmi les balises suivantes, laquelle est par défaut
un \textbf{élément en bloc} (qui occupe toute la largeur
disponible et provoque un retour à la ligne) ?
    \begin{choices}
    \wrongchoice{\texttt{<strong>}}
    \wrongchoice{\texttt{<span>}}
    \correctchoice{\texttt{<div>}}
    \wrongchoice{\texttt{<a>}}
    \end{choices}
  \end{question}
}


\onecopy{1}{
  \shufflegroup{premierehtmlstructure}
  \insertgroup{premierehtmlstructure}
}

\end{document}
