You are currently viewing HTML Links Tag | lesson 14 HTML Tutorial
HTML Link image

HTML Links Tag | lesson 14 HTML Tutorial

in this lesson you will learn how to create links in your website and how to manipulate it’s attributes like href, target, and title, also you will see how to create a bookmark with id using html link tag which is “a”.

HTML Link Video

Links are found in nearly all websites Also, links allow users to click their way from page to page.

HTML Links – Hyperlinks

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand like this.

HTML Links – Syntax

In HTML, links are defined with the <a> tag.

Example:

 <a href="https://www.safhatech.com/html/">Visit our HTML course</a> 

As a result the href attribute specifies the destination address (https://www.safhatech.com/html/) of the link. The link text is the visible part (Visit our HTML tutorial). Clicking on the link text will send you to the specified address.

Note: A link does not have to be text. It can be an image or any other HTML element.

Example:

 <a href="https://www.safhatech.com/html/file_path"><img src="file_path/image.jpg" title="image link" alt="image link"/> </a> 

Local Links

The example above used an absolute URL (a full web address). A local link (link to the same web site) is specified with a relative URL (without https://www….).

Fore Example:

 <a href="html_images.asp">HTML Images</a>

HTML Link Colors

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

Fore Example:

<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 Links – The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

  • First option_blank – Opens the linked document in a new window or tab
  • second option _self – Opens the linked document in the same window/tab as it was clicked (this is default)
  • Third option_parent – Opens the linked document in the parent frame
  • Fourth option_top – Opens the linked document in the full body of the window
  • framename – Opens the linked document in a named frame

Fore example Here will open the linked document in a new browser window/tab.

Example Code:

 <a href="https://www.safhatech.com/" target="_blank">Visit safhatech!</a> 

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a ToolTip text when the mouse moves over the element like this.

Example:

 <a href="https://www.safhatech.com/" Title="safhatech" target="_blank">Visit safhatech!</a> 

HTML Links – Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks can be useful if your web page is very long. To make a bookmark, you must first create the id, and then add a link to it. Whenever the link is clicked, the page will scroll to the location with the bookmark.

Fore Example:

First, create a bookmark with the id attribute:

<h2 id="top">Top</h2>

Then, add a link to the bookmark (“Jump to top”), from within the same page.

Example:

<a href="#top">Jump to top</a>

Or, add a link to the bookmark (“Jump to top”), from another page.

 <a href="html_demo.html#top">Jump to top</a> 

External Paths

External pages can be referenced with a full URL or with a path relative to the current web page.

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

 <a href="https://www.safhatech.com/html/file.php">HTML tutorial</a> 

This example links to a page located in the html folder on the current web site:

 <a href="/html/default.asp">HTML tutorial</a> 


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

Leave a Reply