Creating and Using Links in HTML

To get to this page what did you do ?

If you were navigating by use of the blue underlined text at the bottom of each lesson, or the text to your left then you were using a link. Other links can be found in the top navigation of the page.

A link leads ( or re-directs ) you from one location to a next.

Links are classified as being either internal or external. Before each type is explained in more detail, lets be clear on what a link looks like.

A link typically looks like this:

Click Here To Go To New2HTML
or
New2HTML
or even
www.New2HTML.com

The Anchor Tag

Links are created by using the anchor, <a> tag. The example below shows its use.

Example:

<a> Click Here To Go To New2HTML </a>

right arrow Click to see result

Text placed between the opening and closing anchor tag will appear normal. This is because the link is incomplete and thus clicking it will not give a result. In order for the link to work we need to specify a direction ( where it should lead to ). Continue reading to find out more about this.

The href Attribute

Anchor tags have a number of attributes including the href (hypertext reference) attribute. This attribute specifies where clicking the link should carry us. When you click on a link, the browser redirects the webpage to the location pinpointed by the href attribute. Without the href attribute the link is basically useless.

Following up on the example above we want the link to go to the home page of this website (www.new2html.com):

<a href="http://www.new2html.com"> Click Here To Go To New2HTML </a>

Click to see result

Note: If you specify a address that is non existent then you will get an error when you click the link. Above, a web address is used for the value of the href attribute. But a web address is not the only value that can be specified by the href attribute as you shall soon see.

Notice that all 3 links given in the example above lead to the index page of this website (www.new2html.com). They were all created in the same way with the only exception being the actual text placed between the opening and closing anchor tag.

The title Attribute

The title attribute allows you to provide a title/description of a link. This title is seen whenever the mouse is placed over the link. If you scroll up to link examples given above you will have an idea. The title for each of these links is "new2HTML website."

Applying the title attribute to our code we get:

<a href="http://www.new2html.com" title="new2HTML website"> Click Here To Go To
 
 New2HTML </a>

right arrow Click to see result

The target Attribute

The target attribute is used to specify where the link should be opened. The values for the target attribute are, _self and _blank. The _self value opens the link within the same browser window. The _blank value opens a completely new browser window. By default, if no target value is specified, links will open within the same browser window.

Here's an example:

<a href="http://www.new2html.com" title="new2HTML website" target="_blank"> 

Click Here To Go To New2HTML </a>

right arrow Click to see result

Now that we have an understanding of the anchor tag, the href attribute, the title attribute and the target attribute lets go a bit further and examine the two type of links that exist, Internal and External links.

Internal Links

From one location to the next on the same page

One of the most important aspects of any website is ease of navigation. This is allowing your visitors to have easy access to information. When a visitor is on your site the primary objective of that visitor is to find what they want and fast. Links can be provided which "jump" to a specific location on a web page. If you have alot of information on a single web page a link can go straight to the section that is of interest to the visitor.

To produce such a link is a two step process. This is the first step:

<a href="#Title1" title="Click to go to Title 1"> Birds  </a> 

<a href="#Title2" title="Click to go to Title 2"> Trees  </a> 
 
<a href="#Title3" title="Click to go to Title 3"> Flowers </a>

In the above, the href attribute is given a unique identifier. Title1 is the id for the Birds link, Title2 is the id for Trees and Title3 for Flowers. To give an identifier start with the number sign, ( # ) followed by a unique name.

After setting the unique id, the second step involves assigning that id to the precise location on the page that we want the link to go to when it is clicked.

Like this:

<h4 id="Title1"> Birds  </h4> 

<h4 id="Title2"> Trees  </h4> 
 
<h4 id="Title3"> Flowers </h4>

right arrow Click to see final result

Take note of the id attribute used in the above code snippet. It has the value of the id previously created without the number sign ( # ).

Link from page to page

A link may redirect you to a different location on the same website but not on the same webpage. An example would be the navigation from one page to the next on this website via the "Next Lesson" or the "Previous Lesson" links below ( at the bottom of the page ).

To link to other pages you only need to set the href attribute to the address of the page you wish to reference.

Just like this:

<a href="Page2.html"> Page 2 </a>

The above code assumes that Page 2 is an html file previously created. Remember when preparing pages for a website store all your related internet files in one folder. This makes it much easier for you to reference them.

If you have an html page contained in a separate folders (sub folders) from the one to which you are working in then you need to specify the name of that folder before the name of the html file.

Example:
Imagine you have a folder titled HTML FILES which contains 6 of your pages for a website you're building. Within that folder you have a subfolder titled Folder 1 which contained the 7th page, page7. You want to link to this file, how would you do this ?

Layout of HTML FILES folder:

To accomplish this:

<a href="Folder1/page7.html"> Page 7 </a>

Since page 7 is in the sub-folder (Folder 1) we simply specify the name of the folder first followed by the name of the html file. That's it !

On the other hand, if you were working on page7 which is in the sub-folder (Folder 1) and you wanted to link to page3 which is in the HTML FILES folder ( the main folder ), the href value would become:

<a href="../page3.html"> Page 3 </a>

../ tells the browser to search the previous folder for the page. It is important to always spell the file names exactly as they appear when writing them as your href value.

External Links

Links to a next website

Sometimes you may want to link to a next website separate from your own. To do this the href attribute is given the value of the web address you want to go to. If there was such a website as www.nuffmoney123z.com we could provide a link to that site. When the link is clicked the website would come up.

For such links the href value would become:

<a href="http://www.nuffmoney123z.com"> </a>

right arrow Click to see result

Links for email

Links can be used to send emails. For example if there existed an email such as youremail@whatevever.com, then a link could be provided. Observe the example below:

<a href="mailto: youremail@whatever.com"> Send Me An Email! </a>

right arrow Click to see result

Clicking the link in the example should have opened your default email service (such as Outlook Express). Note that this type of link only works if you have a default email program already installed on your computer. The mailto attribute is used to specify the recipients email.

Previous Lesson - Lists Next Lesson - Images