8 - Gestion des liens en HTML

⏪

⏬

⏩

1 - liens externes

2 - Lien interne

3 - Css

4 - autres

Cette page est un vieux truc que je n'ai pas encore intégré réellement au site actuel.

Vous savez maintenant faire beaucoup de choses. Mais il reste encore beaucoup à faire pour réaliser un site capable d'afficher des informations reliées entre elles :

Les liens externes vers les autres pages
Les liens internes sur la page elle-même

Logiciel nécessaire pour l'activité : Atom ou Notepad++ (Windows) ou Notepaddd (Linux)

MODE COURS (cacher les questions)

1 - Créer des liens externes à la page

⇩ ⇧ ⤊

Pour créer un lien hypertexte (actuellement un texte sur lequel on peut cliquer pour activer le lien), on utilise la balise <a>. Néanmoins, elle est plus délicate à manipuler que la plupart des autres balises : il faut renseigner la destination, le texte à afficher, la façon d'ouvrir le lien...

Un lien est un moyen d’accéder à un autre endroit :

Soit une autre page sur le même site (lien externe à la page).
Soit une autre page ailleurs sur le Web (lien externe au site).
Soit un autre paragraphe sur la même page (lien interne à la page).
Soit un envoi email (lien vers un autre logiciel de traitement).

Commençons par décrire la façon de créer un lien externe.

Balise a de lien hypertexte

La balise <a> possède plusieurs attributs. On n'écrit jamais juste <a> !

Transmission de l'adresse à atteindre

On doit lui spécifier au moins l'attribut href qui permet de définir l’adresse du lien.

Par exemple, pour atteindre l'activité que vous êtes en train de réaliser, il suffit d'aller lire l'adresse dans la barre du navigateur et de la recopier :

`1`	`<a href="https://www.infoforall.fr/act/html-css/gestion-des-liens-en-html"></a>`

Transmission de l'affichage du lien

Le texte contenu entre la balise d'ouverture <a> et de fermeture </a> définit ce qui sera affiché comme texte-lien. Par exemple, le texte suivant (qui par défaut apparait en bleu souligné sur la majorité des navigateurs) : Ici pour retourner à l'accueil

Voilà le code utilisé pour réaliser le lien ci-dessus :

`1`	`<a href="https://www.infoforall.fr/">Ici pour retourner à l'accueil</a>`

La balise a est une balise inline

On remarquera que la balise <a> n'est pas une balise block : on ne passe pas à la ligne.
Il s'agit d'une balise inline qui ne déclenche donc aucun passage à la ligne.

Si vous voulez que votre lien soit sur une ligne indépendante, il faut donc le placer à l'intérieur d'une balise block (<p> par exemple).

`1`	`<p><a href="https://www.infoforall.fr/">Ici pour retourner à l'accueil</a></p>`

Pourquoi a ? a comme anchor ou ancre.

Passons à l'exercice pratique : voici la structure de trois pages légérement différentes l'une de l'autre.

<!DOCTYPE html>
<html lang="fr">
 
    <head>
        <meta charset="UTF-8" />
        <title>TEST DES LIENS</title>
        <link rel="stylesheet" href="style_1.css" />
    </head>
 
    <body>
        <nav>
        </nav>
        <main>
            <h1>Voici la page 1</h1>
        </main>
    </body>
 
</html>

<!DOCTYPE html>
<html lang="fr">
 
    <head>
        <meta charset="UTF-8" />
        <title>TEST DES LIENS</title>
        <link rel="stylesheet" href="style_1.css" />
    </head>
 
    <body>
        <nav>
        </nav>
        <main>
            <h1>Voici la page 2</h1>
        </main>
    </body>
 
</html>

<!DOCTYPE html>
<html lang="fr">
 
    <head>
        <meta charset="UTF-8" />
        <title>TEST DES LIENS</title>
        <link rel="stylesheet" href="style_1.css" />
    </head>
 
    <body>
        <nav>
        </nav>
        <main>
            <h1>Voici la page 3</h1>
        </main>
    </body>
 
</html>

01° Dans l'un de vos dossiers de travail, créer le dossier et le sous-dossier comme présenté ci-dessous. Créer les trois pages HTML nommées page_1.html, page_2.html, et page_3.html à l'aide des trois codes ci-dessus.

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

Sauvegardez bien les pages dans le même dossier pages_test. C'est important pour la localisation de vos pages via les liens.

