Ce site ne fonctionne pas correctement si le javascript n'est pas activé
Informatique personnelle
Les bases Le matériel Le logiciel Les réseaux Pour ce site
Le web
Dernière modification le : 21-09-2012

Le web est une application de l'Internet qui permet à tout utilisateur de se réseau de demander à un serveur de lui envoyer des informations.

Celles ci seront présentées à l'utilisateur par un logiciel spécifique : le navigateur.

Le web

Le navigateur

Sur son poste de travail, l'accès au web se fait par un navigateur. Il en existe plusieurs, parmi ceux qui sont gratuits voici les plus utilisés :

  • Firefox (logiciel libre produit par la Mozilla Foundation),
  • Internet Explorer (développé par Microsoft),
  • Chrome (développé par Google),
  • Safari (développé par Apple),
  • Opera (développé par Opera Software).

Bien que les échanges entre serveur et navigateur soient standardisés par le W3C (World Wide Web Consortium) certains navigateurs prennent des libertés avec ces standards. Ainsi le rendu de certains éléments peut différer selon le navigateur utilisé.

De plus, comme ces logiciels sont en constante évolution, il en existe plusieurs versions.

Un exemple de fenêtre de navigateur

Celle de Mozilla Firefox.

Firefox 8

Promenez la souris dans la figure ci-dessous pour en connaître les composants.

 
 
 
 
 
 
 

On trouve une présentation de fenêtre traditionnelle mais certains navigateurs récents ont une disposition pus dépouillée.

Dans notre exemple, outre les habituelles barres de titre et de menu, on trouve...

  • La barre de navigation : elle contient les boutons de navigation, la zone d'adresse qui indique la page actuellement affichée et la zone de recherche.
  • La barre personnelle : elle permet d'accéder rapidement à certaines pages du web dont les adresses ont été enregistrées. Sur certains navigateur elle est appelée "barre des favoris" ou "barre des signets"
  • La barre d'onglets : le navigateur peut contenir plusieurs pages, les onglets indiquent les titres de ces pages, on les affiche en cliquant sur l'onglet correspondant.
  • La zone d'affichage : elle présente le contenu de la page dont le titre est indiqué dans l'onglet actif et dans la barre de titre.
  • La barre des modules : elle est spécifique à Firefox et donne par l'intermédiaire de ses boutons accès aux modules complémentaires installés.

Ceci sera détaillé par la suite.

On peut aussi noter qu'il est possible de configurer le navigateur afin de ne pas afficher toutes ces barres. De plus, un panneau latéral à gauche peut être ouvert (il n'est pas présenté ci-dessus) pour afficher d'autres informations.

Fonctionnement et adressage

Par l'intermédiaire du navigateur, l'utilisateur demande à tel serveur web telle page. Le serveur transmet la page demandée au navigateur et celui-ci l'affiche.

L'utilisateur dispose de différents moyens pour demander l'adresse d'une page. Soit :

  • en indiquant cette adresse dans la barre d'adresse du navigateur,
  • en cliquant sur certains liens de la page actuellement affichée,
  • en rappelant une adresse précédemment mémorisée dans le navigateur ou le système (marque-page, raccourcis).

Dans tous les cas la barre d'adresse indique l'adresse effective de la page. On la nomme une URL (Uniform Resource Locator).

Structure détaillée d'une URL (adresse de page)

Voici, par un exemple, une URL (fictive) complète, beaucoup de ses composants peuvent être absents.

http://s2.tartempion.com:8080/vacances/2011/plage.html?id=12&ft=qsd#bateaux

En décomposant :

http: indique le protocole de communication entre le navigateur et le serveur. Les protocoles les plus courants sur le web sont HTTP (HyperText Transfert Protocol) et HTTPS où les échanges sont cryptés. Si cette information n'est pas donnée dans la barre d'adresses, le navigateur considère qu'il s'agit de "http:".

s2.tartempion.com identifie le serveur web qui contient l'information demandée. En l'occurrence ce serveur appartient au domaine : "tartempion.com". Depuis ce nom de domaine on peut trouver les personnes responsables du serveur.

