\documentclass[11pt,a4paper]{../../template_cours}
\usepackage{listings}

\usepackage{minted}

\title{Créer et modifier une page web}
\author{Adrian Amaglio}
\def\thesequence{Web}

\begin{document}
Durée : 1h

% ---
\section{HTML — Structure et contenu}
Le HTML est le langage de balisage utilisé pour structuré une page web.\\
Une balise est de la forme :\\
\begin{minted}{HTML}
    <p>Je suis un texte quelconque</p>
\end{minted}
Remarquez que le texte débute par une balise « ouvrante » \textbf{<p>} et se termine par une balise « fermante » \textbf{</p>}.
Le \textbf{/} est donc important à la fin car il indique la fin du paragraphe.

Ici, on utilise la balise \textbf{p}.
Elle signifie que son contenu est un paragraphe de texte.
Pour en faire un titre principal, on aurait utilisé la balise \textbf{h1}.

\begin{exercice}
    Dans un dossier que vous pourrez retrouver plus tard dans l’année, créez un dossier et nomez le « web1 ».
\end{exercice}

\begin{exercice}
    Ouvrez un éditeur de texte comme « notepad++ ».
    Créez un nouveau fichier texte (menu \textbf{File > new} ou raccourci \textbf{CTRL+n}) et enregistrez le dans le dossier créé à l’exercice précédent (menu \textbf{File > save As}) sous le nom « index.html ».

    Votre fichier devra avoir le contenu suivant. Il s’agit de la base de toutes les pages web.
    \lstinputlisting[language=HTML]{index.html}
\end{exercice}

\begin{exercice}
    Ouvrez le fichier « index.html » avec un navigateur.
    \\
    Remarquez que seul le texte entre deux balises est visible, les balises ne s’affichent pas !
    C’est parce que le HTML est interprété par le navigateur, plutôt que d’afficher la balise h1 il va garder l’information que le texte qu’elle contient est un titre.
\end{exercice}

\begin{exercice}
    Ajoutez dans le fichier « index.html », juste après le dernier paragraphe, un titre \textbf{h2} avec le contenu de votre choix.
\end{exercice}

\begin{exercice}
    Ajoutez dans le fichier « index.html », juste après le dernier paragraphe, un paragraphe \textbf{p} avec le contenu de votre choix.
\end{exercice}

% ---
\section{CSS — La mise en forme}

\begin{exercice}
    Dans le même dossier que votre fichier « index.html » créez un fichier « style.css » avec le contenu suivant :
    \lstinputlisting[language=HTML]{style.css}
    Enregistrez le puis actualiser la page index.html dans votre navigateur, le texte des paragraphes doit maintenant être écrit en bleu.
\end{exercice}

Les fichiers CSS sont structuré comme une suite de blocs suivants :
\begin{minted}{HTML}
<sélecteur> {
    <directive>:<valeur>;
}
\end{minted}
\begin{description}
    \item[<sélecteur>] doit être remplacé par un nom de balise, il permet de choisir où appliquer le style entre accolades.
    \item[<directive>] doit être remplacé par une directive CSS, c’est à dire une caractéristique à modifier (couleur, marges, police…).
    \item[<valeur>] doit être remplacé par une valeur à donner à la directive précédente (rouge, 200px, Arial…).
\end{description}

\begin{exercice}
    La règle CSS suivante permet de souligner du texte : « text-decoration: underline; ».\\
    Appliquez cette règle à tous les titres h1.
\end{exercice}

% ---
\section{Une fausse nouvelle faite maison}
\begin{exercice}
    Ouvrez un nouvel onglet dans votre navigateur et rendez vous sur le site d’information de votre choix (nextimpact, la quadrature du net…).
\end{exercice}

\begin{exercice}
    Sur un titre, effectuez un clique droit et dans le menu qui s’ouvre choisissez l’option « examiner l’élément ».
    \\
    La fenêtre qui s’ouvre ensuite s’appelle la « Console de développement » car elle est utilisé par les créateurs et créatrices de sites web (développeurs et développeuses).
    \\
    Le code HTML de la page web devrait s’afficher et le titre sur lequel vous avez cliqué devrait être en surbrillance comme sur la capture suivante :
    \begin{center}
        \includegraphics[width=.8\textwidth]{console.png}
    \end{center}
    Modifiez maintenant le contenu de la balise titre pour y afficher le texte de votre choix.
\end{exercice}

\begin{exercice}
    Effectuez une capture d’écran de votre fausse nouvelle, enregistrez la et envoyez la à un ou une amie.
\end{exercice}

% ---
\section{Un site internet plus avancé}
\begin{exercice}
    Rendez vous sur le site internet suivant et suivez le tutoriel.
    L’objectif est d’ajouter un menu à votre page web.
    https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
\end{exercice}

\end{document}