Введение
Тег <footer> можно использовать для создания подвала веб-страницы/веб-сайта. В этом практическом занятии вы научитесь создавать базовый подвал с использованием HTML-тега footer.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Установите базовую структуру веб-страницы
Создайте новый файл с расширением .html и именем index.html. Именно в этом файле мы будем добавлять HTML-код для создания подвала.
В этом шаге мы создадим базовую структуру веб-страницы. Вот код:
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- Header will be here -->
<main>
<!-- Main content will be here -->
</main>
<!-- Footer will be here -->
</body>
</html>
Добавьте код подвала
Добавьте следующий код после тега main, чтобы создать базовый подвал:
<footer>
<p>Copyright © 2021 My Webpage. All Rights Reserved.</p>
</footer>
В этом примере мы добавили простой тег абзаца в подвал с некоторым текстом. Вы можете настроить подвал, добавив ссылки, информацию об авторе, карту сайта и другое содержимое.
Сохраните файл index.html и откройте его в вашем веб-браузере. Вы должны увидеть базовую веб-страницу с подвалом внизу.
Настройка подвала
В этом шаге мы настроим подвал, добавив несколько дополнительной информации. Вот пример:
<footer>
<p>Свяжитесь с нами:</p>
<ul>
<li>Email: info@example.com</li>
<li>Телефон: 123-456-7890</li>
</ul>
<p>Следите за нами:</p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</footer>
В этом примере мы добавили два абзаца и два неупорядоченных списка. Первый список содержит контактную информацию о сайте, а второй содержит ссылки на профили в социальных сетях.
Сохраните файл index.html и откройте его в вашем веб-браузере. Вы должны увидеть настроенный подвал внизу веб-страницы.
Резюме
В этом практическом занятии мы научились создавать базовый подвал с использованием HTML-тега footer. Тег footer используется для определения подвала веб-страницы и может использоваться для хранения различных типов информации, таких как ссылки и данные о правах на копирование, связанные с веб-страницей. Мы также узнали, как настроить подвал, чтобы включить контактную информацию и ссылки на социальные сети.