02° Créer maintenant des liens permettant d'atteindre les trois autres pages depuis chacune des pages. Il faudra par exemple placer les liens suivants dans la balise <nav>.


<p><a href="page_1.html">PAGE 1</a></p>
<p><a href="page_2.html">PAGE 2</a></p>
<p><a href="page_3.html">PAGE 3</a></p>

Correction ?

...CORRECTION...

Voici le code de la page 1. Pour la page 2 et 3, on a la même chose en corrigeant la ligne 17 pour afficher le bon numéro de la page.

<!DOCTYPE html>
<html lang="fr">
 
    <head>
        <meta charset="UTF-8" />
        <title>TEST DES LIENS</title>
        <link rel="stylesheet" href="style_1.css" />
    </head>
 
    <body>
        <nav>
            <p><a href="page_1.html">PAGE 1</a></p>
            <p><a href="page_2.html">PAGE 2</a></p>
            <p><a href="page_3.html">PAGE 3</a></p>
        </nav>
        <main>
            <h1>Voici la page 1</h1>
        </main>
    </body>
 
</html>

Normalement, cela marche sans aucun problème en donnant juste le nom du fichier de la page à atteindre. Pourquoi ? Tout simplement car on donne un chemin relatif à la position de la page qui contient le lien.

Chemin relatif - Cas des fichiers placés dans un même dossier

Si vous êtes sur la page page_1.html et que le lien fourni dans l'attribut href indique simplement href="page_2.html" sans plus d'indication, il va chercher si un fichier html portant ce nom se trouve dans le même dossier que celui de la page qui tente de créer le lien : page_1.html.

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

Ici, il existe bien un document page_2.html dans le même dossier que page_1.html.

Compliquons les choses : nous voudrions créer une quatrième nommée page_4.html qui se trouvera dans un sous-sous dossier qu'on nommera encore_plus_loin.

