Использование метаданных (HTTP-EQUIV, NAME, REL, REV, BASE) при создании HTML документов


Оглавление (нажмите, чтобы открыть):

HTML Мета-теги

Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, между тегами и , которые никак не отображаются браузером (за исключением содержимого тега ). Мета-теги могут содержать описание html-страницы, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, а также прочую служебную информацию, не предназначенную для посетителей. Мета-теги для сайта играют очень важную роль. Их добавление в html-документ могут существенно помочь сайту в его жизни.

Всегда применяйте только те мета-теги, которые реально нужны для работы веб-сайта. Не следует загромождать область лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям.

Функции мета-тегов

На данный момент не существует их четкой стандартизации, однако функции мета-тегов достаточно разнообразны. Можно выделить несколько основных направлений использования мета-тегов:

  • мета-теги могут идентифицировать авторство веб-документа, его адрес, частоту его обновлений;
  • мета-теги используются поисковыми роботами для индексации и создания заголовков гипертекстовых документов;
  • мета-теги влияют на режим отображения веб-страниц.

Группы метатегов

Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также — формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.

Атрибут Описание
Name Имя метатега, также косвенно устанавливает его предназначение. Примеры: include, keywords, description, author, revised, generator и др.
content Устанавливает значение атрибута, заданного с помощью name или http-equiv.
scheme (устарел) Указывает полезную информацию о схеме или название самой схемы, которая должна быть использована для интерпретации значения свойства (то есть значения атрибута «content»). Не применяется в HTML5.
charset Новый атрибут, показывает кодировку документа в HTML5. Пример:
http-equiv Формирует заголовок страницы и определяет его обработку. Как правило, управляет действиями браузеров и используется для формирования информации, выдаваемой обычными заголовками. Например HTTP-EQUIV может использоваться для управления кэшированием, обновлением страницы, автоматической загрузки другой страницы.

Группа значений атрибута NAME

«keywords» (ключевые слова)

Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.

Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

HTML-код с «keywords» :

«description» (описание страницы)

Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу. При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description» :

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author» :

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

  • index — страница должна быть проиндексирована;
  • noindex — страница не индексируется;
  • follow — гиперссылки на странице учитываются;
  • nofollow — гиперссылки на странице не учитываются
  • all — включает значения index и follow, включен по умолчанию;
  • none — включает значения noindex и nofollow.

HTML-код с «robots» :

Группа значений атрибута HTTP-EQUIV

«Content-Type»

Content-Type определяет тип документа и его кодировку.

HTML-код с «Content-Type» :

В HTML5 указание кодировки упрощено:

«refresh»

Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

HTML-код с «refresh» :

Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся.

«Content-Language»

HTML-код с «content-language» :

В HTML5 указание языка упрощено:

В этом уроке перечислены не все метатеги, которые вы можете встретить при изучении веб-ремесла. Остальные специфичны и вы познакомитесь с ними в дальнейшем при изучении наших уроков. Из всех же вышеперечисленных к использованию на каждой странице вашего сайта рекомендуются метатеги и их атрибуты приведенные в следующем примере:

Итоговое задание [10-14]

На этом уроке вы познакомились с наиболее важными метатегами основным предназначением которых является предоставление структурированных метаданных о веб-странице.

Пришло время повторить изученное и выполнить четыре несложных задания:

Ключевые слова

С помощью одинарного тега задайте ключевые слова: «HTML,CSS,JavaScript» для текущей веб-страницы.

Индексация веб-страницы

С помощью одинарного тега разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.

Автоматическая перезагрузка страницы

С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.

Использование метаданных (HTTP-EQUIV, NAME, REL, REV, BASE) при создании HTML документов

META-таги имеют два возможных атрибута

META-таги должны находиться в заголовке HTML-документа между и (особенно это важно для документов, использующих фреймы).

META-таги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Таги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки. HTTP-заголовки описываются в RFC1945 (HTTP/1.0) и RFC2068 (HTTP/1.1).

HTTP-заголовки могут быть сгенерированы с помощью CGI-скриптов. Это позволяют сделать серверы Apache и CERN. В других серверах могут использоваться другие механизмы генерирования заголовков. Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тагов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тагов.

Источники: HTTP/1.1 (RFC2068)

Дата устаревания. Управление кэшированием в HTTP/1.0. В Netscape Navigator это выглядит следующим образом: если указанная дата прошла, то очередной запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением «0» интерпретируется как «сейчас». Такое значение заставляет броузер каждый раз при запросе проверять — изменялся ли этот документ. Это, кстати относится и к прокси-агентам. Поисковые роботы могут либо совсем не индексировать такой документ, либо постоянно «обнюхивать» его.

