Maison > Article > interface Web > Comment inclure une ancre en HTML ?
Comment inclure une ancre en HTML ?
- WBOYavant
- 2023-08-31 15:21:06830parcourir
Dans cet article, nous allons effectuer la tâche consistant à inclure des ancres dans HTML. Plongeons dans cet article pour comprendre les ancres en HTML.
L'élément d'ancrage est utilisé pour relier l'ancre source à l'ancre cible. La cible est la ressource à laquelle l'ancre source est connectée, tandis que la source est le texte, l'image ou le bouton qui pointe vers un autre site.
Les hyperliens sont l'une des technologies clés qui font d'Internet une autoroute de l'information.
Pour mieux comprendre comment inclure des ancres en HTML, regardons l'exemple suivant
Exemple 1
Dans l'exemple ci-dessous, nous allons créer un lien Jump Anchor.
<!DOCTYPE html>
<html>
<head>
<style>
.main-content {
height: 90vh;
text-align: justify;
}
</style>
</head>
<body>
<h2 id="tutorials">Tutorials Point</h2>
<p class="main-content">
Tutorials Point originated from the idea that there exists a class of readers who
respond better to online content and prefer to learn new skills at their own pace
from the comforts of their drawing rooms.The journey commenced with a single tutorial
on HTML in 2006 and elated by the response it generated, we worked our way to adding
fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web designing to academics
and much more.</p>
<p>Click To
<a href="#tutorials">Jump</a>.
</p>
</body>
</html>
Lorsque le script ci-dessus est exécuté, une fenêtre de sortie apparaît affichant le texte utilisé dans le script ci-dessus ainsi que la balise d'ancrage mentionnée "Cliquez pour sauter" qui permet à l'utilisateur de passer au début de la page lorsqu'il est enfoncé.
Exemple 2
En considérant le scénario suivant, nous créons un exemple de lien vers une ancre depuis une autre page Web.
<!DOCTYPE html>
<html>
<body>
<h2 id="Tutorials">TutorialsPoint</h2>
<p>Tutorials Point originated from the idea that there exists a class of readers
who respond better to online content and preferto learn new skills at their own
place from the comforts of their drawing rooms.</p>
<p>
<a href="https://www.tutorialspoint.com/market/index.asp">Go To The Course Page.</a>
</p>
<p>
<a href="https://www.tutorialspoint.com/latest/ebooks">Search For Ebooks.</a>
</p>
</body>
</html>
Lorsque le script est exécuté, il générera une sortie montrant le texte utilisé dans le script ci-dessus et le lien attaché à la page Web à l'aide de balises d'ancrage. Lorsque l'utilisateur clique sur le lien, une nouvelle page s'ouvre.
Exemple 3 : Utiliser JavaScript
Regardez l'exemple ci-dessous où nous allons créer un lien vers javascript.
<!DOCTYPE html>
<html>
<body>
<a href="javascript:alert('Welcome To TutorialsPoint!');">Click To Execute</a>
</body>
</html>
Lorsque le script donné est exécuté, il fournira une sortie qui inclut un lien placé sur la page Web à l'aide d'une ancre avec le texte "Cliquez pour exécuter".
Si l'utilisateur clique sur le lien, le script se déclenche et l'avertissement "Bienvenue dans Tutorial Point" s'affiche.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!