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

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70767{{"HTML-раздел заголовка"}} html/head_elems -.-> lab-70767{{"HTML-раздел заголовка"}} html/text_head -.-> lab-70767{{"HTML-раздел заголовка"}} html/lists_desc -.-> lab-70767{{"HTML-раздел заголовка"}} html/layout -.-> lab-70767{{"HTML-раздел заголовка"}} html/nav_links -.-> lab-70767{{"HTML-раздел заголовка"}} html/doc_flow -.-> lab-70767{{"HTML-раздел заголовка"}} end

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