How to Connect Two Pages in a Website-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to Connect Two Pages in a Website

Oct 08, 2024 am 06:23 AM

How to Connect Two Pages in a Website

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:


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

Copy after login

about.html:


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

Copy after login

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:


&lt;a href="about.html"&gt;Go to About Page&lt;/a&gt;

Copy after login

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:


&lt;a href="index.html"&gt;Go to Home Page&lt;/a&gt;

Copy after login

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

Copy after login

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!

Statement of this Website

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