\documentclass[10pt,aspectratio=169]{beamer}

% --- Thème ---
\usetheme[language=french]{Celestia}

% Avec [allowframebreaks] sur les frames de questions, Beamer ajoute
% par défaut « (1) », « (2) », « (3) »... sur chaque sous-slide. On
% supprime entièrement cette annotation : un template vide pour
% « frametitle continuation ». L'enseignant identifie visuellement la
% continuation par le contenu de la slide. (Les variantes [from second]
% et [roman] interagissent mal avec un titre contenant \textemdash{}
% sous Celestia : elles déclenchent une erreur « Missing $ inserted ».)
\setbeamertemplate{frametitle continuation}{}

\subject{Numérique et sciences informatiques}
\title{Structure HTML}
\subtitle{QCM}
\author{Première}
\date{\today}

\begin{document}

\begin{frame}
    \titlepage
\end{frame}

% Q1 - Réponse en D
\begin{frame}[fragile]{Question 1 \textemdash{} Que signifie HTML ?}
    Que signifie l'acronyme \textbf{HTML} ?\medskip
    \begin{itemize}
        \item[A.] High Tech Modern Language
        \item[B.] Hypertext Modern Layout
        \item[C.] Home Tool Markup Language
        \item[\alert<2>{D.}] \alert<2>{HyperText Markup Language}
    \end{itemize}
\end{frame}

% Q2 - Réponse en B
\begin{frame}[fragile]{Question 2 \textemdash{} Balise HTML}
    Quelle est la \textbf{forme générale} d'une balise HTML ?\medskip
    \begin{itemize}
        \item[A.] \texttt{balise(contenu)}
        \item[\alert<2>{B.}] \alert<2>{\texttt{<balise>contenu</balise>}}
        \item[C.] \texttt{\{balise contenu\}}
        \item[D.] \texttt{[balise: contenu]}
    \end{itemize}
\end{frame}

% Q3 - Réponse en C
\begin{frame}[fragile]{Question 3 \textemdash{} Doctype}
    Que doit contenir la \textbf{première ligne} d'un
document HTML moderne ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<body>}
        \item[B.] \texttt{<html>}
        \item[\alert<2>{C.}] \alert<2>{\texttt{<!DOCTYPE html>}}
        \item[D.] \texttt{<head>}
    \end{itemize}
\end{frame}

% Q4 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 4 \textemdash{} Structure d'une page}
    Quelle est la \textbf{structure minimale} d'une page
HTML5 ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<html><body>...</body></html>
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<body>...</body>
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
<main>...</main>
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q4 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 4 \textemdash{} Structure d'une page}
    Quelle est la \textbf{structure minimale} d'une page
HTML5 ?\medskip
    \begin{itemize}
        \item[\alert{A.}]~\\
\begin{lstlisting}
<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<html><body>...</body></html>
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<body>...</body>
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
<main>...</main>
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q5 - Réponse en D
\begin{frame}[fragile]{Question 5 \textemdash{} Titres}
    Quelle balise produit un titre de \textbf{niveau 1}
(le plus grand) ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<head>}
        \item[B.] \texttt{<title1>}
        \item[C.] \texttt{<title>}
        \item[\alert<2>{D.}] \alert<2>{\texttt{<h1>}}
    \end{itemize}
\end{frame}

% Q6 - Réponse en D
\begin{frame}[fragile]{Question 6 \textemdash{} Paragraphe}
    Quelle balise délimite un \textbf{paragraphe} de texte ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<para>}
        \item[B.] \texttt{<paragraph>}
        \item[C.] \texttt{<text>}
        \item[\alert<2>{D.}] \alert<2>{\texttt{<p>}}
    \end{itemize}
\end{frame}

% Q7 - Réponse en D
\begin{frame}[fragile]{Question 7 \textemdash{} Lien hypertexte}
    Quelle est la syntaxe d'un \textbf{lien} vers
\texttt{https://example.com} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<link href="https://example.com">texte</link>}
        \item[B.] \texttt{<href="https://example.com">texte</href>}
        \item[C.] \texttt{<url="https://example.com">texte</url>}
        \item[\alert<2>{D.}] \alert<2>{\texttt{<a href="https://example.com">texte</a>}}
    \end{itemize}
\end{frame}

% Q8 - Réponse en D
\begin{frame}[fragile]{Question 8 \textemdash{} Image}
    Quelle est la balise pour afficher une \textbf{image} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<image src="...">}
        \item[B.] \texttt{<picture src="...">}
        \item[C.] \texttt{<src="...">}
        \item[\alert<2>{D.}] \alert<2>{\texttt{<img src="..." alt="...">}}
    \end{itemize}
