Добавлен: 25.06.2023
Просмотров: 72
Скачиваний: 2
</TABLE> <!--Это конец таблицы-->
</BODY>
</HTML>
Таблица начинается с тэга <TABLE> и заканчивается тэгом </TABLE>. Тэг <TABLE> может включать несколько атрибутов:
ALIGN -задает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
WIDTH - ширина таблицы. Ее можно задать в пикселях (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).
BORDER - задает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING - задает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).
CELLPADDING - задает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>). Тэг <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Каждая строка таблицы начинается с тэга <TR> и заканчивается тэгом </TR>. Метка <TR> может включать следующие атрибуты:
ALIGN - задает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN - задает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
Каждая ячейка таблицы начинается с тэга <TD> и заканчивается тэгом </TD>. Метка <TD> может включать следующие атрибуты:
NOWRAP - присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN - задает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN - задает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN - задает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT(выравнивание вправо).
VALIGN - задает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH - задает ширину ячейки в пикселях (например, WIDTH=200).
HEIGHT - задает высоту ячейки в пикселях (например, HEIGHT=40).
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка необходима, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел). Визуально ячейка останется пустой, а рамка вокруг нее будет показана.
Любая ячейка таблицы может содержать в себе другую таблицу. Такие таблицы называются вложенными.
HTML предоставляет возможность группировки строк таблицы. Для этого предусмотрен тэг блока заголовка THEAD, тэг обычных блоков строк TBODY и тэг нижнего блока строк TFOOT. В каждом блоке может присутствовать произвольное количество строк (элементов TR). Эти три тэга могут использоваться как с конечными тегами, так и без них. В качестве примера можно привести таблицу:
<TABLE border=2>
<THEAD>
<TR> <ТD>Заголовок </ТD> <ТD>Заголовок 2</ТD></TR>
</THEAD>
<TFOOT>
<TR> <ТD>Нижний блок таблицы<ТD>&пЬзр; </ТD></TR>
</TFOOT>
<TBODY>
<TR> <ТD>Строка 1 </ТD> <ТD>Ячейка 1.2</ТD></TR>
<TR> <ТD>Строка 2 </ТD> <ТD>Ячейка 2.2</ТD></TR>
</TBODY>
<TR> <ТD>Строка 3</ТD> <ТD>Ячейка 3.2</ТD></TR>
<TR> <ТD>Строка 4 </ТD> <ТD>Ячейка 4.2</ТD></TR>
<TR> <ТD>Строка 5 </ТD> <ТD>Ячейка 5.2</ТD></TR>
</TBODY>
</table>
При отображении этой таблицы, строка “Нижний блок таблицы” будет выведена в нижней части талицы.
При использовании этих элементов надо придерживаться следующих правил.
- в таблице можно указывать только по одному элементу THEAD и TFOOT, но по нескольку элементов TBODY;
- последовательность задания элементов следующая: THEAD, TFOOT, TBODY. Но в таблице на экране блок TFOOT окажется самым нижним;
- все блоки должны содержать одинаковое количество столбцов.
Элемент COLGROUP позволяет создавать группы столбцов с одинаковыми свойствами. Рассмотрим фрагмент описания:
<COLGROUP span=1 width="30" bgcolor="lime">
<COLGROUP bgcolor="yellow">
<COL span=2 width="30">
<COL width="60">
<COLGROUP bgcolor="aqua">
<COL width="50"'>
Каждый элемент COLGROUP позволяет назначить свойства определенному числу колонок, задаваемому атрибутом span. Все эти колонки будут иметь одинаковые свойства. Можно также использовать элемент COL для указания свойств одной колонки. Тогда часть свойств будет совпадать для всех колонок, относящихся к одному элементу COLGROUP, а часть может отличаться. В таблице могут быть определены свойства для произвольного количества колонок, и если в реальности колонок будет меньше, то некоторые (последние) определения не будут использованы. Такая ситуация не является ошибкой. Для задания свойств могут использоваться такие же атрибуты, как и для других элементов таблицы.
Есть несколько правил задания тэгов для столбцов. Элемент COLGROUP имеет более высокий приоритет, а тэги COL располагаются внутри тэгов COLGROUP. В таблице могут присутствовать несколько тэгов COLGROUP. Если число колонок в одном таком элементе определяется атрибутом span, использовать в нем тэги COL не имеет смысла. Если тэги COL существуют, то атрибут span соответствующего тэга COLGROUP игнорируется, то есть число столбцов определяется числом тэгов COL. Для отдельных тэгов COL можно вводить собственные атрибуты span.
2.6 Формы
Форма открывается тегом <FORM> и заканчивается тегом </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая теги, может размещаться внутри форм без ограничений.
Тег <FORM> может содержать три атрибута:
ACTION определяет путь, по которому находится обработчик формы.
METHOD - определяет, каким образом (иначе говоря, с помощью какого протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
ENCTYPE - определяет, каким образом данные из формы будут закодированы для передачи обработчику.
Внутри формы располагаются элементы управления. Например:
<INPUT TYPE=submit>
Это кнопка, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.
Надпись на кнопке можно используя атрибут VALUE="[Надпись]" :
<INPUT TYPE=submit VALUE="Отправить">
Рассмотрим простейшую форму:
<HTML>
<HEAD>
<TITLE>Форма</TITLE>
</HEAD>
<H1>Простейшая форма </H1>
<FORM ACTION="server1.html"> <!--Это начало формы-->
<INPUT TYPE=submit VALUE="Отправить">
</FORM> <!--Это конец формы-->
</BODY>
</HTML>
Любой элемент управления может иметь имя:
<INPUT TYPE=submit NAME=button1 VALUE="Отправить">
Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя элемента. Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <INPUT TYPE=text> и <INPUT TYPE=password>, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.
Основные типы элементов <INPUT>:
TYPE=text- определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример:
<INPUT TYPE=text SIZE=20 NAME=user VALUE="Имя">
TYPE=password определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Пример:
<INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>
TYPE=radio-определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:
<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с
TYPE=checkbox - определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример:
<INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет
TYPE=hidden определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Пример:
<INPUT TYPE=hidden NAME=version VALUE="1.1">
TYPE=reset - определяет кнопку, при нажатии на которую форма возвращается в исходное состояние.
<INPUT TYPE=reset VALUE="Очистить">
Помимо элементов <INPUT>, формы могут содержать списки <SELECT> и поля для ввода текста <TEXTAREA>.
Выпадающий список <SELECT> из n элементов выглядит так:
<SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
...
<OPTION VALUE="[значение n]">[текст n]
</SELECT>
Список начинается с тэга <SELECT> и заканчивается тэгом </SELECT>. Тэг <SELECT> содержит атрибут NAME.
Тэг <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]).
Тэг <OPTION> определяет элемент списка. Атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тэг<OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.
Пимер:
<SELECT NAME="selection">
<OPTION VALUE="option1" checked>Вариант 1
<OPTION VALUE="option2">Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>
Эемент <TEXTAREA> создает много строчное текстовое поле:
<TEXTAREA NAME=comment COLS=50 ROWS=30>
Введите комментарий
</TEXTAREA>
Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах.
Текст, размещенный между метками <TEXTAREA> и </TEXTAREA>, представляет собой содержимое окна по умолчанию.
2.7 Фреймы
<FRAMESET> <FRAME> </frameset>
Фреймы — это области, которые создаются в окне браузера для одновременной демонстрации нескольких документов. В прошлом не все браузеры позволяли разделять область просмотра на части, но эта идея постепенно завоевала большое признание. Новые версии браузеров без исключений поддерживают фрейм. При создании страниц с фреймами создается несколько Web-страниц. При этом HTML-файлы отличаются по типам. Документы раскладки (layout) используются для создания структуры окна, то есть для описания того, как оно должно быть разделено. Документы содержания (content) предназначены для заполнения информацией каждой из областей.
Рассмотрим основные этапы создания Web-страницы с фреймами.
Сначала необходимо определить, какие области потребуются. Деление экрана по горизонтали задается при помощи атрибута rows, а по вертикали — при помощи атрибута cols. Значения атрибутов могут быть заданы в пикселях или процентах. Кроме того, используется символ * для обозначения оставшейся части экрана. Приведем несколько примеров:
- cols=50%, 50% — деление области просмотра по вертикали пополам;
- cols=25%, 75% — левая вертикальная область в три раза уже, чем правая. Такой стиль избрали многие фирмы, имеющие свои сайты в Интернете;
- rows=150, 30%, *—для верхней горизонтальной области отведено 150 пикселей, для средней — тридцать процентов доступного пространства, а для нижней -все, что останется.
В элементе FRAMESET можно использовать и стандартные атрибуты id, class, title, style, onload, onunload.
Вторым этапом является подготовка необходимых HTML-файлов для каждой области. Они создаются по таким же правилам, что и другие гипертекстовые документы.
Нужно только учитывать размер области, в которой они будут демонстрироваться при создании дизайна документа.
В документе раскладки секция FRAMESET используется вместо секции BODY.
Кроме стандартных атрибутов — id, class, t i t le и style — тэг <FRAME> имеет ряд атрибутов, позволяющих усовершенствовать оконную структуру.
Внутри элемента FRAMESET должна быть создана ссылка на каждый документ содержания, входящий в сложную страницу. Кроме того, каждый элемент FRAME полезно снабдить именем с помощью атрибута name. Имя можно указывать в гиперссылках. В результате тэг FRAME может быть описан так:
<FRAME src="Имя файла.htm" name="имя фрейма">
После того как все страницы загружены, пользователь имеет возможность передвигать границы фреймов при помощи мыши и менять тем самым размер областейы. Атрибут noresize запрещает делать это для конкретного фрейма.