Web Marketing

Tech - Web Marketing
By: - at March 24, 2013

How To Make Static HTML Templates Using PHP Include Files

Introduction
PHP Include FunctionIf you are interested in learning how to make very efficient static HTML templates (or non CMS content management static HTML sites), then you've come to the right place.

Just so you know, I am the creator of this site and I have built it using static HTML.  You can click here to find out why I chose static HTML over a CMS for this website!

I have extensive knowledge and experience making sites using static HTML and I would like to share with you some tips and tricks I have learned over the years to make a good site from static HTML.

The Process of Developing a Static HTML Template

Step 1:  Making the Template in an editor.
First thing you want to do is figure out what kind of template you want, then make it in an HTML editor.  There are many types of HTML editors out there, choose one that fits you best (discussing the difference between all of them is beyond the scope of this article).  So lets say that we came up with a simple template that looks like this:

<html>

<head>

<title>Example HTML Template</title>
<meta
name="description" content="Description Goes Here." />
</head>

<body
style="font-family: Verdana; font-size: 10px">

<div
align="center">
<img
border="0" src="images/template-logo.jpg" width="1000" height="249">

<table border="1" width="1000" cellpadding="7" style="border-collapse: collapse" bordercolor="#800000">
<tr>
<td
width="200" valign="top">
<p
align="center">-Social Media Buttons-</p>
<p
align="center">-Ad Unit #1 Code-</p>
<p
align="center">-Ad Unit #2 Code-
<p
align="center">-Site Menu Here-</td>
<td
valign="top">Author Name - Date<p>
<h1
align="center">Title of Document Here</h1></p>
<p>
Article Goes Here....</p>
<p>
&nbsp;</p>
<p>
&nbsp;</p>
<p>
&nbsp;</p>
<p
align="center">-Comment System Here-</p>
<p
align="center">-More Ads Here-</p>
</td>
</tr>
</table>
<table
border="1" width="1000" cellpadding="3" bordercolor="#800000" style="border-collapse: collapse">
<tr>
<td>
&nbsp;<p align="center">-Footer Here-</p><br>
<a
href="http://www.yurtopic.com/tech/web-marketing/include-files.html">Static HTML Includes</a></p>
<p>&nbsp;</td>
</tr>
</table>
</div>
</body>

</html>

In a web browser it would look exactly like this example HTML template page.  Notice how it is a very simple template that has all the basic features a website uses, such as a place for the author, date, ads, title, site menu, comment system, header and footer.  That's all the basic things a website needs.

Alright, so now this is all fine and dandy, but now lets say we've created hundreds of pages using this template to house hundreds of different articles we put together for a website.  By simply using just this template code for each page, it will be hard to add a new menu item across all pages at once, as you would have to edit each individual page, or do a "search and replace all" function across all pages (which is not very efficient)!  Same thing applies with anything else you want to change throughout your pages as far as the template goes.  So in order to be able to edit all these pages at once, we would need to use include files..

Step 2:  Putting the template code into Include files.
The next step involves putting chunks of the template code into separate include files, so that you can access the template from one location.  Include code is done server side to draw the page out to the web surfer.  It does this by simply grabbing chunks of html code from different files that the Include commands look for.  Different languages, such as .SHTML, .PHP, .ASP, etc. are all able to do the include command.  For the purpose of this article we will use PHP.  PHP is what I use throughout my own site, and the code looks just like this:

<?php include("location/file.htm"); ?>

You place this code where ever you want your page/template to draw a chunk of code to.  This way you can just edit this one file instead of editing hundreds (or potentially thousands of pages individually) across your site.  Here are some tips when making include code into your templates:

  • You want to have a separate include file for each individual chunk of html code.  So you should make one for each ad unit, one for the social media, one for the comment system, one for the header, one for the footer, etc.

  • You want to try to use more if you can, rather than trying to cram everything into as few as possible.  The reason for this is because if you ever need to swap things around the site, it will be much easier to do so, since each unit will be individually separated.

  • I would generally put all your include files in one location on your web server so things are nicely organized.

  • You will want to name these include files properly so you remember what they are about.

So I'm going to go ahead and do the work of putting that above example html template into Includes, and this is what it looks like when it's complete:

