?
Solved

html modules?

Posted on 2005-03-20
23
Medium Priority
?
171 Views
Last Modified: 2010-04-09
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.

0
Comment
Question by:kesea
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 5
  • +6
23 Comments
 
LVL 32

Assisted Solution

by:Batalf
Batalf earned 800 total points
ID: 13587660
If you have access to server side scripts like PHP or ASP, you could include it serverside

example:  A file called "html_header.html" which includes this

<html>
   <head>
   <title>My homepage</title>
   </head>


This could be included in the other pages like this(PHP Example)

<?php
include("html_header.html");
?>
0
 

Author Comment

by:kesea
ID: 13587687
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?
0
 
LVL 32

Assisted Solution

by:Batalf
Batalf earned 800 total points
ID: 13587702
No, you have to use some kind of server side include.

In plain HTML you could include CSS and Javascript

<link rel="stylesheet" href="yourCss.css" type="text/css">

and

<script type="text/javascript" src="yourScript.html"></script>

But you can't include HTML the same way. You could use document.write() in a javascript file, solution

document.write('<HEAD>');
document.write('<TITLE>Your page</TITLE>');
...
...

and include the file

<script src="header.js"></script>

but that's not an ideal solution.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:StormyWaters
ID: 13587965
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.
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13588707
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?
0
 
LVL 10

Accepted Solution

by:
dij8 earned 1200 total points
ID: 13589235
You could also use JavaScript.

Save your content in a js file as a variable and enter it using document.write.

function 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;
}

And in your page:
In the HEAD section:
<script type="text/JavaScript" src="mymenu.js"></script>

Where you want the HTML to appear:
<script type="text/JavaScript">document.write myMenu</script>

Be warned about single quotes and double quotes.  If you need both of these it can get messy.  Use a forward slash (or is it backward slash) to mark a literal quote. /"
0
 
LVL 5

Expert Comment

by:jericotolentino
ID: 13589242
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.
0
 
LVL 4

Expert Comment

by:Oliver_Dornauf
ID: 13589523
0
 
LVL 9

Expert Comment

by:danataylor
ID: 13591198
0
 

Author Comment

by:kesea
ID: 13598073
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.
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13598090
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.
0
 

Author Comment

by:kesea
ID: 13598140
Batalf, why isn't "document.write" an ideal solution?
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13598382
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....
0
 
LVL 10

Expert Comment

by:dij8
ID: 13598546
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.
0
 

Expert Comment

by:Garrox
ID: 13612700
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)
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13613653
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.
0
 
LVL 10

Expert Comment

by:dij8
ID: 13614975
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.
0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13615128
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.
0
 

Author Comment

by:kesea
ID: 13617311
when you use frames though, won't it hide whatever content will be in there from the search engines?
0
 
LVL 10

Expert Comment

by:dij8
ID: 13617341
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.
0
 

Author Comment

by:kesea
ID: 13617366
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...
0
 
LVL 10

Expert Comment

by:dij8
ID: 13624851
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. ;-)
0
 

Author Comment

by:kesea
ID: 13630375
Thank you everyone for your input and discussion!
0

Featured Post

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question