VI (Audio Video Interleaved - "перемежающиеся аудио и видео", имеет расширение. avi) - применяется в системе Windows для хранения и воспроизведения аудио - и видеоданных.

QuickTime (имеет расширения. mov или. qt) - наиболее популярный видеоформат, разработанный компанией Apple. Этот формат не требует длительной загрузки по сети, обеспечен множеством модулей.

Внедрение видео (элемент EMBED). Простейшим способом размещения видео является использование тега <EMBED>. Форма его записи, атрибуты и допустимые значения атрибутов такие же, как и в случае вставки аудиофайлов. Например,

В результате загрузки видеофайла в окне броузера Internet Explorer появится панель проигрывателя Windows Media с набором управляющих кнопок и начнется воспроизведение видеоклипа.

8.3 Использование элемента IMG по воспроизведению видео. При просмотре страницы в Internet Explorer для вставки видеоклипа можно воспользоваться элементом <IMG>. Для этого вместо атрибута src в тег <IMG> нужно подставить атрибут dynsrc, значением которого является URL видеофайла.

При внедрении видео с помощью элемента <IMG> панель управления проигрывателя на экран не выводится (по умолчанию).

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

start - определяет момент начала включения клипа. Если присвоить этому атрибуту значение fileopen, воспроизведение начнется сразу после загрузки видеофайла. Если присвоить значение start="mouseover", видео будет запущено при наведении на изображение указателя мыши;

loop - задает число воспроизведений видеофайла. Если значение этого атрибута равно infinite (или - 1), видео будет циклически повторяться все время, пока пользователь находится на странице;

loopdelay - устанавливает время задержки (в миллисекундах) перед началом воспроизведения;

controls - управляет отображением панели проигрывателя (по умолчанию панель управления не отображается).

Гиперссылки на видео. Задание гиперссылки на видеофайл ничем не отличается от формирования любых других ссылок. Например,

<А href=”speed. avi”>

<IMG src=”ski. gif”

title=”Для просмотра щелкните по пиктограмме”>

</А>

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

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

Структура html-документа, содержащего фреймы:

<HTML>

<HEAD>

<TITLE>

Заголовок

</TITLE>

</HEAD>

<FRAMESET rows=”значение”

cols=”значение”

frameborder=”значение”

border=”значение”

bordercolor=”значение”>

<FRAME name=”имя”

target=”значение”

scrolling=”yes, no или auto”

src=”URL”

frameborder=”значение”

noresize

marginwidth=”значение”

marginheight=”значение”>

Текст, отображаемый в броузерах,

не поддерживающих фреймы.

</NOFRAMES>

</FRAMESET>

</HTML>

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

Атрибут тега <FRAMESET>:

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

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

frameborder определяет границы фреймов. Параметр этого атрибута может принимать одно из двух значений: 1, если разделители нужны (используется по умолчанию), или 0, если программист желает сделать их невидимыми.

border указывает толщину разделителей в пикселах.

bordercolor определяет цвет разделителей.

Параметры атрибутов rows и cols можно задавать в пикселах, процентах и в относительных длинах. Если атрибут rows в теге <FRAMESET> не указан, каждый столбец будет занимать всю длину страницы, если не указан атрибут cols, каждая строка растянется на всю видимую ширину экрана. Параметры фреймов задаются слева направо для горизонтальных элементов и сверху вниз для вертикальных. Например, запись <FRAMESET cols="50%, 50%"> разделит страницу вертикально на две равные части, запись <FRAMESET rows="250, 10%, *"> задаст горизонтальное разделение страницы на три участка: первый - с фиксированной высотой 250 пикселов, второй - высотой в 10% от оставшегося пространства, третий же займет все пространство, которое останется свободным после создания первых двух окон. Разделения web-страницы на сетку 2х3 ячейки можно добиться, например, применением следующих значений атрибутов директивы <FRAMESET>:

<FRAMESET rows="40%, 60%"

cols="33%, 34%, *">.

Атрибуты тега <FRAME>:

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

target - содержит информацию о целевом фрейме (значение по умолчанию - "соntents"). Целевые фреймы для отображения документов можно назначать не только в зависимости от их позиции в окне броузера. Целевой фрейм определяется дополнительными значениями атрибута: _blank - устанавливает загрузку документа в новое окно; _self - документ, с которым установлена гиперсвязь, открывается в текущем фрейме; _parent - отображение осуществляется в родительском окне фреймов, если текущий фрейм не имеет предков, то в текущем окне; _top - при активизации гиперссылки фреймы перестают отображаться, а содержимое целевого документа выводится в отдельном окне.

