How do I include fragments of HTML within layouts? - html

What's a simple way for me to write HTML files that have several "includes" that pull other HTML files into certain DIVs (which can in turn pull HTML files into certain of their DIVs, i.e. nesting)?
I would certainly want a CLI tool where I say "compile these files into plain old HTML" and it just works.

Lots of templating languages. Freemarker, google closure templates (soy), but if you want something simple and fast without lots of setup, try "Server Side Includes".
Wikipedia Article On SSI

Related

Design process of html to be used as template for a backend

I am converting mockups to HTML + CSS. Then this will be used as a template for a PHP system by other people (actually it can be any server side language, PHP is not important)
There are, for example, 10 different type of pages. But in each page, many blocks can differ in many cases. For example a block can be displayed differently for anonymous and logged in users. But I dont want to copy the whole html file and just change that block and have another html file. I know php can be written to include parts of the page from many files. But there is no php yet in my design workflow, and I want to have full HTML design before ever passing the files to PHP guys.
Basically, what I want is a "CASCADED" html structure for design purposes. So in a "container" html file, I can include all the different parts from different HTML files.
Does anyone know a method / tool / process to design dynamic pages?
I can think of two ways of accomplishing this. First pull in each of the various components on the page with ajax calls, jquery will make this relatively easy.
Or if you don't want to use javascript then iframes. But the iframes method is extremely prone to buggyness and in some layouts just will not work. Also keep in mind that since you aren't directly injecting html into the page each page would have to keep track of its own styles.

HTML Include: Separate Header and Footer

Can we include an HTML file / snippet from another HTML file?
My use case is related to how a website is built; in a simple form, a site typically has the same header and footer across the board. It is pretty straightforward if the site is equipped with e.g. PHP so you can do something like the include statement; we can contain the header and footer in separate files and include them later. But, what if the site is purely static i.e. no "back-end" support?
One thing that I had done in the past is to utilize templates in Dreamweaver. This worked but I'd prefer something that is more product-independent.
Thanks.
What you're looking for is Server Side Includes. It used to be available on most hostings, no idea what the situation is today.
Actually, a simple system based on a makefile and, why not, php's command line version, might also be helpful: a simple makefile that visits all php files in a directory, feeds it to php (eg, processes page decoration and stuff) and redirects the output to a corresponding html file should be enough to generate a set of uploadable, 100% static html files.
SSI is a great option if it is available to you as already suggested, I have always used PHP personally but as PHP is not available and if SSI isn't available then there is a JavaScript option as well.
The great thing with the JS option is the server doesn't need to have support for it due to the include scripts being client side. The bad thing is if the client doesn't have JS enabled in the browser the includes won't work. In saying that the vast majority of website users have JS enabled and this is displayed by most websites in the world who employ JS in 1 way or another.
Examples, the first one I found with a 2 second Google uses jQuery, have a look at the info here
There are also some AJAX plugins that could potentially be used for this at the jQuery website if it is a path you're interested in going down.
I hope this helps you :-)

HTML: The best way to using template in big website

I am going to write a big website, it has hundreds of HTML pages. There are some parts of the file using the same HTML code, such as the banner, the bottom disclaimer, etc.
I want to update the common parts of the HTML in a batch when that parts are modified, I am seeking a way to efficiently do that.
Currently my solution is surround the tempates with HTML comments, and use Linux script(sed mainly) to update it when necessary. Like:
<!-- Template1 -->
<!-- Template1-end -->
Any better way?
Template Toolkit is your friend. If you are building using a shell script that spits out static files (and it sounds like you are), then you'll want the ttree utility. You'll probably find the tutorial useful and want to make use of the WRAPPER directive (which lets you have a complete page with "Insert content here" sections rather then having to stick "Include header", "Include nav", "Include footer" in every content page).
Going with TT gives you the flexibility to move to server side scripting in the future with a minimum of effort (so long as you are happy using Perl for the server side programming) as Template-Toolkit has Perl modules as well as ttree.
Use a content management system. Either build a lightweight one or rely on an existing one.
You could use javascript to include templates, or just go the server side way and use dynamic page include methods, found by default in most appropriate web scripting languages. There's no way to dynamically achieve this using HTML only, you would have to go via a third party software or application to update your source files in the end anyway (like you already are doing with your batch script).

How do I create some HTML help pages, with the same content at the top and bottom, without php or ASP etc?

I want to create some html help pages, separate html pages.
However, I want to have the same content on the top and bottom of the pages.
In the past I've used PHP or ASP, with header and footer files.
I've then had to do view source and save these pages to get what I want.
I just wondered if there an easiest way to do this ?
EDIT:
The pages are for use with software using a web object not a normal browser. So there won't be a web server
If your web server supports it, you could do server side includes
You could use frames, but it's not necessarily advisable (for one, it breaks navigation).
You could use XML files with an XSLT stylesheet to turn them into HTML documents that share similar elements.
You could use PHP or another server-side language to generate the pages, and then use a recursive download tool (such as wget) to turn them into HTML.
EDIT: you're basically asking whether the "standard-ish" subset of HTML supported by your component of choice provides a way of including data from a common file, just so you won't have to include the data in every HTML document.
The answer hovers somewhere between "no way" and "maybe your component has a few tricks to do that".
The sane thing to do here would be to have a tool generate the HTML documents from a common template. Could be XML + XSLT, PHP/ASP/whatever, or a fully-fledged CMS (this actually helps let non-technical users write the document contents).
It's awful, but you could include a JS file that uses a bunch of document.write("...") to include common elements. Not SEO friendly.

Html reuse without code

I am creating some static html pages outside a .net and outside a ruby-on-rails environment.
I created a menu I want to share between several pages, but I'm wondering how this is done using regular html constructs (i.e. without .net's master pages and without rail's layouts)
Is there a way to do this without cutting and pasting?
What web server are you using? It's likely you'll have to enable Server Side Includes in order to use:
Save the HTML for the common elements of your site as separate files. For example, your navigation section might be saved as navigation.html or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
Reference: http://webdesign.about.com/od/ssi/a/aa052002a.htm
To share common HTML snippets between pages, you'll need some sort of server-side "code".
The simplest thing you could do that I know if would be Server Side Includes, "SSI"
see: http://httpd.apache.org/docs/1.3/howto/ssi.html#includingastandardfooter
There are basically two options: frames (or iframes) or javascript. Frames come with a whole host of problems and I really don't recommend you go down this route. Have a look at PURE javascript library for clean and simple client-side templating.