Дата должна быть задана в формате, описываемом в RFC850,

что эквивалентно HTTP-заголовку

Expires: Wed, 26 Feb 1997 08:21:57 GMT

Контроль кэширования для HTTP/1.0. Значением должно быть «no-cache». Очень полезный контейнер, я всегда использую его при выдаче результатов работы любого скрипта.

Источники: HTTP/1.0 (RFC1045)

Указание типа документа. Может быть расширено указанием кодировки страницы (charset). Если же указывать charset в содержании META-тага, то Netscape Navigator выводит такую страницу уже в заданном charset. Однако будьте аккуратны, если текст страницы в кодировке Windows, а значение charset=KOI8-r, то никакими силами пользователь не сможет поменять encoding, чтобы увидеть нормальные слова!

Указание языка документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого броузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

что эквивалентно HTTP-заголовку

Язык описывается парой значений (язык-диалект). В примере: Английский-Великобритания

В недавно вышедшей спецификации HTML 4.0 появилась другая возможность явного указания языка —

Определение задержки в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность — автоматическая загрузка другого документа.

что эквивалентно HTTP-заголовку

Refresh: 3; URL=https://www.name.com/page.html

В Netscape Navigator это дает такой же эффект, что и нажатие на кнопку Reload.


Источники: Jahn Rentmeister

Определяет окно текущей страницы; может быть использован для прекращения появления новых окон броузера при применении фреймовых структур. Действует для многих (но не для всех) броузеров.

что эквивалентно HTTP-заголовку

Определяет имя альтернативного кэша для Netscape Navigator

Устанавливает cookie броузера.

Platform-Independant Content rating Scheme. Обычно используется для определения рейтинга «взрослости» (adult) содержания (sex,violence, . ):-)) однако это довольно гибкая схема и может использоваться для других целей.

Определяет действия кэша по отношению к данному документу. Возможные значения:

  • Public — документ кэшируется в доступных для всех кэшах
  • Private — только в частном кэше
  • no-cache — не может быть кэширован
  • no-store — может быть кэширован, но не сохраняется

Определяет доступные альтернативы для указанных в CONTENT полей HTTP-заголовка.

что эквивалентно HTTP-заголовку

Lotus-редакторы генерируют свои собственные поля Bulletin-Date и Bulletin-Text атрибуты. Bulletin-Text содержит описание документа

Атрибут NAME

META-таги с атрибутом NAME используются в случаях, когда поля не соотносятся с HTTP-заголовками. Иногда ясность теряется: некоторые агенты могут интерпретировать таг «Keywords» описанный как NAME, другие — как HTTP-EQUIV

Управление индексацией страницы для поисковых роботов.

Возможные значения:

  • ALL
  • NONE
  • INDEX
  • NOINDEX
  • FOLLOW
  • NOFOLLOW

Источники: Spidering, Altavista, Infoseek

Краткая аннотация содержания документа. Используется поисковыми системами для описания документа. Этот таг сильно полезен в случаях, когда в документе мало текста, когда это управляющий фреймами файл (frameset) или в начале документа используются скрипты. Длина текста до 100 символов.

Источники: Altavista, Infoseek

Используется поисковыми системами для индексирования документа. Обычно здесь указываются синонимы к словам в заголовке (title) или альтернативный заголовок. Длина списка до 1000 символов. Не допускается использование одного и того же ключевого слова более 7 раз, поисковые системы просто будут игнорировать это слово.

Управление индексацией страницы для поисковых роботов. Определяет частоту индексации — или один раз индексировать, или реиндексировать документ регулярно.

Возможные значения:

  • Static
  • Dynamic

Управление индексацией страницы для поисковых роботов. Определяет частоту индексации — или один раз индексировать, или реиндексировать документ регулярно.

Источники: HTML редакторы

Обычно имя автора, формат произвольный.

Источники: HTML редакторы

Обычно название и версия редактора, с помощью которого создана эта страница. Может быть использована для определения доли рынка, занимаемого тем или иным продуктом.

Источники: HTML редакторы

Обычно описание авторских прав на документ в произвольном формате

Возможные значения

  • global
  • local
  • iu (internal use)

Текущее состояние данного файла. Важен для поисковых систем, т.е. если его значение document, то поисковая система приступает к его индексированию.

Прочие

  • Classification
  • Formatter
  • Site-languages
  • Version
  • Template
  • Operator
  • Rating
  • Creation
  • Host
  • Document
  • Subject
  • Build
  • Random text ( )

Помимо перечисленных более или менее стандартных тагов существует еще множество других специализированных, например, для конкретной поисковой машины тагов.

Таг LINK

