2022-2023/1NSI/01_Web_HTML_CSS/exercises.tex

% ---- HTML
\begin{exercise}[subtitle={Modifier une page HTML}, step={1}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }]
    \begin{enumerate}
        \item Copier puis modifier le code de \texttt{page\_balises.html} pour qu'elle ressemble au document pdf à coté.
        \item Faire les listes des balises rencontrées et expliquer ce qu'elles permettent de faire.
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={Écrire des pages HTML}, step={1}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }]
    En vous basant sur les documents pdf, reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_blanche.html}.
    \begin{multicols}{2}
        \begin{enumerate}
            \item header et paragraphes
            \item liens 1 et 2
            \item listes
            \item images
        \end{enumerate}
    \end{multicols}
\end{exercise}

\begin{exercise}[subtitle={Valider son code HTML}, step={1}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }]
    Le code que vous avez écrit ou modifié dans les exercices précédents donne peut être le bon résultat mais cela ne veut pas qu'il ait été rédigé en respectant les règles du HTML.

    Pour valider votre page, il faut la télé verser sur le site de la W3C \url{https://validator.w3.org/#validate_by_upload}.

    Valider les pages que vous avez produites.
\end{exercise}

\begin{exercise}[subtitle={Corriger une page HTML}, step={1}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }]
    La page \texttt{page\_non\_valide.html} ne passe pas la validation W3C. À vous de la corriger pour que le rendu reste identique et qu'elle passe le test de validation.
\end{exercise}

% ---- CSS
\begin{exercise}[subtitle={Modifier une feuille de style CSS}, step={2}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
    \begin{enumerate}
        \item Copier tous les fichiers du dossier \texttt{page\_CSS} puis modifier uniquement le fichier \texttt{style.css} pour que la page ressemble au rendu du pdf.
        \item Trouver la ligne de la page HTML qui permet d'importer le fichier \texttt{style.css}.
        \item Expliquer comment marche une feuille de style CSS.
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={Reproduire des exemples}, step={2}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
    En vous basant sur les documents pdf, reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_style.html} et en appliquant une feuille de style adaptée.
    \begin{enumerate}
        \item \texttt{page\_style\_balise}: utiliser les propriétés \texttt{background-color}, \texttt{text-align} et \texttt{width} aux balises.
        \item \texttt{page\_style\_selecteurs}: utiliser les propriétés \texttt{color}, \texttt{backgroud-color}, \texttt{text-align} et \texttt{height} aux classes, identifiants et balises.
        \item \texttt{page\_style\_margin\_padding}: utiliser les propriétés \texttt{backgroud-color}, \texttt{border}, \texttt{width}, \texttt{padding} et \texttt{margin} aux balises.
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={Pour aller plus loin}, step={2}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
    Quelques jeux pour apprendre à maitriser quelques propriétés CSS:
    \begin{itemize}
        \item Selection d'élément (anglais): \url{https://flukeout.github.oi/}
        \item Organiser spatialement les éléments - flexbox: \url{https://flexboxfroggy.com/#fr}
        \item Organiser spatialement les éléments - grid \url{https://cssgridgarden.com/#fr}
    \end{itemize}
\end{exercise}

% ---- Mise en ligne

\begin{exercise}[subtitle={Dépôt de votre travail}, step={3}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
    Vous avez reçut les codes pour vous connecter sur votre espace personnel sur le serveur NSI.

    \begin{enumerate}
        \item Déposer avec winscp (ou un autre logiciel gérant le sftp) les pages que vous avez produites.
        \item Consulter les pages déposées.
        \item Créer une nouvelle page appelé \texttt{index.html} qui sera votre page vitre où vous mettrez des liens vers toutes vos productions.
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={Url - wikipédia}, step={3}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
    On souhaite faire des recherches wikipédia sans utiliser la barre de recherche mais juste en entrant directement une url.

    \begin{enumerate}
        \item Rechercher plusieurs choses sur wikipédia puis noter les urls des pages obtenues.
        \item Proposer et tester une façon d'accéder à des pages sans utiliser la case recherche.
    \end{enumerate}
\end{exercise}

\begin{exercise}[subtitle={Url - qwant}, step={3}, origin={Ma tête}, topics={ Web CSS}, tags={ Web }]
    On souhaite faire la même chose mais cette fois-ci avec le moteur de recherche qwant.

    \begin{enumerate}
        \item Rechercher plusieurs choses sur qwant puis noter les urls des pages obtenues.
        \item Proposer et tester une façon d'accéder à des résultats de recherche en utilisant uniquement l'url.
        \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}