CODEWITHSUNDEEP
htmlasp.netmaster-pages
seun
seun

Reputation: 37

How to create a "MasterPage" in HTML

Is there a way I can create a page that other pages in a website can use in HTML? Something like what the masterpage in ASP.NET does.

Any useful help will be appreciated.

Upvotes: 0

Views: 13263

Answers (4)

David East
David East

Reputation: 32604

HTML itself is a static language. Other frameworks create dynamic HTML (DHTML) such as ASP.NET.

So a pure implementation of a "masterpage" in HTML is not possible.

You can use a JavaScript framework, such as AngularJS, to help you achieve a "masterpage" in HTML.

If you're interested in .NET, you can still create you masterpage in HTML with a few hooks into .NET so it knows how to render the main container.

In ASP.NET MVC your masterpage (called a layout in ASP.NET MVC) can have very few hooks back into the framework and server. Most of it can be HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My Movie Site</title>
    <link href="~/Styles/Movies.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container">
        <div id="header">
          <h1>My Movie Site</h1>
        </div>
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          &copy; @DateTime.Now.Year My Movie Site
        </div>
    </div>
  </body>
</html>

Another option (as mentioned by Ondrej) is Server Side Includes (SSI). Most servers should have this option. It will allow you to inject other HTML files into a page, thus allowing you to create a masterpage without a specific framework.

<html>
<title>My Website</title>

<!--#include virtual="/rootPage.html" -->

</html>

In the end though, I'd really recommend using a framework rather than trying to chain together a bunch of SSIs.

As far as iframes go, I'd highly recommend against using separate iframes to build together a website. That will become impossible to control and maintain. As you may not have control over the iframe content. Also, if all of the HTML is needed on the page, it should be re-created for the page, not stuffed in using iframes.

So, use a framework. Don't write some crazy way to replace content on your page. A framework will be easy to maintain and make sense when you return to it down the road.

Upvotes: 3

NoviceProgrammer
NoviceProgrammer

Reputation: 3365

You can manage the look and layout of your application through CSS. If you want to have some reusability of your code, you can try using iframes to achieve something similar.

IFrames help combine the referenced webpage with the current page thus allowing you to reuse the code. For example, you can create a menu.html file that you embed in other pages -

<iframe src="menu.html" seamless></iframe>

Here is a balanced discussion on whether using iframes is a good practice - Are iframes considered 'bad practice'?

Upvotes: 0

Tschallacka
Tschallacka

Reputation: 28722

Not really. pure HTML without SSI is difficult but achievable. This might not work locally though, because of browser security settings, but if you upload it to google docs or free webhost or your own server it should work.

You could use javascript and ajax requests to fill in the blanks, load all scripts and content via a javascript file... but if that is what you wish.

This should guide you to a probalistic implementation. It can be you'll have to add the jQuery source to the master.js because the actual file might be too slow in loading.

master.js

function add_script(file)
    {
    var js = document.createElement("script");
    js.type = "text/javascript";
    js.src = file;
    document.body.appendChild(js);
    }
function add_stylesheet(file)
    {
    var css = document.createElement("style");
    css.type = "text/css";
    css.src = file;
    document.body.appendChild(css);
    }
add_script('jquery.js');
add_script('jquerui.js');
add_script('whatever.js');

add_style('masterstyle.css');
add_style('jqueryui.css');
window.realcontent = null;// content per page
window.head = null// content to be added above the dynamic content
window.leftcolumn = null//content for left column
window.rightcolumn = null // content for right column
window.bottom = null //footer stuffs

jQuery(document).ready(function()
    {
    window.realcontent = jQuery('body').html();
    jQuery.ajax('masterhead.html').done(function(data)
        {
        window.header = data;
        jQuery.ajax('masterleftcolumn.html').done(function(data)
            {
            window.leftcolumn = data;
            jQuery.ajax('masterrightcolumn.html').done(function(data)
                {
                window.rightcolumn = data;
                jQuery.ajax('masterfooter.html').done(function(data)
                    {
                    window.bottom = data;
                    //finally we can load up everything
                    jQuery('body').html(window.header + window.leftcolumn + window.realcontent + window.rightcolumn + window.bottom);
                    // sanitise memory
                    window.header = null;
                    window.leftcolumn = null;
                    window.realcontent = null;
                    window.rightcolumn = null;
                    window.bottom = null;
                    });
                });
            });
        });
    });

Upvotes: 0

user2277362
user2277362

Reputation: 113

Use frames or Iframes.You could also use javascript to load html.If that is not what you had in mind then use serverside masterpages.

Upvotes: 0

Related Questions