Page 1 of 1

Make Coding Easier, Building Your Website With Includes For this article I thought I would share a few tips on how to construc Rate Topic: -----

#1 Tripper44  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 2
  • Joined: 24-June 07

Post icon  Posted 24 June 2007 - 04: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:

Posted Image

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="header.asp" -->
<!-- #include file="topnav.asp" -->
<!-- #include file="leftnav.asp" -->
<div class="content">
<p>My content here</p>
</div>
<!-- #include file="footer.asp" -->


PHP Version

<? include("header.asp") ?>
<? 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 :)

Is This A Good Question/Topic? 2
  • +

Replies To: Make Coding Easier, Building Your Website With Includes

#2 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Posted 26 June 2007 - 08: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.

This post has been edited by girasquid: 26 June 2007 - 08:26 PM

Was This Post Helpful? 2
  • +
  • -

#3 srahul07  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 20-September 07

Posted 19 April 2008 - 06:03 AM

hey thanks for your guidance.... :)
Was This Post Helpful? 0
  • +
  • -

#4 omochan  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 148
  • Joined: 19-October 06

Posted 06 July 2008 - 06: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.
Was This Post Helpful? 0
  • +
  • -

#5 awing  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 5
  • Joined: 05-January 09

Posted 05 January 2009 - 07:33 PM

Edit: quote cut by Moderator.


i want to make user accounts to my website that i wish to develop, what language should i use? thanks
Was This Post Helpful? 1
  • +
  • -

#6 Guest_Bstephe*


Reputation:

Posted 03 April 2010 - 04:34 AM

[quote name='awing' date='05 January 2009 - 06:33 PM' timestamp='1231209197' post='504681']

View PostTripper44, on 24 Jun, 2007 - 03:19 AM, said:

i want to make user accounts to my website that i wish to develop, what language should i use? thanks


I would recommend using PHP or AJAX with sha256 hash or something.
Was This Post Helpful? 0

Page 1 of 1