1

Here's specifically what I'm looking for. I have the same header and footer in every web page I have. By now I have something like 5-10 pages with the same info. If I need to make a change to not only the CSS styling (which is actually pretty easy with a style sheet) but I also want to change a few words displayed in the HTML file, I need to touch every single one, even though I know they will be identical. Is there a way I can have an embedded HTML file that contains just that block of code? In particular, I'm going to update my footer to by copyrighted 2016 instead of 2015 and I don't want to do it 10 times if I can help it. Any suggestions?

enda_ehrlich
  • 47
  • 2

3 Answers3

3

There are several ways to achieve this. This is what every HTML developer eventually comes acrosss to that leads them to learning server side programming. SO I'll give you three technologies you can choose from:

  1. PHP/ASP.NET with C# or VB - This is probably the most difficult if you have never done any MVC type programming or OOP programming. But very rewarding once you master it.
  2. Angular JS - You can learn Angular JS and help yourself with some json files and you will be able to build SAP (Single Page Applications) using a principle very close to MVC but different. Often called MVW (Model, View, Whatever)
  3. Last but not least - Wordpress - Ugh, I can't beleive I'm suggesting this, but it is very fast to build and you will have all the dynamic behavior you are looking for.
  4. iFrames - Using iframes is probably the easiest way without any added frameworks. The only downside to this is that it may conflict your responsiveness. I believe iFrames are nit 100% responsive.
  5. AJAX - Also another easy option to consider.

p.s. You can also make use of HTML data parsing but if I was going to do that, I'd rather go for Angular.

Good luck

LOTUSMS
  • 8,793
  • 13
  • 49
  • 108
  • 1
    Maybe someone has a bad that, but I can compensate for that – CoderPi Dec 28 '15 at 20:08
  • By the way since I upvoted :P, I would love if you add the option for iFrame (first) and the second best option using AJAX. These can be done without any extra Framework – CoderPi Dec 28 '15 at 20:19
  • :) you got it. Correct me if I'm wrong but iFrames are not 100% responsive , am I right? This could be a problem with headers and footers unless is a non-responsive site or a fixed-width layout. – LOTUSMS Dec 28 '15 at 20:26
  • Did he require a "responsive" solution? To be honest I'm not sure what that means in this case. But you should be able to make width and height change automaticly at least. But you are right, it's not that easy, didn't consider that – CoderPi Dec 28 '15 at 20:29
  • Good point, he didn't mention responsiveness. I guess I assumed being over halfway through the 2010's everyone would be coding responsive code by now. Either way, I made that clear just in case. – LOTUSMS Dec 28 '15 at 20:31
  • 1. Or any other programming language. 2. Don't. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript 3. That's just an example of 1. 4. Ugly. 5. That's just the general case of 2. – Quentin Dec 29 '15 at 17:34
  • I disagree. #2 is probably the best. Angular is the future of Web Development. Considerably reducing server load by building in one page – LOTUSMS Dec 29 '15 at 17:37
3

If you insist on HTML, you can use an iframe. Basiclly <iframe src="PATH-TO-HTML"></iframe>.

You can determine it's size with attributes. Example:

<iframe src="https://www.google.co.il/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", scrolling="no", frameborder="0", width="544",height="184"></iframe>.

I also think HTML imports is cool1

Sidervs
  • 61
  • 4
2

Use php.

Create a file called "footer.php" and "header.php" and add the html you need for your footer and header.

Then on each page, add

<?php
include
'header.php'; 
?>

where you intend the header/navigation to be called, and add:

<?php
include
'footer.php'; 
?>

where you intend the footer to be called on the page.

Now when you need to edit the footer or header, you can just edit that php file one time and you will be done with the edit.

NOTE: All of your .html pages will have to be changed to .php for this to work, so make sure you do that. Don't worry, your HTML & CSS will still work fine.

Then you can add this to your .htaccess file to make your page urls look clean: 

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

This will make it so that www.example.com/page.php can be accessed and viewed cleanly like this: www.example.com/page

Cosmic Hawk
  • 225
  • 2
  • 9
  • To expand, if you are using JSPs, you can add (or footer.jsp, etc.) wherever needed. – QuestionMarks Dec 28 '15 at 20:05
  • I would not assume he is using PHP or a Server, otherwise he would already have found the solution or told us about PHP – CoderPi Dec 28 '15 at 20:07
  • This turned out to work best. The iFrame was a good idea, but I use background images which messed with how it displays. Ended switching most of my files to PHP, except for my index.html – enda_ehrlich Dec 30 '15 at 03:50