diff --git a/1NSI/01_Web_HTML_CSS/exercises.tex b/1NSI/01_Web_HTML_CSS/exercises.tex index 8c4521a..fcf2ba7 100644 --- a/1NSI/01_Web_HTML_CSS/exercises.tex +++ b/1NSI/01_Web_HTML_CSS/exercises.tex @@ -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} diff --git a/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf b/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf index 42328ec..1abed76 100644 Binary files a/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf and b/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf differ diff --git a/1NSI/01_Web_HTML_CSS/plan_de_travail.tex b/1NSI/01_Web_HTML_CSS/plan_de_travail.tex index db6b029..211c663 100644 --- a/1NSI/01_Web_HTML_CSS/plan_de_travail.tex +++ b/1NSI/01_Web_HTML_CSS/plan_de_travail.tex @@ -46,6 +46,10 @@ Ordre des étapes à respecter \listsectionexercises +\section{Tout mélangé} + +\listsectionexercises + \pagebreak diff --git a/1NSI/01_Web_HTML_CSS/solutions/melange/index.html b/1NSI/01_Web_HTML_CSS/solutions/melange/index.html new file mode 100644 index 0000000..ba5cd75 --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/melange/index.html @@ -0,0 +1,54 @@ + + + + + + + Une belle page + + +
+

Ici on a tout mélangé

+

+ nom prenom +

+
+
+

+ Tester du html +

+

+ Il est important d'avoir un code html propre pour cela il faut le valider avec https://validator.w3.org/. +

+
+ +
+

Tester du CSS

+

+ Valider du css rien de plus simple! Rendez-vous sur https://jigsaw.w3.org/css-validator/. +

+ +
+ + +
+

Héberger son site

+

+ Il y a plein de façon de déposer du contenu sur un serveur. Voici deux exemples: +

+ +
+ + + + + diff --git a/1NSI/01_Web_HTML_CSS/solutions/melange/index.pdf b/1NSI/01_Web_HTML_CSS/solutions/melange/index.pdf new file mode 100644 index 0000000..a348845 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/melange/index.pdf differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/melange/index_nostyle.pdf b/1NSI/01_Web_HTML_CSS/solutions/melange/index_nostyle.pdf new file mode 100644 index 0000000..c68862f Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/solutions/melange/index_nostyle.pdf differ diff --git a/1NSI/01_Web_HTML_CSS/solutions/melange/style.css b/1NSI/01_Web_HTML_CSS/solutions/melange/style.css new file mode 100644 index 0000000..41824ad --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/solutions/melange/style.css @@ -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; +}