Links

Links are one of the most important features of HTML, because they allow HTML documents to function as hypertext documents. Links are created using elements that have URLs (Uniform Resource Locators). A URL is the address of a file (and possibly a specific location in that file); it is written in a format that a Web server understands, and that a browser can use to access the file over the Web. An example of a URL is:

http://www.sq.com/doc/tutorial.html

Most of HoTMetaL PRO's commands for working with links are in the Markup menu.

Link elements

Certain designated `link' elements can contain URLs. URLs are attributes of the element, which means that they are values that are associated with the element, but which are not part of the content of the element (that is, text or sub-elements).

The link elements are:

• A (anchor): this element is used whenever you want to make a hypertext link to another document, or to a specific location in another document or the current document. Since this element occurs so often there is a special command, Insert Anchor... in the Markup menu, for inserting it. You can also click on the toolbar button.
• IMG: this element is used to include a graphic file in an HTML document.
• FORM: this element's URL specifies a program on a Web server that the form should be sent to for processing. See the tutorial on forms for more information.
• BASE: you use this element if you need to record the current document's URL within the document itself. See the section Relative URLs for more information.
• INPUT: this element is used to represent various types of graphical controls in a form. One of your options is to use this element to display an image, which can be clicked on to submit the form.
• LINK: this `head' element can contain URLs that indicate a relationship between the current document and other documents.
• HR: this element's URL can specify an image file to be used in place of the horizontal rule in capable browsers.
• UL: this element's URL specifies an image to be used as a list bullet in capable browsers.
• LI: this element's URL specifies an image to be used as a list bullet in capable browsers.
• FRAME: the URL specifies the document to be displayed initially in the frame window.

If the mouse pointer is over one of these elements, its URL is displayed in the message area at the bottom of the HoTMetaL PRO window.

The parts of a URL

URLs can be divided into two groups: complete URLs and relative URLs. A complete URL contains the following parts:

• A scheme (e.g., http, ftp, gopher) that specifies how the browser should retrieve the file.
• A server address (e.g., www.sq.com) that specifies which server the file is located on.
• Optionally, the server address can have a port number attached to it:

  www.sq.com:8888

  A port number is required if the Web server is not running on the default port (that is, 80). This normally occurs only if the site has more than one server running on it.
• A path, a sequence of directories (folders), terminating with a filename. This specifies the file to be retrieved.

Consider the example at the beginning of this section:

http://www.sq.com/doc/tutorial.html

Here the scheme is `http', the server address is `www.sq.com', and the path part of the URL is `doc/tutorial.html'.

Note: The path/filename is often omitted in the URL of a site's home page. The server will generally return a file-usually `index.html'-by default. For example, `http://www.sq.com/' is the URL for SoftQuad's home page.

A relative URL will be missing some of this information, and a browser will have to obtain the missing information from the URL of the document that contains the relative URL. For example, suppose the document http://www.sq.com/doc/tutorial.htm contains an anchor with the URL /authors/orwell.htm. This URL contains a path and filename, but no server location. In this case, the browser will search for the document on the same server as tutorial.htm, the file that contains the URL.

Creating links with HoTMetaL PRO

HoTMetaL PRO makes it easy to create and edit links.

Inserting a link element

If you want to create an anchor (an A element):

• Click on the toolbar button.

Or:

• Choose Insert Anchor... in the Markup menu.

The Edit URL dialog box appears automatically.

To insert an image (IMG element):

• Click on the toolbar button.

The Image Attributes dialog box appears automatically.

If you want to create any other kind of link:

• Insert the link element using Insert Element..., the form editor, etc.
• Choose Edit URL... in the Markup menu. (If the current element is A, clicking on the button is equivalent to choosing Edit URL....)

Editing URLs

To edit the URL of a link element (other than an image), choose Edit URL... from the Markup menu.

To edit the URL of an image, choose Image Attributes... from the Tools menu. The dialog box that appears lets you enter information used only for images. If you click on the [Edit URL...] button in this dialog box, you will get a dialog that is identical to the Edit URL dialog, with one exception, noted below. See the chapter Working with images for more information.

The `Edit URL' dialog box

