Le fichier pdf qui va vous aider à vous y retrouver tout au long de ce cours à télécharger est disponible -->ici<--.

L'organisation de la séquence sur le WEB

Le découpage de la séquence

  1. Histoire du web;
  2. Les mots du web;
  3. Fonctionnement du web : url/http;
  4. Écrire des sites web : html/css;
  5. Moteur de recherche;

Projet/minisite

Un mini site sur un thème à choisir parmi une liste imposée

L'évaluation

L'évaluation sur ce thème sera double:

Une histoire du web.

Regarder la vidéo suivante :

Synthétiser les dates historiques présentées dans la vidéo ci-dessus :

  1. En est inventé et programmé par Ted Nelson le concept de lien hypertexte.

  2. En , le Web naît au CERN.

  3. En est disponible le premier navigateur grand public.

  4. En sont développés les langages de programmation JavaScript et PHP qui permettent la création de sites Web interactifs et dynamiques.

  5. En la structure des pages Web est standardisée grâce au Document Object Model.

  6. Depuis sont mises à disposition des technologies qui permettent le développement d'applications sur mobile.

Une fois les réponses saisies, vérifier leur validité en cliquant sur ce bouton :

Code de déblocage de la correction :

Les mots du web

Nous allons découvrir et définir les mots liés au web

Télécharger ce document.

Répartissons nous les mots.

Regarder cette vidéo et noter les définitions des mots sous votre responsabilité :

Code de déblocage de la correction :

Internet et le Web sont deux choses complètement différentes.
Image pour mémoriser la différence :
"Si vous regardez la plomberie, chez vous, il y a les tuyaux et il y a ce qui passe dedans : l'eau chaude, l'eau froide, le gaz ...
Les tuyaux, c'est Internet. L'eau chaude, c'est le Web. Et on fait passer d'autres choses [que le Web] sur Internet : les emails, la telephonie,..."

Un lien hypertexte est un lien inclus dans un texte ou une image d'une page web qui cible une autre page ou une autre ressource. Ces liens tissent un réseau d'informations : le World Wide Web.

Fonctionnement du web

Notion d'URL

La composition d'une URL

Les sites Web ont une structure en arborescence comme vos répertoires et fichiers sur votre ordinateur. Une ressource (page, photo, vidéo, …) peut se trouver dans un dossier, lui-même situé dans un autre dossier et ainsi de suite.

Une URL (Uniform Resource Locator) est l’adresse d’une ressource d’un site Web : elle indique où elle se trouve dans l’arborescence du site. Elle se compose de 4 grandes parties : le protocole HTTP (ou HTTPS), le nom de domaine, le chemin vers la ressource et le nom du fichier.

Distinguer les quatre parties (protocole, nom de domaine, chemin et fichier) de l’URL suivante : http://eduscol.education.fr/actualites/article/sciences-numerique-technologie.html

Code de déblocage de la correction :

À la suite du nom du fichier, l'URL peut comporter aussi des paramètres : ces paramètres débutent après un point d'interrogation ?
Ils sont utiles pour les sites dynamiques qui utilisent une base de données.

Voici un exemple d'adresse que l'on obtient suite à une requête sur un moteur de recherche particulier :

https://www.qwant.com/?client=brz-moz&q=URL

