Hyperlinks, or "links" for short, are one of the characteristic features of a website. You use them to link to pages or files on your own site, as well as to other websites on the Internet. They are probably the reason why the "World Wide Web" is so-named, since the sites on the Internet directly or indirectly connect to each other like the threads in a spider's web.
By the end of this chapter, you will have added links to your site. You will also have made your site logo into a link that points to your home page, and learnt ("learned" in US English) more about URLs.
If you have arrived at this chapter from outside thesitewizard.com, and are new to Expression Web, you may want to start with the first chapter, since I will assume you know the things that were covered earlier. Those who are first-timers at building websites should probably go to the very beginning, with my article on How to Create a Website. There's more to making a website than designing a page.
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/expression-web/expression-web-4-tutorial-5.shtml, as an example.
The complete address, as given here, 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 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") 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, and you will encounter one of them in a later chapter when you
transfer your website
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,
"/expression-web/expression-web-4-tutorial-5.shtml" tells the browser that the
file in question is called "expression-web-4-tutorial-5.shtml", and it is located in
the "/expression-web/" directory (ie, folder).
URLs occuring in links on your website can be specified in 2 ways.
The first way is to state the entire address, such as
"https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-5.shtml". This full address, containing
the protocol, domain name and location of the file, is known as an absolute URL. Such an address gives the
web browser, from the very outset, all the information it needs to locate and retrieve the file.
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 simply says "index.shtml" and nothing else, 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/expression-web/expression-web-4-tutorial-5.shtml".
It then strips away the filename of the current page, leaving
"https://www.thesitewizard.com/expression-web/".
Next, it appends the relative URL given in my link, "index.shtml", resulting in an absolute address of
"https://www.thesitewizard.com/expression-web/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. In view of this, relative URLs can only be used to link to pages within your own website, since 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.
Expression Web 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.
Do the following to make any piece of text into a clickable link.
Open your page in Expression Web.
Select the word or words that you want to make into a link. That is, drag your mouse over those words so that they are highlighted.
Click "Insert | Hyperlink..." from the menu. A dialog box with the title "Insert Hyperlink" will appear.
By default, "Existing File or Web Page" will be highlighted in the left column.
If you want to use an absolute URL, just type the full web address into the "Address" field. For example, type "https://www.thesitewizard.com" (without the quotation marks) if you are linking to thesitewizard.com.
In the future (starting from chapter 7), if you are linking to another page on your website, and the page already exists, you can also click to select the page you are linking to from the list of files displayed. This is of course not possible now, since at this point, you are still working on your first page. In any case, if you do this, Expression Web will create a relative link, that is, a link that uses a relative URL.
If you want to link to a page that you have not yet created, click "Create New Document" in the left column, then
type the filename of that page into the "Name of new document" field. Click the "Edit the new document later" radio button
as well; we will create the other pages of your site only in chapter 7. Note that if you are intending to insert links
to future pages, I recommend that you read my tutorial on
creating future-proof, robust
filenames for websites before you decide on the name of that new page. In addition, remember give the page a file
extension of ".html".
When you are done, click the "OK" button. The words on your page should now be underlined, and be in blue.
The procedure for making pictures into links that point to other pages or files is not much different. The only difference is, instead of highlighting words, click your picture once to select it. Then proceed to use "Insert | Hyperlink..." as before.
Do this now: I recommend that you use the above method to make your site logo into a link pointing to your home page. 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 link that takes you to 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, it's a good idea to implement this on your site as well. You can use either a relative or absolute URL. For reasons alluded to elsewhere, I personally prefer to use an absolute URL to point to the home page, so that those links give an unadorned domain name, that is, a plain "https://www.thesitewizard.com/" without any filename at the end.
Although we have talked only about linking to other web pages, links can point to anything you like.
For example, you can also link directly to another picture. Let's say you have a small thumbnail picture on your current page, and you want your visitors to be able to see a bigger, higher resolution version when they click it. One way to do this is to make the thumbnail into a link pointing to the bigger image. You will of course have to copy the both pictures into your "images" folder. (See chapter 2 if you have forgotten how to do this.)
Save your work and preview the page in a web brower. Move your mouse so that it hovers over the links you made, and check the URLs that they point to by looking at your web browser's status bar.
If you have used a relative URL in your link, your browser's status bar will show something like "file:///C:/Users/Christopher Heng/Documents/My Web Sites/thesitewizard/some-file-or-other.html" instead of a link like "http://www.example.com/some-file-or-other.html". Don't worry. As I said before, relative URLs are resolved by browsers based on the current page's location. Since the home page is on your computer at the moment, and not on the Internet, the link will point to another file on that machine. It is, after all, a relative URL. Once your page is online, browsers will see the link as pointing to another file on your domain.
Absolute links (links that use absolute URLs) should display as-is. So if you link to (say) "https://www.thesitewizard.com/", the link should show up correctly wherever your page may be.
In the next chapter, we shall make use of the knowledge you acquired here to add a navigation menu to your website's left column.
Copyright © 2016-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 Expression Web 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 Pictures and Text into Clickable Links with Expression Web
