HTML5

HTML Links


In this tutorial you will learn how to create links in HTML


HTML Links – Hyperlinks

HTML links are hyperlinks.
A hyperlink is the connection between HTML documents. All web pages created using HTML documents.
A link is like a door between those web pages. You can click on a link and jump to another document (or page).
When you move the mouse over a link (or hover over a link ), the mouse arrow will turn into a little hand.

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


HTML Links – Syntax

Hyperlinks are defined with the HTML <a> tag:
İn HTML you can create a link sike so:

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

Step 1:
the HTML <a> tag defines or creates a link.

<a> link text </a>

Step 2:
İnside opening <a> tag there is an attribute called href=” “ like this:

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

The href=” “ attribute specifies the destination. İt tells where the link should go.

<a href="https://nevci.com/category/html/">Visit our HTML Tutorial</a>

The href attribute specifies the destination address  ( https://nevci.com/category/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.


Local Links ( internal links )

The example above used an absolute URL (a full web address).
Internal Links are hyperlinks that point to another page on the same website. With a relative URL (without https://www….).
For example: On your website you have Home page and from there link to your About us page like this:

<!DOCTYPE html>
<html>
	 <head>
	   <title>HTML links</title>
	 </head> 
	 
    <body>
	
	 <a href="about.html">About</a> 
     
	 
	</body>



</html>

Note: Create two HTML files on your computer. Then name them:
1) as index.html
2) as about.html
Then copy the code above. Paste them in your HTML files. Change the url address so they link one to another like this:

1) İn your index.html file paste this

<a href="about.html">About</a> 

2) İn your about.html file paste this

<a href="about.html">About</a> 

Then save files and run them in Chrome or any browser.


External Links

External Links are hyperlinks that point to a full web adress or URL including ( https://www….).
In layman’s terms, if another website links to you, this is considered an external link to your site.
Similarly, if you link out to another website, this is also considered an external link.

Example Code:

<!DOCTYPE html>
<html lang="en">

		<head>
		 <title>HTML External Links</title>
		</head>

<body>
		
<a href="https://www.youtube.com"> Link to Youtube</a>
<a href="https://www.twitter.com">  Link to Twitter</a>
<a href="https://www.facebook.com"> Link to Facebook</a>
<a href="https://www.nevci.com"> Link to Nevci</a>
		
</body>
</html>

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.

However, you can change the default colors using CSS.


HTML Links – The target Attribute

The target attribute tells the browser where to open the linked document. There are four defined targets, and each target name starts with an underscore(_) character:

  • _blank  – Opens the linked document in a new window or tab
  • _self  – Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent   – Opens the linked document in the parent frame
  •   _top  – Opens the linked document in the full body of the window

Example Code:

<a href="https://nevci.com/category/html/" target="_blank">Visit our HTML tutorial.</a> 

The Different Types of Links

To understand links completely, you need more than this tutorial. İ don’t want to make this tutorial complicated but here is the list of what you should know to understand HTML links completely.

  • External links.
  • İnternal links.
  • Linking within the same page.
  • File path (in HTML).
  • File path (on your PC or Mac).
  • Understanding Cpanel
  • Learning how to publish your HTML site ( in World Wide Web )

If you follow our tutorials at nevci.com you can learn them one by one.