\end{frame}

% Q9 - Réponse en C
\begin{frame}[fragile]{Question 9 \textemdash{} Liste non ordonnée}
    Quelle balise crée une \textbf{liste à puces} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<ol>} (ordered list)
        \item[B.] \texttt{<list>}
        \item[\alert<2>{C.}] \alert<2>{\texttt{<ul>} (unordered list)}
        \item[D.] \texttt{<bullet>}
    \end{itemize}
\end{frame}

% Q10 - Réponse en D
\begin{frame}[fragile]{Question 10 \textemdash{} Attributs}
    Dans \texttt{<a href="page.html">lien</a>}, qu'est-ce
que \texttt{href} ?\medskip
    \begin{itemize}
        \item[A.] Une variable JavaScript
        \item[B.] Une balise
        \item[C.] Une fonction
        \item[\alert<2>{D.}] \alert<2>{Un attribut de la balise \texttt{<a>}}
    \end{itemize}
\end{frame}

% Q11 - Réponse en A
\begin{frame}[fragile]{Question 11 \textemdash{} Balises sémantiques}
    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 ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{Pour l'accessibilité (lecteurs d'écran), le référencement (SEO) et la lisibilité du code}
        \item[B.] Parce que \texttt{<div>} est obsolète
        \item[C.] Pour le rendu visuel
        \item[D.] Parce que ces balises sont plus rapides
    \end{itemize}
\end{frame}

% Q12 - Réponse en B
\begin{frame}[fragile]{Question 12 \textemdash{} div vs span}
    Quelle est la différence entre \texttt{<div>} et
\texttt{<span>} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<div>} est obsolète
        \item[\alert<2>{B.}] \alert<2>{\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)}
        \item[C.] Aucune
        \item[D.] \texttt{<span>} ne fonctionne que dans \texttt{<head>}
    \end{itemize}
\end{frame}

% Q13 - Réponse en B
\begin{frame}[fragile]{Question 13 \textemdash{} Encodage}
    À quoi sert
\texttt{<meta charset="utf-8">} dans \texttt{<head>} ?\medskip
    \begin{itemize}
        \item[A.] À définir la couleur de la page
        \item[\alert<2>{B.}] \alert<2>{À indiquer au navigateur l'encodage des caractères du document (ici UTF-8, qui supporte les caractères français, asiatiques, emojis...)}
        \item[C.] À activer JavaScript
        \item[D.] À cacher la page aux moteurs de recherche
    \end{itemize}
\end{frame}

% Q14 - Réponse en B
\begin{frame}[fragile]{Question 14 \textemdash{} class et id}
    Quelle est la différence entre les attributs
\texttt{class} et \texttt{id} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{class} est obsolète
        \item[\alert<2>{B.}] \alert<2>{\texttt{id} doit être unique dans la page ; \texttt{class} peut être attribuée à plusieurs éléments}
        \item[C.] \texttt{id} ne fonctionne pas en HTML5
        \item[D.] Aucune, ce sont des synonymes
    \end{itemize}
\end{frame}

% Q15 - Réponse en A
\begin{frame}[fragile]{Question 15 \textemdash{} Tableau}
    Quelles balises HTML structurent un \textbf{tableau} ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{<table>}, \texttt{<tr>} (table row), \texttt{<td>} (table data) et \texttt{<th>} (table header)}
        \item[B.] \texttt{<grid>}, \texttt{<row>}, \texttt{<cell>}
        \item[C.] \texttt{<table>} seul suffit
        \item[D.] \texttt{<spreadsheet>}, \texttt{<line>}, \texttt{<column>}
    \end{itemize}
\end{frame}

% Q16 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 16 \textemdash{} Imbrication correcte}
    Lequel des codes suivants est \textbf{incorrect} ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<a href="x"><strong>texte</strong></a>
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<ul><li>élément</li></ul>
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<p>Voici un <strong>mot</strong> important.</p>
\end{lstlisting}

        \item[D.]~\\
\begin{lstlisting}
<p>Texte <p>imbriqué</p>.</p>
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q16 - Réponse en D
\begin{frame}[fragile,allowframebreaks]{Question 16 \textemdash{} Imbrication correcte}
    Lequel des codes suivants est \textbf{incorrect} ?\medskip
    \begin{itemize}
        \item[A.]~\\
