4.Créer des liens texte

Créer des liens texte - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application

Dans le chapitre précédent, nous avons appris à construire une page HTML de base.

Mais un site Web est plus qu'une simple page HTML. Vous pourriez faire valoir que ce qui définit un site Web est la présence d'une collection de pages Web connexes.

Obtenir cela? Plusieurs pages Web.

Et comment passe-t-on d'une page web à l'autre ? Par des liens hypertextes bien sûr.

Vous cliquez sur un certain morceau de texte et vous êtes comme par magie transporté vers une autre page. Il n'est pas exagéré de dire que les hyperliens sont l'épine dorsale d'un site Web.

Heureusement, la création de liens texte est une pratique HTML standard et facile à apprendre.

Il existe deux types de liens texte en HTML et nous les aborderons tous les deux dans ce chapitre.

Vous pouvez créer un lien de la page a.html vers la page b.html (lien relatif) mais vous pouvez également créer un lien vers un site Web complètement différent tel que http://www.siteraw.com (lien absolu).

Les deux fonctionnent de manière très similaire.

Relatif ou absolu ?

Comme je l'ai brièvement mentionné dans l'introduction de ce chapitre, il existe deux types de liens :

• Les liens relatifs sont des liens internes à son propre site Web, pointant par exemple de la page a.html vers la page b.html.
• Les liens absolus sont des liens vers un site externe, pointant par exemple vers http://www.siteraw.com.

N'oubliez pas la distinction entre absolu et relatif car ces termes sont utilisés pour plus que de simples liens de texte.

Chaque fois que vous aurez affaire à des chemins et au système de fichiers, vous pouvez parier que vous rencontrerez la dichotomie relatif/absolu.

Pour être un peu technique, bien que vrai, mon explication n'est pas nécessairement la plus précise. Les termes relatif et absolu font référence au chemin d'accès d'un fichier ou d'un répertoire plutôt qu'à l'emplacement de la destination. Ainsi, il est possible de créer des liens absolus pointant vers des pages internes de votre site.

Prêt à commencer à créer des liens ?

Liens absolus

Commençons par les liens absolus.

Il est facile de reconnaître un lien hypertexte sur la plupart des pages Web car ils sont intentionnellement formatés pour se démarquer du reste du texte (en bleu et souligné par défaut).

Ajoutons un lien vers la page de démonstration que nous avons construite au cours du dernier chapitre.

<capturer>

Rappelez-vous ceci?

Vous pouvez voir le lien en bleu en bas de la page.

Alors, comment insérer des hyperliens en HTML ?

Tout ce dont nous avons besoin pour créer des liens en HTML est une balise : <a>.

Le <a> signifie ancre, dont nous parlerons dans quelques instants, mais il est surtout connu sous le nom de balise de lien hypertexte.

Pour insérer un lien sur votre page, saisissez simplement le texte que vous souhaitez transformer en lien entre les balises <a>.

Dans notre cas, le texte lié dans "SiteRaw".

<a>SiteRaw</a>

N'hésitez pas à modifier le texte si vous le souhaitez.

Ça ne marche pas ! Quand je clique sur le lien rien ne se passe !

C'est parce que nous n'avons pas encore spécifié la destination de notre lien.

Si vous y réfléchissez bien, un lien doit avoir au moins deux composants : l'élément lié (dans notre cas, le texte "SiteRaw") et la destination du lien (ce que nous devons ajouter).

Pour ce faire, nous utiliserons un attribut HTML spécifique.

Vous vous souvenez des attributs ? Nous les avons présentés dans le deuxième chapitre, mais nous ne les avons pas utilisés depuis.

L'attribut dont nous avons besoin pour indiquer la destination de notre lien est href, qui signifie référence hypertexte.

Et n'oubliez pas la règle d'utilisation des attributs : ils sont placés sur la balise ouvrante et non sur la balise fermante.

Complétons notre lien en ajoutant un attribut href et en faisant pointer notre texte vers http://www.siteraw.com.

<a href="http://www.siteraw.com">SiteRaw</a>

Les liens doivent généralement être utilisés dans les paragraphes, nous allons donc ajouter du texte autour.

<p>Visitez simplement 

<a href="http://www.siteraw.com">SiteRaw</a></p>

Et c'est le code exact utilisé pour l'exemple donné au début de ce chapitre.

Passons aux liens relatifs.

Liens relatifs

Nous avons appris comment créer un lien vers un site Web existant, il ne nous reste plus qu'à pouvoir créer des liens entre les pages de notre propre site.

