HTML How do you create/use a "template" for multiple pages

November 2, 2015

Let's say I want all my pages to look the same except for the main content part. For example, I want all my pages to look the same except for the green part. Is there a better way to do this short of just copying and pasting then editing previous pages?

Venomz1337 · November 2, 2015

What's wrong with copying a previous page?

@whitephoenix

November 2, 2015

What's wrong with copying a previous page?

@whitephoenix

I guess I could. But what if I want to change one of the orange sections? I would have to go do it several times.

Venomz1337 · November 2, 2015

I guess I could. But what if I want to change one of the orange sections? I would have to go do it several times.

Make the template in the .css file and load it in using style tags.

November 2, 2015

Make the template in the .css file and load it in using style tags.

I don't understand. I would have to use html to make the side parts.

dannytech357 · November 2, 2015

If you create a page with IFrames, then you can simply embed whichever pages you want in the template and change them at will.

vorticalbox · November 2, 2015

I don't understand. I would have to use html to make the side parts.

you build the website in HTML and use a style sheet to style it.

If you create a page with IFrames, then you can simply embed whichever pages you want in the template and change them at will.

please don't use iframes.

November 2, 2015

you build the website in HTML and use a style sheet to style it.

please don't use iframes.

Yes but how does that relate to reusing parts of my website.

vorticalbox · November 2, 2015

Yes but how does that relate to reusing parts of my website.

I don't know your abilities and what you know but how i do it is to create you template then use PHP to load pages based on a variable

<?phpswitch ($GET['page']) {    case "home":        include('home.php');        break;    case "about":        include('about.php');        break;    default:        echo "Page not found";}?>

Then you would create you links like

<a href='?page=home'>Home</a>

this will give you one page that loads content based on what $page is.

November 2, 2015

I don't know your abilities and what you know but how i do it is to create you template then use PHP to load pages based on a variable
<?phpswitch ($GET['page']) {    case "home":        include('home.php');        break;    case "about":        include('about.php');        break;    default:        echo "Page not found";}?>
Then you would create you links like
<a href='?page=home'>Home</a>
this will give you one page that loads content based on what $page is.

I know HTML/CSS fairly well, I know a little bit of js and nothing about php. How does this know where to position the html elements though?

omniomi · November 2, 2015

Lets say you have a very basic design that looks like this:

<!DOCTYPE html><!-- Template by quackit.com --><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">		<title>My Site</title>		<link rel="stylesheet" type="text/css" href="css/styles.css" />			</head>		<body>				<header>			<div class="innertube">				<h1>Header...</h1>			</div>		</header>				<div id="wrapper">					<nav>				<div class="innertube">					<h3>Menu</h3>					<ul>						<li><a href="#">Link 1</a></li>						<li><a href="#">Link 2</a></li>						<li><a href="#">Link 3</a></li>						<li><a href="#">Link 4</a></li>						<li><a href="#">Link 5</a></li>					</ul>				</div>			</nav>					<main>				<div id="content">					<div class="innertube">						<h1>Heading</h1>						<p>My awesome website...</p>					</div>				</div>			</main>				</div>				<footer>			<div class="innertube">				<p>Footer...</p>			</div>		</footer>		</body></html>

The only part that changes from page to page is going to be inside <div id="content">... What you want to do is create a file structure like this:

css/
- styles.css
images/
includes/
- header.php
- footer.php
index.php
about.php
contact.php
etc...

header.php:

<!DOCTYPE html><!-- Template by quackit.com --><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">		<title>My Website | <?php echo $page; ?></title>		<link rel="stylesheet" type="text/css" href="css/styles.css" />			</head>		<body>				<header>			<div class="innertube">				<h1>Header...</h1>			</div>		</header>				<div id="wrapper">					<nav>				<div class="innertube">					<h3>Menu</h3>					<ul>						<li><a href="#">Link 1</a></li>						<li><a href="#">Link 2</a></li>						<li><a href="#">Link 3</a></li>						<li><a href="#">Link 4</a></li>						<li><a href="#">Link 5</a></li>					</ul>				</div>			</nav>					<main>				<div id="content">					<div class="innertube">

footer.php

					</div>				</div>			</main>				</div>				<footer>			<div class="innertube">				<p>Footer...</p>			</div>		</footer>		</body></html>

And then your pages are super simple...

Index.php:

<?php    require_once('includes/header.php');    $page= "Home";?><h1>Heading</h1><p>My awesome website.</p><?php    require_once('includes/footer.php');?>

That's how you template at the absolute most basic level. The three files are then combined into a single page.

Blake Gall · November 3, 2015

I made a guide on how to do this with javascript....

http://linustechtips.com/main/topic/473056-this-is-a-way-to-include-html-markup-from-other-files/

Brenz · November 3, 2015

As omniomi said you can use require_once or you can use include. A server-side language is certainly the way you should go like PHP.

header.php:

<!DOCTYPE html><!-- Template by quackit.com --><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">		<title>My Website | <?php echo $page; ?></title>		<link rel="stylesheet" type="text/css" href="css/styles.css" />			</head>		<body>				<header>			<div class="innertube">				<h1>Header...</h1>			</div>		</header>				<div id="wrapper">					<nav>				<div class="innertube">					<h3>Menu</h3>					<ul>						<li><a href="#">Link 1</a></li>						<li><a href="#">Link 2</a></li>						<li><a href="#">Link 3</a></li>						<li><a href="#">Link 4</a></li>						<li><a href="#">Link 5</a></li>					</ul>				</div>			</nav>					<main>				<div id="content">					<div class="innertube">

Index.php:

<?php    require_once('includes/header.php');    $page= "Home";?><h1>Heading</h1><p>My awesome website.</p><?php    require_once('includes/footer.php');?>

