Pervyiurok.ru


Видеокурсы и видео уроки ...

Видеокурсы, видео уроки, аудио, книги...

К учебнику по Web-дизайну

"Все Технические Моменты Сайтостроения в Видеоформате". Коллекция видеокурсов, которая за 36 часов и 45 минут сделает из Вас профессионала во всех технических моментах создания сайта.



Реклама:


Урок 6
Специальные возможности HTML



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

  МЕТА-определители

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

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

<МЕТА NAME=''значение1" CONTENT="значение2">

Первый МЕТА-о пределитель, который мы рассмотрим применительно к данному классу команд, записывается в коде 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-документ содержит следующие МЕТА-теги:

<HEAD>

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

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

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

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

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

</HEAD>

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

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

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

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

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

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

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

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

<МЕТА NAME="distribution" CONTENT="Global">

<МЕТА NAME="rating" CONTENT="General">

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

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

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

<МЕТА NAME="site-created" CONTENT="Дата">

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

<МЕТА NAME="expires" CONTENT="Дата">

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

<МЕТА NAME="revisit" CONTENT="N days">

<МЕТА NAME="revisit-after" CONTENT="N days">

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

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

<МЕТА NAME="robots" CONTENT-"NOFOLLOW">

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

<МЕТА NAME-"content-language" CONTENT-"язык">

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

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

<МЕТА NAME-"audience" CONTENT-"al1">

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

<МЕТА NAME="robots" CONTENT-"1ndex,air>

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

<МЕТА NAME="Copyright" CONTENT=''Имя вебмастера. Copyright 2000">

<МЕТА NAME="Autor" CONTENT=''Имя вебмастера. Copyright 2000">

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

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

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

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

<МЕТА NAME="Address" CONTENT="Адрес офиса">

<МЕТА 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, если он находится в США.

<МЕТА NAME="home-url" CONTENT="URL">

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

<МЕТА NAME="Generator" CONTENT="Название программы">

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

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

<МЕТА HTTP-EQUIV="Refresh" CONTENT="N;

URL=http://www.имя_сайта.ги/имя_страницы.html

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

<МЕТА HTTP-EQUIV="Expires" CONTENT="Tue. 02 Jan 1996 01:00:00 GMT">

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

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

<МЕТА HTTP-EQUIV="Content-type" CONTENT="text/html; charset=KOI8-R">

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

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

  Формы

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

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

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

<FORM ACTION="URL" МЕТНОD="значение">

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

</FORM>

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

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

<INPUT ТУРЕ="тип элемента" NAME''имя" VALUE="строка" CHECKED="параметр" SIZE="целое число" MAXLENGTH="целое число" ALIGN="значение">

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

  Типы элементов формы

TYPE="TEXT"

Представляет собой одностроковое текстовое поле (рис. 6.1), физический размер которого можно установить с использованием атрибута SIZE, а первоначально введенную в него символьную последовательность — с помощью атрибута VALUE.

Рис. 6.1. Элемент формы TEXT

Примером использования данного элемента в коде HTML может служить следующая строка:

<INPUT TYPE='TEXT" SIZE="40" NAME="user_name" VALUE-''Введите ваше имя">TYPE="PASSWORD"

Тип, полностью аналогичный предыдущему, за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами «*», чтобы скрыть текст от постороннего зрителя.

TYPE="CHECKBOX"

Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» — «не отмечено» (рис. 6.2).

Рис. 6.2. Элемент формы CHECKBOX

Данный элемент оперирует так называемыми булевыми переменными, то есть переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы CHECKBOX создает логическую пару значений вида «имя_элемента—состояние» и передает их на сервер. Для установки первоначального состояния элемента (отмечен, либо нет) используют атрибут CHECKED.

Пример использования:

<INPUT TYPE="CHECKBOX" CHECKED NAME="C01" VALUE="yes">

TYPE="RADIO"

Так называемая радиокнопка (рис. 6.3) применяется в случае, когда какая-либо логическая переменная может принимать только одно значение из множества возможных.

Рис. 6.3. Элемент формы RADIO

Все элементы RADIO одной формы обозначаются одним и тем же значением атрибута NAME. Использование радиокнопок требует явного указания значений атрибута VALUE, одна из кнопок должна быть обязательно выделена атрибутом CHECKED.

Пример использования:

<Р АLIGN="СЕМТЕR">Пожалуйста, укажите ваш возраст</Р>

<CENTER>

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="0-12">

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="13-17">

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="18-25">

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="26-35" CHECKED>

<INPUT TYPE="RADIO" NAME= "user-age" VALUE="36-">

</CENTER>

TYPE="BUTTON"

Отображает обыкновенную кнопку (рис. 6.4), нажатие на которую приводит к какому-либо действию сервера.

Рис. 6.4. Элемент формы BUTTON

С помощью атрибута NAME данному элементу присваивается уникальное имя, атрибут VALUE позволяет изменять надпись, отображаемую на кнопке.

Пример использования:

<INPUT TYPE="BUTTON" VALUE="Button" NAME="B1">TYPE="SUBMIT"

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

Пример использования:

<INPUT TYPE="SUBMIT" VALUE="Отправить!">

TYPE="RESET"

Создает кнопку, которая очищает неправильно заполненную текстовую форму. Параметры и значения этой кнопки не передаются на сервер вместе с другими данными формы. Пример использования:

<INPUT TYPE="RESET" VALUE="Очистить форму">TYPE="FILE"

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

Пример использования:

<INPUT TYPE="FILE" NAME="picture">TYPE="IMAGE"

Создает кнопку отсылки, аналогичную элементу SUBMIT, но с использованием графического изображения, созданного пользователем. Обычно применяется вслучаях, когда стандартная серая прямоугольная кнопка «не вписывается» в дизайн сайта. URL к изображению, играющему роль кнопки, указывается атрибутом SRC, причем сам элемент может содержать собственные атрибуты, аналогичные применяемым в теге <IMG> (см. урок 5), в том числе ALIGN, ALT и др. Атрибуты NAME и VALUE трактуются так же, как аналогичные атрибуты элемента SUBMIT.

Пример использования:

<INPUT TYPE="IMAGE" SRC="/images/button.giГ ALIGN="BOTTOM" NAME="submit" VALUE="Отправить!">

TYPE="HIDDEN"

Данный элемент является скрытым и не отображается на экране монитора пользователя. Применяется он для хранения и передачи на сервер информации о текущем состоянии формы: при нажатии кнопки SUBMIT элемент HIDDEN сформирует логическую пару переменных типа «имя—значение», которые будут отосланы серверу с помощью протокола HTTP. Элементы HIDDEN служат доступной альтернативой файлам cookies — специальным файлам, в которых сохраняются индивидуальные настройки пользователя и позволяющим, например, восстановить последнее состояние формы при повторном посещении пользователем содержащей эту форму страницы.

Пример использования:

<INPUT TYPE="HIDDEN" NAME="forml" VALUE="c3576-236-2113">

Однако с помощью тега <INPUT> можно передать далеко не все доступные web-дизайнеру элементы форм. Например, текстовые поля, задаваемые атрибутами TEXT и PASSWORD, весьма ограничены по количеству символов, которые можно ввести в эти поля. Если перед web-мастером встала задача создать такие текстовое поля, чтобы пользователь мог вводить большое количество символов, используется самостоятельный тег <TEXTAREA>, формирующий на экране одноименный элемент формы (рис. 6.5).

Рис. 6.5. Элемент формы TEXTAREA

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

<TEXTAREA МАМЕ="имя элемента" ROWS-''целое число" СOLS="целое число">

Текст, выводимый в текстовом поле по умолчанию</TEXTAREA>

С атрибутом NAME, определяющим индивидуальное имя каждого элемента формы, вы уже знакомы. Атрибуты ROWS и COLS указывают соответственно максимально допустимое количество строк вводимого текста и символов в строке. В случае если набираемый пользователем текст не умещается в видимую часть текстового контейнера, по краям поля появляются вертикальные и горизонтальные полосы прокрутки для скроллинга содержимого элемента TEXTAREA.

Пример использования:

<TEXTAREA NAME="message" ROWS="25" COLS="40">

Введите сюда текст сообщения 

</TEXTAREA>

Для создания меню выбора в форме (рис. 6.6) web-мастер может воспользоваться тегом <SELECT>.

Рис. 6.6. Элемент формы SELECT

Синтаксис записи данного тега в общем виде выглядит так:

<SELECT NAME="имя" MULTIPLE SIZE="целое число">

<OPTION VALUE="Пункт 1">Пункт 1</OPTION>

<OPTION VALUE-''Пункт 2">Пункт 2</OPTION>

<OPTION VALUE="Пункт 3">Пункт 3</OPTION>

OPTION VALUE="Пункт N">Пункт N</OPTION>

</SELECT>

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

Пример использования:

<Р АLIGN ="CENTER">Пожалуйста, укажите ваш город</Р>

<CENTER>

<SELECT NAME="City" MULTIPLE SIZE="3">

OPTION VALUE="a">Санкт-Петербург</OPTION>

OPTION VALUE="b">Mocква</OPTION>

<OPTION VALUE="c">Екатеринбург</OPTION>

</SELECT>

</CENTER>

  Таблицы

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

Для создания таблиц в HTML 3.2 применяется тег <TABLE>, структура записи которого в общем виде следующая:

<TABLE ALIGN="значение" WIDTH="значение" BORDER=''целое число"

