Web

Fiche d’activité 1 (réalisable grâce à un bloc-notes ou, sous Windows, à Notepad++ sous licence libre et gratuit).

Fiche d’activité 2 (ajouter des éléments : image, son, vidéo, iframe)

Fiche d’activité 3 (présentation d’une décodeuse du numérique)

Fiche d’activité 4 (créer une « fausse vraie » page Web)

Le web (toile ou réseau) désigne un système donnant accès à un ensemble de données (page, image, son, vidéos) reliées par des liens hypertextes et accessibles sur le réseau Internet. C’est un réseau documentaire.

Le Web n’est pas Internet, mais c’est un service rendu par Internet.

Repères historiques (extrait du B.O.)

1965: invention et programmation du concept d’hypertexte par Ted Nelson
1989: naissance du WEB au CERN par Tim Berners Lee
1993: mise dans le domaine public, disponibilité du premier navigateur Mosaic
1995: mise à disposition de technologies pour le développement de site Web interactif (langage JavaScript) et dynamique (langage PHP)
2001: standardisation des pages grâce au DOM(Document Object Model)
2010: mise à disposition de technologies pour le développement d’applications sur mobiles

Généralités

Voici un lien utile pour apprendre à créer un lien hypertexte : OpenClassroom

C’est à Tim Berners-Lee qu’on doit également le protocole HTTP et le langage HTML. Le Web est gouverné par le W3C (World Wide Web Consortium).

Enfin, on parle de différents Web. En effet, il y a celui qui est visible (surface Web), celui qui est caché ou peu visible (deep Web) et celui qui est secret voire illégal (dark Web) : Iceberg du Web

Il y a aussi différentes natures du Web. Initialement, le Web est documentaire (Web 1.0), mais il est aussi un espace participatif (Web 2.0) via les réseaux sociaux notamment. Il est aussi qualifié de sémantique (Web 3.0) où les ressources sont structurées et traitables par des algorithmes. Enfin, on parle aussi de Web 4.0 avec les objets connectés.

Modèle client/serveur

Le Web est basé sur le modèle Client/Serveur. Un client (en fait, très souvent, un navigateur, parfois un robot) envoie une requête à un serveur (hébergeur d’ordinateurs, de disques durs). Ce dernier envoie des fichiers que le navigateur va alors interpréter.

URL

Les documents sont localisés grâce à une URL (Uniform Resource Locator) et sont accessibles grâce au protocole HTTP (Hypertext Transfer Protocol) ou HTTPS, version plus sécurisée. Il suffit de saisir une URL dans la barre d’adresse de notre navigateur pour accéder au document.

Les URL les plus fréquentes sont de la forme suivante :

Exemple 1 : https://sous-domaine.domaine.tld/dossier/fichier.html

Exemple 2 : https://snt2de.glitch.me/2-Web.html

Exemple 3 : https://lewebpedagogique.com/rouy/3eme/

Le début (https) est le protocole utilisé pour récupérer le document, suivi de « : » et « // ».

Ensuite, est indiqué le nom de domaine constitué (de droite à gauche) par :

– le « tld » qui désigne le TLD = top-level domain, nom du domaine de 1^er niveau. On parle aussi d’extension du nom de domaine. Il en existe environ 2 000 (net, org, fr, bzh, …).

Dans l’exemple 2, il s’agit de « me » et dans l’exemple 3 « com ».

– le domaine de second niveau (SLD = second level domain).

Dans l’exemple 2, il s’agit de « glitch » et dans l’exemple 3 « lewebpedagogique ».

Un sous-domaine peut précéder le nom de domaine (on parle aussi de préfixe).

Dans l’exemple 2, il s’agit de « snt2de » et le plus souvent c’est « www » (world wide web).

Supposons que nous ayons atteint cette adresse IP. La suite de l’URL nous permet alors de rentrer dans le serveur qui héberge la ressource voulue. Celle-ci peut être dans un dossier (notion qui n’est désormais plus forcément physique). Dans l’exemple 3, il s’agit du dossier « rouy ».

Ce dossier peut contenir un sous-dossier, etc. et on finit par atteindre la ressource voulue. Dans l’exemple 2, on atteint le fichier « 2-Web.html ».

La fin de l’adresse URL peut contenir une ancre #endroit_dans_le_document. Ainsi, la page ne s’affiche pas au début mais à l’endroit précis que l’on souhaite dans la page.

Requête HTTP

Un article de ionos.fr détaille ce qu’est une requête http : hypertext transfer protocol.

Langages HTML et CSS

Plusieurs langages permettent de créer des pages Web.

HTML

Le HTML (Hypertext Markup Language) sert à décrire le contenu du document. C’est un langage de description : titres, paragraphes, listes, tableaux,… C’est un langage écrit avec des balises.

