Links
Link is a text that points to other web page, text, image, video or URL(Uniform Resource Locator).HTML is a language which allows us to share links on internet. It provides us internet navigation. So ,we can navigate through web pages.
The anchor<a> Tag
Links are also an integral part of every web page.You can add links to text or images that will enable the user to click on them in order to be directed to another file or webpage.
In HTML, links are defined using the <a> tag.
Use the href attribute to define the link's destination address:
<a href="link here">Link Text Here</a>Creating Your First Link
In the example below, a<a> link to codeBloggers's blog is defined:
<a href="https://codeBlogger17.blogspot.com">Web Designing and Development</a>
Once the code has been saved,"Web Designing and Development" will display as a link:
Web Designing and Development
Clicking on "Web Designing and Development" redirects you to the blog of codeBlogger.
Links can either be absolute or relative.
- The target Attribute
The target attribute specifies where to open the linked document.
Giving a _blank value to your attribute will have the link open in a new window or new tab:
<a href="https://codeBlogger17.blogspot.com" target="_blank">Web Designing and Development</a>
Example:
<html>
<head>
<title>Links</title>
</head>
<body>
<a href="https://codeBlogger17.blogspot.com" target="_blank">Web Designing and Development</a>
</body>
</html>Result:
Displaying Link
After Clicking on the link, due to target attribute new tab will open to view the website or or blog.
As shown below,
Adding links to images
If you want to add link to an image, you can use <img> tag within the <a> tag. By performing this, your image will become an hyperlink . When you click on that image it will redirect you to other webpage.
Here we'll see an example of this:-
HTML Code:-
<html>
<head>
<title>Links</title>
</head>
<body>
<a href="https://codeBlogger17.blogspot.com" target="_blank">
<img src="C:\Users\user\Desktop\html tutorials pics\image.jpg" height="50%" width="50%"/>
</a>
<p>Click on Image , you will get redirected to the blog link.Thanks</p>
</body>
</html>Result:-
When the image is clicked ,it will open new page linked to it.Try it Yourself!.
Comments
Post a Comment
If you have any doubt, ask here