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
İn HTML you can create a link sike so:
<a href="url">link text</a>
<a> tag defines or creates a link.
<a> link text </a>
<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>
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
2) İn your about.html file paste this
Then save files and run them in Chrome or any browser.
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.
<!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
target attribute tells the browser where to open the linked document. There are four defined targets, and each target name starts with an underscore(
_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
<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.