HTML.co.uk

Hyperlinks play an important role in HTML. We always need to jump from one web page to another several times while surfing the internet. Hyperlinks make this task practically feasible. They redirect us to another location on World Wide Web once clicked. All the textual links on a web page which we click to go to another web page are hyperlinks. The most common attribute of hyperlinks is that when we roll over our mouse cursor on them, the cursor transforms into a hand with a pointing finger towards the hyperlink. Hyperlinks are also known as anchors. They mark textual data and images as a point which, when clicked, redirects to another web page, text or image. There are two types of hyperlinks in HTML:

1) External Hyperlinks
2) Internal Hyperlinks

External hyperlinks are those which points to another web page. On the other hand, internal hyperlinks are those which points to a different location on the same web page. Both the links are created by using <A> (anchor) tag. We can create the hyperlinks with the help of three attributes:

a) <A>, the anchor tag
b) HREF=””, which is used with the <A> tag
c) URL, which is used with HREF to tell the link where to redirect the user.

For example: to create an external hyperlink we can write the HTML code as:

<A HREF=”http://www.yahoo.com”>Go To Yahoo</A>

According to the above example, if you click on ‘Go To Yahoo’ text, you will be redirected to http://www.yahoo.com URL which is mentioned with HREF attribute.

Sometimes, we also need to jump to a specific location on the same web page instead of going to another web page. In these circumstances, internal hyperlinks are used. To create internal hyperlinks we have to decide the location and its name. Then, the name of that location will be used to jump to that location. When a particular location is identified, then to assign a name to it the ‘name’ attribute is used with the <A> tag. For example:

<A NAME=”bottom”>BOTTOM</A>

<A HREF=”#bottom”>go to the bottom </A>

In the above code, first of all we have assigned a name to the text BOTTOM as bottom with the help of NAME attribute. This text is written at the bottom of the web page. Then, in the next code we have specified that name after the HREF which will take us to the bottom of the page. One more thing which is to be noted here is that there is no filename before the # sign. This indicates that the link is pointing towards a location on the same web page.

Apart from external and internal hyperlinks, we can also insert e-mail links in the HTML documents. For this purpose, ‘mailto:’ protocol is used instead of http. For example:

<A HREF=”mailto://query@contentmantra.com”>Post your Queries</A>

According to the above example, if somebody clicks on the Post your Queries text, then the query will be submitted to query@contentmantra.com. For this purpose, after clicking on the link Microsoft outlook will get opened by default if it is installed on the system.

Images are an important part of web pages nowadays. There is hardly a website which does not contain at least one image. Images describe the idea and the concept in an easy way and more beautifully. They are used to enhance the user interactivity with the web page. Good images arrest the attention of the user and boost his interest in the website. Images can be used to say something, to make the website creative, to attract the user etc. One of the important ways the images can be used in a website is in the form of hyperlinks. Images can be linked to hyperlinks, they are used as hyperlinks and they can be used as the download links so that the user can download them via internet. When we use an image as a hyperlink, it redirects us to a new location, or a new web page or to another image. To use an image as hyperlink, first of all we have to insert an image in our HTML document by using the <img alt=”" /> tag. We can set the border, height, width and other attributes of the image as required. Once the image code is written, just add <a> tag before it and at the end of the code put </a>. This will transform the image into the hyperlink. For example:

<A HREF=”URL”><IMG SRC=”d:\my folder\image1.jpg” WIDTH=”300” HEIGHT=”100” BORDER=”10” ALT=”This is the main page”></A>

The URL specified after the HREF attribute will tell the hyperlinked image where to redirect the user when he clicks on it. This URL can be a path to a .html document or it can be the name of an image file also.

For example:

<A HREF=”image2.html”><IMG SRC=”image1.html”></A>

Or

<A HREF=”http://www.yahoo.com”><IMG SRC=”image2.html”></A>