\begin{lstlisting}
<a href="x"><strong>texte</strong></a>
\end{lstlisting}

        \item[B.]~\\
\begin{lstlisting}
<ul><li>élément</li></ul>
\end{lstlisting}

        \item[C.]~\\
\begin{lstlisting}
<p>Voici un <strong>mot</strong> important.</p>
\end{lstlisting}

        \item[\alert{D.}]~\\
\begin{lstlisting}
<p>Texte <p>imbriqué</p>.</p>
\end{lstlisting}

    \end{itemize}
\end{frame}

% Q17 - Réponse en A
\begin{frame}[fragile]{Question 17 \textemdash{} Balises auto-fermantes}
    Lesquelles de ces balises sont \textbf{auto-fermantes}
(sans balise fermante) ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{<img>}, \texttt{<br>}, \texttt{<hr>}, \texttt{<meta>}, \texttt{<link>}, \texttt{<input>}}
        \item[B.] \texttt{<p>}, \texttt{<div>}, \texttt{<span>}
        \item[C.] \texttt{<title>}
        \item[D.] \texttt{<head>}, \texttt{<body>}
    \end{itemize}
\end{frame}

% Q18 - Réponse en D
\begin{frame}[fragile]{Question 18 \textemdash{} Mise en valeur}
    Quelle balise utilise-t-on pour mettre un mot
\textbf{important} en valeur ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<important>}
        \item[B.] \texttt{<text-bold>}
        \item[C.] \texttt{<bold>}
        \item[\alert<2>{D.}] \alert<2>{\texttt{<strong>} ou \texttt{<b>}}
    \end{itemize}
\end{frame}

% Q19 - Réponse en C
\begin{frame}[fragile]{Question 19 \textemdash{} Chemins relatifs}
    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} ?\medskip
    \begin{itemize}
        \item[A.] \texttt{../img/photo.jpg}
        \item[B.] \texttt{https://./img/photo.jpg}
        \item[\alert<2>{C.}] \alert<2>{\texttt{img/photo.jpg}}
        \item[D.] \texttt{/img/photo.jpg}
    \end{itemize}
\end{frame}

% Q20 - Réponse en D
\begin{frame}[fragile]{Question 20 \textemdash{} Accessibilité}
    Quelle pratique améliore le plus
l'\textbf{accessibilité} d'une page web ?\medskip
    \begin{itemize}
        \item[A.] Désactiver le clavier
        \item[B.] Utiliser des couleurs vives
        \item[C.] Mettre tout le texte en gras
        \item[\alert<2>{D.}] \alert<2>{Fournir des textes alternatifs (\texttt{alt}) pour les images, utiliser des balises sémantiques, structurer avec des titres \texttt{<h1>...<h6>}}
    \end{itemize}
\end{frame}

% Q21 - Réponse en C
\begin{frame}[fragile,allowframebreaks]{Question 21 \textemdash{} Trace de rendu}
    Que produit visuellement le code suivant ?
\begin{lstlisting}
<ul>
  <li>Pomme</li>
  <li>Banane</li>
  <ol>
    <li>Cerise</li>
  </ol>
</ul>
\end{lstlisting}\medskip
    \begin{itemize}
        \item[A.] Une liste à puces avec « Pomme », « Banane » et une sous-liste numérotée contenant « Cerise »
        \item[B.] Une erreur empêche tout affichage
        \item[C.] Le code est mal structuré : \texttt{<ol>} doit être imbriqué dans un \texttt{<li>}
        \item[D.] Une seule liste fusionnée
    \end{itemize}
\end{frame}

% Q21 - Réponse en C
\begin{frame}[fragile,allowframebreaks]{Question 21 \textemdash{} Trace de rendu}
    Que produit visuellement le code suivant ?
\begin{lstlisting}
<ul>
  <li>Pomme</li>
  <li>Banane</li>
  <ol>
    <li>Cerise</li>
  </ol>
</ul>
\end{lstlisting}\medskip
    \begin{itemize}
        \item[A.] Une liste à puces avec « Pomme », « Banane » et une sous-liste numérotée contenant « Cerise »
        \item[B.] Une erreur empêche tout affichage
        \item[\alert{C.}] \alert{Le code est mal structuré : \texttt{<ol>} doit être imbriqué dans un \texttt{<li>}}
        \item[D.] Une seule liste fusionnée
    \end{itemize}
\end{frame}

% Q22 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 22 \textemdash{} Document complet}
    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}\medskip
    \begin{itemize}
        \item[A.] Un \texttt{<title>} dans \texttt{<head>}
        \item[B.] Un attribut \texttt{lang} sur \texttt{<html>}
        \item[C.] Un \texttt{<script>}
        \item[D.] Une balise \texttt{<style>}
    \end{itemize}
