Le Web

Introduction

Ce qu'en dit le programme...

Le Web (toile ou réseau) désigne un système donnant accès à un ensemble de données (page, image, son, vidéo) reliées par des liens hypertextes et accessibles sur le réseau internet.

Repères historiques

Votre manuel Delagrave une vidéo récapitulative de l'histoire du web :

Cliquer sur l'image pour accéder à la vidéo

Normalisation de la présentation de l’information

Ce qu'en dit le programme...

Sur le Web, les textes, photos, vidéos, graphiques, sons, programmes sont exprimés et assemblés dans divers formats normalisés par un consortium mondial (W3C : World Wide Web Consortium), ce qui permet une circulation standardisée de ces informations.

Les pages Web sont écrites dans le langage de balises HTML (HypertextMarkupLanguage). Leur style graphique est défini dans le langage CSS (Cascading Style Sheets).

Les pages ont une adresse unique, nommée URL (Uniform Ressource Locator). Elles sont accessibles via internet en utilisant le protocole HTTP (Hypertext Transfer Protocol) ou sa version sécurisée HTTPS qui crypte les échanges. L’affichage des pages est réalisé chez l’utilisateur par un programme appelé navigateur.

Un hypertexte est un texte augmenté de renvois automatiques à des textes, des images ou des sons. Initialement, un hypertexte se restreignait à la mémoire d’un seul ordinateur. Dans une page Web, ce renvoi se fait sur n’importe quelle machine du réseau internet, par le truchement de l’adresse de la page Web du texte (URL) auquel il fait référence. La toile d’araignée construite par les liens peut être représentée sous la forme d’un graphe qui matérialise la structure du Web.

1) les balises en HTML

Un document HTML commence toujours par définir la version HTML utilisée.
Pour nous, on utilise la plus récente :
<!DOCTYPE html>
En-dessous, on indique que la partie HTML commence : tout le reste sera encadré entre la balise <html> et la balise </html>.
Une page est composée de 2 parties, une "tête" <head>...</head> dans laquelle sont définis des paramètres de la page et un "corps" <body>...</body> qui contient la page proprement dite.

2) La tête

Dans cette partie, on va indiquer les paramètres de langue, d'encodage, la position de fichiers supplémentaires nécessaires (style, scripts).

<meta charset='utf-8' /> indique que le texte est encodé en utf-8 (il y a plusieurs façon d'encoder les caractères qui sont des extensions de l'Ascii vu en début d'année, ne pas préciser l'encodage ou indiquer le mauvais risque de faire apparaître des caractères étranges).
<title>...</title> indique le titre de la page, qui s'affiche dans l'onglet du navigateur.
<link rel="stylesheet" type="text/css" href="styles/style.css" /> indique l'adresse du fichier définissant la mise en page.

3) le corps

Une page html est composée une arborescence de balises <bidule>...</bidule>.
Ces balises définissent des objets (tableau, image, bouton, lien hypertexte) ou une décoration particulière du texte (titre, gras, souligné, ...).
Les balises suivantes sont à connaître :

<div>...</div> une division est un bloc de données
<a href="adresse internet">...texte_qui_apparaîtra_souligné...</a> c'est un lien hypertexte qui s'affichera en bleu par défaut
<img src="adresse de l'image"/> une image
<em>...</em> écriture en italique
<strong>...</strong> écriture en gras
<span>...</span> utilisé pour personnaliser la mise en page d'un texte
<table> définition d'un tableau
<tr> définition d'une ligne de tableau
<td>...</td> définition d'une case dans la ligne

</tr>

</table>

les titres <h1>...</h1> (le plus grand) jusqu’à <h6>...</h6>
Pour aller à la ligne, il faut insérer un break <br>, aller simplement à la ligne dans un texte ne fonctionne pas !

4) La feuille de style

Une feuille de style utilise le langage css qui permet de définir la décoration à appliquer à un objet.
Comme la feuille ne fait pas partie de la page html, il va falloir identifier les objets sur lesquels portent la décoration.
Il y a 4 façons d'identifier un objet :

en fonction de sont type (img, div, a, ...)
en fonction de sa classe (class= dans les balises concernées)
en fonction de son identifiant (id)= dans la balise concernée)
en fonction de ce que vous en faites (si passe le curseur dessus, si on clique ou qu'on déplace)

Dans une feuille css, on commence par définir l’objet concerné et on défini ce qui le concerne entre accolades

Propriétés qui s’appliquent à un objet	Propriétés qui s’appliquent à une class	Propriétés qui s’appliquent à un id
div{ background-color:grey ; }	.entete{ font-size:15px ; }	#experiences{ color:#ff0000 ; }

5) Corrigé des activités p60-61 et 62-63

Les activités présentes sur le livre vous permettent d'aborder comment fonctionne le Web et ce qui structure une page web avec le langage HTML.
Voici les corrigés de ces 2 travaux :

Cliquez ici pour accéder au corrigé

6) Se débrouiller seul

