Creating a website often requires linking pages together for a smooth user experience. Whether it’s moving from a homepage to an “About” section or linking different parts of your site, connecting web pages is essential. In this guide, we’ll walk you through how to create two web pages and link them together, all in a simple and fun way!

How to Connect Two Pages of a Website

Why Connecting Web Pages is Important

Imagine browsing on a site that lacks links. You could think of it as a maze with no exit! Links let it be easy for the users to navigate between pages. They also help search engines understand how your site is structured.

Basic HTML Structure of a Web Page

Before we dive into linking, let’s recall the basic structure of an HTML page. This foundational code is the starting point for every web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Page Title</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

Creating Two Web Pages

Now, let’s create two simple pages: one for “Home” and another for “About.” These pages will be linked together.

Page 1: “Home”

Here’s how you can create the first page, named “Home.” The design incorporates smooth, modern styles:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            width: 80%; /* Increased width for a larger card */
            max-width: 600px; /* Maximum width */
            padding: 40px;
            background: #f0f0f0;
            border-radius: 20px;
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2), 
                        -10px -10px 30px rgba(255, 255, 255, 0.9);
            text-align: center;
            transition: all 0.5s ease-in-out;
        }

        .container:hover{
            transform: scale(1.01);
        }

        h1 {
            margin: 0 0 20px;
        }
        p {
            margin-bottom: 30px;
        }
        a {
            text-decoration: none;
            color: #3498db;
            font-weight: bold;
            padding: 15px 25px;
            border-radius: 10px;
            background: #f0f0f0;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2), 
                        -5px -5px 15px rgba(255, 255, 255, 0.9);
            transition: background 0.3s;
        }
        a:hover {
            background: #d0d0d0; /* Change background on hover */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to the Home Page</h1>
        <p>This is the home page of our simple website.</p>
        <a href="about.html">Go to About Page</a>
    </div>
</body>
</html>

Output:

How to Connect Two Pages of a Website, Home Page — Home Page

Page 2: “About”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #b4f4f1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            width: 80%; /* Increased width for a larger card */
            max-width: 600px; /* Maximum width */
            padding: 40px;
            background: #92e7e7;
            border-radius: 20px;
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2), 
                        -10px -10px 30px rgba(149, 228, 241, 0.9);
            text-align: center;
            transition: all 0.5s ease-in-out;
        }

        .container:hover{
            transform: scale(1.01);
        }
        h1 {
            margin: 0 0 20px;
        }
        p {
            margin-bottom: 30px;
        }
        a {
            text-decoration: none;
            color: #3498db;
            font-weight: bold;
            padding: 15px 25px;
            border-radius: 10px;
            background: #8aebe9;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2), 
                        -5px -5px 15px rgba(123, 238, 238, 0.9);
            transition: background 0.3s;
        }
        a:hover {
            background: #c0f1e9; /* Change background on hover */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>About Us</h1>
        <p>This is the about page of our simple website.</p>
        <a href="index.html">Go to Home Page</a>
    </div>
</body>
</html>

Output:

How to Connect Two Pages of a Website, About Page

Using HTML Links to Connect Web Pages

The key to connecting these two pages is using the <a> tag, also known as an “anchor tag.” This tag creates a clickable link. The syntax is straightforward:

<a href="page.html">Link Text</a>

Linking the Pages

To connect the “Home” and “About” pages, we simply add the appropriate file path in the href attribute. For example:

On the Home page: <a href="about.html">Go to About Page</a>
On the About page: <a href="index.html">Go to Home Page</a>

Different Link Behaviors

There are a few ways to control how links behave when clicked:

Opening in the Same Tab

By default, when you click a link, the new page will open in the same tab. This is what happens when you use a simple <a href="page.html">.

Opening in a New Tab

If you want the link to open in a new tab, you can add the target="_blank" attribute. Like this:

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

This is useful when you want to keep the original page open while directing the user to another page.

Adding Styling to Your Links

Links can be styled with CSS to make them more attractive and interactive. We’ve already added some styling in the code above, giving the buttons a sleek and modern appearance. Here’s how you can customize the look:

a {
    text-decoration: none;
    color: #3498db;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    background: #f0f0f0;
    box-shadow: 5px 5px 15px #aaa, -5px -5px 15px #fff;
}

You can adjust the padding, color, or box shadow to match your website’s theme.

Testing Your Linked Pages

Once you’ve created and connected your pages, test the links by opening both pages in a browser. Click the links to ensure that they navigate as expected. If everything is set up correctly, your users will be able to smoothly jump between your pages!

Best Practices for Linking Web Pages

Use descriptive link text: Instead of saying “Click here,” make your link text meaningful, like “Go to About Page.”
Check for broken links: Always test your links to ensure they work correctly.
Don’t overuse links: Too many links on a page can be overwhelming.

Common Mistakes to Avoid

Incorrect file paths: Make sure the href attribute points to the correct location of the file.
Forgetting target="_blank" when necessary: If you want the link to open in a new tab, don’t forget to add the attribute.

SEO Benefits of Properly Linked Pages

Internal linking is not only helpful for user navigation but also for SEO. When search engines crawl your website, they use internal links to understand the structure of your site. Properly linking pages can help boost your SEO ranking and make your website more user-friendly.

Also Read:

Conclusion

Connecting two pages on a website is a simple task, but it’s fundamental to good web design. With just a few lines of HTML and CSS, you can create stylish links that improve navigation and enhance the user experience. Whether you want to open pages in the same tab or a new one, now you’ve got the skills to make it happen!