Accueil > Pratique web > supports > Navigation par onglet

Navigation par onglet

lundi 8 octobre 2012

La navigation par onglet ? Rien de plus simple : après avoir cliqué sur un lien hypertexte, la nouvelle page se charge à côté de la page active au lieu de la remplacer. Cela permet de contrôler facilement la navigation, sans être obligé passer par l’intermédiaire des flèches « reculer » et « avancer ».

A ma connaissance, le premier navigateur à avoir proposé ce mode de navigation est Opera (je me souviens l’avoir découvert en 1998). Quelques années plus tard, les navigateurs basés sur le moteur Gecko (Netscape, Firefox,) ont repris ce principe. La plupart des autres navigateurs l’adoptèrent ensuite (quelle que soit le système d’exploitation). De fait, cette fonctionnalité correspond, aujourd’hui, à une norme d’usage de la navigation sur le web.

Il faut savoir, concernant la navigation par onglet, qu’Internet Explorer a longtemps fait figure d’exception. Ce n’est, effectivement, qu’en 2006 (IE7), que Microsoft a intégré à son navigateur la navigation par onglet, ainsi, d’ailleurs, que d’autres fonctionnalités importantes qui faisaient défaut. D’où la situation paradoxale que, jusque là et pendant de nombreuses années, le navigateur le plus utilisé au monde (ce dernier étant intégré à Windows) était technologiquement dépassé, voire obsolète.

Commençons les explications pratiques, avec Mozilla Firefox

Prenez une page Web ; n’importe quelle page web. Par exemple, la page d’accueil du musée de Guggenheim Bilbao.

Je repère, par exemple ce menu. Je pointe sur la rubrique « Le Musée », la souris se transforme en symbole de main. C’est le signe qu’il y a, à cet endroit, un lien hypertexte. Je stabilise la souris il est important d’éviter le bouger de la souris pour l’étape suivante.

Je clique (simple) sur le bouton gauche de la souris.

Du coup, la page d’accueil est remplacée par la page « Le Musée ». Jusque là : rien de nouveau. C’est le B-A-BA de la navigation sur le Web, le principe du lien Hypertexte que vous avez tous expérimenté et que la plupart d’entre vous connaissaient déjà avant même notre première séance.

Je pointe à nouveau le menu, par exemple la rubrique « La Collection ».

Cette fois-ci, par contre, je clique du bouton droit de la souris sur le lien hypertexte. Ce qui fait apparaître une petite fenêtre appelée menu contextuel (voir support).

Je déplace le pointeur, sans appuyer sur le bouton, jusqu’à l’option « Ouvrir le lien dans un nouvel onglet ».

Je bloque la main.

Je clique ensuite sur cette option du bouton gauche de la souris.

Par rapport à tout à l’heure, je remarque les différences suivantes :

 après ce dernier clic, c’est toujours la page d’origine qui est affichée à l’écran (la rubrique « Le Musée »).

 une nouvelle zone horizontale s’est insérée entre la barre d’adresse et la page Web ; il s’agit précisément des onglets.

 la fenêtre affiche désormais deux onglets : celui correspondant à la page active (« Le Musée ») et celui que je viens d’ouvrir pour charger la cible du lien : « La Collection ».

Il suffit de cliquer sur l’onglet « La collection » pour afficher cette page ; puis de cliquer sur l’autre onglet pour retourner sur « Le Musée ». Tout l’intérêt de la manœuvre consiste à garder sous la main, dans la même fenêtre, ces différentes instances de navigation.

Voilà en quoi consiste la navigation par onglet. Vous pouvez charger ainsi plusieurs onglets dans la même fenêtre.

Il n’y a théoriquement aucune limite, si ce n’est qu’à trop en ouvrir, vous risquez de vous perdre dans vos onglets.

Je souhaite, désormais, fermer un onglet, sans pour autant fermer le navigateur.

