Создайте файл contacts.html:
<!DOCTYPE html>
<html>
<head>
<title>Контакты</title>
</head>
<body>
<h1>Страница контактов</h1>
<p>Россия</p>
</body>
</html>
Чтобы посмотреть его в браузере, перейдите по его полному адресу и названию contacts.html. Для файлов index.html достаточно указать только родительскую папку (или, если он лежит в корне, домен сайта).
Для стилизации и скриптов, создайте свои файлы, например, styles.css и scripts.js и используйте обычным образом в HTML.
...
<head>
...
<link href="./styles.css" rel="stylesheet"></link>
<script src="./scripts.js"></script>
</head>
...
Повторяющиеся блоки контента можно вынести в один файл. Например, на каждой странице используется подвал с телефонами и юридической информацией.
Создайте файл footer.html:
<div>
Информация отображаемая внизу сайта.
</div>
В основном файле, где надо отобразить подвал, используем тег <include src="" />. Так, contacts.html будет выглядеть:
<!DOCTYPE html>
<html>
<head>
<title>Контакты</title>
</head>
<body>
<h1>Страница контактов</h1>
<p>Россия</p>
<include src="footer.html" />
</body>
</html>
Путь файла для встраивания берется от текущей папки.
Во встраиваемый шаблон можно передать параметры:
<include
src="footer.html"
phone="+7 495 100-20-30"
/>
Тогда их можно использовать в шаблоне footer.html используя конструкцию <%= параметр %>:
<div>
<div>Информация отображаемая внизу сайта.</div>
<div>Телефон: <%= phone %>.</div>
</div>
Для удобства разработки, если во встраиваемом шаблоне есть теги <style> или <script> они будут перенесены в тег <head> и не будут дублироваться, если на странице есть несколько вставок одного шаблона (например, шаблон кнопки-действия может быть использован несколько раз).
