Organiser une page avec beaucoup de contenu

Pour éviter la multiplication des pages dans un site certains développeur imaginent des pages avec beaucoup de contenu chacune (textes et images).
Le défilement d'une page très longue peut devenir fastidieux, il faut donc pouvoir naviguer au sein de la page.
A partir d'une autre page il faut pouvoir accéder à un endroit précis de la longue page.

Première technique : les ancres

Extrait du code

... <h1 id ="haut">Page très longue</h1> <nav> <a href ="#partie1" >1ère partie </a> <a href ="#partie2" >2ième partie </a> <a href ="#partie3" >3ième partie</a> </nav> <h2 id ="partie1">Première partie de la page</h2> <p>Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ... <a href ="#haut">Retour haut de page</a> <h2 id ='partie2'>Deuxième partie de la page </h2> <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli ... <a href ="#haut">Retour haut de page</a> <h2 id ='partie3'>Troisième partie de la page</h2> <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed ... <a href ="#haut">Retour haut de page</a> </body></html>

Commentaire

Dans cette page il y a quatre ancres. Une ancre est créé avec l'attribut ID. Les ancres sont :

<h1 id ="haut"> <h2 id ="partie1"> <h2 id ="partie2"> <h2 id ="partie3">

Pour accéder à une ancre il suffit de créer un lien hypertexte (balise A) avec en valeur de l'attribut href "#nom_ancre"
Dans l'exemple il y a six liens vers des ancres de la page qui sont :

<a href ="#partie1" >1ère partie </a> <a href ="#partie2" >2ième partie </a> <a href ="#partie3" >3ième partie</a> ... <!-- trois fois--> <a href ="#haut">Retour haut de page</a>
Observez le rendu !

Lien vers une ancre située dans une autre page

Imaginons que la page en question se nomme "page_longue.htm". Dans d'autre pages vous pouvez écrire des liens avec les valeurs suivantes pour l'attribut href : "page_longue.htm#partie1" OU "page_longue.htm#partie3". Ainsi vous accédez à un endroit précis de "page_longue.htm"

Deuxième solution : masquer une grande partie du contenu

Par défaut la page n'est pas longue car une grande partie de son contenu est masqué.
Ce masquage d'une grande partie du contenu de chaque partie peut être réalisée avec CSS ou avec HTML5.

Masquage : solution CSS

Extrait du code de la page

<style> article {height : 150px; overflow : hidden; } article:hover {height : auto; } ... <h1 >Page très longue</h1> <article> <h2>Première partie de la page</h2> <p>Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ... </article> <article> <h2>Deuxième partie de la page </h2> <p>Ultima Syr iarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli ... </article> <article> <h2>Troisième partie de la page</h2> <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed ... </article> ...

Commentaire

Notez la présence d'une feuille de style interne avec deux règles.
Chacune des parties est désormais contenue dans la balise ARTICLE par contre les ancres et les liens vers celles-ci ont disparu !

La feuille de style précise que la hauteur par défaut de chaque boite ARTICLE est 150 pixels seulement et que le reste du contenu est masqué (overflow :hidden).
Si survol de la boite alors la hauteur s'ajuste pour afficher tout le contenu !
Observez le rendu !

Inconvénient de la solution CSS : dès qu'une partie n'est plus survolé elle est de nouveau retractée.

Masquage : solution HTML5

La version 5 de HTML propose deux nouvelles balises doubles et de type block qui fonctionnent obligatoirement ensembles.
Le contenu d'une partie doit être à l'intérieur du conteneur details ; le contenu affiché par défaut à l'intérieur du conteneur summary.

Extrait du code

... <details> <summary> <h2>Première partie de la page</h2> <p>Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, </summary> <p>Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini ... </details> <details> <summary> <h2>Deuxième partie de la page </h2> <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli ... </summary> <h2>Deuxième partie de la page </h2> <p>Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli ... </details> <details> <!--début troisième partie--> ...

Commentaire

La balise double summary est obligatoirement "enfant" du conteneur details !
Donc gros avantage par rapport à la solution précédente : le développeur gère le contenu affiché par défaut. Une partie développée par le visiteur le reste tant que ce dernier n'a pas demandé la rétractation.
Mais inconvénient : le code HTML est un peu lourd puisque pour chaque partie de la page il faut rajouter quatre balises ...


Observez le rendu !

Remarques générales

Rien n'interdit de combiner plusieurs solutions dans une page : ancres et masquage.
Attention les nouvelles balises HTML5 ne sont pas forcément implémentées sur les anciens navigateurs ...

Il existe aussi une solution avec JavaScript-jQuery mais comme vous êtes censé être débutant en programmation web, c'est prématuré.
Retour menu