scrolling - определяет наличие ("yes"), отсутствие ("nо") или отображение по мере необходимости ("auto") полос прокрутки в текущем фрейме.

src - задает адрес открываемой в данном фрейме страницы.

frameborder - определяет границы фреймов и аналогичен соответствующему атрибуту тега <FRAMESET>

noresize - устанавливает запрет на изменение пользователем размеров окна фрейма.

marginwidth определяет размер в пикселах пустого пространства, оставляемого во фрейме в качестве правого и левого полей.

marginheight задает верхний и нижний отступы.

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

9.2 Целевые фреймы и элементы привязки
При активизации ссылки выполняется загрузка страницы в определенный фрейм, который называется целевым. Целевому фрейму нужно присвоить уникальное имя с помощью атрибута name тега <FRAME>.

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

<А href="URL"

target=”значение”>

Текст или элемент IMG

</A>

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

9.3 Базовый фрейм
Документ, на который указывает ссылка, загружается в целевой фрейм. Этот фрейм определяется атрибутом target. Для того, чтобы все документы, соответствующие ссылкам, загружались в один и тот же фрейм, можно воспользоваться элементом <BASE>.

Фрейм, в который производится загрузка по гиперссылкам, называется базовым фреймом. Он задается значением атрибута target в одиночном теге <BASE>. То есть, задание базового фрейма позволяет только один раз в документе указать конкретный фрейм загрузки ссылок, а не записывать его в каждом элементе привязки.

9.4 Плавающие фреймы
Используются для размещения в обычном HTML-документе (в пределах элемента <BODY>) можно с помощью элемента IFRAME. Фреймы, создаваемые этими элементами, называются плавающими. Задание плавающего фрейма аналогично вставке обычного рисунка.

Формат задания плавающего фрейма:

<IFRAMEname=”значение”

src=”URL”

width=”значение”

height=”значение”

align=”значение”

marginwidth=”значение”

marginheight=”значение”

frameborder=”значение”

scrolling=”значение”>

</IFRAME>

В отличие от обычных фреймов, размеры плавающего фрейма не могут быть изменены пользователем.

Атрибуты тега:

name - задает имя целевого фрейма;

src - определяет адрес загружаемого файла;

width - определяет ширину плавающего фрейма;

height - определяет высоту плавающего фрейма;

align - устанавливает выравнивание фрейма относительно окна броузера;

marginwidth, marginheight - определяют размеры свободных полей между рамкой фрейма;

frameborder - устанавливает вывод рамки фрейма;

scrolling - определяет наличие полосы прокрутки.

Пример 1. Компоновка страницы, используя фреймы.

Файл frame1. html

<HTML>

<HEAD>

<TITLE>Первый вариант компоновки</TITLE>

</HEAD>

</FRAMESET>

Изображение фреймов невозможно

</NOFRAMES>

</FRAMESET>

</HTML>

Файл page1. html

<HTML>

<BODY>

Заголовок страницы. Файл page1. html

</BODY>

</HTML>

Файл page2. html

<HTML>

<BODY>

Меню<BR>

<A href="page3. html" target="contents">Пункт 1</A><BR>

<A href="page5. html" target="contents">Пункт 2</A><BR>

<A href="page6. html" target="contents">Пункт 3</A><BR>

</BODY>

</HTML>

Файл page3. html

<HTML>

<BODY>

Пункт меню 1. Файл page3. html

</BODY>

</HTML>

Файл page4. html

<HTML>

<BODY>

Подвал страницы. Файл page4. html

</BODY>

</HTML>

Файл page5. html

<HTML>

<BODY>

Пункт меню 2. Файл page5. html

</BODY>

</HTML>

Файл page6. html

<HTML>

<BODY>

Пункт меню 3. Файл page6. html

</BODY>

</HTML>

Пример 2. Компоновка страницы, используя базовый фрейм.

Файл frame2. html

<HTML>

<HEAD>

<TITLE>Второй вариант компоновки</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Файл page2. html

<HTML>

<BODY>

Меню

<A href="page3. html">Пункт 1</A>

<A href="page5. html">Пункт 2</A>

<A href="page6. html">Пункт 3</A>

</BODY>

</HTML>

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

Недостатки фреймовой структуры документа.

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