CELLSPACING="qenoe число" CELLPADDING=''целое число">

<TR ALIGN="значение" VALIGN="значение">

<TD ALIGN="значение" VALIGN="значение" COLSPAN="целое число"

ROWSPAN="целое число" НЕIGНТ="целое число" NOWRAP> Содержимое ячеек</ТD>

</TR>

</TABLE>

Рассмотрим эту структуру более подробно. Как видите, основополагающим тегом в блоке описания таблицы является директива <TABLE>, в нее вкладываются все остальные команды блока. Данный тег может использовать следующие атрибуты: ALIGN — задает горизонтальное позиционирование всей таблицы в целом, может принимать значения LEFT, RIGHT или CENTER. Атрибут WIDTH определяет ширину всей таблицы и может принимать значение целого числа,если ширина таблицы указывается в пикселах, либо числа от 1 до 100 с символом «%» (например, «60 %»), если ширина таблицы задается в процентах отширины экрана пользователя. Атрибут BORDER указывает на толщину обрамления столбцов и ячеек таблицы в пикселах. Если значение данного атрибута равно нулю, таблица становится «невидимой». Атрибут CELLSPACING позволяет задать промежуток между ячейками в пикселах, a CELLPADDING — промежуток между содержимым ячейки и рамкой вокруг ячейки в пикселах.

В теги <TABLE> </TABLE> вкладываются теги <TR> и </TR>, определяющие строки таблицы. Количество данных тегов зависит от реального количества строк. Команда <TR> может использовать атрибут ALIGN, определяющий горизонтальное

позиционирование содержимого ячейки внутри самой ячейки, а также атрибутVALIGN, задающий вертикальное выравнивание содержимого ячейки. Первый из них может принимать традиционные значения LEFT, RIGHT и CENTER, второй значения TOP, MIDDLE, BOTTOM и BASELINE.

В своеобразный контейнер, образуемый тегами <TR> и </TR>, вкладываются команды <TD>, описывающие сами ячейки. Тег <TD> оперирует атрибутами ALIGN и VALIGN, действие и параметры которых аналогичны таковым для тега <TR>.Они применяются в ситуации, когда горизонтальное или вертикальное выравнивание в какой-либо одной ячейке отличается от выравнивания, заданного для всей строки. Кроме того, тег <TD> оперирует следующими необязательными атрибутами: COLSPAN — число столбцов, перекрываемых ячейкой; ROWSPAN —число строк, перекрываемых ячейкой, HEIGHT — высота ячейки в пикселах и NO WRAP — запрет переноса слов внутри ячейки.

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

  Простые таблицы

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

Такая таблица содержит две строки по две ячейки в каждой, или, другими словами, два элемента <TR>, каждый из которых содержит по два элемента <TD>. Отрывок html-кода, описывающего такую таблицу, можно представить следующим образом:

<TABLE>

<TR>

<TD>A</TD>

<TD>B</TD>

</TR>

<TR>

<TD>C</TD>

<TD>D</TD>

</TR>

</TABLE>

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

В представлении такой таблицы в виде кода HTML также ничего сложного нет. Таблица по-прежнему содержит две строки, однако первая из них включает две ячейки, а нижняя — всего одну. Иными словами при описании второй строки мы должны использовать лишь один элемент <TD>:

<TABLE>

<TR>

<TD>A</TD>

<TD>B</TD>

</TR>

<TR>

<TD>C</TD>

</TR>

</TABLE>

  Стандартная таблица с текстовыми ячейками

Таблица с ячейками, заполненными текстом, подразумевает использование ряда специфических элементов, таких как заголовок столбца, определяемый тегом <ТН>, или заголовок всей таблицы, задаваемый тегом <CAPTION>.

Директива <ТН> определяет выделенный жирным шрифтом заголовок каждого столбца таблицы, поясняя его содержимое. В общем виде данный тег записывается следующим образом:

<ТН ALIGN="заначение" VALUE="значение" WIDTH="значение" НЕIGНТ="значение" COLSPAN="целое число" ROWSPAN="целое число" NOWRA>содержимое заголовка</ТН>

Все атрибуты этой команды записываются аналогично атрибутам других тегов, определяющих внутреннее наполнение таблиц, их значения идентичны таковым для атрибутов тега <ТО>. Напомню, лишь, что атрибут ALIGN в данном случае определяет горизонтальное выравнивание заголовка столбца в ячейке, атрибут VALIGN — вертикальное выравнивание, WIDTH — ширину ячейки в пикселах, HEIGHT — ее высоту, COLSPAN указывает на число столбцов, охваченных ячейкой, ROWSPAN — на число охваченных ячейкой строк и, наконец, параметр NOWRAP запрещает перенос слов внутри ячейки. По умолчанию значения атрибутов COLSPAN и ROWSPAN равны 1, для заголовка столбцов задается выравнивание по центру ячейки, в отличие от содержимого самих ячеек, определяемых тегом <TD>, оно выравнивается по левому краю столбца. Директива <CAPTION> задает заголовок таблицы в целом. Синтаксис ее записи в общем виде таков:

