Aller au contenu

Comment définir vos liens avec HTML5

Apprenez toutes les spécificités de la balises HTML5 link.

Les liens sont une composante essentielle sur les sites web !

Tout est dans le cours vidéos ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment définir vos liens avec HTML5

Bonjour à tous et bienvenu sur Développement Facile.

Encore un cours consacré à HTML 5 ne vous inquiétez pas il y aura d’autres cours consacrés à CS3, ils arrivent juste après, dans les prochaines semaines. Donc là, vous allez apprendre à utiliser les liens avec HTML 5.

L’ajout d’un lien

Donc les nouvelles possibilités en tout cas, à créer des liens avec HTML 5. Pour définir un liens il suffit d’utiliser la balise a et après vous avez des attributs à mettre dans cette balise, vous avez l’attribut href qui définit l’URL donc cible du liens donc la page du site Internet que vous ciblée, ou le fichier que vous ciblez avec le lien,
hreflang très rarement utilisé, mais vous pouvez l’utiliser, il définit la langue du document cible, si celle-là est différente du document de départ c’est dire si vous avez définit votre document HTML 5 en français, pas besoin d’utiliser la balise hreflang si vous renvoyez toujours sur des sites français, par comme si vous renvoyez du site sur un site avec un contenu en anglais, vous utilisez cet attribut-là, hreflang pour spécifier En, pour dire que c’est l’URL de destination est en anglais.
ping ça contient l’URL séparée par un espace qui reçoive une notification lorsque l’utilisateur clique sur le lien, donc ping il s’avère que les blogs de type WordPress les utilises dans leurs liens, c’est les ping que vous voyez lorsque lorsque des internautes font référence à votre article.
Donc vous haver un exemple de création de liens href page.htm, donc là on renvoi sur une page du site Internet, ping par contre on informe un autre site Internet que l’utilisateur a cliqué sur le lien Dev Facile, donc le navigateur justement envoi une requête POST à l’URL spécifiée dans l’attribut et c’est très utile, comme je vous l’ai dit, pour les données analytiques d’un site internet, comme ça vous savez quels sont les sites Internet qui pointent vers votre article, vers votre page HTML.

Vous avez également l’attribut rel qui définit la relation entre le document de départ et le fichier ou le document, ciblé par les liens donc vous avez différentes valeurs comme alternate, archives, author, bookmark, contact, etc., je vous en ai listé quelques-uns il y en a d’autres, et target vous allez l’utiliser très souvent, ça défini la façon d’ouvrir la cible du liens, soit vous ouvrez lorsque l’utilisateur il clique sur le liens, soit ça ouvre le liens dans une nouvelle fenêtre, dans un nouvel onglet du navigateur, ou soit ça ouvre le lien dans la même fenêtre du navigateur, donc dans la même fenêtre vous utilisez target sell, vous mettez la valeur sell dans l’attribut target, dans une nouvelle fenêtre du navigateur, ou un nouvel onglet vous mettez target blanck, la valeur _blanck, et type ça va indiquer au navigateur le type mime de la cible. Par exemple si ce n’est pas un document HTML 5, vous allez utiliser cet attribut type pour dire, afficher son, afficher image, afficher PDF, ou un autre type de fichier, donc très pratique également.

Lien vers une page

Pour faire un lien vers une page située dans le même dossier dans href vous mettez accueil, vous avez votre arborescence avec un dossier avec toutes les pages HTML, ou PHP il suffit de l’appeler directement accueil.htm, fermer la balise a, vous mettez accueil donc l’intitulé de votre liens que l’internaute va voir et vous fermez la balise a. Si vous faites un lien vers une page située dans un autre dossier, donc vous avez votre dossier avec accueil, contact.htm, et vous avez un autre dossier, dans l’exemple c’est un dossier fichier, dans ce dossier fichier vous avez d’autres documents HTML, voici un exemple fichier le dossier à l’intérieur du dossier et HTML.htm.html comme vous voulez pour l’extension, avec l’intitulée télécharger, et pour remonter dans l’arborescence vous utilisez../, vous avez votre répertoire ici, accueil.htm, le répertoire fichier avec liste.htm et vous voulez remonter à contact, sortir de ce répertoire, vous faites ../ vous êtes en dehors du répertoire, dans le répertoire au-dessus et vous récupérez contact.html et donc vous l’intitulé du liens c’est nous contacter.

Les liens dans une page

Vous pouvez mettre des liens dans une page, déclarer une ancre, vous l’avez sûrement vu dans des sites Internet, vous avez une icône avec une flèche qui remonte vers le haut et le lien c’est remonter en haut, ça sa s’appelle une ancre, donc vous pouvez définir des ancres dans vos liens pour accéder rapidement à, par exemple tout en haut de votre document HTML, ou au milieu, un certain endroit de votre document HTML.

