Мастерство в области метаданных HTML-документа

Введение

В этом практическом занятии вы научитесь создавать HTML-документ с использованием тега <head> HTML. Тег <head> используется для предоставления метаданных и других сведений о веб-странице, которые невидимы для пользователя. Мы рассмотрим шаги, необходимые для создания тега <head> для вашего 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/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70765{{"Метаданные HTML-документа"}} html/head_elems -.-> lab-70765{{"Метаданные HTML-документа"}} html/charset -.-> lab-70765{{"Метаданные HTML-документа"}} html/doc_flow -.-> lab-70765{{"Метаданные HTML-документа"}} end

Создайте HTML-документ

Сначала создадим HTML-документ в файле с именем index.html:

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

Добавьте заголовок к своему HTML-документу

Тег <title> используется для определения заголовка веб-страницы. Он должен располагаться внутри тега <head>. Добавьте тег <title> к своему HTML-документу:

<!doctype html>
<html>
  <head>
    <title>My Awesome Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Измените заголовок вашего HTML-документа

Изменим заголовок HTML-документа, заменив текст "My Awesome Webpage" на что-то другое. Замените текст "My Awesome Webpage" на желаемый заголовок:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Добавьте кодировку символов

Кодировка символов используется для определения того, как символы отображаются в браузере. Мы можем определить кодировку символов с использованием тега <meta>. Добавьте следующий тег <meta> внутри тега <head>:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Добавьте стили CSS к своему HTML-документу

Вы можете использовать тег <style> внутри тега <head> для предоставления стилей CSS для веб-страницы. Добавьте следующий тег <style> внутри тега <head>:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Добавьте ссылки на внешние стилиSheets

Вы также можете связать внешние CSS-стилиSheets с вашим HTML-документом с использованием тега <link>. Создайте новый файл с именем styles.css и добавьте следующие CSS-стили:

h1 {
  color: red;
}

Затем, свяжите этот стильSheet с вашим HTML-документом с использованием следующего тега <link> внутри тега <head>:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Добавьте базовый URL

Тег <base> используется для предоставления базового URL для всех относительных URL, используемых в HTML-документе. Добавьте тег <base> внутри тега <head>:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Резюме

В этом практическом занятии вы узнали, как использовать тег <head> HTML для предоставления метаданных и других сведений о веб-странице. Вы можете использовать тег <title> для определения названия HTML-документа, тег <meta> для определения кодировки символов и других метаданных, тег <style> для предоставления стилей CSS, тег <link> для подключения внешних стилевыхSheets и тег <base> для предоставления базового URL для всех относительных URL.