Link to home
Start Free TrialLog in
Avatar of kesea
kesea

asked on

html modules?

What is the best way to store html code common to many files in a separate file?  I want to store the header and footer of every page (the template, basically) in a separate file from each html file so that when I want to change the template, I only have to change it in once place as opposed to many.

SOLUTION
Avatar of Batalf
Batalf
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of kesea
kesea

ASKER

I know how to include chunks of HTML into perl scripts using include files, but is there a way to do something similar for HTML files too?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You have to remember that HTML is merely markup. It's not a programming language. All it does is add semantic information to text. So it doesn't have any features you would expect of a programming language. That's why you must resort to including the files other ways.
Actually, you don't HAVE to do any of the above -- this has been the thrust of several Qs I have asked in this same section -- and people always say the "only" way is to use server languages.

That is not the case.  This, after all, is an HTML section, not ASP or PHP, and we are (should be?) investigating the limits and abilities of HTML, not excusing it for being only "mark up" slave data.

So to answer the Q -- you CAN use HTML perfectly well to develop a main, stable, primary layout for your pages.  You can set up DIVs for the menu tree, and you can dynamically change those menu items to your heart's content (see dhtmlcentral.com).  Then you can put your main content (the changeable text part) into an Iframe --

<Iframe name="main" id="main" src="welcome.html" .... other code to size it>

And each link on the main page is such --

<a href=newpage.html target="main" .. other stuff>  

And that will load every content page into the central window of the main layout page.

Note, NO SERVER SIDE language is needed, and NO PHP QUERY? terms are required.
It is just simple HTML links, it WORKS, and you know what?  -- it is VERY search engine friendly.

Does this answer the question?
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi,

If you're going to try JS or server side includes, type the code first as if you're just making an ordinary HTML section of the header/footer and then use a code converter.

I use a program called Easy HTML to Any Code converter. It can convert HTML code to JS, PHP, and ASP. I think ASP.NET is supported also.
Avatar of kesea

ASKER

dij8, this method does not seem to work.  I have tried <script type="text/JavaScript">document.write.myMenu</script> and <script type="text/JavaScript">document.write(myMenu)</script> and when I view source, instead of the html I want inserted being there, I literally see "<script type="text/JavaScript">document.write(myMenu)</script>" instead.
To answer the Q -- you CAN use HTML perfectly well to develop a main, stable, primary layout for your pages.  You can set up DIVs for the menu tree, and you can dynamically change those menu items to your heart's content (see dhtmlcentral.com).  Then you can put your main content (the changeable text part) into an Iframe --

<Iframe name="main" id="main" src="welcome.html" .... other code to size it>

And each link on the main page is such --

<a href=newpage.html target="main" .. other stuff>  

And that will load every content page into the central window of the main layout page.

Note, NO SERVER SIDE language is needed, and NO PHP QUERY? terms are required.
It is just simple HTML links, it WORKS, and you know what?  -- it is VERY search engine friendly.
Avatar of kesea

ASKER

Batalf, why isn't "document.write" an ideal solution?
Batalf is in far eastern europe (ahead of us all) and when he comes back online, he will likely tell you that anything you do with javascript is not seen by search engines, hence server languages, like php, are better, by default....
kesea, the document.write method should work fine.  There are a couple of requirements to make it work.  JavaScript is case sensitive.  Calling a function in JavaScript requires the JavaScript function to be there.  Which means the script including the HTML must be included BEFORE you call the function.  There are complicated ways of getting around this but for now I think you need to work with a small amount of content to make sure it works first.

Load the script that has the function in it that sets the value.  Within this page include an alert.  Inside the function include another alert.  These will let you know how far it is getting.

Your js page:
alert("JS Page");
function WriteMenu() {
  alert("Inside WriteMenu")
  myMenu = "<a href='gosomewhere.html'>Somewhere</a><br>" +
    "<a href='gonowhere.html'>Nowhere</a><br>" +
    "<a href='go.html'>A surprise</a><br>" +
  return myMenu;
}

