New Posts
Home / Web Designing / HTML / How to Use HTML Links.         

How to Use HTML Links.         

How to Use HTML Links.

In this article, we are focusing on HTML links without links, not world wide web.  Links are easy to create. I want to introduce the anchor element which is used to create links within your site.

HTML links

<link href=”_css/styles.css” rel=”stylesheet” type=”text/css”>

The first time somebody counters the anchor elements is usually confusion for them. Creating HTML links in the page you might think. You would need the link element. But remember link element is not used for creating a link for pages. Instead, the link element is used to request a link is used for external resources of the page. So in code snippets you see here link is requesting for CSS file.

So, create a link on the page we use the anchor element.

<a> Introduction to Create HTML links</a>

Thankfully syntax is very easy to grasp. You simply surrounding the contents you want a clickable link with an anchor tag or it is commonly referred a tag.

Next,

Href attribute that tells the browser, where would you like to go when the link is clicked.

Href means HyperText reference.

Before the move, I want to cover few more attributes for the anchor element well.

The target attribute element: typically use for open the page. New windows or tab or to control where the page is opened. Within the frame set. Frames are not commonly used in modern web designing. This attribute actually is removed from HTML specification.

Now it has come to back in HTML5 latest specification. because it has value working web applications.

<a href=https://www.computertaleem.com title=”computertaleem.com” target=”_blank”>computertaleem.com</a>

The rel attribute: defines the relationship of the target object to the link object.

For example, the rel value of next indicates that this link part of series and link will take you to object or document in the series.

HTML5 has added new download element, this indicates that link is used to download external resource of files such as PDF or media file, this attribute still is new.

The global attribute is used mostly which is the title. This helps link is more accessible by giving the link title which is read and interpreted by devices. Search engines or other content readers. It is always the good idea to use it. When creating a link to other page or recourse.

That covers the basic syntax for Creating HTML links.

Exploring the anchor element

< a href=”http://www.computertaleem.com” title=”computertaleem.com” target=”_blank”> computertalee.com</a>

Target means blank.

Linking to Pages within Your Site (Same Directory). 

Linking to page within own site is probably the most common use of the anchor element. Well Links are very simple and easy to create. You will have to understand how to create links properly.  Here we will learn how to create internal links within site.

<!doctype html>

<head>

<title>Creating HTML links</title>

</head>

<body>

<h1>Linking to pages within your site</h1>

<h2>Top Page</h2>

<p>Link to the <a href=”same.htm” title=”same directory kink”>same.htm</a> page, in the same directory</p>

</body>

</html>

 Linking to Pages in Nested Dirctory.

(/ Slash is used for Creating Links Inside the Directory).

nested folders (info/extras/resources.htm) info is folder and extras is also foder which is locted inside infor folder and resources page is available inside extras folder.

<!doctype html>

<head>

<title>Creating HTML links</title>

</head>

<body>

<h1>Linking to pages in nested directory</h1>

<h2>Top Page</h2>

<p>Link to the <a href=”info/extras/resources.htm” title=”nested page”>resources.htm</a> page, in a nested directory</p>

</body>

</html>

 ../ Essentially tells to the web browser or user agent I want to go up one directly.

About.html

<!doctype html>

<head>

<title>Creating HTML links</title>

</head>

<body>

<h1>Linking to pages within your site</h1>

<h2>About</h2>

<p>Link to the <a href=”../links.htm” title=”up a directory”>links.htm</a> page, up one directory</p>

<p>Link to the <a href=”extras/resources.htm” title=”down a directory”>resources.htm</a> page, down one directory</p>

</body>

</html>

 ../../ Go to up two directories.

<! doctype html>

<head>

<title>Creating HTML links</title>

</head>

<body>

<h1>Linking to pages within your site</h1>

<h2>Resources</h2>

<p>Link to the <a href=”../about.htm” title=”up a directory”>about.htm</a> page, up one directory</p>

<p>Link to the <a href=”../../links.htm” title=”up two directories”>links.htm</a> page, up two directories</p>