Во-вторых, фреймы распознаются не всеми браузерами.

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

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

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

10. Формы
10.1 Формат задания формы
Формой называется объединение логически связанных элементов управления в документе. Формы являются основным средством для ввода и обработки данных.

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

Формат задания формы:

<FORM name="имя_формы"

action="URL"

method="метод_передачи_данных"

enctype="тип_кодировки"

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

Содержание формы

</FORM>

В качестве параметра атрибута action в кавычках указывается строка вызова скрипта, который использует данная форма (при нажатии кнопки Submit), например, "http: // www. myserver. by/имя_сцена-рия. php". Если в качестве значения атрибута action указать обращение к электронной почте, например,

action=”mailto: ivanov@gsu. unibel. by”

браузер автоматически отправит результаты, введенные в форму, по указанному адресу. Для корректной интерпретации данных используется параметр enctype=”text/plain”

Если же атрибут action отсутствует, то в качестве значения action подставляется URL самого документа, т.е. после отправки формы текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Значение атрибута method устанавливает метод передачи данных из формы на сервер: "GET" с помощью стандартного интерфейса HTTP или "POST" - по каналам электронной почты.

При задании значения "GET" передача данных происходит в один этап адресной строкой. Пары "имя=значение" присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (&). Метод GET используется для передачи данных с небольших форм с короткими полями.

При задании значения "POST" передача данных происходит, как минимум, в два этапа: браузер устанавливает связь с сервером, указанным в атрибуте action; затем отдельной передачей происходит посылка дополнительных данных. Переданные данные не отображаются в командной строке. Метод POST используется для передачи данных форм, имеющих много длинных полей.

Атрибут enctype устанавливает тип для данных, отправляемых вместе с формой. Обычно не требуется определять значения параметра enctype, однако если используется поле для отправки файла (INPUT type=file), то следует задать параметр enctype =”multipart/form-data”.

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

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

<INPUT type="тип_элемента"

nаme="имя"

value="строка"

checked

size="целое_число"

maxlength="целое_число"

align="значение"

scr="URL"

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

Атрибуты тега INPUT:

type задает тип элемента формы;

name задает уникальное имя для каждого элемента формы;

value указывает первоначальное значение текущего поля;

checked устанавливает выделенный объект из нескольких в случае, если значением атрибута type является radio или checkbox;

size определяет размер текстового поля в символах;

maxlength определяет максимально возможную длину текстового поля в символах для полей ввода текста;

align определяет положение элементов формы на web-странице;

src используется совместно с атрибутом type=image и задает URL нужного изображения;

tabindex позволяет установить порядок перемещения фокуса по элементам формы при нажатии клавиши Tab.

10.2 Элементы формы
На рис.10.1 представлены основные элементы формы.

Рис.10.1 Основные элементы формы

Однострочное текстовое поле. Оно называется полем ввода или полем редактирования и предназначено для ввода пользователем строки текста. Формат записи:

<INPUT type="text"

nаme="имя_поля"

value="начальный текст, содержащийся в поле"

size="ширина поля"

maxlength="максимальное количество вводимых символов">

Пример:

<INPUT type=text

size=40

name=user_name

value=”Введите ваше имя”>

Поле для ввода пароля. Это обычное текстовое поле, вводимый текст в котором отображается звездочками. Формат задания:

<INPUT type=password

nаme="имя_поля"

value="начальный текст, содержащийся в поле"

size="ширина поля"

maxlength="максимальное количество вводимых символов">

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

<INPUT type=hidden

nаme="имя_поля"

value="текст, содержащийся в поле">

Пример:

<INPUT type=hidden

name="form1"

value="c3576-236-2113">

Многострочное текстовое поле. Используется для передачи текста большого размера. Формат задания:

<TEXTAREA name="имя элемента"

rows="целое число"

cols="целое число"

wrap=значение

disabled

readonly>

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

</TEXTAREA>

Атрибуты тега:

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

wrap управляет переносом слов и имеет следующие значения:

wrap=off - запрет автоматического переноса; при этом сохраняются переносы, определенные пользователем;

wrap=virtual - перенос слов при отображении броузером, а серверу введенные данные передаются одной строкой;

wrap=physical - сохраняется перенос слов как при отображении броузером, так и при передаче серверу.

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

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

Пример:

<TEXTAREA name="message"

rows=25

cols=40>

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

</TEXTAREA>