:8080 indique le numéro de port d'entrée sur le serveur. Certains serveurs offrent différents services qui sont désignés par leur numéro de port. S'il est absent de l'URL, le port demandé est le 80.

/vacances/2011/plage.html est l'adresse de la page dans la structure de fichiers du serveur. Si cela n'est pas précisé, le serveur envoie une page par défaut dite "page d'accueil".

?id=12&ft=qsd sont des informations complémentaires transmises au serveur.

#bateaux indique, si présente, une position dans la page où le navigateur doit placer l'affichage. Si absente la page est affichée à partir du haut.

Exemples

cnil.fr Page d'accueil du site "Commission nationale de l'informatique et des libertés".
http://www.visugpx.com/ign/?lat=45.7716&lng=2.9628 Affiche la carte IGN centrée sur le Puy de Dôme.
https://www.google.com/ Version sécurisée du célèbre moteur de recherche web.
reports.internic.net/cgi/whois Pour trouver les informations concernant les domaines Internet.
fr.wikipedia.org/wiki/Navigateur_web#Parts_de_march.C3.A9 Parts de marché des navigateurs web dans la page consacrée à ces applications.

Remarques

Il est possible d'indiquer comme identification du serveur son adresse IP. Par exemple : http://209.85.148.103/ correspond à http://www.google.fr. Cela n'est utile que pour les rares sites qui ne disposent pas d'un nom de domaine.

Certains sites disposent d'adresses "raccourcies". Par exemple, en indiquant "meteo.fr" on voit l'adresse se développer pour atteindre la page d'accueil du site de Météo-France.

Pour certains sites dont l'accès est restreint on doit indiquer dans l'URL le nom de l'utilisateur et son mot de passe. Ces informations sont placées entre le protocole et l'identification du serveur. Cette méthode est en désuétude car le mot de passe est affiché en clair dans la fenêtre du navigateur.

Echanges de données

Si l'adresse du serveur est fournie sous forme textuelle (nom de domaine), le navigateur demande la traduction en adresse IP à un serveur DNS (Domain Name Serveur).

Le navigateur commence par établir une liaison Internet avec le serveur puis le dialogue se fait selon le protocole précisé en début de l'URL. Généralement il s'agit de HTTP.

Requête faite par le navigateur au serveur

Il s'agit de demander au serveur la page à visualiser. Naturellement, sont aussi envoyés l'adresse de la connexion Internet de la machine de l'utilisateur (adresse IP) et le port de réception sur cette machine utilisé par le navigateur.

Mais d'autres informations sont aussi envoyées telles que l'indication de votre système d'exploitation et de votre navigateur (User-Agent) et, si vous avez cliqué sur un lien, l'adresse de la page où se trouvait ce lien (referer).

Réponse du serveur web

Le serveur commence par renvoyer des informations : "en-tête" qui indiquent, en particulier, si la requête a pu être satisfaite et sinon un code d'erreur. L'en-tête indique aussi, entre autres informations, la taille et la nature du contenu qui suit. Puis vient le contenu.

La page web

Un contenu de page web est habituellement écrit en HTML (il existe quelques variantes : XHTML, SVG...). HTML est un langage de description de page, il contient les textes à afficher, les informations concernant les liens éventuels de la page et les indications de mise en forme. Les autres composants de la page comme les images sont chargés ensuite par des requêtes spécifiques.

La page (HTML) peut contenir aussi des instructions de script. Elles seront exécutées par le navigateur pour rendre les pages plus interactives. Le langage de script le plus utilisé est Javascript. Par exemple les menus déroulants du haut de cette page fonctionnent grâce au JavaScript.

Il est possible de configurer le navigateur afin qu'il ne charge pas les images, ce qui est utile si le débit de transmission est limité. De même, on peut interdire l'exécution des séquences de script.

Les liens

