Printable Version of Topic
Click here to view this topic in its original format
Dream.In.Code _ HTML/JavaScript Tutorials _ Make Coding Easier, Building Your Website With Includes
Posted by: Tripper44 24 Jun, 2007 - 03:19 AM
For this article I thought I would share a few tips on how to design and organize the construction of your web sites in a way that will not only keep your coding skills tidy but will allow you to change and edit page elements quickly and easily as and when your site needs updating.
Scripting Languages
I’m talking or course about the server side "Include Function". But before we begin remember that the include functionis not a feature of standard HTML (Hypertext Market Language) but can only be used with more advanced scripting languages such as PHP (Hypertext Pre-Processor) or ASP (Active Server Pages).
Now you may be thinking but I don’t know any ASP or PHP, well it doesn’t matter, the simple task of renaming your filenames from .html to .php or .asp will automatically give your pages some hidden abilities.
Now if you are totally unfamiliar with advanced scripting languages you will first need to be sure that the web server that you are going to be developing your web site on supports scripting languages, you can contact your hosting company and either find out or upgrade to a server that is running PHP or ASP, it may costs a few extra pennies a month on top of standard hosting but its worth it (as you will soon see).
How the Include Function works
In its most basic form it all boils down to separating the main commonly used sections of your site such as the header, navigation and footer into individual files. Your main pages for example homepage.asp will then pull all of these files together using the include function. Below you can see a diagram illustrating this principle:
To start with simply create your homepage as you would normally in HTML. Once its complete it is then time to start seperating sections of this document into separate files, for this article my example homepage design is illustrated in the code below:
-----------------------------------------------
<html>
<head>
<title>My Web Site</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
</head> <body>
<div class="header">
<div class="logo"></div>
</div>
<div class="topnav">
<a href="link">Navigation1</a>
<a href="link">Navigation2</a>
<a href="link">Navigation3</a>
</div>
<div class="leftnav">
<a href="link">Navigation4</a>
<a href="link">Navigation5</a>
<a href="link">Navigation6</a>
</div>
<div class="content">
<p>My content here</p>
</div>
<div class="footer"></div>
</body>
</html>
-----------------------------------------------
As you can see from the code above I have colour coded each of the sections to show you how I have separated each into its own file. Below you can see my newly created ASP pages.
homepage.asp
header.asp
topnav.asp
leftnav.asp
footer.asp
Using the Include Function
Now to add the include function to the original homepage so that it how loads all of these now separated elements as one, you can see the final homepage.asp file below:
ASP Version
<!-- #include file="topnav.asp" -->
<!-- #include file="leftnav.asp" -->
<div class="content">
<p>My content here</p>
</div>
<!-- #include file="footer.asp" -->
PHP Version
<? include("topnav.asp") ?>
<? include("leftnav.asp") ?>
<div class="content">
<p>My content here</p>
</div>
<? include("footer.asp") ?>
Seeing how the above can shrink the overall site of the editable page I guess you can now see how this technique can make the overall construction and editing of your web site so much simpler.
Now simply create your other pages and use this same technique, if you then need to add more links to your header or main navigation all you will need to do it edit a single file. Good eh? well thats all there is to it, enjoy :)
Posted by: girasquid 26 Jun, 2007 - 07:23 PM
You can use Server Side Includes without using any "advanced scripting languages". The code looks like this:
<body>
<!--#include file="header.html" -->
<!--#include file="body.html" -->
<!--#include file="footer.html" -->
</body>
...All you have to do is make sure that SSI is turned on under your web server settings - you also need to set something up so that your server knows to parse SSI in your page - commonly, servers are configured to parse pages with the .shtml extension as HTML with SSI embedded inside it.
Posted by: srahul07 19 Apr, 2008 - 05:03 AM
hey thanks for your guidance.... 
Posted by: omoimasuyo 6 Jul, 2008 - 05:48 AM
I'm using this technique on my current web page and it makes things so much easier to maintain. Thanks for the share.
Posted by: awing 5 Jan, 2009 - 06:33 PM
For this article I thought I would share a few tips on how to design and organize the construction of your web sites in a way that will not only keep your coding skills tidy but will allow you to change and edit page elements quickly and easily as and when your site needs updating.
Scripting Languages
I’m talking or course about the server side "Include Function". But before we begin remember that the include functionis not a feature of standard HTML (Hypertext Market Language) but can only be used with more advanced scripting languages such as PHP (Hypertext Pre-Processor) or ASP (Active Server Pages).
Now you may be thinking but I don’t know any ASP or PHP, well it doesn’t matter, the simple task of renaming your filenames from .html to .php or .asp will automatically give your pages some hidden abilities.
Now if you are totally unfamiliar with advanced scripting languages you will first need to be sure that the web server that you are going to be developing your web site on supports scripting languages, you can contact your hosting company and either find out or upgrade to a server that is running PHP or ASP, it may costs a few extra pennies a month on top of standard hosting but its worth it (as you will soon see).
How the Include Function works
In its most basic form it all boils down to separating the main commonly used sections of your site such as the header, navigation and footer into individual files. Your main pages for example homepage.asp will then pull all of these files together using the include function. Below you can see a diagram illustrating this principle:
To start with simply create your homepage as you would normally in HTML. Once its complete it is then time to start seperating sections of this document into separate files, for this article my example homepage design is illustrated in the code below:
-----------------------------------------------
<html>
<head>
<title>My Web Site</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
</head> <body>
<div class="header">
<div class="logo"></div>
</div>
<div class="topnav">
<a href="link">Navigation1</a>
<a href="link">Navigation2</a>
<a href="link">Navigation3</a>
</div>
<div class="leftnav">
<a href="link">Navigation4</a>
<a href="link">Navigation5</a>
<a href="link">Navigation6</a>
</div>
<div class="content">
<p>My content here</p>
</div>
<div class="footer"></div>
</body>
</html>
-----------------------------------------------
As you can see from the code above I have colour coded each of the sections to show you how I have separated each into its own file. Below you can see my newly created ASP pages.
homepage.asp
header.asp
topnav.asp
leftnav.asp
footer.asp
Using the Include Function
Now to add the include function to the original homepage so that it how loads all of these now separated elements as one, you can see the final homepage.asp file below:
ASP Version
<!-- #include file="topnav.asp" -->
<!-- #include file="leftnav.asp" -->
<div class="content">
<p>My content here</p>
</div>
<!-- #include file="footer.asp" -->
PHP Version
<? include("topnav.asp") ?>
<? include("leftnav.asp") ?>
<div class="content">
<p>My content here</p>
</div>
<? include("footer.asp") ?>
Seeing how the above can shrink the overall site of the editable page I guess you can now see how this technique can make the overall construction and editing of your web site so much simpler.
Now simply create your other pages and use this same technique, if you then need to add more links to your header or main navigation all you will need to do it edit a single file. Good eh? well thats all there is to it, enjoy
i want to make user accounts to my website that i wish to develop, what language should i use? thanks
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)