Il est probablement impossible de connaître toutes les subtilités du HTML et du CSS. Si vous essayez de faire quelque chose sans savoir comment vous y prendre, allez sur internet, notamment

W3C schools https://www.w3schools.com/ qui détaille la syntaxe de chaque paramètre
Openclassroom qui propose un cours très complet.

7) S'approprier le langage HTML

Le document suivant cliquer pour télécharger page_CV.zip contient 1 dossier et 3 fichiers :

cv.html qui contient le code et la structure de la page
style.css qui définit la mise en page de cv.html
photo.jpg qui est la photo du CV.

A l'aide d'un éditeur de texte (comme Notepad++) éditer le fichier cv.html et modifier le texte et la photo pour en faire votre cv.

8) Le cours, en vidéos

Le HTML

Récupérer et décompresser le document

Editer et modifier le document

Compresser et déposer le document sur mon serveur

Mettre son site web en ligne

Il s'agit de la capture d'écran d'une élève ayant fait la mise en ligne durant la séance.

8) Le javascript, pour aller plus loin

Rendre une page interactive avec le javascript

Moteurs de recherche

Ce qu'en dit le programme...

Les moteurs de recherche permettent de trouver des informations dans des pages dont on ne connaît pas l’adresse, voire dont on ignore l’existence. La méthode de recherche appelée référencement naturel se décompose en trois grandes activités, réalisées par les moteurs de recherche :

le parcours automatique du Web pour collecter les pages visitées (aspiration des pages Web effectuée par des robots) ;
l’analyse du contenu des pages et leur indexation sur les mots qu’elles contiennent (constitution d’un annuaire inversé qui associe à chaque terme les URL des pages où il apparaît) ;
la troisième activité, réalisée à chaque fois qu’un internaute fait une requête, construit une liste ordonnée des pages (classement) comportant les mots clés de la requête. Leur ordre dépend notamment de leur popularité (principe des liens), de leur pertinence (aux mots de la requête), et de l’ordre des termes de la requête.

Les concepteurs de site Web peuvent améliorer le référencement de leurs pages en choisissant bien les mots et en les plaçant à des endroits stratégiques dans les pages.

Interaction client/serveur

Ce qu'en dit le programme...

Le Web s’appuie sur le dialogue entre clients et serveurs. L’interaction est à l’initiative des clients (les applications qui se connectent au Web, dont les navigateurs), qui envoient des requêtes HTTP aux serveurs. Ces derniers renvoient leur résultat : des pages qu’ils ont stockées ou qu’ils créent dynamiquement en fonction de la requête formulée. Les pages reçues par les clients peuvent contenir des codes exécutables (souvent en JavaScript) qui permettent aux clients d’effectuer des traitements en accédant aux ressources de son ordinateur et en interagissant avec les serveurs. Les applications peuvent être paramétrées pour autoriser ou interdire l’accès à des ressources locales aux programmes téléchargés par les pages.

Sécurité et confidentialité

Ce qu'en dit le programme...

En formulant des requêtes sur des sites Web dynamiques et en laissant des programmes s’exécuter sur sa machine, l’utilisateur prend des risques : il peut communiquer des informations personnelles à son insu à des serveurs qui en gardent une trace, à distance ou localement par des cookies, ou encore charger des pages contenant des programmes malveillants, par exemple permettant d’espionner en continu les actions de l’utilisateur. Par ailleurs, un navigateur peut garder un historique de toutes les interactions, et le laisser accessible aux sites connectés. L’utilisateur peut utiliser des services qui s’engagent à ne pas garder de traces de ses interactions, par exemple certains moteurs de recherche.
Il peut aussi paramétrer son navigateur de façon à ce que celui-ci n’enregistre pas d’historique des interactions. De fausses pages peuvent encore être utilisées pour l’hameçonnage des utilisateurs. Un nom de lien pouvant cacher une adresse Web malveillante, il faut examiner cette adresse avant de l’activer par un clic.

Impacts sur les pratiques humaines

Ce qu'en dit le programme...

Dans l’histoire de la communication, le Web est une révolution : il a ouvert à tous la possibilité et le droit de publier ; il permet une coopération d’une nature nouvelle entre individus et entre organisations : commerce en ligne, création et distribution de logiciels libres multi-auteurs, création d’encyclopédies mises à jour en permanence, etc. ; il devient universel pour communiquer avec les objets connectés. Le Web permet aussi de diffuser toutes sortes d’informations dont ni la qualité, ni la pertinence, ni la véracité ne sont garanties et dont la vérification des sources n’est pas toujours facile. Il conserve des informations, parfois personnelles, accessibles partout sur de longues durées sans qu’il soit facile de les effacer, ce qui pose la question du droit à l’oubli. Il permet une exploitation de ses données, dont les conséquences sociétales sont encore difficiles à estimer : recommandation à des fins commerciales, bulles informationnelles, etc.
En particulier, des moteurs de recherche permettent à certains sites d’acquérir de la visibilité sur la première page des résultats de recherche en achetant de la publicité qui apparaîtra parmi les liens promotionnels.