<?php include("Includes/top.htm"); ?>
<title>Example HTML Template</title>
<meta
name="description" content="Description Goes Here." />
<?php include("Includes/metas.htm"); ?>
<?php include("Includes/body.htm"); ?>
<?php include("Includes/logo.htm"); ?>
<?php include("Includes/page-code.htm"); ?>
<?php include("Includes/social-media.htm"); ?>
<?php include("Includes/ad1.htm"); ?>
<?php include("Includes/ad2.htm"); ?>
<?php include("Includes/site-menu.htm"); ?>
<?php include("Includes/author.htm"); ?>
<?php include("Includes/date.htm"); ?>
<?php include("Includes/title.htm"); ?>
Title of Document Here
<?php include("Includes/after-title.htm"); ?>
Article Goes Here....
<?php include("Includes/after-article.htm"); ?>
<?php include("Includes/comment-system.htm"); ?>
<?php include("Includes/more-ads.htm"); ?>
<?php include("Includes/bottom-page-code.htm"); ?>
<?php include("Includes/footer.htm"); ?>

As you can see, there is barely no HTML code anymore, as it is all put into PHP Include files.  All the little chunks of html code are now in those separate include files.  Now the only 3 items that can be edited on this template page is the title of the document, meta description, and the article itself.

Remember this is just a very basic static html template made from include files. Now lets get into some more advanced ways to make static HTML templates more user friendly..

Advanced Template Techniques Using PHP

Step 3:  Using PHP commands to enhance your template.
Here are a few PHP tricks I have learned and use on my own site here, and I highly recommend you to do the same.  They basically function to enhance social media and make it a little easier to enter the date and other data that needs entered for a document.

By using the PHP echo command, you can echo out various items throughout the page as you need them, I personally recommend using them for the following items:

NOTE:  Make sure you put all this code at the beginning of the HTML document, before the first include that contains the <html> command.

PHP Data Entry For Title:
<?php $title = "TITLE"; ?>

PHP Data Entry For Description:
<?php $description = "DESCRIPTION"; ?>

PHP Data Entry For Date:
<?php $date = "DATE"; ?>

When you make new pages, you will have this at the top of your template to easily edit.  Then throughout your template you just put the following code where you would like to "echo" this information, and the echo code would look like this:

Echoing Title:
<?php echo $title; ?>

Echoing Description:
<?php echo $description; ?>

Echoing Date:
<?php echo $date; ?>

The reason for this echo stuff is simply because a lot of times you would need these 3 items (title, description, and date) to be in multiple locations throughout your document, and it is easier to just enter it once at the top of the source code then just let the echo command do the rest.  Social media code like FaceBook use a separate title and description meta tag and you can simply echo these out quite easily for it.

How do I echo the URL of the current page somewhere?
A lot of plugins like social media buttons and comment systems require you to enter the current URL of the given document to it.  This can be a tedious task if you had to enter them for all the pages you have.  Well there is a more simple method that you can use with PHP that allows you to "echo" the URL of the current page, and here is that code:

<?php
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
?>
 

You would need to put this code at the top of the source code before any HTML tags.  You can put this in the first Include file of your template.  Then where ever you would like to "echo" the current page's URL somewhere you would just use this command:

<?php echo curPageURL();?>
 

I personally use this code for my FaceBook comment system's URL, and also for this meta tag:

<meta property="og:url" content="<?php echo curPageURL();?>" />
 

What the Template Looks Like Now:
Once this is all implemented we now have a template that looks like this:

<?php include("Includes/top.htm"); ?>
<?php $title = "TITLE"; ?>
<?php $description = "DESCRIPTION"; ?>
<?php $date = "DATE"; ?>
<?php include("Includes/metas.htm"); ?>
<?php include("Includes/header.htm"); ?>
<?php include("Includes/body.htm"); ?>
<?php include("Includes/logo.htm"); ?>
<?php include("Includes/page-code.htm"); ?>
<?php include("Includes/social-media.htm"); ?>
<?php include("Includes/ad1.htm"); ?>
<?php include("Includes/ad2.htm"); ?>
<?php include("Includes/site-menu.htm"); ?>
<?php include("Includes/author.htm"); ?>
<?php include("Includes/date.htm"); ?>
<?php include("Includes/title.htm"); ?>
<?php include("Includes/after-title.htm"); ?>
Article Goes Here....
<?php include("Includes/after-article.htm"); ?>
<?php include("Includes/comment-system.htm"); ?>
<?php include("Includes/more-ads.htm"); ?>
<?php include("Includes/bottom-page-code.htm"); ?>
<?php include("Includes/footer.htm"); ?>

