How to Apply Same Content to Multiple HTML Pages

How to apply same content to multiple html pages

You can use PHP to do that. Write the HTML code in PHP file, then add include statement in your HTML. This saves you from having to write same code again and again specially for navigation, etc.

PHP manual explains it.

Hope it helps.

How to apply the same change to multiple pages at once?

With HTML, I don't think there's any support for that kind of dynamic feature yet.

However, if you seek to want to make changes on a portion of your website and see it apply to every other page on your website that has the same portion, there are frameworks, libraries and even template engines that support such.

You may need to use HTML alongside these tools or just use them to replace HTML. For instance, when building a website with Node and Express, there are a good number of template engines that you can make use of that can be used alongside HTML to make your website dynamic. I would recommend that you try out one of the following: pug, ejs, handlebars. I believe you can achieve that level of dynamism with one of them.

You can also decide to use front end libraries or frameworks like react, vue and angular. These tech tools enable you to create a portion of a website(called a component) once and reuse it on as many pages as you want. Anytime you make a change to that component, it automatically adjust itself on every other page it has been inserted.

How to create multiple HTML pages with same layout?

Creating multiple HTML pages with the same layout is exactly the reason why frameworks such vuejs and react are so popular. if you are new in web dev I can recommend you vuejs. It's very easy to learn.

How to properly use same text sections across multiple html pages?

I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.

For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp

UPDATE: I did a little test, i created the following JavaScript:

function helloTitle(){
    var text = "Hello World!";
    document.getElementById("title").innerHTML = text;
}

And referenced it in some HTML pages like this:

<script src="commonText.js" type="text/javascript"></script>

After that i only need to call the function in the element i want it to modify:

<p id="title"><script>helloTitle();</script></p>

This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.

Hope this information could help you!

How to run a function on multiple HTML files and write the output of all executions into a single file

Since the pages you want to grab data from can be accessed over the internet, it would probably be easiest to achieve what you're looking for with a userscript. Since the URLs you need are already in an array, it's simply a matter of requesting each URL, parsing it, and adding the scraped information to your results array or object.

Here's an example, using the URLs of some random SO questions. Let's say I wanted to get the asker's name of each question. This is available via the selector string #question .user-details > a.

Put the URL you want the userscript to run on in the @match metadata section. Due to the same-origin policy, this needs to be on the same domain as the URLs in your array. Because the example URLs I'm using are on https://stackoverflow.com/, the @match also needs to be something on https://stackoverflow.com/.

Put the asynchronous code into an async IIFE so we can use await easily, and then for each URL, fetch it, transform the response text into a document so its elements can be easily querySelected, select the appropriate element, and push it to the results array. At the end, console.log the results:

// ==UserScript==
// @name         scrape example
// @namespace    CertainPerformance
// @version      1
// @match        https://stackoverflow.com/questions/51868209/how-to-run-a-function-on-multiple-html-files-and-write-the-output-of-all-executi*
// @grant        none
// ==/UserScript==

const urls = [
  'https://stackoverflow.com/questions/313893/how-to-measure-time-taken-by-a-function-to-execute',
  'https://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string',
  'https://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags',
];

(async () => {
  const usernames = [];
  for (const url of urls) {
    const response = await fetch(url);
    const responseText = await response.text();
    const responseDocument = new DOMParser().parseFromString(responseText, 'text/html');
    const username = responseDocument.querySelector('#question .user-details > a').textContent;
    usernames.push(username);
  }
  console.log(usernames);
})();

To see this in action, install a userscript manager of your choice, such as Tampermonkey, install this script, navigate to the URL in the match metadata section (the URL of this page:

https://stackoverflow.com/questions/51868209/how-to-run-a-function-on-multiple-html-files-and-write-the-output-of-all-executi

), and open your console. The three usernames corresponding to those three question URLs should appear after a moment:

   ["Julius A", "Lightness Races in Orbit", "Community"]

If there are lots of links, you also might consider awaiting another Promise that resolves after, say, 5 seconds, on each iteration, to avoid hitting a server-side rate-limiter, eg

await new Promise(res => setTimeout(res, 1000));

If the amount of data you're scraping is significant, console.logging the results might not be easily accessible enough. One possible alternative is to put the stringified results into a new textarea, whose raw data can be more easily copied from:

const { body } = document;
const textarea = body.insertBefore(document.createElement('textarea'), body.children[0]);
textarea.value = JSON.stringify(usernames);

If the document is in an odd encoding, you may need to decode it before calling DOMParser, such as with TextDecoder. For example, for a page in windows-1255 encoding, you would await the arrayBuffer() called on the response and then decode it, like this:

for (const url of urls) {
  const response = await fetch(url);
  const responseBuffer = await response.arrayBuffer();
  const responseDecoded = new TextDecoder('windows-1255').decode(responseBuffer)
  const responseDocument = new DOMParser().parseFromString(responseDecoded, 'text/html');
  const username = responseDocument.querySelector('#jobsArr_0').textContent;
  usernames.push(username);
}

When used on the page you posted, this results in:

   ["אחמש"]

The #jobsArr_0 is just some element that contained Hebrew text - now, the characters aren't mangled anymore.

Is it possible to show multiple HTML file contents in a HTML page at the same time?

This link ( Do I have to rewrite an html header everytime I want to use it? ) will show you how to do that .

Thank you @Shehary and @floor for the best answers.

multiple pages in one html file without fixed nav on each page

I can't think of any pure CSS ways to do this, but it can easily be done with a little JavaScript to check if the hash is empty, and then show #home and hide it when there is a value.

window.onhashchange = checkHash;

checkHash();

function checkHash() {
  var home = document.getElementById('home');

  //Check if the hash is empty
  if (window.location.hash.substring(1) == '') {
    home.style.display = 'block';
  } else {
    home.style.display = 'none';
  }
}

.section {
  display: none;
}

.section:target {
  display: block !important;
}

<div id="home" class="section">
  <a href="#content">Content</a>
  <a href="#somthingElse">Somthing Else</a>
  <h3>Home</h3>
</div>
<div id="content" class="section">
  <a href="#home">Home</a>
  <h3>Content</h3>
</div>
<div id="somthingElse" class="section">
  <a href="#home">Home</a>
  <h3>Somthing Else</h3>
</div>

Multiple distinct pages in one HTML file

Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:

<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
</head>
<body>
    
  <div id="Page1">
    Content of page 1
    <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
  </div>
    
  <div id="Page2" style="display:none">
    Content of page 2
    <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
  </div>
    
</body>
</html>

---

Related Topics