Just wanted to point out in this example $page should be defined before the header is included because the header.php file needs to use $page.

omniomi · November 3, 2015

Just wanted to point out in this example $page should be defined before the header is included because the header.php file needs to use $page.

Whoops, you're correct

DevBlox · November 3, 2015

You can use something like the m4 preprocessor, maybe it's less useful if you need more 'dynamic' templates, in which case, they better be back-end generated rather that preprocessed into html.

vorticalbox · November 4, 2015

-snip-

I do mine slightly different

folders like this

index.php

includes/

home.php

about.php

Other pages.php

index.php like this (css can be moved i just got lazy)

<?php//checks if page is sent if not sets to homeif(!isset($_GET['page'])){$page='home';}else{$page=$_GET['page'];};?><!DOCTYPE html><html lang="en"><head><title>HTML5</title><meta charset="utf-8"><!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><style>body {font-family: Verdana, sans-serif; font-size:0.8em;}header, nav, section, article, footer{border:1px solid grey; margin:5px; padding:8px;}nav ul {margin:0; padding:0;}nav ul li {display:inline; margin:5px;}</style></head><body><header><h1>HTML5 Skeleton</h1></header><nav><ul>  <li><a href="?page=home">Home</a></li>  <li><a href="?page=about">About</a></li>  <li><a href="?page=contact">Contact</a></li></ul></nav><section><?php switch ($_GET['page']) {    case "home":        include('includes/home.php');        break;    case "about":        include('includes/about.php');        break;    default:        echo "Page not found";}?></section><footer><p>© 2015 Vorticalbox. All rights reserved.</p></footer></body></html>

then you fill the about.php with HTML (doesn't need to be echoed) then when you click a link it loads the php file into the index page.

roman.sattler · November 4, 2015

Besides the above mentioned ways to solve your problem, I'd like to recommend the following:

Use a back-end framework. I really like Django which is written in Python. Alternatively you could look into Ruby on Rails. If your host doesn't offer Python or Ruby on his servers you can use a PHP framework or CMS or write your own simple scripts like mentioned above. Django and Rails are a lot more powerful and offer database abstraction, form generation and security tools.
Solve it client-side. Instead of resending the same files over and over again you could just send the entire thing once and get the content through AJAX dynamically. Google's Polymer Project (out of beta since this spring) is a very interesting thing to achieve this.
A combination of both. Use Django to handle databases and let it serve everything as JSON so the JavaScript client can request it through AJAX.

This might be overkill for simple, static projects but as soon as you start working with more complex datasets you'll need some kind of database abstraction anyway, why not using it to render templates too? Writing your own isn't the most efficient way to do it, usually.

Ask if you need more information.

omniomi · November 4, 2015

I do mine slightly different

folders like this

index.php

includes/

home.php

about.php

Other pages.php

index.php like this (css can be moved i just got lazy)
-snip-
then you fill the about.php with HTML (doesn't need to be echoed) then when you click a link it loads the php file into the index page.

Aye, that way works just as well. Only thing I'd want to do with that method is write a mod_rewrite rule so that /about, /contact and so on would redirect to ?page=$1. Not only looks better it's also better for SEO. Something like:

<IfModule mod_rewrite.c>    RewriteEngine On    RewriteBase /    RewriteRule ^(.*)$ index.php?page=$1 [L]</IfModule>

Hackzzila · November 4, 2015

Let's say I want all my pages to look the same except for the main content part. For example, I want all my pages to look the same except for the green part. Is there a better way to do this short of just copying and pasting then editing previous pages?

You could make a file and include it with PHP.

For instance make a file with the nav and just include it with PHP.

madknight3 · November 4, 2015

@whitephoenix Just to clear things up. Most people are telling you how to do it in PHP but pretty much every server side language has the ability to do this so you have other options if you want.

If you want to do this completely client side then server side includes might work for you.

Blade of Grass · November 5, 2015

I do mine slightly different

folders like this

index.php

includes/

home.php

about.php

Other pages.php

index.php like this (css can be moved i just got lazy)

then you fill the about.php with HTML (doesn't need to be echoed) then when you click a link it loads the php file into the index page.

You might want to consider changing

if(!isset($_GET['page'])){$page='home';}else{$page=$_GET['page'];};

To

$page = (!isset($_GET['page'])) ? 'home' : 'page';

November 6, 2015

Alright thanks for the responses everyone, I'm prepping to do this soon. Because I had my HTML in three folders, categories, topics, and root, I'm going to have to put them all in root. I'm going to end up with a bunch of really unorganized .htmls. Is it possible to use a path like ~/styles.css?

The problem is, if I had for example, a html in root for the home page, then I had a programming.html in my topics folder, the part I want to include will be different because of the links.

E.g. index.html will have "<a href="guides/sandwhich.html"></a> while programming.html would have to have <a href="../guides/sandwhich.html"></a>, because of the location differences.

November 6, 2015

Shit. I just found out that github pages can't use php.

Blade of Grass · November 6, 2015

Alright thanks for the responses everyone, I'm prepping to do this soon. Because I had my HTML in three folders, categories, topics, and root, I'm going to have to put them all in root. I'm going to end up with a bunch of really unorganized .htmls. Is it possible to use a path like ~/styles.css?

The problem is, if I had for example, a html in root for the home page, then I had a programming.html in my topics folder, the part I want to include will be different because of the links.

E.g. index.html will have "<a href="guides/sandwhich.html"></a> while programming.html would have to have <a href="../guides/sandwhich.html"></a>, because of the location differences.

You can use an absolute path for stuff

/guides/sandwhich.html

Which will work anywhere on your website.

November 6, 2015

So is there a way to do this with JS?

Sign In

HTML How do you create/use a "template" for multiple pages

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites