Links

A link on web page that makes a connection from one web resource to another is called hyperlink.

A web page hyperlink (or simply "link") consists of a word, group of words, or image that you can click on to jump to another document, page, or section. It is the means of website navigation. To establish link on web page <a> tag is used and href attribute must appear with <a> tag. Here

  • <a> stands for anchor and
  • HREF stands for hyper-reference

Attributes

The anchor tag contains many attributes which are listed below:
  •     download: It is used to specify the target link to download when the user clicks.
  •     href: here navigation path OR location is given to navigate the given link.
  •     name: It is used to specify the anchor name. It is not supported by HTML 5 you can use the global id attribute instead.
  •     target: It specifies the target link. It contains the value as described below
  1.     _self: the current browsing context. (Default)
  2.     _blank: usually a new tab, but users can configure browsers to open a new window instead.
  3.     _parent: the parent browsing context of the current one. If no parent, behaves as _self.
  4.     _top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.
Links are of mainly two types as given below:
1. External Link
2. Internal Link

External Link

These are links that navigates outside the page. In external link navigation could be on the same server OR to the another server.

Internal Link

In internal link one can navigation on the same page at different locations.

Some Facts

Linking Website OR URL
To link a website OR URL it must start with http:// OR https:// inside the href attribute.

Linking Email ID
Use mailto: inside the href attribute to create a link that opens the user's default email program.

Linking Phone Number
Use tel: inside the href attribute to create a link that opens the link in smart phone.

Setting Up Link Colour
To change the link colour we define following attribute with <body> tag.
  • Link: Used to define link color.
  • Alink: Used to define active link color.
  • Vlink: Used to define visited link color.

Examples



<!DOCTYPE html>
<html>
  <head>
    <title>Working with hyperlink in HTML</title>
  </head>
  <body>

    <p>
      I am a normal link<br>
<a href="example.jpg">Click Here to see Image</a>
    </p>

<p>
      I am a link with target in new window<br>
<a href="example.jpg" target="_blank">Click Here to open Image in new window/tab</a>
    </p>

<p>
      I am a link download option<br>
<a href="example.jpg">Click Here to download Image</a>
    </p>

<p>
      I am a URL link<br>
<a href="https://www.myragroup.in/libs/downloads/" target="_blank">Click Here to see Image</a>
    </p>

<p>
      I am a Email link<br>
<a href="mailto:compeducation20@gmail.com" target="_blank">Email Me</a>
    </p>

<p>
      I am a Phone link<br>
<a href="tel:+91 7503981004" target="_blank">Call Me</a>
    </p>

  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Setting Link Color</title>
  </head>
  <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Change Link Color</p>
      <a href = "images/example2.gif" target = "_blank" >Click Me</a>
   </body>
</html>
Working with hyperlink in HTML

I am a normal link
Click Here to see Image

I am a link with target in new window
Click Here to open Image in new window/tab

I am a link download option
Click Here to download Image

I am a URL link
Click Here to see Image

I am a Email link
Email Me

I am a Phone link
Call Me

Setting Link Color

Change Link Color

Click Me


Internal Link OR Link on Same Page

You can create a link to a particular section of a given webpage by using name attribute. The name attribute deprecated in HTML5. In HTML5 use id and title attribute instead.

The same page link has a two-step process.
  1. Create a link using <a> tag and give the location name using the attribute name/id/title.
  2. Link that location using <a> tag and href attribute. Must use # symbol before the location name (create in step 1) to work the hyperlink properly.
<!DOCTYPE html>
<html>
  <head>
    <title>Linking Same Page</title>
  </head>
  <body>

<p>
<a href="#bottom" name="top">Go Bottom</a>
</p>

    <pre>








































































</pre>

<p>
<a href="#top" name="bottom">Go Top</a>
</p>

  </body>
</html>

Linking Same Page

Go Bottom









































































Go Top