Создайте базовый подвал с использованием HTML

Введение

Тег <footer> можно использовать для создания подвала веб-страницы/веб-сайта. В этом практическом занятии вы научитесь создавать базовый подвал с использованием HTML-тега footer.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 93%. Он получил 100% положительных отзывов от учащихся.

Установите базовую структуру веб-страницы

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

HTML-документ/Раздел подвала

Введение

Установите базовую структуру веб-страницы

Добавьте код подвала

Настройка подвала

Резюме