fbpx

This is an absolute Beginners Guide to HTML on how to link two html pages together. This is a Practical Guide with Examples to show this in Action.  <a href="https://www.360.com.ng/">Visit 360!</a>

As a newbie to the Hyper-Text Markup Language (HTML), you would encounter the need to link two html pages together which is a necessity, for this reason, we have put up this Tutorial just for you.

 

First and foremost I want to believe that you know what HTML is and probably have been playing around with it while learning a thing or two about its Tags, Attributes and Value

But at this stage, you want to know how to link or connect two of your html pages together so that visitors can navigate from one page to the other

In a basic sense, after a user arrives at your Home Page which is the (index.html),

he or she will want to navigate to either of your Contact us page (contact.html / contact-us.html / contactus.html), About us Page (about.html / about-us.html / aboutus.html) or your Services page (services.html / our-services.html / ourservices.html).

how to link two html pages together
how to link two html pages together

In other to achieve this, you will need the HTML <a> Tag. In HTML, Links are defined with the help of the A Tag: <a href="url">link text name</a>

With just the <a> Element, we are not going to be able to tell the web page where to load you to next after you might have clicked on the link

and that’s where the Hyper Reference attribute (href) comes into play,

It specifies to <a> the destination address or location

Example 1: Text Linking <a href="contact-us.html"> Contact us </a>

                                                 THE OPENING TAG          CONTENT  CLOSING TAG = ELEMENT

In HTML, a combination of the Opening Tag, the Content and the Closing Tag is referred to as an Element.

 

Example 2: Image Linking <a href="map.html"> <img src="map.jpg" /> </a>

The Example linking 2 shows you that you can have more than a text in the Content area of your Link

NOTE: It is only the content area of the entire linking will display on the web page, the rest will be hidden,

So in the examples above, only Contact us and the Map image will display and clicking on it will load you to the desired destination address or page that was included in the link

How to link Web pages in HTML

 

So create your first page index.html and then create the second one about.html

Place them both on the same folder, then head into index.html and put this there <a href="about.html">About</a>

Save the page and load the Index page in your Browser,

Click the link About on the Index page and you will be redirected and loaded to the About us page.

 

INDEX Page (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>How to link two html pages together (A Practical Guide with Examples)</title>
</head>
<body>

<h1> Welcome to 360 </h1>

<p>We sell Ready-Made Bsinesses, Blogs and Articles for you at very affordable rates, do not hesitate to coontact us today.</p>

<p> We are a very Dynamic Company with a passionate Team and we believe in the power of Creativity and Immagination. For more information about us, visit our <a href="about.html">About</a> page</p>

</body>
</html>

ABOUT Page (about.html)

<h1<About us

<a href="about.html#who"<Jump to Who we are/a>
<a href="about.html#who">Jump to About Team
<a href="about.html#pitch">Jump to Pitch of what 360 Sells

<h2>We

<p id="who">We are 360, Inc, we sell Ready-Made Bsinesses, Blogs and Articles for you at very affordable <rates, do not hesitate to coontact us today.

 

<h2>360 Team

<p id="team">We are a very Dynamic Company with a passionate Team and we believe in the power of Creativity and Immagination.

 

<h2>360 Pitch

Running a Business is hard and tedious, setting it up shouldn’t be a double problem for you, stop wasting your time doing some trials and errors, using the wrong platforms and Solutions. Buy our ready-made Articles, Blogs and Businesses as a Website or an App

Video on How to link two html pages together

Watch the Video for more Clarity and In-depth workflows

How can you identify a Link on a Web page?

When you hover or move your mouse pointer over a link,

it will automatically change your moue pointer from the pointer it was to a hand which denotes the fact that there is a link there and its clickable.

      Unvisited Link

  1. A default link that hasn’t been clicked yet will have a Blue color and will be Underlined

    Visited Link

  2. Whereas a default link that has been clicked will be Purple in color and Underlined too

    Active Link

  3. Lastly, any Default Active link on a web page will show a Red Color and also Underlined

 

How to make link load on a new Window or New Tab

This is known as the Link Target Attribute in HTML, it defines the Target of your link as to where it should be opened.

There are about 5 different Target Attributes

_blank Target Attribute

  1.  _blank – This Attribute tells the <a> Hyper Reference in charge of opening the link to open it in a new Window or Tab still keeping the current page open. This is a very important aspect of Search Engine Optimization (SEO)  Example: <a href="https://www.360.com.ng/" target="_blank">360</a>

    _self Target Attribute

  2. _self – Like the name implies, this attribute is instructing the link to load in the same page where the link was clicked, from home you clicked on about and the page loaded about and there is no more home. This is the default attribute when you don’t specify any.

    _parent Target Attribute

  3. _parent – This opens the link in the same parent frame as the current page

    _top Target Attribute

  4. _top – this uses the complete body of the Window of the browser to load the destination URL

    framename Target attribute

  5. framename – Off course you will pass the frame name to the link and it will load in the named frame, typically in a new Browser Window

Go ahead and give each and everyone of them a trial to see how the work and then choose the one that suites your needs.

 

What is the use of links apart from linking to another page

Links are one of the most powerful Tags in the HTML Tag-set, it serves as the connector that connects or bind all pages in your projects together

  1. You can link from one page to the another on the same site or PC

    (Local Links)

  2. You can link from one section of a particular page to another section of that same page

    (Anchor Links)

  3. You can link from your page or website to an external website like Google.com

    External Links

  4. You can link to PDF files, Word Documents, Pictures, Videos, Music, etc…

 

How to use Anchor link to build Bookmark on a Web page

When navigating a web page like Wikipedia, have you noticed an organized Bookmarked list of the longer page that might be tedious to scroll through?

That is a Bookmark, it is created with the HTML <a> tag for easy navigation from one section of the page to the other

By clicking on the Bookmark, you will be drawn down to the exact spot where the content you seek for is, and if you intend to go up back to the Bookmark again, there is also a Bookmarked link to do that.

Adding this to the beginning of the About Page we created above will create a Bookmark on the About page

REMEMBER: Bookmarks are usually at the top for easy access

<a href=”about.html#pitch”>Jump to Pitch of What 360 Sells</a>

 

how to link two html pages using buttons

It is the same thing as linking with Text and Images, just that in the place of the Text or Image, you will replace it with a Button

This Button could be an Image Button

It could be an HTML Button

Or a CSS3 Button designed with CSS which will load faster and not have any issue on Mobile or Browsers.

So to achieve this, this is what we do

<a href="contact.html">
<button>Contact us</button>
</a>

And this is the result

how to link two html pages using buttons

Check out a working and clean Example here on Jsfiddle: https://jsfiddle.net/2zov6q2v/14/

Summary

I just hope that our Article on how to link two html pages together will be well understood by you, but in the case that you fail to understand any part of the tutorial or guide, do not hesitate to make a comment with your challenges in the comment area below.

We will be so glad to assist you in answering your questions and expatiating more in other to bring in more clarity to you.

If you found this content helpful please click the like button below and also share it with Friends and Family.

You can also read more about Linking pages in HTML on W3C’s Official Website

360 is a content writing and Business solution company based in Lagos, Nigeria, we provide unique and original contents for blogs, guest blogging and content marketing. We also offer training for bloggers, graduates and small businesses to help them acquire the necessary skills needed to succeed. We provide an all in one Business Solutions and Services for small and Medium Enterprises

Leave a Reply