Pour ce faire, nous utiliserons des liens relatifs.

Comment puis-je créer des liens entre mes pages si je ne connais pas l'adresse Web de mon site Web ? Je n'ai pas encore d'adresse http:// !

Ne vous inquiétez pas, vous pouvez toujours utiliser des liens même sans avoir d'adresse Web.

Votre site Web est actuellement stocké sur votre ordinateur et vous seul pouvez le voir.

Nous découvrirons comment l'envoyer en ligne et le rendre accessible à tous dans le monde plus loin dans ce tutoriel.

Mais pour le moment, nous nous contenterons de ce que nous avons.

Au cours de ce didacticiel, nous avons créé une page HTML (appelée index.html ou tout autre nom que vous lui avez donné).

Comme nous l'avons dit dans l'introduction, pour être considéré comme un site Web complet, vous avez besoin d'au moins deux pages, nous allons donc simplement créer une autre page dans le même répertoire. Je l'ai appelé siteraw.html.

Dans Brackets, allez simplement dans File > New et enregistrez votre nouveau fichier dans le même dossier que votre première page.

Voici ce que vous devriez avoir dans votre explorateur de fichiers.

<capture>

Il ne reste plus qu'à créer un lien de index.html vers siteraw.html.

Mais comment puis-je faire cela si je ne connais pas l'adresse http:// ?

Très facilement.

Puisque les deux fichiers sont dans le même répertoire, il suffit de reprendre le code que nous avons utilisé dans notre exemple précédent et de remplacer la valeur de l'attribut href par siteraw.html (le nom de votre page de destination).

Quels que soient les noms que vous utilisez pour vos fichiers HTML, une page sera la page de liaison et l'autre sera la page de destination.

Dans notre cas, index.html sera lié à siteraw.html.

Voici le code pour index.html.

<p>Vous voulez visiter <a href="siteraw.html">SiteRaw</a> ? C'est un site Web génial !</p>

Et le code pour siteraw.html.

<h1>Bienvenue sur SiteRaw</h1>

La page de liaison (index.html) contient un lien vers la page de destination (siteraw.html) qui consiste simplement en un message indiquant que vous êtes arrivé sur la bonne page.

Essaye le.

Pour raccourcir le code, j'ai intentionnellement omis les balises de structure habituelles (<html>, <head>, <body>, etc.), mais vous devez toujours les inclure pour que vos pages Web soient valides.

Pages dans différents dossiers

Vous savez maintenant comment créer des liens relatifs. Ou vous ?

Il reste encore un ou deux points à couvrir.

Oui, vous avez seulement montré comment créer des liens relatifs lorsque les deux fichiers sont dans le même dossier. Et s'ils ne le sont pas ?

Bon point.

Les choses sont légèrement plus difficiles lorsque vos pages sont dans des dossiers différents mais cela reste assez simple.

Révisons notre exemple et imaginons qu'au lieu d'être dans le même répertoire que index.html, la page siteraw.html se trouve dans un dossier appelé siteraw.

Je sais que je suis très créatif avec mes appellations alors voici une aide visuelle.

À l'intérieur du dossier siteraw se trouve le même fichier siteraw.html qu'auparavant, son contenu n'a pas changé.

Alors, comment créer un lien entre index.html et siteraw.html ?

Ajoutez simplement le nom du dossier avant le nom du fichier dans l'attribut href.

<a href="siteraw/siteraw.html">SiteRaw</a>

Et si plusieurs dossiers les séparaient ?

Au lieu d'aller sur siteraw > siteraw.html, et si vous deviez aller sur siteraw > dossier > siteraw.html ?

Même méthode, il suffit d'ajouter les noms des dossiers séparés par des slashs.

<a href="siteraw/folder/siteraw.html">SiteRaw</a>

Ok, mais que se passe-t-il si la page de destination n'est pas située dans un sous-dossier mais dans un répertoire parent ?

Si votre page de destination est placée "plus haut" dans l'arborescence, écrivez simplement deux points .. pour chaque répertoire que vous souhaitez "monter".

<a href="../siteraw.html">SiteRaw</a>

Nous avons maintenant vu les deux types de liens, absolus et relatifs, et appris à les utiliser avec HTML.

Mais il reste encore une pratique à apprendre.

Liaison aux ancres

Au début de ce chapitre, je vous ai dit que la balise <a> signifiait "ancre".

Bien qu'elle soit beaucoup plus souvent utilisée pour créer des hyperliens, nous sommes sur le point d'introduire une autre utilisation de cette balise HTML.

