Статичные HTML-файлы

Создайте файл 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> и не будут дублироваться, если на странице есть несколько вставок одного шаблона (например, шаблон кнопки-действия может быть использован несколько раз).

Предложить изменения