Главная (стр. 7 из 10)
Для создания таблицы используется тэг TABLE, создающий пустую таблицу. Организация структуры таблицы производится по строкам, каждая из которых в свою очередь содержит ячейки. Ячейки автоматически выравниваются внутри строк. Строки задаются тэгами TR, которые должны содержаться внутри тэга TABLE. Ячейки создаются тэгами TD, которые должны помещаться в тело тэга строки TR.
Следующая структура задает таблицу, состоящую из двух строк и трех столбцов (трех ячеек в каждой строке):
<TABLE>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR>
<TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR>
</TABLE>
Форматирование задается для всей таблицы с помощью параметров тэга TABLE и для отдельных ячеек с помощью параметров тэга TD. Оба тэга имеют параметры BACKGROUND, BGCOLOR, ALIGN, HEIGHT и WIDTH. Параметр WIDTH допускает задание ширины таблицы/ячейки как в точках, так и в процентах.
Тэг TABLE имеет параметры:
BORDER - толщина границы таблицы в точках;
CELLPADDING – отступы от границ ячеек до их содержимого в точках;
CELLSPACING – расстояние между ячейками в точках.
Тэг TD имеет параметр VALIGN, задающий характер выравнивания содержимого ячейки по вертикали – TOP, MIDDLE, BOTTOM, BASELINE.
Специфическими параметрами тэга TD являются COLSPAN и ROWSPAN, позволяющие объединять ячейки таблицы. В качестве значений параметра выступают числа, указывающие, на сколько столбцов/строк распространяется ячейка.
Рис.8. Пример использования таблиц
Следующий HTML-документ задает таблицу, представленную на рис.8.
<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY> <TABLE ALIGN=”right” BORDER=”1”
BGCOLOR=”lime” CELLPADDING=”10”>
<TR><TD ROWSPAN=”3”>Общее левое</TD>
<TD ALIGN=”center”>1</TD>
<TD ALIGN=”center”>2</TD></TR>
<TR><TD ALIGN=”center”>3</TD>
<TD ALIGN=”center”>4</TD></TR>
<TR><TD COLSPAN=”2”>Опять вместе</TD></TR>
</TABLE>
</BODY>
</HTML>
Для организации таблиц сложной структуры используют вложенные таблицы. В этом случае внутри ячейки одной таблицы задается другая таблица со своей собственной структурой, а соответствующий тэг TD содержит вложенный в него тэг TABLE.
HTML-формы предназначены для пересылки данных пользователя web-серверу. Форма заключается в тэг FORM, параметры которого указывают, каким именно образом будут передаваться и обрабатываться данные, извлеченные из формы. Формы не могут быть вложенными одна в другую, на одной web-странице можно разместить несколько форм.
Тэг формы является контейнером для тэгов элементов управления INPUT, TEXTAREA и SELECT. Элементы INPUT могут быть разных типов, которые определяются значениями параметра TYPE этого тэга.
Элементы управления предназначены для ввода информации. Для того чтобы данные, введенные с помощью элементов управления, могли быть отправлены серверу, они должны быть поименованы. Имена элементов в рамках одной формы должны быть уникальны (за исключением группы переключателей), они задаются параметром NAME и подчиняются обычным правилам для идентификаторов (могут содержать буквы и цифры, не должны содержать пробелов и начинаются с буквы).
Основные элементы управления, которые могут быть вставлены в форму: поле (строка) ввода текста, область ввода текста, флажки и переключатели, списки, кнопки.
Строка ввода текста. Представляет собой однострочную прямоугольную область на экране, в которую можно вводить текст с клавиатуры. Задается тэгом INPUT, параметр TYPE имеет значение TEXT.
Может быть определен размер строки на экране в символах – параметр SIZE, максимально допустимый размер вводимого текста в символах – MAXLENGTH. Если вводимый текст не укладывается в отведенное ему на экране место, будет осуществлена горизонтальная прокрутка. Пример:
<UNPUT TYPE=”text” NAME=”fio” SIZE=”15”>
Флажок. Представляет собой прямоугольную область на экране, которая может быть отмечена галочкой (флажок включен, элемент выбран) или оставаться пустой (флажок выключен, элемент не выбран). Задается тэгом INPUT, параметр TYPE имеет значение CHECKBOX. Имеет обязательный параметр VALUE, задающий значение, которое будет отослано на сервер, если элемент выбран. Если элемент не выбран, его имя и значение не пересылаются. Параметр CHECKED указывает, что элемент выбран по умолчанию. Пример:
<UNPUT TYPE=”checkbox” NAME=”zao” VALUE=”da”
CHECKED>
Переключатель действует аналогично флажку, но выглядит как кружок, который может быть отмечен точкой. Задается тегом INPUT со значением RADIO параметра TYPE.
Флажки и переключатели могут использоваться как самостоятельные элементы формы, в этом случае их выбор осуществляется независимо друг от друга. Эти элементы могут служить и для выбора одной из нескольких альтернатив. Для организации альтернативного выбора следует вставить несколько элементов типа Флажок или Переключатель, а затем объединить их в группу, задав у каждого элемента одно и то же имя (значение параметра NAME). В этом случае они действуют согласованно, то есть может быть выбран только один элемент из группы, а на сервер отправлено значение, определенное параметром VALUE выбранного варианта. Пример:
<DIV> Пол: М <INPUT TYPE=”radio” NAME=”pol”
VALUE=”муж” CHECKED> Ж <INPUT TYPE=”radio”
NAME=”pol” VALUE=”жен”></DIV>
В этом случае можно выбрать только один из вариантов значения пола. По умолчанию переключатель стоит в положении «М»; если выбор не будет изменен, на сервер будет отравлено значение «муж» элемента pol.
Область ввода текста. Представляет собой прямоугольную область с полосами прокрутки для ввода многострочного текста. Задается тэгом TEXTAREA. Параметры: ROWS – задает высоту области в строках, COLS – задает ширину области в символах.
Список. Осуществляет выбор из заданного списка. Список задается тэгом SELECT, который является контейнером для тэгов OPTION, задающих отдельные элементы списка.
Параметр SIZE тэга SELECT задает вертикальный размер списка в строках. Если его значение равно 1, то список имеет вид выпадающего; при размере в несколько строк он выглядит как список прокрутки. Параметр MULTIPLE задает возможность выбора сразу нескольких элементов списка.
Отдельные значения списка задаются непарным тэгом OPTION. В случае их отсутствия список будет пустым. Текст, который будет отображаться на экране в качестве элемента списка, указывается после тэга OPTION. Значения, передаваемые на сервер, определяются параметром VALUE. Значение по умолчанию указывается параметром CHECKED. Пример:
<SELECT NAME=”vozrast” SIZE=”1”>
<OPTION VALUE=”gr1” CHECKED>до 20
<OPTION VALUE=”gr2”>от 20 до 30
<OPTION VALUE=”gr3”>от 30 до 50
<OPTION VALUE=”gr4”>старше 50
</SELECT>
Список для определения возрастной группы, группа до 20 лет выбрана по умолчанию.
Кнопка сброса. Нажатие кнопки очищает все поля формы. Задается тэгом INPUT со значением RESET параметра TYPE. Надпись на кнопке задается значением параметра VALUE.
Кнопка отправки данных. Нажатие кнопки инициирует передачу данных формы серверу. Задается тэгом INPUT, параметр TYPE имеет значение SUBMIT.
Данные, извлеченные из формы, пересылаются на сервер в виде пар: имя_элемента=его_значение. Назначение данных (действие формы) определяется параметром ACTION тэга формы FORM. Существуют следующие возможности:
· Осуществляется переход на другую страницу. Значением параметра ACTION является URL этой страницы. Данные формы никуда не передаются, форма действует как гиперссылка.
· Данные формы отсылаются по электронной почте. Значением параметра ACTION является схема mailto с указанием адреса электронной почты. Происходит вызов почтового клиента и передача ему данных формы, отправка данных производится в фоновом режиме. Для функционирования этой схемы на клиентском компьютере (т.е. компьютере пользователя, заполняющего форму) должно быть установлено и настроено приложение для работы с электронной почтой (например, Outlook Express).
· Данные формы передаются серверной программе обработки. Это наиболее развитый способ, позволяющий серверу оперативно реагировать на запросы пользователя. Однако он требует выполнения действий на стороне сервера, а значит наличия на сервере специальных обрабатывающих программ. Значением параметра ACTION является URL такой программы.
Для формы может быть определен метод пересылки данных GET или POST – параметр METHOD и тип кодировки данных – параметр ENCTYPE.
Для отсылки данных на адрес электронной почты обязательно должны быть указаны: в качестве значения параметра ACTION – схема mailto, значение параметра METHOD – POST, значение параметра ENCTYPE – TEXT/PLAIN. В целом открывающий тэг формы может выглядеть следующим образом:
<FORM METHOD=”post” ENCTYPE=”text/plain”
ACTION=”mailto:csp@engec.ru?subject=вопрос по
дисциплине”>
Данные этой формы будут отсылаться на адрес электронной почты csp@engec.ru, а тема письма будет определена как «вопрос по дисциплине».
Приложение 2
ТЕХНОЛОГИЯ СОЗДАНИЯ WEB-УЗЛА В MS FRONTPAGE 2003