Web Site
Developers
Web Page Templates
A Few Words About the Advantages
If you intend to hand code html web pages one way to reduce the burden is to reuse a common template for a page. At least some of the effort pasting in common components is unneeded. In my case, I open a template for a common form for a called page. Immediately I find it more practical to save it in the name of the file I intend to create without altering the template. This does not mean your template in inviolate. It only means you wish to avoid saving a change that might be unique to the current effort.
Sample Template Code
What will be shown below is a template, displayed in its sections, then completely. Note that this is the same template I am using in the preperation of this discussion. This sample is for the two column page format we are now using for all our articles. Do not fear customizing, as I will for differing portions of the site. Here is how one appears, by sections, starting with the upermost portion:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<BASE HREF="http://www.opensourcetoday.org/">
<title> Open Source Today</title>
<link rel="stylesheet" href="file:///<your-home>/<your-project>/style.css"
type="text/css" />
<!-- after testing put in the your own link http://opensourcetoday.org/ -->
</head>
<body>
...
Above we are displaying the very top of the html web page. This code first defines the standards your page is constructed to run under. This usually is a small fraction of a page that sets conditions but does not display as content, it is contained within the html tag. The head(er) portion that includes other important tags beyond the ones shown. For example, this is where you would place your meta tags that have many potential functions. For example, the meta tags can instruct web search engines whether you want your page indexed to show on searches and how deep that indexing process penetrates. Other common functions are a description of the content of the page in text and solely by keywords. I am uncertain if the link to your style sheet can be considered a true meta tag, however, in my mind it is the one of greatest importance.
In the How To on the div tags, the Base class covers the whole page and the others float above it. Here are all the div tags waiting to be filled in the template. This is what I see in the body section when I open a new template for use:
<body>
<div class="Base">
<div id="header">
<h1>Open Source Today <br />(dot) org</h1>
</div>
<div id="left-central-col">
<h2>Letters to C.E.O.s<br />(N.N.P.T.S.)<sup>*</sup></h2>
</div> <!-- End of left central column -->
<div id="col-full-right">
<h3>Something Will Fill This Area </h3>
</div> <!-- End of full right column -->
</div> <!-- End of the Base (foundation) class -->
</body>
So this would be complete to the end of the page if the ending html tag were included. Here is the entire page and it's short:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<BASE HREF="http://www.opensourcetoday.org/">
<title> Open Source Today</title>
<link rel="stylesheet" href="file:///<your-home>/<your-project>/style.css"
type="text/css" />
<!-- after testing put in the your own link http://opensourcetoday.org/ -->
</head>
<body>
<div class="Base">
<div id="header">
<h1>Open Source Today <br />(dot) org</h1>
</div>
<div id="left-central-col">
<h2>Letters to C.E.O.s <br />(N.N.P.T.S.)<sup>*</sup></h2>
</div> <!-- End of left central column -->
<div id="col-full-right">
<h3>Something Will Fill This Area </h3>
</div> <!-- End of full right column -->
</div> <!-- This is the end of the Base (foundation) class -->
</body>
</html>
So this is the entire package. A uniform, colored background overlaid by a banner area at the top with the site name, and two vertical columns, with the larger to the left. Just like this page. Simple, concise (or short and sweet are apropos too) and you have the ready built structure to throw your code. It saves you and I lots of effort.
Template Modification
Here are a few changes to the templates I will be either making or considering. First I now think it was an error to make the "header", "right-central-col" [sorry, already made that change] and even "col-full-right" as an id rather than a class. These are and will be used repeatedly in differing pages, hence, the class designation is the more appropriate. Moreover, note that this How To began using an inappropriate title meant for another series. So, I will be making a separate template for the differing How Tos. Furthermore, as the content of the right most column fills and remains static, it too should be filled in as part of the template. Finally, Some articles will require being broken into several pages, hence, subsequent pages will probably use a differing template. In conclusion, let me encourage you to create templates that fulfill your own needs; so feel very free to tear these forms apart or create one of your own.
Closing Thoughts on Templates
As might be infered, this content has sat waiting publication, and the template content has been in a state of flux. I have added a number of routinely used components, e.g. a title header for the article being composed where the first entry is the new content's article title. Other less obvious changes are made within the css file, where appearances are altered. One example was adding the right border: color, width and padding. The padding on the left was also changed along with the font size. The latter has been an issue on several other pages. So in conclusion, if you use templates make them fit your needs and don't forget to use the css file.
I now have three separate templates. Adding a unique forth for the front page is under consideration, if it will work with the code I am contemplating. Templates are in heavy use on this site. [The foregoing represents the status at the time of its composition, albeit, with some corrections. Templates have been used more extensively than stated. Moreover, it is my intention to exhibit a few generic samples once this site up to speed.]
Corrections, suggested extension or comments write: How-To-Guy. If the mailto does not work, use this: hcohen[-At-]bst-softwaredevs.com.
© Herschel Cohen, All Rights Reserved
Return to Home or Template Page