Linking to other resources on the Internet is probably one of the most common tasks that webmasters will do over the life of their website. Such links may be to other pages on your website, to files on your site like photos or PDF files or some other thing, or even to other websites. You can make any text or picture on your web page into a clickable link. This chapter shows how you can do all these using the Serif WebPlus X2 web editor.
By the end of the chapter, you will have learnt how to link to other pages and files on your site as well as link to other sites on the web. You will also have made your logo into a clickable link pointing to your site's home page.
Please note that this chapter is the fifth part of the Serif WebPlus X2 tutorial series. If you have only just arrived at thesitewizard.com, you may want to start at the beginning. Better still, if you are new to creating websites, you should really begin by reading How to Create / Start a Website: The Beginner's A-Z Guide.
Web addresses, or more technically, "URLs" (for "Uniform Resource Locator"), can be either absolute or relative.
An absolute URL is a web address like "https://www.thesitewizard.com/gettingstarted/serif-webplus-x2-tutorial-5.shtml".
It is a complete address that specifies the site the web page is on, "www.thesitewizard.com", the folder the file resides in,
"gettingstarted", and the actual filename of the page "serif-webplus-x2-tutorial-5.shtml". It is the equivalent of
telling your friend your full home address, that is, not just your street name and house number, but also the city, state and country.
It's also possible to use a relative URL like "serif-webplus-x2-tutorial-5.shtml" to link to other web pages.
This will only work if the page doing the linking is on the same website and in the same folder as the page being linked to. In
the real world, it's like telling your friend your home address by simply saying the street name and house number, and omitting
the city, state and country. Your friend will automatically assume that your home is in the same country, state and city that you're both in.
To make sure that this is clear, let's use an example. Let's say that you have a web page at
"http://www.example.com/products/index.html". On that page, you have a link to another page specified with a relative URL of
"prices.html". Where does the browser look for that "prices.html" file? The browser first looks at the
URL of the current page. In this case, it's "http://www.example.com/products/index.html". It then snips off the filename of
the current page ("index.html") to leave behind "http://www.example.com/products/". Then it appends the relative URL,
resulting in a new URL "http://www.example.com/products/prices.html".
Whether you specify links to your own pages as relative or absolute URLs is a matter of preference. Both links function the same way when they are published to your website. However, if you link to some other site on the Internet (not your current site), you will always need to use the full web address, that is, the absolute URL.
If you were to move your mouse so that it hovers over thesitewizard.com's logo on the top left hand corner of this article, you will notice that it is actually a clickable link. Clicking it will take you to the main page of thesitewizard.com. This is a convention used by the majority of websites on the Internet; that is, the site logo of most sites are actually clickable links that users can use as a shortcut to go to the home page.
Since this is such a widespread practice, it's a good idea for you to make your site logo into a clickable link as well. Following the convention allows you to make your website more usable for your users without needing to be a website usability guru.
Open your web page in WebPlus X2.
Right click your site's logo. That is, click your right mouse button when the mouse cursor is hovering over your logo.
A pop-up menu will appear. Click the "Hyperlink..." item on that menu.
A dialog box, entitled "Hyperlinks", will be displayed. Click the "Site Page" line in the left column.
In the "Page name" field on the right side of the dialog box, make sure that "Home" is selected. (It should already be selected by default, since, at this time, if you haven't skipped ahead of my tutorial, you have no other web pages.) If it's not, click the drop down arrow for the field and select "Home" from the list.
If you want your link to your home page to be an absolute URL, such as "http://www.example.com/index.html", click
the "Export as absolute URL" checkbox below that item. Otherwise, WebPlus X2 will make the link a relative link
("index.html"). Again, as noted above, whether you choose to make it absolute or not leads to the same result.
If you can't decide, leave it at the default; that is, don't tick the checkbox.
Click the "OK" button.
Save and publish your website. Then test your site in a web browser. You will notice that your site logo is now a clickable link, like the logos of most of the professionally developed sites on the Internet. Of course, at this point in time, since you're already on your home page, the link is functionally pointless. However, you will still want to do it to give your website's design a certain consistency. When the navigation facilities on all the pages of your website work the same way and is predictable, users familiar with any page on your website will also know how to navigate the rest of your site efficiently. This results in your site being more usable to them.
If you want to make some words into a link, first select the words. You can do this by dragging your mouse over the words you want to select. Then right click your mouse while it's over the selection, and select the "Hyperlink..." item from the menu that appears.
To make other pictures into a link, right click the picture and select the "Hyperlink..." item from the menu that appears. (Yes, it's the same as what you did when you made your logo into a link. Your logo is, after all, just another picture.)
The "Hyperlinks" dialog box will be shown, as it did when you made your logo into a link.
To link to other pages on your website, select the "Site Page" as you did earlier with the logo, and select the appropriate page from the "Page name" drop down box. I know that at this time, you probably only have one page listed there. However, when you create other pages, as you will in the later chapters of the tutorial, you will see more pages listed in the drop down box.
To link to other sites, click the "Internet Page" item in the left column, then type the URL you want to link to in the
"URL address" field. For example, if you want to link to thesitewizard.com, enter "https://www.thesitewizard.com/" into
the "URL address" space.
If you want to link to some other file on your website, say a Word document, a PDF file or even to a photo or picture, click the "File" item in the left column of the "Hyperlinks" dialog box. Click the "Browse" button to locate the file you want to link to. Make sure the "Embed file into site" checkbox is ticked. If it isn't, put a tick in it. The "Export as absolute URL" can, again, be either checked or unchecked at your option. Leave it at its default setting if you can't decide.
Later, when you publish your website, WebPlus X2 will automatically upload your linked-to file to your site, since you ticked the "Embed file into site" checkbox. You don't have to do anything special or extra.
For those wondering how they can create a PDF book, you will usually need some additional software like one of the things listed on the Free PDF Converters, Editors and Printer Drivers page. Some of the word processors on the Free Word Processors and Office Suites page can also create PDF ebooks.
When you've finished, click the "OK" button to accept your changes. Then save and publish your web page and test it with a web browser.
Congratulations. You have now learnt most of the skills needed to design a web page using Serif WebPlus X2. In the next chapter, you will create most of the other pages on your web site.
Copyright © 2009-2019 by 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 Set Up / Create a Website: The Beginner's A-Z Guide » List of All Serif WebPlus 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 Add Text and Image Links to Your Website in Serif WebPlus X2