Поле выбора файлов. Генерирует на экране кнопку, при нажатии на которую на экране появляется Проводник Windows, позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя. Рядом с кнопкой отображается небольшое текстовое поле, куда автоматически заносится имя отсылаемого файла и путь к нему на локальном диске. Поле выбора файлов работает корректно лишь при методе пересылки Post и формате кодировки multipart/form-data. Формат задания:

<INPUT type=file

nаme="имя"

size="ширина поля"

maxlength="максимальная длина текста">

Пример:

<FORM enctype="multipart/form-data"

action="URL"

method=POST>

Введите имя файла: <BR>

</FORM

Флажки. Флажки используют, когда необходимо выбрать два или более варианта из предложенного списка. Элемент представляет собой простую форму выбора, принимающую одно из двух состояний: "отмечено" - "не отмечено". Несколько флажков могут объединяться в группу, которая будет отвечать набору параметров выбора. Данный элемент оперирует с булевыми переменными, то есть переменными, каждая из которых может принимать значение true или false. Формат задания:

<INPUT type=checkbox

nаme="имя флажка или группы флажков"

value="значение установленного флажка"

checked

title="всплывающая подсказка">

По умолчанию начальное положение флажка считается не установленным. Чтобы задать начальное положение установленного флажка, надо дополнить его атрибутом checked.

Значением установленного флажка является строка, заданная атрибутом value.

Пример задания группы флажков:

<INPUT type=checkbox

name=system

value="WXP" checked> Windows XP<BR>

<INPUT type=checkbox

name=system

value="W2000"> Windows 2000<BR>

<INPUT type=checkbox

name=system

value="W98"> Windows 98<BR>

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

Пример связывания надписи с флажком:

<INPUT type=checkbox

id=WindowsXP

name=system

value="WXP" checked>

<LABEL for=WindowsXP>Windows XP</LABEL><BR>

<INPUT type=checkbox

id=Windows2000

name=system

value="W2000">

<LABEL for=Windows2000> Windows 2000</LABEL><BR>

<INPUT type=checkbox

id=Windows98

name=system

value="W98">

<LABEL for=Windows98> Windows 98</LABEL><BR>

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

<INPUT type=radio

nаme="имя переключателя или группы"

value="значение установленного переключателя"

checked

title="всплывающая подсказка">

Все элементы radio одной группы обозначаются одним и тем же значением атрибута name. Использование радиокнопок требует явного указания значений атрибута value, одна из кнопок должна быть выделена атрибутом checked. Если атрибут checked не присвоен ни одному из переключателей группы, браузер при загрузке установит по умолчанию первый переключатель. При обработке формы на сервере будет отправлено значение установленного переключателя.

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

<INPUT type=radio

name=DVD

value="DVDR" checked> DVD-R<BR>

<INPUT type=radio

name=DVD

value="DVDRW" checked> DVD-RW<BR>

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

Пример связывания надписи с переключателем:

<INPUT type=radio

id=disk1

name=DVD

value="DVDR" checked>

<INPUT type=radio

id=disk2

name=DVD

value="DVDRW" checked>

Кнопки. Это элементы управления, которые используются для представления формы (кнопка submit), сброса данных формы (кнопка reset), создания эффектов для кнопки (кнопка button). Кнопку можно создать двумя способами:

1. Использование тега INPUT. Формат задания:

<INPUT type=button

nаme="имя кнопки"

value="надпись на кнопке">

2. Использование тега BUTTON. На таких кнопках можно размещать любые элементы HTML, в том числе изображения и таблицы и изменять вид кнопки. Формат задания:

Надпись или изображение

</BUTTON>

В HTML предусмотрены два типа кнопок, которые создаются без использования значения button. Это кнопки специального назначения: Подача запроса (submit) и Сброс (reset).

Кнопка submit предназначена для запуска процедуры передачи формы на сервер. Формат задания:

<INPUT type=submit

nаme="имя кнопки"

value="надпись на кнопке">

или

Надпись на кнопке

</BUTTON>

Если атрибут value отсутствует, то кнопка по умолчанию имеет надпись "Подача запроса". В версиях Internet Explorer 4.0 и выше кнопка submit может работать как кнопка по умолчанию, то есть она активизируется при нажатии клавиши Enter. В форме можно применять несколько кнопок submit.

Кнопка reset предназначена для приведения формы в начальное положение (сброс всех введенных данных). Формат задания:

<INPUT type=reset

