Feat: ajoute le devoir pour les 1NSI

This commit is contained in:
Bertrand Benjamin 2022-09-18 15:18:31 +02:00
parent e1d9bf2dc5
commit e79319a5b0
12 changed files with 368 additions and 0 deletions

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<title>BG</title>
</head>
<body>
<div class="partie1">
<h1>Mon paragraphe</h1>
<p>Blahblahblah
<ul>
<li>
Un Voyage
</li>
<li>De la salade</li>
<li>
<a href="fsf.org">lycee.com</a>
</li>
</div>
</ul>
<p>
Blahblahblah
</p>
</body>
</html>

View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<title>BG</title>
....
</head>
<body>
<div id="barretitre">
<h1>Titre principal</h1>
</div>
<div id="auteur">
Moi
</div>
<section class="partie1">
<h2>Partie 1</h2>
<p>
Blahblahblah <a href="fsf.org">fsf.org</a> Blahblahblah
</p>
</section>
<section class="partie2">
<h2>partie2</h2>
<p>
pipopipopipo
</p>
</section>
<footer>
<h1>Titre principale</h1>
</footer>
</body>
</html>

View File

@ -0,0 +1,3 @@
section {
background-color: red;
}

View File

@ -0,0 +1,183 @@
\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}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang=fr>
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Une belle page</title>
</head>
<body>
<header>
<h1>
<img src="./assets/html.png" alt="html">
Devoir 1
<img src="./assets/css.png" alt="css">
</h1>
</header>
<section>
<h2>
Notre Conversation
</h2>
<div class="me">
<h3>Bob</h3>
<p>Bonjour</p>
</div>
<div class="other">
<h3>Amy</h3>
<p>Salut</p>
</div>
<div class="me">
<h3>Bob</h3>
<p>Je suis un chatbot</p>
</div>
<div class="other">
<h3>Amy</h3>
<p>Pas moi</p>
</div>
<div class="me">
<h3>Bob</h3>
<p>Dommage</p>
</div>
</section>
<footer>
<p>Mon devoir est terminé</p>
<h2>Signature</h2>
<p>
nom prenom
</p>
</footer>
</body>
</html>

View File

@ -0,0 +1,42 @@
body {
background-color: gray;
}
header {
background-color: lightgrey;
text-align: center;
padding: 20px;
}
section {
margin: 50px;
padding: 30px;
background-color: lightgrey;
}
.me {
background-color: orange;
margin: 5px;
padding: 5px 40px;
}
.other {
background-color: green;
margin: 5px;
padding: 5px 40px;
text-align: right
}
p {
color: white;
}
footer {
text-align: right;
padding: 0px 30px;
}
img {
height: 100px;
margin: 20px;
}

Binary file not shown.

View File

@ -0,0 +1,28 @@
\documentclass[a4paper,10pt]{article}
\usepackage{myXsim}
\usepackage{minted}
% Title Page
\title{ DS1 \hfill }
\tribe{1NSI}
\date{19 septembre 2022}
\duree{1h}
\DeclareExerciseCollection[step=1]{banque}
\xsimsetup{collect}
\pagestyle{empty}
\begin{document}
\maketitle
Le barème est donné à titre indicatif, il pourra être modifié.
\input{exercises.tex}
\printcollection{banque}
\end{document}
%%% Local Variables:
%%% mode: latex
%%% TeX-master: "master"
%%% End: