Методические указания ППП. 2 часть
.pdfвлево), CENTER (выравнивание по центру) и RIGHT (вправо);
Valign- устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);
Width - определяет ширину ячейки в пикселах; Height - определяет высоту ячейки в пикселах;
Colspan - устанавливает "размах" ячейки по горизонтали. Т.е. COLSPAN="3", например, означает, что ячейка будет простираться на 3 колонки;
Rowspan - устанавливает "размах" ячейки по вертикали. ROWSPAN= "2" означает, что ячейка занимает две строки таблицы;
Bgcolor - устанавливает цвет фона ячейки; Background - заполняет фон ячейки изображением.
Например: <html>
<title>Таблицы</title> <body>
<table border=3 align=center rules=cols bgcolor=cc00aa>
<caption align=center>Ведомость<caption> <tr>
<td>Студенты</td> <td>Информатика</td>
<td>химия</td> </tr>
<tr> <td>Иванов</td>
<td align=center>4</td> <td align=center>5</td>
</tr>
<tr> <td>Петров</td>
<td align=center>5</td> <td align=center>4</td>
</tr>
<tr> <td>Сидоров</td>
<td align=center>4</td> <td align=center>4</td>
</tr>
</table>
</body>
</html>
В приведенном примере четыре строки по три ячейки в каждой.
Задание 1.
1.Создайте Html документ с кодом, приведенным выше.
2.Самостоятельно измените таблицу, задав границу, равную
6пикселам.
3.Установите горизонтальное выравнивание текста в ячейках по правому краю.
4.Закрасьте ячейки с оценкой «пять» красным цветом, а с оценкой «четыре» - желтым.
5.Создайте таблицу по образцу, приведенному ниже, соблюдая выравнивание в ячейках.
Имя и должность |
Оклад |
|
|
|
|
Сергей |
Директор |
1000 |
|
||
|
|
|
Петр |
Бухгалтер |
800 |
|
||
|
|
|
Иван |
|
50 |
|
|
|
Андрей |
Рабочий |
70 |
|
||
|
|
6. Таблицы можно использовать и как способ позиционирования элементов на странице, например, размещая в ячейках таблицы не текст, а графические объекты(рисунки). В этом случае параметр Border задается равным 0, параметры CELLSPACING и CELLPADDING
также равными 0, а размер ячейки задается фиксировано, в зависимости от размера объекта, который будет размещен в ней.
Например:
<table width=600 align=center border=0 cellspacing=0 cellpadding=0>
<tr align=center>
<td width=200><img src=final.gif border=0></td> <td width=200> </td>
<td width=200><img src=final.gif border=0></td> </tr>
</table>
7.Самостоятельно создайте две страницы, разместив на них рисунки, как показано ниже.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
а) |
|
Рис1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Рис2 |
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Рис3 |
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Рис4 |
|
|
|
б) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Рис1 |
|
Рис2 |
|
Рис3 |
|
|
|||||||
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
Рис4 |
|
|
Рис5 |
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
Рис6 |
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8.Используя табличную структуру, соберите рисунок, разрезанный на 9 частей.
Контрольные вопросы:
1.Каким образом организованы данные в таблице?
2.Что может содержаться в ячейках таблицы?
3.Достаточно ли указать только тэг <TABLE> </TABLE> для создания таблицы в HTML документе. Почему?
4.Какие атрибуты может содержать метка <TABLE>? Для чего они служат?
5.Возможно ли в качестве фона в таблице установить рисунок? Каким способом это можно сделать?
6.Для каких целей можно использовать таблицы в HTML документе?
Лабораторная работа N6.
Цель работы: получение практических навыков по созданию форм в HTML документе
Краткие теоретические сведения:
Форма представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере. Другая программа под названием
Common Gateway Interface (CGI) обрабатывает ее. Таким
образом, пользователь может интерактивно взаимодействовать с сервером Web через Internet.
Для создания html-формы используется тэг <FORM></FORM>. У него могут быть следующие параметры:
NAME - определяет имя формы, обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм.
ACTION - обязательный параметр, он задает путь к скрипту, который будет запущен веб-сервером.
METHOD - определяет способ отправки параметров формы. Принимает значение GET или POST.
TARGET - определяет окно, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна.
Например:
<form method=POST action=/cgi-bin/gb_show.exe>
<input type=text name=text value="Значение по умолчанию" size=40>
<input type=submit value=Опубликовать> </form>
Здесь будет создана форма, которую будет обрабатывать программа gb_show.exe. Параметр method, указывает каким способом передаются параметры в программу gb_show.exe. Какой именно способ указывать, зависит от программы, которая будет обрабатывать вашу html-форму.
Внутри тэга FORM могут быть следующие элементы:
поле ввода для строки
поле ввода для пароля
кнопки
радиокнопки
список
поле ввода для текста
checkbox - поле ввода для атрибутов типа Boolean
рисунок
Поле ввода для строки
Поле ввода для строки создается командой <INPUT TYPE=text NAME=text VALUE="Начальное значение" SIZE=число MAXLENGHT =число>.
name задает имя параметра
value - начальное значение
size - размер видимого поля на экране
maxlength - максимальный размер строки ввода
Атрибут value обычно не указывается, это означает, что после загрузки HTML-страницы, в поле ввода будет пустая строка. Обратите внимание на параметр maxlength. Его желательно указывать, чтобы ограничить максимально допустимое количество символов. Это полезно по двум причинам. Во-первых, предостеречь пользователя от неправильного ввода. Представьте, что у вас большая форма с множеством полей. Человек ошибся, в индексе вместо шести цифр указал семь. Если вы не зададите атрибут maxlength равным шести, то пользователю придется ждать, пока данные отправятся CGI-программе, потом пока программа выдаст сообщение об ошибке и т.д.
Начальное значение
Поле ввода для пароля
Поле ввода для пароля создается командой <INPUT
TYPE=password NAME=text VALUE="Начальное значение" SIZE=число MAXLENGHT=число>.
Обратите внимание, что на этот раз размер видимой части больше, чем максимальное количество символов, которое можно ввести.
Кнопки
Для создания кнопки атрибут type должен быть равен button - <INPUT TYPE=button VALUE=Кнопка>.
Атрибут value задает надпись на кнопке.
Такого рода кнопки используются обычно при совместном использовании с JavaScript. Наиболее часто используется кнопка для отправки данных HTML-формы на сервер и кнопка для сброса значений формы в начальное положение.
Кнопка для отправки формы создается так:
<input type=submit value="Отправить данные формы">.
Внешне она выглядит, как кнопка, но обратите внимание, что атрибут type имеет значение не button, а submit.
Отправить данные формы
Для сброса формы в начальное состояние служит элемент:
<input type=reset value="Сбросить в начальное состояние">
Сбросить в начальное состояние
Вы можете изменить значения в элементах вашей HTML-формы, а затем сбросить в начальное состояние, нажав кнопку для очистки заполненных полей.
Радиокнопки.
Данный атрибут используется для организации выбора одного единственного варианта их нескольких возможных.
Для создания радиокнопки атрибут type должен быть равен radio.
<INPUT TYPE="radio" NAME="color" VALUE="red" CHECKED> Красный<BR>
<INPUT TYPE="radio" NAME="color" VALUE="green”>
Зеленый<BR>
CHECKED - инициализировать данный флаг, как отмеченный
NAME - наименование поля ввода формы
VALUE - значение поля ввода
Пример:
<P>Выберите ваш любимый цвет: <FORM>
<INPUT TYPE="radio" NAME="color" VALUE="red">
Красный<BR>
<INPUT TYPE="radio" NAME="color" VALUE="yellow" CHECKED> Желтый<BR>
<INPUT TYPE="radio" NAME="color" VALUE="black">
Черный<BR> </FORM>
В окне браузера это будет выглядеть так:
Выберите ваш любимый цвет:
Красный
Желтый 
Черный
Список.
Для организации списков с прокруткой и выпадающим меню можно использовать атрибут < SELECT >.
Для определения списка пунктов используются элементы <OPTION > внутри тэга <SELECT >.
Вместе с атрибутом SELECT можно использовать следующие атрибуты:
NAME - наименование объекта
MULTIPLE - позволяет выбрать более чем одно наименование
SIZE - определяет число пунктов, видимых для пользователя.
C элементом OPTION можно использовать следующие атрибуты:
SELECTED - для первоначального выбора значения элемента по умолчанию
VALUE - значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу < OPTION >.
Когда пользователь заполняет форму, атрибут NAME
элемента <SELECT> состыковывается с атрибутом VALUE элемента для формирования наименования, выбранного пользователем.
Пример:
<P>Какой ваш любимый фрукт?
<FORM>
<SELECT NAME="Фрукты" SIZE=3 > <OPTION> Сливы
<OPTION> Груши
<OPTION value="Lemon_and_orange">Лимоны и апельсины <OPTION selected> Яблоки</SELECT>
</FORM>
В окне браузера это будет выглядеть так:
Какой ваш любимый фрукт?
Груши Лимоны и апельсины Яблоки
Поле для ввода текста
Данный атрибут используется для ввода большого количества текстовой информации (несколько строк).
Вместе с атрибутом TEXTAREA можно использовать следующие атрибуты:
NAME - наименование поля
COLS - число колонок (символов) в текстовой области
ROWS - число видимых строк в текстовой области
Пример:
<FORM>
<TEXTAREA NAME="adress" COLS=64 ROWS=6>
Украина
Мариуполь пр.Нахимова, 99
</TEXTAREA>
</FORM>
В окне браузера это будет выглядеть так:
Украина
Мариуполь пр.Нахимова, 99