Hang on, while writing this I realise what the issue might be.  You need to document.write the function, not the variable.  My bad, sorry.

Your code in the page needs to be:
document.write WriteMenu()
or:
document.write WriteMenu

I can't remember which way works.
why not frame up the page ?

use 1 page for the frame data (index.html), and 1 page for the layout.

in the index.html you write that you always want to see your layout.html and further you write in it what page else should be loaded.

write a comment if you want to know more about this (maybe u dont becuz the idea is not what u want)
basically, kesea, we all struggle with this problem.  A simple way is to use SSI includes from the server -- you can simply include the Header, menu, footer and other items as components in the page.  Another way that does much the same (more reliably?) is PHP, whic will include these elements for you -- same syntax -- include "this file".  HTML does not have a way to natively do that itself.

So then we are down to the frames, or Iframes idea, as Garrox said above -- Those Iframes can hold either menus, header code, and such, or they can hold the changeable content of a page, as I and many others use them.  It is a basic failing of HTML itself not to have an include function -- you have to go to JAVASCRIPT, Frames or IFrames, or something like that, if yo don't want to use a server include function, like SSI, or a server language, like PHP.
This isn't a struggle at all.  SSI is one way, whatever language you use they all support it.  When doing things server side isn't possible then you still have options client side.  Frames, IFrames, ActiveX, Java, Flash.  All bad ideas in my opnion.  And finally, JavaScript.

The only difficulty in doing it in JavaScript is you need to watch how you use quotes.  It is still simply; set the variable, write the variable.  The variable is set in an external file which means it only ever needs to be edited in one place.
You didn't factor in search engines which ignore javascript, so you have to go with frames, iframes, SSI or server type languages like PHP, etc.   From the point of view of  HTML, which BTW this question is under, there are few options to choose -- hence one is left with the list you don't like, and although I agree they all have drawbacks, Iframes is the least penalizing of all from the HTML standpoint --

<A href="subpage.htm" target="iframe">

What could be simpler than that, and more SE friendly?  That is why I only use JS when nothing else will do.  I merely meant "wrestle" -- one wrestles with the limitations of HTML and finds ways to work around it.
Avatar of kesea

ASKER

when you use frames though, won't it hide whatever content will be in there from the search engines?
Frames (including IFrames) can not be book-marked easily, or accurately.  Which is why I avoid them as much as possible.  And search engines may be an issue with these as well because as far as I know they only follow URL's so if the IFrame content changes without changing the page URL (say, with a querystring) then how is the iframe content going to be searched through.

This may of course be different if the non-changing content is in the IFrame and not the content found via links.

The JS side of it regarding search engines shouldn't be an issue because the content that is being repeated everywhere is not the CONTENT of the site but (probably) just the banner, navigation, and footer.  While in some cases these items may hold valuable information for search engines, usually they don't, the content does.
Avatar of kesea

ASKER

I noticed that with Javascript, again you don't see the content in the page source as you see it on the page visually.  So I guess there's no way to use modules of code to literally plug into html...
To plug in HTML as literal text you need to use pretty much any of the methods mentioned except JavaScript.  But why do you need to see the source code?  The source code serves no purpose whatsoever.

In the simplest terms you have two choices; server side or not server side.  Server side is not an option here so you need to look at what options you have client side.  The way I see it your choices are flash, frames, iframes, script, and manually coding every page.  I think everyone will agree with me that the first and last choices here are bad ones.  So that leaves you (I)frames and script.  I say frames are not the best choice, others say they are.  I'd go with JavaScript (in fact I have in the past).

I think there has been a reasonable amount of information given here with a good chunk of qualifying statements to support peoples choices.  Although I naturally think mine is the best choice. ;-)
Avatar of kesea

ASKER

Thank you everyone for your input and discussion!