Feat: ajoute le devoir pour les 1NSI
This commit is contained in:
parent
e1d9bf2dc5
commit
e79319a5b0
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
section {
|
||||
background-color: red;
|
||||
}
|
||||
|
|
@ -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 |
|
|
@ -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>
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -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.
|
|
@ -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:
|
||||
Loading…
Reference in New Issue