<CAPTION ALIGN="значение">текст. заголовка</САРТION>

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

Использование заголовков таблиц считается хорошим тоном и принято для представления соответствующей информации в html-дакументах. Заголовок

таблицы должен быть по возможности кратким и содержательным, не следует включать в него развернутое описание представленных в таблице данных. При использовании директивы <CAPTION> следует помнить простое правило: в заголовке надо указывать лишь что показывает данная таблица, а все объяснения, рассказывающие, почему данная таблица включена в документ, лучше приводить отдельным текстом, предваряющим таблицу.

В качестве простого примера, демонстрирующего механизм применения команд<ТН> и <CAPTION>, приведу небольшой отрывок кода HTML:

<TABLE BORDER="1">

<CAPTION А!Л6М="ТОР">Пример перевода ряда английских слов на русский язык</САРТЮМ><TR>

<ТН>Английское написание</ТН>

<ТН>Русское написание</ТН>

<ТН>Часть речи</ТН>

</TR>

<TR>

<TD>To go</TD>

<ТD>Идти</ТD>

<ТD><ЕМ>Глагол</ЕМ></ТD>

</TR>

<TR>

<TD>The table</TD>

<ТD>Стол</ТD>

<ТD><ЕМ>Существительное</ЕМ></TD>

</TR>

<TR>

<TD>To sleep</TD>

<TD>Cnaib</TD>

<ТD><ЕМ>Гла гол</ЕМ></ТD>

</TR>

</TABLE>

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

Рис. 6.7. Внешний вид таблицы с текстовыми ячейками

  Таблица с параллельными текстами

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

<TABLE BORDER="0" CELLSPACING="3">

<CAPTION><STRONG>Отрывки из книги Бытия на трех языках</STRONG></САРТION>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11"></ТН>

<TH WIDTH="223">Латынь</ТН>

<TH WIDTH="271>Английский</ТН>

<TH WIDTH="240">Pyccкий</TH>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11">1</TH>

<TD WIDTH="223">In principio creavit Deus caelum et terram.</TD>

<TD WIDTH="271">In the beginning God created the heaven and the earth.</TD>

<TD WIDTH="240">B начале сотворил Бог Небо и Землю.</TD>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11">2</TH>

<TD WIDTH="223">Terra autem erat inanis et vacua et tenebrae super faciemabyssi et spiritus Dei ferebatur super aquas.</TD>

<TD WIDTH="271">And the earth was without form, and void: and darkness wasupon the face of the deep. And the Spirit of God moved upon the face of thewaters.</TD>

<TD ШОТН="240">Земля же была без видна и пуста, и Тьма над Бездною: и Дух Божий носился над Водою.</TD>

</TR>

<TR ALIGN="LEFT" VALIGN="TOP">

<TH WIDTH="11">3</TH>

<TD WIDTH="223">Dixitque Deus &quot:Fiat lux&quot; et facta est lux.</TD>

<TD WIDTH="271">And God said. Let there be light: and there was "light.</TD>

<TD WIDTH="240">И сказал Бог: &quot;Да будет Свет!&quot: - и стал Свет.</ТD>

</TR>

</TABLE>

После обработки интерпретатором броузера данного кода таблица будет выглядеть на экране монитора так, как показано на рис. 6.8.

Рис. 6.8. Внешний вид таблицы с тремя текстовыми колонками

  Представление таблиц, элементы которых занимают несколько строк или столбцов

Иногда в html-документе необходимо представить таблицу, некоторые ячейки которой занимают несколько строк или столбцов по вертикали или горизонтали. Для этого используются атрибуты COLSPAN и ROWSPAN, варьируя параметрами которых можно добиться желаемого результата. В качестве примера применения такой таблицы предлагаю рассмотреть код HTML, представляющий на экране правила спряжения английского глагола to be в настоящем времени:

<TABLE BORDER="1" ALIGN="CENTER" CELLPADDING-"3" WIDTH="252">

<САРТION>Спряжение глагола <EM>to be:</EM></CAPTION>

<TR>

<TH WIDTH="34">&nbsp;</TH>

<TH иттн="198">3начение <EM>to be:</EM></TH>

</TR>

<TR>

<TH WIDTH="34">I</TH>

<TD ALIGN="CENTER" WIDTH="198">am</TD>

</TR>

<TR>

<TH WIDTH="34">You</TH>

<TD ALIGN="CENTER" WIDTH="198" ROWSPAN="3">are</TD></TR><TR>

<TH WIDTH="34">We</TH>

</TR>

<TR>

<TH WIDTH="34">They</TH>

</TR>

<TR>

<TH WIDTH="34">He</TH>

<TD ALIGN="CENTER" WIDTH="198" ROWSPAN="3">is</TD>

</TR>

<TR>

<TH WIDTH="34">She</TH>

</TR>

<TR>

<TH WIDTH="34">It</TH>

</TR>

</TABLE>

На рис. 6.9 показано, как такая таблица отобразится в окне броузера.

Рис. 6.9. Внешний вид таблицы, элементы которой занимают несколько строк

  Вложенные таблицы

Команды, управляющие созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка HTML используется для представления на web-странице так называемых «вложенных» таблиц,пример описания которых вы можете видеть ниже:

<TABLE BORDER="1" CELLPADDING="6" WIOTH="600">

<САРТION>Спряжение стандартного глагола <EM>to invite:</EM></CAPTION>

<TR>

<TH МЮТН="300">Перевод</ТН>

<TH WIDTH="300">Future</TH>

<TH WIDTH="300">Future-in-the-Past</TH>

</TR>

<TR>

<TD COLSPAN="3" WIDTH="527">

<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="588">

<TR>

<TD WIDTH="194">Я (мы) приглашу(-сим)</ТD>

<TD WIDTH="194">I (we) shall invite</TD>

<TD WIOTH="194">I (we) should invite</TD>

</TR>

<TR>

<TD WIDTH="194">OH (вы. они) пригласит (-ите. -ят)</ТD>

<TD WIDTH="194">He (you. they) will invite</TD>

<TD WIDTH="194">He (you. they) would invite</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

Из приведенного отрывка кода HTML ясно, что для создания отображаемой на экране пользователя таблицы спряжения английского глагола to invite использованы две таблицы, вложенные одна в другую. Первая задает форматирование ячеек для заголовков таблицы, а вторая — столбцы со значениями спрягаемого глагола. В окне броузера конструкция из двух вложенных таблиц будет выглядеть так, как показано на рис. 6.10.

Рис. 6.10. Вложенные таблицы

В приведенном примере для разметки внешней таблицы использован атрибутCELLPADDING со значением 6, прежде всего, для того, чтобы вам было легче визуально отличить внешнюю таблицу от внутренней. Если для обеих таблиц установить нулевое значение отступов и толщины рамок, таблицы «слипаются» в окне броузера, что позволяет создать невидимую пользователю конструкцию спроизвольным разбиением. Этот прием часто используется для создания «прозрачных» таблиц, играющих роль верстальной сетки для размещения элементов web-страницы.

  Фреймы

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

Фреймы — способ организации структуры сайта, при котором web-страницадробится на ряд отдельных составляющих и «собирается» в главном окне броузера из нескольких независимых или вложенных окон. При таком представлении каждый компонент страницы является самостоятельным документом HTML и встраивается в ту область экрана, которая задается директивой<FRAMESET>. Данный способ применяется в основном для дробления web-страницы на логические разделы: например, в верхнем фрейме выводится рекламный баннер, в левом — элементы навигации, в правом — основной текст страницы, в нижнем — сообщение об авторских правах и адрес электронной почты разработчика ресурса. При этом нажатие на любую из навигационных кнопок приводит к изменению содержимого лишь одного окна, все остальные фреймы остаются без изменений. Если содержимое фрейма не умещается в видимые границы окна, броузер отображает полосы прокрутки.

В случае применения фреймов индексный html-файл (index.html) несколько отличается от обычного. Как известно, стандартный документ HTML имеет два логических раздела: раздел заголовков <HEAD> и раздел <BODY>, определяющий тело документа. При использовании фреймов раздел <BOOY> заменяется на раздел <FRAMESET>. Все остальные документы, отображаемые в отдельных фреймах,имеют стандартное представление.

В общем виде синтаксис записи директивы <FRAMESET> выглядит следующим образом:

<FRAMESET ROWS="значение" COLS="значение" FRAMEBORDER="значение"

FRAMESPACING="значение">

<FRAME МАМЕ="имя" TARGET="значение" SCROLLING="yes. no или auto" SRC="URL"

FRAMEBORDER="значение" NORESIZE>

<NOFRAMES>

<BODY>

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

</BODY>

</NOFRAMES>

</FRAMESET>

Очевидно, что общая структура представления фреймов во многом схожа с представлением таблиц: тег <FRAMESET>, задающий параметры отображения всех фреймов в документе, содержит необходимое количество тегов <FRAME>, описывающих каждый отдельный фрейм. Причем некоторые атрибуты, применяемые совместно с командой <FRAME>, могут отменять параметры, заданные в атрибутах команды <FRAMESET>. Как и в случае с <ТАВ1Е>, директива описания фреймов допускает вложение одного элемента <FRAMESET> в другой.

Атрибут тега <FRAMESET> FRAMEBORDER определяет, надо ли отображать на экране пользователя границы фреймов. Параметр этого атрибута может принимать одно из двух значений: 1, если разделители нужны (используется по умолчанию), или 0, если программист желает сделать их невидимыми. Атрибут FRAMESPACING указывает на толщину разделителей в пикселах. Атрибуты ROWS и COLS определяют соответственно количество горизонтальных и вертикальных отрезков во фреймовом наборе.

Параметры атрибутов ROWS и COLS можно задавать различными способами: в пикселах, процентах и в относительных длинах. Если атрибут ROWS в теге<FRAMESET> не указан, каждый столбец будет занимать всю длину страницы, если

не указан атрибут COLS, каждая строка растянется на всю видимую ширину экрана. Параметры фреймов задаются слева направо для горизонтальных элементов и сверху вниз для вертикальных. Например, запись <FRAMESET COLS="50*.50Х"> разделит страницу вертикально на две равные части, запись <FRAMESETROWS="250. 10%. *"> задаст горизонтальное разделение страницы на три участка: первый — с фиксированной высотой 250 пикселов, второй — высотой в 10 % от оставшегося пространства, третий же займет все пространство, которое останется свободным после создания первых двух окон. В этом примере при задании параметров атрибута ROWS были использованы все три варианта определения отрезков фреймового набора: в пикселах (250 точек), процентах (10 %) и в относительных длинах (включение символа *). Разделения web-страницы на сетку 2x3 ячейки можно добиться, например, применением следующих значений атрибутов директивы <FRAMESET>: <FRAMESET ROWS="40%. 60%" COLS="33%. 34%. *">.

Команда <FRAME> может включать следующие атрибуты: NAME, в котором задается уникальное имя для данного конкретного фрейма, набранное с использованием символов латинского алфавита, TARGET, содержащий информацию о целевом фрейме (рекомендуется использовать значение по умолчанию — "contents"), SCROLLING, определяющий наличие ("yes"), отсутствие ("по") или отображение по мере необходимости ("auto") полос прокрутки в текущем фрейме, SRC, в котором указывается адрес открываемой в данном фрейме страницы, FRAMEBORDER, правила записи и назначение которого аналогичны таковым в составе тега <FRAMESET>, и, наконец, атрибут NORESIZE, наличие которого устанавливает запрет на изменение пользователем размеров окна фрейма. Тег <FRAME> может также содержать ряд других необязательных атрибутов, таких как MARGINWIDTH, определяющий размер в пикселах пустого пространства, оставляемого во фрейме в качестве правого и левого полей, и MARGIN-HEIGHT, задающий верхний и нижний отступы.

Директива <NOFRAMES>, включающая вложенные теги <BODY> и </BODY>, позволяет записать произвольное количество html-кода, который будет динамически преобразован в самостоятельную web-страницу в случае, если клиентский броузер не поддерживает фреймы.

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

<А HREF="URL" ТАР6ЕТ="_значение">Текст или элемент IMG</A>

Допустимые значения атрибута TARGET для применения тега <А> во фреймовых наборах следующие:

_self — документ, с которым установлена гиперсвязь, открывается в текущем фрейме;

_parent — отображение осуществляется в родительском окне фреймов, независимо от того, какие параметры указаны в директиве <FRAMESET>;

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

Если вместо значения атрибута TARGET подставить имя фрейма, заданное вами ранее в качестве параметра атрибута NAME тега <FRAME>, при активизации ссылки целевой документ загружается в окне с указанным именем.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4:0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>FRAMESET EXAMPLE PAGE</TITLE>

</HEAD>

<FRAMESET FRAMESPACING="0" rows="64.*.64" FRAMEBORDER="0">

<FRAME NAME="top" SCROLLING="no" TARGET="contents" SRC="page_l.htm">

<FRAMESET COLS="150.*">

<FRAME NAME="contents" SRC="page_2.htm" SCROLLING="auto">

<FRAME NAME="main" SRC="page_3.htm" SCROLLING="auto">

</FRAMESET>

<FRAME NAME="bottom" SCROLLING="no" NORESIZE SRO"page_4.htm">

<NOFRAMES>

<BODY>

<P ALIGN="CENTER">Этa страница содержит фреймы, но ваш броузер не поддерживает их отображение.</Р>

</BODY>

</NOFRAME>

</FRAMESET>

</HTML>

Обратите внимание на то, что определитель DOCTYPE в данном случае содержит указание на версию языка HTML 4.O. Это необходимо, поскольку ссылка на HTML 3.2, не позволяющий использовать фреймы, может вызвать в некоторых броузерах ошибку при трансляции кода.

Приведенный выше листинг html-документа делит web-страницу так, как это показано на рис. 6.11.

Рис. 6.11. Внешний вид web-страницы, созданной с применением директивы FRAMESET

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

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

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

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

  Элемент <МАР>

В четвертом уроке я уже упоминал о том, что язык разметки гипертекста позволяет создавать графические элементы, выполняющие роль карт, определенные участки которых могут реагировать на нажатие кнопок мыши и отправлять пользователя к соответствующим документам или файловым объектам сайта потому же принципу, что и гиперссылки. Рассмотрим правила создания графических карт при помощи команды <МАР>.

Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом:

<МАР МАМЕ="имя карты">

<AREA HREF="URL" SНАРЕ="параметр" COORDS="x1. y1. x2. y2"

АLТ="альтернативный текст">

</МАР>

Атрибут NAME тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. Следует учитывать, что при задании имени карты важно соблюдение регистра, поскольку интерпретатор броузера различает в данной команде строчное и заглавное написание. Тег <AREA> определяет непосредственно активную область изображения. Атрибут HREF, как и при использовании его совместно с тегом <А>, указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения. Атрибут ALT определяет альтернативный текст, который выводится на экран в специальномвсплывающем прямоугольнике в случае, если пользователь подержит курсор мыши над активным участком карты несколько секунд. Атрибут SHAPE управляет формой активной области и может принимать одно из трех значений: RECT — прямоугольник, CIRCLE — круг или POLY — многоугольник. И наконец, атрибут COORDS позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута приведены в табл. 6.1.

Таблица 6.1. Значения атрибута COORDS

Значение SHAPE

Форма активной области

Синтаксис записи COORDS

Значения параметров COORDS

SHAPE=RECT

 

 

SHAPE=CIRCLE

 

SHAPE=POLY

Прямоугольник

 

 

Круг

 

Многоугольник

COORDS="xl,yl,х2,у2"

 

 

COORDS="X,Y,R"

 

COORDS="x1, y1, x2, y2, x3, y3, ... xN, yN"

x1 и y1 задают координаты левого верхнего угла фигуры, х2и у2 — правого нижнего

X и Y — координаты центра окружности, R — ее радиус в пикселах

x1, y1 ... xN, yN -координаты вершин многоугольника

Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. Иными словами, значение х возрастает справа налево,

а значение у — сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: SHAPE="RECT" COORDS="0.0.50Я.50Ж". Необходимо помнить, что если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA>первой, имеет приоритет.

При составлении графической карты можно использовать также необязательный атрибут NOHREF, определяющий неактивные участки карты. На практике он используется довольно редко и, как правило, для того, чтобы вырезать в активном участке изображения неактивную «дыру».

Вот несколько простых примеров создания активных областей:

SHAPE=RECT COORDS="0, 0, 20, 20" — создает прямоугольник размером 20x20 пикселов в левом верхнем углу изображения;

SHAPE=CIRCLE COORDS="30, 30, 10" создает круг с центром, расположенном в точке (30, 30) и радиусом 10 пикселов;

SHAPE=POLY COORDS="10, 60, 15, 30, 30, 60" создает треугольник с координатами вершин (10, 60), (15, 30) и (30, 60).

Теперь, когда графическая карта описана вами при помощи тега <МАР>, можно интегрировать ее в web-страницу, подготовив соответствующее изображение влюбом графическом редакторе и вызвав его уже знакомой вам командой <IMG> с атрибутом USEMAP:

<IMG SRC="URL" WIDTH="ширина" HEIGHT-''высота" BORDER="0" USЕМАР="#имя_карты">

Обратите внимание на то, что имя карты, заданное атрибутом NAME тега <МАР>,предваряется в атрибуте USEMAP тега <IMG> символом «#». Все остальные атрибуты данной директивы записываются так,же, как обычно.

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

<IMG SRC="/images/bar.gif" BORDER=0 USEMAP="#ny_map">

<MAP NAME="my_map">

<AREA HREF="help.html" АLT="Полный список разделов сайта" SHAPE=RECT

COORDS="0. 0. 118. 28">

<AREA HREF="about.html" ALT="0 нашей компании" SHAPE=RECT COORDS="184.

0. 276. 28">

<AREA HREF="address.html" АLТ="06ратная связь" SHAPE=RECT COORDS="118.

0, 184. 28">

<AREA HREF="guestbook.htmT' ALT="Haшa гостевая книга" SHAPE=RECT

COORDS="276, 0. 373. 28">

</MAP>

Что же, теперь можно смело сказать, что вы владеете основным запасом команд HTML, необходимым для создания собственного web-проекта средней степени сложности. Описание и правила применения других тегов языка разметки гипертекста приведены в приложении 2, которым вы можете воспользоваться по мере необходимости.

  Практикум

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

