Signaler ses liens externes

Classé dans : Web Mots clés : CSS, Web, Script, HTML, lien

Les liens externes font références aux liens d'une page web qui se trouve sur un autre site web.

La W3C en tant qu'organisme de standardisation du Web, et afin de rendre ses liens accessibles à tous, propose de les signaler. Il existe de nombreuses possibilités de les signaler. 

Nous exposons l'affichage d'un pictogramme.

Le code HTML est le suivant :

<a href="http://www.balisier148.com" class="externe" target="_blank" title="s'ouvre dans une nouvelle fenêtre">Balisier148 - Location Guadeloupe</a>

Accompagné de son code CSS :

a.externe:after {
  content: "\0000a0[\2197]";
}


Descriptions :

href="http://blog4me.fr/lien.fr" le lien sera compris entre les guillemets ("#").

class=" " fait appel au code CSS.

target="_blank" est une option qui permet d'ouvrir le lien dans un nouvel onglet.

title est utilisé ausi pour l'HTML, mais pour les liens et apporte une courte information au visiteur. 

:after est la classe qui permettra d'afficher l'icône de la flèche après le lien. (CSS).

:content est une propriété permettant de générer du texte automatiquement sans apparaître dans la page Web. Il est utilisé dans le code CSS .

\0000a0 et \2197 sont des caractères Unicode. Le premier est un espace et le second est le symbole d'une flèche Nord-Est. (CSS).

Le code nous donnera un pictogramme à la fin du lien, comme ceci : 


Remarques :

1- Le title n'est qu'un complément facultatif au contenu du lien.

2- Vous pouvez indiquer le lien externe par une image src="http://blog4me.fr/../image.png" et un alt="(lien externe)"

3- Le pictogramme en CSS étant une surcouche, il peut ne pas s'afficher dans certains navigateurs.

4- Le signaler en javascript mais, c'est aussi est une surcouche. Beaucoup de possibilités.

5- L'ajouter dans le contenu du CSS (:content). Ne fonctionne pas dans les anciens navigateurs.

6- Pour que cela fonctionne avec le CSS2 ou CSS3 :
/* CSS2 */
:after
ou
/* CSS3 */
::after

7- alt est utilisé dans le code HTML au cas où l'image serait indisponible. L'information du descriptif de l'image contenu dans alt resterait alors disponible. 
Ce n'est donc pas la bonne solution.

A PROPOS

  • Grace à mon expérience dans les Systèmes d'Information, j'ai le privilège de partager mon expérience en les centralisant sous la forme d’une base de connaissance.
  • Parfois certaines de nos questions ne trouvent pas toujours de réponse. Le domaine de l’informatique évolue rapidement, il est alors important de pouvoir profiter des solutions déjà expérimentés.
  • Ce site sera de plus en plus accessible.
  • Je vous remercie d’avance pour vos éventuelles remarques constructives permettant son amélioration.

Écrire un commentaire

 Se rappeler de moi sur ce site
Quelle est la deuxième lettre du mot hnmt ?

Fil RSS des commentaires de cet article

↓