Client Side Include Files (javascript)
Through-out this site you will see many things that are repeated over and over again. These elements are for example (but not limited to), the footer at the bottom of each page, the navigation bar to your left. and as my site grows in content, i feel i will have many more page elements that will need some form of quick management.
Firstly, i would like you to think about how a webpage is created. First and foremost you have a html extension. Within the page you may well specify your links that exist on the left/top or maybe even right hand side of you page. When first starting out, you may not even think about the links being a burden to you, because you may only have around 3-4 pages created, and for each of these 3-4 pages, all of your links exist within.
Navigation Links become a burden when you have 40+ pages in your site and you obviously DO NOT want to be editing every single page to update a new link addition to your site. This is where INCLUDE files save the day.
An include file is a file that does exactly what it suggests...it includes a html file within another file. The concept is easy enough to grasp and so to is the coding. The idea is that you put all of your html for e.g. your navigation bar into one file, and then call upon it within every file in your site. This essentially means that you only edit ONE file as opposed to all of your website's pages.
How do i do it?
- Open up notepad and create a new file
- Paste/write your required html (ie: all of your navigation bar links) Please note that the html you write must be written with the javascript "document.write" function.See example.
- Save this file for example as "navigation-bar"with a .js extension (javascript)
- In an HTML document of choice ie: your homepage, you need to "link" this include (.js) page to your HTML document. See code below for example. Paste that code exactly where you want your code to display.
Back to top
Example Javascript Include code
document.write('<a href= "include-files.html">Include Files1</a><a href= "include-files.html">Include Files2</a>');
COMMENT:
So as you can see the document.write function is used, the html code which would have gone inside your normal HTML doc, goes inside this include file. For easier referal for the next step, lets save this include file as "navigation-bar.js"
Example HTML code
<html>
<head>
<title>example code </title>
</head>
<body>
<a href= "include-files.html">Include Files1</a>
<a href= "include-files.html">Include Files2</a>
<script language="JavaScript" type="text/javascript" src="navigation-bar.js"></script>
</body>
</html>
COMMENT:
The links above have been crossed out. Delete the links you may have existing within you HTML pages as i have done (note i have only struck through mine to visually display the point, you must delete your links--make sure they are correctly coded inside your include file though!!!) and replace with the code below it. This is the "link" to your include file.
I am obviously only demonstrating the ability to use an include file with your navigation bar, but an include file can be used for MANY other types of html elements, ie: footers/copyright information, just basically anything that you are sure will need repeating over and over again.
Important things to note
There are many other types of include files. I have used a client side include type because my web host does not support the SERVER-SIDE include types (as far as i know). Therefore i have to include this file on my "end" of things. I will not go into the other types of include files as it will be digressing from explaining how the include file was of use in my portfolio.
Another important aspect to note is that knowledge of javascript is a requirement to write the include file, as you have seen with the examples above.
Back to top
