How to Make Images and Text into Links Using BlueGriffon

Chapter 5: Making words and pictures into clickable hyperlinks


How to Make Images and Text into Links Using BlueGriffon

by Christopher Heng, thesitewizard.com

One of the most common tasks a web designer does is to make words and pictures into clickable links that, when clicked, takes a visitor to a new location, be it another web page, a picture, a PDF document, or whatever. Links are in fact why the world wide web (the "www" prefix you see in website addresses, like "www.thesitewizard.com") is called what it is; it comprises a bunch of sites linked to each other just like a spider's web.

Goal of This Chapter

In this chapter, you will add links to your home page. Specifically, you will make your site logo into a clickable picture, as well as create other text and picture links according to your needs.

Since this is the fifth chapter of the BlueGriffon 1 tutorial series, if you have not been following this tutorial from the beginning, you may feel a bit lost as we progress through the guide. Those not already familiar with BlueGriffon may find it easier to start from the first chapter. If, however, you are a completely new to website-making, please begin with the article How to Make / Create a Website, since there is more to setting up a website than just using an editor.

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-1-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://" portion contains technical information that tells a web browser how your web page is to be retrieved. A web browser, seeing the string of letters "http://", knows that it is to use a certain predetermined set of steps to get the page. This sequence of steps is known in technical lingo as a "protocol", and the specific protocol used to get a typical web page is called HTTP (where "HTTP" stands for "Hypertext Transfer Protocol"). There are other protocols in use on the Internet as well. For example, you have already encountered "FTP" (for "File Transfer Protocol") in chapter 1, when you transferred a file from your computer to your web host's computer.

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-1-tutorial-5.shtml" tells the browser that the file in question is called "bluegriffon-1-tutorial-5.shtml", and it is located in the "/bluegriffon/" directory (ie, folder).

Relative vs Absolute URLs

URLs occuring in links on your website can be specified in 2 ways.

The first way is to specify the entire address, such as "https://www.thesitewizard.com/bluegriffon/bluegriffon-1-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-1-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 a clickable picture, that when clicked, will take you to thesitewizard.com's 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 change your logo, which at this moment is merely decorative, into a functional link.

  1. Start BlueGriffon and load your home page.

  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 quotes, and replacing "www.example.com" with your site's actual domain name) into the "Target" field. You're done with this dialog box. Go to the next step.

    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. Click your "index.html" file, 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 don't 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 quotes) 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 your page with "File | Save".

You won't really see anything different from within BlueGriffon (other than the fact that, at the moment, the editor has selected your logo). However, once you upload your page and open it in your browser, you should be able to click the picture.

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 8, 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 you used to make your site logo into a link can be used on other pictures. That is, click the picture to select it, use "Insert | Link" and put in 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 you're making up a filename for the page, please read the article How to Create Good Filenames for Your Web Pages so that you don't end up with names that will 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 quotes) or "http://www.example.com/product.html" (without the quotes) 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.

Testing Your Web Page and How to Solve File Not Found Errors

Save your file, and upload it as you did the previous chapters.

Start up your web browser and go to your website. Click on all the links that you have created in this chapter.

Next Chapter

In the next chapter, you will create a navigation menu for your website, similar to the list of buttons you see in the left column of thesitewizard.com.

Copyright © 2015-2018 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

How to Link to This Page

It will appear on your page as:

How to Make Images and Text into Links Using BlueGriffon





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
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.