03° Créer le fichier page_4.html au bon endroit (c'est à dire dans le dossier encore_plus_loin). Il faudra le rendre différent des trois autres. Un simple 4 affiché peut suffire.

Voilà la structure des enregistrements :

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

📁 encore_plus_loin

📄 page_4.html

04° Rajouter les liens entre les quatre pages.

Normalement, cela ne fonctionne pas pour la page 4. Pourquoi ?

Correction ?

...CORRECTION...

Simplement parce que le fichier page_4.html ne se situe pas au même endroit que les trois autres. Ainsi, si on cherche page_4.html dans le dossier pages_test, on ne le trouve pas.

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

📁 encore_plus_loin

De la même façon, lorsqu'on est sur la page page_4.html, on ne parvient pas à trouver page_1.html, page_2.html et page_3.html puisqu'on cherche dans le dossier encore_plus_loin.

📁 encore_plus_loin

📄 page_4.html

Il faut falloir indiquer le chemin à suivre pour retrouver page_4.html, à savoir aller dans le sous-répertoire encore_plus_loin.

Il faut écrire le lien en rajoutant l'accès relatif.

Chemin relatif - Cas des fichiers placés dans des dossiers différents

Un chemin est dit chemin relatif lorsque son point de départ est le fichier actuel, celui dans lequel on fournit le chemin.

📁 test_liens

📁 pages_test

📄 page_1.html

📄 page_2.html

📄 page_3.html

📁 encore_plus_loin

📄 page_4.html

Si on fournit une adresse relative dans le fichier page_1.html, on part de pages_test.

Si on fournit une adresse relative dans le fichier page_4.html, on part de encore_plus_loin.

Atteindre un fichier situé dans un sous-dossier

Il suffit de fournir le chemin à suivre, en utilisant des slashs après chaque nom de dossier.

Ainsi, pour atteindre page_4.html situé dans encore_plus_loin à partir d'un lien fourni dans page_1.html, il faut indiquer ceci :

`1`	`<a href="encore_plus_loin/page_4.html">Vers la page 4</a>`

Cela veut donc dire :

Partant du dossier pages_test (car le lien est dans le code de page_1.html)
Aller dans le dossier encore_plus_loin
Et tenter d'y trouver le fichier page_4.html

Atteindre un fichier situé hors du dossier actuel

Si on part d'un lien fourni dans html_4.html, on ne doit pas descendre dans les dossiers pour atteindre les autres fichiers html. Au contraire, il faut remonter.

Pour signaler qu'on doit remonter l'arborescence, il faut simplement noter .. puis un slash / et ensuite la suite du chemin ou le fichier à trouver.

Par exemple, pour trouver page_1.html à partir d'un lien donné dans page_4.html, il faut écrire ceci :

`1`	`<a href="../page_1.html">Vers la page 1</a>`

Cela veut dire :

Partant du dossier encore_plus_loin (car c'est le dossier de page_4.html)
Remonter dans le dossier supérieur ou dossier parent
Et tenter d'y trouver le fichier page_1.html

05° Finaliser les quatre pages pour que les liens fonctionnent.

Correction ?

...CORRECTION...

Exemple de code pour le fichier page_1.html :

<!DOCTYPE html>
<html lang="fr">
 
    <head>
        <meta charset="UTF-8" />
        <title>TEST DES LIENS</title>
        <link rel="stylesheet" href="style_1.css" />
    </head>
 
    <body>
        <nav>
            <p><a href="page_1.html">PAGE 1</a></p>
            <p><a href="page_2.html">PAGE 2</a></p>
            <p><a href="page_3.html">PAGE 3</a></p>
            <p><a href="encore_plus_loin/page_4.html">PAGE 4</a></p>
        </nav>
        <main>
            <h1>Voici la page 1</h1>
        </main>
    </body>
</html>

Exemple de code pour le fichier page_4.html :

<!DOCTYPE html>
<html lang="fr">
 
    <head>
        <meta charset="UTF-8" />
        <title>TEST DES LIENS</title>
        <link rel="stylesheet" href="style_1.css" />
    </head>
 
    <body>
        <nav>
            <p><a href="../page_1.html">PAGE 1</a></p>
            <p><a href="../page_2.html">PAGE 2</a></p>
            <p><a href="../page_3.html">PAGE 3</a></p>
            <p><a href="page_4.html">PAGE 4</a></p>
        </nav>
        <main>
            <h1>Voici la page 4</h1>
        </main>
    </body>
</html>

Et si on décide de changer le nom d'un fichier html, il faut changer son nom dans toutes les pages ? Oui. Et ça peut être long.

Pour l'instant, vous n'avez pas la possibilité de créer un menu générique dont on donnerait le code à un endroit. Ce serait plus simple : il suffirait de modifier ce code pour modifier toutes les pages (un peu comme avec le CSS). Il faut pour cela utiliser un langage de progammation générant automatiquement la page html à envoyer à l'utilisateur. Or, pour l'instant, vous savez coder vous même la page, pas le faire écrire par un autre programme.

Comment faire alors ?

C'est là qu'intervient l'une des fonctionnalités importantes d'un bon éditeur de code : la recherche et le remplacement automatique d'un ensemble de caractères par un autre ensemble.

Dans Notepad++ ou Notepadqq :

Aller dans le menu RECHERCHE puis REMPLACER.

En choisissant l'onglet Rechercher dans les fichiers d'un dossier ET en choisissant correctement le dossier à traiter et en sélectionnant sous-dossier, vous pouvez alors modifier (dans tous les fichiers du répertoire sélectionné) automatiquement une chaîne de caractères pour la remplacer pour une autre.

Avec Atom, il faut :

appuyer sur Alt de façon à afficher le menu.
Dans le menu Find, vous trouverez deux fonction de recherche : Find in Buffer vous permet de chercher une séquence de mots dans le fichier actuel et Find in Project vous permet de chercher cette séquence dans tous les fichiers contenus dans un dossier et ses sous-dossiers.

Puissant mais dangereux parfois. Pensez toujours à vous demander si d'autres choses ne risquent pas d'être modifiées au passage avant d'appuyer sur OK...

06° Modifier le nom de page_4.html par nouveau_nom.htmldans tous les fichiers. Modifier ensuite manuellement le nom du fichier (avec un clic-droit et renommer) pour qu'il ai le bon nom. Relancer vos pages et, normalement, tout devrait encore fonctionner.

Voilà. Nous avons vu l'adresse relative d'un fichier.

Il existe également une adresse absolue.

Voici comment accéder en lien à une ressource locale avec Windows puis sur un système Unix (comme Linux par exemple). Voyez le cas qui vous intéresse.

Adresse absolue vers une ressource locale sur Windows

Cela revient à donner l'adresse exacte de la position d'un fichier sur le disque dur ou sur Internet. En précisant éventuellement le protocole utilisé pour joindre la ressource.

Si la page 3 est stockée sur ma clé USB et que je ne désire y accéder uniquement en local (c'est à dire sans passer par le réseau ou Internet), j'aurais pu créer un lien vers la page 3 à l'aide de :

`1`	`<a href="file:///G:/informatique/html/documents_ICN/test_liens/pages_test/page_3.html">Vers la page 3</a>`

On remarque donc qu'on commence par donner le protocole à utiliser : on veut accéder à un fichier localement accessible sur la machine avec le protocole file. On fait suivre le nom du protocole par ://.

`1`	`<a href="file:///G:/informatique/html/documents_ICN/test_liens/pages_test/page_3.html">Vers la page 3</a>`

Pour signaler ensuite qu'on va donner une adresse absolue, on doit rajouter un autre slash /. Ici l'exemple est donné avec un système Windows dans lequel on doit d'abord donner le nom du répertoire de travail (G:) qui n'est pas géré comme un dossier normal. Sous windows, on devra donc par exemple noter /G: pour indiquer d'accéder à une ressource locale située dans le répertoire G.

`1`	`<a href="file:///G:/informatique/html/documents_ICN/test_liens/pages_test/page_3.html">Vers la page 3</a>`

Ensuite, on peut fournir la suite de l'adresse : la suite de dossier à parcourir pour atteindre la ressource.

`1`	`<a href="file:///G:/informatique/html/documents_ICN/test_liens/pages_test/page_3.html">Vers la page 3</a>`

Enfin, il reste à donner le nom de la ressource qu'on devrait trouver dans le dossier final :

`1`	`<a href="file:///G:/informatique/html/documents_ICN/test_liens/pages_test/page_3.html">Vers la page 3</a>`

Adresse absolue vers une ressource locale sur Unix

Cela revient à donner l'adresse exacte de la position d'un fichier sur le disque dur ou sur Internet. En précisant éventuellement le protocole utilisé pour joindre la ressource.

`1`	`<a href="file:///media/rv/9A3C-FD98/documents_ICN/index.html">Vers la page 3</a>`

`1`	`<a href="file:///media/rv/9A3C-FD98/documents_ICN/index.html">Vers la page 3</a>`

Pour signaler ensuite qu'on va donner une adresse absolue, on doit rajouter un autre slash /.

Je donne donc ici l'adresse absolue depuis un poste sur lequel la clé 9A3C-FD98 est branchée, montée pour l'utilisateur rv.

`1`	`<a href="file:///media/rv/9A3C-FD98/documents_ICN/index.html">Vers la page 3</a>`

Enfin, il reste à donner le nom de la ressource qu'on devrait trouver dans la clé :

`1`	`<a href="file:///media/rv/9A3C-FD98/documents_ICN/index.html">Vers la page 3</a>`

Attention, il s'agit d'un lien sur la machine de l'utilisateur qui va cliquer sur le lien. C'est pour cela que cet adressage ne permet que d'accéder aux ressources de l'utilisateur lui-même. Il ne faut donc créer ce type de lien que lorsque vous voulez vous créer une page pour accéder plus facilement aux fichiers contenus sur votre ordinateur, sans avoir besoin d'ouvrir les dosssiers, de retrouver les fichiers...

Dans le cadre d'un vrai site hébergé, il faudra simplement placé vos fichiers dans un dossier accessible depuis l'extérieur, souvent nommé www !

Ce type de lien ne vous permet pas de fournir un accés à un fichier sur un site stockée sur Internet.

Je le présente juste pour vous montrer qu'il existe d'autres protocoles de communication et de transfert que http ou https.

On peut donner des liens vers des sites exterieurs au votre à l'aide d'adresse absolue qui correspondent à leur adresse internet.

Adresse absolue sur le Web

Dans 99% des cas, c'est ainsi que vous pourrez voir les liens :

<a href="http://www.w3schools.com/default.asp">Vers le site w3schools.com</a>

Ce qui donne :

Vers le site w3schools.com

On voit que l'adresse fournie est composée de plusieurs parties :

Le protocole : on explique dans quelle langue on parle.
Ici http://

http: : on commence par signaler le protocole qu'on désire utiliser pour communiquer avec le serveur HTTP. On doit faire suivre le nom du protocole par le caractère « deux points » : pour signaler qu'on a fini de transmettre le nom du protocole.
// signale que notre protocole nécessite qu'on fournisse une adresse (ici un serveur HTTP) et que nous allons le transmettre juste après.

L'adresse éventuelle du service à joindre: on explique à qui on veut parler.
Ici www.w3schools.com

www.w3schools.com : cette partie identifie clairement le serveur du site sur lequel on doit se connecter.

La requête au service pour atteindre la ressource : on explique la ressource qu'on veut obtenir à service précédent.
Ici /cssref/default.asp

Une adresse commençant par / veut dire que l'adresse qui suit est une adresse absolue sur le site : on va donner un chemin partant du « début », la racine du site.
Cette adresse peut être omise : si on ne fournit rien derrière le nom du site, cela veut donc dire qu'on désire simplement la page d'accueil.

07° Créer un ou deux liens vers d'autres sites pour l'exemple.

Pour ouvrir un nouvel onglet dans le navigateur : il suffit de rajouter l'attribut target="_blank" dans la balise a à côté du href.

<a href="http://www.w3schools.com/css/" target="_blank">Vers le site w3schools.com</a>

Ce qui donne : Vers le site w3schools.com

Pour rajouter un descriptif du lien lorsqu'on le survole : il suffit de rajouter l'attribut title="Attention, on ouvre un nouvel onglet !" dans la balise a à côté du href.

<a href="http://www.w3schools.com/css/" target="_blank" title="Attention, on ouvre un nouvel onglet !">Vers le site w3schools.com</a>

Ce qui donne : Vers le site w3schools.com

2 - Créer des liens internes

⇩ ⇧ ⤊

Vous l'avez bien vu,les pages sont parfois longues, longues. Retrouvez la bonne partie n'est pas très facile. Il a un moyen de permettre à l'utilisateur de passer de partie en partie ou de remonter en haut : le lien interne.

On utilise encore une fois la balise a mais un peu différemment.

Premièrement, il faut créer un identificateur id dans la balise sur laquelle vous désirez faire pointer le lien.

Nous allons reprendre votre essai de site de la partie précédente pour avoir du contenu (ou aller chercher le code source d'une page de ce site, la plupart des pages sont longues).

Pour l'exemple, je prends la balise du premier titre de la page ici présente dont le code est :

<h2>1 - Créer des liens externes à la page</h2>

Je rajoute un identificateur avec l'attribut id , la valeur étant un nom explicite pour la personne qui va relire votre code

<h2 id="partie_01">1 - Créer des liens externes à la page</h2>

On peut maintenant créer des liens qui vont pointer vers cette balise en utilisant la bonne valeur d'identificateur précédé d'un dièse #.

<a href="#partie_01">Vers la partie 1</a>

Ce qui donne : Vers la partie 1

Si on identifie le header avec <header id="en_haut"> , on pourra repartir en haut de page avec <a href="#en_haut">Vers la partie 1</a>.

Ce qui donne : Haut

08° Rajouter un lien en bas de page pour remonter en haut.

Cela fonctionne même vers une autre page : imaginons que je désire pointer vers la partie 1 de l'activité qui traite de la creation d'un menu de navigation.

<a href="/act/html-css/premier-contact-avec-les-balises/#partie_1">Haut</a>

Ce qui donne : Retour vers la création graphique d'un menu de navigation

3 - Gestion des liens en CSS et menu de navigation

⇩ ⇧ ⤊

Tentons maintenant de finaliser les menus de navigation. Nous avions réussi à le rendre joli, mais il ne fonctionnait pas...

Pour le code HTML, nous avions

<nav>
    <p class="essai_bouton6">ACCUEIL</p>
    <p class="essai_bouton6">OUI</p>
    <p class="essai_bouton6">NON</p>
    <p class="essai_bouton6">M'ENFIN !</p>
</nav>

Pour le CSS

nav {
    width : 600px;
    height : 600px;
    margin:auto;
    background-color:#4a829f;
}
 
.essai_bouton6 {
    margin-left: 40px;
    margin-right: 40px;
    background-color:#91a0e1;
    margin-top : 5px;
    margin-bottom : 5px;
    padding: 20px;
    border-radius: 12px;
}
 
.essai_bouton6:hover { background-color:#FFF168; }

Nous allons maintenant remplacer les balises p par des balises a avec les liens vers les pages 1,2,3 et 4.

Pour le code HTML, nous allons donc utiliser :

<nav>
    <a href="page_1.html">ACCUEIL</a>
    <a href="page_2.html">OUI</a>
    <a href="page_3.html">NON</a>
    <a href="encore_plus_loin/page_4.html">M'ENFIN !</a>
</nav>

J'ai supprimé la class essai_bouton6 des balises a car, en fait, nous désirons modifier toutes les balises a contenues dans nav, non ?

Il suffit donc de créer un code CSS modifiant toutes les balises a contenues dans nav, avec simplement nav a.

nav {
    width :600px;
    height : 600px;
    margin:auto;
    background-color:#4a829f;
}
 
nav a {
    margin-left: 40px;
    margin-right: 40px;
    background-color:#91a0e1;
    margin-top : 5px;
    margin-bottom : 5px;
    padding: 20px;
    border-radius: 12px;
}
 
nav a:hover { background-color:#FFF168; }

09° Effectuez les modifications sur la page 1 de nos pages de test et observer le résultat.

Si nous testons ici, nous obtenons :

ACCUEIL OUI NON M'ENFIN !

Original mais pas très pratique vous en conviendrez...

Pourquoi tant de haine ? Simplement à cause de la différence de nature entre de la balise a (c'est une balise inline : pas de passage à la ligne à la fermeture), et la balise p (qui est une balise block : passage automatique à la ligne à la fermeture).

Le plus simple, c'est donc de lui dire de devenir une balise block. Et ça tombe bien, CSS sait faire ça à l'aide de la propriété display qui peut avoir comme valeur block (valeur par défaut des balises p ou h) ou inline (valeur par défaut des balises a).

nav {
    width : 600px;
    height : 600px;
    margin:auto;
    background-color:#4a829f;
}
 
nav a {
    display: block;
    margin-left: 40px;
    margin-right: 40px;
    background-color:#91a0e1;
    margin-top : 5px;
    margin-bottom : 5px;
    padding: 20px;
    border-radius: 12px;
}
 
nav a:hover { background-color:#FFF168; }

10° Nouveau test avec cette (importante) modification.

Et on obtient :

ACCUEIL OUI NON M'ENFIN !

C'est beaucoup mieux non ?

Il reste à gérer le problème (éventuel, à vous de voir) du surlignage automatique du texte dans les balises a et le changement de couleur lorsque le lien est visité.

Je vous laisse trouver la propriété CSS pour forcer la couleur et celle pour revenir à un texte non souligné.

11° Effectuer les deux dernières modifications pour obtenir le visuel ci-dessous.

ACCUEIL OUI NON M'ENFIN !

Correction ?

...CORRECTION...

nav a {
    display: block;
    margin-left: 40px;
    margin-right: 40px;
    background-color:#91a0e1;
    margin-top : 5px;
    margin-bottom : 5px;
    padding: 20px;
    border-radius: 12px;
    color: black;
    text-decoration: none;
}

Etats du lien : Il existe 4 états pour un lien en balise a. Vous connaissez déjà le premier, c'est l'état hover, qu'on peut définir en CSS avec a:hover.

Mais il existe également

Un état lien non visité : a:link
Un état lien visité : a:visited
Un état lien sur lequel on clique : a:active

Si vous désirez changer la couleur du texte du lien en fonction des conditions vous savez comment faire maintenant. Normalement, nous avons utilisé le CSS avec une sélection de type nav a {..} et donc vous avez modifié tous les cas à la fois.

Voici la correction au cas où :

nav {
    width : 600px;
    height : 600px;
    margin:auto;
    background-color:#4a829f;
}
 
nav a {
    display: block;
    margin-left: 40px;
    margin-right: 40px;
    background-color:#91a0e1;
    margin-top : 5px;
    margin-bottom : 5px;
    padding: 20px;
    border-radius: 12px;
    color: black;
    text-decoration: none;
}
 
nav a:hover { background-color:#FFF168; }

4 - Les autres types de lien

⇩ ⇧ ⤊

Nous irons vite ici, c'est purement utilitaire.

Pour envoyer un email, il suffit d’adapter la valeur de href :

&#x2709; <a href="mailto:votrenom@provider.com">Envoyez-moi un e-mail !</a>

Ca donne : ✉ Envoyez-moi un e-mail !

Attention néanmoins à cette façon de se faire contacter : ne laissez pas trainer votre adresse : les robots en ramassent beaucoup et on finit par se faire spammer de façon assez massive.

Attention, l'icone est à rajouter en plus, ça ne se fait pas automatiquement.

Dernier point : pour créer un lien vers un fichier à télécharger, il suffit de préciser dans href l’adresse du fichier à télécharger.

Au niveau du code :


<a href="monfichier.zip">Télécharger le fichier</a>

Télécharger le fichier

Activité publiée le 08 09 2019
Dernière modification : 17 09 2019
Auteur : ows. h.

⏪

⏫

⏩