Html - Text Links, Image Links, E-mail Links

 HTML - TEXT LINKS

 A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage.

Linking Documents

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.

<a href = "Document URL" ... attributes-list>Link Text</a>

The target Attribute

We have used target attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are the possible options −

Sr.NoOption & Description
1

_blank

Opens the linked document in a new window or tab.

2

_self

Opens the linked document in the same frame.

3

_parent

Opens the linked document in the parent frame.

4

_top

Opens the linked document in the full body of the window.

5

targetframe

Opens the linked document in a named targetframe.

Linking to a Page Section

You can create a link to a particular section of a given webpage by using name attribute. This is a two-step process.

First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as follows −

<h1>HTML Text Links <a name = "top"></a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach −

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial.

Setting Link Colors

You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.


HTML - IMAGE LINKS

 We have seen how how to create hypertext link using text and we also learnt how to use images in our webpages. Now, we will learn how to use images to create hyperlinks.

Example

It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below −

<!Doctype html>

<html>

<head>

<title> Image Hyperlink Example </title>

</head>

<body>

<p> Click Following </p>

<a href="www.tutorialspoint.com" target="_self">

<img src="/images/logo.png" alt="Tutorials Point" border="0"/>

</a>

</body>

</html>

This will produce the following result, where you can click on the images to reach to the home page of Tutorials Point.




Server-Side Image Maps


  • Server-side image maps − This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications.
  • Client-side image maps − This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.


This was the simplest way of creating hyperlinks using images. Next we will see how we can create Mouse-Sensitive Image Links.

Mouse-Sensitive Images

The HTML and XHTML standards provides a feature that lets you embed many different links inside a single image. You can create different links on the single image based on different coordinates available on the image. Once different links are attached to different coordinates, we can click different parts of the image to open target documents. Such mouse-sensitive images are known as image maps.

There are two ways to create image maps −

Here you simply put your image inside a hyper link and use ismap attribute which makes it special image and when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.

When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like a cgi or PHP script etc. to process the incoming request based on the passed coordinates.

The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.

For example, if a user clicks 20 pixels over and 30 pixels down from the upper-left corner of the following image −

Which has been generated by the following code snippet −

<!Doctype html>

<html>

<head>

<title> ISMAP Hyperlink Example </title>

</head>

<body>

<p>Click following link </p>

<a href="/cgi-bin/ismap.cgi" target="_self">

<img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/>

</a>

</body>

</html>




Client-Side Image Maps

Then the browser sends the following search parameters to the web server which can be processed by ismap.cgi script or map file and you can link whatever documents you like to these coordinates −

This way you can assign different links to different coordinates of the image and when those coordinates are clicked, you can open corresponding linked document. To learn more about ismap attribute, you can check How to use Image ismap?

Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags.

The image that is going to form the map is inserted into the page using the <img /> tag as a normal image, except it carries an extra attribute called usemap. The value of the usemap attribute is the value which will be used in a <map> tag to link map and image tags. The <map> along with <area> tags define all the image coordinates and corresponding links.

The <area> tag inside the map tag, specifies the shape and the coordinates to define the boundaries of each clickable hots pot available on the image.


HTML - E-Mail LINKS

It is not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming problem for your email account. There are people, who can run programs to harvest these types of emails and later use them for spamming in various ways.

You can have another option to facilitate people to send you emails. One option could be to use HTML forms to collect user data and then use PHP or CGI script to send an email.

A simple example, check our Contact Us Form. We take user feedback using this form and then we are using one CGI program which is collecting this information and sending us email to the one given email ID.

HTML Email Tag
<a href = "mailto: abc@example.com">Send Email</a>
Send Email
Default Settings
<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Send Feedback
</a>
Send Feedback

HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http.

This code will generate the following link which you can use to send email.

Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc. ) installed on your user's computer. There is another risk to use this option to send email because if user do not have email client installed on their computer then it would not be possible to send email.

You can specify a default email subject and email body along with your email address. Following is the example to use default subject and body.

This code will generate the following link which you can use to send email.

Comments

Post a Comment

Popular posts from this blog

html- frames, iframes

Image
                                              HTML - FRAMES                          Html frames are used to divide our browser windows into multiple sections where each section can load a separate html document. A collection of frames in the browser window is called as frame set. The window is divided into frames in a similar way the tables are organized: into rows and columns. Disadvantages of Frames:                                                    There are few drawbacks with using frames, so it's never recommended to use frames in your web pages − Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up. Sometimes your page wi...
Read more

html - lists

Image
  What is LISTS ? A list is a record of short pieces of information, such as people's names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find. For example,    A shopping list. A to-do lost. LISTS IN HTML HTML offers three ways for specifying lists of information. All lists must contain one or more list elements. The types of lists that can be used in HTML are : ul :  An unordered list . This will list items using plain bullets. ol :  An ordered list . This will use different schemes of numbers to list your items. dl :  A definition list . This arranges your items in the same way as they are arranged in a dictionary. The Unordered HTML List An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list items are marked with bullets i.e small black circles by default. <!DOCTYPE html>  <html>  <body>  <h2>Grocery lis...
Read more