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

Элементы заголовков HTML-документов (МЕТА-определители), способы их записи. Формы, применяемые для передачи данных от html-документа интерактивным элементам сайта. Структура представления таблиц в языке разметки гипертекста. Случаи применения фреймов.

Рубрика Программирование, компьютеры и кибернетика
Вид реферат
Язык русский
Дата добавления 22.02.2010
Размер файла 336,8 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Реферат: «Специальные возможности HTML»

СОДЕРЖАНИЕ

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

Формы

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

Таблицы

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

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

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

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

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

Фреймы

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

Литература

МЕТА-ОПРЕДЕЛИТЕЛИ

МЕТА-определители - это элементы заголовков 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-страницы подобной директивы не гарантирует автоматической индексации страницы поисковым сервером. Для этого необходимо предпринять еще целый ряд действий, например, зарегистрировать ваш сайт в базе данных поисковой машины .Следующая директива, выглядит так:

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

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

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

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

<HEAD>

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

<МЕТА NAME=«description» СОNTENT=«Сайт. посвященный особенностям разведения белых медведей в домашних условиях средней полосы России»>

<МЕТА NAME=«keywords» CONTENT=«белые медведи. БЕЛЫЕ МЕДВЕДИ, медведь. МЕДВЕДЬ. разведение. РАЗВЕДЕНИЕ, животные. ЖИВОТНЫЕ»>

</HEAD>

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

- Разведение белых медведей в домашних условиях.

- Сайт, посвященный особенностям разведения белых медведей в домашних условиях средней полосы России.

- http://www.Bauj_aдpec.ru.

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

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

Рисунок 1 - Элемент формы TEXT

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

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

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

TYPE=«CHECKBOX»

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

Рисунок 2 - Элемент формы CHECKBOX

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

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

<INPUT TYPE=«CHECKBOX» CHECKED NAME=«C01» VALUE=«yes»>

TYPE=«RADIO»

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

Рисунок 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»

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

Рисунок 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>, формирующий на экране одноименный элемент формы (рис. 5).

Рисунок 5 - Элемент формы TEXTAREA

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

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

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

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

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

<TEXTAREA NAME=«message» ROWS=«25» COLS=«40»>

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

</TEXTAREA>

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

Рисунок 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>

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

Рисунок 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>

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

Рисунок 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>

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

Рисунок 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 использованы две таблицы, вложенные одна в другую. Первая задает форматирование ячеек для заголовков таблицы, а вторая - столбцы со значениями спрягаемого глагола. В окне браузера конструкция из двух вложенных таблиц будет выглядеть так, как показано на рис. 10.

Рисунок 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. Это необходимо, поскольку ссылка на HTML , не позволяющий использовать фреймы, может вызвать в некоторых браузерах ошибку при трансляции кода.

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

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

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

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


Подобные документы

  • Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.

    реферат [23,7 K], добавлен 17.08.2007

  • Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).

    курсовая работа [47,9 K], добавлен 24.11.2012

  • Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.

    контрольная работа [126,9 K], добавлен 18.11.2010

  • Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.

    презентация [439,3 K], добавлен 29.01.2014

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

    контрольная работа [29,4 K], добавлен 12.09.2010

  • Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.

    курсовая работа [318,8 K], добавлен 03.01.2014

  • История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.

    дипломная работа [911,3 K], добавлен 25.02.2005

  • Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.

    презентация [4,3 M], добавлен 15.02.2014

  • Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.

    курсовая работа [820,3 K], добавлен 03.03.2011

  • Цель и место размещения документа Web. Язык гипертекстовой разметки. Сценарий и структура Web-документа. Основные редакторы гипертекста. Создание документов в стандарте HTML. Создание заголовков, форматирование и изменение стиля, нумерация списков.

    реферат [34,4 K], добавлен 22.11.2009

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.