Help Home

3.4 Linking your pages

To insert a link in a page, first type the text or insert the image where you want visitors to click. Then select it with the mouse or SHIFT + Arrow Keys and press the link button  at the toolbar.

It will open the Link Properties window:

 There are 3 link types:

  1. URL

    The URL link is the most common type of link, since it allows you to link to other pages or files.

    There are 5 protocols listed in the Link Properties window:

    http://

    Is most used protocol. It´s used by the web servers to send pages or other files to users.

    https://

    It´s similar to http:// but with data encryption. It´s used when critical data have to be exchanged between the server and the user, like credit cards number or personal information.

    ftp://

    Can be used to download or upload files to a sever.

    news://

    Used to participate in discussion groups (newsgroups).

    <other>

    No protocol specified - used only for relative links
    (link different pages in the same site)

    If you want to insert a link to another web site, type the full URL without the protocol in the URL text box of the Link Properties window and select the correspond Protocol from the drop down box.

    If you are linking to a page inside your site, you can use the full URL, but we recommend use relative links.

    Image that you have a page called index.php with the URL:

    http://www.mydomain.com/index.php

    and you want to link to another page called news.php:

    http://www.mydomain.com/news.php

    instead of typing http://www.mydomain.com/news.php in the URL field of the Link Properties page, you can just type news.php and set the protocol to <other>.

    The visitor browser will interpret this as a relative link, and will ask for the http://www.mydomain.com/news.php URL if the user clicks the link.

    This is called a relative link.
    This type of links lets you change your pages from domain name or move them between folders in the server and maintain the linking working.

    On the other hand, with absolute links you would have to edit all your links to maintain the linking consistency.
     

  2. Anchor in this page (page bookmark)

    An anchor in a page is a link inside a page that can allow the visitor to jump from one line to another. This is specially useful in long pages.

    It's used many times in the "back to top" links.

    Before you insert the anchor link you need to insert the anchor: put the cursor before the line to where you want visitors to jump to and press the anchor button . In the anchor properties window type a name related to the page content where you inserted the anchor.

    An icon like  will appear to mark the place where you inserted the anchor.

    Now you can select the text where you want to insert the link, select the Anchor type and select the anchor name you typed from the list under Select an anchor by anchor name.

     

  3. Email

    An email link is a link that automatically opens the visitor default email client program prepared to send an email to a specific address.

    Additionally, you can specify a default message subject and message body:

    After clicking the link, the site visitor, can edit the email and send it.

    Note that nowadays, as web mail gets more and more popular, many people don't even have an email client program prepared to send emails. For those that exclusively use web mail, a link email can be frustrating, specially if you hide the email address in some text link other than the matching mail address.
    We recommend you always write the email address directly in the page and press enter or the space bar. The page editor will convert the text into an email link automatically. This way, web mail users can copy the e-mail from the page, while users with email configured can just click the link.

    To write an email address without an associated link, let the editor create the link, select it and press the remove link button  from the toolbar.

 

Examples

Now you are ready to put some links in the web site template we created in section 3.2 using tables. Next picture shows the template as we left it.

Site
Logo
Here

Site Name Here

Left Link Bar

Link 1
Link 2
Link 3
Link 4
Link 5

Ad 1
Here

Ad 2
Here

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

We will replace the links placeholder at the left bar with 2 links: 'Home Page' and 'Google Search'.

The links URLs will be:

http://www.mydomain.com/index.php 
http://www.google.com.

Replace mydomain.com domain with your actually domain name.

First, write the text for the links like:

Site
Logo
Here

Site Name Here

Links

Home Page

Google Search

Ad 1
Here

Ad 2
Here

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Now select the 'Home page' text and press the link button: .

At link properties page select <other> for the protocol and type index.php in the URL text box: 

Since we are linking to a page contained in our site, we should use a relative link. Just type the path of the destination page relative to the current page. Since both pages are stored in the same folder (Easy Web Site Creator stores all pages in a single folder), you just write the page name adding .php at the end.

Alternatively, you could type the full URL http://www.mydomain.com/index.php in the URL text box and select http:// for the protocol. In that case you would be using an absolute link.

Both options would work perfectly well, but when you link to pages in your own web site it´s better to use relative links because:

  • You can type shorter links
     
  • If you plan to change the domain or change your pages folder, you do not need to edit your links. 

Now return to your page template, select the  'Google Search' text and press the link button  again. In the link properties window select http:// for the protocol and type www.google.com in the URL text box:

When you link to other site pages, you must use absolute linking, i.e., you must write the full URL.

Click OK and save your page. Your links should be working now.

 Opening a link in a new browser window

Most links just show the new page in the browser's window, but some times you will need to open the link destination in a new browser window.
 
 
As an example, think when you put a link to another site where visitors can find extra information about some subjects you are writing about. To ensure that visitors return to your site after they look at other sites, you can make a link open the other site's pages in a new window.

Now we will make the Google link added at our sample site open a new window. You can try the links below:

Site
Logo
Here

Site Name Here

Links

Home page

Google Search

Ad 1
Here

Ad 2
Here

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

Content Text    Content Text    Content Text

To make the Google link open it in a new window, put the cursor somewhere inside the 'Google Search' text and press the links button . In the links properties window, navigate to the Target tab:

In the Target option list select New Window (_blank). Close the window with OK and save you page. Click the Preview link and try your link now. You will notice that it opens the Google page in a new window.

To make a link opens a page in the same browser window, just leave the Target option as <not set>

or select Same Window (_self):

 

Next: Inserting images
 

 Last  Next

 

   See also:

 

Copyright © AWE Editions, Lda. 2006

This page was created with AWE Easy Web Site Creator