Таг LINK предоставляет документу независимый от среды метод определения отношения данного документа к другим документам и ресурсам Сети. Используется с аргументами REL и REV. С помощью тага LINK можно:

  • создавать в документе специальные навигационные кнопки или меню
  • управлять процессом отображения набора HTML файлов в печатные документы
  • привязывать такие ассоциированные ресурсы, как таблицы стилей и скрипты
  • предоставлять альтернативные формы для данного документа

где https://www.name.com/help.html — страница помощи по данному документу.

Атрибуты REL и REV могут также использоваться с тагом A. Таги LINK могут использоваться только в заголовке документа (head)

HTML 3.2 REL-таги

top, contents, index, glossary, copyright, next, previous, search

Некоторые из рекомендованных типов взаимосвязей: rel=top Данная связь указывает на вершину в некой иерархической структуре, например на первую, либо титульную страницу в неком наборе документов. rel=contents Данная связь указывает на некий файл, где приводится оглавление к данному документу. rel=index Данная связь указывает на другой документ, который можно использовать в целях индексного поиска по текущему документу. rel=glossary Данная связь указывает на некий документ, где содержится глоссарий терминов, относящихся к текущему документу. rel=copyright Данная связь ссылается на текст, где указаны авторские права на данный документ. rel=next Данная связь указывает на следующий документ в неком заранее предопределенном маршруте просмотра. Например, она может использоваться для упреждающей автоматической загрузки браузером следующей страницы. rel=previous Данная связь ссылается на предыдущий документ в неком предопределенном маршруте просмотра. rel=help Данная связь указывает на документ, предлагающий некую помощь, например это может быть текст, дающий более развернутое описание и предлагающий ссылки на другие документы по этой теме. Назначение этой связи — оказание помощи тем читателям, кто потерял свой путь в Web. rel=search Данная ссылка ведет к поисковой странице, контролирующей некий набор страниц, связанных общей темой.

Многие системы изобретают свои дополнительные значения аргументов REL и REV

Этот таг содержит URL документа-шаблона. Действие всех метаданных из документа-шаблона будут распространены на документ с тагом Schema (так работает Dublin Core).

home, bookmark, tickertape, vmail, icon, prefetch, keyn, fastxx

AOLpress использует несколько дополнительных, по сравнению с HTML 3.2, тагов

Home, ToC, Index, Glossary, Copyright, Up, Next, Previous, Help, Bookmark, First, Last

Используется в конструкции LINK для индикации обратного соотношения документов.

где текущая страница является страницей помощи для документа https://www.name.com/index.html

Использование
в случае использования Lynx вызовет автоматическую отсылку почты по адресу document-owner.

Этот таг определяет для данного документа базовый адрес URL, который затем будет использоваться для переопределения относительных адресов. Таг BASE полезен, если документ может быть скопирован в другое место или запрошен по другому пути с использованием символической ссылки, или редиректа с imagemap, и т.д.

Метаданные

МЕТА — это наиболее популярный элемент разметки заголовка, более рас-пространен только элемент TITLE. Такое положение дел объясняется на-значением данного элемента разметки. МЕТА содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа.

