Как связать html файлы

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Сейчас нельзя просто связать два файла друг с другом, чтобы, например, хранить шапку в одном файле, блоки в другом и так далее. Такой функциональности у HTML нет.

Но можно использовать шаблонизаторы, которые имеют такую функцию, например — Pug. С его помощью можно создавать и подключать шаблоны друг в друга. Это помогает структурировать весь шаблон и комфортнее с ним работать. Вот как будет выглядеть пример шаблона на Pug:

//- Файл по пути includes/header.pug
header
  a.logo(href='#') Хекслет
  nav
    a(href='/programs') Программы
    a(href='/courses') Курсы
    a(href='/pricing') Цены
    a(href='/teams') Компаниям

//- Файл по пути includes/footer.pug
footer
  p Hexlet Ltd.

//- Файл index.pug
doctype html
html
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    meta(rel='icon' type='image/x-icon' href='favicon.ico')

    title Hexlet

    link(rel='stylesheet' href='./styles/app.css')
  body
    //- Подключение шапки сайта
    include includes/header.pug

    main
      h1 Научитесь программировать и получите востребованную профессию

    //- Подключение футера сайта
    include includes/footer.pug

3 года назад

Nikita Mikhaylov

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

Похожие вопросы