How to create website subpages without more html files?-CodePudding

Do websites really have an indivudal html file for each subpage? Every "how to make website subpage" guide says to do so by making a new html file and linking it to another, but the end result is a lot of html files. Is there any way to keep multiple web pages within the same html file such that when I click a link it takes me to a new subpage, but the html for both pages are within the same file?

I currently make subpages by creating an html file for it and linking it to another page like this:

<a href="subpage.html">Link Name</a>

CodePudding user response：

you can use hash like below code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Machine Web UI</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>        
    
    <div>
        <a href="#abdd">abdd</a>
        <a href="#abdd1">abdd1</a>
        <a href="#abdd2">abdd2</a>
        <a href="#abdd3">abdd3</a>
        <a href="#abdd4">abdd4</a>
        <a href="#abdd5">abdd5</a>
    </div>

    <div id="abdd" style="height: 500px;width:500px;">abdd</div>
    <div id="abdd1" style="height: 500px;width:500px;">abdd1
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    <div id="abdd2" style="height: 500px;width:500px;">abdd2
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    <div id="abdd3" style="height: 500px;width:500px;">abdd3
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    <div id="abdd4" style="height: 500px;width:500px;">abdd4
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    <div id="abdd5" style="height: 500px;width:500px;">abdd5
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    
 </body>
</html>

CodePudding user response：

you can use templating engine to do this.

React Laravel Blades EJS

CodePudding user response：

Considering your actual problem is "a lot of html files", I would like to ask whether you have been using git. If no, try that first. If yes, read on.

First, as a project grows in size, the number of files increases.

Second, for your specific case, you could create a tab panel and put the contents of different pages on different tabs.
Keep in mind that this prevents you from having different content in <head> tags for each page. (It is probably not required, though)

Here's a tutorial on tabpanels I found through a web search:
https://dev.to/mainakibe/creating-a-simple-horizontal-switchable-tabs-panel-using-html-css-javascript-e0l

The following is a modification of the above.

function setupTabs() {
  document.querySelectorAll(".tab-btn").forEach((button) => {
    button.addEventListener("click", () => {
      const sidebar = button.parentElement;
      const tabs = sidebar.parentElement;
      const tabNumber = button.dataset.forTab;
      const tabActivate = tabs.querySelector(
        `.tab-content[data-tab="${tabNumber}"]`
      );

      sidebar.querySelectorAll(".tab-btn").forEach((button) => {
        button.classList.remove("tab-btn-active");
      });
      tabs.querySelectorAll(".tab-content").forEach((tab) => {
        tab.classList.remove("tab-content-active");
      });
      button.classList.add("tab-btn-active");
      tabActivate.classList.add("tab-content-active");
    });
  });
}

document.addEventListener("DOMContentLoaded", () => {
  setupTabs();
});

* {
  box-sizing: border-box;
  margin: 0;
}

.tabs {
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 10vh;
}

.tab-btn {
  background-color: #fff;
  border: none;
  border-bottom: 1px solid gray;
  color: #000;
  cursor: pointer;
  padding: 10px 0;
  margin: 10px 0;
  outline: none;
  width: 10%;
}

.tab-btn-active {
  border-bottom: 2px solid hsl(0, 94%, 66%);
  color: hsl(20, 94%, 75%);
  font-weight: bold;
  background-color: #136;
}


/* tabs content */

.content {
  width: 100%;
  padding: 0.5rem;
}

.tab-content {
  text-align: center;
  width: 100%;
  height: 100vh;
  position: relative;
  top: 1rem;
  display: none;
}

.tab-content-active {
  display: block;
}

<div >
  <div >
    <img src="https://i.postimg.cc/vTkGR0jV/html5.png">
    <!-- tabs buttons  -->
    <button  data-for-tab="1">Home</button>
    <button  data-for-tab="2">About</button>
    <button  data-for-tab="3">Contact</button>
  </div>
  <!-- tabs content  -->
  <div >
    <div  data-tab="1">
      <p> This is the homepage. </p>
    </div>
    <div  data-tab="2">
      <p> About us. </p>
    </div>
    <div  data-tab="3">
      <p> Phone:  00 xxxxx xxxxx </p>
    </div>
  </div>
</div>