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}