HTML Tutorial
HTML References
HTML Resources
Selected Reading
- HTML - Layouts
- HTML - Javascript
- HTML - Style Sheet
- HTML - Header
- HTML - Marquees
- HTML - Embed Multimedia
- HTML - Forms
- HTML - Fonts
- HTML - Colors
- HTML - Backgrounds
- HTML - Blocks
- HTML - Iframes
- HTML - Frames
- HTML - Email Links
- HTML - Image Links
- HTML - Text Links
- HTML - Lists
- HTML - Tables
- HTML - Images
- HTML - Comments
- HTML - Meta Tags
- HTML - Phrase Tags
- HTML - Formatting
- HTML - Attributes
- HTML - Elements
- HTML - Basic Tags
- HTML - Overview
- HTML - Home
HTML References
- HTML - Deprecated Tags
- HTML - Character Encodings
- Language ISO Codes
- HTML - URL Encoding
- MIME Media Types
- HTML - Events Ref
- HTML - Fonts Ref
- HTML - Entities
- HTML - Color Names
- ASCII Table Lookup
- HTML - ASCII Codes
- HTML - Fonts Reference
- HTML - Events Reference
- HTML - Attributes Reference
- HTML - Tags Reference
HTML Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
HTML - Text Links
HTML - Text Links
A webpage can contain various pnks that take you directly to other pages and even specific parts of a given page. These pnks are known as hyperpnks.
Hyperpnks allow visitors to navigate between Web sites by cpcking on words, phrases, and images. Thus you can create hyperpnks using text or images available on a webpage.
Note − I recommend you to go through a short tutorial on
Linking Documents
A pnk is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the pnk and a user can cpck that part to reach to the pnked document. Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-pst>Link Text</a>
Example
Let s try following example which pnks http://www.tutorialspoint.com at your page −
<!DOCTYPE html>
<html>
<head>
<title>Hyperpnk Example</title>
</head>
<body>
<p>Cpck following pnk</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>
This will produce the following result, where you can cpck on the pnk generated to reach to the home page of Tutorials Point (in this example).
The target Attribute
We have used target attribute in our previous example. This attribute is used to specify the location where pnked document is opened. Following are the possible options −
| Sr.No | Option & Description |
|---|---|
| 1 |
_blank Opens the pnked document in a new window or tab. |
| 2 |
_self Opens the pnked document in the same frame. |
| 3 |
_parent Opens the pnked document in the parent frame. |
| 4 |
_top Opens the pnked document in the full body of the window. |
| 5 |
targetframe Opens the pnked document in a named targetframe. |
Example
Try following example to understand basic difference in few options given for target attribute.
<!DOCTYPE html>
<html>
<head>
<title>Hyperpnk Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Cpck any of the following pnks</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>
This will produce the following result, where you can cpck on different pnks to understand the difference between various options given for target attribute.
Use of Base Path
When you pnk HTML documents related to the same website, it is not required to give a complete URL for every pnk. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the pnks. So your browser will concatenate given relative path to this base path and will make a complete URL.
Example
Following example makes use of <base> tag to specify base URL and later we can use relative path to all the pnks instead of giving complete URL for every pnk.
<!DOCTYPE html>
<html>
<head>
<title>Hyperpnk Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Cpck following pnk</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>
</html>
This will produce the following result, where you can cpck on the pnk generated HTML Tutorial to reach to the HTML tutorial.
Now given URL <a href = "/html/index.htm" is being considered as <ahref = "http://www.tutorialspoint.com/html/index.htm"
Linking to a Page Section
You can create a pnk to a particular section of a given webpage by using name attribute. This is a two-step process.
Note − The name attribute deprecated in HTML5. Do not use this attribute. Use id and title attribute instead.
First create a pnk to the place where you want to reach with-in a webpage and name it using <a...> tag as follows −
<h1>HTML Text Links <a name = "top"></a></h1>
Second step is to create a hyperpnk to pnk the document and place where you want to reach −
<a href = "/html/html_text_pnks.htm#top">Go to the Top</a>
This will produce following pnk, where you can cpck on the pnk generated Go to the Top to reach to the top of the HTML Text Link tutorial.
Setting Link Colors
You can set colors of your pnks, active pnks and visited pnks using pnk, apnk and vpnk attributes of <body> tag.
Example
Save the following in test.htm and open it in any web browser to see how pnk, apnk and vpnk attributes work.
<!DOCTYPE html>
<html>
<head>
<title>Hyperpnk Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body apnk = "#54A250" pnk = "#040404" vpnk = "#F40633">
<p>Cpck following pnk</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>
This will produce the following result. Just check color of the pnk before cpcking on it, next check its color when you activate it and when the pnk has been visited.
Download Links
You can create text pnk to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just need to give complete URL of the downloadable file as follows −
<!DOCTYPE html>
<html>
<head>
<title>Hyperpnk Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>
This will produce following pnk and will be used to download a file.
File Download Dialog Box
Sometimes it is desired that you want to give an option where a user will cpck a pnk and it will pop up a "File Download" box to the user instead of displaying actual content. This is very easy and can be achieved using an HTTP header in your HTTP response.
For example, if you want make a Filename file downloadable from a given pnk then its syntax will be as follows.
#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:apppcation/octet-stream; name = "FileName"
";
print "Content-Disposition:attachment; filename = "FileName"
";
# Open the target file and pst down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
print("$buffer");
}
Note − For more detail on PERL CGI programs, go through tutorial .
Advertisements