184 lines
7.4 KiB
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}
|