Develop Reference

Can I create a common include file in HTML? [duplicate]

Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?
Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.

There are three ways to do what you want
Server Script
This includes something like php, asp, jsp.... But you said no to that
Server Side Includes
Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.
Client Side Include
This solutions has you calling back to the server after page has already been loaded on the client.

JQuery load() function can use for including common header and footer. Code should be like
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
You can find demo here

Since HTML does not have an "include" directive, I can think only of three workarounds
Frames
Javascript
CSS
A little comment on each of the methods.
Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.
Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:
Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
<script type="text/javascript" src="header.js"> which has something like this in it: document.write('My header goes here');
Doing it via CSS would be really an abuse. CSS has the content property which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.

The simplest way to do that is using plain HTML.
You can use one of these ways:
<embed type="text/html" src="header.html">
or:
<object name="foo" type="text/html" data="header.html"></object>

You can do it with javascript, and I don't think it needs to be that fancy.
If you have a header.js file and a footer.js.
Then the contents of header.js could be something like
document.write("<div class='header'>header content</div> etc...")
Remember to escape any nested quote characters in the string you are writing.
You could then call that from your static templates with
<script type="text/javascript" src="header.js"></script>
and similarly for the footer.js.
Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.

you can do this easily using jquery. no need of php for such a simple task.
just include this once in your webpage.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.

The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.

HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.
Your other option is to use AJAX I think.

You could use a task runner such as gulp or grunt.
There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
##include('./header.html')
##include('./main.html')
</body>
</html>
an example of a gulp task:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('html', function() {
return gulp.src(['./src/html/views/*.html'])
.pipe(fileInclude({
prefix: '##',
basepath: 'src/html'
}))
.pipe(gulp.dest('./build'));
});

You can try loading them via the client-side, like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="headerID"> <!-- your header --> </div>
<div id="pageID"> <!-- your header --> </div>
<div id="footerID"> <!-- your header --> </div>
<script>
$("#headerID").load("header.html");
$("#pageID").load("page.html");
$("#footerID").load("footer.html");
</script>
</body>
</html>
NOTE: the content will load from top to bottom and replace the content of the container you load it into.

No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.

Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.

The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.

Combine js & css: how to deal with relative paths?

