cours-snt/web/tp_fake_news/sujet.tex

116 lines
4.9 KiB
TeX
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

\documentclass[11pt,a4paper]{../../template/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 \textbf{p} est de la forme : \textbf{<p>}\\
Un paragraphe est donc écrit comme suit :\\
\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 lannée, créez un dossier et nommez le « web1 ».
\end{exercice}
\arabic{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éé à lexercice précédent (menu \textbf{File > save As}) sous le nom « index.html ».
Votre fichier devra avoir le contenu précisé à cette adresse : \url{https://git.jean-cloud.net/adrian/cours-snt/src/branch/master/web/tp_fake_news/index.html}.
\\
Il sagit de la base de toutes les pages web.
%\lstinputlisting[language=HTML]{index.html}
\end{exercice}
\envcounterexercice
\begin{exercice}
Ouvrez le fichier « index.html » avec un navigateur.
\\
Remarquez que seul le texte entre deux balises est visible, les balises ne saffichent pas !
Cest parce que le HTML est interprété par le navigateur, plutôt que dafficher la balise h1 il va garder linformation que le texte quelle 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 précisé à cette adresse :\\
\url{https://git.jean-cloud.net/adrian/cours-snt/src/branch/master/web/tp_fake_news/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, cest à 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 dinformation de votre choix (nextimpact, la quadrature du net…).
\end{exercice}
\begin{exercice}
Sur un titre, effectuez un clique droit et dans le menu qui souvre choisissez loption « examiner lélément ».
\\
La fenêtre qui souvre ensuite sappelle 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 safficher 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.
Lobjectif est dajouter un menu à votre page web.
https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
\end{exercice}
\end{document}