\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 23 n'est pas fermée.}
                    \task{les balises \texttt{p} et \texttt{ul} ne sont pas bien imbriquées.}
                    \task{les balises \texttt{ul} et \texttt{li} 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 clique 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}
