unbelievably stupid? I knew you could.
Back in the olden days, the way around this was to create your webpages using SHTML — Server [Parsed] HTML — instead of plain vanilla HTML. Before sending your webpage code to visitors, the server would parse your code and substitute predefined code wherever it encountered special Server Side Include (SSI) placeholders. To include files that contained the code for your header and your footer, for example, you would place these SSI directives in the appropriate places in your HTML file, use .SHTML instead of .HTML for the filename extension and the server would do the rest.
<!DOCTYPE html> <html lang="en-US"> <head> <!--#include virtual="/_assets/includes/metatags.htm" --> <title>Welcome</title> </head> <body id="top"> <!--#include virtual="/_assets/includes/header.htm" --> <p> Your content goes here. </p> <!--#include virtual="/_assets/includes/sidebar.htm" --> <!--#include virtual="/_assets/includes/footer.htm" --> </body> </html>
This was terribly convenient, but back then the Internet, servers, and hard drives were much slower than they are now, and server-parsing adding perceptible delays in the delivery of your webpages to visitors.
Then along came the PHP (Personal Home Page) general-purpose language that was perfect for building websites. As with SHTML, the standard approach involves using a different filename extension: .PHP instead of .HTML. With PHP, your webpage template might look something like this:
<!DOCTYPE html> <html lang="en-US"> <head> <?php include $_SERVER['DOCUMENT_ROOT'].'/_assets/includes/metatags.htm'; ?> <title>Welcome</title> </head> <body id="top"> <?php include $_SERVER['DOCUMENT_ROOT'].'/_assets/includes/header.htm'; ?> <p> Your content goes here. </p> <?php include $_SERVER['DOCUMENT_ROOT'].'/_assets/includes/sidebar.htm'; ?> <?php include $_SERVER['DOCUMENT_ROOT'].'/_assets/includes/footer.htm'; ?> </body> </html>
PHP offers a lot of additional processing power beyond includes, which is why it used in 80 percent of websites, including powering WordPress.
BBEdit handles PHP files just fine, but for your webpages to load you must host them on a server that offers PHP processing. PHP hosts are widespread and easily found, but typically are available only with a monthly hosting fee.
flash into existence a split second after they are needed, and even though you can see them on the page they are not really part of your webpage code, so any actions you need to perform on the included sections require special handling. This includes web crawlers such as Google, which will not
see the included code and those may not accurately crawl your site. If AJAX includes are the best solution for your website, though, BBEdit handles them just fine, too.
BBEdit offers the different types of includes: One-time includes, persistent includes, and placeholders. BBEdit includes work differently than SSI/SHTML or PHP includes in that instead of text replacements being done on the server, they are done on your computer before you upload the files to the server. This makes them not quite as elegant to use as SSI/SHTML or PHP includes, but they are incredibly handy.
The persistent include is the one we want for now. Using persistent includes, your webpage code might look like this:
<!DOCTYPE html> <html lang="en-US"> <head> <!-- #bbinclude "meta.incl" --><!-- end bbinclude --> <title>#TITLE# || BBEdit for websites</title> </head> <body id="top"> <!-- #bbinclude "header.incl" --><!-- end bbinclude --> <h1> #TITLE# </h1> <p> Your content goes here. </p> <!-- #bbinclude "nav.incl" --><!-- end bbinclude --> <!-- #bbinclude "footer.incl" --><!-- end bbinclude --> </body> </html>
Do not store your BBEdit persistent include files inside your local site root folder. See Project Organization for one way of managing your files.
You may have noticed that instead of the word
Welcome for the page title, the BBEdit version has
Include files || BBEdit for websites, as does the opening
h1 tag. This is an example of a BBEdit placeholder. The judicious use of placeholders can really speed up the creation of mass quantities of webpages that have the same basic format and include files.