E-mail someone (test only)
Making a page link in the Text Editor
Making a page link in the Text Editor
Blank link type
Link to page in another project
Checked
WebDwarf Tutorials banner
WebDwarf logo
Links (or hyperlinks)

A link (short for hyperlink) is a special object, text or image, that you click to go to another webpage. This page does not have to be on your site -- it could be to any site anywhere.

In this tutorial we cover the following topics:

Link attributes
Link editors
Link types summary
Blank links
Blank links in the Text Editor
Title (for the link)
Code -- Link Editor Code field
Link underline and color
Blank links in the Quick Editor
Blank links to image files
Http links (to a website)
Relative URLs -- making your site portable
Mailto links
Access key links
Problems with links



Link attributes

Here is a typical link: Go to the index page of these tutorials.

Usually text links are underlined in blue like this one, but you can use other colors. You can also place links on images. Links often point to other html pages but they can also point to images, or other files like .PDF files.

Browsers can vary somewhat in just how they display these details, so you may not see all of what we describe next.

Notice what happens when you hover your mouse over a working link. The cursor changes, usually to a hand with pointing finger, and the browser displays the link URL (the location the link points to) on the status bar, if enabled, at the bottom of your browser. In this case, it may also display a little tip, a tooltip, as you hover over the link.

Look for these features on the two links above. If you click a link, use the back button on your browser to return to this page.

If you have a text object, like this one, open in the Text Editor, hovering your mouse over a link will display the link details in the Text Editor status bar at the bottom.





Hand cursor
Link editors

There are two Link Editors available:
The image below shows the Quick Editor opened to display the drop-down list of link types available, and with the blank link type selected.
Text Editor link buttonon
Quick Editor button
Page link
Link types
Link types summary

The Link Editors can create three different types of links that we discuss in this tutorial -- most common ones first:

Blank links
: First on the Link Type drop-down list, blank links allow you to link to another page, a file or a bookmark.
 
Http links
: The standard link to a website. This will be usually some other website, not your current one. If it is your current one, consider using a blank link type instead.

Mailto links
: Open the visitor's e-mail program with the recipient's address already filled out. Perhaps with the e-mail subject line filled out too.



Blank links in the Text Editor

