Static HTML Files
Create a file named contacts.html:
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
</head>
<body>
<h1>Contact Page</h1>
<p>Russia</p>
</body>
</html>
To view it in a browser, navigate to its full address and name contacts.html. For the index.html file, you only need to specify the parent folder (or, if it's in the root, the domain of the site).
For styling and scripts, create your own files, for example, styles.css and scripts.js, and use them as usual in HTML.
...
<head>
...
<link href="./styles.css" rel="stylesheet"></link>
<script src="./scripts.js"></script>
</head>
...
Templating
Repeating content blocks can be extracted into a single file. For example, a footer with phone numbers and legal information is used on every page.
Create a file named footer.html:
<div>
Information displayed at the bottom of the site.
</div>
In the main file where the footer needs to be displayed, use the <include src="" /> tag. Thus, contacts.html will look like this:
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
</head>
<body>
<h1>Contact Page</h1>
<p>Russia</p>
<include src="footer.html" />
</body>
</html>
The path to the file for embedding is taken from the current folder.
You can pass parameters to the embedded template:
<include
src="footer.html"
phone="+7 495 100-20-30"
/>
Then they can be used in the footer.html template using the <%= parameter %> construct:
<div>
<div>Information displayed at the bottom of the site.</div>
<div>Phone: <%= phone %>.</div>
</div>
For convenience during development, if the embedded template contains <style> or <script> tags, they will be moved to the <head> tag and will not be duplicated if there are multiple insertions of the same template on the page (for example, an action button template may be used several times).