Voici un exemple d’ancre, par exemple dans la balise body vous avez, on a mis id = o, on défini un identifiant à o, vous mettez plusieurs paragraphes, ça fait une page très longue que l’utilisateur fait défiler, et à la fin vous mettez un lien href, vous définissez une ancre donc égale #o, l’intitulé remonté en haut, quand l’utilisateur, l’internaute va cliquer sur remonter en haut, ça remonte la page HTML jusqu’à l’id o de la balise body donc l’utilisateur va voir l’affichage du premier paragraphe avec beaucoup de texte. Donc très pratique les ancres en HTML.

Les liens dans une page vous pouvez définir un lien dans un lien vers une ancre située dans une autre page donc, soit vous ciblez une autre page de votre site Internet avec une ancre, soit vous pouvez cibler un autre domaine, donc une page d’un autre domaine, d’un autre site internet toujours avec une ancre, c’est très simple vous mettez l’URL de votre page, donc soit sur un autre domaine, soit sur le même domaine, donc page1.htm#ancre et automatiquement quand la page HTML va s’afficher sur le navigateur de votre internaute ça va la faire dérouler jusqu’à l’ancre que vous avez renseignée, il faut savoir que les ancres c’est très utilisée pour amener l’utilisateur directement à l’endroit où on le souhaite, ou il a demandé lui, c’est utilisé dans les forums, dans les blogs.

Les liens vers un autre site

Là je vous ai mis un exemple de liens href qui pointe vers un autre site Internet, donc soit vous pouvez pointer sur l’adresse direct du site internet, donc dev facile.com ou Google.fr, ou alors sur une page spécifique, vous mettez le nom domaine dev facile.com/Contact.htm, donc c’est l’utilisation des liens et vraiment simple.

Les liens vers une adresse mail

Vous pouvez mettre des liens qui pointent vers une adresse mail également, qu’est-ce ça fait ?
Dans href vous mettez le lien mail to : l’adresse mail de l’utilisateur, et donc qu’est-ce que ça va faire ? Quand l’utilisateur va cliquer sur ce lien, ça va ouvrir son client mail, ça peut ouvrir Outlook Express, Thunderbird, ou un autre logiciel, en tout cas ça va ouvrir le logiciel de mail que l’utilisateur utilise sur son ordinateur. Donc vous pouvez rajouter un objet automatique aux mails, vous faites dans href mail to l’adresse mail du destinataire ? subject = formation HTML 5, quand l’utilisateur va cliquer sur nous contacter ça ouvrir Thunderbird avec le mail, le destinataire déjà rempli, renseigné, et le sujet du mail déjà renseigné, vous pouvez également définir une copie du message, donc après l’adresse mail vous faites ! CC (copie cachée) et l’adresse mail en destination de la copie cachée, et vous pouvez combiner les possibilités mail to, l’adresse mail du destinataire, ? le sujet du mail, donc subject = sujet du mail, & CC avec l’adresse mail de la copie cachée. Donc vous voyez vous avez une multitude de possibilités avec les liens.

Les liens vers un fichier

Vous pouvez bien évidemment faire des liens vers un fichier donc il suffit de renseigner si le fichier est dans le même répertoire formation.pdf, donc les liens vers un fichier ça fonctionne exactement comme l’affichage d’une page HTML, d’une page PHP, par exemple, soit vous mettez le nom du fichier directement si il est dans le même répertoire, vous pouvez remonter le répertoire, allez dans un autre répertoire pour rechercher le fichier, ou vous pouvez pointer sur un fichier dans un autre domaine, vous mettez http le nom de domaine, donc dev facile.com/formation.pdf quand l’utilisateur va cliquer sur l’intitulé télécharger le PDF, donc ça va directement chercher le fichier PDF sur le site Internet que vous avez donné.

Les différents types de liens

Vous avez différents types de liens, comme je vous l’ai dit, les pages ciblées elles peuvent s’ouvrir soit dans la même page, soit dans une autre page, soit vous avez target top, c’est la page cible du lien est affichée dans la même fenêtre et occupe toute la fenêtre d’affichage, blank le lien ciblé s’ouvre dans une nouvelle fenêtre du navigateur ou un nouvel onglet, le lien ciblé s’ouvre dans la même fenêtre.

Je vais très vite parce que c’est très simple à assimilé, tout en sachant que vous avez un code source sous cette vidéo, ça ne posera pas de problème. Donc là je vous ai mis un exemple de code source, ça va ouvrir le lien page2.htm, dans une nouvelle page ou un nouvel onglet suivant le navigateur que vous utilisez.

Votre plan d’actions !

Vous pouvez déjà utiliser toutes les possibilités des liens dans votre page web, je vous ai mis le panel de fonctionnalités des liens avec les différents attributs, plusieurs exemples de code source, comment les utiliser, sous ce cours vidéo vous pourrez télécharger un exemple de code source, si vous avez encore des questions posez-les directement sous cette vidéo. Je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source HTML5

Voici un exemple de code source HTML5 avec les liens.

Téléchargement du code source La balise link avec HTML5

Cliquez ici pour télécharger le code source La balise link avec HTML5

Quelles fonctionnalités link utilisez-vous le plus souvent ?

Partagez, dans les commentaires, votre code avec les fonctionnalités link que vous utilisez régulièrement.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>