Login With Github

HTML Links

The hyperlink is also called URL (Uniform Resource Locator), which is one of the most frequently used HTML elements in a website.Various pages of the website are connected by hyperlinks, and the hyperlinks complete the redirections between pages.

HTML Hyperlinks

The hyperlink is defined by the <a> tag.

The hyperlink can be a piece of text or an image that you can click to redirect to a new document or part of the current document.

When you move the mouse over a link, the arrow changes to a small hand.

By default, a link will appear like this (in all browsers):

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can change the default colors, by using styles:

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

HTML Hyperlink Syntax

The hyperlink is defined by the <a> tag.

<a href="url">link text</a>

Here is an example of the simplest hyperlink:

<a href="http://www.tutorialdocs.com/tutorial/html">Visit our HTML tutorial</a>

It will direct to the home page of the HTML Tutorial when you click the above link.

"link text" is not necessarily text.Images or other HTML elements can become hyperlinks.

The href attribute

You can define the destination of the redirection by setting the href attribute of the <a> tag. There are 5 types of href attribute values.

1. Absolute URL - redirect to another site.

<a href="https://www.google.com/">go to google</a>

2. Relative URL - redirect to a file in local site.

<a href="about.html">go to about page</a>

3. Anchor URL - redirect to the anchor in the page.

<a href="#top">go to the top of page</a>

4. Email URL - Launch Local Default Email Client.

<a href="mailto:admin@tutorialdocs.com">contact us</a>

5. A piece of JavaScript script - Run a simple JavaScript code.

<a href="javascript:void(0);">javascript in href attribute</a>

The target attribute

The target attribute of the <a> tag specifies where to open the linked document.

There are five types of target attribute values:

  • Target="_blank" - Always open a new window to display the content of the linked document.
  • Target="_self" - Always open the linked document in the current window.
  • Target="_parent" - Open the linked document in the parent frame.
  • Target="_top" - Open the linked document in the top frame.
  • Target="window_name/frame_name" - Open the linked document in a window named "window_name" or in a frame named "frame_name".

Here we take "window_name" as an example:

<h3>Table of Contents</h3>

<ul>
  <li><a href="pref.html" target="view_window">Preface</a></li>
  <li><a href="chap1.html" target="view_window">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_window">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_window">Chapter 3</a></li>
</ul>

When the visitor first clicks on a link, the browser opens a new window with the name "view_window".If the visitor clicks on another link while the window "view_window" is still open, the browser will open the linked document again in the window "view_window", replacing the content of the last opened document.

The title attribute

The title attribute in HTML defines additional information for the element.If the <a> tag defines the title attribute, then when you move the mouse over the <a> tag, a tip text message will appear over the link.for example:

<a href="http://www.tutorialdocs.com/" title="Welcome to TutorialDocs">Visit TutorialDocs Home</a>

0 Comment

temp