Links and anchors allow you to incorporate structure and interactive content to your website’s design and scope. This short tutorial introduces you to the “link” (otherwise know as the “hyperlink”), and it demonstrates how you can use links when building your website with NowStudio.
Absolute and Relative URLS
Before delving into links, it is important that we familiarize ourselves with the concept of a Uniform Resource Locator (URL). There are two types of URLS: the absolute URL and the relative URL. The main difference between the two is that an absolute URL contains more information in its format than the relative URL, because the former includes the full website address. See below for an example of an absolute URL:
<a href="http://www.domain.com/pages/article_pages.html"> Some Text </a> <br> <a href="https://www.domain.com/pages/article_pages.html"> Some Text </a>
The relative URL does not contain the full website address, because the format assumes that the linked page is a part of the same website. The relative URL for the above example will have the following structure:
The parent website in a relative URL is the same as that of the original website.
Another important part of understanding the URL is noting the difference between http vs. https. If a website is secured with an SSL Certificate, the URL format will be referenced with https.
What is a Link?
In simple terms, a link is a selectable connection linking one webpage to another. Links can be both internal and external, and they are a great way to make your website more interactive to viewers.
External links are links that bring users to a separate domain page from your website. In other words, an external link brings users to an entirely different website linked to your site or vice-versa. There are two ways to create external links with NowStudio: you can use HTML or Markdown formatting.
Creating External Links using HTML
Html uses anchor tags to create hyperlinks.
Anchor Tags in HTML are <a></a>
The hyperlink requires “href property” to specify the location. When creating an external link, you must use an absolute URL. For example, if you would like to link the user to www.now-studio.net , then the following format will work:
<a href="http://www.now-studio.net/">Click here</a>
When the user selects “click here,” they will be directed to now-studio.net in a new tab.
Creating External Links using Markdown Syntax
To link the user to www.now-studio.net using Markdown Format, simply type “click here” in round brackets and then http://www.now-studio.net inside the square brackets as in:
Internal links are hyperlinks that connect users to another page on the same website. In other words, target and host domains are the same. As was the case with external links, you can use either HTML or Markdown Formatting to include internal links when building your website with NowStudio.
Creating Internal Links using HTML
Html uses anchor tags to create hyperlinks. The hyperlink requires href property to specify the location. To create an internal link, just add the relative URL of the page. For example, if your website is available at www.now-studio.org and you want to create an internal link to a page within this website, you need to type the following format:
<a href=”/pages/link.html”> click here </a>
When the user selects “click here,” they will be directed to the pages section of the website.