There are two types of links to pages you can create. There is the Internal Link and the External Link. An Internal Link is a link in your site that navigates the visitor to another page in your website. The External Link navigates the visitor away from your site to another website in the internet (like https://www.google.com). Below are examples of an external and internal link. The <a> in an HTML tag called an anchor. The anchor can have different attributes inside. The href attribute is the location the link takes you when clicked.
Note! If you are using a Content Management System like Drupal, Joomla, WordPress or the Premium Web Builder, you will use their WYSIWYG editor to create links. For more information see the following links.
Creating an Internal Link in Your Website
This first link is the “Internal Link“. Internal links reference to a file location on your server. The path to the file location is placed in the “href” attribute. To link a page in your own site you reference the location of the file in the href attribute. For Example, if you place a file called nextpage.html in your public_html for your main domain, you simply put the file name like below.
<a href="nextpage.html">This text will now be a link</a>
To reference a file in a subfolder, you include the subfolder name in the “href” attribute For example, if you have nextpage.html in a folder called subfolder, you will create the link like the following:
<a href="subfolder/nextpage.html">This text will now be a link</a>
Important! Don’t forget to close out the tag with the proper closing tag which is </a>. If you don’t close the tag the entire page below the tag will become a hyperlink as well.
Creating an External Link to Another Site
Creating an “External Link” only requires you to have the link to the page. If you want to link your site to inmotionhosting.com for example, you would copy the url in the address bar when you are at inmotionhosting.com, and paste the url in the “href” of your anchor / link like the following:
<a href="https://www.inmotionhosting.com">Text that will be a link</a>
This will make the link go to inmostionhosting.com when clicked.
Basic List of Necessary Anchor Attributes
Below is a table on basic anchor tag attributes. There are many more attributes available to use in anchor tags; however we will only cover the basic 4 attributes most commonly used.
| Basic Anchor Attributes |
| href |
This attribute specifies where the link will navigate to.
<a href="nextpage.html">This text will now be a link</a>
|
| target |
You can have your links open in a new tab or open in the same window with the target.
_blank (Opens in a new tab)
_parent (Opens in the parent frame.)
_self (Opens in the same window.)
_top (Opens the same as self except works with frames.)
The below is an example of the _blanktarget.
<a href="nextpage.html" target="_blank">This text will now be a link</a>
|
| title |
Shows information about the link. When you hover your mouse over a link with a title tag, a little pop up will display the text in this attribute.
<a href="nextpage.html" title="Click here to see this link">This text will now be a link</a>
|
| name |
This is the name of the anchor, This is used for linking to a specific spot in a page. For example, if you want to navigate to the bottom of your web page, you can add a name attribute like:
<a name="bottom">bottom</a>
When you create this name you can reference your site like:
https://example.com/#bottom
Visiting this will send the web surfer to the bottom of your main page.
<a href="nextpage.html" name="location_of_page">This text will now be a link</a>
|
Please check the next article on Creating an Email Link in your Web page.