Впервые контейнер МЕТА был задействован при принудительной перезагрузке документа браузером через заголовок HTTP-сообщения. В заголовке HTTP-сообщения можно указать оператор refresh. Время, заданное как параметр этого оператора, определяет интервал в секундах, после которого браузер загружает документ, определенный атрибутом URL данного оператора. Впервые этот механизм был реализован на сервере CERN, но наибольшую популярность приобрел при использовании сервера WN (Web-сервер, который был разработан для платформы Unix (Linux).

В контейнере МЕТА подобный механизм реализуется следующим образом:

В данном случае через одну секунду после загрузки документа браузер должен инициировать загрузку страницы refresh.html.

Используя этот механизм, можно построить автоматически переза-гружаемую последовательность страниц. Для этого в заголовке каждой страницы из данной последовательности следует разместить соответствующий контейнер МЕТА.

Заглавная буква «X» в слове «refreshX.html» — это цифра номера кадра. На странице нулевого кадра в этом месте следует указать на первый кадр (refreshl.html), на странице первого кадра — на второй (refresh2.html).

В Windows 95 и Windows NT 4.0 с поддержкой таблиц UNICODE по-явилась возможность указывать тип кодировки документа — CHARSET. К сожалению, на многих Unix-платформах этот механизм не работает, что часто приводит к ошибкам. Скептическое отношение поклонников Unix к этой возможности ничем не подкреплено, так как основная масса пользователей российской части Internet просматривает документы World Wide Web в Windows. Для перекодировки на стороне в заголовок документ необходимо включить МЕТА-тэг следующего вида:

Приведенный выше пример показывает, как используются операторы заголовка HTTP-сообщения. Однако здесь тоже следует быть осторожным. Большинство российских Web-узлов используют в качестве HTTP-сервера Russian Apache. Эта модификация сервера поддерживает перекодировку документов «на лету» для правильного отображения на стороне клиента. Russian Apache сам вставляет в HTTP-заголовок (не путать с HEAD) директиву Content-type. Если в документе будет МЕТА-элемент с указанием типа кодировки, a Apache перекодировал содержание, то возможно несоответствие между указанным в МЕТА типом кодировки и реальной кодировкой содержания документа.

Кроме Content-type, можно указать и другие операторы. Например, запретить кэширование документа. Необходимость в этом возникает при частом обновлении документа или наличии в нем изменяющихся SSI-вставок. Для запрета кэширования достаточно вставить в заголовок METА — тэг вида:

Pragma — это наследие HTTP 1.0. В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператор Cache-Control. Для получения такого же эффекта, как в случае с Pragma, и в заголовке HTML-документа достаточно указать:

Новый механизм управления кэшированием и хранением документа нa стороне клиента гораздо более гибок, чем в HTTP 1.0. Например, можно запретить хранение документа после пересылки:

Точно так же можно задать время последней модификации (Last-Modified) или дату истечения актуальности документа (Expire).

С появлением роботов поисковых машин на МЕТА-тэг была возложена еще одна функция — описание поискового образа документа. Наиболее последовательно это было впервые реализовано в Webcrawler. До этого в качестве поискового образа документа использовался либо весь список слов документа, либо слова первого абзаца.

Собственно, для описания документа используется два МЕТА-тэга. Один определяет список ключевых слов, а второй — реферат (краткое содержание документа), который отображается в качестве пояснения к ссылке на документ в отчете поисковой машины о выполненном запросе. Контейнер TITLE здесь также используется в качестве названия документа.

Пример:

Создание Web – Страниц


При индексировании такого документа содержимое контейнера TITLE и атрибутов CONTENT контейнеров МЕТА после фильтрации попадет в индекс поисковой машины и может быть использовано для составления запросов. Процесс фильтрации отбракует так называемые stop-слова и общие слова. Они не попадут в индекс поисковой машины. В частности, будут отбракованы предлоги или, если речь идет о тематическом поисковом индексе, например по технологиям World Wide Web, то в него не попадут: web, Web-технология и т.п.

МЕТА — тэгом пользуются и программы подготовки документов. Они размещают в нем свой идентификатор. В общем случае контейнер МЕТА выглядит следующим образом:

Практика показывает, что при индексировании можно указывать одновременно и атрибут NAME, и атрибут HTTP-EQUIV с одинаковыми значениями. Это связано с тем, что одни роботы индексирования анализирует содержание МЕТА — элемента по атрибуту NAME, а другие — по атрибуту HTTP-EQUIV.

Фреймы

Фреймы — достаточно мощный механизм представления информации на Web-страницах. С помощью фреймов экран разделяется на несколько прокручивающихся областей, в каждой из которых отображается содержимое

отдельной страницы и даже отдельного Web-узла. Каждый фрейм, может иметь следующие свойства:

— Каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов.

— Каждый фрейм имеет собственное имя (параметр NAME), позволяющее переходить к нему из другого фрейма.

— Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра).

Данные свойства фреймов позволяют создавать продвинутые интерфейсные решения, такие как:

— Размещение статической информации, которую автор считает необходимым постоянно показывать пользователю, в одном статическом фрейме. Это может быть графический логотип фирмы, авторское право, набор управляющих кнопок.

— Помещение в статическом фрейме оглавления всех или части Web-документов, содержащихся на Web-сервере, что позволяет пользователю быстро находить интересующую его информацию.

— Создание окна результатов запросов, когда в одном фрейме находится собственно запрос, а в другом результаты запроса.

— Создание формы типа «мастер-деталь» для Web-приложений, обслуживающих базы данных.

Формат документа, использующего фреймы, внешне очень напоминает формат обычного документа, только вместо тэга BODY используется контейнер FRAMESET, содержащий описание внутренних HTML-документов, содержащий собственно информацию, размещаемую во фреймах/5/.

Однако, фрейм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно. Он описывает только фреймы, которые будут содержать информацию (кроме случая двойного документа, который мы рассмотрим позже).

Общий синтаксис фреймов:

Общий контейнер FRAMESET описывает все фреймы, на которые делится экран. Можно разделить экран на несколько вертикальных или горизонтальных фреймов. Внутри контейнера могут находиться только тэг , вложенные контейнеры и , который

позволяет строить двойные документы для браузеров, поддерживающих и не поддерживающих фреймы.

Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS.

ROWS=»список определений горизонтальных подокон». Данный тэг содержит описания некоторого количества подокон, разделенные запятыми. Каждое описание представляет собой числовое значение размера подокна в пикселях, процентах от всего размера окна или связанное масштабное значение. Количество подокон определяется количеством значений в списке. Общая сумма высот подокон должна составлять высоту всего окна (в любых измеряемых величинах). Отсутствие атрибута ROWS определяет один фрейм, величиной во все окно браузера.

COLS=»список определений вертикальных подокон». То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали.

В качестве списка определений могут выступать:

1) Простое числовое значение определяет фиксированный размер подокна в пикселях. Это не самый лучший способ определения размера подокна, т.к. различные браузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если все же используется данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате точно получили 100 % -ное заполнение окна браузера.

2) Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон меньше или превышает 100, то размеры всех фреймов пропорционально увеличиваются или уменьшаются до суммы 100 %.

3) Число со звездочкой. Вообще говоря, числовое значение в данном описании является необязательным. Символ «*» указывает на то, что все оставшееся место будет принадлежать данному фрейму. Если указывается два или более фрейма с описанием «*», или «*,*» то оставшееся пространство делится поровну между этими фреймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрейма (во сколько раз он будет больше аналогично описанного чистой звездочкой). Описание «3*,*,*», говорит, что будет создано три фрейма с размерами 3/5 свободного пространства для первого фрейма и по 1/5 для двух других.

Примеры:

— описывает три фрейма, два по 50 точек справа и слева, и один внутри этих полосок.

— описывает три фрейма, первый из которых занимает 20 % площади сверху экрана, второй 3/4 оставшегося от первого фрейма места (60 % всей площади окна), а последний 1/4 (20 % всей площади окна).

— аналогично предыдущему примеру.

Тэги могут быть вложенными, т.е. например:

Тэг FRAME описывает каждый фрейм в отдельности. Рассмотрим более детально каждый компонент.

Где SRC=»URL» — описывает URL документа, который будет отображен внутри данного фрейма. Если он отсутствует, то будет отображен пустой фрейм. В качестве URL допустимо использование не только HTML-, но и GIF-или JPEG-файла.

NAME=»frame_name» — описывает имя фрейма. Имя фрейма может быть использовано для определения действия с данным фреймом из другого HTML-документа или фрейма (как правило, из соседнего фрейма этого же документа). Имя обязательно должно начинаться с символа. Содержимое поименованных фреймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.

MARGINW — используются, если автор документа хочет указать величину вертикальных или горизонтальных разделительных полос между фреймами сбоку. Значения n1 и n2 указываются в пикселах и не могут быть меньше единицы.

SCROLLING=»yes | no | auto» — позволяет задавать наличие полос прокрутки у фрейма. Параметр yes указывает на обязательное присутствие у фрейма полос прокрутки, параметр no — на отсутствие, auto — определяет наличие полос прокрутки только при их необходимости (значение по умолчанию).

NORESIZE — отменяет возможность изменить при помощи мыши размер фрейма так же, как и размер окна Windows. Если у одного фрейма установлен атрибут NORESIZE, то у соседних фреймов тоже не может быть изменен размер со стороны данного.

BORDER — управляет толщиной рамки.

BORDERCOLOR — задает цвет рамки.

FRAMEBORDER=no — отключает отображение рамки.

NOFRAMES используется в случае, если создается документ, который может просматриваться браузерами, как поддерживающими, так и не поддерживающими фреймы. Данный тэг помещается внутри контейнера FRAMESET, а все, что находится внутри тэгов и игнорируется браузерами, поддерживающими фреймы.

Пример:Рассмотрим реализацию фреймов для подобного разбиения окна:

HTML5

A vocabulary and associated APIs for HTML and XHTML

W3C Recommendation 28 October 2014

4.2 Document metadata

4.2.1 The element

The head element represents a collection of metadata for the Document .

The collection of metadata in a head element can be large or small. Here is an example of a very short one:

Here is an example of a longer one:

The title element is a required child in most situations, but when a higher-level protocol provides title information, e.g. in the Subject line of an e-mail when HTML is used as an e-mail authoring format, the title element can be omitted.

4.2.2 The element

The title element represents the document’s title or name. Authors should use titles that identify their documents even when they are used out of context, for example in a user’s history or bookmarks, or in search results. The document’s title is often different from its first heading, since the first heading does not have to stand alone when taken out of context.

There must be no more than one title element per document.

If it’s reasonable for the Document to have no title, then the title element is probably not required. See the head element’s content model for a description of when the element is required.

Returns the contents of the element, ignoring child nodes that aren’t Text nodes.

Can be set, to replace the element’s children with the given value.

