External HTML File?

[SharKing]

As an aspiring web designer (who only just recently started learning, XD), I've learned quite a bit about how to use HTML and CSS, including the ever-useful < div > tag and "id/class" function. I've even practiced a tiny bit of JavaScript (though it still confuses me for the most part). In building a "practice website" of sorts in a series of unposted HTML files and an external CSS file, I've practiced things like making panels off to the side of the page linking to whatever crucial pages I have in mind.

Those panels, as well as the site banner and other things, remain the same in every page, and the panels are still in development, so having to change them on EACH AND EVERY PAGE gets extremely annoying. So I got curious to see if there was a way to use an "external HTML file" where I could keep the panels and other miscellanea so that when I make the new pages, I could focus on the content that would actually differ between pages.

Unfortunately, I've not been successful in that venture. It could be because I don't have the proper term for it, but a Google search has only led to failure and frustration. Especially the latter. I was wondering if any web-savvy Bulbagardener knew such a trick and was willing to pass it along?

 

[Soulweaver]

Not possible with pure HTML (except if you go with the tacky framesets which are usually really frowned upon in web development). With JS, you could add the pieces in, but that's dodgy and will not work correctly at all for anyone who opts out for scripts or such, and thus not recommended. Depending on the software on your server, there are ways, though. If you have PHP in place, you can add files with the include function (and its variants):

<?PHP
include("src/header.html"); // includes src/header.html always; will throw a warning if that fails

include_once("src/header.html"); // includes src/header.html if it hasn't been included before on this load; will throw a warning if that fails

require("src/header.html"); // includes src/header.html always; will throw a fatal error if that fails

require_once("src/header.html"); // includes src/header.html if it hasn't been included before on this load; will throw a fatal error if that fails
?>

ASP has a similar structure:

<!-- #include file ="src/header.html" -->

Perl, other frameworks like Ruby on Rails and dynamic pages you use via CGI-BIN that are in fact executables running server-side should have their own ways of including text (and code) from other files, but I'm not familiar with those (not that I'd be with ASP either, just happened to know).

 

[SharKing]

I've looked at the JavaScript option, and from what I've gathered, you need to include every seperate object of the menu. What if I want to add a new object? That kinda defeats the point. XD

By the looks of it, I'll have to use PHP. I've already tried a bit, but it doesn't seem to work on unposted PHP files for some odd reason. Maybe it's because I need a server to sandbox around on, and that raises a question: where can I find such a server?

 

[Soulweaver]

By the looks of it, I'll have to use PHP. I've already tried a bit, but it doesn't seem to work on unposted PHP files for some odd reason. Maybe it's because I need a server to sandbox around on, and that raises a question: where can I find such a server?

Err, yeah, kinda dropped the ball here. Yeah, PHP doesn't just work magically without a proper server setup; there are hosts such as awardspace.com which offer limited free plans with PHP and other stuff. Or if your connection is fast enough, you could always run one yourself like I do. For both local personal testing or easy globally accessible server solutions, you can use XAMPP on Windows at least.