You’re Starting to get the hang of thing, but as you proceed i think you’ll want to know how linking is done in HTML? Well that’s what this lesson is for, it teaches you how to create links in your HTML codes, and it’s very easy to do, all you just need is one element and one attribute to begin.

Example 1:

<a href="http://www.phcityonweb.com"> A link to Phcityonweb.com </a>

It will look like this on a browser

using the anchor <a> element we’re able to create a hyper-link to The Home page of this website, which once the mouse pointer hovers over it, it changes cursor to display that this is a link. All these are done automatically, the way it’s programmed to do so just follow through and you’ll get the hang of it. The attribute href stands for “Hyper-text reference” and it specifies where the link leads to.

In the above example the href attribute has a value “http://www.phcityonweb.com” which is full address to the Home page of Phcityonweb.com called  a URL(Uniform resource Locator). The URL must always have a “http://” followed by the “www” and the domain name (examplethis.com), which denotes the link to a specific page on any website. The text after the opening tag is what is displayed on the browser. Last but not least, make sure you always close the anchor link </a>

What if i want to make a link between pages
Well, if you have more than one web page and you want to make a link between each pages and they’re placed in the same folder. all you simply need to do is place the name of the other page in the href value and it will link to that particular page. you don’t need to put the full URL to the page to display it. For instance let say you have two pages ( index.htm and index2.htm) to create a link from the first page to the second page, use this code line below.

Example 2:

<a href="index2.htm"> Click to go to Page 2 </a>

if it were place in a subfolder name(“subfolder”), the link would look like this

Example 3:

<a href="subfolder/index2.htm"> Click to go to Page 2 </a>

consequently, a link from page 2 (in a subfolder) to page 1 would look like this

Example 4:

<a href="../index.htm"> Click to go to Page 1 </a>

“../” points to the folder one level up from position of the file from which the link is made. Following the same method, you can also point two (or more) folders up by writing “../../” for two folders upwards and “../../../” for three folders upward.

Did you understand the method? Alternatively, you can always type the complete address for the file (URL).

What about if i want to make internal linking?
For you to create an internal linking, i’m going to show you two ways to achieve that. First of all, you can use the “name” attribute in you anchor and assign the value any given name to point to the file or name you want the link to go to.

<a name="text2"> Put any text here</a>

Then in your link you can use the href attribute but in the value, after inserting the link of the page you want, put a pound(“#” )sign followed by the name you used in your “name” value.

<a href="index.htm#text2"> Click to go to Text 2</a>

consequently, you can use the id attribute in you elements, give it any name you desire, and in you href value place a pound(#) sign before the id name used.

<h1 id="text2"> Put any Text here </h1>

for the linking do this:

<a href="#text2"> Click to go to Text 2 </a>

Confusing? Take a look at Example 5 to understand better.

Example 5:
Linking Step 1:

<a href="links#text11">Click to go to Text 11</a>

<a href="links#text12">Click to go to Text 12</a>

<a  name="text11"> This is a sample Text 11 explaining Internal linking</a>

Text text text text

<a name="text12">This is a sample Text 12 explaining Internal linking</a>

Text text text text

  

NB. To achieve this type of linking above, you must include the page name in the href value followed by the pound sign and the “name” value assigned to place you want to link to.

It will look like this on a browser

Linking Step 2:

<a href="#text1">Click to go to Text 1</a>

<a href="#text2">Click to go to Text 2</a>

<h1  id="text1"> This is a sample Text 1 explaining Internal linking</h1>

<p>Text text text text</p>

< h2 id="text2">This is a sample Text 2 explaining Internal linking</h2>

<p>Text text text text</p>

  

It will look like this on a browser

As you can see, both method can be used to create internal linking just make sure you use the right step when doing internal linking, choose which ever one you like or the one that is easier for you to remember.
NB. the id attribute must start with a letter.

Can i link to any other thing?
Yes you can, you can link to an email address pretty much the same way you link to a document.

Example 6:

<a href="mailto:[email protected]">Click to send an email to Phcityonweb.com</a>

It will look like this on a browser

The only difference between a link to an e-mail and a link to a file is that instead of typing the address of a document, you type mailto: followed by an e-mail address. When the link is clicked, the default e-mail program opens with a new blank message addressed to the specified e-mail address. In window, it uses outlook as a default email program other Operating System differs. Please note that this function will only work if there is an e-mail program installed on your computer. Try it out for yourself.

Is there any attributes i can add to the link
Well you can add style attribute to give style to your link or add additional information when clicked or once the mouse pointer hovers on a link. but to create a link the href attribute must be used, you can add a title in addition.

Example 7:

<a href="index.html" title="Learn HTML Programming" >Click to go to Phcityonweb.com</a>

It will look like this on a browser

The title attribute is used to type a short description of the link. Try it out, don’t click just place the cursor over the link, you will see the text “Learn HTML Programming” appears.

Example 8:

This is another type of linking but this is done in the head section of the page, you can link your document to a style sheet or any other file using the “link” element

< link rel="stylesheet" type="text/css" href="sheet.css" />

Notice that we didn’t have a closing tag element, this is because the element “link” uses an inline element, which closes by itself. the “rel” attribute stands for “relationship” and describes the meaning of the link, the type attribute tells the browser that this link is either a text or a css (cascading style sheet document). In a later lesson, we’ll explain more about CSS and it syntax, just want to give a heads up on this.

---

Back

Main: HTML Programming

Previous Lesson: Attributes

Next Lesson: Images