La partie ?client=brz-moz&q=URL signifie :

  • que l'utilisateur (appelé client) utilise un navigateur Mozilla Firefox (d'après client=brz-moz)

  • que la recherche sur Qwant porte sur le mot URL (d'après q=URL)

Vous avez été recruté.e par le service de contre-espionnage français du fait de vos compétences en informatique.
Vous avez pour tâche de surveiller des membres d'un groupuscule jugé potentiellement dangereux. Vous avez réussi à introduire un logiciel espion dans l'ordinateur d'un des membres à surveiller. Ce logiciel vous permet de recevoir l'ensemble des URL que consulte ce membre à partir de son ordinateur.

Voici la dernière URL reçue : https://www.qwant.com/?q=nitroglycerine%20composition&t=web&client=brz-moz

Que pouvez-vous dire de l'activité du membre surveillé ?

Code de déblocage de la correction :

Une URL (Uniform Resource Locator) est l'adresse d'une ressource du Web. Elle contient souvent quatre éléments :

Protocole HTTP

Les requêtes HTTP

Le Web s’appuie sur un dialogue entre clients et serveurs.
Les clients sont les applications qui se connectent au Web, comme les navigateurs, qui envoient des requêtes HTTP (HyperText Transfert Protocol) aux serveurs, ordinateurs où sont stockées les données consultées.
HTTP est un protocolequi permet aux ordinateurs de communiquer entre eux.

Voici un exemple de requête envoyé par un client à un serveur avec quelques éléments expliqués :

Reprendre l'image de l'exemple précédent et s'aider des explications pour répondre aux questions suivantes :

  1. Quel est le serveur auquel le client envoie sa requête ?

  2. Quelle page veut consulter le client ?

  3. De quelle page provient le visiteur de la page demandée ?

Code de déblocage de la correction :

L'interaction client-serveur

Lorsque l’on effectue une requête HTTP sur notre navigateur, le serveur Web lui renvoie du code que le navigateur interprète et met en forme de manière lisible.

Les clients peuvent recevoir des codes exécutables, comme le Java-Script, qui permettent de rendre les pages plus dynamiques.

Ce que nous pouvons voir sur ce cours est le résultat d’une interaction constante entre le serveur et le client

Le protocole HTTP permet de transférer des fichiers mais ne se préoccupent pas du chemin suivi, ce qui rend les informations sensibles, privées ou financières, vulnérables à une interception et à un détournement.
Pour pallier à ce problème, le protocole de sécurité SSL (Secure Socket Layer) va s'ajouter au protocole HTTP et chiffrer les informations entre le serveur et le client. HTTP devient alors HTTPS . Un cadenas apparaît dans la barre d'adresse du navigateur pour indiquer que la communication est sécurisée.

Attention, HTTPS ne garantit en rien que le site soit un site sûr, seule la communication est sécurisée !
Ainsi, avec le protocole HTTP, un pirate informatique peut intercepter des informations transitant entre le client et le serveur et les lire tandis qu'avec le protocole HTTPS, il peut les intercepter mais ne peut plus les lire puisque les données sont chiffrées.

Voici l'image, où seules des données personnelles ont été supprimées, obtenues au moment du paiement en ligne d'un achat :

Quel commentaire pouvez-vous faire quant au texte apparaissant en bas du prix : L'adresse de ce site de paiement préfixée par https indique que vous êtes sur un site sécurisé et que vous pouvez régler votre achat en toute tranquillité. ?

Code de déblocage de la correction :

Le protocole de transfert hypertexte HTTP (HyperTexte Transfer Protocol) est une méthode de communication entre un client (machine qui navigue sur le web) et un serveur informatique (machine hébergeant des ressources Web) pour échanger des informations.

Voici le fonctionnement d'un échange entre un client et un serveur :

  1. Le client émet des requêtes HTTP : un code informatique donnant des informations sur le client et des consignes d'exécutions au serveur.

  2. Le serveur renvoie une réponse HTTP : la ressource sous forme de code.

  3. Le navigateur du client met en forme la réponse pour l'afficher.

Le protocole HTTPS garantit le fait que si quelqu'un intercepte une information transmise entre le client et le serveur, il ne pourra pas l'utiliser car l'information est chiffrée. Par contre, ce protocole HTTPS ne garantit pas la fiabilité du site visité.

Le langage du web : HTML/CSS

Le langage HTML

HTML

La programmation d’une page Web repose sur l’utilisation d’un langage de description appelé HTML pour (HyperText Markup Language).
Le langage HTML utilise des balises pour délimiter le début et la fin de chaque instruction lue par le navigateur.

Chaque instruction HTML est délimitée par une balise ouvrante < élément> et une balise fermante </élément>.
Ces balises sont invisibles à l’écran mais elles permettent au navigateur d’interpréter ce qu’il doit afficher

Toute page HTML d'un site Web se présente ainsi :

le code HTML est contenu entre les deux balises <html> et </html>.

Les balises peut être imbriquées les unes dans les autres.

Attention à respecter une imbrication correcte !

Voici ci-dessous un code HTML, code que l'on utilisera dans les deux exercices suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
	<title> le lycée </title> <!--ligne 5-->
	<link rel="stylesheet" href="style.css">
  </head>
  <body><!--ligne 8-->
   <h1>Notre site</h1> <!--ligne 9-->
   <p>En un paragraphe : le fonctionnement du Web nécessite beaucoup d'énergie !</p> <!--ligne 10-->
   <ol><!--ligne 11-->
	<li>Comsommation énergétique du web :</li><!--ligne 12-->
	 <ul><!--ligne 13-->
		<li>Les datacenters</li><!--ligne 14-->
		<li>La vidéo à la demande</li><!--ligne 15-->
	 </ul><!--ligne 16-->
    <li>Comment réduire cette consommation énergétique ?</li><!--ligne 17-->
   </ol><!--ligne 18-->
  </body><!--ligne 19-->
</html>

Ce code permet de faire par un navigateur le rendu visuel suivant :

Pour faciliter la réalisation de cet exercice, veuillez accéder à Capytale puis saisir le code d'activité 05f3-631784.

  1. Est-ce que le contenu de chacune des 20 lignes apparaît visuellement sur la page associée ?

  2. Quel est le rendu visuel de la ligne 9 ?

  3. Au niveau de cette ligne 9, remplacer h1 par h2. Quel est l'effet de cette modification sur le visuel ?

    Attention à modifier la balise ouvrante <h1> mais aussi la balise fermante </h1> !

  4. Faire de même en utilisant désormais la balise h3.

  5. Quel est d'après vous le rôle des balises h1, h2, h3 (, ..., h6 ) ?

  6. À la ligne 10, modifier le contenu de la balise p en y insérant le texte que vous voulez.

    Vous pouvez revenir au texte initial par annulation des actions effectuées en appuyant simultanément sur les touches CTRL et Z.

  7. À votre avis, quel est le rôle de la balise p ?

    8. Code de déblocage de la correction :

Vous avez pu visualiser le rendu du code HTML directement sur Capytale.

Il existe de nombreuses plateformes pour vous entraîner et voir en direct le rendu de votre code.

Vous pouvez aussi utiliser le site jsfiddle. Il va nous permettre de travailler le code html en travaillant de manière déportée.

Dans la partie HTML du site, il vous suffit de copier/coller le contenu du body du code précédent, puis de cliquer sur Run.

Nous allons prolonger l'exercice précédent.
Vous continuerez à travailler sur Capytale sur l'activité dont le code est 05f3-631784.

  1. Que se passe-t-il si la ligne 15 est supprimée ?

  2. Rétablir la ligne supprimée en annulant l'action précédente par l'appui des touches CTRL+Z.

  3. Rajouter une ligne dans le code de sorte qu'apparaisse une nouvelle puce dont le texte est Les jeux en ligne.
    Vous devez ainsi faire aparaître le visuel suivant :

  4. Aux lignes 11 et 19, remplacer les balises ouvrante <ol> et fermante </ol> respectivement par les balises <ul> et </ul>.
    Comment est modifié le visuel ?

  5. À quoi sert l'élément ol ?

  6. À quoi sert l'élément li à l'intérieur d'une balise ol ?

  7. Aux lignes 13 et 16, remplacer les balises ouvrante <ul> et fermante </ul> respectivement par les balises <ol> et </ol>.
    Comment est modifié le visuel ?

  8. À quoi sert l'élément ul ?

  9. À quoi sert l'élément li à l'intérieur d'une balise ul ?

  10. Rajouter deux lignes dans le code HTML afin d'obtenir le visuel suivant :

Code de déblocage de la correction :

CSS

CSS

Le langage CSS (pour Cascading Style Sheets) permet de définir le style graphique d’une page Web (arrière-plan, type et taille des polices de caractères, etc.).
La modification du style d’un élément dans une feuille de style se répercute automatiquement à toutes les pages HTML qui y font appel.

Voici ci-dessous un code CSS, code que l'on utilisera dans plusieurs des exercices suivant et qui sera pris en compte parallèlement au code HTML précédent. 

body{
	background-color: white;/*ligne 2*/
	font-family: "OpenSans", sans-serif;
	padding: 5px 25px;
	font-size: 18px;/*ligne 5*/
	margin: 0;
	color: purple;
}
h1{
	font-family: "Merryweather",serif;
 	font-size: 32px;
    color: #FF0000;
}

Pour faciliter la réalisation de cet exercice, veuillez accéder à Capytale puis saisir le code d'activité 9814-632012.

Avant le rajout du CSS, le visuel (obtenu à la fin de l'exercice précédent) était

  1. Quelles modifications visibles sont dues à la prise en compte du code CSS rajouté ?

  2. En observant le code CSS et le visuel, quels sont les éléments modifiés par le fichier CSS ?

  3. Dans la ligne 5, remplacez 18 par 26.
    À quoi sert l'attribut font-size ?

  4. Dans la ligne 2, remplacer white par green.
    Que fait l'attribut background-color ?

  5. Que fait l'attribut color ?

  6. Rajouter au moins une ligne au code CSS afin que le texte dans les paragraphes apparaissent en bleu.
    Avec les modifications précédentes, vous devez obtenir le visuel suivant :

Code de déblocage de la correction :

Les liens vers un site internet externe

Un lien externe est un lien vers une page pointée par son URL.

Ce type de lien est un exemple de lien hypertexte.

Le code en langage html ci-dessous 

 <a href="https://www.societe-informatique-de-france.fr/"> Société informatique</a>

conduit à l'affichage ci-dessous sur la page web :
Société informatique .

  1. Cliquez sur le lien ci-dessus : que se passe-t-il ?

  2. Quel est le rôle de la balise <a> ?

  3. Quel est le rôle de l'attribut href ?

Code de déblocage de la correction :

Reprenez votre travail précédent sur Capytale (code 9814-632012) et insérer dans votre code html un lien vers cette page de cours de SNT sur le Web.

Code de déblocage de la correction :

Insertion d'image

Pour insérer une image dans une page web, il suffit d'utiliser la balise <img>.

Supposons qu'une image nommée html5.png soit stockée dans le même répertoire que votre fichier html de travail.

Le code en langage html ci-dessous 

 <img src="html5.png">

conduit à l'affichage suivant sur votre page web de :

Quel est le rôle de l'attribut src ?

Code de déblocage de la correction :

La balise <img> est une des rares balises à ne pas avoir à être fermée par une balise fermante du type "</img>".
En effet, tout le contenu nécessaire à l'insertion est contenu entre les chevrons < et > donc la balise prend fin avec le chevron fermant >.

Il faut préciser dans l'attribut src le nom du fichier mais aussi le chemin d'accès à ce fichier image depuis le fichier html de la page Web.

Par exemple, si le fichier image, nommé ici html5.png, est présent dans un répertoire nommé img :

Le chemin permettant d'accéder depuis le fichier monsite.html à l'image est :
Le code à saisir dans le fichier html est donc <img src="img/html5.png">.

  1. Télécharger et installer le logiciel Visual Studio Code depuis l'adresse suivante : https://code.visualstudio.com/.

    1. Une fois installé, lancer le logiciel.
      Copier-coller dans une feuille de Visual Studio Code le code html dont le contenu correspond à celui obtenu à la fin de l'avant dernier exercice ou sinon celui initial.

    2. Dans vos documents personnels, partie SNT/Web, enregistrer le fichier en précisant le format est html.
      Vous pouvez par exemple nommer ce fichier page_avec_image.html.

    1. Dans une nouvelle feuille de Visual Studio Code, copier-coller le contenu du code CSS correspond à celui obtenu à la fin de l'exercice sur le CSS ou sinon celui initial.

    2. Dans le même répertoire que précédemment, enregistrer le fichier CSS en précisant que le format est css et en le nommant forcément style.css.

      Le nom du fichier css doit être impérativement le même que celui écrit comme valeur de l'attribut href de la balise <link>. A priori, ici c'est style.css d'après le code écrit dans le head du code HTML : 

      <link rel="stylesheet" href="style.css">

    1. Télécharger l'image nommée css3.png en cliquant sur ce lien.

      2. Copier dans la même répertoire que précédemment cette image.
      Vous devez avoir un répertoire dont le visuel sera proche de

    2. Insérer dans votre code HTML le code pour faire afficher l'image css3.png.

      Copier-coller le code de l'exemple précédent et modifier la valeur de l'attribut src.

  5. Visualiser le contenu de la page web en cliquant sur le fichier HTML ; normalement votre navigateur par défaut fait apparaître ce contenu dans un nouvel onglet.

    6. Influence du répertoire où se trouve l'image

    1. Dans le répertoire contenant les fichiers HTML et CSS, créer une nouvelle dossier qui sera nommé images.

    2. Déplacer l'image css3.png dans ce répertoire images et supprimer le fichier initial css3.png se trouvant dans le même répertoire que les fichiers HTML et CSS.
      Vous devez avoir un répertoire dont le visuel sera désormais proche de

    3. Actualiser la page Web contenant l'image sur votre navigateur.

      Vous pouvez soit cliquer sur l'icône , soit appuyer simultanément sur les touches CTRL et R.

      Cette image apparaît-elle encore dans la page ?

    7. Comme le chemin pour accéder à l'image css3.png à changer du fait du déplacement, il faut changer ce chemin dans l'attribut src de la balise img.

  7. Modifier la balise img insérant l'image en celle-ci : <img src="images/css3.png">.
    Enregistrer la modification effectuée sur le fichier HTML puis actualiser la page Web.
    L'image réapparaît-elle ?

Il est souvent préférable de créer un répertoire spécifique contenant l'ensemble des images d'une page.
Dans ce cas, il faudra toujours préciser le chemin permettant d'accéder au fichier image dans l'attribut src de la balise img. Pensez-y lors de votre projet !

Une page Web statique est constituée de deux langages : le HTML (HyperText Markup Language) et le CSS (Cascading Style Sheets).

Le HTML structure la page Web en utilisant des balises de description.
Le contenu est organisé comme dans un livre avec une partie en-tête, des titres, des paragraphes, des images, mais il permet aussi d'insérer des liens hypertextes vers d'autres pages ou vers des vidéos.
La plupart des instructions HTML sont délimitées par une balise ouvrante <élément> et une balise fermante </élément>.
Ces balises sont invisibles à l’écran mais elles permettent au navigateur d’interpréter ce qu’il doit afficher.

Le CCS définit la mise en forme du contenu en précisant pour chaque élément de la structure sa couleur, sa taille, sa police de caractère, son arrière-plan, ses marges, ...
La modification du style d’un élément dans une feuille de style css se répercute automatiquement à toutes les pages HTML qui y font appel.

Le navigateur compose avec ces deux langages pour faire apparaître le rendu à l'écran.

Inspecteur du navigateur

Il est possible d'examiner le code html et css de n'importe quelle page web grâce à l'inspecteur du navigateur.

Sur Mozilla Firefox, il suffit d'appuyer sur la touche F12 puis de cliquer sur l'onglet pour le faire apparaître en bas de la page web.

Toute modification apportée au niveau de cette inspecteur ne modifie que le rendu visuel sur votre navigateur ouvert mais pas le fichier initial.
Il suffit de rafraîchir la page pour revenir au rendu visuel du fichier initial.

  1. Visualiser sur votre Mozilla Firefox le contenu du fichier html obtenu dans l'exercice précédent.

  2. Faire apparaître l'inspecteur du navigateur.

    1. Cliquer dans cet inspecteur sur la ligne <h1> Notre site</h1>,

      Normalement, vous devez voir apparaître un visuel proche de celui-ci :

    2. Dans la partie centrale de l'inspecteur, cliquer sur le rond rouge de la couleur #FF0000 pour faire apparaître un nuancier de couleur.

      Changer la teinte rouge en une nuance de bleue.

    3. Visualiser l'effet sur le visuel de la page.

    4. La modification en bleue est-elle conservée lors d'un rafraîchissement de la page, permis par exemple avec l'appui sur les touches CTRL et R ?

Voici un défi vu votre niveau pour faire croire à vos proches que vous avez acquis les compétences d'un.e vrai.e hacker.euse.

  1. Aller sur le site google.com ; vous devez voir apparaître un visuel proche de celui-ci :

  2. Utiliser l'inspecteur pour changer le texte "Recherche Google" par celui "J'ai piraté Google !?!" et changer la couleur du texte en rouge.
    Vous pouvez alors faire apparaître un visuel proche de :

  3. Appeler la personne que vous désirez bluffer avant de rafraîchir la page ;-) !

Il est possible de voir le contenu de chaque site en HTML et CSS en utilisant l'inspecteur du navigateur.

Toute modification effectuée dans cet inspecteur ne modifie pas le fichier initial : un simple rafraîchissement de la page supprime ces modifications.

Les moteur de recherche

Fonctionnement général

  1. Regarder la vidéo ci-dessous

  2. Répondre aux questions suivantes pour vérifier que vous avez compris l'essentiel :

    1. Comment les spiders robots parcourent-ils le Web ?

    2. Quel est le rôle de ces robots ?

    3. Où sont stockées les informations obtenues par ces spiders ?

    4. Comment sont classées les pages comportant les mots-clés d'une recherche ? (hors annonces publicitaires)

    5. Tous les résultats affichés sont-ils nécessairement pertinents ? Pourquoi ?

Code de déblocage de la correction :

Voici un shéma qui résume le fonctionnement d'un moteur de recherche

moteur de recherche

Les moteurs de recherche fonctionnent en trois temps :

  1. D’abord, l’exploration consiste à faire parcourir le Web par des "robots" pour collecter des informations sur les pages Web.

  2. Puis, c’est l’indexation : les données sont analysées et classées dans des bases de données sur des serveurs afin de permettre leur exploitation (grâce à des algorithmes qui analysent les textes, mots-clés, popularité de la page, liens entrants, etc).

  3. Enfin, un internaute effectue une requête. Un algorithme est appliqué pour identifier dans l’index les sites qui correspondent le mieux aux mots-clés de la recherche.
    L'un de ces algorithme est le PageRank qui évalue la popularité des sites grâce aux liens entre eux.

Les réponses affichées dépendent du moteur de recherche utilisé.

Certains moteurs de recherche, comme Qwant et DuckDuckGo, préservent davantage la vie privée.

Modélisation de l'algorithme de PageRank en Python

projet

Vous allez vous mettre en groupe de 3/4 avec l'accord de votre enseignant

Chaque groupe choisit un thème parmi :

Votre objectif est de réaliser un exposé dont le support sera une page html d'une durée maximum de 10 minutes.
Le dossier comprenant votre page html, le css modifié, les images utilisées dans le site devra être envoyé avant votre passage à votre enseignant.e sous format compressé.

Pour coder en HTML, il existe beaucoup de solutions hors ligne ou en ligne. Nous vous suggérons d'utiliser le logiciel https://code.visualstudio.com/.

Vous avez déjà la base de travail de votre site (cf. premier chapitre sur l'arborescence).

Des vidéos pour vous aider :

Cet exposé sera évalué.

Les éléments pris en compte dans l'évaluation :

Coté technique Contenu Organisation du groupe Investissement

Compléments pour protéger votre vie privée

Vous pouvez découvrir des informations supplémentaires au niveau sécurité informatique et sur la protection de vos données personnelles sur cette page du site de cours.

Licence Creative Commons
Les différents auteurs mettent l'ensemble du site à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

▲