nаme="имя кнопки"

value="надпись на кнопке">

или

Надпись на кнопке

</BUTTON>

Если атрибут value отсутствует, то кнопка по умолчанию имеет надпись "Сброс".

Кнопка с изображением. Создает кнопку отсылки, аналогичную элементу submit, но с использованием графического изображения. Обычно применяется в случаях, когда стандартная серая прямоугольная кнопка "не вписывается" в дизайн сайта. Формат записи:

<INPUT type=image

nаme="имя кнопки"

scr="URL изображения"

value="надпись на кнопке">

В этом случае тег INPUT может содержать все атрибуты тега IMG.

Пример задания кнопок:

1. Обычная кнопка <INPUT type=button name=press value="Нажми меня! ">
2. Обычная кнопка <Button> Кнопка с текстом </Button>
3. Кнопка с рисунком <Button> <IMG src="tips. gif" align=absmiddle> Кнопка с рисунком </Button>
4. Кнопка submit <INPUT type=submit value="Отправить">
5. Кнопка reset <INPUT type=reset value="Очистить">
6. Кнопка с изображением <INPUT type=image src="tips. gif">

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

раскрывающийся список, представляющий собой однострочное поле т треугольной стрелкой, которая раскрывает список;

поле-список, в котором на экран выводится заданное число строк; для просмотра всех срок список может быть снабжен полосой прокрутки;

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

Формат записи:

<SELECT name="имя списка"

size="целое число"

multiple>

Пункт 1

</OPTION>

</SELECT>

Атрибуты тега:

multiple включает режим выбора нескольких элементов из списка, т.е. определяет список со множественным выбором;

size устанавливает высоту списка. Если значение size=1, то список становится раскрывающимся. При добавлении параметра multiple список отображается как "крутилка";

selected делает текущий элемент списка выделенным.

Примеры задания списка:

1. Раскрывающийся список <SELECT name=СD> <OPTION value=1>CD-R</OPTION> <OPTION value=2>CD-RW</OPTION> </SELECT>
2. Список множественного выбора <SELECT multiple size=1> <OPTION value=1>CD-R</OPTION> <OPTION value=2>CD-RW</OPTION> </SELECT>
3. Список единственного выбора <SELECT size=2> <OPTION value=1>CD-R</OPTION> <OPTION value=2>CD-RW</OPTION> </SELECT>

Группирование элементов управления. Чтобы страница имела законченный вид, элементы формы должны быть распределены по группам. Формат задания группы:

Легенда группы элементов

</LEGEND>

…

</FIELDSET>

Теги <LEGEND> вводят надпись, которая помещается в разрыв рамки, обрамляющей группу.

Пример:

<LEGEND>Флажки</LEGEND>

Windows XP<BR>

Windows 2000<BR>

Windows 98<BR>

</FIELDSET>

11. Мета-определители

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

МЕТА-определители записываются в заголовке документа HTML между тегами <НЕАD> и </HEAD> после тега <TITLE>.

Существуют два вида МЕТА-определителей: МETA-определители, использующие атрибут name и МЕТА-определители, использующие директиву http-equiv.

