CODEWITHSUNDEEP
htmlw3c
Sathya
Sathya

Reputation: 5308

HTML module loading

While developing one of my html app, my main html file go big in length. Is there any way to split my codes in separate module and merge them in my main html page. Please don't suggest iframe. I don't want make it as separate page (with another HTML and Body tags).

My design is like this.

Current:

index.html

<html>
    <body>
       <div id="sidebar">
          ..........
       </div>

       <div id="content-top">
         <div id="ct-list">
            ...........
         </div>
            ...........
       </div>

       <div id="content-bottom">
            ............
       </div>
    </body>
</html>

What i am expecting

index.html

<html>
    <body>
        <Module src="sidebar.html">
        <Module src="content-top.html">
        <Module src="content-bottom.html">     
    </body>
</html>

sidebar.html

<div id="sidebar">
    ..........
</div>

content-top.html

<div id="content-top">
    <Module src="ct-list.html"> 
    ...........
</div>

ct-list.html

<div id="ct-list">
    ...........
</div>

content-bottom.html

<div id="content-bottom">
    ............
</div>

Upvotes: 0

Views: 149

Answers (2)

Danil Speransky
Danil Speransky

Reputation: 30473

I don't know really popular tool for this in html itself. Probably you should use some simple script on the server side which will combine it together. Or you can use JavaScript and Ajax.

Upvotes: 0

Ben Stephens
Ben Stephens

Reputation: 563

There's a few options to do this, frames is one which doesn't require you learn anything in addition to HTML/CSS

Second option though many will laugh at it would be .shtml, it's a simple server side system to do exactly what you want without needing to learn much beyond the HTML/CSS <!--#include file="sidebar.shtml"-->

From there are many options, PHP, asp.net, Ruby, Python etc etc however all these options come with a learning curve which might not be worthwhile if you only ever intend to make this page and that's all

Upvotes: 3

Related Questions