How to Make Text and Images into Clickable Links with BlueGriffon 2

Chapter 5: How to Insert Hyperlinks


How to Make Text and Images into Clickable Links with BlueGriffon 2

by Christopher Heng, thesitewizard.com

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.

Goal of This Chapter

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.

The Structure of a URL

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).

Relative vs Absolute URLs

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:

  1. 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".

  2. It then strips away the filename of the current page, leaving "https://www.thesitewizard.com/bluegriffon/".

  3. 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.

BlueGriffon allows you to use either a relative or an 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.

How to Make Your Site Logo into a Link

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.

  1. Start BlueGriffon and load your home page if you have not already done so.

  2. Click your logo to select it.

  3. Click "Insert | Link" from the menu.

  4. 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.

    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.)

  5. Click the "OK" button.

  6. 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.

How to Make Other Pictures into a Link

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.

How to Make Words into Clickable Links

The procedure for making words into a link is similar.

  1. Select the word (or words) that you want to make into a link by dragging your mouse over it to highlight it.

  2. Click "Insert | Link" from the menu.

  3. 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.

  4. Click the "OK" button.

  5. Save the page with "File | Save".

Preliminary Test

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.

  1. Start your web browser and open the web page.

  2. Move your mouse pointer so that it hovers over the first link on your page. This will probably be your site logo.

  3. 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.

  4. 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.

Next Chapter

In the next chapter, we will build on the knowledge you acquired here by adding a navigation menu to your side column.

Copyright © 2017 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 »

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Make Text and Images into Clickable Links with BlueGriffon 2





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.