Html & Css

Naviguer à l'intérieur d'une page

Une URL intra-page permet de «naviguer» facilement à l'intérieur d'un fichier .html. C'est le cas du premier bouton présent en bas à droite de cette page dont le lien conduit directement au haut de la page. Il est aussi possible de concevoir un lien qui conduit au dernier exercice de cette page.

Ces URL peuvent être associées aux URL absolues afin d'atteindre un emplacement précis d'une autre page. Par exemple, en cliquant ici, on ouvre la page des liens relatifs directement au niveau de l'exercice n°1.

Méthode

  • On donne un identifiant unique à la balise Html de l'élément à cibler avec l'attribut id="..." :
  • On crée le lien vers ces identifiants (précédés du symbole #) dans une balise «ancre» <a> :
  • L'attribut href="#" conduit le lien en haut de la page Html consultée.

Le code .html ci-dessous présente les compétences issues du bulletin officiel.
Compléter ce code afin que :

  • chaque lien «Décrire», «Concevoir», «Collaborer», «Communiquer» et «Responsabiliser» renvoie vers le paragraphe correspondant ;
  • chaque lien «Haut de page» renvoie vers le haut de la page (sic).
  • Affichage à obtenir ?
  • Une solution ?

On peut bien évidemment «mélanger» un lien interne au site avec un lien intra-page. Il faut alors connaître l'arborescence de son site pour atteindre la page désirée ainsi que l'identifiant de la partie de la page à cibler.

Remplacer le point d'interrogation par un lien qui permettra d'afficher le paragraphe «concevoir» de la page accueil_cours_html_css_nsi.html sachant que cette page se situe au même niveau que le répertoire contenant la page courante.

Si besoin, actualiser en cliquant sur [F5] pour ré-initialiser la fenêtre d'affichage.

  • Affichage à obtenir ?
  • Une solution ?