Preface
Goal: Build a HTML Case for Use with This Article Series.
Source Examples
You can obtain source examples here:
Reusable Parts
While working with many pages, HTML documents might have occuring parts, such as: sidebar, navbar, header, footer, and so on. Usually, the only difference is just the content. The issue with HTML document is, it is not modular. You have to put all the html parts in the document. This means we cannot reuse html parts.
The issue with HTML document is, it is not modular.
From historical perspective,
HTML Preprocessor only solve this issue.
But later, added functionality such as template inheritance,
and block building and variables.
HTML Case
We begin with pure html before using templating engine later.
Simple Hyperlink Pages
How do I make each hyperlink refer to each content?
I found a good case, based on a beginner question. Consider a page containing hyperlinks in figure below:
This should be a simple task.
When the HTML clicked,
it must show the content of HTML page.
When the CSS clicked,
it must show the content of CSS page, and so on.
w3schools Example
A real life page
With help of w3c.css the sidebar would looks like below code:
<div class="w3-sidebar w3-bar-block w3-card w3-animate-left"
style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large"
id="closeNav" >Close ×</button>
<a class="w3-bar-item w3-button"
href="index.html">Home</a>
<a class="w3-bar-item w3-button"
href="html.html">HTML Link</a>
<a class="w3-bar-item w3-button"
href="css.html">CSS Link</a>
<a class="w3-bar-item w3-button"
href="php.html">PHP Link</a>
<a class="w3-bar-item w3-button"
href="javascript.html">Javascript Link</a>
</div>And the navbar, also
<div class="w3-bar w3-black">
<a class="w3-bar-item w3-button"
href="index.html">Home</a>
<a class="w3-bar-item w3-button"
href="html.html">HTML</a>
<a class="w3-bar-item w3-button"
href="css.html" >CSS</a>
<a class="w3-bar-item w3-button"
href="php.html" >PHP</a>
<a class="w3-bar-item w3-button"
href="javascript.html">Javascript</a>
</div>Now we can have complete page as below code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Link Example: Home</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="js/script.js"></script>
</head>
<body>
<div class="w3-sidebar w3-bar-block w3-card w3-animate-left"
style="display:none" id="mySidebar">
...
</div>
<div id="main">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge"
id="openNav">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
</div>
<div class="w3-bar w3-black">
...
</div>
<div class="w3-container">
<p>Home Page</p>
</div>
</div>
</body>
</html>You can obtain the source html code here:
Alowng with the javascript code here:
This also fine with single html document.
Directory Structure.
Requirement: The example case must consist multiple pages that refer to the same HTML parts.
❯ tree
.
├── css.html
├── html.html
├── index.html
├── javascript.html
├── js
│ └── script.js
└── php.html
All these html artefacts contain the same sidebar and navbar.
And actually almost the same head.
The only different parts are,
the title and the content as shown in below code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Link Example: CSS</title>
...
</head>
<body>
...
<div id="main">
...
<div class="w3-container">
<p>CSS Page</p>
</div>
</div>
</body>
</html>Editing Parts
Issue: You repeat yourself.
The problem comes when you have to,
alter the hyperlink content in multiple html pages.
You have to edit all the html files.
This tedious task, is a kind of boring. And also error prone. We need a tool to solve the situation.
What’s Next?
HTML Preprocessor comes to solve this issue.
In the next part, we have four example: pug, nunjucks, EJS and handlebars.
Consider continue reading [ Template - Grunt - Pug ].