Chapter 3: Creating Hyper Links

From NvuTutoriaWiki

The most important feature of an HTML document is the ability of linking it to other documents or other parts of the same document. By linking it means that we create a hyper-link, which when clicked will show the HTML document (or a part of the same document) in the browser window to which the link points. Without the hyper linking feature, it would be similar to having an advertisement pamphlet without any address or phone number where the user can inquire about more details. Without links users would had to type-in (and remember) the URL for each an every page they want to visit on the WWW.

A link has two ends, called anchors, and a direction. The starting anchor of a link is called "source" anchor which points to the "destination" anchor. The destination anchor can be any of the WWW resources viz. an image, an audio clip, a video clip, an HTML document (either within same or external), or any other file type. For example, the text GNU at the end of this sentence is a link (starting anchor) which points to the website www.gnu.org (destination anchor), GNU.

Contents 1 Creating Internal Links 2 Creating External Links 3 Sample Text 4 Next

Creating Internal Links

Internal links are links to resources in the document being edited. Links internal to a document help in easy and fast navigation. Internal links are very helpful in long documents, where there are several sections. A table of contents at the top helps users skip to the desired part of the document.

To make an internal link, you first need to define the destination anchor. We will create the destination anchor as a named anchor. Select the text where you want the destination of the link to be, and click on the Anchor button on the composition toolbar. This will open the Named Anchor Properties dialog box. If you selected the text you want to make the anchor, you will see the text in the "Anchor Name:" text box. You can also change it if you want to rename it. Fig3.1 shows how the Named Anchor Properties dialog box looks like. Now click "OK" to mark the selected text as named anchor.

Image:NamedAnchor.pngFig3.1 Named Anchor Properties dialog box

The only thing left for us to create the internal link is to define the source anchor. Select the text you want to make as the source link (which will point to the named anchor we just created), and click on the Link button on the composition toolbar. This will open the Link Properties dialog box. Click on the dropdown arrow besides the Link Location and select the named anchor we just created from the list of named anchors. Click OK and save the changes. As an example, if you click on [[Chapter_3:_Creating_Hyper_Links#top|Top], it will take you to the top of this chapter.

Creating External Links

Active, hovering, and visited links' colors can be changed using CSS

External links connect your HTML document to other WWW resources e.g. an HTML document (which could be on your own website or a different one), an image, a video clip, etc. To create an external link, select the text you want to appear as the link with the mouse (click-and-highlight). Then click on the "Link" button in the Composition Toolbar. This will open the Link Properties dialog box. Here you can type in the URL of the destination anchor of the link or click on Choose File... to browse to the file you desire to link and then click Open button. The URL can be relative (if it is on your website) or absolute if you are linking to a document on the WWW. Click OK, to make the changes and save the document.

Relative URLs are the ones which link to a document on the same website using a relative path. A relative path may start with a ./ or with a ../. The ./ stands for current directory, whereas the ../ stands for one directory up in the directory hierarchy. For example, a link like href="../foobar.pdf" would link a pdf document with the name foobar.pdf which is one directory higher than the current document being edited

Image:LinkProperties.pngFig3.2 Link Properties dialog box

Tip: Use relative links for images, or other files which you have on your own web site. This makes a transition of website name much easier as all you will need to do change the website name. All relative links will work as the directory structure remains intact.

Links generated with the above procedure will look like the ones in our sample text. If you click on the links in the "Interesting Links" section of the sample text, they will open the "destination anchor" in your default browser.

Sample Text

Below is the sample text. The text which was formatted with the rules studied above appears black in color.

UNIQ44628264dde9f52-HTMLCommentStrip5055d34e6768e5b000000001

UNIQ44628264dde9f52-HTMLCommentStrip5055d34e6768e5b000000002

Next

In the next chapter, we will learn how to insert images and tables in our HTML document.

©2004-2006 KDS Sahambi