Friday 24 June 2016

Learn Various Anchor tag Usage.

The <a> Anchor tag use for the hyperlink, Always <a> Anchor tag is use for link one page to another page or Same page jump to selected div or section.

The most important attribute of <a> tag is the "href", which is used for destination link.
Another attribute is "target", Use for where to open the linked document.
There are 4 values available for it _blank, _parent, _self & _top.

By default, <a> anchor tag will appear as follows:

Unvisited link looks as underlined and blue color,
Visited link looks as underlined and purple color,
& Active link looks as underlined and red color.

Style for <a> Anchor tag:
<style>
a {color:blue;}
a:link    {color:green;}
a:visited {color:pink;}
a:hover   {color:red;}
a:active  {color:yellow;}
</style>


Example:-
<a href="http://itnewcode.blogspot.in/" target="_blank">IT New Code</a>
here,
href for Url or Path locaction

target for where to open the linked document it may be 4 types(_blank, _parent, _self, _top)



Skype link:-
<a href="skype:skaype_name?call">Skype name</a>
**************************************************************

Call link:-
<a href="tel:3177594940">317.759.4940</a>
**************************************************************

Mail link:-
<a href="mailto:test@gmail.com">test@gmail.com</a>
**************************************************************

Mail with subject link:-
<a href="mailto:test@gmail.com?Subject=Your Subject">test@gmail.com</a>
**************************************************************

Gmail email link:-
<a href="mailto:http://mail.google.com/mail/?view=cm&fs=1&tf=1&to=test@gmail.com&su=Your Subject">test@gmail.com</a>
**************************************************************

Vimeo embed code:-
<div class="video-holder">&nbsp;<iframe src="http://player.vimeo.com/video/#####"  
width="561" height="316" frameborder="0" webkitAllowFullScreen mozallowfullscreen
allowFullScreen></iframe></p>
**************************************************************

You Tube embed code:-
<iframe title="YouTube video player" class="youtube-player" type="text/html"
width="640" height="390" src="http://www.youtube.com/embed/##########"
frameborder="0" allowFullScreen></iframe>
**************************************************************

Open Multiple windows link on single click:-
<a href="https://www.facebook.com/" target="_blank" onclick="window.open('http://www.google.com/'); window.open('http://www.yahoo.com/');">Single Click Open Multiple windows link</a>
**************************************************************

Map Anchor tag:-
<a class="to-map" href="https://maps.google.com/?q=loc:-43.6298474,172.7269425">13 Hunters Rd, Diamond Harbour 8971, New Zealand</a>

Here,
-43.6298474 is latitude and
172.7269425 is logitude.
**************************************************************

Map Embed & Anchor tag:-
<iframe src = "https://maps.google.com/maps?q=10.305385,77.923029&hl=es;z=14&amp;output=embed"></iframe>
<a href="https://maps.google.com/maps?q=10.305385,77.923029&hl=es;z=14&amp;output=embed" style="color:#0000FF;text-align:left" target="_blank">See map bigger</a>

Here,
-10.305385 is latitude and
77.923029 is logitude.
"es" is spanish language and "z" is the zoom that will have the map.
**************************************************************

Google Calendar Add to your account Or Subscribe code:-
<a href="http://www.google.com/calendar/render?cid=[CALENDAR-XML-LINK]" target="_blank"><img border="0" src="//www.google.com/calendar/images/ext/gc_button6.gif"></a>

Example:
<a href="http://www.google.com/calendar/render?cid=http%3A%2F%2Fwww.google.com%2Fcalendar%2Ffeeds%2Fsstx.org_siq5ectrvg921eipq0qdu5fho4%2540group.calendar.google.com%2Fpublic%2Fbasic" target="_blank"><img border="0" src="//www.google.com/calendar/images/ext/gc_button6.gif"></a>
**************************************************************

Pass Variable data in Php Anchor Tag:-
<?php $id=10; ?>
<a class='link' href=\"Adminupdateotherprofile.php?id=$id\">VIEW & EDIT</a>
& receive it as following
<?php echo $_GET['id']; ?>
**************************************************************

Countdown Timer:-
https://www.timeanddate.com/clocks/freecountdown.html
https://countingdownto.com/countdown-widgets/edit/event-name-countdown-clock-0b98cd98-de66-4280-b9d2-1abf6a111087
**************************************************************

API Create (Social Network Integrations):-
Facebook, Google+, Instagram, PayPal, Twitter, LinkedIn, Amazon, Yahoo, Windows Live, Tumblr, BufferApp, Foursquare, VK.com
http://wpweb.co.in/documents/social-network-integration/
**************************************************************

For more Interesting, Useful Article & codes visit IT New Code.

Ankit Shah PHP Expert

IT New Code suggest a solution for your problem related to coding, Specially .PHP, Wordpress, WooCommerce, Magento, HTML and CSS. Visit Our website for Information.

3 comments:

  1. Excellent blog...it's really help me to solve my queries.
    Great job brother.

    ReplyDelete

 

Copyright @ 2016 IT New Code | Developing Code | Designing Code.

Designed by: Ankit Shah