109 lines
5.1 KiB
TeX
109 lines
5.1 KiB
TeX
\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}
|