HTML5 and CSS3 Fundamentals: In-Page Links

How to Use In-Page Links in A Web Site

In this training, we’ll wrap the discussion on how you can use the In-page links in your website. By the end of the class, you’ll not only learn the significance of the In-page links in website development, but also how to create these links in your website that promotes the interactivity of your website.

To start off, let’s define what the In-page links are.

Well, the In-page links are hyperlinks on your web page that enables users to link to other pages on the same page. These links can be regarded as links within a page. If you’re developing a website, then your main objective is to make sure that your visitors can browse as many pages as possible. That’s why your website may have so many web pages.

Associating these pages requires that you use the In-page links. This is all about connecting several pages within a given web page—that’s why it’s called In-page link, after all. Why are these links important for a website developer?

Well, the In-page links are important to a web developer because of a number of reasons. These reasons include:

  • They permit users to navigate numerous web pages on a website. If your website has numerous web pages, then the only mechanism that can allow users to navigate these pages are the In-page links.
  • They help to establish the information hierarchy for a given website. The In-page links can help you organize your website according to categories. This gives your website a good structure that is easy to navigate.
  • They may help you to market your website by increasing your presence on the internet. Most search engines rely on the In-page links when displaying the results for a particular query.

Types of In-Page Links

There are different types of In-page links in HTML. These are:

  • Local links – They are used to link to pages that exist the same server or the folder/directory as the current page.
  • External links – They are used to link to a page that exists on a different server or folder/directory
  • E-mail links – They are used to open the visitor’s e-mail program
  • Download links – They allow users to download files on your website.

So, How Can You Use The In-Page Links In A Web Page?

Inserting an In-page link depends on whether that link is local, or external or email or download. Before you can insert an in-page link in your web page, you have to establish whether the page you’d like to link to be in the same directory/folder or it’s located in a different folder/directory or it’s an email or a download link that you’d like to establish.
Once you’ve established the type of link you’re dealing with, you can proceed to insert that page link. Here is the syntax for inserting different types of the in-page links in an HTML document:
1. To insert a local link

    • Use the syntax below to insert a page that exist the same server or the folder/directory as the current page.
<A href="Name of the Page.html”> Click Here to View the Index Page</A>

 

For instance the example below shows how an HTML page named: “Index.html” that is located in the same folder as the current page can be linked.

<A href="Index.html”> Click Here to View the Index Page</A>

 

2. To insert an External Link

    • Use the syntax below to insert a page that exist the same server or the folder/directory as the current page.
<A href="Path to the Webpage\Name of the Page.html”> Click Here to View the Index Page</A> for pages that exists on the same computer but in different folders or directories.

 

In this case, you must specify the complete path to the location of the web page.
For instance the example below shows how an HTML page named: “Index.html” that is located on Local Disk C.

<A href="C:\Index.html”> Click Here to View the Index Page</A>

If the page exists on a different server, then use the following syntax:

<A href="www.name of the server.com\name of the file”> Click Here to View the Index Page</A>

For instance the example below shows how an HTML page named: “Index.html” that is located at www.stoneriverelearning.com.

<A href="www.stoneriverelearning.com\Index.html”> Click Here to View the Index Page</A>

 

3. To insert an Email Link

    • This link is used to receive feedback comments from your website visitors. To insert an email link in your page, use the syntax below:
<A href= “mailto: someone@mail.com?Subject=Subject“>Click Here To Send Me Email </A> where someone@mail.com is the email address of the recipient and the Subject is the message that appears in the subject line of the email program.

This is illustrated below:

<A href= “mailto: namsiko@gmail.com?Subject=Greetings! “>Click Here To Send Me Email </A>

4. To Insert a Download Link

    • To insert a download link in your HTML page, use the following syntax:
<A href=”File URL.zip“>Click Here to Download This File</A>

This is exemplified below:

<A href=”C\Notes.zip“>Click Here to Download the Notes</A>
    So there you have it—we’ve covered the most important concepts about the In-page links in HTML. Now, start the development of your website by using the concepts you’ve learned in this lesson.

GET YOUR FREE HTML5 & CSS3 EBOOK!

(Visited 165 times, 1 visits today)