ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

My first webpage - How to make a link to another page?

Updated on March 2, 2011

In the first lessons of this tutorial you have learned how to set up a basic html web page. The power of the internet however lies in the possibility that you can connect pages with each other. It is possible to make a website that has just one page. It can even be interesting in some cases to make a website that has just one page. But in general what makes a website a true website is that it is a collection of pages which are connected together.

To connect one page with another page, you use a link.

A link in its most simple form is a word or a phrase (a group of words together) on which you can click. If you click on it, you will be taken to another page.

In other words, a link is a word on your website, inside the text or, for example, below the text, which is 'linked' with another page. You could compare it a little with footnotes. Only, with a link, compared to footnotes, you don't put the number behind the word to point to the extra background information, but you connect the word directly to a new page with the background information.

In this tutorial I will show you the most basic way to make a link. If you understood the part about making text bold and italic, then creating a link should not be difficult.

Create a second page

In order to create a link from one page to another page, we first need to make a second webpage. So, before I will explain you how to make a link, first you will need to start all over again:

Create a new page, completely from scratch. Follow all the steps again from the first section of this tutorial. Start with a new, empty file in notepad (or the editor that you used before) and start typing again all the basic HTML commands: <html> </html> etc.

After you have typed all the basic commands, add a title and add some text to the body.

It doesn't matter what you type in the body. After you have finished typing the HTML, you need to save this file with a different name than the first web page!

For example, you can save it as second.html or you can save it as page2.html. Don't forget to add .html at the end of the filename. It is important that you save it in the same folder, in the same location, as where you put the first file.

Return to the first part of this tutorial if you are not sure anymore how to make a basic webpage.

Create a second page

Before making a link, first create a new HTML page.
Before making a link, first create a new HTML page.
Start by typing the basic HTML code into a new editor window.
Start by typing the basic HTML code into a new editor window.
Save the file with a different name that the first page. For example save it as 'second.html'.
Save the file with a different name that the first page. For example save it as 'second.html'.
The file is now saved. If you like you can add a text to the body of the second page.
The file is now saved. If you like you can add a text to the body of the second page.
You can add a text to the body by typing something after &lt;body&gt; and before  &lt;/body&gt; .
You can add a text to the body by typing something after <body> and before </body> .
Simply select 'save' to save the page again with the same name. You don't need to select 'save as' again if you have already saved the page before.
Simply select 'save' to save the page again with the same name. You don't need to select 'save as' again if you have already saved the page before.

Return to the first page

If you want to make a link from the first page to the second page you will have to add HTML code to the first page. Creating a link from the first page to the second page means that you will create the link on the first page, so that the user can click on the link on the first page to go to the second page.

To create a link on the first page means that you need to make changes to the HTML code of the first page. To be able to add text and HTML code to the first page, you must open the first page in the editor, in notepad. The easiest way to do so, is to first start the program, the editor, notepad, and then open the file via 'File open' from the top menu. You should select 'All files' at the bottom in order to see the .html files. Otherwise you will see just the .txt files.

Another way to open the file with notepad is to click on the file with the right mousebutton and select 'Open with' from the popup menu. Then select 'Notepad' from the list of possible programs.

On a Macintosh this works a little different. I plan to write another Hub especially for working with simple HTML in TextEdit on a Mac. Contact me if you need help with this.

Return to the first page to make a link from the first page to the second page.
Return to the first page to make a link from the first page to the second page.
First add a text to the page which you will turn into a link, a text or a word on which the user will be able to click.
First add a text to the page which you will turn into a link, a text or a word on which the user will be able to click.

Creating a link

To create a link you use the command 'a'.

'a' comes from anchor.

The command 'a' is used in the same way as the command 'b' (for bold) and the command 'i' (for italic). (You can read here how to use '<b>' and '<i>'.) 'a' follows exactly the same pattern as the other HTML commands. You put <a> in front of the word which you would like to turn into a link and </a> after the word or words.

It looks like this:

Click <a>here</a> to go to the next page.


In this example the word 'here' will turn into a link to the next page.

Use &lt;a&gt; and &lt;/a&gt; to turn a word or a text into a link.
Use <a> and </a> to turn a word or a text into a link.
Add href="filename.html" to the command   to tell the browser which page should be loaded when the user clicks on the link.
Add href="filename.html" to the command to tell the browser which page should be loaded when the user clicks on the link.

Making a link with 'a' and 'href'

If you open the page with the HTML of the example before, nothing will happen... There is no link! There is a simple reason why the link is not working. We didn't tell the browser yet, where the link should take us. We didn't add the name of the page which should be loaded when the user clicks on the link. This information, where we want the link to go, is extra information for the command 'a'. This means that the command is still 'a', but we are adding an extra option to the command. In this case we will add 'href' to the command 'a':

Click <a href="">here</a> to go to the next page.

href comes from 'hyper reference' (or at least that's what I think that it comes from, that's how I remember the characters 'href') Between the quotes "" you write the filename of the page where you want to link to. It is important that you write the name how you saved the page on your computer. The filename is not the title of your page. It is the name that is used in the system of the computer, the name that you typed when you saved the page. In my example it is: second.html.

Click <a href="second.html">here</a> to go to the next page.


You must include .html when you type the name. The extension .html is part of the filename.

It is also very important to notice that the end of the command 'a' stays the same.

</a> doesn't change!

</a> is still the end of the command 'a'. </a> closes anything that is inside the command that starts with <a >. </a> never changes. It is always </a> !!!


Create a link back

Your link should work now. If it doesn't work, leave a comment at the end of this page and I will try to help. To continue practising how to make links, you should now make a link on the second page back to the first page. Try to figure out how to do it!

The best way to learn it, is to figure it out yourself. It will take a little more time than when I explain you how to do it, but if you manage to do it by yourself, you will not so easily forget anymore how you did it! And if you manage to do it by yourself, it also means that you really understand what you are doing. If you don't manage though, then don't worry to leave a comment below and I will try to help you.

Comments

    0 of 8192 characters used
    Post Comment

    • getmarbleworktops profile image

      getmarbleworktops 

      2 years ago

      This is really detailed for someone who don't know anything about HTML.

      Though good job.

    • profile image

      topdude155 

      2 years ago

      You have to make sure that both of your files are in the same folder, or that you indicate in your code the path of your second webpage.

    • Rota profile image

      Rota 

      3 years ago

      wow, this is a detailed and useful hub!

    • smga22 profile image

      smga22 

      4 years ago from Dhaka, Bangladesh

      Nice Hub. Thanks for Sharing.

    • Eshrak Ahmed profile image

      Eshrak Ahmed 

      4 years ago

      this command didn't work with me

    • profile image

      YUNO 

      6 years ago

      Why didn't you just tell the browser while we were doing all the other work trying to get the link to connect from the first page to the second page and back, you've made it harder for me to understand this step and i am having trouble with it. didn't really understand why you didn't just say it all in the first place.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)