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

\title{Séquence Web — Cours}
\author{Adrian Amaglio}
\def\thesequence{SNT : Web}

\begin{document}
\maketitle

\section{Historique}
\begin{description}
    \item [1965] Invention et programmation du concept d’hypertexte par Ted Nelson
    \item [1989] Première page web au CERN par Tim Berners Lee
    \item [1993] Mise dans le domaine public, disponibilité du premier navigateur Mosaic
    \item [2001] Standardisation des pages grâce au DOM (Document Object Model)
\end{description}

\section{Qu’est-ce que le web ?}
\begin{definition}
    Le web est un système utilisant internet et servant à publier des \textbf{ressources} (par exemple des documents textes et multimédia).
\end{definition}

\section{Fonctionnement}
Comment peut-on récupérer des documents sur internet depuis notre ordinateur ou téléphone ?

\subsection{Client et serveur}
\begin{definition}
    Les ressources sont stockées sur un serveur web connecté à internet.\\
    Un navigateur (ou client) également connecté à internet peut donc lui envoyer une \textbf{requête web}, demandant une ressource précise.\\
    La \textbf{réponse} contiendra cette ressource si elle existe.
\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}

\subsection{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}
    \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 l’adresse IP du serveur (ou un nom symbolique qui sera traduit par l’adresse).
        \item[\textcolor{green}{/LIENS}] Est le chemin du document que l’on souhaite récupérer sur le serveur.
    \end{description}
\end{definition}

\section{Types de ressources}
Tous les fichiers peuvent être servis par un serveur web que ce soit du texte, une vidéo, un programme…\\
Ces fichiers sont téléchargés par le navigateur sur notre ordinateur.\\

\subsection{Les documents HTML}
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=\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 un 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=\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}

\end{document}