The IDL attribute must return a concatenation of the contents of all the Text nodes that are children of the title element (ignoring any other nodes such as comments or elements), in tree order. On setting, it must act the same way as the textContent IDL attribute.

Here are some examples of appropriate titles, contrasted with the top-level headings that might be used on those same pages.

The next page might be a part of the same site. Note how the title describes the subject matter unambiguously, while the first heading assumes the reader knows what the context is and therefore won’t wonder if the dances are Salsa or Waltz:

The string to use as the document’s title is given by the document.title IDL attribute.

User agents should use the document’s title when referring to the document in their user interface. When the contents of a title element are used in this way, the directionality of that title element should be used to set the directionality of the document’s title in the user interface.

4.2.3 The element

The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information.

There must be no more than one base element per document.

A base element must have either an href attribute, a target attribute, or both.

The content attribute, if specified, must contain a valid URL potentially surrounded by spaces.

A base element, if it has an href attribute, must come before any other elements in the tree that have attributes defined as taking URLs , except the html element (its manifest attribute isn’t affected by base elements).

If there are multiple base elements with href attributes, all but the first are ignored.

The attribute, if specified, must contain a valid browsing context name or keyword, which specifies which browsing context is to be used as the default when hyperlinks and forms in the Document cause navigation.

A base element, if it has a target attribute, must come before any elements in the tree that represent hyperlinks.


If there are multiple base elements with target attributes, all but the first are ignored.

A base element that is the first base element with an href content attribute in a particular Document has a . The frozen base URL must be set, synchronously, whenever any of the following situations occur:

  • The base element becomes the first base element in tree order with an href content attribute in its Document .
  • The base element is the first base element in tree order with an href content attribute in its Document , and its href content attribute is changed.

To , resolve the value of the element’s href content attribute relative to the Document ‘s fallback base URL; if this is successful, set the frozen base URL to the resulting absolute URL, otherwise, set the frozen base URL to the fallback base URL.

The IDL attribute, on getting, must return the result of running the following algorithm:

If the base element has no href content attribute, then return the document base URL and abort these steps.

Let fallback base url be the Document ‘s fallback base URL.

Let url be the value of the href attribute of the base element.

Resolve url relative to fallback base url (thus, the basehref attribute isn’t affected by xml:base attributes or base elements).

If the previous step was successful, return the resulting absolute URL and abort these steps.

Otherwise, return the empty string.

The href >href content attribute to the given new value.

The IDL attribute must reflect the content attribute of the same name.

In this example, a base element is used to set the document base URL:

The link in the above example would be a link to » https://www.example.com/news/archives.html «.

4.2.4 The element

The link element allows authors to link their document to other resources.

The destination of the link(s) is given by the attribute, which must be present and must contain a val >If the href attribute is absent, then the element does not define a link.

A link element must have a rel attribute.

If the rel attribute is used, the element is restricted to the head element.

The types of link indicated (the relationships) are given by the value of the attribute, which, if present, must have a value that is a set of space-separated tokens. The allowed keywords and their meanings are defined in a later section. If the rel attribute is absent, has no keywords, or if none of the keywords used are allowed according to the definitions in this specification, then the element does not create any links.

Two categories of links can be created using the link element: Links to external resources and hyperlinks. The link types section defines whether a particular link type is an external resource or a hyperlink. One link element can create multiple links (of which some might be external resource links and some might be hyperlinks); exactly which and how many links are created depends on the keywords given in the rel attribute. User agents must process the links on a per-link basis, not a per-element basis.

Each link created for a link element is handled separately. For instance, if there are two link elements with rel=»stylesheet» , they each count as a separate external resource, and each is affected by its own attributes independently. Similarly, if a single link element has a rel attribute with the value next stylesheet , it creates both a hyperlink (for the next keyword) and an external resource link (for the stylesheet keyword), and they are affected by other attributes (such as media or title ) differently.

For example, the following link element creates two hyperlinks (to the same page):

The two links created by this element are one whose semantic is that the target page has information about the current page’s author, and one whose semantic is that the target page has information regarding the license under which the current page is provided.

The attribute is a CORS settings attribute. It is intended for use with external resource links.

The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type. Some of the attributes control whether or not the external resource is to be applied (as defined below).

For external resources that are represented in the DOM (for example, style sheets), the DOM representation must be made available (modulo cross-origin restrictions) even if the resource is not applied. To , the user agent must run the following steps:

If the href attribute’s value is the empty string, then abort these steps.

Resolve the URL given by the href attribute, relative to the element.

If the previous step fails, then abort these steps.

Do a potentially CORS-enabled fetch of the resulting absolute URL, with the mode being the current state of the element’s crossorigin content attribute, the origin being the origin of the link element’s Document , and the default origin behaviour set to taint.

