Click here to Skip to main content
Click here to Skip to main content

Create Templates using JavaScript

, 27 Nov 2000
Rate this:
Please Sign up or sign in to vote.
There are many ways to create a web page templete. Using JavaScript is one of easiest ways

Introduction

If you know something about JavaScript then you may remember that you can use document.write to write text into a HTML file - including any HTML tag:

     document.write("Hello World This is a text")

So we can use JavaScript to write a html file:

     document.write("<html><head><title>Create Templets by Using JavaScript</title></head>")
     document.write("<body>")
     document.write("<h3 align='center'>This is a html file created by using JavaScript</h3>")
     document.write("</body></html>")

Imagine you have to write a number of web pags and want to keep them same colors, same font face and size, same navigator menu, same banners and same contact information. You may wonder if you should create a template to keep your pages in the same style and reduce your typing. In case that one day you need to change the look of your pages, you just need to change the templete page.

There are many ways to create a templete. Using JavaScript is one of easiest ways. Let me show you how to do that. To keep things simple, let's use the sample code above.

First, we divide the code into three parts:

Header:

     document.write("<html><head></head>")
     document.write("<body bgcolor='#ffffff'>")

Content:

     document.write("<h3 align='center'>This is a html file created by using JavaScript</h3>")

Footer:

     document.write("</body></html>")

Let's copy the first part and save it as a .js file "header.js". Then we copy the third part and save it as "footer.js". finally, we create a html file "test.htm" and do coding as below:

     <script language="JavaScript" src="header.js"></script>
     <h3 align="center">This is a html file created by using JavaScript</h3>
     <script language="JavaScript" src="footer.js"></script>

Now that's it. Open a browser and test it. You can see the output is the same as a pure html file is. This is just a very simple sample.

You can write more things into "header.js" and "footer.js", including navigator menu, your company banners, contact information, attributes, and CSS classes. The below is an example:

header.js:

     document.write("<head>")
     document.write("<title>3A Web Design</title>")
     document.write("<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>")
     document.write("<meta name='author' content='Nongjian Zhou'>")
     document.write("<style type='text/css'>")
     document.write("<!--")
     document.write("h1		{color:#ee9933; font-size:24px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("h2		{color:#ee9933; font-size:18px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("h3		{font-size:16px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("h4		{font-size:14px; font-family: 'New Times Roman'}")
     document.write("p		{font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("pre 	{color:#994400; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("a:link 	{text-decoration: none}")
     document.write("a:hover {text-decoration: underline; color: #FF0000}")
     document.write("-->")
     document.write("</style>")
     document.write("</head>")
     document.write("")
     document.write("<table width='100%' height='100%' border='0' cellspacing='0' cellpadding='0'>")
     document.write("<tr><td colspan='2' height='120' align='center' bgcolor='#eeeeee'>")
     document.write("<h1>3A Web Design</h1>")
     document.write("<pre><div align='right'>Updated:" +document.lastModified+"&nbsp;&nbsp;&nbsp;&nbsp;</div></pre>")
     document.write("</td></tr>")
     document.write("<tr><td rowspan='2' align='center' valign='top' width='180' bgcolor='#eeeeee'><br>")
     document.write("<table width='140' align='center' valign='top' cellspacing='2' cellpadding='5'>")
     document.write("<tr><td bgcolor='#dddddd'>") 
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='aboutUs.htm'><b>About Us</b></a></p>")
     document.write("</td></tr>")
     document.write("<tr><td bgcolor='#dddddd'>")
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='services.htm'><b>Our Services</b></a></p>")
     document.write("</td></tr>")
     document.write("<tr><td bgcolor='#dddddd'>")
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='works.htm'><b>Our Works</b></a></p>")
     document.write("</td></tr>")
     document.write("<tr> <td bgcolor='#dddddd'>")
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='clients.htm'><b>Our Clients</b></a></p>")
     document.write("</td></tr>")
     document.write("<tr><td bgcolor='#dddddd'>")
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='contactUs.htm'><b>Contact Us</b></a></p>")
     document.write("</td></tr>")
     document.write("</table>")
     document.write("</td>")
     document.write("<td align='center'><table width='95%' height='100%'><tr><td>")

footer.js:

     document.write("</pre></table></td></tr><tr><td valign='bottom' height='50'>")
     document.write("<hr><pre>3A Web Design @ 2000, All Rights Reserved</pre>")
     document.write("</td></tr></table>")
     document.write("")
     document.write("")

test.htm:

     <script language="JavaScript" src="header.js"></script>
     <h3 align="center">This is a html file created by using JavaScript</h3>
     <script language="JavaScript" src="footer.js"></script>

You can divide a template into as many parts as you want. Let's say you can cut it into: "header", "footer", "content" and "main" and create four .js files: header.js, footer.js, content.js and main.js.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author


Comments and Discussions

 
GeneralA better way PinmemberArch4ngel28-Nov-05 0:52 
Generalpages on the fly Pinmemberallia7-Sep-03 14:15 
GeneralRe: pages on the fly PinsussAnonymous28-Apr-04 3:00 
GeneralOther methods PinsussPhilippe Lhoste24-Oct-00 2:38 
GeneralRe: Other methods PinmemberHockey12-Jul-02 16:34 
GeneralSearch Engines use meta data... PinsussCraig Henderson19-Oct-00 6:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411022.1 | Last Updated 28 Nov 2000
Article Copyright 2000 by Nongjian Zhou
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid