Web-дизайн - Специальные возможности HTML - МЕТА-определители, Формы

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

МЕТА-определители записываются непосредственно в заголовке документа HTML между тегами <HEAD> и </HEAD> после тега <TITLE>. Существуют два разряда МЕТА-определителей, различающихся атрибутами и имеющих, соответственно, разное назначение. К первому разряду относятся определители, использующие атрибут NAME. Синтаксис их записи в общем случае таков:

Первый МЕТА-о пределитель, который мы рассмотрим применительно к данному классу команд, записывается в коде html-документа следующим образом:

<МЕТА NAME="description" CONTENT="краткое описание содержимого вашего сайта">Эта директива применяется для облегчения и ускорения процесса индексации вашего ресурса поисковыми машинами. Дело в том, что большинство автоматических поисковых серверов, подобных Alta Vista (http://www.altavista.com) или Yandex (http://www.yandex.ru), оснащены специальными программными модулями, отыскивающими во Всемирной сети web-страницы, соответствующие введенному пользователем тематическому запросу. В этом случае в динамически создаваемый поисковым сервером файл отчета включается либо информация, встречающаяся первой в тексте документа HTML, либо данные, указанные в теге МЕТА. Таким образом, наличие МЕТА-определителя многократно увеличивает шансы вашего ресурса попасть в первую десятку сайтов, которые найдет поисковый сервер по требованию пользователя. Разумеется, включение в код вашей web-страницы подобной директивы не гарантирует автоматической индексации страницы поисковым сервером. Для этого необходимо предпринять еще целый ряд действий, например, зарегистрировать ваш сайт в базе данных поисковой машины (о том, как это делается, мы побеседуем в одиннадцатом уроке).

Следующая директива, которую я рекомендовал бы вам поместить в заголовок своей web-страницы, выглядит так:

<МЕТА NAME="keywords" СОМТЕМТ="перечень необходимых ключевых слов через запятую">

Данный тег содержит перечисление ключевых слов, на которые, по вашему мнению, должны реагировать поисковые машины, включая ваш сайт в файл отчета. Не рекомендуется указывать в нем более тридцати ключевых слов подряд, равно как и записывать в МЕТА-определителе с параметром description описание сайта объемом с Войну и мир, поскольку многие поисковые серверы имеют ограничения на количество индексируемых слов.

СОВЕТ Поскольку ряд поисковых машин не учитывает регистр, в котором записаны ключевые слова, рекомендуется указывать в поле CONTENT оба варианта их записи: как в строчном, так и в заглавном регистре. Не следует также излишне рассчитывать на абсолютную грамотность пользователей Интернета, и если какое-либо из используемых вами ключевых слов имеет несколько возможных вариантов написания, лучше использовать их все (например, web-дизайн, webдизайн, вэб-дизайн, веб-дизайн, вэбдизайн, вебдизайн). Хорошим тоном считается указывать в атрибуте CONTENT описание сайта на русском и английском языках.

Чтобы пояснить механизм обработки МЕТА-определителей поисковыми машинами, приведу простой пример. Предположим, ваш html-документ содержит следующие МЕТА-теги:

<ТIТLЕ>Разведение белых медведей в домашних условиях</ТIТLЕ>

<МЕТА NAME="description" СОNTENT="Сайт. посвященный особенностям разведения

белых медведей в домашних условиях средней полосы России">

<МЕТА NAME="keywords" CONTENT="белые медведи. БЕЛЫЕ МЕДВЕДИ, медведь. МЕДВЕДЬ.

разведение. РАЗВЕДЕНИЕ, животные. ЖИВОТНЫЕ">

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

Разведение белых медведей в домашних условиях.
Сайт, посвященный особенностям разведения белых медведей в домашних условиях средней полосы России.
http://www.Bauj_aдpec.ru.

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

<МЕТА NAME="abstract" СОNTENT="описание содержимого сайта и перечень ключевых выражений через запятую">

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

<МЕТА NAME="subject" CONTENT="главная тема вашего сайта, выраженная одним-двумя словами">

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

<МЕТА NAME="page-type" CONTENT="Тип к которому относится страница">

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

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

<МЕТА NAME="title" CONTENT="3aголовок web-страницы"><МЕТА NAME="page-topic" CONTENT="3aголовок web-страницы">

Эти МЕТА-определителй предназначены для поисковых машин, не умеющих работать с тегом <TITLE>. В поле CONTENT данных директив можно скопировать текстовое содержимое, записанное вами в заголовке страницы.

Указанный МЕТА-определитель декларирует дату создания web-сайта, которая иногда отображается в файле отчета некоторых поисковых серверов в качестве дополнительной информации о ресурсе. Дата записывается в формате МЕСЯЦ-ДЕНЬ-ГОД с ведущим нулем, например, 04-08-2000.

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

Эти теги несут абсолютно идентичную функциональную нагрузку и указывают поисковому серверу, через сколько дней следует вновь обратиться к вашему ресурсу для его переиндексации. Как правило, данные МЕТА-определители применяют, если страница регулярно обновляется, причем эти обновления затрагивают ее тематическое содержание, указанное в других МЕТА-тегах. В такомслучае включением данной команды в код HTML вы можете избежать утомительной процедуры повторной регистрации своего сайта в поисковых машинах сервер сделает это автоматически. Вместо ключа N в поле CONTENT данной команды подставляется любое целое число от 1 до 30.<МЕТА NAME-"robots" CONTENT-"NOINDEX">

Эта директива запрещает поисковым машинам индексировать данную web-страницу.

Тег запрещает поисковому серверу следовать по гиперссылкам, установленным на данной странице.

Эта директива декларирует язык, на котором представлена опубликованная насайте информация. В поле CONTENT вносится название языка, написанное в английской транскрипции, например russian или english. Следует помнить, что при внесении ссылки на страницу в базы данных некоторых англоязычных поисковых серверов упоминание о русском языке в данном МЕТА-теге может повлечь за собой отказ от регистрации сайта.

<МЕТА NAME-"resource-type" CONTENT-"document">Указание на тип вашего ресурса. Рекомендуется оставить без изменений.

МЕТА-тег, определяющий аудиторию вашего сайта. Владельцы порносайтов, не заинтересованные в том, чтобы среди их посетителей встречались несовершеннолетние лица, записывают в качестве значения поля CONTENT параметр adults, однако необходимо учитывать, что большинство современных поисковых систем, за исключением специализированных, не индексируют страницы с таким параметром.

Указания на правила регистрации вашего ресурса поисковыми серверами. Например, при указании в поле CONTENT параметра all будут проиндексированы все документы сайта, при указании параметра, index — только индексные страницы.

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

<МЕТА NAME="reply-to" CONTENT="aдрес электронной почты">

Указание на адрес электронной почты автора проекта. Иногда показывается в файлах отчета поисковых серверов.

<МЕТА NAME="Owner" СОМТЕМТ="Название компании или имя владельца">

<МЕТА NAME="Owner-type" CONTENT="corporation, company/small или personal">

Информация о владельце ресурса. В поле CONTENT первого МЕТА-определителя заносится полное название фирмы-владельца ресурса или имя владельца,если он — частное лицо, второй тег содержит адрес офиса, по которому можно обратиться за дополнительной информацией, третий указывает на тип фирмы: corporation — для больших корпораций, company/small — для малых компаний и, наконец, personal — для частных предпринимателей и физических лиц.

<МЕТА NAME="Publisher-name" ОМЕМТ="Название компании или имя лица, опубликовавшего сайт">

<МЕТА NAME="Publisher-type" CONTENT="corporation, company/small или personal"><МЕТА NAME="Publisher-location" CONTENT="RU">

Для первых двух тегов справедливо все то же самое, что и для предыдущих МЕТА-определителей, за исключением того, что они представляют информацию не о владельце ресурса, а о том, кто его опубликовал. В общем случае издатель web-страницы не обязательно должен быть ее владельцем, например, когда какая-либо фирма заказывает себе сайт у стороннего web-мастера или дизайн-агентства. Как раз на такую ситуацию и рассчитаны данные директивы. В поле CONTENT МЕТА-тега с именем Publisher-location заносится обычно обозначение домена первого уровня страны издателя сайта или аббревиатура US, если он находится в США.

Здесь указывается адрес ресурса в сети Интернет, который издатель сайта считает своей домашней страничкой. Обычно этот тег используется для представления URL разработчика web-сайта, если сам сайт был создан для сторонней фирмы или частного лица. По указанной в МЕТА-определителе ссылке потенциальные заказчики смогут найти разработчика данного ресурса.

Редкий и, пожалуй, единственный в своем роде пример абсолютно бесполезного тега, не несущего ни малейшей смысловой нагрузки. Данный МЕТА-определитель был придуман разработчиками html-редакторов для рекламы собственных программных продуктов. Практически все программы, предназначенные для верстки web-страниц, вставляют этот тег в код HTML автоматически, не спрашивая разрешения у пользователя. В принципе наличие этой команды не наносит html-документу ни малейшего вреда, но и пользы от нее тоже никакой. Можно оставить такой МЕТА-тег в составе вашего сайта только из тщеславия, особенно если вы укажете в качестве названия программного пакета, с помощью которого вы создавали свою страницу, программу Notepad. Тогда пользователи, решившие прочитать код вашего документа HTML, будут несказанно обрадованы тем, что вы готовили свой проект вручную, с помощью Блокнота Windows, без сомнения посчитав вас крутым web-дизайнером.

Что же, настала пора переходить ко второму классу МЕТА-определителей, использующих в своем составе директиву HTTP-EQUIV. В отличие от первого разряда МЕТА-тегов, имеющих чисто информационное назначение, теги второй категории играют определенную роль при передаче документов посредством протокола HTTP. Эти директивы используются для придания web-страницамнекоторых примечательных свойств, которые в ряде случаев могут быть полезны web-дизайнеру.

Включение такого тега в заголовок web-страницы обеспечит автоматический переход броузера по указанному в поле CONTENT адресу через N секунд. Данная функция, называемая редиректом, или перенаправлением пользовательского броузера на какой-либо ресурс, применяется в основном тогда, когда ваш сайт сменил адрес, переместился на другой хост. В этом случае на сервере со старым адресом размещается файл index.html, содержащий описанную выше директиву и соответствующую поясняющую надпись, например: Извините, наш сайт переехал по адресу <адрес>. Через несколько секунд данная страница будет загружена автоматически. Иногда такая команда применяется также для автоматического переключения пользователя с заглавной (splash) на стартовую страницу сервера. Если этот МЕТА-тег записать в виде <МЕТАHTTP-EQUIV="Refresh" CONTENT="N">, текущая web-страница будет автоматически перезагружаться в броузер каждые N секунд.

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

ПРИМЕЧАНИЕ Большинство броузеров сохраняют загружаемые из Интернета html-до-кументы в специальную папку на жестком диске пользовательского компьютера и при повторном обращении к сайту открывают эту web-страницу уже с винчестера, что позволяет значительно сократить время ее считывания. Данная процедура называется кэшированием. Избежать нежелательного кэширования можно указанным выше способом.

С помощью этого тега осуществляется жесткая установка так называемого чарсета, или пользовательской кодировки страницы. Встретив в заголовке документа такую команду, пользовательский броузер автоматически переключается на заданную в теге кодировку. Использовать данный МЕТА-определитель следует крайне осторожно. Одной из самых распространенных ошибок начинающих web-дизайнеров является представление на сервере html-документов не в той кодировке, которая указана в МЕТА-теге. Результатом становится полная нечитаемость подобной страницы в броузере, а сама эта ошибка считается в среде web-мастеров верхом непрофессионализма. Более того, практически все современные http-серверы поддерживают функцию автоматического изменения кодировки документов в зависимости от установленных в пользовательском броузере предпочтений. Жесткая привязка страницы к какой-либо одной кодировке методом указания в ее заголовке чарсета может привести к превращению содержащегося в ней текста в мало аппетитную на вид кашу. В случае когда вы используете в своем проекте принудительный выбор кодировки, при ее смене происходит, как правило, то же самое. Поэтому от использования данногоМЕТА-тега, по крайней мере на начальном этапе, лучше всего отказаться. Разумеется, применение МЕТА-определителей в html-документе — дело абсолютно добровольное. Включать ли в состав web-страницы какие-либо МЕТА-теги, и если да, то какие именно, — решать вам.

Формы применяются для передачи данных от html-документа интерактивным элементам сайта, например сценариям CGI. Поместив в форму какие-либо значения, посетитель сервера нажимает мышью на соответствующую кнопку, после чего введенная им информация передается CGI-скрипту, который принимает управление процессом обработки данных. Эти данные претерпевают те или иные изменения, алгоритм которых записан в файле сценария CGI, например, встраиваются в другую web-страницу или передаются по электронной почте. Подобный принцип реализован в многочисленных электронных конференциях, досках объявлений, гостевых книгах и web-чатах Всемирной сети.

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

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

Содержание формы, включающее все используемые элементы

В качестве параметра атрибута ACTION в кавычках указывается строка вызова CGI-скрипта, который использует данная форма, например, "http://www.myserver.ru/cgi-bin/имя_сценария.cgi". Значение атрибута METHOD устанавливает метод передачи данных из формы на сервер: GET с помощью стандартного интерфейса HTTP или POST — по каналам электронной почты. Иногда совместно с тегом <FORM> применяют атрибут ENCTYPE, описывающий механизм кодирования содержимого формы перед отправкой.

Содержание формы описывается тегом <INPUT>, запись которого в общем виде выглядит следующим образом:

Возможные значения атрибута ALIGN вам уже знакомы, он определяет положение элементов формы на web-странице. Атрибут MAXLENGTH определяет максимально возможную длину текстового поля в символах для полей ввода текста, аналогично атрибут SIZE определяет его видимую на экране длину в пикселах. Атрибут CHECKED устанавливает выделенный объект из нескольких в случае, если значением атрибута TYPE является RADIO или CHECKBOX. Атрибут VALUE указывает первоначальное значение текущего поля, а NAME задает уникальное имя для каждого элемента формы, записанное латиницей. Это имя служит для идентификации данных, передаваемых серверу из формы. И наконец, атрибут TYPE задает типы самого элемента, которые мы и рассмотрим подробнее.