Que sont donc les ancres ?

Une ancre est un point de référence que vous placez quelque part sur votre page et qui permet à l'utilisateur d'accéder directement au contenu souhaité.

Considérez-le comme le troisième type de lien non officiel, un lien vers le contenu de la même page.

Les ancres sont utiles lorsque votre page est très longue et que vous souhaitez l'organiser de manière à permettre un accès rapide à l'utilisateur.

Pour créer une ancre, nous devons d'abord créer un point d'ancrage, et pour cela nous utiliserons l'attribut id.

Le point d'ancrage est la zone sur laquelle le visiteur atterrira une fois qu'il aura cliqué sur un lien spécifique de la page.

Vous pouvez placer l'attribut id où vous voulez : sur un <p> (paragraphe), sur un <ul> (liste) ou sur un <h2> (titre).

L'attribut id est un cas rare en HTML dans la mesure où il peut être placé sur n'importe quelle balise de votre choix. Si une balise HTML existe, vous pouvez être sûr qu'elle peut contenir un attribut id. La seule restriction est que deux balises ne peuvent pas partager le même identifiant. Ils doivent être uniques.

Dans notre exemple, nous utiliserons les balises de titre.

<h2 id="siteraw">Bienvenue sur SiteRaw</h2>

J'ai utilisé la valeur "siteraw" pour l'attribut id mais vous pouvez le changer en autre chose.

La seule règle est que chaque identifiant doit être unique.

Maintenant que nous avons créé notre point d'ancrage, il ne reste plus qu'à ajouter un lien vers celui-ci.

Ces liens d'ancrage sont identiques aux liens réguliers sauf que leur attribut href ne pointe pas vers une autre page mais vers l'id d'un point d'ancrage, précédé d'un caractère dièse (#).

Dans notre cas, cela nous donnerait ce qui suit.

<a href="#siteraw">Accéder au SiteRaw</a>

Placez simplement le lien n'importe où au-dessus de l'ancre et vous pouvez maintenant accéder directement au contenu de votre choix.

Ça ne marche pas ! Rien ne se passe lorsque je clique sur un lien :(

C'est parce que vous n'avez pas ajouté suffisamment de texte entre le lien et l'ancre.

Voici notre page de démonstration mise à jour avec des liens d'ancrage.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>
    <body>
        <h1>Welcome to SiteRaw</h1>
        <p>Discover why SiteRaw is:</p>
	<ul>
            <li><a href="#awesome">awesome</a></li>
            <li><a href="#amazing">amazing</a></li>
            <li><a href="#siteraw">SiteRaw</a></li>
        </ul>
        <!-- Remember lists? -->
        <h2 id="awesome">Why SiteRaw is awesome</h2>
        <p>[...]</p>
        <h2 id="amazing">Why SiteRaw is amazing</h2>
        <p>[...]</p>
        <h2 id="siteraw">Why SiteRaw is SiteRaw</h2>
        <p>[...]</p>
    </body>
</html>

Remplacez chaque instance de [...] par (beaucoup de) texte et vous devriez voir l'effet en action.

Vous devrez ajouter une quantité suffisante de contenu pour voir les barres de défilement verticales apparaître sur votre navigateur, donc selon la résolution de votre écran, vous aurez peut-être besoin de plus ou moins de texte. Généralement plus.
Alternativement, vous pouvez réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement.
Voici à quoi devrait ressembler votre éditeur de texte pour le moment.
Ancres sur une autre page
Comme nous l'avons vu, les ancres sont utiles pour naviguer rapidement vers une section spécifique d'une page Web.
Mais vous pouvez également les utiliser en conjonction avec des liens réguliers.
L'idée est d'avoir un lien qui ouvre une autre page et vous amène directement à une ancre sur cette nouvelle page.
Pour ce faire, entrez simplement le nom de la page de destination suivi du nom de l'ancre avec le caractère dièse (#) devant.
<a href="siteraw.html#siteraw">SiteRaw</a>
Ce lien vous mènera à la page siteraw.html et à l'ancre appelée siteraw.
Voici les trois types de liens que nous avons découverts dans ce chapitre :
Liens absolus qui pointent vers un autre site (simplification)
Liens relatifs qui pointent vers une page de notre site
Liens d'ancrage qui pointent vers un contenu spécifique sur une page Web
Puisque nous savons comment créer plusieurs pages et les relier entre elles, nous avons maintenant officiellement un site Web complet.
Mais ne vous inquiétez pas car il y a beaucoup plus à apprendre dans ce tutoriel.