How to link pages using absolute URL in HTML?

HTML Web Development Front End Technology

In HTML different HTML elements have attributes that contain link to the other resources. The values of these attributes are URL’s, these can be absolute or relative URL’s.

An absolute URL used to link to resources on web page, it includes the website address.
Absolute URL’s never changes.
We can also use absolute URL to link to resources within same site on the web page.

Following link includes the protocol and domain (host name) making this an absolute URL.

<a href="www.Google.com">Link text…</a>

Absolute URL begins with the domain where the file is located.

Syntax

Following is the syntax to link a page using absolute URL.

<a href="absolute URL">Link text…</a>

Example

Following is the example program to link a page using absolute URL.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <h3>HTML-HyperText Markup Language </h3>
   <a href="https://www.youtube.com/watch?v=qz0aGYrrlhU">HTML tutorial</a>
</body>
</html>

Following is the output for the above example program. The domain address is YouTube and when we click on the link it will directly navigate us to the different page of the same website.

Example

Following is the example program to link a page using absolute URL.


<!DOCTYPE html>
<html>
<head>
   <title>How to link pages using absolute URL in HTML?</title>
</head>
<body>
   <h2>Click the link below to redirect to instagram login page</h2>
   <a href="https://www.instagram.com/accounts/login/">Instagram login</a>
</body>
</html>

Example

Following is the example program to link a page using absolute URL and changed the style of the Hyperlink by using CSS.


<!DOCTYPE html>
<html>
<head>
   <title>How to link pages using absolute URL in HTML?</title>
   <style>
      a:link {
         text-decoration: none;
      }
      a:visited {
         text-decoration: none;
      }
      a:hover {
         text-decoration: underline;
      }
      a:active {
         text-decoration: underline;
      }
   </style>
</head>
<body>
<h2>Click the link below to redirect to facebook login page</h2>
<a href="https://www.facebook.com/login/">facebook login</a>
</body>
</html>