</body>

</html>

You can see folder structure in address bar of web browser.

 Linking to External Pages.

Another very common function of links is to re-direct to the users to pages inside that external to their site currently on, these are referred to as absolute links they are also easy to create.

Without http//: protocol absolute link will not work and you also know the full URL of the site.

If you are not giving slash at the end of top level domain not matter it will work.

<!doctype html>

<head>

<title>Creating HTML links</title>

</head>

<body>

<h1>Linking to external sites</h1>

<p><a href=”http://www.computertaleem.com” title=”Visit www.computertaleem.com” target=”_blank”>Visit computertaleem.com!</a></p>

</body>

</html>

 Download Attribute.

Rarely you may want to give users the facility of download a file or some sort of resource from your website. In certain cases for security reason. Adding download attribute which tell to the browser that the resource user want to download not open.

<!doctype html>

<head>

<title>Creating HTML links</title>

</head>

<body>

<h1>Linking to resources</h1>

<p><a href=” This is testing file of pdf for checking download.pdf” title=”HTML syntax reference” download=” down the file “>Download</a> our HTML syntax reference!</p>

</body>

</html>

 Linking to Page Regions.

In addition to linking to external pages to your site.

Anchor allows us to the user to go specific section within the document as well these are identified as fragment identifiers and can be very helpful enhancing your site navigation.

To explore we use two files.

  1. Fragment
  2. Destination

If you are going to outside the website and jump specific section.

Copy the URL from address barètype following in bracket in the file.

Fragment identifiers can be used to link to another section on the same page or a specific section of another page. To use fragment identifiers, you target an element with an ID attribute using a link. You resolve the link by using the value of the ID attribute preceded by the hash tag (#).

 Fragments.htm

<!doctype html>

<head>

<title>Creating HTML links</title>

</head>

<body>

<h1 id=”top”>Using fragment identifiers</h1>

<p>Fragment identifiers can be used to link to another section on the same page, or a specific section of another page. To use fragment identifiers, you target an element with an ID attribute using a link. You resolve the link by using the value of the ID attribute preceded by the hash tag (#).</p>

<h2>Try it out!</h2>

<p><a href=”#one” title=”section one”>Link to Section 1</a></p>

<p><a href=”#two” title=”section two”>Link to Section 2</a></p>

<p><a href=”#three” title=”section three”>Link to Section 3</a></p>

<p><a href=”destination.htm#two” title=”section two of destination.htm”>Link to Section 2</a> of the destination.htm page</p>

<p><a href=”http://www.w3.org/TR/html401/intro/intro.html#fragment-uri” title=”Fragment identifiers”>Fragment identifiers</a> as defined by the W3C</p>

<h3 id=”one”>Section 1</h3>

<p> This is Section one. This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one. </p>

<p> This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one.This is Section one. </p>

<h3 id=”two”>Section 2</h3>

<p>This is Section Two. This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two.This is Section Two. </p>

<h3 id=”three”>Section 3</h3>

<p>This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.This is Section Three.</p>

<p><a href=”#top” title=”navigate to the top of the page”>Back to the top</a></p>

</body>

</html>

 Destination.htm.

<!doctype html>

<head>

<title>Creating HTML links</title>

</head>

<body>

<h1>Using fragment identifiers</h1>

<h3 id=”one”>Section 1</h3>

<p> This is section one.  This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. This is section one. </p>

<h3 id=”two”>Section 2</h3>

<p> This is section two. This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two.This is section two. </p>

<h3 id=”three”>Section 3</h3>

<p> This is section three. This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.This is section three.</p>

</body>

</html>

About imran

My Name Mohammad Ramzan Bhutto. Live in District Jacobabad, Sindh, Pakistan. I have started blogging on Information Technology, my selected areas are Online Business, Digital Marketing, Make Money Online.

Check Also

External Style Sheet

How to Use External Style Sheet. 

How to Use External Style Sheet. An External style sheet is simply texting files with …