13.
8M
Sign up for our free weekly Sign in ×
Web Dev Newsletter.
Search for articles, questions, tips
articles Q&A forums stuff
lounge ?
Create
Templates using
JavaScript
Cookie Policy
Nongjian Zhou, 27 Nov 2000
4.13 (45 votes)
Rate this:
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:
Hide Copy Code
document.write("Hello World
This is a text")
So we can use JavaScript to write a
html file:
Hide Copy Code
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:
Hide Copy Code
document.write("<html><head>
</head>")
document.write("<body
bgcolor='#ffffff'>")
Content:
Hide Copy Code
document.write("<h3
align='center'>This is a html
file created by using
JavaScript</h3>")
Footer:
Hide Copy Code
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:
Hide Copy Code
<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:
Hide Shrink Copy Code
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; </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> <a
href='aboutUs.htm'><b>About
Us</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td
bgcolor='#dddddd'>")
document.write("
<p> <a
href='services.htm'><b>Our
Services</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td
bgcolor='#dddddd'>")
document.write("
<p> <a
href='works.htm'><b>Our
Works</b></a></p>")
document.write("</td></tr>")
document.write("<tr> <td
bgcolor='#dddddd'>")
document.write("
<p> <a
href='clients.htm'><b>Our
Clients</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td
bgcolor='#dddddd'>")
document.write("
<p> <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:
Hide Copy Code
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:
Hide Copy Code
<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
TWITTER FACEBO
OK
About the Author
Nongjian Zhou
www.itechcollege.com
East Timor
Senior Web Specialist.
Read my other articles for
beginners on iTechCollege.com:
PHP For Beginners
JSP For Beginners
ASP For Beginners
ASP.NET For Beginners
SQL For Beginners
AJAX For Beginners
HTML For Beginners
Javascript For Beginners
CSS For Beginners
FTP For Beginners
XML For Beginners
C++ For Beginners
You may also be
interested in...
A Solution Public, Private,
Blueprint for and Hybrid Cloud:
DevOps What's the
difference?
Template Slack Pusher:
Generator for push slack
JavaScript - messages to
JSRazor Wordpress
Easy JavaScript Automatically
Templating Create Dump File
When Program
Hangs
Comments and
Discussions
You must Sign In to use this message board.
Search Comments
First Prev Next
New to javascript
Member 11673820 7-May-15 19:29
A better way
Arch4ngel 28-Nov-05 0:52
pages on the fly
allia 7-Sep-03 14:15
Re: pages on the fly
Anonymous 28-Apr-04 3:00
Other methods
Philippe Lhoste 24-Oct-00 2:38
Re: Other methods
alex.barylski 12-Jul-02 16:34
Search Engines use meta
data...
Craig Henderson 19-Oct-00 6:22
Refresh 1
Permalink | Advertise | Privacy | Cookies | Terms
of Use | Mobile
Web01 | 2.8.190114.1 | Last Updated 28 Nov
2000
Select Language ▼
Article Copyright 2000 by Nongjian Zhou
Everything else Copyright © CodeProject, 1999-
2019