The resource obtained in this fashion can be either CORS-same-origin or CORS-cross-origin.

User agents may opt to only try to obtain such resources when they are needed, instead of pro-actively fetching all the external resources that are not applied.

The semantics of the protocol used (e.g. HTTP) must be followed when fetching external resources. (For example, redirects will be followed and 404 responses will cause the external resource to not be applied.)

All descendant elements must be processed, according to their semantics, before the style element itself is evaluated. For styling languages that consist of pure text (as opposed to XML), user agents must evaluate style elements by passing the concatenation of the contents of all the Text nodes that are children of the style element (not any other nodes such as comments or elements), in tree order, to the style system. For XML-based styling languages, user agents must pass all the child nodes of the style element to the style system.

All URLs found by the styling language’s processor must be resolved, relative to the element (or as defined by the styling language), when the processor is invoked.

My favorite book of all time has got to be A Cat’s Life . It is a book by P. Rahmel that talks about the Felis Catus in modern human society.

Атрибут http-equiv

Браузеры преобразовывают значение атрибута http-equiv , заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Синтаксис

Значения

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv .

Content-Type Тип кодировки документа. expires Устанавливает дату и время, после которой информация в документе будет считаться устаревшей. pragma Способ кэширования документа. refresh Загружает другой документ в текущее окно браузера.

Какие бывают META теги и зачем они нужны

META-теги

В продолжении первого поста про DOCTYPE, я, как и обещал, продолжу про META теги.
META-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для броузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей.

META-теги имеют два возможных атрибута



