I have a client who has built her entire site using html extensions. As such, renaming files and changing links just isn't an option. I need a way to include a footer file into each .html page. I've read a bit on the subject and initially thought html includes would be fine, but then realized they are only valid if the file extension is .shtml or something else. So are there any other alternatives? Any help is greatly appreciated.
An .htaccess rule would work, if you setup 301 redirects it will notify search engines of your change and there should not be any seo repurcussions. This will redirect that for you. The other benefit for seo is php includes are server side so the html will be passed to the search engine spider for index, where javascript will execute after the document loads, and most spiders are not going to execute your JS, just index the html passed down from the server.
RewriteEngine on
RewriteBase /
RewriteRule (.*).htm$ /$1.php [R=301,NC]
Alternatives are all ugly :
insert header and footer using iFrames
use a HTML editor having template feature like Dreamweaver
use a script of yours that will edit all HTML pages adding the header and footer
insert header and footer using Javascript
...
All of those are very bad because the HTML page has no real header/footer (iframes, javascript), or it is hard to maintain.
Of course the best way is to make easy to maintain real HTML pages. That is turn the "changing links just isn't an option" into "let's change extensions and links". Some tools can help you to do that.
You could accomplish this with javascript by creating a footer template in a separate html file and then dynamically load the footer template markup into each page through some javascript code.
Although, you would still have to modify each html file that you want a footer to appear on by adding the javascript code which adds the footer.
Other than that, there is no equivalent in html to includes or master pages. These are server side concepts.
Use javascript or preferrably jquery. With this function you can just load external files into a div with 1 line. http://api.jquery.com/load/
I would suggest a major rewrite as some pointed out but, given your situation that you can't change the technology used, I am assuming it's a reasonably big site too, my suggestion is to use sed to include the footer code as you mentioned into each HTML file.
Either that or add the footer using Javascript, which is not a bad idea in your situation.
Maybe you can write a script that will append the footer to all the html files. So basically just copy the whole set of html files to a dev location and then run the script to output the new files.
Alternatively, copy and paste may be less time-consuming.
Javascript is probably simpler, but doesn't work when the user doesn't have js enabled.
Two ways to create client-side includes: javascript and iframe. While using javascript, the search engine will not see the included text. And iframe element must have a fixed width and height.
Related
I have used Wordpress a lot to develop websites but wanted to try and make my own website from scratch for fun and learning. I have so many questions because when I google around and look on YouTube there seems to be thousands of ways of doing things. Anyway, I settled for using Vite in Visual Studio Code to create a project which starts of with an index.html, main.js, style.css and some other helper files. I tried to build with NPM and I get a nice localhost which hosts my content to e.g. http://127.0.0.1:5555.
Now I ran into the "issue" of creating a header template file, e.g. header.html, that I want to import on top of all pages (and same with footer on bottom). In Wordpress I would create a header.php and then include it with get_header() which would include my header.php file on that place. When creating my own website it doesn't seem to be a standard though and there are lots of solutions, the most promising I found so far without any real knowledge was:
https://www.youtube.com/watch?v=j5Sl6vx_l1s, which creates his own html tags and defines them in a JS file. This seems to work fine, however when editing the header I can't use nice helper snippets/auto completes and such since the html code is in a string, which is a big minus for more commplicated headers and footers.
Use .php files instead of .html files and then use <?php include('header.php'); ?> where I want the header to be. This looks more like the Wordpress approach to me, but is there any performance issues with using php instead of html files, or any other issues I need to think about?
Someone here suggests putting in the line <!--#include file="header.html" --> but this (with or without comment signs) doesn't include anything from my header.html.
How can I accomplish the simple task of having some html code that I want to put on top and bottom of each page? :)
I want to separate an html page into head, header, footer sort of stuff like that. And include them as I create a new page so that I won't have to update all pages if I change something in header or other parts of the included ones.
The problem is that I can do that easily with php support but the current server nginx(actually I don't really know what that means as a front-end dev) doesn't have that and won't do in the future. How can I accomplish that with pure html or with a little help of nginx?
You could use javascript includes.
For example if you were using jQuery…
page1.html
<div id="head"></div>
<script src="head.js"></script>
head.js
$('#head').html('<html goes here>');
If you don’t mind compiling before uploading you could use .kit files.
https://incident57.com/codekit/help.html#kit
And it’s not just for mac users…
Compile .kit files outside of Codekit
I've just stepped into a new field of HTML designing of websites. I'm using HTML, CSS, jQuery, JavaScript for designing purpose. I've designed one website using above technologies. It has almost forty(40) webpages of HTML design. Now the requirement changes in a design I've created are coming from client. For making those changes I've to make the change in almost all the files. This has become a headache for me. This is a very tedious job. Now I want to reuse the some HTML code in every file. Means Left menu should contain in a separate HTML file, Top Menu should contain in a separate HTML file, Footer menu should contain in a separate HTML file, Right menu should contain in a separate HTML file, etc. In short I want this common code in separate files and I should be able to include all of these files in every HTML file. So that I can do only the body of HTML page in different HTML files. Also the CSS and jQuery files should also be reusable. But I don't want to use any server side technology for including these files. SO can anyone help me in how to achieve this reusability and extensibility of a HTML code? Thanks in advance.
Use jquery, or make your pages PHP and just use one of these functions in php tags where you want the common parts, or pages.
include()
include_once()
require()
require_once()
Take a look at this for some more info on how to use, or do some easy quick google searches.
Edit: Here is a JQuery implementation then, which is all executed in the browser:
Inside some Script tags:
$(document).ready(function(){
$.get( "test.html" );
});
It follows the syntax on this page. Also, take a look at W3school's jquery tutorial. Also, you might want to look at this page at W3school to see how to add the contents of the html page where you want to.
The simplest way to share HTML across pages are Server Side Includes. Your user name seems to imply you know your PHP, so this would be the easiest way to handle it (use PHP). If you absolutely can't have it be a server-side solution, you can use JS to handle it instead.
A more complex, but likely preferred way to handle it is to use a template engine. Most Content Management Tools include just that. Wordpress would be one of the more common ones out there.
As for your CSS and JS, those should already be in separate files and you should be linking to them from within each HTML page.
I am always rewriting my headers and footers and for every edit i have to manually copy and paste all the code into the web pages. Obviously this is the wrong approach but im not sure of the right one. My current idea is to have a "header" and "footer" div and then with jquery's $(document).ready load the divs with code. Im afraid it will be slow though because it waits for the whole page to render before executing the header/footer code. What is a common way to handle this problem?
Sounds like you need some server-side technology. Which one (of the many options) you choose is up to you and your hosting. Most likely, your hosting will support PHP and SSI (Server-side includes).
In the simplest setup, basically put the common code into individual files, let's say header.inc and footer.inc. It doesn't matter what the name or extension of these files are.
For PHP, your pages should now be *.php instead of *.html and you need to write this code:
<?php include('header.inc'); ?>
<p>
Here is your regular document.
</p>
<?php include('footer.inc'); ?>
For SSI, you don't have to change the names of your files, and your code would look like this:
<!--#include virtual="header.inc" -->
<p>
Here is your regular document.
</p>
<!--#include virtual="footer.inc" -->
You definitely don't want to do this with Javascript. First off, the header and footer won't load until the Javascript executes, but more important, anyone without Javascript enabled won't see them at all (and requiring Javascript to view a static page doesn't make sense).
There are two easy methods to do this:
1) Use a server-side language like php to include the footers:
<?php
include('header.html');
?>
The rest of the page goes here
<?php
include('footer.html');
?>
2) Use a build/deploy process that generates static pages. This would be similar to 1) but it would only be done once per build, rather than every time someone hits the page.
Commonly, there's some server-side templating technology in use, such as PHP, JSP or XSL. Creating reusable pieces of code which can be linked is fairly simple using one of these approaches.
For a pure HTML + JS approach, you could use an IFRAME to link to a standalone header and footer HTML file. That would allow you to keep all the header and footer information in one place, only needing to update it once.
Common way is to use server side language like PHP. Or if you need only footer and header include you can use SSI
Use HTML or PHP includes.
We can place JavaScript in 3 ways?
as a external file
in <head>
in body <body>
all methods are valid by W3C ?
So How to judge where JavaScript should be placed at bottom or which must be in <head> or in <body>?
I've seen JavaScript on many sites
in <head> ,
as a external js,
just before </body> and
some time anywhere in <body>....<body>
for example: before any other XHTML
tag/code which are going to affect
with that JavaScript code.
update:
I saw mostly people use Google analytics code as a inline javascript at bottom?
In my coding I follow the following rules with regards to JS organisation:
Any JS that is not time sensitive and/or runs after the document is loaded gets put into an external js file and included in the head
Any JS that needs to run as soon as possible is placed in the DOM where appropriate (eg. if you want some code to run as soon as the necessary elements are loaded place the code directly below the last dependent element)
Any external tracking libraries like Nielsen/Google go right at the bottom just before the closing body tag
Related SO posts:
Where should I declare JavaScript files used in my page? In or near </body>?
Does javascript have to be in the head tags?
In most all cases, Javascript should be as an external file, to allow caching and avoid re-downlading the exact same 100+-line script on each page load. (If, on the other hand, it is a script you only expect users to ever see once, then inline is fine.)
Whether or not it goes in head or body is really your choice, though Yahoo recommends the bottom of the body for performance.
If you're concerned with page load times this google article on minimizing your payload size might help. I've linked to the section relating to deferring the loading of javascript. Not exactly what you asked for but might come in handy.
In fact, http://code.google.com/speed/ is just plain handy!
I generally will place as much as I can into external js files. The main exception to this, is information injected into the page server-side at load. I tend to push everything that is not specific to the one page into a library/site js file. If you don't have a need for inline scripts (ie: document.write), then it's best to push your scripts to the bottom before the closing body tag (see YSlow and yahoo's research on why).
If the page/script doesn't NEED document.write, put it at the bottom.
If it does NEED document.write evaluate why.
If it can easily be externalized (into a separate .js) do it.
If it isn't specific to the one page, put it into a .js that is used by multiple pages.
Merge custom site scripts into a single .js where possible.
minify/reduce said .js and use http compression wherever possible.
The primary reasons for this:
Separate your markup from your scripts.
Separate your markup from your scripts.
Separate your markup from your scripts (as much as possible, same as for css)
Create reusable script includes to reduce server requests.
Reduce server requests
Reduce the time to transfer your files.