what is called portion of website which is same for all pages

Question

I am Zero in developing websites, but i endup a task to build a simple website with 6-10 html pages. The pages have common sections like headers and footers across all these 6-10 pages.

Now the question is how i build these pages? because the content(headers and footers) in 1st page is same as 2nd page etc... Here it creates redundancy. If i change some content in 1st page, and other changes on Page 2 creates redundancy. Is there any concept called master pages or something like that?

What is the best way to deal with it?

<html>
</html>

Guys, why do you down-vote this question? This is perfectly valid. Not all of us are professional and the community should be friendly with beginners as well. — Lajos Arpad, Nov 24 '15 at 04:32
@DanielKobe, anyway, I upvoted yours, to neutralize the negative waves. — Lajos Arpad, Nov 24 '15 at 05:18

score 0 · Answer 1 · answered Nov 24 '15 at 04:25

0

The simplest way to do this without using Javascript or server side templating is with HTML import. I haven't used it though. http://www.html5rocks.com/en/tutorials/webcomponents/imports/

answered Nov 24 '15 at 04:25

Daniel Kobe

9,376
15
62
109

score 0 · Answer 2 · answered Nov 24 '15 at 04:31

0

You have an ocean of oportunities:

you can use some kind of server technology, like PHP or .NET
you can create separate pages for the common tools and use them inside iframes
you can load them with javascript

If you want a quick and dirty solution, then you can go for the iframe solution. But I recommend you to use some kind of server-side technology.

answered Nov 24 '15 at 04:31

Lajos Arpad

64,414
37
100
175

I have two objects, one is having same content(links) in all these pages and another thing is embed certain pages into a frame. For second task, i think your second "iframe" option helps. – Uday Nov 26 '15 at 09:58

score -1 · Answer 3 · edited May 23 '17 at 12:15

-1

Only using pure HTML you cannot have a masterpage concept, that is impossible.

So you can use simple jQuery Load function to include header or menu html page if you dont want to use any other frameworks (AngularJS,etc) or adapt other languages (PHP,ASP.NET,etc), for example, to include a common header html file,

<div id="new-header">
    <script>
        $("#new-header").load("header.html");
    </script>
</div>

I got this from here

edited May 23 '17 at 12:15

Community

1
1

answered Nov 24 '15 at 04:20

Prasanth Jaya

4,407
2
23
33

[This idea is just literally the worst](https://40.media.tumblr.com/bfe0cfe7b477a8054639746a4e0aec78/tumblr_n8dc27uw1L1qf683zo1_500.png). – Nov 24 '15 at 04:21
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. Either you have to use AngularJS or some other JS framework.. can you answer for this question if you dare with pure html without JS.. @LegoStormtroopr – Prasanth Jaya Nov 24 '15 at 04:24
@Prasanthchinja you *don't have to* use a framework. – Roko C. Buljan Nov 24 '15 at 04:25

score -1 · Answer 4 · edited Jun 20 '20 at 09:12

PHP + AJAX

In PHP you can create your pages like:

header.html
home.php, about.php, contact.php
footer.html

Inside header.html goes everything from <!DOCTYPE html> etc... including <body>

about.php example:

<?php include "header.html"; ?>
<h1>This is about</h1>
<p>Content here</p>
<?php include "footer.html"; ?>

Inside footer.html you put everything from scripts to </body></html>

After you're done with your pages in PHP, than you can make the whole even more dynamic, calling a page's #page element into the main page using AJAX, changing dynamically URL, manipulating the browser's Hystory etc... using Javascript.

what is called portion of website which is same for all pages

4 Answers4

PHP + AJAX