META-теги должны находиться в заголовке HTML-документа между и (особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.

Пруфлинк: https://www.w3.org/TR/html401/struct/global.html#h-7.4.4.1
(The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.)

Атрибут HTTP-EQUIV

META-теги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Теги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки.
Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.

MagicPast.NET

Linux Windows Софт Hardware Вебмастеру Интернет Сеть C++ Звук Статьи Автомобильные устройства PDA

Атрибут meta http-equiv

HTML5
Этот атрибут определяет заголовок HTTP, которому принадлежит информация. Если семантика заголовка HTTP, названного этим атрибутом известна, то содержание может быть обработано на основании записанных в нем данных. Заголовки HTTP не чувствительны к регистру.

— используется браузерами для определения кодировки.

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

— автообновление страницы кажды n-секунд.

— своего рода «редирект», перенаправит страницу на https://example.com через n-секунд.

— запрещено кэширование страницы на локальном хосте.

— управляет кэшем веб-страницы. Возможные значения приведены в таблице:

public документ кэшируется во всех доступных кэшах
private кэшируется браузером, не кэшируется proxy-сервером
no-cache запрет на кэширование (браузер и proxy-сервер документ не кэшируют)
no-store может быть кэширован, но не сохраняется в архиве
max-age=time, must-revalidate указывает браузеру сколько секунд хранить документ в кэше
max-age=time, proxy-revalidate указывает сколько секунд хранить документ в кэше proxy-серверу

— красочно открывают и закрывают страницу. Возможные значения приведены в таблице:

HTML :: Тег

Атрибут charset тега

Со служебным тегом (от англ. metadata – метаданные) мы уже кратко знакомились. Он формирует пустой элемент разметки ‘meta’ , который используется для хранения метаданных.

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


Атрибуты name и content тега

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

Перечислим некоторые из имен, задаваемых атрибутом name , и соответствующих им значений, указываемых в атрибуте content :

  • «author» – в атрибуте content указывается имя автора;
  • «copyright» – если страница разрабатывалась организацией, то авторство обычно не указывается, а используется название организации;
  • «description» – когда атрибут name имеет такое значение, в атрибуте content приводится краткое описание страницы, которое используется поисковыми машинами для индексации, а также выводе ими аннотации при выдаче по запросу;
  • «document-state» – для этого имени атрибут content может принимать два значения: «static» и «dynamic» ; в первом случае поисковым машинам сообщается, что документ нужно индексировать только один раз и нет необходимости в индексации в дальнейшем; во втором случае от поисковых машин требуется постоянная индексация веб-страницы;
  • «robots» – для этого имени используется ряд значений атрибута content :
    • «index» – роботам разрешается индексировать данную страницу;
    • «noindex» – роботам запрещается индексировать данную страницу; при этом она не попадает в базу поисковой машины и, соответственно, её невозможно будет найти через поисковую систему;
    • «follow» – роботам разрешается переходить по ссылкам на данной странице;
    • «nofollow» – роботам запрещается переходить по ссылкам на данной странице; кроме того, ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PageRank (определяет ‘важность’ страницы);
    • «noarchive» – роботам запрещается кешировать данную страницу;
  • «revisit» – используется для управления частотой индексации веб-страницы в поисковой системе; например, для переиндексации страницы раз в три недели в качестве значения атрибута content следует указать «21» ;
  • «url» – для этого имени атрибут content принимает в качестве значения адрес, по которому робот поисковой системы перенаправляется на другую страницу; это нужно для отмены индексации ‘зеркала’ и генерируемых страниц.

Код с использованием элементов ‘meta’ и его атрибутов показан в примере №1

Пример №1. Использование элемента ‘meta’ и его атрибутов

Значение viewport атрибута name

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

  • «width» – значение задает ширину области просмотра и через знак равно в качестве значений принимает:
    • device-width — ширина области просмотра будет подстраиваться под ширину экрана (значение подходит для большинства случаев);
    • аппаратно-независимые пиксели — задается фиксированная ширина области просмотра в аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 200px — 10 000px (фиксированную ширину применять не рекомендуется!);
  • «height» – значение задает высоту области просмотра (используется редко) и через знак равно в качестве значений принимает:
    • device-height — высота области просмотра будет подстраиваться под высоту экрана (значение подходит для большинства случаев);
    • аппаратно-независимые пиксели — задается фиксированная высота области просмотра в аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 223px — 10 000px (фиксированную высоту применять не рекомендуется!);
  • «initial-scale» – устанавливает соответствие для пикселей CSS (это те пиксели, которые мы задаем в таблицах стилей) и аппаратно-независимых пикселей мобильного устройства (это виртуальные пиксели, которые являются результатом масштабирования аппаратных (физических) пикселей устройства, их величина примерно одинакова для всех устройств); проще говоря, свойство устанавливает стартовую величину масштабирования страницы; в качестве значения через знак равно принимаются числа от 0.1 до 10 (чем больше число, тем больше масштаб, т.е. увеличение страницы), например, «initial-scale=2» можно рассматривать, как увеличение масштаба страницы в два раза;
  • «user-scalable» – разрешает либо запрещает пользователю изменять масштаб страницы; в качестве значения через знак равно принимает yes либо no (масштабирование в ряде случаев целесообразно запрещать, например, для мобильных приложений).

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

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

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

В большинстве случаев для сайтов, которые специально не делались для мобильных устройств, следует применять конструкцию . В результате браузеры мобильных устройств самостоятельно выберут нужный масштаб и постараются вместить страницу в размеры окна браузера.

Атрибуты name и http-equiv тега

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

Еще раз кратко о служебной информации

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

Тег HTML — мета теги, информация о странице

Мета тег HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега — метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте.

Часто используются meta-теги: author, description, keywords, viewport, charset.

Мета теги находятся в области HTML документа (подробнее про ). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.

Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description , viewport , charset . Это будет плюсом для внутренней оптимизации сайта.

Синтаксис

Примеры использования в HTML коде

Основные мета теги

Ниже приведены несколько основных тегов с комментариями по применению и примерами использования.

Meta-тег description

Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.

Пример использования мета тега description

Meta-тег keywords

Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords .

Пример заполнения мета тега keywords

Meta-тег viewport

Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale — коэффициент масштабирования при первом открытии страницы.

Пример использования мета тега viewport

Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:

Meta-тег charset

Кодировка веб страницы. Наиболее частое значение: «UTF-8».

Пример использования мета тега кодировки charset

Meta тег refresh

Мета тег с атрибутом http-equiv=»refresh» указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.

Пример использования meta http refresh

Поддержка браузерами

Тег
Да Да Да Да Да

Атрибуты

Указывает кодировку HTML документа.

Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name.

content-type
default-style
refresh

Устанавливает HTTP заголовок для атрибута content.

Сontent-type — Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше).
Default-style — Предпочтительная таблица стилей.
Refresh — Интервал автообновления страницы.

application-name
author
description
generator
keywords
viewport

Имя мета тега. Как и http-equiv определяет суть мета тега.

Application-name — имя веб приложения, которое представляет страница.
Author — имя автора веб страницы.
Description — краткое описание страницы.
Generator — Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц).
Keywords — ключевые слова страницы.
Viewport — некоторые параметры области просмотра страницы.

Атрибут http-equiv

Браузеры преобразовывают значение атрибута http-equiv , заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Синтаксис

Значения

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv .

Content-Type Тип кодировки документа. expires Устанавливает дату и время, после которой информация в документе будет считаться устаревшей. pragma Способ кэширования документа. refresh Загружает другой документ в текущее окно браузера.

Мастер Йода рекомендует:  Как поменять тему оформления WordPress
Добавить комментарий
Атрибут Значения Описание
charset