\end{frame}

% Q22 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 22 \textemdash{} Document complet}
    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}\medskip
    \begin{itemize}
        \item[\alert{A.}] \alert{Un \texttt{<title>} dans \texttt{<head>}}
        \item[B.] Un attribut \texttt{lang} sur \texttt{<html>}
        \item[C.] Un \texttt{<script>}
        \item[D.] Une balise \texttt{<style>}
    \end{itemize}
\end{frame}

% Q23 - Réponse en B
\begin{frame}[fragile]{Question 23 \textemdash{} Mise en page interdite}
    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é ?\medskip
    \begin{itemize}
        \item[A.] Aucune raison, c'est une bonne pratique
        \item[\alert<2>{B.}] \alert<2>{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)}
        \item[C.] HTML5 a supprimé \texttt{<table>}
        \item[D.] Cela ralentit le navigateur
    \end{itemize}
\end{frame}

% Q24 - Réponse en A
\begin{frame}[fragile]{Question 24 \textemdash{} Validation HTML}
    Comment \textbf{vérifier} que son code HTML est
conforme au standard ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{En utilisant le validateur du W3C (validator.w3.org) qui détecte les erreurs de syntaxe et de structure}
        \item[B.] En lançant un programme Python
        \item[C.] En relisant le code visuellement
        \item[D.] En attendant que ça plante
    \end{itemize}
\end{frame}

% Q25 - Réponse en D
\begin{frame}[fragile]{Question 25 \textemdash{} Synthèse}
    Parmi les affirmations suivantes sur HTML,
laquelle est \textbf{fausse} ?\medskip
    \begin{itemize}
        \item[A.] Les balises sémantiques (\texttt{<header>}, \texttt{<nav>}, etc.) améliorent l'accessibilité et le SEO
        \item[B.] La structure d'une page comprend toujours \texttt{<head>} et \texttt{<body>} dans \texttt{<html>}
        \item[C.] HTML est un langage de balisage (pas un langage de programmation)
        \item[\alert<2>{D.}] \alert<2>{Un même \texttt{id} peut être utilisé pour plusieurs éléments dans la même page}
    \end{itemize}
\end{frame}

% Q26 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 26 \textemdash{} Métadonnées d'une page}
    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}\medskip
    \begin{itemize}
        \item[A.] À fournir une description de la page utilisée par les moteurs de recherche dans leurs résultats
        \item[B.] À définir le titre affiché dans l'onglet du navigateur
        \item[C.] À empêcher l'indexation de la page
        \item[D.] À afficher la phrase « Cours de NSI en ligne » sur la page
    \end{itemize}
\end{frame}

% Q26 - Réponse en A
\begin{frame}[fragile,allowframebreaks]{Question 26 \textemdash{} Métadonnées d'une page}
    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}\medskip
    \begin{itemize}
        \item[\alert{A.}] \alert{À fournir une description de la page utilisée par les moteurs de recherche dans leurs résultats}
        \item[B.] À définir le titre affiché dans l'onglet du navigateur
        \item[C.] À empêcher l'indexation de la page
        \item[D.] À afficher la phrase « Cours de NSI en ligne » sur la page
    \end{itemize}
\end{frame}

% Q27 - Réponse en A
\begin{frame}[fragile]{Question 27 \textemdash{} Intégrer une page externe}
    Quelle balise HTML permet d'intégrer le contenu
d'une autre page web à l'intérieur de la page
courante ?\medskip
    \begin{itemize}
        \item[\alert<2>{A.}] \alert<2>{\texttt{<iframe>}}
        \item[B.] \texttt{<embed>}
        \item[C.] \texttt{<include>}
        \item[D.] \texttt{<link>}
    \end{itemize}
\end{frame}

% Q28 - Réponse en C
\begin{frame}[fragile]{Question 28 \textemdash{} Élément en ligne et élément en bloc}
    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) ?\medskip
    \begin{itemize}
        \item[A.] \texttt{<strong>}
        \item[B.] \texttt{<span>}
        \item[\alert<2>{C.}] \alert<2>{\texttt{<div>}}
        \item[D.] \texttt{<a>}
    \end{itemize}
\end{frame}

\begin{frame}[standout]{}
    Fin de l'évaluation
\end{frame}

\end{document}