La richesse du web vient surtout de la possibilité d'intégrer dans la page des liens qui conduisent, en cliquant dessus, à d'autres pages du réseau. Là est l'origine du cette appellation anglaise "web" signifiant "toile d'araignée". Ainsi naviguer sur le web consiste à suivre les fils présentés par ces liens pour aller de pages en pages et de sites en site.

Il conviendrait, pour une navigation idéale, de pouvoir repérer facilement les liens dans la page et de savoir (avant de cliquer dessus) où ils conduisent : la cible. Hélas, il n'y a rien de certain sur ces sujets et cela est de la responsabilité du concepteur de la page. Il y a cependant quelques traditions.

Repérer les liens

Les liens peuvent être placés dans sur des mots du texte (lien hypertexte), sur des images, sur des boutons de formulaire ou sur certaines zones de la page.

Traditionnellement les textes supports de lien étaient écrits en bleu et soulignés et les images cliquables étaient encadrées par un liséré bleu. Ce bleu se transformant en violet si le lien a déjà été activé. Aujourd'hui cette tradition s'est souvent perdue.

Mais on peut repérer un lien en déplaçant le pointeur de souris dans la fenêtre du navigateur. Si le pointeur passe sur un lien il prend la forme d'une main. Cependant cela n'est pas vrai pour les boutons de formulaire mais, dans ce cas, on se doute qu'ils sont là pour être activés.

Il faut savoir aussi que le concepteur de la page peut donner au pointeur de souris n'importe quelle forme, y compris au survol d'un lien. En général, comme les concepteurs de sites ne tiennent pas à transformer leurs pages en jeux de piste, ils conservent les formes conventionnelles du pointeur.

De plus, afin de mieux attirer l'attention, il est possible au concepteur de modifier l'apparence du texte supportant un lien lorsque la souris passe dessus. C'est ce qui est fait sur ce site, les liens textes sont écrits en bleu, au survol du pointeur de souris le texte devient rouge. Il peut en être de même pour les liens sur images : l'image change lors du survol de la souris.

Activer un lien

L'activation d'un lien se fait généralement en cliquant dessus avec la souris (un seul clic suffit). Il est possible de le faire au clavier en sélectionnant le lien par la touche de tabulation et en l'activant par la touche "entrée".

Parfois le simple survol de souris active le lien.