Par exemple, un paragraphe s’écrira entre les deux balises <p> et </p>.
Quant à un lien hypertexte, il est créé ainsi :

ce qui donnera mon site de math.

L’URL indiquée peut être absolue (comme dans cet exemple) ou relative :
- <a href=’’page2.html’’> si la page2 est dans le même dossier que la page,
- <a href=’’contenu/page2.html’’> si la page2 est dans un sous-dossier,
- <a href=’’../page2.html’’> si la page2 est dans le dossier parent,
- <a href=’’#ancre2’’> si le lien est interne à la page. Dans ce cas, à l’endroit souhaité, il faut rajouter l’attribut id à une balise (exemple <h1 id=’’ancre2’’>).

Un clic droit sur une page Web puis « code source de la page » permet de voir le code HTML de la page.

CSS

Le langage CSS = Cascading Style Sheet (Feuille de style en cascade) sert à mettre en forme le document.

Ainsi, si on veut que les paragraphes soient écrits en bleu, on écrira dans le fichier .css :

{

color:blue;

}

Si on veut voir les pages Web sans leur mise en forme par les CSS, il suffit d’ouvrir l’outil de développement (via la touche F12), puis Editeur de style (en bas de l’écran) puis on désactive les feuilles de style (en bas à gauche).

Javascript

Le Javascript permet d’animer, de sécuriser, de traiter des données (cookies), côté client.

PHP

Un autre langage, comme Javascript, mais côté serveur (PHP Hypertext Preprocessor).

SQL

SQL (Structured Query Language) est un langage de requêtage de données.

Vous pouvez vous entraîner à écrire du HTML et des règles de CSS à partir de cette page d’entraînement.

Aller plus loin dans la construction d’une page web ?

Navigateurs et sécurité

Fiche d’activité : traçage

Actuellement, le marché des navigateurs est très largement dominé par Chrome (de Google), devant Safari (d’Apple) : Statistiques

La chaîne Arte propose une série de 7 épisodes sur le trackage sur le Web.

En plus des trackers, une autre façon d’être pisté se fait via l’empreinte de notre navigateur. La vôtre est-elle unique ? On peut en avoir une idée grâce au site Am I Unique

Comment se protéger ? Voici plusieurs vidéos.

Comment supprimer les cookies ? Explications pour Firefox et pour Chrome.

Moteurs de recherche

Fiche d’activité

Google écrase toute la concurrence : Statistiques

Cependant, d’autres moteurs de recherche existent avec d’autres valeurs : par exemple, le moteur de recherche français Qwant.

Lorsqu’on cherche une information sur le Web, soit on connaît par cœur l’adresse d’un site, soit on utilise un annuaire (qui regroupe des sites Web), soit on va sur un moteur de recherche. Autant dire que c’est cette dernière solution qui est largement utilisée.

En saisissant des mots clés, le moteur de recherche nous retourne une liste de pages Web censée contenir ces mots-clés. Comment ? Grâce, au départ, à des robots (spiders ou crawlers), qui récupèrent l’URL d’une page, son code html, sa taille, sa date de dernière modification, … Le plus célèbre de ces logiciels robots est Googlebot et ce qui a fait le succès de Google : son algorithme PageRank.

Activité algorithmique sur le PageRank que vous pouvez réaliser sur Numworks ou Trinket.

Du côté utilisateur : effectuer une recherche

Un utilisateur peut effectuer une recherche simple, avancée ou spécifique.

Recherche simple

Inutile d’écrire les mots « le », « la », « du », « avec ». On les appelle des mots vides. Inutile également d’ajouter « et » entre deux mots ou de mettre une majuscule.

En revanche, si on ne ne veut pas d’un mot, il suffit de le faire précéder du signe moins (-).

Enfin, si on veut une expression précise, on la mettra entre guillemets. Conseils pour une recherche

Recherche avancée

Le moteur de recherche Google propose d’affiner les résultats grâce à des filtres. Exemple de recherche avancée.

Du côté webmaster (créateur et administrateur de site) : être bien positionné

Pour qu’un site soit connu des moteurs de recherche, il doit être référencé : il doit signaler son existence. Mais qui va chercher au-delà des deux premières pages proposées par un moteur de recherche ? Être référencé, c’est bien, être bien positionné, c’est beaucoup mieux. Pour cela, le choix de mots clés dans le titre de la page, dans les titres des paragraphes, dans le code source de la page, est essentiel. Mais d’autres critères existent.

A l’inverse, et pour diverses raisons, on peut souhaiter ne pas être référencé par les moteurs de recherche. Pour cela, on utilisera un fichier : robots.txt (voir http://robots-txt.com/).

Notions juridiques