The Edit URL dialog box contains the following controls for creating a URL:

• An option menu labeled Scheme, containing a list of schemes for URLs. The scheme describes how the information contained in the URL is to be used by a browser. Some common schemes are:
  • file: indicates a file on a local filesystem.
  • ftp: indicates an address on an ftp server.
  • gopher: indicates an address on a gopher server.
  • http: indicates an address on a WWW server.
  • mailto: indicates that the URL specifies a mail address
  You can also type a scheme directly in the text entry box to the left of the option menu.
• The Host text entry box is for entering a server address, such as a WWW or ftp server, or the `domain name' in a mail address.
• The Port text entry box is for entering a port number.
• The Path text entry box is for entering the filename (and often a path), or a user name in a mail address.
• The [Choose File...] button to the right of the Path text entry box will bring up a file chooser dialog box. This dialog box can be used instead of the Path text entry box when the path component of the URL is a file on your system.
• There is an option menu that lets you choose between Name and Query. If you want the URL to be a link to a specific location, choose Name and enter the name of the location in this text entry box. Do not enter the `#' character that separates the location name from the rest of the URL: HoTMetaL PRO will insert it for you when it creates the URL. (You can also use the Name Target.../Connect Link command pair to set up a link to a specific location. See the section Pointing to a specific location for more information.) Query is used if you want to specify a query for a searching program.

Note: The dialog box used to edit the URL of an image (IMG) element does not have the `Name/Query' control group.

Entering the URL

HoTMetaL PRO creates a URL with the correct syntax from the information you've entered. Suppose you have entered the following:

• Scheme: http
• Host: www.sq.com
• Path: orwell/homage.html
• Name: catalunya

From this information, HoTMetaL PRO constructs this URL:

http://www.sq.com/orwell/homage.html#catalunya

Notice that HoTMetaL PRO inserts the `/' between the host and the path. Since this scheme specifies that the path starts with a slash, you don't have to type it yourself. In fact, in this case, if you do start the name with a slash, HoTMetaL PRO will ignore it. HoTMetaL PRO also inserted the `#' before `catalunya'.

Note: Certain characters will be converted into an `escape sequence' if they are entered into the `Edit URL' dialog box. In particular, a number sign (#) will be changed to `%23', and a space to `%20'. These forms are equivalent to the characters they replace and are interpreted correctly by all browsers.

Pasting a URL from another application

Sometimes you may wish to paste a URL-from another application or document, for example-rather than constructing it piece by piece. If you do this, you should paste the URL into the Path text entry box of the Edit URL dialog. The next time that you open the Edit URL dialog box for the element in question, each part of that URL-Scheme, Host, etc.-will be displayed in the correct text entry box in that dialog.

Using the URL hotlist

HoTMetaL PRO lets you maintain a hotlist of frequently used URLs. When you need to insert one of these URLs, you can just pick it from the list instead of having to enter the information over again.

To add the URL you're currently editing to the hotlist:

• Enter the scheme, host, path, and name or query as needed.
• Click on the [Add to Hotlist...] button in the Edit URL dialog box.

You'll then see a dialog box that displays the URL and lets you enter a description. This description is how the URL will be displayed in the hotlist dialog box.

• Enter the description. If you leave the description blank, the URL itself will be used as the description.
• Click on the [OK] button.

To pick a URL from the hotlist:

• Click on the [Hotlist...] button in the Edit URL dialog box.

A dialog box will appear, displaying the description of each URL in the hotlist.

• Double-click on the URL you want. Alternatively, you can select a URL and click on the [OK] button.

To delete a URL from the hotlist:

• Click on the [Hotlist...] button in the Edit URL dialog box.
• Select the URL that you want to remove.
• Click on the [Delete from Hotlist] button.

To append a Mosaic hotlist or Netscape Navigator bookmarks file to the HoTMetaL PRO hotlist:

• Click on the [Hotlist...] button in the Edit URL dialog box.
• Click on the [Append Hotlist...] button in the dialog box that appears.
• Choose the hotlist or bookmark file file that you want to append.
• Click on the [OK] button.

Pointing to a specific location

Here is an example of a URL that points to a specific location in a document:

http://www.sq.com/authors/orwell/homage.html#madrid

The characters `#madrid' at the end of this URL point to a specific location in the document that the URL refers to. For this link to work:

