by

Microsoft Expression Web Mac Os

Chapter 5: How to Insert Hyperlinks into Your Website


Expression Web Tutorial: How to Design a Website with Microsoft Expression Web (Chapter 1) How to Add Images and a Site Logo to Your Website with Microsoft Expression Web (Chapter 2) How to Change Fonts, Text Size and Use Bold and Italics in Expression Web (Chapter 3) How to Change the Background of a Website with Expression Web (Chapter 4).

by Christopher Heng, thesitewizard.com

Hyperlinks, or 'links' for short, are one of the characteristic features of a website. You use them to linkto pages or files on your own site, as well as to other websites on the Internet. They are probablythe reason why the 'World Wide Web' is so-named, since the sites on the Internet directly or indirectly connectto each other like the threads in a spider's web.

Goal of This Chapter

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 thefirst chapter,since I will assume you know the things that were covered earlier. Those who are first-timers at building websitesshould probably go to the very beginning, with my article onHow to Create a Website.There's more to making a website than designing a page.

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 deeperunderstanding 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 yourweb page is to be retrieved. A web browser, seeing this string of letters, knows that it is to use a predeterminedseries of steps to get the page. This sequence of steps is known in technical lingo as a 'protocol', and the specific protocolused 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' isprobably meant to suggest 'secure') for 'https://' URLs. There are otherprotocols in use on the Internet as well, and you will encounter one of them in a later chapter when youtransfer your websitefrom your computer to the Internet.

The next part of the URL, the 'www.thesitewizard.com' portion, tells the browser which website it is toget 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 domainname 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 thefile in question is called 'expression-web-4-tutorial-5.shtml', and it is located inthe '/expression-web/' 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 state the entire address, such as'https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-5.shtml'. This full address, containingthe protocol, domain name and location of the file, is known as an absolute URL. Such an address gives theweb 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 thispage that simply says 'index.shtml' and nothing else, I'm using a relative URL. Notice the missing protocoland 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/expression-web/expression-web-4-tutorial-5.shtml'.

  2. It then strips away the filename of the current page, leaving'https://www.thesitewizard.com/expression-web/'.

  3. 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 assumethat 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 thedomain name, eg, 'www.thesitewizard.com', and hope that the browser will figure out that it is supposed totreat it as an absolute URL. There's no way for the browser to figure that out. Remember that validdomain names like 'www.thesitewizard.com' are also valid file names or directory (folder) names onmany systems (including Windows, Mac OS X, Linux and the BSD systems), so the fact that it looks likea domain name means nothing. Without the protocol part (eg, 'http://', 'https://', 'ftp://', etc), browserswill 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, becauseit refers to a page on the same site, and the browser can just use the same protocol it originally used forthe linking page.

Expression Web allows you to use either a relative or an absolute URL when creating links pointing to pageswithin your site. For such links, it's up to you which you want to use. Links to other websites will of coursehave to be specified in full.

How to Make a Text Link

Microsoft Expression Web Mac Os High Sierra

Mac

Do the following to make any piece of text into a clickable link.

  1. Open your page in Expression Web.

  2. Select the word or words that you want to make into a link. That is, drag your mouse overthose words so that they are highlighted.

  3. Click 'Insert Hyperlink...' from the menu. A dialog box with the title 'Insert Hyperlink' will appear.

  4. 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. Forexample, type 'https://www.thesitewizard.com' (without the quotation marks) if you are linkingto 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 tofrom 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 willcreate 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, thentype the filename of that page into the 'Name of new document' field. Click the 'Edit the new document later' radio buttonas well; we will create the other pages of your site only in chapter 7. Note that if you are intending to insert linksto future pages, I recommend that you read my tutorial oncreating future-proof, robustfilenames for websites before you decide on the name of that new page. In addition, remember give the page a fileextension of '.html'.

  5. When you are done, click the 'OK' button. The words on your page should now be underlined, andbe in blue.

How to Make a Picture Into a Clickable Link

The procedure for making pictures into links that point to other pages or files is not muchdifferent. 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 linkpointing to your home page. If you were to hover your mouse pointer over thesitewizard.com'slogo at the top left hand corner of this page, you will notice that the logo is actually aclickable link that takes you to my home page. This is true not only ofthesitewizard.com, but also of most (if not all) websites on the Internet, so much so thatInternet-savvy users automatically expect to be able to go to the home page of any site byclicking its logo. Since you want your website to be as user-friendly as possible, it'sa good idea to implement this on your site as well. You can use either a relative or absoluteURL. For reasonsalluded to elsewhere, I personally prefer to use an absolute URL to point to the home page, so that those linksgive an unadorned domain name, that is, a plain 'https://www.thesitewizard.com/' without any filenameat the end.

Linking to Other Things

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 havea small thumbnail picture on your current page, and you want your visitors to be ableto see a bigger, higher resolution version when they click it. One way to do this is to makethe thumbnail into a link pointing to the bigger image. You will of course have to copythe both pictures into your 'images' folder. (See chapter 2 if you have forgotten how to do this.)

Save and Preview

Microsoft Expression Web Mac Os 10.13

Save your work and preview the page in a web brower. Move your mouse so that it hovers overthe links you made, and check the URLs that they point to by looking at your web browser'sstatus bar.

If you have used a relative URL in your link, your browser's status bar willshow 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 URLsare resolved by browsers based on the current page's location. Since the home page is on yourcomputer 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 toanother file on your domain.

Absolute links (links that use absolute URLs) should display as-is. So if you linkto (say) 'https://www.thesitewizard.com/', the link should show up correctly wherever yourpage may be.

Next Chapter

In the next chapter, we shall make use of the knowledge you acquired here toadd anavigation 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 onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS 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:


Copyright © 2016-2019 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 7 June 2019.