I have a php system, where the view objects can inlcude css and js files via a core function. The system combines all the included js and css files to a min.css and min.js and the site will use that two.
The problem is, that the files contains relative paths and the minified ones are at another location, so I have a bunch of broken links. I can write absolute paths, but when I load some third party library, the problem will occur (and I don't want to overwrite them obviously).
Now I simply don't use this method for the libs, but I wonder that there are any good solution for this kind of problem?

Maybe you should Do something like this:
<script>
var base_url = <?=get_base_url();?>
</script>
<script type="text/css" src="js/compressed.js"></script>
And in compressed.js, use absolute path's like this:
(for example, an ajax call):
$.get( base_url + 'path/file' , function(data){});
The thing is that with this solution you will have to refactor the code..

Multiple sources for a javascript file

I am working on a project where I need to include somewhat around 10-15 .js files in the HTML head section directly like
<script type="text/javascript" src="http://localhost:9020/website1/wa/min/soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
what is the way I can give refrences correctly
the files I need to refre are in the same hierarchy like
1.....2,3
2.........4,5
3........6,7
I need to refer 1,4,7 please help.
somewhere I read this method what's it?
<script type="text/javascript" src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>

The example you posted looks exactly like the query string interface for the minify PHP library: http://github.com/mrclay/minify
Using it you use it in the fashion <script src="min/?b=path&f=script1.js,script2.js,ui/script3.js"></script>.
Where path is the path from your web root that you want it to look for scripts under.
I've used it before and I've found it quite effective. It concatenates, minifies, caches, and serves JS and CSS.
I'm sure there are other libraries to achieve the same effect, alternatively you can create a build script to concatenate and minify all your scripts and then deploy a single JS file to your site, in a single script tag.

It is not possible to load multiple javascript files in a single <script> element.
You have to have to have an individual <script> element for each script you are referencing..
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js"></script>
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=vars.js"></script>

I think you'll get what you need from dynamically loading external javascript files:
http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

The second line you posted requests scripts from the server dynamically. the b parameter of the request tells it you want scripts and the f parameter tells the server which files you want. Then it concatenates these into one file and sends that back to the user agent. You need server-side scripting to handle this; it is not something built into the URL specification.
http://localhost:9020/wordplus/root/child/
b=scripts
f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js
The simplest solution is just have one script tag per file as it will let you take advantage of caching:
<script src="http://localhost:9020/wordplus/root/child/soundmanager2.js"></script>
<script src="http://localhost:9020/wordplus/root/child/vars.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/md5.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/utils.js"></script>

Another solution is to use some JavaScript builder to join all your files, generating just one. The pros of this approach is that your result file will be "compressed" (minified). Some builders:
Google Closure Compiler (I like and use this since 2009).
YUI Compressor

Can I use javascript with bottle (framework)?

I'm trying to display a page of html using bottle (the python web framework). The page has javascript embedded but it won't display it when I serve it with bottle.
The JS I'm using is EditArea, I can clean it up how I want and put it an html page that displays properly when I open the page in chrome. But when I use bottle:
#route('/edit')
def edit():
return template('editarea')
#route('/edit_area')
def edit_area():
send_file('example1.html', root='path/to/file/')
and go to http://localhost:8080/edit or /edit_area, I see the page without any of the fancy javascript features.
Eventually I want to hook this up (EditArea is text area and I'll be using it to accept code which hopefully I'll be able to run... but that's a separate issue...), but right now all it's supposed to do is display the page and the javascript. The JS is put in the html as simply as possible. Those two blocks use different files but they are just copies of the same html file, one with .html and the other with .tpl extensions.
<title>EditArea - the code editor in a textarea</title>
<script language="Javascript" type="text/javascript" src="../edit_area/edit_area_full.js"></script>
<script language="Javascript" type="text/javascript">
// initialisation
editAreaLoader.init({
...and then it's all of the JS code (that I didn't write).
In the file to start the server I import: route, run, debug, template, request, send_file, and error from bottle; and sqlite3; but that's all. Is there something else I should be including?
I've looked into the bottle documentation, and a few other places and it's either something really obvious that nobody bothers to write down or it's something that people just don't do...
I was looking at pyjamas (it keeps coming up with different combinations of search queries involving "python" and "javascript"), but it looks like that just converts python into javascript. I don't think that's what I want b/c the javascript is already javascript...
Thanks for any insight you might have.

You need to create a view to serve static files, as described in Bottle documentation.
I suggest you to put all your static files (css, js, images) in a static folder next to your application. The view to serve static files would then look like this:
from bottle import static_file
#route('/static/:filename:')
def send_static(filename):
return static_file(filename, root='./static/')
You would then include your .js file like this (using the path you'll have choosen of course):
<script type="text/javascript" src="/static/edit_area/edit_area.js"></script>

If you're using the template system included in Bottle called SimpleTemplate then it does not support multi line strings and the templates get compiled to executable Python bytecode. So its likely any Javascript would be stripped out.
The only way to include javascript in your page would be via script tags as you did for the "edit_area_full.js" file.

Is there a common method for importing javascript files in a similar way to css's #import?

Is there a common/standard way of including JavaScript files into the page that works in a similar way to the #import statement in CSS?
Specifically, I'm looking to end up with something similar to the following in the head of my HTML docs:
<html>
<link rel="stylesheet" href="imports.css" />
<script type="javascript" src="imports.js" />
</html>
So only one file is called from the HTML, but that file then has a list of files it needs to include, eg:
/* imports.css */
#import url('foo.css');
#import url('bar.css');
and then something like this in javascript:
// import.js
import('jquery.js');
import('my.plugin.jquery.js');
import('my-code.js');
What I'm hoping to achieve is to have a single "call" from the HTML for the CSS and JS so that I can develop locally with many files and later combine/minify/gzip all css/js files into the respective import.ext file during deployment for performance.
What I don't want to do is have application code (PHP in this instance) change the HTML output for me; I need this to be completely client-side.
Suggestions?

Well you can try creating and appending scripts. But I am not sure if that is what you 're after performance wise, since it will make as many requests as the number of files plus add the overhead of creating and appending elements.
var myScript = document.createElement("script");
myScript.src = "/js/test.js";
myScript.type= "text/javascript";
document.getElementsByTagName("body")[0].appendChild(myScript);
or you can try something like this
http://www.webreference.com/programming/javascript/mk/