saftutorials.com
HTML Links Tutorial

What is HTML links or Hyperlinks? When you want to linking to another file, page, website, email or image it's call to be HTML links or Hyperlinks. HTML links is  call to HTML Hyperlinks. 

How to use HTML hyperlinks?

HTML hyperlinks use by anchor tag (<a>) and it close (</a>)

Basic Structure of HTML Hyperlink
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>
</head>
<body>
<a href="Your link here">Your Display Text or Image</a>
<p>Example</p>
<a href="../index.php">Go to Home</a>   
</body>
</html>

HTML Link open new Window
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>
</head>
<body>
<a href="../index.php" target="_blank">Go to Home</a>   
</body>
</html>

HTML Link Title
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>
</head>
<body>
<a href="../index.php" title="Go to Home">Go to Home</a>   
</body>
</html>

HTML Hyperlink Folder link
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>
</head>
<body>
<a href="Your link here">Your Display Text</a>
<p>Example</p>
<a href="foldername">Go to Folder</a>   
</body>
</html>

HTML Hyperlink File link
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>
</head>
<body>
<a href="Your file name with right extension">Your File name or any Text</a>
<p>Example</p>
<a href="file.txt">Open File</a>   
</body>
</html>

HTML Hperlink for External Link
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>
</head>
<body>
<a href="http://Your link here">Your Display Text or Image</a>
<p>Example</p>
<a href="http://www.google.com">Go to Google</a>   
</body>
</html>

HTML Hperlink for Email Link
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>
</head>
<body>
<a href="mailto:Your link email here">Your Display Text or Image or Email</a>
<p>Example</p>
<a href="mailto:saftutorials@gmail.com">Mail to SAF</a>   
</body>
</html>

One/same page Hyperlink

When you create a hyperlink in same HTML file then its called one page Hyperlink. When developer want to link on same HTML page then use this Hyperlink <a href="#link">Display Text</a> and finally write where to go when click on this link <p id="link">Sample Text</p>

HTML Hperlink for one/same page link
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>
</head>
<body>
<a href="#Your Link">Your Display Text or Image</a>
<p>Example</p>
<a href="#link">Go to Bottom</a>   <!-- Example 1 for One/Same page link -->
<a href="http:///www.yourdomain.com/index.php#link">Go to Website Bottom</a>   <!-- Example 2 for One/Same page link -->
<p> And finally define your link where to go when clink on this link </p>
<p id="link">Here scroll your browser when click on this link. </p>
</body>
</html>

Hyperlin with CSS

HTML Hperlink for one/same page link

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Hyperlink Tutorials</title>

<style type="text/css">
    a{color:red;text-decoration:none;}
    a:hover{color:green;text-decoration:underline;}
    a:visited{color:red;text-decoration:none;}
    a:active{color:red;text-decoration:none;}
</style>

</head>
<body>
<a href="Your Link">Your Display Text</a>
<p>Example</p>
<a href="../index.php">Your Display Text</a>  
</body>
</html>

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic