Задание заголовка страницы (title)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 16
Автор
Рек. время прохождения 4 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы сосредоточимся на одном из самых первых и важных тегов, с которым сталкивается веб-разработчик — теге `<title>`. Этот тег не создает видимых элементов на самой странице, но его значение отображается во вкладке браузера, в закладках и результатах поиска. Правильное использование `<title>` критически важно для навигации пользователя и для SEO. Задания построены так, чтобы вы на практике отработали синтаксис тега, поняли, где он должен располагаться в документе, и узнали о некоторых особенностях его поведения. Для наглядности в каждом упражнении результат будет отображаться в виде имитации вкладки браузера.
Список тем

Основы: имя тега для заголовка

id: 37890_html-title-tag-name-1

В HTML-документе необходимо задать заголовок страницы. Вставьте правильное имя тега в пропуски, чтобы текст 'Моя страница' стал заголовком.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  margin: 0;
}

.browser-window {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 340px;
  background-color: #fff;
}

.browser-tab-bar {
  background-color: #e1e1e1;
  padding: 8px 8px 0 8px;
  display: flex;
}

.browser-tab {
  background-color: #fff;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-bottom: none;
}

.browser-content {
  padding: 16px;
  min-height: 150px;
  font-size: 16px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <input1>Моя страница</input2>
  </head>
  <body>
    <!-- Этот код имитирует вкладку браузера для наглядности -->
    <div class="browser-window">
      <div class="browser-tab-bar">
        <div class="browser-tab">Моя страница</div>
      </div>
      <div class="browser-content">
        Содержимое страницы.
      </div>
    </div>
  </body>
</html>
Для определения заголовка документа используется тег `<title>`. В этом задании вам нужно вписать только само слово `title` в оба пропуска, чтобы создать открывающий и закрывающий теги.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Структура: открывающий и закрывающий теги

id: 37890_html-title-full-tags-2

Теперь давайте создадим тег `title` целиком. Оберните текст 'Портфолио' в правильные открывающий и закрывающий теги, чтобы он стал заголовком.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  margin: 0;
}

.browser-window {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 340px;
  background-color: #fff;
}

.browser-tab-bar {
  background-color: #e1e1e1;
  padding: 8px 8px 0 8px;
  display: flex;
}

.browser-tab {
  background-color: #fff;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-bottom: none;
}

.browser-content {
  padding: 16px;
  min-height: 150px;
  font-size: 16px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    input1Портфолиоinput2
  </head>
  <body>
    <!-- Этот код имитирует вкладку браузера для наглядности -->
    <div class="browser-window">
      <div class="browser-tab-bar">
        <div class="browser-tab">Портфолио</div>
      </div>
      <div class="browser-content">
        Здесь будут мои работы.
      </div>
    </div>
  </body>
</html>
Вам нужно использовать полный синтаксис тегов. Перед текстом вставьте открывающий тег `<title>`, а после текста — закрывающий `</title>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Контекст: правильное место для title

id: 37890_html-title-placement-3

Тег `title` должен находиться в определенной части HTML-документа. Добавьте полный тег `title` с текстом 'Контакты' в правильное место внутри структуры кода.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  margin: 0;
}

.browser-window {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 340px;
  background-color: #fff;
}

.browser-tab-bar {
  background-color: #e1e1e1;
  padding: 8px 8px 0 8px;
  display: flex;
}

.browser-tab {
  background-color: #fff;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-bottom: none;
}

.browser-content {
  padding: 16px;
  min-height: 150px;
  font-size: 16px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    input1
  </head>
  <body>
    <!-- Этот код имитирует вкладку браузера для наглядности -->
    <div class="browser-window">
      <div class="browser-tab-bar">
        <div class="browser-tab">Контакты</div>
      </div>
      <div class="browser-content">
        Наша контактная информация.
      </div>
    </div>
  </body>
</html>
Тег `<title>` всегда размещается внутри контейнера `<head>`. В этом задании уже есть тег `<head>`, найдите его и впишите `<title>Контакты</title>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Содержимое: заполняем заголовок

id: 37890_html-title-content-4

Теги `title` уже на месте, но они пустые. Впишите в них текст 'Новости компании', чтобы он отобразился как заголовок страницы.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  margin: 0;
}

.browser-window {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 340px;
  background-color: #fff;
}

.browser-tab-bar {
  background-color: #e1e1e1;
  padding: 8px 8px 0 8px;
  display: flex;
}

.browser-tab {
  background-color: #fff;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-bottom: none;
}

