lier une Image en HTML: comment créer des liens à partir d’images

Nous allons jeter un regard amical débutant sur la façon de créer des liens d’image sur votre site web.

nous examinerons quelles balises HTML vous devez utiliser dans le code.

Si vous ne l’avez jamais fait avant, ne vous inquiétez pas! Je vais vous guider à travers l’ensemble du processus.

à la fin de cet article, vous allez créer des liens d’image sur votre page web et sur Internet.,

Nous allons aussi regarder certaines techniques plus avancées vers la fin de l’article si vous vous sentez courageux.

prenez un café, laissez-vous plonger!

Comment Créer un lien Hypertexte?

Pour obtenir des liens sur votre page d’accueil, vous devez créer un lien hypertexte. Pour ce faire en HTML, vous devez utiliser une balise<a>. Chaque balise<a> comporte deux parties, la balise d’ouverture et la balise de fermeture.,

Voici un exemple:

<a href="..."> ...</a>

ci-dessus, vous pouvez voir que la balise d’ouverture:

<a href="...">

Crée le début de l’hyperlien. Ensuite, nous fermons la balise avec:

</a>

tout texte que nous écrivons entre la balise open et close est votre texte de lien. Par Exemple:

<a href="..."> My Great Link</a>

Pour en faire un lien, nous avons besoin d’ajouter une URL. Pour ce faire, nous ajoutons L’URL à l’attribut href., L’URL peut pointer vers n’importe où sur internet. Pour cet exemple, nous allons utiliser la PageDart page d’accueil:

<a href="https://pagedart.com"> My Great Link</a>

assurez-vous d’inclure l’URL complète avec HTTPS à l’avant.

C’est tout ce qu’il y a pour créer un lien texte uniquement en HTML. Ensuite, regardons comment nous pouvons ajouter une image à une page Web en utilisant HTML.

comment créer une image en HTML?

pour ajouter une image à votre page Web, utilisez une balise img.,

cette balise est un peu différente d’unea en ce qu’elle n’a pas de balise d’ouverture et de fermeture.

pour créer une baliseimg, vous devez lui attribuer un fichier source. Utiliser la balise src attribut pour ce faire:

<img src="https://pagedart.com/favicon-32x32.png">

Cela va ajouter une image à l’écran comme ceci:

Maintenant, nous avons une image, nous avons besoin de le transformer en un lien., Pour ce faire, nous devons ajouter une balise<img> à l’intérieur des balises<a> créant une image de liaison en HTML.

regardons un exemple suivant.

Image comme un lien

À son tour une image dans un lien, vous devez ajouter la balise <img> balise à l’intérieur de la balise <a> balise., Donc, en prenant notre exemple précédent, le code source devrait ressembler à ceci:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>

ce Qui serait de produire ce code HTML:

En ajoutant la balise <img> balise à l’intérieur d’une balise <a> balise le navigateur peut voir que l’image doit être cliquable. Vous avez transformé l’image en un lien!

Si vous utilisez WordPress, vous pouvez ajouter ce code HTML à votre page en utilisant la vue texte de l’éditeur de page.

Vous pouvez également ajouter du texte et des images à l’intérieur du lien, on va regarder cela.,

Image et texte en tant que Lien

l’exemple ci-dessus a montré comment ajouter uniquement une image en tant que lien.

et si nous voulions ajouter à la fois une image et du texte à un lien.

eh Bien, dans ce cas, nous devons nous assurer que nous avons ajouter le texte avant de fermer la balise <a> balise:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>

ci-dessus, nous avons ajouté des « PageDart à la Maison” à l’intérieur de la balise <a> tag avec le <img> balise., Lorsqu’il est affiché dans un navigateur web sur la page, il ressemblera à ceci:

Il y a un autre attribut sur la<img> que nous n’avons pas discuté et que vous devriez utiliser.

c’est l’attributalt.

les liens D’Image et L’attribut Alt

Les Images sur internet doivent avoir un attributalt. Ceci est une description textuelle de l’image.

les lecteurs d’Écran utiliser le texte alt pour aider les utilisateurs malvoyants. Les lecteurs d’écran liront la description du texte lorsqu’il trouvera une image.,

Pour ce faire, nous avons ajouter un alt attribut de la balise img balise comme ceci:

<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>

Maintenant, quand le lecteur d’écran lit cette image on va dire « PageDart.com” à voix haute.

Il est important de suivre les meilleures pratiques lors de l’écriture de texte alt image.

assurez-vous de penser à la personne qui utilise le lecteur d’écran. Écrivez votre description de texte alt pour eux et décrivez l’image du mieux que vous pouvez.

c’est tout ce dont vous avez besoin pour créer des images de liaison en HTML., Pourtant, il existe quelques techniques plus avancées que vous pouvez utiliser. Si vous vous sentez courageux, nous allons examiner ces.

technique avancée: Image sous forme de lien utilisant CSS

Une technique plus avancée consiste à utiliser CSS. CSS signifie Cascading Style Sheet et il vous permet de changer l’apparence d’une page HTML.

avec CSS, vous pouvez définir une image d’arrière-plan sur un élément tel que notre<a>.,

ici, nous aurions du HTML qui ressemble à ceci:

<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>

donc cette fois, il n’y a rien à l’intérieur de la<a> mais l’image est définie en utilisant le style CSS. Cela permettrait de voir la suivante dans le navigateur:

On peut utiliser une technique similaire avec un <button> balise.

technique avancée: utilisation d’un bouton

dans cet exemple, nous allons utiliser la balise<button> au lieu de la balise<a>.,

nous pouvons créer la même sortie que l’exemple ci-dessus en utilisant ce code HTML:

qui crée cette sortie:

ici, nous utilisons JavaScript pour ouvrir un nouvel onglet du navigateur. Envoi de L’utilisateur à la page D’accueil PageDart.

Je ne sais pas pourquoi vous feriez ça! Mais, je voulais vous montrer ce qui est possible et à quel point HTML, CSS et JavaScript peuvent être flexibles.

Le Dernier exemple que je vais montrer est l’utilisation d’une carte d’image.

technique avancée: carte D’Image

Les cartes D’Image sont des images simples avec des zones cliquables., Ils ont perdu en popularité au fil des ans, mais ils font toujours partie de la spécification HTML5. Cela signifie que des navigateurs tels Qu’Internet Explorer, Chrome et Safari les prendront en charge.

les Graphiques sont de bons exemples de Cartes-Images tels que des organigrammes, comme ceci:

Ensuite, pour faire de chaque zone rose un lien cliquable nous permettrait de créer un map comme ceci:

Nous avons ajouté l’attribut usemap à la balise img balise.,

Ensuite, à l’intérieur de la balise map balise, nous avons un area balise. Chacune de ces zones crée une zone cliquable qui agit comme un bouton.

utilisation d’une image de liaison en HTML

Nous avons examiné cinq façons différentes d’ajouter une image en tant que lien sur votre page web:

1. Une image en tant que lien
2. Image et texte en tant que lien
3. utilisation de CSS pour définir une image en tant que lien
4. . Vous devriez maintenant avoir la confiance d’essayer cela vous-même.,

   Nous avons également examiné l’accessibilité et la façon de définir le texte alternatif pour aider les malvoyants.