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="..." :
    AخA
     
    1
    <h1 id="presentation">Présentation</h1>
  • On crée le lien vers ces identifiants (précédés du symbole #) dans une balise «ancre» <a> :
    1
     
    1
    <a href="liens_intra_page.html#presentation">Lien vers le titre</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).
​x
 
1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <meta charset="utf-8">
5
        <title>Liens intra-page</title>
6
    </head>
7
​
8
    <body>
9
        <h1>Compétences à évaluer en NSI</h1>
10
        <p>Décrire - Concevoir - Collaborer - Communiquer - Responsabiliser</p>
11
​
12
        <h2>Décrire et expliquer une situation, un système ou un programme</h2>
13
            <ul><li>Justifier dans une situation donnée, un codage
14
                    numérique ou l'usage d'un format approprié, qu'un
15
                    programme réalise l'action attendue...</li>
16
​
17
                <li>Détailler le déroulement d'une communication numérique,
18
                    le rôle des constituants d'un système numérique, le rôle
19
                    des éléments constitutifs d'une page web, ce qu'effectue
20
                    tout ou partie d'un programme ou de l'algorithme associé,
21
                    l'enchaînement des événements qui réalisent la fonction
22
                    attendue par un programme...</li>
23
            </ul>
24
            <p>Haut de page</p>
25
​
26
​
27
        <h2>Concevoir et réaliser une solution informatique en réponse à un problème</h2>
28
            <ul><li>Analyser un besoin dans un système d'information, le
29
                    fonctionnement d'un algorithme...</li>
30
​
31
                <li>Structurer une formule logique, des données, une
32
                    arborescence, une page web, une approche fonctionnelle
33
                    en réponse à un besoin...</li>
34
​
35
                <li>Développer une interface logicielle ou une interface
36
                    homme-machine, un algorithme, un programme, un
37
                    document ou fichier numérique...</li>
38
            </ul>
39
            <p>Haut de page</p>
40
​
41
​
42
        <h2>Collaborer efficacement au sein d'une équipe dans le cadre d'un projet</h2>
43
            <ul><li>Agir au sein d'une équipe dans des rôles bien définis,
44
                    en interaction avec le professeur.</li>
45
​
46
                <li>Rechercher et partager une information, une documentation,
47
                    une explication.</li>
48
​
49
                <li>Maîtriser l'utilisation d'outils numériques collaboratifs
50
                    du type ENT, système de gestion de contenu (CMS),
51
                    groupe de travail, forums...</li>
52
            </ul>
53
            <p>Haut de page</p>
54
​
55
​
56
        <h2>Communiquer à l'écrit et à l'oral</h2>
57
            <ul><li>Documenter un projet numérique pour en permettre la
58
                    communication en cours de réalisation et à l'achèvement,
59
                    tout en précisant le déroulement et la finalité du
60
                    projet.</li>
61
​
62
                <li>Présenter le cahier des charges relatif à un projet ou
63
                    un mini-projet, la répartition des tâches au sein de
64
                    l'équipe, les phases successives mises en œuvre, le
65
                    déroulement de l'ensemble des opérations...</li>
66
​
67
                <li>Argumenter les choix relatifs à une solution (choix
68
                    d'un format, d'un algorithme, d'une interface...).</li>
69
            </ul>
70
            <p>Haut de page</p>
71
​
72
​
73
        <h2>Faire un usage responsable des sciences du numérique en ayant conscience des problèmes sociétaux induits</h2>
74
            <ul><li>Avoir conscience de l'impact du numérique dans la
75
                société notamment de la persistance de l'information
76
                numérique, de la non-rivalité des biens immatériels, du
77
                caractère supranational des réseaux, de l'importance des
78
                licences et du droit.</li>
79
​
80
                <li>Mesurer les limites et les conséquences de la
81
                    persistance de l'information numérique, des lois
82
                    régissant les échanges numériques, du caractère
83
                    supranational des réseaux.</li>
84
            </ul>
85
            <p>Haut de page</p>
86
​
87
    </body>
88
</html>
  • 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.

14
 
1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <meta charset="utf-8">
5
        <title>Mix entre lien interne et lien intra-page</title>
6
    </head>
7
​
8
    <body>
9
        <p>
10
            En cliquant <a href="liens_intra_page.html?">ici</a>, on affiche la page d'accueil du site au niveau
11
            du paragraphe sur la conception d'une page web.
12
        </p>
13
    </body>
14
</html>
  • Affichage à obtenir ?
  • Une solution ?