Master page in HTML

Question

Is there any way to create a similar idea as master/content page in ASP.NET in pure HTML?

I want to create several pages in HTML, but I want that all of them look the same with some contents different. Is there any way to do this without creating several pages which are very similar to each other?

Chirurgeon

Not without some other programming language, e.g. PHP, SSI, Ruby, ASP.net, Python, Java, etc. – Arcturus

You could make it ugly and use tons of <iframes>, but I would never do that. – Beamends

Not really, but there's always the good old Server Side Include <!--#include file="myIncludeFile.html" --> which you can do stuff like headers and footers and stuff in. – Engadine

Answer 1

//wait until the dom is loaded
$(document).ready(function () {
    //adds menu.html content into any "#menu" element
    $('#menu').load('menu.html');
});

In reference to some of the other answers, iframes should be used carefully and sparingly. http://rev.iew.me/help-moving-from-iframes

http://fsvieira.com/2013/06/11/iframes-bad-for-a-website/

Duplicate question here with answer: How to create a master page using HTML?

Gills

Answer 2

The simple way to do that is to use server side includes or SSI. However easier and, probably, much better solution would be usage of PHP with includes. This way you will always have additional PHP functionality then you need it. But both of this solutions require server that will preprocess the pages. If you want collection of pages, say, on a local hard drive, then only solution I know is already proposed iframe tag.

Divaricate

Answer 3

You can use iframe. That would be purely html.

Ragman

good. i'll edit and put an alternate link. but the purpose of this specific question is not discuss the quality of w3schools. – Ragman

Answer 4

I resolved with a Third party c# form application.

Header and footer different page insert key to all other page. (###footer###) Replace files contents with form Application.

footer.html

<h2>this place is footer.</h2>

default.html

<h1>Default page</h1>
bla bla bla
###footer###

Result default.html

<h1>Default page</h1>
bla bla bla
<h2>this place is footer.</h2>

Source Code below

List list = new List();

private void sourceBtn_Click(object sender, EventArgs e)
{
    DialogResult result = openFileDialog1.ShowDialog(this);
    if (result == DialogResult.OK)
    {
        sourceTxt.Text = openFileDialog1.FileName;
    }
}

private void fileListSelect_Click(object sender, EventArgs e)
{
    var result = openFileDialog2.ShowDialog(this);
    if (result == DialogResult.OK)
    {
        fileList.Items.AddRange(openFileDialog2.FileNames);
    }
}

private void addSourceBtn_Click(object sender, EventArgs e)
{
    list.Add(new sourceKey() { filename = sourceTxt.Text, key = keyTxt.Text });
    sourceTxt.Clear();
    keyTxt.Clear();
    sourceTxt.Focus();
    sourceList.DataSource = null;
    sourceList.DataSource = list;
}


private void ConvertBtn_Click(object sender, EventArgs e)
{
    foreach (var filename in fileList.Items)
    {
        string text = File.ReadAllText(filename.ToString());
        foreach (var item in sourceList.DataSource as List)
        {
            text = text.Replace(item.key, File.ReadAllText(item.filename));
        }
        File.WriteAllText(filename.ToString(), text);
    }
    infoLabel.Text = "Done";
}

Source Code Download Link

Vine

Answer 5

Use javascript gulp tool

and it will be like this :

@@include('./header.html')

<!-- Content -->
<section>
  <h1>Hello world</h1>
</section>

@@include('./footer.html')

One of the best ways to have the option of including repeating blocks is using Gulp.js and some packages . gulp is a popular javascript toolkit to automate & enhance your workflow .

for using it first install gulp in your project using yarn or npm :

yarn init

Install the gulp-file-include plugin :

yarn add gulp gulp-file-include -D

create gulpfile to be able to create tasks with Gulp

In linux :

touch gulpfile.js

if you are using windows use this command instead :

type "gulpfile.js"

In the gulpfile.js import gulp and gulp-file-include. you will also create a variable paths to define the path of source and the destination path (where the static html files will be after the build) :

const gulp        = require('gulp');
const fileinclude = require('gulp-file-include');

const paths = {
  scripts: {
    src: './',
    dest: './build/'
  }
};

In gulpfile.js file , create a task function that will be responsible for including html files and returning static files:

async function includeHTML(){
  return gulp.src([
    '*.html',
    '!header.html', // ignore
    '!footer.html' // ignore
    ])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest(paths.scripts.dest));
}

For now set function as default :

exports.default = includeHTML;

Add the include tags to index.html:

@@include('./header.html')

<!-- Content -->
<section>
  <h1>Hello world</h1>
</section>

@@include('./footer.html')

Run the gulp command :

yarn gulp

The build folder will be created with index.html file inside

Done :)

Mayers

Answer 6

Well, just as an ugly solution, try <iframe> tags. They load remote pages into your website, so you could define a "master template" like this:

...
<body>
  <div id="content">
    <iframe src="content1.html"></iframe>
  ...

Now, inside of content1.html, you could just write the content without the main layout.

Beamends

If I have two content page and one master page, how can I address the two pages? Having IFrame and hard coded content page is very similar to having two separate page. Am I missing something? – Chirurgeon

The <iframe> just literally shoves the linked page into itself, nothing more. Within your content HTML files, just write the content. When you want to change the content, change the src= of the <iframe>. I would never do this on my site. If I have to code something that requires tons of pages, I'd write it in Python. If not, I'd just copy & paste a few times. – Beamends