1 of 20

�HTML – IMAGE LINKS ��

Amity School of Engineering & Technology

2 of 20

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>Image Hyperlink Example</title>
  • </head>
  • <body>
  • <p>Click following link</p>
  • <a href="http://www.amity.edu" target="_self">
  • <img src="C:\Users\305065\Desktop\photo.jpeg" alt="HREF" border="2"/> </a>
  • </body>
  • </html>

Amity School of Engineering & Technology

3 of 20

�HTML Email Tag �

  • 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.

​

  • <a href= "mailto: abc@example.com">Send Email</a>

Amity School of Engineering & Technology

4 of 20

Hyper Link color

An unvisited link is underlined and blue. A visited link is underlined and purple. An active link is underlined and red.

Link color using Hex color codes

To start with we'll use a Hex color code, probably the most common method of adding color to links. In your HTML anchor tag (<a>), after the href attribute, insert a style attribute with the color property set to your Hex color code (in our case #FF0000).

<body> <a href="http://example.com/" style="color:#FF0000;">Red Link</a> </body>

Amity School of Engineering & Technology

5 of 20

Hyper Link color

Link color using HTML color names

HTML color names are often more legible than their Hex code counterparts, and can be used in much the same fashion. Replace the Hex color code with the HTML color name from the previous example and voila, your code is ultra clear.

HTML

​

<body>

<a href="http://example.com/" style="color:red;">Red Link</a>

</body>

Amity School of Engineering & Technology

6 of 20

Hyper Link color

Link color using RGB color values

A third way to style your website link text is by using RGB values. Wrapping the values in rgb() enables them to be used inside a webpage just like a Hex code or color name.

HTML

​

<body>

<a href="http://example.com/" style="color:rgb(255,0,0);">Red Link</a>

</body>

Amity School of Engineering & Technology

7 of 20

Hyper Link color

Link color using HSL color values

HSL, which stands for hue, saturation and lightness, are another set of color values supported by most modern browsers (IE9+). Like RGB, you can wrap the HSL values inside hsl() and use them in your webpage, like below.

HTML

​

<body>

<a href="http://example.com/" style="color:hsl(0,100%,50%);">Red Link</a>

</body>

Amity School of Engineering & Technology

8 of 20

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.No

Option & 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.

Amity School of Engineering & Technology

9 of 20

following example to understand basic difference in few options given for target attribute

<!DOCTYPE html>

<html>

​

<head>

<title>Hyperlink Example</title>

<base href = "https://www.tutorialspoint.com/">

</head>

<body>

<p>Click any of the following links</p>

<a href = "/html/index.htm" target = "_blank">Opens in New</a> |

<a href = "/html/index.htm" target = "_self">Opens in Self</a> |

<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |

<a href = "/html/index.htm" target = "_top">Opens in Body</a>

</body>

​

</html>

Amity School of Engineering & Technology

10 of 20

Use of Base Path

When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

<base href = "https://www.amity.edu/">

</head>

<body>

<p>Click following link</p>

<a href = "/about-university.aspx" target = "_blank">HTML Tutorial</a>

<a href = "/programe-list.aspx?fd=all" target = "_blank">HTML Tutorial</a>

</body>

</html>

Amity School of Engineering & Technology

11 of 20

Amity School of Engineering & Technology

12 of 20

Amity School of Engineering & Technology

13 of 20

Amity School of Engineering & Technology

14 of 20

Amity School of Engineering & Technology

15 of 20

Amity School of Engineering & Technology

16 of 20

Amity School of Engineering & Technology

17 of 20

Amity School of Engineering & Technology

18 of 20

Amity School of Engineering & Technology

19 of 20

Amity School of Engineering & Technology

20 of 20

Amity School of Engineering & Technology