JavaScript Tutorial

HTML Anchor

HTML Anchor tags are used to create hyperlinks that enable navigation between web pages. Hyperlinks can be created using text, images, or any other HTML element. When a user hovers the mouse over a hyperlink, it will change from an arrow to a hand icon indicating that it is clickable. The most important attribute of any hyperlink is the href attribute, which specifies the URL address of the page the user will be redirected to upon clicking the link.

Visited, Unvisited and Active State

Links can have different states including visited, unvisited, and active.

A visited link is one that a user has previously clicked on. By default, it is underlined and displayed in purple.

An unvisited link is one that a user has not yet clicked on. By default, it is underlined and displayed in blue.

An active link is one that is currently being clicked by the user. By default, it is underlined and displayed in red.

Absolute and Relative URLs

We can provide a link within href in two ways, one is relative and the other is absolute. The absolute URL consists of the full web address as we have in the above example.

The relative URL does not contain ‘https://www’ part. It consists of a local link i.e a link to the page within the same website.

Target Attribute

The target attribute is used to specify the target window for a hyperlink. By default, the hyperlink opens in the same browser window. However, we can use attribute values to control this behavior and open the link in a different window or tab.

Attribute Value

Description

_blank

Opens the link window in a new window or tab

_self

Opens the link window in the same frame

_parent

Opens the link window in the parent frame

_top

Opens the linked document in the full body of the window.

Use of Base Path

The <base> tag is used when linking HTML documents within the same website to avoid the need for specifying the URL for each link. It allows you to specify a base path for all the links on the page, which the browser will use to concatenate with the given relative paths to create complete URLs. This makes linking between pages on the same website more efficient and easier to manage.

Link Titles

Link titles provide additional information about an HTML element, which is often displayed as a tooltip text when a user hovers their mouse over the element. This can be useful for providing more context or clarification about a link or other content within a webpage.

Text and Image Link

We can create links on both text and images. Previously, we went through an example of a text link.

For an image link, we need to use the <img> tag with the source (src) path included.

We can also create multiple links on a single image based on different coordinates available on the image. Once different links are attached to different coordinates, we can click on different parts of the image to open target documents. These types of images are called image maps, and we can create them using two methods.

Server-side Image Maps:

To create a server-side image map, simply place your image within a hyperlink and include the "ismap" attribute to make it a special image.

When a user clicks anywhere within the image, the browser sends the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server then uses these coordinates to determine which document to deliver back to the browser.

Client-side Image Maps:

To create a client-side image map, we can use the "usemap" attribute of the <img> tag along with the <map> and <area> extension tags.

The "usemap" attribute value is used to link the <map> and <img> tags. The <map> tag, along with the <area> tags, defines all the image coordinates and corresponding links.

E-mail Link

The HTML <a> tag provides an option to specify an email address to send an email. To do this, we use the "mailto:" keyword followed by the email address in the href attribute.

We can also specify a default email subject and body along with the email address. This helps in controlling the email details from one place.

Supporting Browsers

Element

“Google Chrome

Microsoft

Firefox

Opera

Safari

Anchor

Yes

Yes

Yes

Yes

Yes

Test your HTML skills.

EXERCISE - 1

Create a image link when we click on it then Lecturely.com open on new tab and show a tooltip when mouse moves over the link.

Image link: https://www.lecturely.com/wp-content/uploads/2020/12/case-study-1.png

  <a href="https://lecturely.com" target="_blank" title="Go to Lecturely">

      <img ismap src="https://www.lecturely.com/wp-content/uploads/2020/12/case-study-1.png"/>

    </a>

 

____________________________________

  <a href="https://lecturely.com" target="_blank" title="Go to Lecturely">

      <img ismap src="https://www.lecturely.com/wp-content/uploads/2020/12/case-study-1.png"/>

    </a>

 

____________________________________

HTML Quiz Test
Go back to Previous Course