lafrite/2022-2023
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: ajout un exercice bilan sur le chapitre
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Bertrand Benjamin 2022-09-11 10:16:05 +02:00
parent 80d2bf0514
commit bb7c176ef3
7 changed files with 150 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
1NSI/01_Web_HTML_CSS/exercises.tex
View File

@ -87,3 +87,53 @@
\item Etendre votre méthode pour faire des cherches sur des images ou des vidéos.
\end{enumerate}
\end{exercise}
% ---- Révision
\begin{exercise}[subtitle={On mélange tout - reproduction}, step={4}, 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/d/de/WinSCP_Logo.png}
\item \url{https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/FileZilla_logo.svg/240px-FileZilla_logo.svg.png}
\end{itemize}
\begin{multicols}{2}
\begin{enumerate}
\item Reproduire la page suivante
\Ovalbox{
\includegraphics[scale=0.3]{./solutions/melange/index_nostyle}
}
\item La décorer pour qu'elle ressemble à cela
\Ovalbox{
\includegraphics[scale=0.3]{./solutions/melange/index}
}
\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/~nsi/nom.prenom/index.html}
\end{center}
\end{enumerate}
Informations pour vous connecter sur le serveur:
\begin{multicols}{2}
\begin{itemize}
\item IP: 192.68.221.6
\item Port: 22
\item Identifiant: nsi
\item mot de passe: gOMZKVNkPt
\end{itemize}
\end{multicols}
\end{exercise}

BIN
1NSI/01_Web_HTML_CSS/plan_de_travail.pdf
View File

Binary file not shown.

4
1NSI/01_Web_HTML_CSS/plan_de_travail.tex
View File

@ -46,6 +46,10 @@ Ordre des étapes à respecter
\listsectionexercises
\section{Tout mélangé}
\listsectionexercises
\pagebreak

54
1NSI/01_Web_HTML_CSS/solutions/melange/index.html Normal file
View File

@ -0,0 +1,54 @@
<!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>Ici on a tout mélangé</h1>
<p>
nom prenom
</p>
</header>
<section id="section1">
<h2>
Tester du html
</h2>
<p>
Il est important d'avoir un code html propre pour cela il faut le valider avec <a href="https://validator.w3.org/">https://validator.w3.org/</a>.
</p>
</section>
<section id="section2">
<h2>Tester du CSS</h2>
<p>
Valider du css rien de plus simple! Rendez-vous sur <a href="https://jigsaw.w3.org/css-validator/">https://jigsaw.w3.org/css-validator/</a>.
</p>
</section>
<section id="section3">
<h2>Héberger son site</h2>
<p>
Il y a plein de façon de déposer du contenu sur un serveur. Voici deux exemples:
</p>
<ul>
<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/FileZilla_logo.svg/240px-FileZilla_logo.svg.png" alt="filezilla">Filezilla
</li>
<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/WinSCP_Logo.png" alt="winscp"> Winscp
</li>
</ul>
</section>
<footer>
<p>Pied de page. Merci d'avoir lu</p>
</footer>
</body>
</html>

BIN
1NSI/01_Web_HTML_CSS/solutions/melange/index.pdf Normal file
View File

Binary file not shown.

BIN
1NSI/01_Web_HTML_CSS/solutions/melange/index_nostyle.pdf Normal file
View File

Binary file not shown.

42
1NSI/01_Web_HTML_CSS/solutions/melange/style.css Normal file
View File

@ -0,0 +1,42 @@
header {
background-color: lightgrey;
color: white;
text-align: center;
padding: 20px;
}
section {
margin: 50px;
padding: 30px;
}
#section1 {
background-color: lightgrey;
}
#section3 {
border: 4px solid black;
}
p {
color: blue;
}
ul {
background-color: orange;
}
li {
background-color: red;
}
footer {
text-align: center;
border: 4px solid black;
}
img {
height: 100px;
margin: 20px;
}