• The document homage.html must contain an anchor (`A' element) at the location you want to point to.
• The anchor must have the name `madrid'. The next section explains how to assign an anchor name.
• If possible, this element should contain some text, as otherwise some browsers will not be able to locate it.

Creating `source' and `target' links in HoTMetaL PRO

In this section, the link that you click on to jump to a specific location is referred to as the `source' link; the link that is at the location that you jump to is referred to as the `target' link.

The quickest way to create the links is to use the Name Target... and Connect Link commands in the Markup menu (or the equivalent toolbar buttons).

• Put the insertion point or selection at the desired location of the target link.
• Click on the (Name Target) toolbar button.

HoTMetaL PRO gives you a dialog box in which to enter a name for the target link (`madrid' in the example above). If there is a selection when you click on the toolbar button, the first word in the selection will appear in the dialog box by default, but you can enter something else if you want. Link names typically consist of one word, but you can enter more.

• Enter a name of your choice and click on the [OK] button.

HoTMetaL PRO inserts an A element, surrounding the selection if there is one. (This element's NAME attribute will be set to the value you entered.)

• Put the insertion point or selection at the desired location of the `source' link. This can be in the same document, or another document.
• Click on the (Connect Link) toolbar button.

HoTMetaL PRO inserts an A element, surrounding the selection if there is one. This element's URL will point to the target link. Since the `path' part of this URL will refer to the local directory containing the document with the target link, you'll have to modify the URL before putting the document on the Web. See the section Changing your URLs for the Web for more information.

You can perform other actions in between creating the two links, but HoTMetaL PRO will remember only the most recent target link that you created with Name Target... (or the equivalent toolbar button).

If it's not convenient to use Connect Link (perhaps you want to enter all the target or source links first) you can use Insert Anchor... in the Markup or the equivalent toolbar button to create the source links. In this way you can create the links in any order. To create a source link:

• Put the insertion point or selection at the desired location of the source link.
• Click on the toolbar button.

HoTMetaL PRO inserts an A element and brings up the Edit URL dialog box.

• Enter the scheme, host, and path in the usual way.
• Choose Name from the option menu underneath the Path label (this should be the default).
• Enter the name of the target link in the text entry box to the right of Name.
• Click on [OK].

Use Name Target... in the usual way to create the target links.

Syntax of URLs

The information in URLs has to be arranged in a way that the browsers and servers can understand it-in other words, it has to conform to the correct URL syntax.

Since the Edit URL... command helps you create URLs, you don't usually have to remember the details of the syntax: we've included this information here anyway because we believe that it will help you create URLs if you know what's really going on when you make a URL.

There are actually several URL formats, but fortunately most of the ones you'll have to use fall into two groups.

Files on a Web server

When you create a link to another HTML document or to an image, you'll usually be specifying a file on a Web server. In this case, the parts must be arranged in the following order:

1. The scheme, which will be http.
2. The characters `://'.
3. The server address, e.g., www.sq.com.
4. The `/' character.
5. The path/filename.

The URL syntax requires that directory names in the path part of the URL be separated by slashes.

If you're creating this kind of URL with the Edit URL... command, choose the `http' scheme. Then you just need to enter the server address and path/filename: HoTMetaL PRO will construct the URL for you.

Files on your system

If a URL specifies a file on your local system, rather than a file on a Web server, you would write the URL a little differently. You can refer to a file on your local system only while you're developing and testing your document. When the document is published on the Web, it should refer only to other files available over the Web. See the section Changing your URLs for the Web for information on how to convert `local' URLs to URLs for the Web.

If you're creating this kind of URL with the Edit URL... command, choose the `file' scheme. Then you just need to enter the path/filename. Notice that you don't need a server address, since your local disk is assumed to be the `server'.

Relative URLs

Relative URLs (also called partial URLs) do not contain the complete information required for a browser to locate the file they refer to. For example, the scheme or network address could be missing.

Reasons to use a relative URL

Some of the advantages of using relative URLs over complete URLs are:

• Less typing is required to enter them.
• If you move all the files to a different location but keep the same directory hierarchy you don't have to revise the URLs.
• The same file referred to by a relative URL can be accessed by different schemes (for example both `http' and `ftp').

Base URLs

The browser has to figure out the missing information, based on the URL of the document that contains the relative URL (this is called the `base URL'). The browser has to construct a complete URL by combining the the relative URL with the relevant information from the base URL.

The base URL can come from one of two sources.

• If the current document contains a BASE element, then the URL specified in this element is used as the base URL for all relative URLs in the document. You should put a BASE element in your document if it contains relative URLs and you expect users to download the document to their local systems and browse it later.
• If there is no BASE element, the URL that the browser used to retrieve the current document will be the base URL.

Interpreting relative URLs

The following guidelines are slightly simplified and don't represent everything that can be said about interpreting relative URLs, but they cover the most frequently encountered cases. Remember that the process being described here is being done `internally' by the browser when it's interpreting the relative URL: the browser doesn't actually modify the URLs in your document.

1. Relative URLs can start with one of the following:
   • A double-slash: `//'.
   • A single slash: `/'.
   • A file or directory name.
   • A dot `.'.
   • A double dot `..'.
2. If the relative URL starts with `//', then the only thing missing is the scheme (http, etc.). In this case the scheme is inherited from the base URL to make a complete URL.
3. If the relative URL starts with a single slash, then the scheme and the server address are missing. Both of these will be inherited from the base URL to make a complete URL. For example:

   /orwell/face.gif

   A file with this URL will be retrieved with the same scheme and from the same server as the document that contains the URL.
4. If the relative URL starts with a directory or filename, then the procedure that a browser will use to make a complete URL is to remove the filename from the base URL and then append the relative URL to it. For example, suppose the relative URL is:

   orwell/homage.htm

   and the base URL is:

   http://www.sq.com/authors/contents.htm

   The browser removes the filename from the base URL to get:

   http://www.sq.com/authors/

   Now the browser appends the relative URL to this to get the complete URL:

   http://www.sq.com/authors/orwell/homage.htm

5. A couple of special characters can occur in relative URLs:
   • A relative URL can start with the characters `..'. This means `go up one directory level'.
   • The character `.' at the start of a relative URL means `the current directory'.
   If the complete URL that you get by combining the base and relative URL contains the characters `/../', e.g.,

   http://www.sq.com/authors/../orwell/homage.htm

   then the browser interprets this by removing the directory that precedes those characters from the URL. The resulting URL from the last example would be:

   http://www.sq.com/orwell/homage.htm

   The directory `authors' has been removed.

   If the URL contains the characters `/./' then the browser will simply remove `./' from the resulting URL.

   These characters aren't interpreted as special characters unless they occur as the only thing between two slashes (`/../' or `/./'). For example, the sequence `/tom../' just refers to a directory called `tom..'.

Creating relative URLs with HoTMetaL PRO

If you're creating a relative URL with HoTMetaL PRO's Edit URL... command, leave the Scheme text entry box blank, and enter the required information in the Path text entry box. You can convert complete to relative URLs using the Publish... command.

The `mailto' scheme

The mailto scheme is used:

• As the `action' for a form that is to be e-mailed.
• In an anchor, which can be clicked on in a browser to generate a mail-editing dialog box.

Inside an A or FORM element, as appropriate:

• Choose the Edit URL... command in the Markup.
• In the Edit URL dialog box, choose the `mailto' scheme.
• Enter the user name in the Path text entry box.
• Enter the domain name in the Host text entry box.

The resulting URL is:

mailto:charles@windsor.org 

In a form, there is one more thing you have to do in order to use mailto:

• Choose Element Attributes... from the Markup menu.
• Set the METHOD attribute to the value ` POST'.

Some browsers do not support mailto. Also, in order for this feature to work if your system is behind a firewall, you may need to configure your browser to use the correct proxy server. See your system administrator and browser documentation if this is the case.

Displaying URLs

By default, HoTMetaL PRO displays the URLs associated with relevant elements in the prefix of the element's start-tag. If you want to hide the URLs, choose Hide URLs from the View menu: the URLs will disappear from the display, and the menu item will toggle to Show URLs. Clicking on Show URLs will cause the URLs to be displayed again. You can configure HoTMetaL PRO to show or hide URLs by default in the Defaults for New/Open section of the Options dialog box.

When the mouse cursor is over an element containing a URL, the URL is displayed in the message area at the bottom of the HoTMetaL PRO window.

Changing your URLs for the Web

Before a completed HTML document is moved to a WWW server, all URLs should refer to documents that are available on some WWW server. (While the document is being created, they may refer to documents on your local system.)

For example, when you are creating a document the URLs may consist of local filenames such as:

file:///home/squabble/rodney/orwell/catalonia.html

When the document is placed on your server, you must substitute URLs that refer to documents that are available on your server or some other server. For example:

http://www.sq.com/orwell/catalonia.html

The Publish... command gives you the opportunity to edit all the URLs, modifying them if necessary. This command is a form of `find and replace' for URLs.

When you choose Publish... you will get a dialog box containing two text entry boxes.

The first box (labeled Change URLs From) contains a part of the URL that you want to change; the second box (labeled To) contains the text that you want to change it to. You can enter text in these boxes to replace the default text.

If there were a large number of URLs for which you needed to change a local directory such as file:///home/squabble/rodney to a server address, such as http://www.sq.com, you could enter:

file:///home/squabble/rodney

in the Change URLs From text entry box, and:

http://www.sq.com

in the To text entry box.

Finding and replacing URLs

When you click on the [Find Next] button, HoTMetaL PRO finds the next element that has a URL matching the Change URLs From text. The insertion point is placed inside that element, and the document scrolls to its location. The search starts at the insertion point or selection.

Clicking on the [Replace] button will change the text you're searching for to the text in the To box.

Clicking on the [Replace All] button will make this change for all URLs in the document that contain the Change URLs From text. This also dismisses the dialog box.

This form of `find and replace' matches only starting at the first character of the URL.

See also the Publish... tutorial.

Changing to relative URLs

You can change your URLs so that they are in relative rather than complete form. What this generally involves is deleting the first part of all URLs; that is, the scheme, the host, and perhaps part of the path. For example, if your current links were all of the form file:///home/squabble/rodney/orwell/[file].htm and you wanted to put them in a directory on the Web, it could be useful to put them in relative form, if all your files were in a `flat' directory on your web site. In the Change URLs From text entry box, you would type file:///home/squabble/rodney/orwell. You would not type anything in the To text entry box. The net effect of that publish operation would be to strip the scheme, host, and most of the path, and leave you with [file].htmlfor all your URLs.

Publish operations could also add `./' and `../' to the beginnings of your URLs, change all URLs to a different sub-directory on the same site, etc.

For more information

Choose Technical Reference from the Help menu for references to standards documents that define URLs.