Hyper Links :: Link Text, Hot Image, Image Map

... From 11
Hyperlinks  
 
Link = The means of connection between things linked in series
Hyper Text = Machine-readable text that is not sequential but is organized so that related items of information are connected
Hyperlink = A link from a hypertext file to another location in the same file or another file.

The objective of the hyper link is to take the user to the designated location. It is activated by clicking on a highlighted text or image at a particular location on the screen

• Links in Web Pages

The pages on the computers accessible through the computers connected to the internet (i.e. on the web) are interconnected either directly or indirectly by links.

Links are the guides to other pages on the web. Both text and images act as links. These are many a times termed web links.

Move To  

Text Links  
 
When the text on a web page acts as a link we call it a "Text Link".

• Display Text

The text that appears on the web page representing the link is called the "display text". It can be anything from a single character to any number of characters. The display text is surrounded by the (<a>) tag to make it work as a link.

• Appearance

Typcially text links are underlined and are displayed in blue color, though they need not be so always.

• Hover

hover = Hang in the air; fly or be suspended above [A helicopter hovers over the ground before landing]

With regard to a text link, the action of pointing at the link and swaying the pointer to and fro over it is called hovering.

When you point at (hover over) a text link the mouse pointer changes its shape to that of a hand and the color of the link changes in most cases. In some cases the link formatting changes while the mouse hovers over it.

• Hover Color

Web page designers can set up the hover color for a link. They can designate the color that the link text should take when the mouse hovers it.

Blue text-link color and Red hover color are most commonly used.

• Visited Color

The browser has a cache of pages that you have recently visited and can identify the links for those pages which you have recently visited. These links which relate to the pages that you have recently visited as recognised by your browser are called visited links. Visited links are generally displayed in purple color.

Knowing the pages one has visited earlier would enable a user from unintentionally revisiting the same pages over and over again. Users frequently move in circles visiting the same page a number of times. This behaviour would not be because they want to, but because there is nothing there to help them realise that they've already been there.

Image Link » Hot image  
 
When the image on a web page acts as a link we call it a "Hot Image". Just like a text link, this image link also points to a file on the web. The image itself being a file on the internet, there would be two files involved when an image is used as a hot image.

By default, a text link is blue in color and is underlined. Similarly, a hot image has a blue border around it. Therefore, if you think that the blue colored border looks odd, either set the image border to zero or set the border color using the style attribute.

Move To  

Image Link » Image Map  
 
In some cases, a hot image is divided into a number of regions with each region working as a link to a different destination. In such a case the image is called an "Image Map".

The regions within an image map can be marked as a rectangle, circle or any polygon of n sides. Only the regions within the image which are marked act as links. There may be some area within the image which does not act as a link to any file.

The different parts of the image that work as hyperlinks can be noticed when you navigate between links using the Tab key. The tab key moves the selector between the various links on the web page. You can also notice the changing urls on the status bar as you move between the various parts using the tab key or on hovering over the various parts using the mouse.

Creating a Text Link  
 
A text link when viewed in HTML mode would look like this

<a href="http://www.learning-blogging.blogspot.com/">Visit My Blog</a>

The display text would be placed within the the anchor tags <a>__</a>

• Compose Mode

In Compose mode we would only use the link text and the url to which the link should point.

Select the text that you want to use as the display text and click on the "Insert Link" tool button.

A dialog box to enable you to enter the destination "url" represented by the link is displayed.

The link would be made with the selected text as the display text.

If you try using the tool when in Compose mode without selecting anything, the blogger program will display an error message.

A text link is created by placing the text that works as the display text within the anchor tags (<a>...</a>). The tags together with the content in between form the anchor element. You can notice the "<a> tag getting added if you switch to the HTML mode immediately.

How the link would appear in the blog finally is dependent on the template you are using for the blog.

• HTML Mode

The HTML code that defines a link is the anchor tag.

<a href="http://www.learning-blogging.blogspot.com/"></a>

» Open/Begin – <a href="thezing.blogspot.com/">

The begin tag is actually <a>. However it does not carry any meaning and purpose without the "href" attribute which indicates the url to which the link points.

» Close/End – </a>

As for any other HTML element which requires an end tag, the end tag is nothing but the begin tag with a slash before the name.

Decide upon the link text and include the begin tag just before the beginning of the link text and the end tag just after the ending of the link text. Ensure that the url to which you want the user to be taken is included as the "href" attribute within the opening tag.

<a href="thezing.blogspot.com/"> because bloggers are the fastest reporters on this earth </a>

You can also create a link by typing in the anchor tag first and then entering the link text between the opening and closing tag.

<a href="thezing.blogspot.com/"></a>

You can use the "Insert Link" button to insert a link just like in the case of the Compose Mode.

Unlike in the Compose mode you can insert an empty anchor tag using the link button. You can notice the code getting inserted since you are using the HTML mode.

One has to be cautious in selecting the text intended to be link text as in the HTML mode both the text and the HTML tags would be in display.

Move To  

Creating an Image Link  
 

• Compose Mode

Click on the image that you want to use as the hot image to select it. The bounding boxes of the image would be visible on selection.

Click on the "Insert Link" tool to display a dialog box to enable you to enter the destination "url" represented by the hot image. Enter the destination "url" in the "Enter a url" box.

There is no indication to let you understand that the link has been set. You may check the HTML code to see if the anchor tag has been inserted or not. To check whether the link has been set or not, switch to preview mode. When you point at the image in the preview mode, the mouse pointer changes to a hand and you can notice the url you set in the status bar of the browser window.

• HTML Mode

Creating the link using an image (as the hot image) in HTML mode would be similar to creating a text link.

Select the image [<img>] tag in full. The selected text would be surrounded by the anchor tag that gets inserted at the beginning and ending of your selection.

If you are in the know of HTML you can add the code relating to the anchor tag by typing it in the HTML mode.

<a href="http://www.me-my-blog.blogspot.com/"><img src="../images/logo.jpg"></a>

<a> » Attributes  
 
The following attributes can be used with the anchor i.e. <a> tag.
Attirbute Explanation
href The "url" represented by the link (hyper link reference)
target to enable the browser to understand where the web page or image represented by the link is to be opened. [using the value "_blank" would open the link in a new window and the value "_self" would open the link in the same window.]
style to enable the options available in CSS to be applied to the element. Learn more in HTML/CSS.
Author Credit : The Edifier ... Continued Page 13

Move To  

♣ Copyright � Krishbhavara. All rights reserved
♣ Site optimized for Internet Explorer 5.5 and above