Добавление футера с помощью HTML

Development | Amber | Комментировать запись

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

Футер (нижний колонтитул) веб-сайта – это последний блок контента, который расположен в нижней части страницы. Футер может содержать любой тип HTML-контента, включая текст, изображения и ссылки. В последнем мануале этой серии мы создадим базовый футер для нашей веб-страницы с помощью элемента <footer>.

Для начала вставьте следующий фрагмент кода после закрывающего тега </div> и перед закрывающим тегом </body>:

. . .
<!--Footer-->
<footer style="height:auto; background-color:#9400D3;">
<h2><Made with 🤍 by ме!</h2>
</footer>
. . .

В этом фрагменте <!--Footer--> – это комментарий, который не будет читаться  браузером и используется для удобной организации html-файла. Под этим комментарием идет элемент <footer>; мы использовали атрибут style, чтобы задать цвет его фона и настроить его высоту для автоматической подстройки под контент, который будет находиться внутри. Элемент <footer> является семантическим элементом, поскольку его имя сообщает разработчику цель контента. Это полезно как для разработчиков, так и для посетителей сайта, использующих скринридеры. В остальных случаях элемент <footer> работает так же, как элемент <div>.

Читайте также: Как работает <div>, элемент разделения контента HTML

Мы также добавили текст и эмодзи внутри элемента <h2>. Если хотите, вы можете заменить этот контент любым другим сообщением по вашему выбору.

Сохраните файл и перезагрузите его в браузере, чтобы проверить результаты. Вы должны увидеть такой футер:

Обратите внимание, стиль нашего футера не совсем похож на остальной контент тестового сайта. Футер содержит белое поле внизу, а текст отформатирован иначе. Чтобы удалить нижнее поле и стилизовать текст согласно общему стилю сайта, добавьте следующие атрибуты к вашему элементу <h2>:

<h2 style="color:white; padding:40px; margin:0; text-align:center;"> Made with 🤍 by ме!</h2>

Сохраните файл и перезагрузите его в браузере. Теперь ваш футер оформлен в том же стиле, что и весь остальной сайт.

В этом мануале вы узнали, как создать и стилизовать футер сайта. Теперь вы можете поэкспериментировать с полученным сайтом и попробовать изменить стиль футера и других элементов с помощью атрибутов, с которыми вы познакомились в этой серии руководств.