Now we literally have no HTML code anywhere, it is all PHP code, the only thing left is just the article itself.  Pretty cool eh?  Also just to let you know, those three "echo" commands are inside the include files, so the echos are not visible on the actual template page.

Using PHP with .HTML Files
One thing I would like to mention is say you have built a site using .html files.  In a lot of cases, PHP code is not allowed until you make the template pages end with a .php extension.  How does my site use PHP if all the files end with .html?  This is how:

In the .htaccess file that is stored in the root directory of your website's files (you may need to create one), you would put a simple command that treats all .html files as if they were also .php files.  Now depending on your webhost, this command can vary.  For Hostgator (which is what I use and recommend to host websites), their code looks like this:

AddHandler application/x-httpd-php5 .html .htm

It's that simple, now all your .html files will be treated as if they were also .php files, which will allow you to execute PHP code on those pages.  I also used a few other hosting providers and their .htaccess code for turning .html to .php looks like this:

AddType application/x-httpd-php .html .htm

So if you are trying to do the same thing (treat .html as .php), you can try either of these 2, and if they both don't work, you can then ask your webhost for the proper code.

Using Include Files Inside Include Files!
This is another technique I use myself all the time (even for this site), is putting include code inside include code!  I know this sounds confusing, but let me explain..

Lets say you make a site that has 4 main categories.  We want all 4 of these categories to be able to use a separate list of include files, but initially want them all to use one central (default) location for the include files.  This allows us the optional ability to be able to use separate include files for each of these 4 main categories if we ever need them sometime in the future.  Take a look at this example picture:

Using Include Code Inside Include files

The code you would use to put inside the category include files looks like this:

<?php include("/home/username/www/website.com/includes/include-file.htm"); ?>

NOTE:  This address is your web host's server address.  It is also more efficient to use the above address rather than something like this below (which does work, but will be slower):

<?php include("http://website.com/includes/include-file.htm"); ?>

All this code is doing is simply then looking for the default include code in the root directory.  This comes in handy when later on, lets say, when you want to use a different ad banner for a certain category (instead of the default), or a different logo (instead of the default), or a different site menu (instead of the default), etc, then you would simply edit the initial category include code for these new category items.

This is also one of the best static HTML techniques you can use that allows you to get closer to the capabilities that an actual CMS can do.

Thanks for reading!
So there is my advanced tutorial on making a static HTML template.  I will try to add more to this tutorial as time goes by.  If you have questions you can ask them below in the comments, and I will try to answer them when I can!


 

 

 

 

Web Marketing
Creating a Newsletter that Produces Impressive Results!
How To Legitimately Get Images For a Website?
Landing Pages Converting Clicks to Leads
How To Increase Your Adsense Income
Effective Email Marketing
Things to Consider Before Selling Products Online
Tips for Setting Up an E-commerce Site
Exploring Keywords And Google Bombs
How to Write Great PPC Ads
Understanding Google's PPC Auction Model
How Bot Malware Activity Can Harm Your Website
How To Make Static HTML Templates Using Include Files
Learn Why This Website Uses Static HTML Over a CMS
Page Rank & Link Building Tips and Advice
Top 10 Tips to Improve your SEO Skills
How to Choose Good Affiliate Programs to Make Money Online?
How Long It Takes to Make Money Online from Blogging
How to Make Money Online from Affiliate Marketing
Make Money from Your Website Using Online Ads
How to Setup a New Online Store?
What are the Benefits of Article Marketing?
Will Google ban your site for duplicate content?
How to effectively cloak Clickbank Hop links
Better AdSense Placement for more Clicks
Affiliates or AdSense, What earns more MONEY?
Kill Your Day Job With Internet Marketing
How Effective Business Blogging Is for Business Owners?
Why Register A Domain Name?
What are the Benefits of Internet Advertising?
What is SEO and Why SEO is So Important?


Copyright 2017 YurTopic All rights reserved.

Protected by Copyscape Online Plagiarism Software

There has been a total of

hits counter
Unique Visitors to YurTopic
(Since January 1st 2013)

About  |  Terms and Conditions  |  Contact