Featured

    Featured Posts

HTML Link

Hello Readers / Friends,

Welcome back to CodeEra. Hope you have understand List used in HTML in the Previous blog. So lets Begin with  HTML Link which is used to connect with another document,file or any website.


There are two types of link used in HTML :-


1) Relative link => "image/edu.png " file name that we create in our own webpage

2) Absolute link =>http://programmingera7.blogspot.in

What is the different between Relative and Absolute Link ?


- Relative link are those link in which we don't write the complete address of any file ,website or any target we just write the "file name"  whereas Absolute link are those link in which we give the complete address of any file ,website or any target.



Format we used in HTML for the Link 

<a href="Path/ address of your target document, file or any website.">discriptor</a>

Example of Link 


https://www.google.com


https: ------- this is the Protocol of the link 

// -------- is the directory of the link
www -------  is the server name of the link
google.com ------- is the domain name of the link

what is the different types of protocols used in the link?


1) https ------- hyper text transfer protocol with secure

2) http -------- hyper text transfer protocol
3) ftp --------- file transfer protocol
4) ftps -------- file transfer protocol with secure
5) smtp ------- simple mail transfer protocol
6) telnet ------- telephone network

Different types of domain we used are :


yoursite.co.in

yoursite.com
yoursite.in
yoursite.co.uk
and many mores


You can refer to this link for all the domain name used for different countries -




1) Using Link

 <html>
    <head>
    <title> CodeEra | Become a coder
        </title>
        <style type="text/CSS">
          .para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
                      .rohit{color : Yellow;}
        </style>
       <meta name= keyword content= "coding, programming, HTML, CSS">
    </head>
    <body>
     <center> <h1><p class="para"> This is CodeEra. </p></h1></center>
               <center><p class="rohit"> Have fun with coding.</p></center>
 <center> <a href= "http://programmingera7.blogspot.in" ><b><h3>Click Here </h3></b></a> to Visit CodeEra Blog</center>

      
    </body>
</html>


Note:- Now save as any"filename" and choose the type is " html " and run in the browser.


    Download File -link.html



2) Properties and Attributes of Link 

target="_blank"; ---- link open in new page
target="_self"; ------ link open in same page
title= " " -------- this is used when we keep mouse on the link it will show the description for more i have upload the file "plink.html"

Example : 

 <html>
    <head>
        <title> CodeEra | Become a coder
        </title>
        <style type="text/CSS">
                      .para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
                      .rohit{color : Yellow;}
        </style>
       <meta name= keyword content= "coding, programming, HTML, CSS">
    </head>
    <body>
     <center> <h1><p class="para"> This is CodeEra. </p></h1></center>
               <center><p class="rohit"> Have fun with coding.</p></center>
 <center> <a href= "http://programmingera7.blogspot.in" target="_blank" title="visit CodeEra" ><b><h3>Click Here </h3></b></a> to Visit CodeEra Blog</center>
              <center> <a href= "http://programmingera7.blogspot.in" target="_self" title="visit CodeEra" ><b><h3>Click Here </h3></b></a> to know more of CodeEra Blog</center>
      
    </body>

</html>


Note:- Now save as any"filename" and choose the type is " html " and run in the browser.



    Download File -plink.html



           3) Linking on same page and Change Color of Link

Linking on same page :
<a href=" ">
<a name=" ">


Color change of link :

link ="value"------ color of the link
alink ="value"------ press on the link color change
vlink ="value"------- visit link then another color

Note: This tag we used in body section

Example :

 <html>
    <head>
        <title> CodeEra | Become a coder
        </title>
        <style type="text/CSS">
                      .para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
                      .rohit{color : Yellow;}
        </style>
       <meta name= keyword content= "coding, programming, HTML, CSS">
    </head>
    <body link="red" alink="green" vlink="black">
     <center> <h1><p class="para"> This is CodeEra. </p></h1></center>
               <center><p class="rohit"> Have fun with coding.</p></center>
  
 <center> <a href= "http://programmingera7.blogspot.in" target="_blank" title="visit CodeEra" ><b><h3>Click Here </h3></b></a> to Visit CodeEra Blog</center>
              <center> <a href= "http://programmingera7.blogspot.in" target="_self" title="visit CodeEra" ><b><h3>Click Here </h3></b></a> to know more of CodeEra Blog</center>
      <ol><h2>choose blog</h2>
 <li><a href="#about1">About Blog 1</a></li>
 <li><a href="#about2">About Blog 2</a></li>
 <li><a href="#about3">About Blog 3</a></li>
 <li><a href="#about4">About Blog 4</a></li>
 <br>
 <br>
 <br>
 <br>
 <br>
  <h2><a name="about1">About Blog 1</a></h2>
 <p > In this blog, i would like to share the coding and programming languages with you all and may this blog will helps you regarding the coding that i am going to tell you.
And i will also tell you about Tricks and Some useful Tips that help you and also share my graphic works.
<br>
<br>
If you get any problem you can also send me mail so that as soon as possible i can resolve your problem and doubts.
<br><br>
Hope You Enjoy this Blog and if you like this blog then share it with your friends , your natives so that they also get help regarding the Coding and also like the blog and follow the blog.</p>

         <h2><a name="about2">About Blog 2</a></h2>
 <p > In this blog, i would like to share the coding and programming languages with you all and may this blog will helps you regarding the coding that i am going to tell you.
And i will also tell you about Tricks and Some useful Tips that help you and also share my graphic works.
<br><br>
If you get any problem you can also send me mail so that as soon as possible i can resolve your problem and doubts.
<br><br>
Hope You Enjoy this Blog and if you like this blog then share it with your friends , your natives so that they also get help regarding the Coding and also like the blog and follow the blog..</p>

          <h2><a name="about3">About Blog 3</a></h2>
 <p > In this blog, i would like to share the coding and programming languages with you all and may this blog will helps you regarding the coding that i am going to tell you.
And i will also tell you about Tricks and Some useful Tips that help you and also share my graphic works.
<br><br>
If you get any problem you can also send me mail so that as soon as possible i can resolve your problem and doubts.
<br><br>
Hope You Enjoy this Blog and if you like this blog then share it with your friends , your natives so that they also get help regarding the Coding and also like the blog and follow the blog.</p>

          <h2><a name="about4">About Blog 4</a></h2>
 <p > In this blog, i would like to share the coding and programming languages with you all and may this blog will helps you regarding the coding that i am going to tell you.
And i will also tell you about Tricks and Some useful Tips that help you and also share my graphic works.
<br><br>
If you get any problem you can also send me mail so that as soon as possible i can resolve your problem and doubts.
<br><br>
Hope You Enjoy this Blog and if you like this blog then share it with your friends , your natives so that they also get help regarding the Coding and also like the blog and follow the blog.</p>
    </body>
</html>


Note:- Now save as any"filename" and choose the type is " html " and run in the browser.

 Download File -linking page.html


In Next Page , I will give you more examples for  HTML coding and with new Topic.
Till then If you are having any doubt / Queries then you can comment below or send me in my mail i will clear your doubt.

See You in Next Page

author

Author Name

Author Description!

Get Free Email Updates to your Inbox!

Post a Comment

www.CodeNirvana.in

Copyright © CodeEra