We can also make a hyperlink to point to an image. It means that when the user will click on the hyperlink it will be shown the image associated with that hyperlink. The code for this can be written as:

<a href=”http://www.contentmantra.com/image1.jpg”>Click here to display image</a>

Whenever the user will click on the ‘Click here to display image’ text, he will be shown image1.jpg located at http://www.contentmantra.com. After the image is displayed, you can right click and save it to your computer’s local hard drive. You can also use the target attribute of anchor tag to tell the web browser where to open the new image. The most commonly used predefined values of target are _blank, _self, _parent, and _top. Each of them will open up the image or the document associated with the hyperlink at different locations. The details of all the four values are as follows:

1) _blank: This will open the linked image/document in a new browser window with no name.
2) _self: This will replace the current html page to show the linked image/document. If the original document which has hyperlink on it is in a frame or frameset, then the _self will open up the linked image/document within that frame.
3) _parent: It will replace the html page it came from.
4) _top: This will load the linked image/document in the current browser by replacing anything within the browser.

The use of the targets is not mandatory. They are optional attributes which may or may not be used with <A> tag.

Links and images make the page come alive. For this you need to know about the common tags and the character tags along with their key features such as formatting tags. Before doing the tags one has to know about links and images. A basic knowledge of these is needed in order to make your page reveal your persona with the links and images on it .Let us first go through what are tags related to links and images

Links are the basic hypertext constructs, which help you to navigate from one resource to another either on the same page or between two pages. Images on the other hand are basically used in the background of the document or in the web page and maybe sometimes even in the logo. So the need arises to format this image or even add a new image. For all these purposes we need some tags related to images and links. When you use the tag <BODY> and </BODY> as tag then you are referring to the body of the text document. To change or edit the visited colour code you use the tag

VLINK=”#Colour Code” and

For unvisited colour code, you can use the tag

LINK=”#Colour Code”.

<A Name = “Label”> moves to the other portion of the web page. This link tag helps in navigating between web pages. <A HREF=”Item Location> helps you go to the destination marked by this link. So links are basically used to get two items or pages linked. This way documents are shared on the web.

You can use similar tags for the images too. Let us study each tag one by one. This is indeed a fun way of learning the HTML tags. You don’t need to be a master to understand this. Even basic computer knowledge is helpful to understand the tags. When you wish to import an image from its location, you need to use the tag
<IMG SRC =”Image Location”>. You can either align the text at top middle position and bottom middle or align it left, right and center. For this you use the tag

ALIGN=”Left, Right” and ALIGN=”Top, Middle, Bottom”

For alternative text you use the tag ALT while for bordering the image use the tag border. You can even change the width of the image in pixels by using HTML by using the tag WIDTH. Similarly, the height can also be changed by using HEIGHT. You may also decide the amount of horizontal and vertical space you require around your image by using the tags VSPACE and HSPACE. Now this is easy and you don’t need to be afraid of HTML programming anymore. Not that tags form HTML programming but they are definitely the basis for this programming and without understanding this you cannot move ahead.

Let us see how to add an image to your web page. You need to use the following command to add the image:

<img src=” . . . “>.

In the area marked by dot, as shown above, you need to place the name of the file containing the image you are planning to use to add the image.

A tip for HTML beginners: the element we are describing here has nothing to do with normal, clickable links inside an HTML file. Such links are described in a separate chapter.

The possibilities described on this page do belong to the stone age of HTML (1995), and are unfortunately not supported by all popular browsers today. Nonetheless, they offer one the amazing possibility to explicitly declare internal hypertextual dependencies of an HTML file, such as the previous or next page, or the sub-page and more. Search services or software can then produce entire “Site maps” of your HTML project, as in graphical representations of the site’s layout.

Web browsers should, if you find such tags in an HTML file, display a button or similar user element for the tags. By clicking the buttons, the user should be able to jump to the linked destinations. Microsoft has yet to adopt this reasonable navigation possibility, while other browsers, such as Opera, have long used it. Firefox has economised the navigation possibility with an individually installable extension (Firefox Add-ons).

