Метаданные в HTML
Чтение — около 10 минут· без учёта практики
В предыдущем уроке мы закончили форму записи на прогулку. В этом уроке добавим страницам сайта Тони метаданные. Проверку всего проекта выполним в отдельной итоговой работе.
Элемент meta
Тег
<meta>
предоставляет метаданные о HTML-документе — сведения о самой странице, а не её содержимое. Метаданные не отображаются
на странице, но их используют браузеры и поисковые системы.
Метаэлементы, как правило, используются, чтобы указать кодировку, описание страницы, настройки отображения на
мобильных устройствах, автора документа и другие метаданные. Разрешается и, как правило, необходимо использовать
несколько метатегов. Тег <meta> пустой, записывается одним тегом и размещается внутри тега
<head>. Название страницы
<title>, с которым мы работаем с первых уроков, — тоже метаданные.
title задаёт название документа, а элементы внутри body — содержимое страницы.
Учебный редактор удаляет из примеров элементы <meta>, а их действие и так не видно на странице.
Поэтому примеры в этом уроке приведены кодом, а задание выполняется в VS Code.
Указание кодировки документа
Тег <meta> позволяет сообщить браузеру, в какой кодировке сохранён текст страницы. Атрибут
charset
задаёт кодировку символов для HTML-документа.
<html lang="ru">
<head>
<!-- задаём кодировку документа UTF-8 -->
<meta charset="utf-8">
<title>Пример использования тега meta</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
В данном примере мы задали кодировку документа UTF-8 с использованием элемента <meta> и
атрибута charset. UTF-8 — общепринятая стандартизированная кодировка, которая позволяет хранить любые
символы Юникода: русские и латинские буквы, математические знаки, эмодзи. Почему без неё русский текст превращается в
«кракозябры», мы разбирали в уроке
«Создание первой HTML-страницы».
Раньше стандарт HTML лишь рекомендовал UTF-8 и не советовал использовать кодировки ASCII, CESU-8, UTF-7, BOCU-1, SCSU
и UTF-32. Сейчас стандарт требует, чтобы HTML-документы были в кодировке UTF-8. Сам файл тоже должен быть сохранён в
UTF-8: строка <meta charset="utf-8"> лишь сообщает браузеру кодировку, но не перекодирует текст.
Полный перечень зарегистрированных кодировок доступен на сайте iana.org; в современном вебе из них используется UTF-8.
Атрибуты name, http-equiv и content
Остальные метаданные разделены на две основные группы:
-
первая группа — значения атрибута
name; -
вторая группа — значения атрибута
http-equiv.
Атрибут name отвечает за сведения о странице и её авторе, содержит рекомендации для поисковых систем и
настройки отображения, а атрибут http-equiv имитирует заголовок HTTP-ответа сервера и определяет его
обработку.
Совместно с ними используется атрибут
content: он задаёт значение, связанное с атрибутом name или http-equiv. Если один из этих атрибутов
указан, атрибут content обязателен. В одном элементе указывается только один из атрибутов
name, http-equiv и charset.
Описание, ключевые слова и автор
Рассмотрим часто используемые варианты метатегов с атрибутом name:
<meta name="description" content="Бесплатные уроки по созданию сайтов">
Описание страницы довольно важное: его учитывают поисковые системы и часто показывают в результатах поиска под
заголовком страницы. Атрибут content в данном примере содержит описание конкретной страницы сайта. Пишите
одно-два предложения о содержании именно этой страницы: длинное описание поисковая система обрежет, а одинаковые
описания на разных страницах не помогут выбрать нужную.
<meta name="keywords" content="HTML, CSS, JavaScript">
Представляет собой список ключевых слов, касающихся конкретной страницы. Google этот метатег не учитывает, а Яндекс оставляет за собой право его использовать, поэтому большого влияния на поиск он не оказывает. Добавлять его необязательно.
Определяет автора содержимого:
<meta name="author" content="Хозяин Тони">
Рассмотрим пример использования этих метатегов на главной странице сайта Тони:
<html lang="ru">
<head>
<meta charset="utf-8">
<!-- метаэлемент, который описывает содержимое документа -->
<meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
<!-- метаэлемент, который описывает ключевые слова в документе -->
<meta name="keywords" content="карликовый пинчер, Тони, прогулки с собакой">
<!-- метаэлемент, который указывает имя автора документа -->
<meta name="author" content="Хозяин Тони">
<title>Сайт Тони</title>
</head>
<body>
<h1>Привет! Меня зовут Тони</h1>
</body>
</html>
В данном примере мы использовали три элемента <meta> с атрибутом name:
-
первый метаэлемент описывает содержимое документа: значением атрибута
nameмы указали, что это описание страницы (description), а сам текст — в атрибутеcontent. Это описание могут использовать поисковые системы для отображения результатов поиска; -
второй метаэлемент описывает ключевые слова (
keywords). Ключевые слова могут использоваться некоторыми поисковыми системами; - третий метаэлемент указывает имя автора документа (
author).
Грамотное размещение метаданных на каждой странице сайта делает его понятнее для поисковых систем и упрощает индексацию.
Атрибут http-equiv
Атрибут http-equiv имитирует заголовок HTTP-ответа: обычно такие сведения передаёт сервер вместе со
страницей, а метатег позволяет указать их в самом документе. Название заголовка указывается в атрибуте
http-equiv, а значение — в атрибуте content. Стандарт допускает лишь несколько значений этого
атрибута; рассмотрим два из них:
<html lang="ru">
<head>
<meta charset="utf-8">
<!-- через 15 секунд перейти по указанному адресу -->
<meta http-equiv="refresh" content="15; url=https://basicweb.ru/">
<!-- загружать ресурсы только по протоколу HTTPS -->
<meta http-equiv="content-security-policy" content="default-src https:">
<title>Пример использования атрибута http-equiv</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
В данном примере мы использовали два элемента <meta> с различными значениями атрибута
http-equiv:
-
первый метаэлемент указывает, что страница будет обновлена (значение
refresh) через 15 секунд и перейдёт по указанному адресу. Если адрес не указан, страница просто будет перезагружена; -
второй метаэлемент разрешает загрузку ресурсов (изображений, шрифтов, скриптов и так далее) только по протоколу
HTTPS. Значение
content-security-policy(политика безопасности содержимого) позволяет атрибутомcontentопределить правила загрузки ресурсов. Часть правил действует только в настоящем заголовке ответа сервера и в метатеге игнорируется.
Индексация страниц
Метатег с именем robots используется поисковыми системами при индексации страниц — добавлении их в
поисковую базу:
<meta name="robots" content="noindex, follow">
Доступные значения:
| Значение атрибута | Определение |
|---|---|
noindex |
Запрещает индексирование документа. |
nofollow |
Запрещает переход по ссылкам в документе. |
index |
Разрешает индексирование документа. |
follow |
Разрешает переход по ссылкам в документе. |
none |
То же, что noindex, nofollow. |
all |
То же, что index, follow. |
Индексирование и переход по ссылкам разрешены по умолчанию, поэтому метатег robots добавляют только туда,
где нужен запрет, например на страницу с результатами поиска по сайту. Поисковая система увидит метатег, только если ей
разрешено загрузить страницу. Метатег — просьба к поисковым роботам, а не защита: закрыть страницу от посторонних он
не может.
Настройка области просмотра
Область просмотра (англ. viewport) — видимая часть страницы в окне браузера. Она определяет, как веб-страница отображается на мобильном устройстве. Если область просмотра не задана, мобильный браузер считает ширину страницы равной стандартному значению для настольных сайтов (обычно 980 пикселей) и уменьшает страницу, чтобы она поместилась на экране, — текст становится мелким.
Чтобы мобильные браузеры не уменьшали страницы сайта, разместите в теге <head> метатег, который
сообщает браузеру, как обрабатывать размеры страницы и изменять её масштаб:
<meta name="viewport" content="width=device-width, initial-scale=1">
Этот метатег вы уже набирали в уроке «Создание первой HTML-страницы», но в учебных примерах следующих уроков мы его опускали. Теперь вернём его на все страницы сайта Тони и разберём подробно.
-
Атрибут
nameсо значениемviewportсообщает, что метатег задаёт размеры области просмотра, а атрибутcontentсодержит сами настройки через запятую. -
Значение
width=device-widthсообщает, что ширина страницы устанавливается в соответствии с шириной экрана устройства в аппаратно-независимых пикселях (англ. device-independent pixel, dip). Это позволяет странице располагать элементы с учётом размера экрана. -
Значение
initial-scale=1сообщает браузеру, что необходимо установить соответствие 1:1 между пикселями CSS и аппаратно-независимыми пикселями вне зависимости от ориентации устройства (альбомной или портретной).
Сайту Тони этот метатег тоже нужен, но сам по себе он не делает страницу адаптивной. Фреймы, изображения и поля формы с фиксированной шириной могут выходить за границы экрана. После добавления метатега проверьте все страницы на ширине 320 и 390 пикселей; горизонтальная прокрутка показывает, какие элементы ещё нужно адаптировать. Сами адаптивные страницы мы будем верстать в учебнике CSS.
Доступные значения:
| Значение атрибута | Определение |
|---|---|
width |
Определяет ширину области просмотра в пикселях (значение — положительное целое число или
device-width).
|
height |
Определяет высоту области просмотра в пикселях (значение — положительное целое число или
device-height). Используется редко.
|
initial-scale |
Определяет начальный масштаб страницы — соотношение между шириной устройства (device-width в
портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше
число, тем выше масштаб. Значение — положительное число от 0.1 до 10.
|
minimum-scale |
Определяет минимальный масштаб (он должен быть меньше или равен maximum-scale). Значение —
положительное число от 0.1 до 10.
|
maximum-scale |
Определяет максимальный масштаб (он должен быть больше или равен minimum-scale). Значение —
положительное число от 0.1 до 10.
|
user-scalable |
Определяет, может ли пользователь изменять масштаб страницы. Значение по умолчанию yes
(пользователь может увеличивать масштаб).
|
Как проверить метаданные
Метаданные не видны на странице, поэтому проверяют их в коде страницы и в инструментах разработчика. Действия описаны для Google Chrome.
-
Код страницы. Откройте страницу и выберите в контекстном меню «Просмотр кода страницы» (View page
source) или нажмите Ctrl + U (в macOS — Cmd + Option +
U). Проверка: в начале
<head>видныcharset,viewportиdescription. -
Вид на телефоне. Откройте инструменты разработчика клавишей F12 (в macOS — Cmd +
Option + I) и включите режим устройства сочетанием Ctrl + Shift +
M (в macOS — Cmd + Shift + M). Выберите вверху модель телефона.
Проверка: с метатегом
viewportтекст читается без увеличения; если временно удалить метатег и обновить страницу, она уменьшится.
Проверьте себя
Выберите ответ — объяснение появится сразу. Ответ можно менять.
}.tan{fill:var(--tony-tan,%23bf783f)}.inner{fill:var(--tony-ear,%23995b3c);stroke:none}.line{stroke:var(--tony-ink,%23191b20);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}%3c/style%3e%3cdefs%3e%3cfilter%20id='border'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%20color-interpolation-filters='sRGB'%3e%3cfeMorphology%20in='SourceAlpha'%20operator='dilate'%20radius='8'%20result='expanded'/%3e%3cfeFlood%20flood-color='%23fff'/%3e%3cfeComposite%20in2='expanded'%20operator='in'/%3e%3cfeMerge%3e%3cfeMergeNode/%3e%3cfeMergeNode%20in='SourceGraphic'/%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3cg%20class='line'%20filter='url(%23border)'%3e%3cg%20id='body'%3e%3cpath%20class='fur'%20d='M210%20267%20Q179%20296%20163%20354%20Q148%20391%20164%20429%20Q194%20448%20251%20448%20Q318%20451%20348%20427%20Q356%20386%20332%20341%20L298%20268Z'/%3e%3cpath%20fill='%23555157'%20stroke='none'%20d='M217%20280%20Q250%20299%20290%20280%20L307%20339%20Q293%20371%20255%20371%20Q221%20367%20205%20340Z'/%3e%3cpath%20class='tan'%20stroke='none'%20d='M184%20347%20Q214%20364%20242%20357%20L249%20381%20Q205%20391%20181%20368Z%20M263%20358%20Q296%20368%20322%20346%20L326%20371%20Q300%20391%20265%20382Z'/%3e%3cpath%20class='tan'%20d='M165%20404%20Q142%20414%20153%20436%20Q169%20449%20210%20439%20L216%20422Z'/%3e%3cpath%20class='tan'%20d='M326%20402%20Q352%20408%20356%20430%20Q347%20447%20306%20439%20L296%20423Z'/%3e%3c/g%3e%3cg%20id='paw-left'%3e%3cpath%20class='fur'%20d='M190%20368%20L194%20432%20Q179%20446%20191%20458%20Q216%20467%20238%20457%20Q249%20449%20233%20432%20L237%20383'/%3e%3cpath%20class='tan'%20d='M194%20412%20L195%20433%20Q180%20448%20193%20457%20Q216%20466%20237%20456%20Q249%20448%20232%20431%20L233%20413'/%3e%3cpath%20fill='none'%20stroke-width='3'%20d='M205%20449%20L205%20460%20M220%20449%20L221%20461'/%3e%3c/g%3e%3cg%20id='paw-right'%3e%3cpath%20class='fur'%20d='M277%20383%20L282%20433%20Q267%20446%20279%20458%20Q304%20467%20326%20457%20Q337%20449%20321%20432%20L320%20366'/%3e%3cpath%20class='tan'%20d='M280%20413%20L283%20433%20Q268%20448%20281%20457%20Q304%20466%20325%20456%20Q337%20448%20320%20431%20L319%20412'/%3e%3cpath%20fill='none'%20stroke-width='3'%20d='M293%20449%20L293%20461%20M307%20449%20L310%20461'/%3e%3c/g%3e%3cg%20id='head'%3e%3cg%20id='ears'%3e%3cpath%20class='fur'%20d='M185%20177%20Q166%20119%20175%2045%20Q203%2077%20211%20161Z%20M291%20160%20Q300%2090%20329%2039%20Q339%20115%20320%20179Z'/%3e%3cpath%20class='inner'%20d='M187%20145%20Q179%20112%20181%2072%20Q195%20101%20199%20151Z%20M305%20149%20Q312%20102%20323%2069%20Q328%20115%20317%20152Z'/%3e%3c/g%3e%3cpath%20class='fur'%20d='M179%20188%20Q181%20154%20218%20146%20Q252%20137%20288%20148%20Q321%20157%20326%20191%20L317%20237%20Q303%20258%20285%20277%20L272%20296%20Q251%20309%20230%20297%20L216%20278%20Q197%20264%20188%20239Z'/%3e%3cpath%20fill='%2341434a'%20stroke='none'%20d='M196%20169%20Q214%20149%20250%20150%20L235%20166Z'/%3e%3cg%20class='tan'%20stroke='none'%3e%3cellipse%20cx='212'%20cy='181'%20rx='10'%20ry='6'/%3e%3cellipse%20cx='291'%20cy='180'%20rx='10'%20ry='6'/%3e%3c/g%3e%3cg%20id='eyes'%3e%3cellipse%20fill='%2378523a'%20cx='210'%20cy='204'%20rx='13'%20ry='16'/%3e%3cellipse%20fill='%2313171c'%20stroke='none'%20cx='211'%20cy='203'%20rx='10'%20ry='14'/%3e%3ccircle%20fill='%23fffaf0'%20stroke='none'%20cx='206'%20cy='198'%20r='4'/%3e%3cellipse%20fill='%2378523a'%20cx='291'%20cy='203'%20rx='13'%20ry='16'/%3e%3cellipse%20fill='%2313171c'%20stroke='none'%20cx='292'%20cy='202'%20rx='10'%20ry='14'/%3e%3ccircle%20fill='%23fffaf0'%20stroke='none'%20cx='287'%20cy='197'%20r='4'/%3e%3c/g%3e%3cg%20id='muzzle'%3e%3cpath%20class='tan'%20d='M222%20231%20Q211%20246%20213%20270%20L221%20292%20Q250%20311%20279%20291%20Q291%20279%20288%20257%20L277%20232%20Q265%20243%20251%20242Z'%20stroke='none'/%3e%3cpath%20fill='%2334363b'%20stroke='none'%20d='M237%20211%20Q250%20205%20263%20211%20L274%20261%20Q249%20275%20226%20261Z'/%3e%3cpath%20fill='%2317191e'%20d='M229%20261%20Q251%20251%20273%20261%20L269%20277%20Q253%20290%20235%20277Z'/%3e%3cpath%20fill='none'%20stroke='%2368676b'%20stroke-width='3'%20d='M238%20262%20Q250%20259%20260%20262'/%3e%3cg%20id='expression-mouth'%3e%3cpath%20fill='%2317191e'%20stroke-width='3'%20d='M232%20287%20Q252%20294%20273%20286%20Q270%20308%20252%20309%20Q237%20307%20232%20287Z'/%3e%3cpath%20fill='%23d88b86'%20stroke='none'%20d='M243%20300%20Q253%20295%20263%20300%20L262%20308%20Q253%20316%20245%20309Z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Задание
Сайт Тони почти готов, и хозяин хочет, чтобы друзья находили его в поиске и удобно читали с телефона. Метаданные не
видны в редакторе, поэтому задание выполняется в VS Code в папке my-site:
-
В
<head>страницindex.html,pages/toys.html,pages/walks.htmlиpages/signup.htmlсразу после кодировки добавьте метатегviewportсо значениемwidth=device-width, initial-scale=1. -
Добавьте каждой из четырёх страниц метатег
descriptionсо своим описанием в одно предложение. - Откройте каждую страницу в Chrome и проверьте метаданные, как описано в разделе «Как проверить метаданные».
Ожидаемый результат: в коде каждой страницы видны кодировка, viewport и своё описание, а в режиме
устройства браузер использует ширину экрана вместо условной настольной ширины. Проверьте страницы
при ширине 320 и 390 пикселей: у элементов с фиксированными размерами пока возможна горизонтальная прокрутка.
Это задача адаптивной вёрстки, а не ошибка метатега. Страница pages/walks.html — самостоятельный
HTML-документ: проверьте её и внутри фрейма главной страницы, и открыв напрямую.
Если папки проекта нет под рукой, скачайте ZIP исходных файлов ниже: это результат предыдущего урока. Выполните задание в VS Code и проверьте открытые страницы. Кнопка «Показать решение» доступна сразу для сравнения файлов; затем снова скачайте ZIP. Внутри встроенного результата метаданные страницы не видны.
Файлы для задания
Условие задания
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Сайт Тони</title>
</head>
<body style="background-color: linen">
<header>
<!-- Меню сайта -->
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="pages/toys.html">Мои игрушки</a></li>
<li><a href="pages/signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1 id="top" style="color: saddlebrown; text-align: center">Привет! Меня зовут Тони</h1>
<p>Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
<p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
<p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
<ul>
<li><a href="#toy">Моя любимая игрушка</a></li>
<li><a href="#commands">Команды, которые я знаю</a></li>
<li><a href="#schedule">Мой режим дня</a></li>
<li><a href="#walks">Где я гуляю</a></li>
<li><a href="#song">Песня для прогулок</a></li>
</ul>
<section>
<h2 id="toy" class="section-title" style="color: #8B4513">Моя любимая игрушка</h2>
<p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
<figure>
<img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат "Удав"">
<figcaption style="color: dimgray">Я и мой канат «Удав»</figcaption>
</figure>
<p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
<p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
<hr>
<p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
</section>
<section>
<h2 style="color: #8B4513">Мой стишок</h2>
<p>
Я маленький, но смелый,<br>
Гуляю целый день,<br>
А вечером на кресле<br>
Сплю — и мне не лень.
</p>
</section>
<section>
<h2 id="commands" class="section-title" style="color: #8B4513">Команды, которые я знаю</h2>
<p>Хозяин научил меня командам на немецком:</p>
<dl>
<dt lang="de">Sitz!</dt>
<dd>сидеть</dd>
<dt lang="de">Platz!</dt>
<dd>лежать</dd>
<dt lang="de">Fuß!</dt>
<dd>рядом</dd>
</dl>
<details>
<summary>Почему команды на немецком?</summary>
<p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
</details>
</section>
<section>
<h2 id="schedule" style="color: #8B4513">Мой режим дня</h2>
<table>
<caption>Режим дня Тони</caption>
<thead>
<tr>
<th scope="col">Время</th>
<th scope="col">Будни</th>
<th scope="col">Выходные</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">07:00</th>
<td>Прогулка, 20 минут</td>
<td>Сплю</td>
</tr>
<tr>
<th scope="row">08:00</th>
<td colspan="2">Завтрак</td>
</tr>
<tr>
<th scope="row">13:00</th>
<td>Жду хозяина и сплю</td>
<td>Прогулка в парке, 1 час</td>
</tr>
<tr>
<th scope="row">19:00</th>
<td colspan="2">Ужин</td>
</tr>
<tr>
<th scope="row">21:00</th>
<td colspan="2">Вечерняя прогулка</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="progress" style="color: #8B4513">Мои успехи</h2>
<p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
<p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
</section>
<section>
<h2 id="walks" style="color: #8B4513">Где я гуляю</h2>
<p>Я люблю гулять в сквере у дома.</p>
<p>
<a href="pages/walks.html" target="walk">Маршрут</a> |
<a href="assets/tony.png" target="walk">Фото с прогулки</a>
</p>
<iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
<h3>Видео с прогулки</h3>
<p>Субтитры помогут, если вы смотрите видео без звука.</p>
<video width="180" height="320" poster="assets/walk.jpg" controls>
<source src="assets/walk.mp4" type="video/mp4">
<track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
<p><a href="assets/walk.mp4">Скачать видео</a></p>
</video>
<h3>Как я лаю</h3>
<p>Так я разговариваю с хозяином — у нас целый диалог!</p>
<audio controls>
<source src="assets/bark.mp3" type="audio/mpeg">
<p><a href="assets/bark.mp3">Скачать запись</a></p>
</audio>
</section>
<section>
<h2 id="song" style="color: #8B4513">Песня для прогулок</h2>
<p>Хозяин включает эту песню, когда мы выходим гулять.</p>
<iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
<p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
</section>
<section>
<h2 style="color: #8B4513">Моя любимая книга</h2>
<p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
<figure>
<blockquote>
<p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
</blockquote>
<figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
</figure>
</section>
<p><a href="#top">Наверх</a></p>
</main>
<footer style="background-color: hsl(30, 50%, 90%)">
<p style="text-align: center"><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/signup.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Запись на прогулку с Тони</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Запись на прогулку</h1>
<p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
<p><a href="../index.html#walks">Где мы гуляем</a></p>
<form>
<fieldset>
<legend>О вас</legend>
<p>
<label for="owner">Ваше имя</label>
<input type="text" id="owner" name="owner" autocomplete="name" required>
</p>
<p>
<label for="email">Электронная почта</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
</p>
</fieldset>
<fieldset>
<legend>Ваша собака</legend>
<p>
<label for="breed">Порода</label>
<input type="text" id="breed" name="breed" list="breeds">
<datalist id="breeds">
<option value="Карликовый пинчер"></option>
<option value="Такса"></option>
<option value="Йоркширский терьер"></option>
<option value="Беспородная"></option>
</datalist>
</p>
<p>
<label for="dogs">Сколько собак придёт</label>
<input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
</p>
</fieldset>
<fieldset>
<legend>Когда гулять</legend>
<p>
<label for="date">Дата</label>
<input type="date" id="date" name="date" required>
</p>
<label><input type="radio" name="time" value="morning" checked> Утром</label>
<label><input type="radio" name="time" value="evening"> Вечером</label>
</fieldset>
<fieldset>
<legend>Прогулка</legend>
<p>
<label for="leader">Ведёт прогулку</label>
<input type="text" id="leader" name="leader" value="Тони" readonly>
</p>
<p>
<label for="route">Маршрут</label>
<select id="route" name="route">
<optgroup label="В городе">
<option value="square">Сквер у дома</option>
<option value="pond" selected>Пруд с утками</option>
</optgroup>
<optgroup label="За городом">
<option value="forest">Лес</option>
<option value="river" disabled>Берег реки — закрыт до весны</option>
</optgroup>
</select>
</p>
<p>
<label for="wishes">Пожелания</label><br>
<textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
</p>
</fieldset>
<fieldset>
<legend>Что взять с собой</legend>
<label><input type="checkbox" name="take" value="ball"> Мячик</label>
<label><input type="checkbox" name="take" value="rope"> Канат</label>
</fieldset>
<p>
<button type="submit">Записаться на прогулку</button>
<button type="reset">Очистить форму</button>
</p>
</form>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/toys.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Игрушки Тони</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Мои игрушки</h1>
<ul>
<li>Канат с мячиком «Удав» — моя любимая игрушка</li>
<li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
<li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
</ul>
<img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
<h2>Как играть со мной в канат</h2>
<ol>
<li>Покажите мне канат.</li>
<li>Бросьте его подальше.</li>
<li>Подождите, пока я принесу его обратно.</li>
<li>Похвалите меня — и всё сначала!</li>
</ol>
<section>
<h2 id="album">Мой фотоальбом</h2>
<ul>
<li>
<figure>
<img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
<figcaption>Я в детстве</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
<figcaption>С плюшевой белкой</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
<figcaption>В худи для холодной погоды</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
<figcaption>Шлейка надета — идём гулять!</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
<figcaption>Смеюсь над шуткой хозяина</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
<figcaption>После прогулки</figcaption>
</figure>
</li>
</ul>
</section>
<p><a href="../index.html#commands">Какие команды я знаю</a></p>
<p><a href="../index.html">Вернуться на главную</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/walks.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Где гуляет Тони</title>
</head>
<body>
<h1>Мой маршрут</h1>
<ol>
<li>Сквер у дома.</li>
<li>Пруд с утками.</li>
<li>Поляна для игры с канатом.</li>
</ol>
</body>
</html>
Тони готовит пример…Решение: метаданные главной страницы
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
<title>Сайт Тони</title>
</head>
Для страницы игрушек подойдёт описание «Любимые игрушки Тони и правила игры в канат», для страницы записи — «Запишитесь на совместную прогулку с карликовым пинчером Тони», для маршрута — «Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом». Ваши формулировки могут быть другими: важно, чтобы описание рассказывало о содержании именно этой страницы.
Метаданные готовы. В следующем уроке проверим все страницы сайта, исправим ошибки и подготовим проект к изучению CSS.