web

web/cours/cours.tex

@@ -0,0 +1,108 @@
+\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}

web/cours/example.css

@@ -0,0 +1,8 @@
+h1{
+    color:red;
+}
+
+p{
+    color:blue;
+    margin-left:200px;
+}

web/cours/example.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Un exemple de site</title>
+        <link rel="stylesheet" href="example.css" />
+    </head>
+    <body>
+        <h1>Titre !</h1>
+        <p>Un paragraphe de texte</p>
+    </body>
+</html>
+