2022-09-18 13:18:31 +00:00
\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.}
2022-09-19 09:34:58 +00:00
\task { la balise \texttt { p} à la ligne 23 n'est pas fermée.}
2022-09-18 13:18:31 +00:00
\task { les balises \texttt { p} et \texttt { ul} ne sont pas bien imbriquées.}
2022-09-19 09:34:58 +00:00
\task { les balises \texttt { ul} et \texttt { li} ne sont pas bien imbriquées.}
2022-09-18 13:18:31 +00:00
\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}
2022-09-19 09:34:58 +00:00
\item Une internaute clique sur un lien qui envoie la requête HTTP suivante à un serveur:
2022-09-18 13:18:31 +00:00
\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 {
2022-09-19 09:34:58 +00:00
\mintinline { css} |#barretitre { color: blue;} |
2022-09-18 13:18:31 +00:00
}
\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}
