belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

3.4. Тег <meta>

Со служебным тегом <meta> мы уже кратко знакомились. Он формирует пустой элемент разметки 'meta', который используется для хранения метаданных.

Для сообщения браузеру кодировки документа применяется атрибут charset. О кодировках мы будем говорить отдельно, пока следует запомнить, что если кодировку не задать, то документ может быть не правильно отображен. Поэтому в процессе верстки нужно всегда использовать элемент 'meta' и указывать в нем атрибут charset="utf-8". В случае необходимости, разрешается использовать более одного элемента 'meta', но атрибут charset должен задаваться только один раз в одном из элементов 'meta'.

Имеются у элемента 'meta' и другие атрибуты. Так атрибут name задает имя (регистронезависимое) для пары 'имя=значение'. Используется совместно с атрибутом content, который, соответственно, устанавливает значение для данной пары. Разрешается указывать в одном атрибуте content сразу несколько значений, перечисленных через запятую или точку с запятой. Короче, при помощи этих двух атрибутов задается пара 'имя=значение', которая определяется в следующем формате: <meta name="имя" content="значение">. Перечислим некоторые из имен, задаваемых атрибутом name, и соответствующих им значений, указываемых в атрибуте content:

Код с использованием элементов 'meta' и его атрибутов показан в примере 3.4.1

<!DOCTYPE html>
<html>
<head>
  <!-- Сообщаем браузеру кодировку документа -->
  <meta charset="utf-8">	
  
  <!-- Указываем автора страницы -->
  <meta name="author" content="Romanovsky Peter">
  <!-- Описываем страницу -->
  <meta name="description" content="Атрибуты тега meta">
  <!-- Разрешаем индексировать страницу постоянно -->
  <meta name="document-state" content="dynamic">
  <!-- Разрешаем переиндексировать раз в 2 недели -->
  <meta name="revisit" content="14">
   <!-- Разрешаем роботам посещать и ходить по ссылкам страницы -->
  <meta name="robots" content="index, follow">
 
  <!-- Сообщаем браузеру, что он имеет дело с html-страницей -->
  <meta http-equiv="Content-Type" content="text/html">
  
  <title>Элементы 'meta' и его атрибуты</title>
</head>
<body>
  Тут расположена выводимая информация.
</body>
</html>

Пример 3.4.1 Использование элемента 'meta' и его атрибутов

Отдельно хотелось бы обратить внимание на значение "viewport" атрибута name, которое указывает браузеру мобильного устройства, как обрабатывать размеры страницы и изменять ее масштаб, а также соответствующий ряд значений атрибута content (см. пример 3.4.2):

Отметим, что нами не были перечислены значения minimum-scale и maximum-scale атрибута content, т.к. их использование нежелательно.

<!DOCTYPE html>
<html>
<head>
<!-- Сообщаем браузеру кодировку документа -->
<meta charset="utf-8">

<!-- 1. Ширина области просмотра подстраивается -->
<!-- под ширину экрана мобильного устройства автоматически  -->
<!-- 2. Пользователю разрешается масштабировать страницу (user-scalable=yes) -->
<!-- Данный вариант в большинстве случаев наиболее оптимальный -->
<meta name="viewport" content="width=device-width, user-scalable=yes">

<title>Элементы 'meta' и его атрибуты</title>
</head>
<body>
  Тут расположена выводимая информация.
</body>
</html>

Пример 3.4.2 Использование name="viewport" тега meta

Как видно из примера, значения атрибута content обычно перечисляются через запятую, а не записываются в отдельных элементах 'meta'.

В большинстве случаев для сайтов, которые специально не делались для мобильных устройств, следует применять конструкцию <meta name="viewport" content="width=device-width, user-scalable=yes">. В результате браузеры мобильных устройств самостоятельно выберут нужный масштаб и постараются вместить страницу в размеры окна браузера.

Атрибут content используется в паре не только с атрибутом name, но и с атрибутом http-equiv, который применяется для конвертирования метатега в заголовок HTTP. Заголовки представляют собой текстовые строки, которые используются при обмене сообщениями браузера с сервером и состоят из пар 'имя: значение' (разделяются двоеточием). Сам атрибут http-equiv задает имя пары, аналогично атрибуту name, а атрибут content, соответственно, значение пары: <meta http-equiv="имя http-заголовка" content="значение">. Однако в одном элементе 'meta' допускается использовать только один из атрибутов: или name или http-equiv. Браузеры преобразовывают значение атрибута http-equiv, заданное с помощью атрибута content, в формат заголовка HTTP-ответа и обрабатывают их так, как будто они прибыли непосредственно от сервера. Подробно рассматривать HTTP-заголовки мы будем в процессе изучения HTTP-протокола, JavaScript, PHP, когда будем организовывать взаимодействие браузера пользователя с сервером, выдающего ему веб-страницы. Пока же будем иметь в виду, что есть такой атрибут http-equiv элемента 'meta', в котором такие заголовки используются.

Из всего сказанного выше первым делом нужно запомнить, что при верстке страниц важно указывать кодировку, задавать параметр 'viewport', ссылки на внешние таблицы стилей (это понадобится нам уже при изучениии CSS) и заголовок документа. Еще раз напомним структуру кода перечисленных элементов:

Контрольные вопросы и задания

  1. Перечислите атрибуты элемента 'meta' и значения атрибута content для атрибута name.
  2. Напишите код трех служебных элементов, которые мы будем использовать чаще всего.

Словарь новых английских слов

target ['ta:git] – цель, назначение.
base [beɪs] – база, основа.
main [meɪn] – основной, главный.
link [lɪŋk] – звено, связь, связывать.
relation [ri'lei∫ən] – отношение, взаимосвязь.
media [ˈmiːdɪə] – носители, каналы, среды.
all [ɔːl] – все.
handheld [ˈhandhɛld] – портативный, переносной.
screen [skriːn] – экран.
size [saɪz] – размер, величина, объем.
content [kənˈtɛnt] – содержимое, содержание, суть.
author [ˈɔːθə] – автор, инициатор.
speech [spiːtʃ] – речь.
static [ˈstatɪk] – статичный, неподвижный,
стационарный.
state [steɪt] – состояние.
dynamic [dʌɪˈnamɪk] – динамичный, активный,
изменяющийся.
follow [ˈfɒləʊ] – следовать за.
revisit [riːˈvɪzɪt] – посетить вновь.
sheet [ʃiːt] – лист бумаги.
title [ˈtʌɪt(ə)l] – заглавие, название.
style [stʌɪl] – стиль, манера.
source [sɔːs] – источник.
asynchronously [ə'siɳkrənəsli] – асинхронно.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх