2. Самостоятельная работа
Практикум
Создадим следующую Web-страницу, разбитую на фреймы:
<HTML>
<HEAD>
<TITLE> Использование фреймов </TITLE>
</HEAD>
<FRAMESET FRAMESPACING=”0” ROWS="64, *, 64" FRAMEBORDER =”0”>
<FRAME NAME = “top” SCROLLING=”no” TARGET=”” SRC="page_1.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 SRC="page_4.htm" >
<NOFRAMES>
<BODY>
<P ALIGN=”CENTER”>Эта страница содержит фреймы, но Ваш броузер не поддерживает их отображение </P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Сохраните данный листинг документа под именем «fr_1» и сравните полученный результат:
Замечание
На первый взгляд, фреймы кажутся весьма привлекательными с точки зрения удобства обслуживания сайта. Однако на практике оказывается, что объективных недостатков у данной формы представления web – страниц значительно больше, чем достоинств.
Во-первых, фреймы весьма сложны в разработке и настройке: достаточно трудно оптимизировать такую страницу для корректного отображения в разных версиях броузеров со всеми допустимыми экранными разрешениями.
Во-вторых, фреймы распознаются далеко не всеми броузерами.
В-третьих, применение фреймов существенно затрудняет управление навигацией сайта при помощи встроенных в броузер кнопок «Вперед» и «Назад», поскольку они расчитаны на работу с документами размером в целый экран.
И последним, самым существенным недостатком фреймов является то, что использующие их страницы не всегда корректно индексируются поисковыми серверами, т.к. большинство поисковых машин индексируют не страницу, а текст.
Из всего сказанного напрашивается простой и вполне очевидный вывод: использовать фреймы лучше всего тогда, когда это действительно необходимо, например, при создании чатов, досок объявлений. Во всех остальных случаях от их применения лучше отказаться.
FORM (Форма)
Формы применяются для передачи данных от HTML – документа интерактивным элементам сайта, например сценариям CGI. Эти данные претерпевают те или иные изменения, алгоритм которых записан в файле сценария CGI, например, встраиваются в другую web – страницу или передаются по электронной почте. Формы могут содержать широкий диапазон приемов разметки HTML, включая такие виды как однострочные или многострочные текстовые поля, группы радиокнопок, переключатели и меню.
Итак, общий вид записи директивы вызова формы представляется в следующем виде:
<FORM ACTION=”URL” METHOD=”значение”>
Содержание формы, включающее все используемые элементы
</FORM>
Необходимо присутствие начального и конечного тэгов. Внутри элемента FORM разрешается использовать большинство HTML-элементов. Вложенность тега FORM не допускается.
Используются атрибуты:
ACTION - определяет адрес, по которому будет отправлено содержимое формы. Это может быть либо адрес электронной почты, либо путь к CGI скрипту сервера, обслуживающему данную форму.
METHOD - определяет метод передачи данных из формы на сервер: GET (по умолчанию) – с помощью стандартного интерфейса HTTP; POST – по каналам электронной почты.
ENCTYPE - определяет механизм кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded".
TARGET - определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в параметре TARGET элемента A.
Содержание формы описывается тегом <INPUT>, запись которого следующая:
<INPUT TYPE=”тип элемента” NAME=”имя” VALUE=”строка” CHECKED=”параметр”
SIZE=”целое число” MAXLENGTH=”целое число” ALIGN=”значение”>, где
ALIGN – определяет положение элементов формы на web-странице
MAXLENGTH – определяет максимально возможную длину текстового поля в символах для полей ввода текста
SIZE – видимая длина текстового поля в пикселах
CHECKED – устанавливает выделенный объект из нескольких в случае, если значением атрибута TYPE является RADIO или CHECKBOX
VALUE – указывает первоначальное значение текущего поля
NAME – задает уникальное имя для каждого элемента формы, записанное латиницей. Это имя служит для идентификации данных, передаваемых серверу из формы
TYPE – задает типы самого элемента формы.
Типы элементов формы
TYPE=”TEXT”
Представляет собой одностроковое текстовое поле, физический размер которого можно установить с использованием атрибута SIZE, а первоначально введенную в него символическую последовательность – с помощью атрибута VALUE.
Например,
<INPUT TYPE =”TEXT” SIZE=”40” NAME=”user_name” VALUE=”Введите Ваше имя”>
TYPE=”PASSWORD”
Тип, полностью аналогичный предыдущему, за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами «*», чтобы скрыть текст от постороннего зрителя.
TYPE=”CHECKBOX”
Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» - «не отмечено». Данный элемент оперирует булевыми переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы CHECKBOX создает логическую пару значений вида «имя_элемента – состояние» и передает и на сервер. Для установки первоначального состояния элемента (отмечен или нет) используют атрибут CHECKED.
Например,
<INPUT TYPE=”CHECKBOX” NAME=”C01” VALUE=”yes”
TYPE=”RADIO”
Так называемая радиокнопка применяется в случае, когда какая-либо логическая переменная может принимать только одно значение из множества возможных. Все элементы RADIO одной формы обозначаются одним и тем же значением атрибута NAME. Использование радиокнопок требует явного указания значений атрибута VALUE, одна из кнопок должна быть обязательно выделена атрибутом CHECKED.
Например,
<P ALIGN=”CENTER”> Пожалуйста, укажите Ваш возраст </P>
<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”
Отображает обыкновенную прямоугольную кнопку, нажатие на которую приводит к какому-либо действию сервера. С помощью атрибута NAME данному элементу присваивается уникальное имя, атрибут VALUE позволяет изменять надпись, отображаемую на кнопке.
Например, <INPUT TYPE=”BUTTON” VALUE=” Button” NAME=”B1”>
TYPE=”SUBMIT”
Определяет кнопку, при нажатии которой данные из формы передаются серверу. Например,
<INPUT TYPE=”SUBMIT” VALUE=”Отправить!”>
TYPE=”RESET”
Создает кнопку, которая очищает неправильно заполненную текстовую форму. Параметры из значения этой кнопки не передаются на сервер вместе с другими данными формы. Например, <INPUT TYPE=”RESET” VALUE=”Очистить форму”>
TYPE=”FILE”
Генерирует кнопку, при нажатии на которую на экране появляется Проводник Windows, позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя. Данный элемент применяется, в основном, для организации вложений электронной почты, а также для загрузки изображений на сервер. Обычно, рядом с кнопкой отображается текстовое поле, в которое автоматически заносится имя отсылаемого файла и путь к нему на локальном диске. Например,
<INPUT TYPE=”FILE” NAME=”picture”>
TYPE=”IMAGE”
Создает кнопку отсылки, аналогичную элементу SUBMIT, но с использованием графического изображения, созданного пользователем. URL к изображению, играющему роль кнопки, указывается атрибутом SRC, причем сам элемент может содержать собственные атрибуты, аналогичные применяемым в теге <IMG>. Атрибуты NAME и VALUE трактуются так же, как и у элемента SUBMIT.
Например,
<INPUT TYPE=”IMAGE” SRC=”images\button.gif” ALIGN=”BOTTOM” NAME=”submit”
VALUE=”Отправить!”>
Если перед web-мастером встала задача создать текстовое поле с большим числом вводимых символов, используется самостоятельный тег <TEXTAREA>, формирующий на экране одноименный элемент формы. Синтаксис записи данного тега следующий:
<TEXTAREA NAME= “имя элемента” ROWS=”целое число” COLS=”целое число”>
Текст, выводимый в текстовом поле по умолчанию
</TEXTAREA>
Атрибуты ROWS и COLS указывают соответственно максимальное допустимое количество строк вводимого текста и символов в строке. В случае, если текст не умещается в контейнере, по краям поля появляются вертикальные и горизонтальные полосы прокрутки для скроллинга содержимого.
Например,
<TEXTAREA NAME= “message” ROWS =”25” COLS=”40”>
Введите сюда текст сообщения
</TEXTAREA>
Для создания меню выбора в форме web-мастер может использовать тег <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, определяющим количество позиций, видимых на экране одновременно. Например,
<P ALIGN=”CENTER”> Пожалуйста, укажите Ваш город </P>
<CENTER>
<SELECT NAME=”city” MULTIPLE SIZE=”3”>
<OPTION VALUE=”a”> Санкт-Петербург</OPTION>
<OPTION VALUE=”b”> Москва </OPTION>
<OPTION VALUE=”c”> Ростов </OPTION>
<OPTION VALUE=”d”> Волгоград </OPTION>
<OPTION VALUE=”e”> Саратов</OPTION>
</SELECT>
</CENTER>