2022-2023/1NSI/Evaluations/DS_2022-09-19/exercises.tex

184 lines
7.4 KiB
TeX

\begin{exercise}[subtitle={QCM}, step={1}, origin={<++>}, topics={ }, tags={ }]
\begin{enumerate}
\item Retrouver les navigateurs web dans la liste suivante
\begin{tasks}(6)
\task{Google}
\task{Edge}
\task{Firefox}
\task{Microsoft}
\task{Chrome}
\task{HTTP}
\end{tasks}
\item Dans le code HTML les délimiteurs tels que \texttt{<body>} et \texttt{<\textbackslash body>} s'appellent
\begin{tasks}(4)
\task{des bornes}
\task{des paragraphes}
\task{des balises}
\task{des liens}
\end{tasks}
\item On a un image appelé \texttt{monimage.png} dans le dossier \texttt{assets} à côté de la page html. Que devra-t-on écrire pour l'afficher sur la page web?
\begin{tasks}(2)
\task \mintinline{html}|<img src="monimage.png" alt="assets">|
\task \mintinline{html}|<img src="assets" alt="monimage.png">|
\task \mintinline{html}|<img src="assets/monimage" alt="png">|
\task \mintinline{html}|<img src="assets/monimage.png" alt="assets">|
\end{tasks}
\begin{minipage}[t]{0.45\linewidth}
\item Le code HTML ci-contre n'est pas valide. Quelles sont les erreurs qu'il contient?
\begin{tasks}
\task{la balise \texttt{p} à la ligne 12 n'est pas fermée.}
\task{la balise \texttt{li} à la ligne 14 n'est pas fermée.}
\task{la balise \texttt{p} à la ligne 21 n'est pas fermée.}
\task{les balises \texttt{p} et \texttt{ul} ne sont pas bien imbriquées.}
\task{les balises \texttt{div} et \texttt{ul} ne sont pas bien imbriquées.}
\end{tasks}
\vfill
\item Où va nous amener le lien contenu dans la page ci-contre?
\begin{tasks}
\task \texttt{lycee.com}
\task \texttt{fsf.org}
\task Il n'y a pas de lien dans la page
\end{tasks}
\vfill
\end{minipage}
\hfill
\begin{minipage}[t]{0.5\linewidth}
\inputminted[bgcolor=base3,linenos]{html}{./annexes/bad_html.html}
\end{minipage}
\item Une internaute cliques sur un lien qui envoie la requête HTTP suivante à un serveur:
\begin{center}
\url{http://jaimelaneige.com/ma\_planche/traitement.php?nom=Snow&prenom=Jon}
\end{center}
Quelle est l'adresse du serveur?
\begin{tasks}(3)
\task{http://jaimelaneige}
\task{jaimelaneige}
\task{jaimelaneige.com}
\task{jaimelaneige.com/ma\_planche}
\task*{jaimelaneige.com/ma\_planche/traitement.php}
\end{tasks}
\item Quelle URL parmi les suivantes témoigne que l'échange entre le navigateur et le serveur et chiffré?
\begin{tasks}(2)
\task{https://www.mabanque.fr/}
\task{http://secure.mabanque.com/}
\task{http://www.mabanque.fr/}
\task{http://www.mabanque.com/}
\end{tasks}
\pagebreak
Les questions qui suivent se basent sur le code html suivant
\begin{center}
\begin{minipage}{0.7\linewidth}
\inputminted[bgcolor=base3,linenos]{html}{./annexes/html_css.html}
\end{minipage}
\end{center}
\item On appelle notre feuille de style \texttt{style.css} et on la place à côté du fichier html. Que doit-on écrire à la ligne 7 pour importer la feuille de style?
\begin{tasks}
\task{
\mintinline{html}|<link rel="stylesheet" type="text/css" href="style.css">|
}
\task{
\mintinline{html}|<style type="text/css" href="style.css">|
}
\task{
\mintinline{html}|<css rel="stylesheet" src="style.css">|
}
\task{
\mintinline{html}|<link rel="stylesheet" src="style.css">|
}
\end{tasks}
\item Quel code CSS permet de mettre uniquement \texttt{Titre principal} en bleu?
\begin{tasks}(2)
\task{
\mintinline{css}|h1 {color: blue;}|
}
\task{
\mintinline{css}| #barretitre {color: blue;}|
}
\task{
\mintinline{css}|div {color: blue;}|
}
\task{
\mintinline{css}|id="barretitre" {color: blue;}|
}
\task{
\mintinline{css}|Titre Principal {color: blue;}|
}
\end{tasks}
\item Si l'on écrit le code CSS suivant
\begin{center}
\begin{minipage}{0.7\linewidth}
\inputminted[linenos, bgcolor=base3]{css}{./annexes/style_section.css}
\end{minipage}
\end{center}
Quels seront les parties du code html ciblées
\begin{tasks}(3)
\task{Lignes 17 à 22}
\task{Lignes 23 à 28}
\task{Lignes 11 à 13}
\task{Lignes 14 à 16}
\task{Lignes 29 à 31}
\task{Lignes 10 à 32}
\end{tasks}
\end{enumerate}
\end{exercise}
\begin{exercise}[subtitle={Reproduction}, step={1}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
Pour réaliser ce travail, vous pouvez avoir accès à toutes les ressources que vous souhaitez.
Dans votre réalisation, à chaque fois que vous verrez \textbf{nom} ou \textbf{prenom} vous le remplacerez par votre nom ou votre prénom en prenant soin de remplacer les espaces par \_.
Les images sont téléchargeables aux adresses suivantes (clic-droit > enregistrer l'image sous)
\begin{itemize}
\item \url{https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png}
\item \url{https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/170px-CSS3_logo_and_wordmark.svg.png}
\end{itemize}
\begin{multicols}{2}
\begin{enumerate}
\item Reproduire la page suivante
\Ovalbox{
\includegraphics[scale=0.3]{./solutions/index_nostyle}
}
\item La décorer pour qu'elle ressemble à cela
\Ovalbox{
\includegraphics[scale=0.3]{./solutions/index_style}
}
\end{enumerate}
\end{multicols}
\begin{enumerate}
\setcounter{enumi}{2}
\item La déposer sur le serveur pour qu'elle soit accessible à l'adresse.
\begin{center}
\url{http://192.168.221.6/~prenom/DS1/}
\end{center}
\end{enumerate}
Informations pour vous connecter sur le serveur:
\begin{multicols}{2}
\begin{itemize}
\item IP: 192.168.221.6
\item Port: 22
\item Identifiant: prenom (avec une majuscule)
\item mot de passe: (seul vous le connaissez!)
\end{itemize}
\end{multicols}
\end{exercise}