Let say you are working on a website template that has many pages (index.html, blog.html, contact.html...). You start by designing the home page and then move on to other pages. While you are on other pages, you think of some improvements and these improvements must affect the whole website.
So I return to each page and make the change. This is quite unproductive especially when you have 6 or more pages and sometimes you forget to update the change.
If it were PHP, I would do
require ('header.php');
This worked for me well. But right now, I'm working on HTML and don't really like to transform to PHP and then again to HTML.
So do you have a specific method/way of doing this?
You can use server-side includes to get the effect you want, if your server supports them.
You can use PHP to include a number of smaller HTML files. The PHP script is minimal. No "transform" is required. Just something like require('header.html'); require('body.html'); require('footer.html'); or some such.
If what you're worried about is having to write a lot of PHP, you can use a templating engine such as Smarty TPL to clearly separate the code from the pages and minimize the amount of coding you have to do. This has the added advantage of having HTML "generators" that will automatically do things like producing radio buttons for you or obfuscating email addresses.
You can use CSS to centralize styles for your page so you can make site-wide appearance, layout, and design changes by modifying the stylesheet.
If you're working with HTML pages, (e.g. including extensions .htm and .html), consider using Server Side Includes. This approach works with basic HTML parsing, and is supported by most/all major web servers, including Apache and IIS.
Simply include this text in your .html file:
<!--#include virtual="header.html" -->
The web server will then fetch the markup in that file, and will insert it inline in the page it's currently serving.
You could use PHP as a pre-processor, a code generator. Run the PHP on your local computer, then save the static HTML pages it produces and post them to production. You could write a little script to visit each of your PHP pages and save the corresponding HTML. Then you could have the convenience of PHP at design time and the simplicity of HTML in production.
Related
I started creating web pages in plain HTML. I have a header, main content and a footer. The main content is divided into two, left and right content. Everything is the same on all pages except for the right content. Now I have about 15 pages. This is very tiresome if I make some changes on the other static pages (header, footer and left side content) as I have to go through all pages.
How can I create one HTML file for each static area and how am I going to integrate it?
There are, essentially, three places you can do this:
At build time. Run a script that puts the pages together and outputs static HTML. Then upload the static HTML to the server. Back in 2013 I recommended ttree, but these days static site builders are common and more powerful. My projects tend towards Gatsby (for complex projects) and Metalsmith (for simpler ones). Jekyll is very popular (and Github provides documentation for using it with GH Pages).
At runtime on the server. This could be a simple SSI, a PHP include or a full template system (of which there are many, including Template Toolkit and mustache), possibly running inside an MVC framework (such as Catalyst or Django). This is the most common approach, it has less time between making a change and putting the result life then doing the templating at build time.
At runtime on the client. This adds a dependency on client-side JavaScript (which can be fragile and unfriendly to search engines), so I wouldn't recommend it unless you already had a server-side or build-time solution in place. Gatsby, for example, is a static site generator that builds a React frontend backed by static pages.
There are a couple of ways to do this.
If you are working purely with HTML, then you can use a 'server side include' -- this is a tag which allows you to load a file into the page (see http://en.wikipedia.org/wiki/Server_Side_Includes). Whoever is hosting your website has to support this.
<!--#include virtual="../quote.txt" -->
If youe web host happen to use PHP, you can do this using the include method (see http://php.net/manual/en/function.include.php):
<?php include('path_to_file/file.htm');?>
This will include the file at the point you place the tag. But again, whoever is hosting your site needs to support this.
There are other methods of doing this, bit these are the two I make use of.
Well... what you’re looking for is called "Master Page" and unfortunately it isn’t available in html however you can use the <iframe> tag but it would make your website look really ugly. i would suggest you to use a programming language such as PHP its much easier that way.
but if you want to use <iframe> then They’ll load remote pages into your website, so you could define a "Master Page" like this:
<body>
<div id="content">
<iframe src="content1.html"></iframe>
Now, inside of content1.html, you could just write the content without the main layout
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 :-)
I still don't feel comfortable repeating HTML for things like menu code, header, footer and most importantly a quick links/news panel on each page. Also it seems a little inefficient to keep sending the same repeated html for each page.
For the moment I have written a small program which reads these sections from my index.htm and replaces the relevant sections within all other pages in that directory. However things have started to get considerably more awkward now that I have extra pages like a Message Forum and Image Gallery, both of which require their own index.htm in their respective sub directories.
So the question is should I be using object, iframe or SSI?
Has anyone successfully used the object tag to embed a separate HTML file within a page? SSI would do the job except that the repeated HTML is still being sent across the web on every page change and different include lines would have to be used on the PHP pages. What about using IFrames, I know they are not strict XHTML1.0 compliant but I seem to recall rumors that they are going to br supported in HTML5 again, does that make them a good bet for the future?
The easiest way to solve this problem is by using a scripting language (PHP, Python, ASP) and templates. You can create the basic structure for your site in a master template, then use the scripts to pull in only the content that changes.
For a particularly good example, see Django's template system.
Each of your pages could call a JavaScript function in an external boilerplate.js file. That function could add boilerplate elements to the page, using the DOM.
That said, you might not want to do this, nor use IFrames, for SEO reasons! (Also, your pages would not fail gracefully if the client disabled JavaScript.)
To me it seems better to have a more search-engine-friendly page and put up with the transmission of duplicate markup. Server Side Includes (or any server-side scripting language) would give these qualities while also making it easy for you to change the boilerplate on all pages at once.
If you use dynamic pages like JSP or asp.net, you can have your page template included, and then content added. But what if you have no server-side component and all pages are just HTML/JS? You can of course create a template then copy it for each page, but then if you want to change something you risk having to modify every page, even if you put most styling in CSS properly.
Are there any non-awful ways to do this? I could see that an iframe could be used to load the content into the central page but that sounds nasty. Does HTML provide any way to include a base file and add to it?
You can use Server Side Includes to include other files on the server. It's similar to scripting languages like ASP or php, but SSI is usually supported by the server directly, so it's available on many servers, even if there is scripting language available.
The answer is still templates. Just process them offline instead of on the server. I like to use ttree for this.
You can create the pages offline and render into HTML, and deploy those to the site.
One option might be: https://github.com/thewml but it does feel ... "too much". I also saw asciidoc for creating sites ( https://asciidoc.org/ ) and I also used several times doxygen for that ( http://www.doxygen.nl/ ).
I also saw CMS that create static HTML files, but hey are no longer maintained.
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.