11.1 МETA-определители, использующие атрибут name
Формат записи:
<МЕТА name="значение"
сontent="значение2>
Виды META-определителей:
<МЕТА name="description"
соntent="краткое описание содержимого сайта">
Эта директива применяется для облегчения и ускорения процесса индексации ресурса поисковыми машинами. Большинство автоматических поисковых серверов оснащены специальными программными модулями, отыскивающими во Всемирной сети web-страницы, соответствующие введенному пользователем тематическому запросу. В этом случае в динамически создаваемый поисковым сервером файл отчета включается либо информация, встречающаяся первой в тексте документа HTML, либо данные, указанные в теге МЕТА. Таким образом, наличие МЕТА-определителя увеличивает шансы ресурса попасть в первую десятку сайтов, которые "найдёт" поисковый сервер.
<МЕТА name="keywords"
content="перечень ключевых слов через запятую">
Тег содержит перечисление ключевых слов, на которые, должны "реагировать" поисковые машины, включая сайт в файл отчета. Не рекомендуется указывать в нем более тридцати ключевых слов подряд. Поскольку ряд поисковых машин не учитывает регистр, в котором записаны ключевые слова, рекомендуется указывать в поле content оба варианта их записи: как в строчном, так и в заглавном регистре. Хорошим тоном считается указывать в атрибуте content описание сайта на русском и английском языках.
Пример:
<НЕАD>
<ТIТLЕ>Разведение белых медведей в домашних условиях</ТIТLЕ>
<МЕТА name="description"
соntеnt=”Cайт, посвященный особенностям разведения белых медведей в домашних условиях">
<МЕТА name="keywords"
content="белые медведи, БЕЛЫЕ МЕДВЕДИ, медведь, МЕДВЕДЬ, разведение, РАЗВЕДЕНИЕ, животные, ЖИВОТНЫЕ">
</НЕАD>
<МЕТА name="abstract"
соntеnt="описание содержимого сайта и перечень ключевых выражений через запятую">
Директива рассчитана на обработку поисковыми серверами, имеющими отличный от стандартного алгоритм индексации html-документов. Данный тег используется редко.
<МЕТА name="subject"
content="главная тема сайта, выраженная одним-двумя словами">
<META name="page-type"
content="Тип, к которому относится страница">
Директива применяется с целью автоматического занесения ссылки на сайт в какую-либо тематическую рубрику поискового сервера. Наиболее "нейтральным" вариантом представления поля content является фраза "information resource".
<МЕТА name="distribution" content="Global">
<МЕТА name="rating" content="General">
Последние два МЕТА-тега определяют область действия информации, представленной на сайте. Рекомендуется оставить их "как есть".
<META name="title" content="Зaгoлoвoк web-cтpaницы">
<МЕТА name="page-topic"
content="3aголовок wеb-страницы">
Эти МЕТА-определители предназначены для поисковых машин, не умеющих работать с тегом <TITLE>. В поле content данных директив можно скопировать текстовое содержимое, записанное в заголовке страницы.
<МЕТА name="site-created" content="Дата">
Декларирует дату создания web-сайта, которая иногда отображается в файле отчета некоторых поисковых серверов в качестве дополнительной информации о ресурсе. Дата записывается в формате
МЕСЯЦ-ДЕНЬ-ГОД с ведущим нулем, например, 16-12-2006.
<МЕТА 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">
Тег запрещает поисковому серверу следовать по гиперссылкам, установленным на данной странице.
<META name="content-language" content="язык">
Директива декларирует язык, на котором представлена опубликованная на сайте информация. В поле content вносится название языка, написанное в английской транскрипции, например "russian" или "english".
<МЕТА name="resource-type" content="document">
Указание на тип ресурса. Рекомендуется оставить без изменений.
<МЕТА name="audience" content="all">
Определяет аудиторию сайта.
<МЕТА name="robots" content="index, аll">
Указания на правила регистрации ресурса поисковыми серверами. При указании в поле content параметра "all" будут проиндексированы все документы сайта, при указании параметра "index" - только индексные страницы.
<МЕТА name="Copyright"
соntent="Имя вебмастера, Copyright 2006">
<МЕТА name="Autor"
content="Имя вебмастера, Copyright 2006">
Декларируют ссылку на авторские права. Эта информация отображается в файле отчета некоторых поисковых машин.
<МЕТА name="reply-to"
content="aдpec электронной почты">
Указание на адрес электронной почты автора проекта. Иногда показывается в файлах отчета поисковых серверов.
<МЕТА name="Owner"
content="Название компании или имя владельца">
<МЕТА name="Address" content="Адрес офиса">
<МЕТА name="Owner-type"
content="corporation, company/small или personal">
Информация о владельце ресурса. В поле content первого МЕТА-определителя заносится полное название фирмы-владельца ресурса или имя владельца, если он - частное лицо, второй тег содержит адрес офиса, по которому можно обратиться за дополнительной информацией, третий указывает на тип фирмы: corporation - для больших корпораций, company/small - для малых компаний и, наконец, personal - для частных предпринимателей и физических лиц.
<МЕТА name="Publisher-name"
content="Название компании или имя лица, опубликовавшего сайт">
<МЕТА name="Publisher-type"
content="corporation. company/small или personal">
<МЕТА name="Publisher - location" content="ru">
Для первых двух тегов справедливо все то же самое, что и для предыдущих МЕТА-определителей, за исключением того, что они представляют информацию не о владельце ресурса, а о том, кто его опубликовал. В общем случае издатель web-страницы не обязательно должен быть ее владельцем, например, когда какая-либо фирма заказывает себе сайт у стороннего web-мастера или дизайн-агентства. Как раз на такую ситуацию и рассчитаны данные директивы. В поле content МЕТА-тега с именем "Publisher-location" заносится обычно обозначение домена первого уровня страны издателя сайта.
<META name="home-url" content="URL">
Указывается адрес ресурса в сети Интернет, который издатель сайта считает своей домашней страничкой. Обычно этот тег используется для представления URL разработчика web-сайта, если сам сайт был создан для сторонней фирмы или частного лица.
<МЕТА name="Generator" content="Haзвание программы">
Редкий и абсолютно бесполезный тег, не несущий ни малейшей смысловой нагрузки. Данный МЕТА-определитель был придуман разработчиками html-редакторов для рекламы собственных программных продуктов. Практически все программы, предназначенные для верстки web-страниц, вставляют этот тег в код HTML автоматически, не спрашивая разрешения у пользователя.
11.2 МЕТА-определители, использующие директиву http-equiv
В отличие от первого вида МЕТА-тегов, имеющих чисто информационное назначение, теги второй категории играют определенную роль при передаче документов посредством протокола HTTP. Эти директивы используются для придания web-страницам некоторых примечательных свойств, которые в ряде случаев могут быть полезны web-дизайнеру.
<META http-equiv="Refresh" content="N; URL=адрес">
Автоматический переход броузера по указанному в поле content адресу через N секунд. Данная функция, называемая "редиректом", или "перенаправлением" пользовательского броузера на какой-либо ресурс, применяется тогда, когда сайт сменил адрес, переместился на другой хост. В этом случае на сервере со старым адресом размещается файл index. html, содержащий описанную выше директиву и соответствующую поясняющую надпись, например: "Извините, наш сайт переехал по адресу <адрес>. Через несколько секунд данная страница будет загружена автоматически". Иногда такая команда применяется также для автоматического переключения пользователя с заглавной ("splash") на стартовую страницу сервера.
<МЕТА http-equiv="Refresh" content="N">
Текущая web-страница будет автоматически перезагружаться в броузер каждые N секунд.
<МЕТА http-equiv="Expires"
content="Tue, 02 Jan 2007 01: 00: 00 GMT">
Определяет дату "устаревания" страницы для протокола HTTP. Зачастую в данной директиве указывают заведомо устаревшую дату: такой подход позволяет избежать кэширования документа на диск. Большинство броузеров сохраняют загружаемые из Интернета html-документы в специальную папку на жестком диске пользовательского компьютера при повторном обращении к сайту открывают эту web-страницу уже с винчестера, что позволяет значительно сократить время ее считывания. Данная процедура называется "кэшированием".
<МЕТА http-equiv="Content-type"
content="text/html: charset=KOI8-R">
Осуществляет жесткую установку так называемого "чар-сета", или пользовательской кодировки страницы. Встретив в заголовке документа такую команду, пользовательский броузер автоматически переключается на заданную в теге кодировку. Однако практически все современные http-серверы поддерживают функцию автоматического изменения кодировки документов в зависимости от установленных в пользовательском броузере предпочтений.
<МЕТА http-equiv="Content-type"
content="text/html">
На запрос броузера сервер сформирует ответ с указанием, что данная страница является HTML-документом.
<МЕТА http-equiv="Content-Script-Type"
content="text/javascript">
Определяет применение сценариев на языке JavaScript.
<МЕТА http-equiv="Content-style-Type"
content="text/css">
Определяет, что в документе используются фрагменты CSS.
Литература
Айзекс С. Dynamic HTML / Пер. С англ. - СПб.: BHV. - Санкт-Петербург, 2000. - 496 с.: ил.
Браун М.Р., Хоникатт Д. Использование HTML 4 / Пер с англ. - 4 изд., спец. - М.: Вильямс, 2000. - 784 с.: ил.
Гаевский А.Ю., Романовский В.А. Самоучитель по созданию Web-страниц: HTML, JavaScript и Dynamic HTML. - К.: А.С.К., 2002. - 472 с.
Холмогоров В. Основы web-мастерства. Учебный курс. - СПб.: Питер, 2001. - 352 с.: ил.
Пауэл Т. HTML: справочник программиста / Т.А. Пауэл, Д. Уитворт. - М.: АСТ, 2003. - 383 с.
Полянский А. Хитрости, трюки и секреты создания web-страниц на базе языка гипертекстовых документов HTML 3.0-4.0 - М.: Познавательная книга плюс, 2000. - 240 с.

Страницы: 1, 2, 3, 4