HTML – Connecting Two Pages

Html start second page

If you are an absolute beginner, you might wonder how to link two HTML pages together. In HTML, linking two pages together, like any other task involves tags, attributes, and variables. Before understanding ways to link two HTML pages, understanding these concepts would be a good place to start. In HTML, links permit one to seamlessly move around across pages. This is the reason why links play a vital role. If you want to move between two resources on the web, then adding a link would be the best thing to do. To be more precise, a link is a simply defined text, which is clickable allowing a user to move from page to page. Additionally, you can give this link to almost any element including text, image, page, or even another website. In this article, we will focus on how to use this and link two pages in HTML together.

Syntax For Linking

Before you understand how linking two pages in HTML works, you need to understand its syntax.

Below we have added an example.

To break this down for you,

The above syntax has anchor tags that will be responsible for defining and opening a new targeted page using an attribute that is quite specific like the target link.

You can use these links to do almost a lot including creating links to download a document, to create a bookmark, etc.

How To Link Two Pages In HTML Together?

Now that we know the basics of creating a link, let us see how we can link two HTML pages together.

Step 1: To link two pages in HTML, you might want to start by opening your template text file and navigate to file>save as. This will open up a dialogue box. Now, navigate to your HTML folder.

Step 2: Save the new web page you’ve created in your desired folder.

Step 3: While saving, type your webpage name with the extension as .html, say index.html and choose the option “All Files” in your “Save as type” menu. Now check if you have a new web page created in your folder.

Step 4: Create yet another web page using your template text file and now save this in the same way but with another name, say about.html. This would save a webpage in your folder as “about.html”.

Step 5: If you didn’t notice, we have two web pages now. All you have to do is link these two HTML pages together. For this, open the first index.html webpage and insert the following code.

Before moving to the next page, save this and load your work.

Step 6: Now that you have a hyperlink, try opening it to see the text that reads “ Link to Above Page” as per our above code. Then, you will have to add a destination page. For the same, open the about.html template and add the following code and save it.

You can do this to create and link any two pages together. If you open the index.html page, you will find a hyperlink with a text displayed as “Link to About Page” and when you click it, you will be taken to another web page that reads “This is the About Page”

That is how simple it is to link two pages in HTML together. Do try it out. The process is quite similar for Windows and Mac although the text editor would be different. Before typing your code out on your Mac text editor, don’t forget to navigate and choose Format>Make Plain Text.

If you want more such tips and tricks to become a pro in HTML, we highly recommend you to check the Web Development Foundation Course out. By signing up for this on the Testbook app, you will have access to various materials, mentoring sessions, and study guides. You can download the app from Google PlayStore today to avail some interesting and exclusive offers to make your learning experience a great one.

Know more about Web Development Books For Learning HTML, CSS, JavaScript, JQuery. here. Download the Testbook App from Google Play and get amazing offers and discounts.

The act of developing websites for the internet as a single static page or a complex website having many web pages within it is called Web Development. Web development is a growing area and according to statistics, there are close to a million web development jobs at present with anuual salary of 4.5 LPA. The vacancies and opportunities are countless as well those who seek a well-qualified web developer to fill those roles. Candidates can check out the Topp 5 Best Web Development Books to Learn HTML, CSS, JavaScript, & JQuery.

How To Link Two Html Pages Together FAQs

When using TextEdit to link two pages in HTML together, choosing the Make Plain Text option would help remove all formatting, images, attachments, and document properties.

When creating and linking two pages in HTML, the href attribute plays a crucial role. Unless one adds the href attribute the element won’t be a link.

By default, if you do not save the two pages to be linked in HTML with the extension .html, it will save it as .txt and this would be just text and not a web page.

The advantages of linking two pages in HTML are not a few. Links help a user to move across web pages seamlessly. If you are creating a website with multiple web pages such as home, about, and gallery, this will be important.

Источник

How to create multiple pages in HTML

Learn how to create multiple pages in HTML with three easy-to-follow steps.

Step 1: Create a folder

The first step is to add a folder. A folder stores all your pages in one place and makes it easier to organize your project.

To create a folder in Visual Studio Code, click the Explorer icon on the left sidebar and click the new folder icon.

You can name the folder however you like, and in this guide, I call it business-website as an example only.

Step 2: Create an HTML file

The second step is to add HTML files. The HTML files will serve as a page of the website, and you can have as many pages as you like. In this guide, we will make only four web pages.

To do that, first, add a new HTML file inside the folder, and we will name it index.html . That will be your homepage, and it is crucial to call it an index because when the webserver first loads your site, it will search for index.html by default.

Next, add three other HTML files and give the filenames as about.html , service.html , and contact.html . Make sure that all these files are in the same folder.

When you finish it, your website directory should look like this:

Step 3: Create a navigation bar

Okay, you are almost there! The only thing left is to add a navigation bar in all HTML web pages so that the visitors can navigate your website.

To create a navigation bar, add the nav elements inside the body elements. Inside the nav elements, create a navigation link by adding the a elements, and each link should have the href attribute where the value is the name of the HTML file.

For example, to link a contact page, you do like this:

a href="./contact.html">Contacta> 

The final code should look like this in every HTML file.

 html lang="en"> head> meta charset="UTF-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>Business websitetitle> head> body> nav> a href="./index.html">Homea> a href="./about.html">Abouta> a href="./service.html">Servicea> a href="./contact.html">Contacta> nav> body> html> 

Conclusion

And now it is all done! When you head back to the browser and click any links in the navigation bar, it will take you to its destination page. With this, you have learned how to create multiple pages.

I hope you find this guide helpful and happy coding!

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

Источник

How To Create Additional Webpages on Your HTML Website

When building a website, you may want to have more than one webpage. If you want to add and link to additional pages, you’ll need to first create a new html file in your website project directory. In this tutorial, we’ll learn how to create and link to an additional webpage on your website

Our demonstration website includes an “About” webpage. In this tutorial, we’ll walk you through the process of creating and linking to an “About” webpage, but you may change the title and the content of this page to fit your needs.

To add a new page to your website, create a new file named about.html and save it in your project directory html-practice . (If you have not been following the tutorial series, you can review instructions for setting up a new html file in our tutorial Setting Up Your HTML Project.)

Note: If you decide to choose your own name for the file, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters as these can cause problems later on. You must also include the .html extension.

Next, you’ll need to format the file by adding information that will help the browser interpret the file content. To format the file, add following code snippet at the top of the document:

DOCTYPE html> html lang="en"> head> meta charset="utf-8"> title>Abouttitle> head> html> 

Make sure to change the highlighted text with a title you want for you page. For an explanation of each of the HTML tags, please visit the earlier tutorial in this series Adding an HTML Element To Your Webpage. Save the file before you continue.

Before adding any content to this page, let’s walk through the steps of adding a link to this page on your homepage.

First, return to your index.html file and add the following snippet below the subtitle of your site and above the closing

. p style="font-size: 20px; color:#1F9AFE;"> a href="Webpage_FilePath">About this sitea> p> .