A website is a part of the world wide web, like amazon.com, ebay.com, wikipedia.org or this project website. Every website consists of several pages (at least one).
Pages could be:
Every page consists of
On many websites, header and footer is always the same on all pages. Unfortunately, with plain HTML it is not possible to reuse same header and footer on every page without duplicating the HTML code. When changing header or footer you have to change all your pages, which is a cumbersome and boring work. And soon you have deviations in header and footer and pages where header and footer work and others where they don't. WINP is remedy to this problem. With WINP you have the same header and footer on every page of you website.
Suppose we have a personal website, with three pages
<!-- "About me" = site/aboutme.html -->
<html>
<head>
<title>My website</title>
</head>
<body>
<p>Navigation</p>
<ul>
<li><a href="aboutme.html">About me</a></li>
<li><a href="thingsiwanttosay.html">Things I want to say</a></li>
<li><a href="contactme.html">Contact me</a></li>
</ul>
<h1>About me</h1>
<p>
Some text...
</p>
<p>
Copyright bla...
</p>
</body>
</html>
<!-- "Things I want to say" = site/thingsiwanttosay.html -->
<html>
<head>
<title>My website</title>
</head>
<body>
<p>Navigation</p>
<ul>
<li><a href="aboutme.html">About me</a></li>
<li><a href="thingsiwanttosay.html">Things I want to say</a></li>
<li><a href="contactme.html">Contact me</a></li>
</ul>
<h1>Things I want to say</h1>
<p>
Another text...
</p>
<p>
Copyright bla...
</p>
</body>
</html>
<!-- "Contact me" = site/contactme.html -->
<html>
<head>
<title>My website</title>
</head>
<body>
<p>Navigation</p>
<ul>
<li><a href="aboutme.html">About me</a></li>
<li><a href="thingsiwanttosay.html">Things I want to say</a></li>
<li><a href="contactme.html">Contact me</a></li>
</ul>
<h1>Contact me</h1>
<p>
Again another text...
</p>
<p>
Copyright bla...
</p>
</body>
</html>
These three pages above have a lot of boilerplate code. If we want to add another page to the navigation, we would have to change all existing pages.
When we use WINP, we separate the header, footer and content. The result looks like.
<!-- header.html -->
<html>
<head>
<title>My website</title>
</head>
<body>
<p>Navigation</p>
<ul>
<li><a href="aboutme.html">About me</a></li>
<li><a href="thingsiwanttosay.html">Things I want to say</a></li>
<li><a href="contactme.html">Contact me</a></li>
</ul>
<!-- footer.html -->
<p>
Copyright bla...
</p>
</body>
</html>
<!-- "About me" = input/aboutme.html --> <h1>About me</h1> <p> Some text... </p>
<!-- "Things I want to say" = input/thingsiwanttosay.html --> <h1>Things I want to say</h1> <p> Another text... </p>
<!-- "Contact me" = input/contactme.html --> <h1>Contact me</h1> <p> Again another text... </p>
Note that the header.html and the footer.html are in the same directory as winp.pl, whereas the content files are in the input/ directory.
Important: If you do not have Perl installed, then install Perl now. Without Perl, you will not be able to run WINP.
We now execute winp.pl by double clicking this file or by running perl winp.pl in the directory of winp.pl on the command line.
The results will be placed in the site/ directory; it is the same as the original HTML code.
Now we want an individual title on each page. WINP uses a certain variable ${pagename} to dynamically substitute the page title. This variable is extracted from the name of the content file and the content file and the resulting HTML file is the same name in lower case and without spaces and without minus in name.
<!-- header.html -->
<html>
<head>
<title>${pagename}</title>
</head>
<body>
<p>Navigation</p>
<ul>
<li><a href="aboutme.html">About me</a></li>
<li><a href="thingsiwanttosay.html">Things I want to say</a></li>
<li><a href="contactme.html">Contact me</a></li>
</ul>
<!-- footer.html -->
<p>
Copyright bla...
</p>
</body>
</html>
<!-- "About me" = "input/About me.html" (transformed to site/aboutme.html) -->
<h1>${pagename}</h1>
<p>
Some text...
</p>
<!-- "Things I want to say" = "input/Things I want to say.html" (transformed to site/thingsiwanttosay.html) -->
<h1>${pagename}</h1>
<p>
Another text...
</p>
<!-- "Contact me" = "input/Contact me.html" (transformed to site/contactme.html) -->
<h1>${pagename}</h1>
<p>
Again another text...
</p>
As you can see, ${pagename} also works in the content files.
Suppose you want to add some extra paramters to the contactme.html page (for example a javascript), but not to the other pages. Therefore, the variable ${pagehead} exists. This variable is replaced by the content of a file, that has the same name (including ".html"), but ends with ".head". If no such a file exists, the variable will be replaced by an empty string.
<!-- header.html -->
<html>
<head>
<title>${pagename}</title>
${pagename}
</head>
<body>
<p>Navigation</p>
<ul>
<li><a href="aboutme.html">About me</a></li>
<li><a href="thingsiwanttosay.html">Things I want to say</a></li>
<li><a href="contactme.html">Contact me</a></li>
</ul>
<!-- "input/Contact me.html.head" (injected to site/contactme.html header-section) -->
<script>
<!--
alert("Hello!");
// -->
</script>
Suppose you want a default page index.html that is identically to aboutme.html page. You would create a file, that has the same name (including ".html"), but ends with ".clone". For each line containing a filename, a clone is created from the result page.
Let's see the example: So we create a file "input/About me.html.clone" with the following content:
index.html
The result is, that the output file site/aboutme.html is copied to site/index.html.