How do we include an anchor in HTML?-HTML Tutorial-php.cn

How do we include an anchor in HTML?

WBOY

Release： 2023-08-31 15:21:06

forward

861 people have browsed it

How do we include an anchor in HTML?

In this article, we will perform the task of how to include anchors in HTML. Let’s dive into this article to understand anchors in HTML.

The anchor element is used to link the source anchor to the target anchor. The target is the resource to which the source anchor is connected, while the source is the text, image, or button that points to another site.

Hyperlinks are one of the key technologies that make the Internet an information highway.

To better understand how to include anchors in HTML, let’s look at the following example

Example 1

In the example below, we will create a Jump Anchor link.

<!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>

Copy after login

When running the above script, an output window will pop up showing the text used in the above script and the mentioned anchor tag "Click to jump", which allows the user to jump to the page when pressed start.

Example 2

Considering the following scenario, we are creating an example of linking to an anchor from another web page.

<!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>

Copy after login

When the script is executed, it will generate an output showing the text used in the above script and the link attached to the web page using anchor tags. When the user clicks on the link, it opens a new page.

Example 3: Using JavaScript

Look at the following example where we will create a link to javascript.

<!DOCTYPE html>
<html>
<body>
   <a href="javascript:alert('Welcome To TutorialsPoint!');">Click To Execute</a>
</body>
</html>

Copy after login

When the given script is executed, it will provide an output that includes a link placed on the web page using an anchor with the text "Click to execute".

If the user clicks on the link, the script is triggered and the warning "Welcome to Tutorial Point" is displayed.

The above is the detailed content of How do we include an anchor in HTML?. For more information, please follow other related articles on the PHP Chinese website!