Создать заголовочную секцию в HTML

Введение

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

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

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

Настройка HTML-документа

Начнем с создания нового HTML-файла с именем index.html. В index.html добавим базовую структуру HTML-документа, используя следующий код:

<!doctype html>
<html>
  <head>
    <title>HTML Header Tutorial</title>
  </head>
  <body></body>
</html>

Создание заголовочной секции

Создадим заголовочную секцию веб-страницы с использованием тега <header>. Внутри тега <body> добавьте следующий код:

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

В приведенном выше коде мы добавили тег <h1> для определения заголовка заголовочной секции и тег <nav> для определения меню навигации. Внутри тега <nav> мы добавили неупорядоченный список <ul> и три элемента списка <li> с соответствующими тегами якоря <a> для создания меню навигации.

Добавление стилей к заголовочной секции

Для добавления стилей в заголовочную секцию создадим CSS-файл с именем style.css. В style.css напишем следующий код:

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  display: block;
  padding: 0.5em;
  text-decoration: none;
}

В приведенном выше коде мы добавили стили к тегу <header> для установки цвета фона, цвета текста и внутреннего отступа. Также добавили стили к тегу <nav> и его дочерним элементам для настройки стилей меню навигации.

Подключение CSS-файла

Для подключения CSS-файла к HTML-файлу добавьте следующий код внутри тега <head>:

<link rel="stylesheet" href="style.css" />

Сохраните изменения в index.html и откройте его в веб-браузере. Вы должны увидеть следующий результат:

HTML Header Example

Резюме

Поздравляем! Вы успешно создали базовую заголовочную секцию HTML с использованием тега <header>. В этом практическом занятии вы узнали, как создавать заголовочную секцию веб-страницы, добавлять ей стили и подключать CSS-файл к HTML-документу. Заголовочная секция является важной частью любой веб-страницы, так как она предоставляет visitors introductory content и меню навигации.

HTML-раздел заголовка