Je pointe sur l’onglet à fermer, plus précisément à l’extrémité droite de l’onglet. Cela fait apparaître le symbole de fermeture : croix blanche sur fond rouge. Une info-bulle me confirme que si je clique sur cette croix, eh bien…

Alors, je clique.

Résultat : disparition de l’onglet ; plus exactement disparition des onglets, puisque sur Firefox, les onglets n’apparaissent qu’à partir du moment où il y a, au moins deux pages dans la fenêtre.

A présent, je veux, non plus ouvrir un onglet à partir d’un lien hypertexte, comme nous venons de le voir, mais en créer un vide.

Ainsi, je pourrais garder ma page active dans la fenêtre tout en visitant un autre site.

Je pointe la barre d’outils. En survolant les boutons, je peux sans peine identifier l’outil qui me permet de faire cela, grâce aux infos-bulles.

Si, pour une raison ou une autre, je ne trouve pas la barre d’outils, il existe un autre moyen d’arriver au même résultat : « Menu Fichier / Nouvel onglet ».

Pendant que j’y suis, je remarque qu’il existe une troisième méthode. Bingo ! C’est la meilleure, car elle fonctionne sur tous les navigateurs.

Il s’agit du raccourci clavier suivant :

CTRL+T

C’est-à-dire :

 je maintiens la touche « CTRL » du clavier de la main gauche

 tout en gardant ainsi la main gauche, j’effectue, de la main droite, une pression brève sur la touche « T ».

J’ai donc ouvert un nouvel onglet vierge. Remarquez que la barre d’adresse est également vide. Je peux cliquer dedans pour taper une nouvelle adresse ; par exemple celle du Louvre.

Une fois l’adresse saisie, je valide, comme d’habitude, à l’aide de la touche « Entrée » du clavier (voir support)

Me voilà donc, grâce aux onglets, avec les deux musées dans la même fenêtre.

Passons, à présent à Internet Explorer

Rappel : la navigation par onglet n’est disponible qu’à partir d’Internet Explorer 7

Pour l’essentiel, les fonctionnalités sont identiques à celles que nous avons vues sur Firefox.

Toutefois, il est possible, tel que je m’en suis redu compte sur l’un de vos portables, que la fonctionnalité soit désactivée.

Dans ce cas, il faut cliquer sur le « Menu Outil / Options Internet »

Sur la boîte dialogue suivante, cliquez sur les paramètres de la rubrique « Onglets ».

Il faut donc que la « case » Activer la navigation avec onglets … soit cochée pour que la fonctionnalité soit disponible. Laisser les paramètres tels que sur la vue ci-dessous.

Cliquez sur « OK »

Si la fonctionnalité « onglets » était désactivée (première case décochée), il nécessaire de fermer Internet Explorer, puis le relancer pour qu’elle soit finalement disponible.

Tiens, pour changer, sur Internet Explorer, ce sera le centre Georges Pompidou, alias Beaubourg.

Ah ! Internet Explorer m’indique qu’il a bloqué une « fenêtre publicitaire intempestive ».

C’est quoi cette histoire de « fenêtre publicitaire intempestive » ? C’est de l’art conceptuel ?

Non.

On en parlera une autre fois.

J’expérimente, vite fait, la fonctionnalité sur la rubrique « L’atelier d’Alberto Giacometti ».

Clic droit sur le lien, pointe « nouvel onglet », clic.

Voilà, la cible du lien est affiché dans un nouvel onglet.

Je clique sur cet onglet. Je retrouve exactement le mode de navigation de Firefox.

Nouveau clic du bouton droit de la souris sur une rubrique.

Nouveau clic sur « Ouvrir dans nouvel onglet »

Me voilà donc avec trois onglets.

Pour terminer, voici une nouvelle fonctionnalité, qui n’existe pas sur Firefox :

Je clique sur le bouton « Aperçu mosaïque », tel que ci-dessous.

Les pages s’affichent en petites vignettes. Il faut cliquer pour les rétablir en mode d’affichage normal.

 

Un message, un commentaire ?

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.