You can write tags such as home page, index, glossary, help, first, previous, next, last and so on for every HTML file. However, you can also only use the tags you require. The following example shows link elements defined for this page.

<head>
<link rel= “author” title= “About Us” href= “http://www.html.co.uk/about”>
</head>

Explanation:

With <link rel you introduce a logical file relationship. Afterwards the type of file relationship follows. The following are recognised attribute values:

rel= “contents” relates to the contents.
rel= “chapter” relates to the chapter.
rel= “section” relates to the section.
rel= “subsection” relates to the sub-section.
rel= “index” relates to the index.
rel= “glossary” relates to the glossary.
rel= “appendix” relates to the appendix.
rel= “search” relates to the search function.
rel= “author” relates to the author.
rel= “copyright” relates to the copyrights.
rel= “next” relates to the next file in the “guided tour”.
rel= “prev” relates to the previous file in the “guided tour”.
rel= “first” relates to the first file in the “guided tour”.
rel= “last” relates to the last file in the “guided tour”.
rel= “up” relates to a higher level chapter page in the domain.
rel= “top” and rel= “start” relate to the starting page or home page.
rel= “help” relates to the help section.
rel= “bookmark” relates to a general point of orientation.
rel= “stylesheet” relates to a file with style definitions that are used to display the site.
rel= “alternate” relates to files with the same content as the current site, but in a different document version.
rel= “alternate stylesheet” relates to a file with alternate style definitions, which can be used for displaying the site if the user so wishes.
rel= “shortcut icon” relates to the icon shown for the site in the favourites.

You can also write multiple link elements with the attribute values chapter, section, subsection, appendix, bookmark, alternate, stylesheet, and alternate stylesheet if desired.

The href attribute serves to ensure where link with a destination should lead to. The same rules apply with value allocation as with regular links.

You can define the caption used by the browser when displaying the link button with the title attribute. The information should describe the link destination.

The following possible attributes inside a <link> tag are:
media for determining the export medium.
target for information on the destination window, that the link should direct to. With frames it can be one of the defined frame windows. But a reserved window name can also be entered: target= “_blank” opens the link in a new browser window, target= “_top” opens the link in the entire browser window and prevents the display of all eventually displayed framesets, while target= “_parent” opens the link in an upper level frameset and frees the display from the inner frameset.
hreflang allows you to enter the link destination site’s language using the language abbreviations.
charset allows you to specify the encryption the link destination uses.

The link element can also have universal attributes.

Take Note:

Next to the effects of the link elements in HTML, there are also additional elements that serve to define certain downloadable fonts.

An example:
<link rel= “fontdef” src= “http://www.meine.com/fonts/chianti.pfr”>
That way you define the font called chianti.pfr inside the HTML file. We will examine the topic of downloadable fonts more closely in a separate section.
If you work in XHTML standard, then you must write the link element as content less. Write the standalone tag in the <link … /> form to do so.

Backtracking Relationships

Backtracking relationships are envisioned for “bidirectional” relationships between two HTML files. This is the case if document A links to document B and B also links to A, if both are logical linking targets for the other.

Just like the logical file relationships, backtracking in button form should also be possible, although the main browsers remain silent on this option. Search engines can reach interesting conclusions regarding a project’s hypertext structure with backtracking relationships.

An example from file_1.htm:

<head>
<link rel= “alternate” href= “file_2.htm” title= “second reading method”>
</head>

An example from file_2.htm:

<head>
<link rev= “alternate” href= “file_1.htm” title= “first reading method”>
</head>

Explanation:

With <link rev you introduce a backwards relationship. Otherwise the functionality is identical with <link rel used for the logical relationships to other sources. The same attributes are also possible. In the example above you can see how two HTML files, whose supposed content concerns the same topic from different points of view, can logically be linked with one another through backtracking.