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 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).
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
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
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-
<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>
<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>
ABOUT Page (about.html)
<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
<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.
<p id="team">We are a very Dynamic Company with a passionate Team and we believe in the power of Creativity and Immagination.
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
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.
- A default link that hasn’t been clicked yet will have a Blue color and will be Underlined
- Whereas a default link that has been clicked will be Purple in color and Underlined too
- Lastly, any Default Active link on a web page will show a Red Color and also Underlined
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
- _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
- _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
- _parent – This opens the link in the same parent frame as the current page
_top Target Attribute
- _top – this uses the complete body of the Window of the browser to load the destination URL
framename Target attribute
- 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.
Links are one of the most powerful Tag in the HTML Tag-set, it serves as the connector that connects or bind all pages in your projects together
- You can link from one page to the another on the same site or PC
- You can link from one section of a particular page to another section of that same page
- You can link from your page or website to an external website like Google.com
- You can link to PDF files, Word Documents, Pictures, Videos, Music, etc…
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>
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
And this is the result
Checkout a working and clean Example here on Jsfiddle: https://jsfiddle.net/2zov6q2v/14/
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 with Friends and Family.
You can also read more about Linking pages in HTML on W3C’s Official Website