.browser-content {
  padding: 16px;
  min-height: 150px;
  font-size: 16px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
  <head>
    <title>input1</title>
  </head>
  <body>
    <!-- Этот код имитирует вкладку браузера для наглядности -->
    <div class="browser-window">
      <div class="browser-tab-bar">
        <div class="browser-tab">Новости компании</div>
      </div>
      <div class="browser-content">
        Последние новости.
      </div>
    </div>
  </body>
</html>
Текст заголовка помещается между открывающим `<title>` и закрывающим `</title>` тегами. Просто впишите нужный текст в пропуск.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Различие: тег <title> и атрибут title

id: 37890_html-title-vs-attribute-5

В коде есть элемент с атрибутом `title`, который создает всплывающую подсказку. Ваша задача — установить заголовок для всей страницы 'Мой блог', а не для отдельного элемента.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  margin: 0;
}

.browser-window {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 340px;
  background-color: #fff;
  margin-bottom: 20px;
}

.browser-tab-bar {
  background-color: #e1e1e1;
  padding: 8px 8px 0 8px;
  display: flex;
}

.browser-tab {
  background-color: #fff;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-bottom: none;
}

.browser-content {
  padding: 16px;
  min-height: 80px;
}

.tooltip-area {
  padding: 15px;
  border: 2px dashed #999;
  text-align: center;
  cursor: help;
}
HTML
<!DOCTYPE html>
<html>
  <head>
    input1
  </head>
  <body>
    <!-- Этот код имитирует вкладку браузера для наглядности -->
    <div class="browser-window">
      <div class="browser-tab-bar">
        <div class="browser-tab">Мой блог</div>
      </div>
      <div class="browser-content">
        Записи блога.
      </div>
    </div>

    <div class="tooltip-area" title="Это всплывающая подсказка!">
      Наведи сюда, чтобы увидеть подсказку.
    </div>
  </body>
</html>
Для заголовка страницы используется тег `<title>` в секции `<head>`. Атрибут `title="..."` используется для других элементов (например, `div` или `p`), чтобы создать всплывающую подсказку при наведении.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Поведение: несколько тегов title

id: 37890_html-title-multiple-6

В коде уже есть один заголовок 'Первый заголовок'. Добавьте после него еще один тег `title` с текстом 'Второй заголовок' и посмотрите, какой из них будет отображаться в имитации вкладки.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  margin: 0;
}

.browser-window {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 340px;
  background-color: #fff;
}

.browser-tab-bar {
  background-color: #e1e1e1;
  padding: 8px 8px 0 8px;
  display: flex;
}

.browser-tab {
  background-color: #fff;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-bottom: none;
}

.browser-content {
  padding: 16px;
  min-height: 150px;
  font-size: 16px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Первый заголовок</title>
    input1
  </head>
  <body>
    <!-- Этот код имитирует вкладку браузера для наглядности -->
    <div class="browser-window">
      <div class="browser-tab-bar">
        <div class="browser-tab">Первый заголовок</div>
      </div>
      <div class="browser-content">
        Обратите внимание, какой заголовок отображается.
      </div>
    </div>
  </body>
</html>
Браузер всегда обрабатывает и использует только первый встреченный тег `<title>`. Все последующие теги `<title>` в коде документа просто игнорируются.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Практика: длинный заголовок

id: 37890_html-title-long-7

Заголовки во вкладках браузера имеют ограниченную длину. Установите очень длинный заголовок: 'Главная страница официального сайта интернет-магазина «ТехноМир»' и посмотрите, как он будет обрезан.

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  margin: 0;
}

.browser-window {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 340px;
  background-color: #fff;
}

.browser-tab-bar {
  background-color: #e1e1e1;
  padding: 8px 8px 0 8px;
  display: flex;
}

.browser-tab {
  background-color: #fff;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  font-size: 14px;
  color: #333;
  border: 1px solid #ccc;
  border-bottom: none;
  /* Стили для обрезки текста */
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-content {
  padding: 16px;
  min-height: 150px;
  font-size: 16px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
  <head>
    <title>input1</title>
  </head>
  <body>
    <!-- Этот код имитирует вкладку браузера для наглядности -->
    <div class="browser-window">
      <div class="browser-tab-bar">
        <div class="browser-tab">Главная страница официального сайта интернет-магазина «ТехноМир»</div>
      </div>
      <div class="browser-content">
        Длинный заголовок во вкладке обрезан.
      </div>
    </div>
  </body>
</html>
Просто вставьте предложенный длинный текст внутрь тега `<title>`. CSS для имитации вкладки настроен так, чтобы обрезать длинный текст и добавлять многоточие, как это делают реальные браузеры.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру