I don't like "fancy". I write my webpages "by hand".
And yet I do sometimes resist the urge to do things the hardest possible way.
In this essay, I will show you a (quite) simple way to provide for some text that is the same on several (or many) of the pages in your site.
Suppose you were trying to help people understand the standard division of living things into the commonly used kingdoms, phyla, classes... genera and species. (King Philip Came Over From Germany Sozzled.) As I was, in part of the Flat Earth Academy.
Three pages from that effort might look like this...
(The Flat-Earth-Academy.com pages try to give you a bit more information than that.)
Notice that each page has...
The vertebrates
... near the top, and...
Contact Editor at NotThis@gmail.com
... near the bottom.
Suppose I want to change "vertebrates" to "Vertebrates", i.e. make the first letter upper case?
In the Bad Old Days, I would have to reload each of the three files, make the change, re-save them, upload the changed files to my web server.
Today, I only need to change the contents of one file!
(How I achieved the different font family and background are explained in a page I wrote about using CSS to control font effects, by the way. Those "frillS" were just to help you see what bits are the same on the three pages.)
So! How did I do it?
In addition to the obvious three pages of HTML that you would need to duplicate my little guide to the fish/ reptiles/ birds, you would need....
One copy of a special page with the Javascript. (This will be explained)
And one page for each bit of "inserting" you want to do.
In the case of the example, there were two "to be inserted" pages.. one for "The vertebrates" at the top; one for "Contact..." at the bottom. (You can put MUCH more into the inserts, and much fancier stuff.)
The two pages are just simple HTML. They don't even need... indeed should not have... the normal blocks. (HTML/ Head/ Body). They simply contain the HTML that you would have put on each of the pages that will carry the inserted common material.
Remembering that I am leaving out the colors and font-family changes, the two "to be inserted" pages are as follows. As the "main" page is called hhInsertHTMLExample.htm, I called these hhInsertHTMLExTop.htm and hhInsertHTMLExBottome.htm. (They are available to you in the same folder as this tutorial.)
(You can fetch the other files, too, but they won't load as "normal" webpages. "Other files": The one with the Javascript, and the two specifying the HTML to be inserted in to the "main" files.)
hhInsertHTMLExTop.htm is just...
<p>The vertebrates</p>
... and...
hhInsertHTMLExBottom.htm is just...
<p>Contact Editor at NoThis@gmail.com</p>
Simples!
After several days of building this, I stumbled across something. These tricks work best if your page starts with a nice, simple...
<!doctype html>
... which is probably "the right thing to use", anyway. (When I say "works best", I mean, for instance, that the W3 HTML validator on your page won't throw lots of unnecessary complaints, if you have things well matched.)
For quite some time, I have been clinging to the old...
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
... which is probably a Bad Idea.
You may experience a little pain along the way of bringing your old pages forward to use the new standards... but I would suggest it is pain with a proportionate gain.
We'll return to what we've just started, but first let's take a moment to look at the "main" pages. The ones that would call for the shared bits to be inserted.
The page for "fish" could be called hhInsertHTMLExFish.htm, and would look almost like this, in a very basic form...
<html> <head> </head> <body> <div data-include="hhInsertHTMLExTop.htm"></div> <h2>My page about fish</h2> <p>Fish have fins</p> <div data-include="hhInsertHTMLExBottom.htm"></div> </body> </html>
As I said.. that would almost work. (There's another bit to come.) And while we're "here": This trick won't work if you point your browser at a local copy of your HTML file on your PC. The "inserting" only happens when the page is rendered from a web server. (The page comes up nicely enough from a local copy... minus the bits which should have been inserted.)
I said earlier that when you are using this system, you need one copy of a special page with the Javascript.
That page was created for us, and given away, by Paul Browne. He in fact presented us with two versions. He calls them, and it make sense to keep the names, HTMLInclude.js and HTMLInclude.min.js. I've only used the latter. I believe it is a cut down version of the former, supplying a MINimal set of functions to us. But they were enough for my needs.
Paul explains all of this himself in the documentation he has provided within what you can download from...
https://github.com/Paul-Browne/HTMLIncludehttps://github.com/Paul-Browne/HTMLInclude
github "threw" me for a while. You use the download button. Unzip the .zip that you get. And work from there. Open the .md files with an ordinary text editor.
It would be a Bad Idea... but you could "cheat" and fetch your copy of HTMLInclude.min.js from my site. Or save the following, use that... but it could be out of date! Or tampered with! Get yours from github... if you can.
/*! HTMLInclude v1.1.1 | MIT License | github.com/paul-browne/HTMLInclude */
!function(l,d){l.HTMLInclude||(l.HTMLInclude=function(){function r(t,e){return t.getBoundingClientRect().top<=+e+l.innerHeight}function a(t,e){var o=new XMLHttpRequest;o.onreadystatechange=function(){4==o.readyState&&200==o.status&&e.forEach(function(t){var e=t.getAttribute("data-replace"),n=o.responseText;e&&e.split(",").forEach(function(t){var e=t.trim().split(":");n=n.replace(new RegExp(e[0],"g"),e[1])}),t.outerHTML=n;for(var r=(new DOMParser).parseFromString(n,"text/html").querySelectorAll("SCRIPT"),a=0,i=r.length;a<i;){var c=d.createElement("SCRIPT");r[a].src?c.src=r[a].src:c.innerHTML=r[a].innerHTML,d.head.appendChild(c),a++}})},o.open("GET",t,!0),o.send()}function t(e,n){l.addEventListener("scroll",function t(){r(e,n)&&(l.removeEventListener("scroll",t),a(e.getAttribute("data-include"),[e]))})}for(var e={},n=d.querySelectorAll("[data-include]:not([data-in])"),i=n.length;i--;){var c=n[i].getAttribute("data-include"),o=n[i].getAttribute("data-lazy");n[i].setAttribute("data-in",""),!o||o&&r(n[i],o)?(e[c]=e[c]||[],e[c].push(n[i])):t(n[i],o)}for(var u in e)a(u,e[u])}),l.HTMLInclude()}(window,document);
Save a copy of that in, for now, the folder your pages that want to insert things reside.
And add the following near the bottom of each page that wants to do inserts. Put it just before the </body> tag
<!--The following is what makes it possible to use "data-include". You get it from https://github.com/Paul-Browne/HTMLInclude You can look inside, see what it does. Always place AFTER your last use of data-include.--> <script src="HTMLInclude.min.js"></script>
That tells your page where to find the javascript code which is "behind" the "data-include" you used to "fetch" the HTML in the files holding the "stuff" you wanted inserted into multiple pages. "data-include" is not a part of the basic HTML language.
By the way... you are not being lazy if you are using external files with one copy of text that you want to appear on multiple pages. You are being careful. Handling repeated text like this is far less error prone that the more onerous doing it by hand, with each page having a separate copy of the text.
I'm not sure... but I think you also get a performance boost. I think your browser will hold the javascript and the text in its cache.
Don't be afraid to put almost anything into the files of HTML to be inserted into the pages. I have kept thing pedestrian here, to avoid distractions.
You can see the "Fish", "Birds", "Reptiles demo, In action too, and inspect the page sources for those files. (Remember: No color backgrounds. The plain vanilla versions.)
The following is more "real world", with a few things to keep the W3 HTML syntax checker happy.
An "added feature" I've used here might need explaining:
In the "basic" examples, the files with the HTML to be inserted were in the same folder (on the webserver) as the page they were to be inserted in. Note how in this those files are in a different folder. (That "different folder" is a place set aside for things multiple pages will "share".)
I hope you only need to think for a moment to see that because the files to be "inserted" are now in a different place on the server, I've had to modify how I've referred to the files. (I've been a bit sloppy... I use my "CSS" folder for more than CSS files.) Note that even when the browser is dealing with what is in those files, it will still "think" that it is where the main file is. Hence the explicit path specifications for things like w3-vcss.gif inside hhbottom.htm.
This is the code inside "the main file". (You can see what the code does with the link below the code.)
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Testing Paul Browne inserts</title> </head> <body> <p>==== start of first block of inserted material--- </p> <div data-include="http://sheepdogguides.com/css/hhtop.htm"></div> <p>--- end of first block of inserted material====</p> <br> <h3>Testing Paul Browne's data-include</h3> <h3>A page with inserted HTML</h3> <p>Thank you Paul Browne for your https://github.com/Paul-Browne/HTMLInclude</p> <p>Now we can all insert HTML into a webpage, from a file, for free.</p> <p>The stuff you need is at <a href="https://github.com/Paul-Browne/HTMLInclude" target="_blank">https://github.com/Paul-Browne/HTMLInclude</a></p> <p>You can check the "innards" with a text editor.</p><br><br> <p>==== start of second block of inserted material---</p> <div data-include="http://sheepdogguides.com/css/hhbottom-forInsertFancy.htm"></div> <p>--- end of second block of inserted material====</p> <!--This is what makes the above okay. You get it from https://github.com/Paul-Browne/HTMLInclude You can look inside, see what it does. Always place AFTER your last use of data-include.--> <script src="http://sheepdogguides.com/css/HTMLInclude.min.js"></script> </body> </html>
The code above is what is in hhInsertHtmlFancy.htm. Besides the code above, which is in my "hh" folder, because it is an article in my Helpful Hints series.
The sharp-eyed among you will have spotted the "-forInsertFancy" which is part of the name for the second file of HTML to be inserted.
Typically, you will have one file of HTML which gets inserted into many pages. The inserted- from- file which will appear at the bottom of more and more of my pages, as I get around to replacing the duplicated- by- hand material will gradually evolve. Many pages will use what's in my hhbottom.htm file. That will evolve over time. I didn't want to come back here repeatedly to update what I've said about what's in the file, hence the "special", "frozen in time" version of hhbottom.htm for use by this page.
Some good news: I believe that when a browser fetches pages with embedded elements, those elements are held in the browser's cache... so the loading of the next page with the same "include" will not only not be slowed by the use of the mechanism, but will in fact be hastened because fetching, say...
div data-include="http://sheepdogguides.com/css/hhbottom-forInsertFancy.htm"
... will be faster that it would have been to re-fetch all of the stuff you have in the file of HTML to be inserted. Without the insert mechanism, that HTML would otherwise have been repeated inside the second page.
A detail.
I like to use the W3.org validators. You will find links to them at the bottom of most of my pages.
If the HTML for presenting the validator to a page's user is inside a file of inserted HTML, the validator works just fine on the "main" page, the one that uses Paul's "data-include". But the HTML in the file of inserted HTML is not included in the checks.
You will have to use the Mark One Eyeball inspection tool particularly carefully, or copy/paste the HTML into a skeleton "page" from time to time, test it that way.
You may also have to be careful with things like page view counters. If inside the inserted HTML, are they counting accesses of the file with the HTML to be inserted, or accesses of the "main" page?
What follows is, for now, text that is repeated "by hand" in each of these Helpful Hints pages. Because I have only just learned this trick. I learned it in order to be able to replace such repeated text. I look forward to being able to get rid of the mulitle instances of this text in the source HTML very much indeed!
(Note to myself: First used "for real" on SheGui/hh/html-css/TestStyleSheet.htm, Sept 7, 2019)
The general idea of these pages is it make it easier for you to do something fun... or at least useful. I hope this one achieved that? Your thoughts and anecdotes would be welcome. Please mention the page's filename (hhInsertHtml.htm) in your email.
If you found this of interest, please mention in forums, give it a Facebook "like" or "share"? I've almost given up writing these pages, because it seems they are seldom read, and of course not every reader will use them... so... is there any point? If you want more of this stuff, help!?
Click here to visit my main homepage where you can explore other areas, such as education, programming, investing.
More material like this is available from my HELPFUL HINTS HOMEPAGE.
Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org. Mostly passes.
...and passes...
....... P a g e . . . E n d s .....