HTML Links

HTML Links । Hyperlinks




There may be several types of links in a webpage in the HTML document that move you to other pages and specific parts of a page. You know, these links are known as hyperlinks.

In the HTML document, HyperLinks provides visitors the ability to navigate between web sites by clicking on words, phrases and images. This way, you can create hyperlinks in the HTML document using text or images available on a webpage.

HTML Links

HTML Links - Syntax

A link is specified using the tag <a> in the HTML document. This tag is known as the anchor tag. Anyone can create a link between the opening and <a> tag and closing </a> tags, and we have to click on that part to access that linked document.
Example
following example which links  https://www.webstudy.ooo  your page −


<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p><a href="https://www.webstudy.ooo">HTML studyweb</a></p>
</body>
</html>

Result-
HTML Links

HTML studyweb



The Href attribute in the <a> tag serves to specify the destination address of the link (https://www.webstudy.ooo/).
The link text in it, it is visible part.


Local link

In the first example you mentioned, you used a full URL (a full web address).
But specify in a local link with a relative URL (without http: // www ....).
Example


<!DOCTYPE html>
<html>
<body>
<h2>Local Links</h2>
<p><a href="google.com">GOOGLE</a> is a link to a page on google site.</p>
</body>
</html>

Result-
Local Links
GOOGLE is a link to a page on google site.


Html link color

The HTML link color specifies, by default, how a link will appear:
like
A unique link underlines and blue appear.
A visited link will be underlined and look purple.
Underline an active link and appear red.
You can change the default color by using CSS in HTML:
Example


<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="google.com" >google</a>
</body>
</html>

Result
Link Colors
You can change the default colors of links
google


Html link - target attribute

The target attribute in the HTML link specifies where to open the given link.

The following values ​​can be in the target attribute, in which we use one:


  • _blank - This opens the linked document in a new window or tab.
  • _self - This opens the linked document in the same window or tab when it is clicked. This is the default.
  • _parent - The parent opens the linked document in this frame.
  • _top - This opens the linked document in the entire body of the window.
  • framename - This opens a document connected in a designated frame.
It will now be understood with the help of examples.
This example link will be opened in a new browser window / tab:
Examples


<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.webstudy.ooo/2018/08/html-colors_44.html" target="_blank"> HTML color!</a>
</body>
</html>

Result
The target Attribute
HTML color!

If your webpage is locked in the frame, you can use the target = "_top" to exit the frame:
Example


<!DOCTYPE html>
<html>
<body>
<p>Locked in a frame? <a href="http://www.webstudy.ooo/2018/08/html-css.html" target="_top">Click here!</a></p>
</body>
</html>

Result
Locked in a frame? Click here!


HTML Link - Image as Link

It is common to use images in the form of links, and it looks more like our website:
Example


<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image is a link. </p>
<a href="https://www.webstudy.ooo/">
  <img src="https://1.bp.blogspot.com/-KeNVzuL5aUo/W2FpHSb4MRI/AAAAAAAAARw/FPQSmKXQ-rEHFhhZ5Qa1d_gbeX9SwlO3QCK4BGAYYCw/s1600/webstudy%2Blogo.png" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
</body>
</html>

Result
Image Links

The image is a link.
HTML tutorial


Link title

The title in HTML specifies additional information about the attribute element. When you move your mouse over the element, the information is often shown as tooltip text.
Example


<!DOCTYPE html>
<htm1 lang="en-US">
<body>
<h2>Link Titles</h2>
<a href="https://www.webstudy.ooo/" title="Go to Webstudy Home page.">Visit our HTML Tutorial</a>
</body>
</html>

Result
Link Titles

Visit our HTML Tutorial


HTML link - create a bookmark

Using the bookmark in HTML allows readers to visit specific parts of the web page.
This is very important when your webpage is very long, it proves to be useful.
To create a bookmark in HTML, you have to first create bookmarks, and then add a link to it.

Examples
  Creating a bookmark with the ID attribute:


<h2 id="T2">Topic 2</h2>


Then, add a link to the bookmark from within the same page:


<a href="#T2">Jump to Topic 2</a>




External Path

We can refer external pages to HTML with a complete URL, or a path related to the current web page.

This example uses a full URL to link to a web page in HTML:



<!DOCTYPE html>
<html>
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.webstudy.ooo/">
   </head>
   <body>
      <p>Click following link</p>
<p><a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a></p>
</body>
</html>

Result
Click following link

HTML tutorial





This example is linked to a page located in the HTML folder on the current web site in HTML:



<!DOCTYPE html>
<html>
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.webstudy.ooo/">
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/2018/08/html-css.html" target = "_blank">HTML Tutorial</a>
   </body>
</html>

Result
Click following link

HTML tutorial




This example comes from a page in the same folder as the current page in the HTML:



<!DOCTYPE html>
<html>
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.webstudy.ooo/">
   </head>
 <body>
      <p>Click following link</p>
      <a href = "html-css.html" target = "_blank">HTML Tutorial</a>
   </body>
</html>

Result
Click following link

HTML tutorial

HTML Links । Hyperlinks- There may be several types of links in a webpage in the HTML document that move you to other pages and specific parts of a page. You know, these links are known as hyperlinks. In the HTML document, HyperLinks provides visitors the ability to navigate between web sites by clicking on words, phrases and images. This way, you can create hyperlinks in the HTML document using text or images available on a webpage.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget