116 lines
4.9 KiB
TeX
116 lines
4.9 KiB
TeX
\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 l’anné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éé à l’exercice 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 s’agit 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 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 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, 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}
|