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

\title{Séquence Web — Cours}
\author{\href{https://git.jean-cloud.net/adrian-amaglio}{Adrian Amaglio}}
\def\thesequence{Web}

\begin{document}
\maketitle

\section{Qu’est-ce que le web ?}
\begin{definition}
    Le web est un réseau d’échange de documents (pages web, multimédia, etc) utilisant internet.
\end{definition}

\begin{definition}
    Un navigateur web est un logiciel capable de récupérer des documents sur le web et d’afficher des pages web.
\end{definition}

\section{URLs}
On identifie les fichiers grâce à une URL pour « Uniform Ressource Locator » ou en français : « localisateur uniforme de ressource ».
\begin{definition}
    Une URL est de la forme suivante :\\
    \textcolor{red}{https://}\textcolor{blue}{www.julesguesde.fr}\textcolor{green}{/LIENS}\textcolor{black}{?lang=fr}
    \begin{description}
        \item[\textcolor{red}{https://}] Le protocole utilisé pour récupérer la ressource. HTTP pour le web, HTTPS avec un chiffrement.
        \item[\textcolor{blue}{www.julesguesde.fr}] Est le nom du serveur qui stock la ressource.
        \item[\textcolor{green}{/LIENS}] Est le chemin du document que l’on souhaite récupérer sur le serveur.
        \item[\textcolor{black}{?lang=fr}] Sont des paramètres permettant de personnaliser la page.
    \end{description}
\end{definition}


\section{Documents et pages web}
Tous les fichiers peuvent être mis sur le web. Un type de fichier est cependant traité différement : les pages web.
Une page web est un fichier texte dont le contenu est structuré par le format HTML pour « HyperText Markup Language » ou « langage de balisage hypertexte ».
\begin{definition}
    Le HTML permet de structurer un document et de donner un sens sémantique au texte.
    C’est à dire que l’on peut préciser où sont les titres, paragraphes, menus, en-têtes, etc.
\end{definition}
Le HTML est un format de structure d’un fichier.
On peut donc mettre des titres, des paragraphes et d’autres éléments de structure dans une page.
\begin{example}
    Voici à quoi ressemble une page HTML en texte et interprétée par le navigateur
    \begin{centering}
        \lstinputlisting[language=HTML,linerange={1-4,6-12}]{example.html}
        \includegraphics[width=.4\textwidth]{example.png}
    \end{centering}
\end{example}

\subsection{Les feuilles de style}
Un autre type de fichier est important pour le web.
Il s’agit du CSS comme « Cascade Style Sheet » ou « feuilles de style en cascade ».
\begin{definition}
    Les fichiers CSS permettent de styliser une page web en changeant les éléments de style (la mise en forme, les polices, les couleurs…).
\end{definition}

\begin{example}
    Voici la même page que tout à l’heure mais pour laquelle on a appliqué le style CSS suivant :
    \begin{centering}
        \lstinputlisting[language=HTML]{example.css}
        \includegraphics[width=.6\textwidth]{examplecss.png}
    \end{centering}
\end{example}

\section{HyperTexte}
La force du web, c’est de pouvoir faire référence à d’autres documents depuis un texte.
C’est le rôle des liens !
\begin{example}
    Par exemple, sur le site du lycée, on trouve des liens vers le site web de pronote et vers l’ENT.
\end{example}
Les documents sur internet peuvent donc être vus comme connectés entre eux par ces liens.
C’est pour ça qu’on le représente souvent sous forme de toile d’araignée (web en anglais).

\begin{definition}
    L’hypertexte est la possibilité dans un document de faire un lien direct avec un autre document.
\end{definition}

\section{Moteurs de recherche}
Pour accéder à un site internet, il faut connaître son adresse IP ou son adresse symbolique, ce qui est très peu pratique au quotidien.
Les moteurs de recherches sont des sites web qui répertorient d’autres sites web et les classent par mots-clés et thèmes.
Ils peuvent ensuite nous présenter les pages web qui semblent contenir ce que l’on cherche.
\begin{definition}
Un moteur de recherche répertorie un maximum de pages web puis affiche celles  qui correspondent le mieux à notre recherche.
\end{definition}

\section{Cookies}
\begin{definition}
    Un cookie est un texte stocké par le navigateur à la demande d’un serveur.\\
    Il est renvoyé au serveur à chaque requête.\\
    Il permet donc de stocker des préférences ou d’identifier les utilisateurs et utilisatrices.
\end{definition}

\end{document}