Home >Web Front-end >JS Tutorial >How to Connect Two Pages in a Website

How to Connect Two Pages in a Website

Susan SarandonOriginal: 2024-10-08 06:23:021055browse

In this guide, you will learn how to link two pages on your website using basic HTML. Linking pages allows users to navigate between different parts of your site easily. Let’s get started!

Create Two HTML Files First, create two HTML files that you want to link. For example, let's create one called index.html (your home page) and another called about.html (your about page).

Here’s what the HTML for each file could look like:

index.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to the Home Page</h1>
    <p><a href="about.html">Go to About Page</a></p>
</body>
</html>

about.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Page</title>
</head>
<body>
    <h1>About Us</h1>
    <p><a href="index.html">Go to Home Page</a></p>
</body>
</html>

2. Linking the Pages

To connect the two pages, we use the tag in HTML, which defines a hyperlink. The href attribute inside the tag specifies the path to the file you want to link.

For example:


<a href="about.html">Go to About Page</a>

In this example, the link will take the user to the about.html page when clicked.

Similarly, on the About Page, you can create a link back to the Home Page using:


<a href="index.html">Go to Home Page</a>

File Structure For these links to work correctly, both files should be located in the same folder. If your HTML files are in different folders, you'll need to specify the correct file path in the href attribute.

Here’s what your file structure should look like if both files are in the same folder:


/website-folder
   ├── index.html
   ├── about.html

If the files are in different folders, adjust the href attributes to reflect the correct paths.

Testing the Connection After setting up your links, open the index.html file in a web browser. You will see a link that takes you to the About Page. When you click on it, it should navigate to about.html. Similarly, on the About Page, clicking the link should bring you back to the Home Page.

Conclusion
That’s how you can easily connect two pages on your website using HTML. This is a fundamental step in building a website, ensuring smooth navigation for users. Happy coding!

The above is the detailed content of How to Connect Two Pages in a Website. For more information, please follow other related articles on the PHP Chinese website!

html if for using Attribute this href

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Statement Coverage: A Foundation for Effective TestingNext article：Statement Coverage: A Foundation for Effective Testing

See more

How to Connect Two Pages in a Website

2. Linking the Pages

Related articles