Here is how to set up a blank link type to the index page of these tutorials:
Text Editor button
Link Type
Select the link type from the drop-down list box at the top left of the Link Editor (click on the down arrow and select blank (top item) from the choices available.

URL to link to
Select the URL from the drop-down list box near the top right of the Link Editor (again, click on the down arrow). This will display a drop-down list of links you have used before. Select the one you want to link to, or type in a new one. In this example it is index.html.

Text link to click on
The next field down is the text the link is on. It is a replica of the highlighted text in the editor. You can edit the text here, and the change will appear in the Text Editor when you click OK.



Title (for the link)
The next field is optional for text links. Use it only if there is some extra information your visitor should know before clicking on the link itself. The title text will show in preview when you hover your mouse over the link text.

Note: this operation has nothing to do with the Title Editor or the Page Editor > Title tab, both of which are quite different.



Code -- Link Editor Code field
Here enter any code you want to have associated with the link. You may want to display a page in a particular window, or run some special code when the visitor mouses over the link. Enter the code to do that here. For most uses, you can leave this field blank, but when you do need it, it's very useful.



Link underline and color
if you want a link to look different to the default use these checkboxes:
A common use for this feature is in buttons, where you may want your button text links to look different to other links.

Finally, click the OK button to close the Link Editor.

Try a blank link by making your own link to the HelloWorld.html page. When you have made it, preview your page. One reason it might not work is if the HelloWorld page does not exist in your preview folder. Ensure this by previewing the tutorial project (spyglass button) -- this builds all pages of the project.
 
Here is another example of a blank link type, this time to the Text tutorial.


Preview all pages
Blank links in the Quick Editor

You can make blank links using the Quick Editor in similar fashion to the Text Editor.

When you make a link on a text object in the Quick Editor, it applies to the whole text object. So it pays to use this kind of link only on short text objects. Contrast with a link made in the Text Editor, where it applies to as much or as little of the text as you want.

If you find a lot of text on your page underlined, it may be because you have accidentally made a link on the text object.

Making a page link in the Quick Editor
Link to Home page
Above are two links each going to the index page of this project. The top one is a link applied to a text object, while the  bottom one is a link applied to an image. We made this image with WebDwarf, but you could use the same kind of link on any image. The image on the right shows the Quick Editor > Link tab for the image. Notice how this link has a title. In preview, hover your mouse over the image, and you should see the little popup tooltip.

It is recommended practice to include a short title with links on images -- this gives your  visitor some idea of what the image is about, even if it does not show in their browser.  Should the image be missing, it will also show in place of the image -- the title will appear in the HTML code as an "alt tag" (alternate text).





Http links (to a website)

A link to another web site is somewhat different to a blank link:
There are two examples below. You could make the first text link example equally well in the Text Editor.  For the second, because it is an image, you cannot use the Text Editor. The image on the right is the Quick Editor view of a link on an image.
www.VirtualMechanics.com
Virtual Mechanics logo
Blank links

A blank link type allows you to:
Use this link type when you will be uploading the files to your site by some other means -- e.g. publishing another project, or using a separate FTP program. WebDwarf will not upload any files you refer to in links.
Relative URLs -- making your site portable

If you are linking to other files on your site, in different folders, you can extend the idea of blank links. The usual way WebDwarf works is to keep all published links relative to the root folder of your site, where the html files are. This means you can move the whole published project to another location, and it will still work.

Consider a photo referenced in an HTML page like this (absolute URL):
http://www.YourDomain.com/image/MyPhoto.jpg

That page and photo will work on your site, but if you want to view the same website offline on your local hard disk, or move your website to another domain, you won't see the image. The path to YourDomain is not available in those cases -- and that is the only place that image link will work.

Consider a photo referenced in an html page like this (relative URL):
image/MyPhoto.jpg

That will work anywhere. The link is saying "go to the nearby image folder and show MyPhoto.jpg". The only requirement is that the image folder and contents must accompany the html page wherever you place it.

In general, to go to a file in a lower level folder, as we did for 
MyPhoto.jpg, use a Link URL like this:
Link URL:
lowerFolder/index.html  or
Link URL:
./lowerFolder/index.html
Those two URLs are equivalent (but the first one is more efficient by two bytes). The single dot as in ./ means work from the current folder.

To go to a link in a higher level folder, one level up, use use a link URL like this:
Link URL:
../index.html
To go to a link in a different folder at the same level, use use a link URL like this:
Link URL:
../sameLevelFolder/index.html
The double dot as in ../ means go one folder up.

The bottom line is: where you have a choice, use relative URLs. They are not only much shorter, but they are also more flexible.




Blank links to image files

You can link to any kind of file using a blank link type. Below, we appy it to an image. Notice two things:
Girl -- opens in new window
Click for larger image (18K) in a new window
WebDwarf does not change the link in any way when it publishes, and as mentioned before, does not upload any files involved. The link says that the image is in the /image  folder. Therefore to use a link like this, you need to copy the image, "girl.jpg" from wherever it is stored (the ClipArt folder) to these two places:
Mailto links

If a visitor clicks a "mailto" link on your page, that should open their e-mail program with the address already filled out, and ready for them to enter some text. You can also fill out the subject in advance. No e-mail is actually sent until they click the e-mail program "Send" button.
 
An e-mail link is similar to the other links:
Link type: mailto://
Link URL: someone@somewhere.com

Change the URL to be the e-mail address of your intended recipient. This will often be you yourself -- you want your visitor to send you an e-mail. So just put your own e-mail address there. Test the whole process by sending an e-mail to yourself.

A URL like the above will leave a blank subject line in the e-mail. If you don't want this, enter a link URL like this:
Link type: mailto://
Link URL: someone@somewhere.com?subject=Website feedback

Again, change the subject line to something appropriate for your site.

Below are two fictitious links, one on text, one on an image. Substitute your own e-mail address or that of an understanding friend. You are safe in playing around here -- nothing happens until you click "Send" on your e-mail program. (And of course you won't do that unless you really do want to send something.)


E-mail someone (test only)
Problems with links

When you are testing your projects be sure to publish or preview ALL your pages. If you don't do that, only new one page will be created and your links will end up pointing at old or non-existent pages.

When you have a link that is misbehaving, try this:

Hover your mouse over the non-working link. The status bar at the bottom of your browser should show you the page or other file that the link points at. If you don't see a status bar, you probably have it turned off.

In IE, a missing image displays a little red x in the top left corner of a blank where the image should be. Right click the blank, then examine the image properties to determine what the full URL of the image should be.

For a link to work, you must have a page or file of the exact name in the exact location that the link reports. Either you can fix the link, or place the file at the location the link points at.

Sometimes with links on text objects, you can change the link but nothing seems to happen. It is possible to make the same link in two ways:
The link in the Text Editor takes precedence, so if you are trying to change a link with the Quick Editor, and nothing changes, consider that you might also have a forgotten link in the Text Editor.

If you see a mass of underlined text in a text object, you may have made an unintentional link using the Quick Editor.

Preview all pages
< Tutorials Home
Access key links

In the Link Editors, there is a field marked marked Key. On browsers that are properly equipped, this allows visitors to press a single defined key to jump to the linked page, so avoiding the need for a mouse. This is particularly useful for mobile browsers.

In Internet Explorer, holding down the Alt key plus the single key will set up the link which you can then accept by pressing Enter. I.E. will display the link in the status bar at the bottom of the browser window.

A disadvantage of access keys is that they can hijack normal browser hot keys. For example, I.E. uses Alt+H for "Help". So if you decided to use "H" to be the Home page access key, the normal Alt+H Help hotkey won't work. Possibly not a disadvantage here since nobody reads the Help anyway!

You can use digits for access keys, and they have the advantage that browsers don't often use them as hot keys.

Unfortunately there is no standardization, and you will need some way to let visitors know that they can use access keys.  Schemes can include highlighting the access key in various ways, or perhaps using the first letter of the page name as the access key.

To set a an access key link, enter a single letter or digit into the Key box of a Link Editor. The example below uses a capital "I" for "Index".
Settin an access key link
Setting an access key
The Tutorials Home link links to the index page of these tutorials and has an "I" access key like the one shown. If your browser is set up to handle it, using the "I" access key in preview or in the on-line version of these tutorials should take you to the index page.

In Internet Explorer, down the Alt key while you press I, then press Enter.
< Tutorials Home
Http type link
Making an http link in the Quick Editor
Making a mailto link in the Quick Editor
Quick Editor mailto link
Virtual Mechanics Logo
WebDwarf
®

Tutorials
Home