le Web

Introduction⚓︎

Définition

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

Le Web en quelques dates :

1965 : invention et programmation du concept d’hypertexte par Ted Nelson.
L'hypertexte correspond à l'idée qu'un texte puisse directement faire référence à un autre texte : c'est le précuseur de ce qu'on appelle le lien internet.
1989 : naissance au CERN par Tim Berners Lee.
En appliquant l'hypertexte aux pages de texte informatique, il permet de lier rapidement une idée à un texte de référence sans avoir à le recopier intégralement ou demander au lecteur d'aller lui-même faire la recherche.
1993 : mise dans le domaine public, disponibilité du premier navigateur Mosaic.
Le navigateur est une application qui permet d'afficher une page internet et de suivre les liens qu'elle contient. Mosaïc est le premier à être compatible avec des ordinateurs personnels et permet donc le développement du web.
1995 : mise à disposition de technologies pour le développement de site Web interactif (langage JavaScript) et dynamique (langage PHP).
Grâce à ces langages (Javascript s'éxecute sur l'ordinateur du visiteur et PHP sur le serveur hébergeant le site internet) la page internet n'est plus figée. Elle peut changer d'aspect en fonction des réponses des utilisateurs, ajouter des animations, de petits jeux...
2001 : standardisation des pages grâce au DOM (Document Object Model)
Une page internet est maintenant une arborescence d'objets imbriqués les uns dans les autres et bornés par des balises.
2010 : mise à disposition de technologies pour le développement d’applications sur mobiles.
Les pages internet sont maintenant principalement consultées par des périphériques mobiles (smartphones, tablettes). La mise en page des sites internet évolue pour s'adapter au format de ces disositifs. De nombreuses applications disponibles sur les stores ne sont que des navigateurs pointant directement sur un site internet.

Normalisation de la présentation de l’information⚓︎

A savoir

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.

I - 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> (on parlera d'en-tête) dans laquelle sont définis des paramètres de la page
un "corps" <body> ... </body> qui contient la page proprement dite.

1) 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).

La balise <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).
La balise <title>...</title> indique le titre de la page, qui s'affiche dans l'onglet du navigateur.
La balise <link rel="stylesheet" type="text/css" href="styles/style.css" > indique l'adresse du fichier définissant la mise en page.

2) 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 :

La balise <div>...</div> est un bloc de données : Cela permet de conserver un groupe et de le déplacer et le dimensionner sur la page
La balise <a href="adresse internet">...texte_qui_apparaîtra_souligné...</a> est un lien hypertexte qui s'affichera en bleu par défaut
La balise <img src="adresse de l'image"> </img> définiti une image
La balise <em>...</em> indique que le texte est doit s'écrire en italique
La balise <strong>...</strong> indique que le texrte doit s'écriture en gras
La balise <span>...</span> est utilisées pour personnaliser la mise en page d'un texte (taille, couleur...)
La balise <table> indique le début d'un tableau
- La balise <tr> indique le début d'une ligne de tableau
  - La balise <td>...</td> définit une case dans la ligne
- La balise </tr> ferme la ligne
- La balise </table> indique fin du tableau
- les titres de chapitre <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 !

3) 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 ; }

4) 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.

5) 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.

6) 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.

7) Le javascript, pour aller plus loin⚓︎

Rendre une page interactive avec le javascript

II - Généralités⚓︎

1) Moteurs de recherche⚓︎

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.

2) Interaction client/serveur⚓︎

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.

3) Sécurité et confidentialité⚓︎

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.

4) Impacts sur les pratiques humaines⚓︎

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.