Embed Size (px)
Citation preview
THÈME 3 : LE WEB
INTRODUCTION
Le WEB (World Wide Web) est un ensemble d’informations numériques constitué de milliards de
documents stockés sur des millions de serveurs. Toutes ces données sont reliées entre elles par des liens
cliquables ou liens hypertextes. Le WEB utilise le réseau informatique Internet pour circuler sur les
navigateurs des ordinateurs grâce au protocole de communication HTTP (HyperText Transfert Protocol).
Les pages WEB sont accessibles à partir de leurs adresse URL (Uniform Resource Locator). Elles
contiennent le texte et le code que les navigateurs sont chargés de mettre en forme pour af/cher leur
contenu grâce aux langages HTML et CSS.
Les moteurs de recherche adaptent leur proposition
de pages WEB selon les besoins des internautes
grâce aux informations laissées par ces derniers
volontairement ou non.
Se pose alors la question de la maitrise de la sécurité
des informations personnelles sur le WEB.
1
THÈME 3 : LE WEB
CH1. Le fonctionnement du WEB ( Le protocole HTTP )
Quel est le principe de fonctionnement du WEB ?
Pour pouvoir « naviguer » sur le WEB il faut un navigateur (ou client WEB) chargé de communiquer avec les
serveurs qui hébergent les pages WEB identi/ées par leurs URL.
Le protocole de communication HTTP* permet le transfert de /chiers (pages WEB) entre le navigateur et le
serveur. La communication se fait en 2 étapes :
Le navigateur envoie une requête HTTP au serveur qui la décode.→
Le serveur renvoie une réponse HTTP (page WEB) au navigateur.→
* HTTP : Protocole de communication client/serveur qui dé�nit les règles que doit suivre un navigateur pour obtenir une page d’un
serveur.
HTTPS est la version sécurisée du protocole HTTP. En utilisant ce protocole, les communications sont chiffrées et ne peuvent donc
pas être comprises par un intermédiaire qui intercepterait les messages.
2
Méthode employée (commande qui demande au serveur d’effectuer une certaine action, ici demander une page web)
GET http://www.exemple.com HTTP / 1.1
Host : www.exemple.comUser-Agent : Firefox/ 5.0 (Compatible ; Windows NT 5.2)Accept : text / html
Informe le serveur sur la nature et le format de données pouvant être renvoyés (ici il s’agit d’un texte au format html).
Version du protocole HTTP
Informe sur le client : version du navigateur utilisé et sur le système d’exploitation.
Indique le nom de domaine du serveur.
Structure d’une requête HTTP
HTTP / 1.1 200 OKDate : Fri, 05 Jan 2020 22 : 36:32 GMT Serveur : o2switch PowerBoostContent-type : text / htmlContent-length : 257
<html> <head><title>Accueil</title><head><body> <h1>Bienvenue sur le site SNT</h1> <h2>Les programmes
informatiques</h2></body>
</html>
Version du protocole HTTP utilisé par le serveur
Indique que la réponse est au format HTML
Structure d’une réponse HTTP
Indique la taille du document en octets
En-tête de réponse
Contenu de la page WEB en langage HTML
Indique le code du statut et si la requête a été exécutée avec succès ou non.
THÈME 3 : LE WEB
CH2. Les langages d’une page WEB : le HTML et Le CSS
Comment est écrite une page WEB.
Une page WEB est écrite à partir de deux langages de description : le HTML et le CSS.
• Le langage HTML permet de structurer la page WEB.
• La feuille de style CSS permet d’en améliorer la présentation.
A. Le HTML (Hypertext Markup Language)
Le HTML , est un langage conçu pour représenter les pages web. C’est un langage qui utilise des balises.
HTML permet de mettre en forme le contenu des pages, d’inclure des ressources multimédias, dont
des images, des vidéos, des formulaires de saisie, des programmes informatiques et bien sûr des liens
hypertextes*. (Lien hypertexte : Lien permettant en un clic de passer d'une page à une autre sur le Web. Un lien peut-être du texte ou une image.
Le HTML est souvent utilisé conjointement avec le langage de présentation CSS.
La page HTML contient le texte à af/cher et des balises entre les symboles < >. Ces balises délimitent souvent
le début et la /n de chaque instruction lue par le navigateur. Chaque instruction HTML est délimitée par une
balise ouvrante <...> et une balise fermante </...>. Ces balises sont invisibles sur la page WEB mais elles
permettent au navigateur d’interpréter ce qu’il doit af/cher.
<!DOCTYPE html>
<html>
<head>
<meta charset= “utf-8”>
<title>Accueil</title>
<head>
<body>
<h1>Bienvenue sur le site SNT</h1>
<h2>Les programmes informatiques</h2>
</body>
</html>
Fichier HTML rédigé par un développeur
Page web vue sur le navigateur
Indique au navigateur que la page est en HTML
Balise ouvrante
En-tête (head) : informations générale sur le document qui ne s’af/cheront pas dans le navigateur.
Corps (body) : contenu de la page (textes, images, liens, etc.)
Balise fermante
3
THÈME 3 : LE WEB
B. Le CSS (Cascading Style Sheets)
On contrôle l’apparence d’une page HTML (arrière-plan, police, taille des polices, couleurs, etc.) par une feuille
de style au langage CSS. Chaque règle de mise en forme d’une feuille de style contient un sélecteur et des
propriétés. Le sélecteur détermine quels sont les éléments concernés par la règle et les propriétés contrôlent
l’apparence de ces éléments.
La modi/cation du style d’un élément dans la feuille de style se répercute automatiquement à toutes les pages
HTML qui y font appel.
Le /chier CSS est lié au /chier HTML grâce à la balise link : <link rel= “stylesheet” href=”style.css ” >qui se
trouve à l’intérieur de la balise <head> du /chier HTML.
body {
background-color : blue ;
font-family : “Open Sans”, sans-serif ;
padding : 5px 25px ;
font-size : 18px ;
margin : 0 ;
color : #C8C8C8 ;
}
h1 {
font-family : “Merryweather”, serif ;
font-size : 32px ;
}
Fichier CSS
Remarque : Les éditeurs de texte sont des logiciels qui permettent d’écrire le code HTML et CSS
(exemples : Notepad++, TextWrangler…)
Nom du /chier CSS
4
Indique que le style ci-dessous correspond au texte courant
Couleur de fond : bleu
Police : OpenSans
Taille de police : 18
Indique que le style ci-dessous correspond aux titres de niveau 1
Couleur de police : gris (code : #C8C8C8
THÈME 3 : LE WEB
C. Le couple HTML + CSS
Lorsqu’une feuille de style CSS est liée au /chier HTML (grâce à la balise : <link rel=“stylesheet” href=“style.css”> , qui se
trouve dans l’En-tête (head) du /chier HTML, les styles s’appliquent automatiquement dans la page web.
!DOCTYPE html>
<html>
<head>
<meta charset= “utf-8”>
<title>Accueil</title>
<link rel=“stylesheet” href=“style.css”>
<head>
<body>
<h1>Bienvenue sur le site SNT</h1>
<h2>Les programmes informatiques</h2>
</body>
</html>
En utilisant un même /chier CSS pour toutes les pages d’un même site Web, les développeurs web se
facilitent donc le travail : un changement de couleur du fond de toutes les pages se fait en un seul
changement du /chier CSS.
body {
background-color: blue;
font-family: “Open Sans”, sans-serif;
padding: 5px 25px;
font-size: 18px;
margin: 0;
color: #C8C8C8;
}
h1 {
font-family: “Merryweather”, serif;
font-size: 45px;
}
+
=
Fichier CSS lié au Bchier HTML
Fichier HTML
Page web
5
