Links, short for "hyperlinks", are one of the fundamental features of a website. They are probably the reason why all the websites in the world are collectively referred to as the World Wide Web, since the sites are directly or indirectly linked to each other, like the threads in a spider's web.
In this chapter, you will add links to your web page. Specifically, you will make your site logo into a clickable picture, as well as create other text and image links according to your needs.
Since this is the fifth chapter of the BlueGriffon Tutorial, if you have not been following this series from the beginning, you may feel a bit lost as we progress through the guide. For those who don't even have a website yet, I recommend that you start at the very beginning, with the tutorial on creating a website from scratch.
Since you're a webmaster, and no longer just a casual user of the Internet, you will need to have a slightly deeper understanding of web addresses if you are to avoid simple mistakes when creating your own links.
Let's take the address of this article that you're reading,
https://www.thesitewizard.com/bluegriffon/bluegriffon-2-tutorial-5.shtml, as an example.
The complete address as you see above is known as a "URL", short for "Uniform Resource Locator".
It's possible to look at the URL as comprising 3 parts.
The "http://" or "https://" portion contains technical information that tells a web browser how your
web page is to be retrieved. A web browser, seeing this string of letters, knows that it is to use a predetermined
series of steps to get the page. This sequence of steps is known in technical jargon as a "protocol", and the specific protocol
used to get a typical web page is called HTTP (where "HTTP" stands for "Hypertext Transfer Protocol") for "http://" addresses,
and HTTPS (where the extra "S"
is probably meant to suggest "secure") for "https://" URLs. There are other protocols in use on the Internet as well.
For example, you will encounter one of them in chapter 8 when you transfer your site from your computer to the Internet.
The next part of the URL, the "www.thesitewizard.com" portion, tells the browser which website it is to get the file from. For the purpose of this article, so as not to confuse you any further, I'll just loosely refer to it as the domain name portion.
The last bit of the address is the actual location of the file on your website. In this case,
"/bluegriffon/bluegriffon-2-tutorial-5.shtml" tells the browser that the
file in question is called "bluegriffon-2-tutorial-5.shtml", and it is located in
the "/bluegriffon/" directory (ie, folder).
URLs occuring in links can be specified in 2 ways.
The first way is to give the entire address, such as
"https://www.thesitewizard.com/bluegriffon/bluegriffon-2-tutorial-5.shtml". This full address, containing
the protocol, domain name and location of the file, is known as an absolute URL. When you use an absolute URL
in your links, a web browser will always be able to locate the page you're linking to, provided it exists.
The second way is to use something known as a "relative URL". For example, if I were to put a link on this
page that points to "index.shtml", I'm using a relative URL. (Notice the missing protocol
and domain name.) Before a web browser can display that address, it has to construct an absolute URL from it.
It does this by taking the following steps:
It looks at the address of the page containing the link, which in this case is
"https://www.thesitewizard.com/bluegriffon/bluegriffon-2-tutorial-5.shtml".
It then strips away the filename of the current page, leaving
"https://www.thesitewizard.com/bluegriffon/".
Then it appends the relative URL given in my link, "index.shtml", resulting in a final URL of
"https://www.thesitewizard.com/bluegriffon/index.shtml".
As you can see, the shorter form is called a "relative URL" because the address is relative to the page doing the linking. As such, relative URLs can only be used to link to pages within your own website, since web browsers will always assume that a relative URL uses the same protocol and domain as the linking page.
Absolute URLs must always contain the protocol and domain name. You cannot start the link with the domain name, eg, "www.thesitewizard.com", and hope that the browser will figure out that it is supposed to treat it as an absolute URL. There's no way for the browser to figure that out. Remember that valid domain names like "www.thesitewizard.com" are also valid file names or directory (folder) names on many systems (including Windows, Mac OS X, Linux and the BSD systems), so the fact that it looks like a domain name means nothing. Without the protocol part (eg, "http://", "https://", "ftp://", etc), browsers will treat your link as a relative URL, even if that was not your intention. Besides, without the protocol, how is the browser to know what method to use to retrieve the page? Relative URLs are fine, because it refers to a page on the same site, and the browser can just use the same protocol it originally used for the linking page.
BlueGriffon allows you to use either a relative or absolute URL when creating links pointing to pages within your site. For such links, it's up to you which you want to use. Links to other websites will of course have to be specified in full.
If you were to hover your mouse pointer over thesitewizard.com's logo at the top left hand corner of this page, you will notice that the logo is actually clickable. If you click it, you will end up on my home page. This is true not only of thesitewizard.com, but also of most (if not all) websites on the Internet, so much so that Internet-savvy users automatically expect to be able to go to the home page of any site by clicking its logo.
Since you want your website to be as user-friendly as possible, your first act of linking will be to make your logo, which at this moment is merely decorative, into a functional link, pointing to your home page.
Start BlueGriffon and load your home page if you have not already done so.
Click your logo to select it.
Click "Insert | Link" from the menu.
A dialog box with the title "Links" will appear.
If you want to use an absolute URL for your link, type "http://www.example.com"
(without the quotation marks, and replacing "www.example.com" with your site's actual domain name)
into the "Target" field. Replace the "http://" portion with "https://" if your
site can
be accessed that way.
On the other hand, if you prefer to use a relative URL, click the folder icon next to the "Target" field. This brings up the
"Select a file" dialog box. Navigate to your "index.html" file, and click it once to select it,
followed by the "Open" button. Then click the check box for "Make URL relative to page location". This last bit
is required if you are using a relative URL. If you fail to do this, your link will be broken when you publish
your page. To make sure that you have done all that is required, make sure that the "Target" field only
contains "index.html" (without the quotation marks) and NOT something that begins with "file:///".
(If it starts with "file:///", it means you have failed to click the check box I mentioned earlier.)
Click the "OK" button.
Save the page with "File | Save".
You won't really see anything different from within BlueGriffon. However, you open the page in your browser and hover your mouse pointer over the picture, you will see that it is clickable.
I know that you are currently working on your home page, and a link from your home page pointing to itself is actually meaningless. However, you will use this home page as the basis for your other pages in chapters 7 and 9, so your effort is not actually wasted. We're simply making your home page behave in exactly the same way as all the other pages of your website, so that once your visitors have figured out how to use one page of your site, they will know how to use the other pages as well.
The same method that you used to make your logo into a link can be used for other pictures. That is, click the picture to select it, use "Insert | Link" and enter your URL. The exact URL will of course be different for your other pictures, unless you really want all your pictures on the page to link to your home page.
If you are linking to a page that you haven't created yet, and are making up a filename for it, please
read the article How to
Create Good Filenames for Your Web Pages so that you don't end up with names that cause you problems
in the long run. You will obviously not be able to select the file using the folder button at this time
(since the file doesn't exist yet), but you can simply type the name yourself into the "Target" field. For example,
if you're linking one of your product pictures to a page called "product.html", just type
"product.html" (without the quotation marks) or "http://www.example.com/product.html" (without the
quotation marks) into the field, depending on whether you want a relative or absolute URL.
The procedure for making words into a link is similar.
Select the word (or words) that you want to make into a link by dragging your mouse over it to highlight it.
Click "Insert | Link" from the menu.
Type the URL into the "Target" field or select the file using the folder icon. If it's a relative URL, put a tick in the "Make URL relative to page location" check box.
Click the "OK" button.
Save the page with "File | Save".
Since you have not actually put your site on the Internet yet, nor have you created the other pages that you have linked to, you can only do a cursory test of the links for now.
Start your web browser and open the web page.
Move your mouse pointer so that it hovers over the first link on your page. This will probably be your site logo.
Look at the bottom of your browser. If you have created a link with an absolute URL, the status bar on the browser (or its equivalent pop-up tooltip) should show the URL you entered into the editor.
If you have used a relative URL, the status bar should show something beginning with "file:///",
even if you have remembered to put a tick in the "Make URL relative to page location" checkbox earlier.
As explained in the section on the
different types of URLs, the browser assembles the complete URL of relative links based on the web page's
current location. Since browsers start links to files located on your own computer with "file:///", and
your page is currently still on your computer, all your relative links will be displayed that way. When
you transfer your page to the Internet in chapter 8, and redo this test, you will find that your link will begin
correctly with "http://" or "https://". At that time, when your site is on the Internet, if you still see
a link beginning with "file:///", it means that you have forgotten to enable the "Make URL relative
to page location" checkbox. But for now, it's not significant. If it really bothers you, return to the editor
and use absolute URLs instead.
There's no point clicking the links to your other pages since you have not created them yet. However, if you have linked to a different site on the Internet (such as thesitewizard.com), those links should work normally. If they don't, it probably means that you have made a typing mistake in the URL.
In the next chapter, we will build on the knowledge you acquired here by adding a navigation menu to your side column.
Copyright © 2017-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All BlueGriffon Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Make Text and Images into Clickable Links with BlueGriffon 2 and 3
