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.
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.
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).
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:
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".
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.
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.
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.
Start BlueGriffon and load your home page.
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 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.)
Click the "OK" button.
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.
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).
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 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.
If you click a link leading to your home page (such as your site logo), you should not see any difference in your web browser, since you are already on your home page. If you get an error message saying something like "404 File Not Found" or words to that effect, it means that you made a typing error when you entered the URL for that link. Links pointing to your home page should never have a "File Not Found" error, since your link is on the home page itself, so obviously the file exists.
If you click a link leading to a page you haven't created yet, you will get a "File Not Found" error (or words to that effect). This is expected, so there's no cause for concern. The error will go away once you create that page.
If you have a link pointing another website that you know for sure exists, but you still get an error message, it means that you've probably typed the URL wrongly. A simple way to fix the problem is to manually load that other website in your browser. Once you've successfully got the page to display in your browser, cut and paste the URL from your browser's address bar directly into BlueGriffon. That way, you can avoid the typing errors that frequently crop up when typing URLs. (Yes, it's a common problem that happens to everyone, seasoned webmaster or not.)
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 »
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 Images and Text into Links Using BlueGriffon
