табличные данные, но и создать структуру самой веб-страницы. Для создания таблиц используются теги: table, tr, td.
Тег table открывает и закрывает таблицу и имеет ряд атрибутов для изменения внешнего вида таблицы в целом:
∙align определяет выравнивание таблицы;
∙background – фоновый рисунок в таблице;
∙bgcolor – цвет фона таблицы;
∙border – толщину рамки в пикселах;
∙bordercolor – цвет рамки;
∙cellpadding – отступ от рамки до содержимого ячейки;
∙cellspacing – расстояние между ячейками;
∙height – высоту таблицы;
∙width – ширину таблицы.
Тег tr открывает и закрывает каждую строку таблицы. Атрибуты тега tr позволяют управлять каждой конкретной строкой:
∙align определяет выравнивание содержимого ячеек по горизонтали;
∙valign – выравнивание содержимого ячеек по вертикали;
∙bgcolor – цвет фона ячеек;
∙bordercolor – цвет рамки.
Тег td открывает и закрывает отдельную ячейку и имеет атрибуты:
∙width – задает ширину ячейки;
∙height – задает высоту ячейки;
∙align – задает выравнивание содержимого ячейки по горизонтали;
∙valign – задает выравнивание содержимого ячейки по вертикали;
∙background – задает фоновый рисунок в ячейке;
∙bgcolor – задает цвет фона ячейки;
∙bordercolor – задает цвет рамки;
∙colspan – объединяет горизонтальные ячейки;
∙rowspan – объединяет вертикальные ячейки;
∙nowrap – запрещает перенос строк.
Особенность вывода браузером информации в таблицу заключается в том, что информация будет выведена в ячейку в любом случае, даже если для этой ячейки заданы ширина и высота, не позволяющая вместить всю инфор-
16
мацию. В таком случае параметры, ограничивающие размер ячейки, будут проигнорированы браузером.
При применении атрибутов colspan и rowspan следует учитывать, что при расширении ячейка будет занимать место в других строках или столбцах и количество ячеек в этих строках и столбцах должно быть уменьшено.
Пример таблицы:
<table border=1 cellspacing=0 cellpadding=5>
<tr> <td colspan=2 height=50>1x1</td> |
<td>1x2</td> |
</tr> |
<tr> <td>2x1</td> <td rowspan=2>2x2</td> <td>2x3</td> |
</tr> |
|
<tr> <td>3x1</td> <td>3x3</td> </tr> |
|
|
</table> |
|
|
2.8. Фреймы
Фреймы позволяют разбить окно браузера на несколько зон. В каждую зону можно загрузить отдельный HTML-документ и обновлять его независимо от документов в других зонах. Используя эту особенность фреймов, можно разделить содержимое сайта на статичную часть (как правило, навигация, логотипы и т. д.) и динамически загружаемую информацию. При этом статичная информация загружается только при первом входе на сайт, что уменьшает общее время загрузки каждой страницы по сравнению с сайтами, где навигация и сама информация представлены на каждой странице сайта.
При использовании фреймов структура основного документа меняется. Вместо тега body применяют теги frameset и frame.
Тег frameset позволяет разбить определенную область на несколько, при этом какая область будет делиться зависит от того, где находится тег frameset. Так, первый frameset разделит всю область окна браузера; второй frameset, помещенный внутрь первого, разделит одну из зон первого frameset, и т. д.
Для разделения области на зоны тег frameset имеет атрибуты rows и cols, которые разбивают области на строки и столбцы соответственно. Значения атрибутов состоят из списка размеров зон, разделенных запятыми. Допускается записывать размер в пикселах или процентах, также можно использовать символ «*» для выделения всей области, оставшейся после указания размеров в пикселах или процентах.
Тег frame сообщает браузеру, какие именно документы загружать в каждую область.
17
Следующий пример реализует разбиение на две строки. Первая занимает 200 пикселов по вертикали, под вторую отводится все оставшееся пространство:
<html>
<head><title>Заголовок сайта.</title></head> <frameset rows="200,*">
<frame src="logo.html"> <frame src="content.html"> </frameset>
</html>
Указанные в примере файлы logo.html и content.html создаются отдельно по обычным принципам создания веб-страниц.
Рассмотрим еще один пример с двойным разделением. Сначала все окно браузера будет разделено на 2 строки, затем нижняя строка будет разделена на два столбца.
<html>
<head><title>Заголовок сайта.</title></head> <frameset rows="150,*">
<frame src="logo.html"> <frameset cols="200,*">
<frame src="menu.html"> <frame src="content.html">
</frameset>
</frameset>
</html>
2.9. Формы
Формы (тег form) предназначены для ввода данных пользователем и их передачи на веб-сервер для последующей обработки. Элементы форм можно использовать в связке со скриптами на языке JavaScript для придания странице интерактивности.
Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. Тела тегов форм не должны пересекаться, в противном случае это приведет к некорректной передаче данных.
Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега form. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя опреде-
18
ляется атрибутом name каждого элемента формы, а значение вводится пользователем или установлено в атрибуте value этого же элемента.
Для отправки данных можно использовать метод (атрибут method) get, для открытой отправки данных, при которой пересылаемые данные передаются через адресную строку или post для отправки данных отдельным пакетом.
Визуально тег form не отображается на странице, пользователь увидит только элементы формы, описанные тегами input, textarea, select.
Основные атрибуты тега input:
∙type – тип элемента;
∙name – имя элемента;
∙value – значение элемента;
∙size – ширина поля ввода (для текстовых типов элемента);
∙checked – включенный по умолчанию переключатель или флажок. Основные значения атрибута type: text (текстовое поле), password (поле
спаролем), hidden (скрытое поле), radio (переключатель), checkbox (флажок), submit (кнопка для отправки формы), reset (кнопка для очистки формы), file (поле для отправки файла).
Тег textarea предназначен для ввода многострочного текста. Текст, помещенный в тело тега, будет отображен при открытии страницы и может быть изменен пользователем.
Основные атрибуты тега textarea:
∙name – имя элемента;
∙cols – ширина поля в символах;
∙rows – высота поля в строках текста;
∙readonly – устанавливает, что поле не может изменяться;
∙required – обязательное для заполнения поле.
Тег select позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Каждый пункт создается с помощью тега option, который должен быть вложен в тег select.
Основные атрибуты тега select:
∙name – имя элемента;
∙multiple – выбор сразу нескольких элементов списка;
∙required – список обязателен для выбора перед отправкой формы;
∙size – количество отображаемых строк списка.
19
Основные атрибуты тега option:
∙selected – выделение по умолчанию пункта списка;
∙value – значение пункта.
Пример формы:
<form method="get" action="registred.php"> Логин: <input name="login" type="text"> <br>
Пароль: <input name="password" type="password"> <br> Страна: <select size="10" name="country">
<option value="ru">Россия</option> <option value="us">США</option> <option value="uk">Англия</option> </select>
<input name="remember" type="checkbox" value="yes"> Запомнить <br>
<input type="submit" value="Зарегистрироваться"> </form>
20