Il est souhaitable de le concepteur du site indique ce qui va se passer lorsque le lien sera activé, soit explicitement par le contexte du lien, soit par une "info-bulle" apparaissant près du lien lors du survol souris. Dans la plupart des cas (donc pas toujours) au survol souris d'un lien on voit apparaitre dans la barre d'état (en bas à gauche de la fenêtre du navigateur l'indication de la cible.

Les cibles

Il en existe de nombreuses sortes.

Autre page

Si l'on s'en tient à ce que signifie le mot lien, c'est bien ce à quoi on doit s'attendre en activant un lien. La page est remplacée par une autre, éventuellement sur un autre site.
Sur ce site c'est ce qui se passe en activant les liens du menu en haut de page.

Parfois on ne se trouve pas en haut de la nouvelle page.

Autre emplacement dans la page

Le lien peut ne pas changer de page mais afficher une autre partie de la page. Ainsi on évite à l'utilisateur de faire défiler la page.
Sur ce site, les liens présentés en haut à droite sous "Chapitres de ce document" fonctionnent ainsi.

Pour ces deux types de cibles, les boutons de navigations de la barre d'outils du navigateur (page précédente et suivante) fonctionnent.

Ouverture d'une page dans une nouvelle fenêtre

Dans ce cas, la page cible est affichée dans une nouvelle fenêtre. Selon la configuration du navigateur ce peut être un nouvel onglet ou une nouvelle instance du navigateur.

Naturellement, le bouton de navigation "page précédente" ne sera pas actif dans la nouvelle fenêtre.

Voici un exemple avec wikipedia (pensez à refermer).

Lancement d'un logiciel

Certains liens conduisent à une cible qui ne peut pas être traitée par le navigateur mais par un autre logiciel. Dans ce cas (mais cela dépend de la configuration du système), le logiciel adapté est lancé pour traiter le lien.

On voit cette action se produire par exemple pour le chargement de documents en format PDF ou pour l'envoi d'un courrier électronique (testez mais n'envoyez pas, l'adresse n'est pas bonne).

Téléchargement

Au lieu de lancer un logiciel, certains liens proposent par une boîte de dialogue le téléchargement d'un fichier sur la machine de l'utilisateur ou éventuellement de lancer un logiciel de traitement pour ce fichier. On notera qu'il est possible de configurer le navigateur afin de réaliser l'une de ces actions par défaut.
Exemple : Téléchargement d'un document PDF

Action de script

Un lien peut déclencher une action (généralement Javascript) qui sera exécutée par le navigateur. Là il y a beaucoup de possibilités. Il faut cependant que le navigateur ne soit pas configuré pour interdire les scripts.
Ouverture d'une page en "popup" (pensez à la refermer),
Changement des couleurs (pendant 2 secondes).

Navigation

On a vu que dans beaucoup de cas, l'activation d'un lien provoque un changement de la page affichée, ainsi l'internaute "navigue" sur le web.

Boutons de navigation

Parfois cette navigation amène à une page qui n'est pas intéressante pour l'utilisateur ou qui ne contient pas de liens utiles. Il peut être intéressant de revenir à la page précédente. Pour cela, il suffit de cliquer sur le bouton représentant une flèche dirigée à gauche situé à gauche de la barre d'outils (la tache clavier "retour arrière" ← produit le même effet), si l'on n'a pas de page précédente, ce bouton est inactif. Si on a reculé ainsi dans les pages, le bouton représentant une flèche droite, à côté du précédent, permet de reprendre le parcours en avançant.

navigation Boutons de navigation dans Firefox 10

On remarque donc que le navigateur mémorise le parcours de l'internaute. Il est donc possible de "sauter les étapes" et de se rendre directement à une page déjà vue. Pour cela il suffit de faire un clic droit sur la flèche gauche pour obtenir la liste des pages parcourues et de sélectionner celle que l'on veut atteindre, sur certains navigateurs cette fonction se réalise en cliquant sur un petit triangle situé à côté des boutons flèches .

Au lancement du navigateur, celui-ci accède à une page web prédéfinie (on peut la choisir en configurant le navigateur), il s'agit de la "page de démarrage". Il est possible d'y revenir à tout moment en cliquant sur le bouton de la barre d'outils représentant une petite maison.

Boutons de rechargement et arrêt

Le bouton représentant une flèche circulaire ou une double-flèche (selon le navigateur) recharge la page actuelle depuis le serveur. Il est utile si la page n'a pas été chargée correctement ou pour les sites d'actualités présentant des pages qui changent fréquemment. La touche F5 réalise aussi cette fonction.

Le bouton contenant une croix arrête le chargement de la page en cours. On l'utilise lorsque le chargement de la page est trop long. La touche "Echap" correspond à ce bouton.

Ces boutons sont ceux d'Internet Explorer 8

Certains navigateurs récents ne présentent pas deux boutons mais un seul qui change selon le contexte : pendant le chargement il assure la fonction d'arrêt et ensuite la fonction de rechargement.

Enregistrement des pages et des adresses

La page affichée par le navigateur peut être conservée sur le poste de l'utilisateur.
Elle pourra être consultée hors connexion à l'Internet et dans l'état où elle était lors de l’enregistrement.

Il peut aussi enregistrer l'adresse de la page afin de pouvoir y revenir facilement. Dans ce cas une consultation ultérieure nécessite l'accès à l'Internet et présentera la page dans son état actuel.

Enregistrement de la page

Depuis le menu "Fichier" par la commande "Enregistrer sous...".

Plusieurs types d'enregistrement sont proposés car, généralement, la page est composée de plusieurs fichiers.

  1. Le type "Page web complète" enregistre tous les fichiers composant la page (le fichier principal et un dossier et créé, du même nom, pour les fichiers complémentaires). Ce format est bien adapté à une consultation ultérieure car celle-ci présentera la page telle qu'elle était lors de l'enregistrement.
  2. Le type "Page web HTML uniquement" n'enregistre que le fichier principal, c'est à dire le texte seul. Les images et autres contenus externes sont perdus, la mise en forme est souvent aussi retirée.
  3. Le type "Fichier texte" ne conserve que le texte de la page.

Une autre solution pour conserver la page telle quelle est d'en sélectionner tout ou partie puis faire un copier-coller dans un logiciel de traitement de texte.

Dans les deux premiers cas, il suffit d'ouvrir le fichier "HTML" dans son navigateur pour voir la page. Dans le dernier cas on peut utiliser un éditeur de texte.

Enregistrement de l'adresse de la page

Ici seule l'adresse (URL) de la page est conservée.

Deux méthodes sont possibles.

  • Enregistrement par le système d'exploitation dans un dossier du système de fichiers, il s'agit d'un raccourci.
    Dans ce cas un raccourci est créé dans le système de fichier. Il est indépendant du navigateur, il peut donc être créé et utilisé quel que soit le navigateur.
  • Enregistrement interne par le navigateur, selon celui-ci on parle de marque-pages, de signets ou de favoris.
    Il appartient au type de navigateur, par exemple un marque-page créé avec Firefox ne pourra pas être utilisé avec un autre navigateur.

Enregistrement par le système d'exploitation en tant que "raccourci"

Voici une méthode assez simple et rapide.

  1. Ouvrir le dossier dans lequel on placera le raccourci.
  2. Avec son navigateur, se rendre sur la page dont on veut mémoriser l'adresse.
  3. Réduire la taille de la fenêtre du navigateur afin qu'elle n'occupe pas tout l'écran, la déplacer afin d'apercevoir derrière la fenêtre du dossier destinataire du raccourci.
  4. Avec la souris, faire glisser le petit pictogramme à gauche de la barre d'adresse (juste devant l'adresse de la page) vers le dossier.

Cliquer dans l'image ci-dessous pour voir la démonstration de ce dernier point.

Utilisation du raccourci

Pour accéder à la page enregistrée, il suffit de double-cliquer sur le raccourci. Le navigateur s'ouvre alors sur la page.

Si le navigateur était déjà ouvert (sur une autre page), soit une nouvelle fenêtre de navigation est créée soit la page s'ouvre dans un nouvel onglet. Cela dépend de la configuration du navigateur.

Dans le cas où plusieurs types de navigateurs sont installés sur le système, le navigateur concerné est celui qui est défini comme "navigateur par défaut".

Une autre méthode consiste à faire glisser le raccourci vers une fenêtre de navigateur (déjà ouverte). Dans ce cas, la page en cours est remplacée par celle du raccourci.

Enregistrement de l'adresse de la page dans le navigateur

Dans ce cas c'est le navigateur web qui mémorise les adresses de pages.
Selon les navigateurs ces enregistrements sont nommés :

  • marque-pages (Mozilla),
  • favoris (Google Chrome, Microsoft Internet Explorer),
  • signets (Opera, Safari, Netscape).

Mais quel que soit le nom, le principe est le même (dans la suite de ce chapitre, on utilisera le mot "signet").
L'enregistrement de l'adresse de la page peut être réalisé de plusieurs façons.

  • Dans le menu "signets" on trouve une commande d'enregistrement (ou le raccourcis-clavier "Ctrl+D").
  • En ouvrant depuis ce menu le panneau de gestion des signets. On fait alors glisser le pictogramme à gauche de l'adresse de la page vers ce panneau. La méthode est semblable à celle de création de raccourcis.

Notons que cette dernière méthode est plus puissante car le panneau des signets facilite l'organisation de ceux-ci par la création de dossiers.
Les signets peuvent aussi être placés dans la barre personnelle du navigateur (ou barre des favoris, barre des signets) par la même méthode de glisser-déplacer". Dans ce cas, ils seront facilement accessibles.
L'affichage d'une page enregistrée comme signet se fait facilement en cliquant sur le nom du signet, soit dans le menu "signets", soit dans le panneau ou par la barre personnelle.