Geek Answers Handbook

Repeat the same HTML on multiple pages

It is very difficult for me to find this, because I have no idea what to call it.

I will try to describe the process that I want and see if any of you know such an editor. I have a website that repeats the same html component, like a menu. I can determine what the css menu looks like, but I cannot (as far as I know) add the same part of html to each html page using a simple line. What I am doing is copying the menu to any place. If I change the menu, I need to do all this. I know this can be achieved using a dynamic server with something like php or jsp, but I don't need it to be dynamic.

I was wondering if there is a way to do this. I thought there might be an editor where I can edit html using includes and then “compile” htmls after modification to create the htmls that I replaced on my server.

thanks

+7
source share
4 answers

Look, the server side includes ... create a menu.shtml page, and then enable it like this:

 <!--#include virtual="/menu.shtml" -->

It is supported by most of the web servers out of the box (including IIS, Apache and lighttpd)

+4
source

Have you heard about the MasterPage Concept

The link below will give you a quick start.

A home page is pages that will act as a frame for all other pages. You should write this only one. And every page that falls under this will have to include a homepage. That's all!

+1
source

You can write a simple js bit in an external file, and then call it on each page to dynamically load the menu. Then you can simply edit the menu by editing the JS file. all you have to do is include in html and use document.getElementById ("menu"). innerHTML = menuHTML; where menuHTML is a variable containing pure HTML menu code. Then you can include the JS file and call it in the onload body

0
source

You can do it with jquery

Suppose you have page1.html page2.html, etc.

You want each of these pages to have your contact information. You can create a file called "info.txt". At the place where you want this contact information, you put a div. as shown in this example

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <!-- page content --> <div id="contact"></div> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("#contact").load("info.txt"); ; }); </script>

Everything that you put in 'info.txt' will be put in place if you put

0
source

More articles:


All Articles