Теперь, руководствуясь уже готовым эскизом, прорисуйте в редакторе векторной графики, например в Corel Draw, основные графические элементы: заголовок странички, внешний вид навигационных кнопок, разделительные линии и кнопку, которая станет впоследствии ссылкой на адрес электронной почты.

Импортируйте получившуюся картинку в редактор растровой графики, например Adobe Photoshop, разрежьте ее на семь частей (заголовок с баннером, разделительная линия, четыре навигационные кнопки и изображение с надписью «E-mail») с помощью встроенной функции редактора «Изображение > Создать копию» и от кадрируйте рисунок с помощью инструмента «Рамка». Теперь сохраните все получившиеся файлы в формате GIF89a в директории C:\MySite\Images,задав для белого фона ваших изображений свойство прозрачности, и оптимизируйте их по объему с применением специального программного обеспечения, которое вы изучили в пятом уроке, либо с использованием встроенного оптимизатора Adobe Photoshop. Настало время внести соответствующие изменения в html-документы, составляющие ваш сайт.

Откройте Блокнот и создайте пустой текстовый файл с названием shablon.html —он станет вашим шаблоном, в который вы впоследствии сможете помещать любое информационное содержимое. Перенесите туда основной код созданного вами ранее файла index.html, удалив из него все информационное наполнение:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML>

<HEAD>

<TITLE>Moя домашняя страничка</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"

ALINK="#FF0000" BACKGROUND="Images\background.gi f">

</BODY>

</HTML>

Теперь запишите между тегами <BODY> и </BODY> код первичной таблицы, в которой вы затем разместите все необходимые элементы:

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="640">

<TR>

<!-Сюда вставляется заголовок странички -->

<TD COLSPAN="2" WIDTH="400">

</TD>

</TR>

<TR>

<!-Пустая строка для разделительной линии -->

<TD COLSPAN="2" WIDTH="400">

</TD>

</TD>

<TR>

<!-Здесь размещается навигация -->

<TD WIDTH="82" VALIGN="TOP" ALIGN="CENTER">

</TD>

<!-Основное поле для текста -->

<TD WIDTH="318" BGCOLOR="#FFFFFF" VALIGN="TOP">

<P ALIGN="JUSTIFY">

</P>

</TD>

</TR>

<TR>

<!-Еще одна пустая строка для разделительной линии -->

<TD COLSPAN="2" WIDTH="400">

</TD>

</TR>

<TR>

<!-E-mail -->

<TD WIDTH="82"></TD>

<!-Copyright -->

<TD WIDTH="318"></TD>

</TR>

</TABLE>

Обратите внимание на то, что для ячейки, определяющей текстовое поле, при помощи атрибута BGCOLOR задан белый фоновый цвет. Поскольку параметр BORDER данной таблицы установлен нулевым, вы не увидите ее в окне броузера, однако ее общий вид выглядел бы на экране компьютера так, как показано на рис. 6.12.

Рис. 6.12. Расположение ячеек невидимой таблицы

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

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="80">

<TR>

<TD></TD>

</TR>

<TR>

<TD HEIGHT="20"></TD>

</TR>

<TR>

<TD></TD>

</TR>

<TR>

<TD HEIGHT="20"></TD>

</TR>

<TR>

<TD></TD>

</TR>

<TR>

<TD HEIGHT="20"></TD>

</TR>

<TR>

<TD></TD>

</TR>

<TR>

<TD HEIGHT="20"></TD>

</TR>

</TABLE>

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

Теперь запустите программу PictureDiser и разрежьте ваш заголовок в соответствии с эскизом таким образом, чтобы рекламный баннер отображался в отдельной ячейке таблицы — туда вы чуть позже включите код динамической загрузки рекламных изображений из баннерообменной сети. Назначьте в качестве директории, в которую будут помещены фрагменты разрезанного заголовка,папку C:\MySite\Images, затем откройте автоматически сгенерированный программой Picture Diser html-документ в текстовом редакторе и скопируйте код созданной им невидимой таблицы в соответствующую ячейку таблицы файла shablon.html. Подправьте пути к фрагментам заголовка, если это необходимо. Осталось только разместить в соответствующих ячейках подготовленной вами таблицы ссылки на все недостающие графические элементы, связать кнопки навигации гиперссылками с соответствующими документами сайта, назначить изображению конверта гиперсвязь с вашим адресом электронной почты и сохранить файл на диске.

В ячейке таблицы, помеченной вами как «основное поле для текста», разместите информационное содержимое вашего документа подобно тому, как мы это делали в предыдущих уроках. Теперь можно повторно сохранить получившийся файл на диске, но уже под именем index.html. Страничка готова. Другие документы сайта модифицируются из файла shablon.html по аналогичной схеме.

  Что нового мы узнали?

В этом уроке мы научились:


Реклама: