Hello, world!

Links HTML

HTML links examples are provided in the HTML tutorial. This tutorial will taught you basic technique how to build a link to another website or even use image or email as a link.



HTML Links

You can found links on HTML pages that navigate you to other web pages called as hyperlinks.
Hyperlinks allows you to build a link to another website by clicking on texts or images.

Syntax html links:

<a href="url">link text</a>

The target Attribute

_blank - This will load content in a new window or tab
_self - This will load content in the same frame ( this is the default)
_parent - This will load content in the parent frame
_top - This will load content in the full body of the window
framename - This will load content in a named frame

HTML code example target attribute:

<p>Click here for the Target Attribute links:</p>
<a href="/html/index.htm" target="_blank">New Attribute</a> |
<a href="/html/index.htm" target="_self">Self Attribute</a> |
<a href="/html/index.htm" target="_parent">Parent Attribute</a> |
<a href="/html/index.htm" target="_top">Top Attribute</a>|
<a href="/html/index.htm" target="framename">Framename Attribute</a>

Linking Documents

Anything you put inside the anchor tag <a> and </a> tags will become a link, colored blue and underlined and a user can click that part to reach to the target linked.
Links will appear as underlined and blue for unvisited link, underlined and purple for visited link, and underlined and red for active link.
When you point your mouse on the link the cursor will turn into a small hand and it will change the color of the link.

HTML code example linking documents:

<p>Click here for the link</p>
<a href="http://ny.pe" target="_self">How to create HTML Hyperlink</a>

Base Path

The <base> tag allows you to link HTML page to the same website where using the complete URL is not necessary.
The <base> tag is applied to provide a base path for each link, so your browser will associate together the provided relative path to this base path in order to build  a full URL.

HTML code example base path:

<!DOCTYPE html>
<html>
<head>
<title>How to use base tag in HTML links</title>
<base href="http://ny.pe">
</head>
<body>
<p>Click here for the link...</p>
<a href="/html/index.htm" target="_blank">Contact us</a>
</body>
</html>

Local Links

A Local links let you build a link to other pages of the same website.
Using the complete URL for each link is not necessary

Syntax local links:

<a href="filename.html">text</a>

HTML code example local links:

<p><a href="about.html">About Page</a> This will link to a page of the same website.</p>

Linking to a Page Section

The name attribute lets you build a link to specific sections of within a provided pages.
Two process need to be followed. First is to build a link to the section you want to reach inside the page by using the syntax: <a name=”top”></a>. Second is to link the document and put it where you want to reach by using the syntax: <a href="#top"> text</a>.

HTML code example page section:

<h2>Linking to a Page Section <a name="top"></a></h2>
<p> The name attribute lets you create a link to specific sections of within a given pages. Two process need to be followed. First is to create a link to the section you want to reach within the page. Second is to link the document and put it where you want to reach. </p>
<a href=" /html_text_links.htm#top">Top...</a>

Link Colors

By using the attributes link, alink and vlink in the <body> tag you can set the colors of your links.

HTML code example link colors:

<!DOCTYPE html>
<html>
<head>
<title>Setting Hyperlink Colors</title>
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click the link to see the color changes</p>
<a href="http://www.nype.com" target="_blank" >Setting Link Colors</a>
</body>
</html>

File Download Dialog Box

Frequently, you need to provide an option where users can download a file by clicking on the link and a dialog box will appear allowing the user to save the file.
To perform this option you will need to use the HTTP response headers.
A dialog is showed that permits the user to locally store the file.

Syntax file download dialog box:

#!/user #!/usr/bin/perl

# Added HTTP Header
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";
 
# List down the target’s files content and open
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
   print("$buffer");

Building Download Links

It is possible to create a download link to set your PDF, or DOC or ZIP files into downloadable files.
The simplest way to do this is to give the full URL of the file.

HTML code example building download links:

<a href="http://www.compassion.com/multimedia/BibleVerses.pdf"> Clik to Download Zip File</a>

HTML Image Link

It is also allowed to build an image to work as a hyperlink
Simply place the image file between the <a href> and the </a> tags to link it to another web page.

Syntax image link:

<a href> <img scr=”image file”> </a>

HTML code example image link:

<p> Please click image...</p>
<a href="http://ny.pe" target="_self">
   <img src="http://ny.pe/images1/LoggaNYPE3.png" alt="Image as a link" border="0"/>
</a>

HTML Email Links

The HTML Email Links attribute allows you to put a link to an email on your website.
You can perform this by typing mailto: followed your given e-mail address.
The Default e-mail program displays a blank message directed to the given e-mail address when the link is clicked.

HTML code example email links:

<p>
Please send feedback to:
<a href="mailto:email@yahoo.com">
email@yahoo.com
</a>
</p>
HTML Email Links -Default Settings
If you want to indicate the default email subject and body with your email address, you can use the following syntax:  <a href="mailto:email?subject=Comments&body=Message">

HTML code example email links:

<p>
Please send feedback to:
<a href="mailto:email@yahoo.com?subject=Comments&body=Message">
email@yahoo.com
</a>

HTML id Attribute

The HTML Links - <id> attribute lets you build bookmarks within HTML page.
You can as well build an internal links within the HTML document.
To apply this you will need the attribute id and the “#” sign.

HTML code example image link:

<p><a href="#C6">Go to Episode 6.</a></p>
<h2>Episode 1</h2>
<p>This Episode is the story about...</p>
<h2>Episode 2</h2>
<p>This Episode  is the story about...</p>
<h2>Episode 3</h2>
<p>This Episode  is the story about...</p>
<h2><a id="C4">Episode 4</a></h2>
<p>This Episode  is the story about...</p>
<h2>Episode 5</h2>
<p>This Episode  is the story about...</p>
<h2><a id="C6">Episode 6</h2>
<p>This Episode e is the story about...</p>
<h2>Episode 7</h2>
<p>This Episode is the story about...</p>
<h2>Episode 8</h2>
<p>This Episode  is the story about...</p>

HTML output image link:

Go to Episode 6.

Episode 1

This Episode is the story about...

Episode 2

This Episode is the story about...

Episode 3

This Episode is the story about...

Episode 4

This Episode is the story about...

Episode 5

This Episode is the story about...

Episode 6

This Episode e is the story about...

Episode 7

This Episode is the story about...

Episode 8

This Episode is the story about...