Специализированные языки разметки документов HTML (стр. 13 из 16)

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 >

Заголовок страницы. Файл page 1. 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 >

Подвал страницы. Файл page 4. 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 =" c 3576-236-2113">

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

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

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