- •XX столетия Ванневар Буш (Vannevar Bush) объявил миру новое слово — «ги-
- •Interface), asp, jsp (Java Server Pager), ssi (Server Side Includes), vrml (Virtual
- •33 Удивительнейшие буквы русского алфавита передают человечеству события, факты,
- •Identifier) — это унифицированный идентификатор ресурса, в состав которого
- •24 Бита на пиксел, что обеспечивает отображение 16,7 миллиона цветов
- •155 Пикселов (листинг 3 2) Хотя листинги 3 1 и 3 2 практически совпадают,
- •140 Различных цветов с указанием их оригинальных названий и шестнадцатерич-
- •Vspace, scrollamount Урок 7 Списки
- •Iab (Internet Advisory Board) - координационный совет Интернета
- •Ietf - международная организация, в которую входят специалисты по сетевым технологиям
- •20, Показана в листинге 8 10 (рис 8 10)
- •100 % Если, соответственно, сумма меньше 100 %, то размеры пропорционально
- •Institute на машине пользователя:
- •Xml, xhtml, dhtml Урок 13 Баннерная реклама
- •25 % Выше, чем у их статичных баннеров
- •2 % Возникает ощущение, что только 2 % показов баннера идут на пользу рекла-
- •Interfaces Так, например, если проверить связь с сайтом электронной почты www.
- •Iso не зарегистрирован, поэтом нужно указывать знак – (минус)
- •1995 Года, когда сам недавно образованный (и в декабре 1994 года проведший
- •40Px; font-family: arial"
- •3 Мбайт) никто не поместит на свою веб-страницу На рис 18 5 показано то же
- •Internet
- •2002 Года Он предназначен для аудиокомпрессии и относится к тому же типу
- •VbScript, 19
20, Показана в листинге 8 10 (рис 8 10)
Листинг 8 10 Пример создания таблицы, созданной с использованием атрибута
CELLPADDING
<html><head><title>ТЕКСТ В ТАБЛИЦАХ</title></head>
<body>
<h1 align=center> СЕВЕРО-ЗАПАДНЫЙ ИНСТИТУТ ПЕЧАТИ </h1>
<h2 align=center> наш адрес </h2>
<h3 align=center> ПЕРЕУЛОК ДЖАМБУЛА, дом 13 </h3>
<table cellspacing=15 cellpadding=20 width="90%" align=center border=4>
<caption> Вступительные экзамены:</caption>134 Урок 8. Таблицы
<tbody>
<tr> <th bgcolor=cyan> Экономика и управление на предприятии
<th bgcolor=cyan >Математика, русский язык </tr>
<tr><th bgcolor=cyan> Книгораспространение
<th bgcolor=cyan>Русский язык, история отечества </tr>
<tr><th bgcolor=yellow> Технология полиграфического производства
<th bgcolor=yellow>Математика, русский язык </tr>
<tr><th bgcolor=yellow>Реклама
<th bgcolor=yellow> Русский язык, литература, история отечества
</tr></tbody></table></body></html>
Рис 8 10 Таблица, созданная с использованием атрибута CELLPADDING
Программа, создающая таблицу, в которой объединены ячейки с помощью атри-
бутов ROWSPAN и COLSPAN, показана в листинге 8 11 (рис 8 11)
Листинг 8 11 Пример создания таблицы с объединенными ячейками
<html><head><title>ТЕКСТ В ТАБЛИЦАХ</title></head>
<body>
<table border=10 width=80% align=center>
<caption> Пример таблицы с объединенными ячейками по вертикали и горизонтали </caption>
<br><br><br>
<tr><td width=30% bgcolor=cornsilk> а11 ячейка первого столбца и первой строки</td>
<td width=200 bgcolor=chartreuse> а12 ячейка второго столбца и первой строки</td>
<td rowspan=2 bgcolor=aqua> а13+а23 (объединение ячеек по вертикали) </td></tr>
<tr><td align=center bgcolor=azure>ячейка а21 <br> выравнивание по центру</td>
<td align=right bgcolor=lawngreen> ячейка а22 <br> выравнивание по правому краю
ячейки</td></tr>
<tr><td height=60 valign=top bgcolor=lightgrey> ячейка а31 </td>
<td colspan=2 valign=bottom bgcolor=mediumspringreen> а32+а33 <br>
(объединение ячеек по горизонтали)</td></tr>
</table></body></html> Примеры таблиц 135
Рис 8 11 Таблица с объединенными ячейками
Программа, создающая таблицу, в которой ячейки объединены с помощью атри-
бутов ROWSPAN и COLSPAN и в качестве фона выбраны рисунки, показана в листин-
ге 8 12 (рис 8 12)
Рис 8 12 Таблица с объединенными ячейками и фоновыми рисунками136 Урок 8. Таблицы
Листинг 8 12 Пример создания таблицы с объединенными ячейками и фоновыми
рисунками
<html><head><title>ТАБЛИЦА</title>
</head>
<body>
<table border=2>
<caption>Таблица, в которой объединены ячейки </caption>
<tbody><tr><td background = "icon1.gif">1111111
<th background = "icon2.gif">2
<th background = "icon3.gif">Объединение по горизонтали
<th background = "icon4.gif">4
<th background = "icon5.gif">5
<th background = "icon6.gif">6
<th background = "icon7.gif">7
<th background = "icon8.gif">8
<th background = "icon9.gif">9 </tr>
<tr> <th rowspan=8 background = "Янтарная комната.jpg">
<td background = "icon10.gif">4 4444
<td background = "icon11.gif">66666
<td background = "icon12.gif">88888
<td background = "icon13.gif">10000
<td background = "icon14.gif">12000
<td background = "icon15.gif">14000
<td background = "icon16.gif">16000
<td background = "icon17.gif">18000 </td>
<tr><th colspan=5>Объединение по горизонтали
<td background = "icon18.gif">6
<td background = "icon18.gif">9
<td background = "icon18.gif">12</td>
<tr><th background = "icon17.gif">4
<td background = "icon17.gif">
<td background = "icon16.gif">12
<td background = "icon16.gif">16
<td background = "icon15.gif">20
<td background = "icon15.gif">24
<td background = "icon14.gif">28
<td background = "icon14.gif">32</td>
<tr><th>т<td><td>а<td>б<td>л<td>и<td>ц<td>а</td>
<tr><th>е<td><td><td><td><td><td><td></td>
<tr><th>к<td><td>11<td>11<td>11<td>11<td>11<td>11</td>
<tr><th>с<td><td>11<td>11<td>11<td>11<td>11<td>11</td>
<tr><th>т<td><td>11<td>11<td>11<td>11<td>11<td>11</td>
</tr></tbody></table></body></html>
Программа, создающая таблицу, в которой подпись располагается внизу
(ALIGN=BOTTOM), показана в листинге 8 13 (рис 8 13)
Листинг 8 13 Пример создания таблицы, в которой подпись располагается внизу
<html><head><title>ЕЩЕ ОДНА ТАБЛИЦА</title></head>
<body>
<table border=4>
<caption align=bottom> Таблица №1 </caption>
<tr><td rowspan=2></td><th colspan=2>Среднее значение</th></tr>
<tr><th>Рост</th><th>вес</th></tr> Примеры таблиц 137
<tr><td>Мужчины</td><td align=center>184</td><td align=center>88</td></tr>
<tr><td>Женщины</td><td align=center>168</td><td align=center>63</td></tr>
</table></body></html>
Рис 8 13 Таблица, в которой подпись располагается внизу
Еще один пример таблицы (таблицы цветов) показан на рис 8 14 (листинг 8 14)
Рис 8 14 Таблица цветов138 Урок 8. Таблицы
Листинг 8 14 Пример создания таблицы цветов
<html>
<head>
<title>ТАБЛИЦА</title></head>
<body>
<table align="center" width=90% border=4 cellspacing="15%" cellpadding="50%">
<caption>Цветовая панель rgb</caption>
<tr><th bgcolor="red">RED
<th bgcolor="red">Красный
<tr><th bgcolor="green">GREEN
<th bgcolor="green">Зеленый
<tr><th bgcolor="blue">BLUE
<th bgcolor="blue">Синий
</table>
</body>
</html>
Программа, создающая таблицу, в которой представлены коды цветов, показана
в листинге 8 15 (рис 8 15)
Рис 8 15 Таблица с кодами цветов
Листинг 8 15 Пример создания таблицы с кодами цветов
<html><head><title>ТЕСТ ЦВЕТА</title></head>
<body>
<table width=200 border=3>
<tbody><tr><td align=middle bgcolor=white><b>код</b>
<td align=middle bgcolor=white><b>цвет</b>
<tr><td>#b0e0e6 <td bgcolor=#b0e0e6>1
<tr><td>#afeeee <td bgcolor=#afeeee>2
<tr><td>#7fffd4 <td bgcolor=#7fffd4>3 Примеры таблиц 139
<tr><td>#00fa9a <td bgcolor=#00fa9a>4
<tr><td>#00ff00 <td bgcolor=#00ff00>5
<tr><td>#32cd32 <td bgcolor=#32cd32>6
<tr><td>#008000 <td bgcolor=#008000>7
<tr><td>#006400 <td bgcolor=#006400>8
<tr><td>#008080 <td bgcolor=#008080>9
<tr><td>#ff6800 <td bgcolor=#ff6800>10
<tr><td>#ff6000 <td bgcolor=#ff6000>11
<tr><td>#ff5800 td bgcolor=#ff5800>12 </td></tr></tbody></table>
</body></html>
Программа, создающая таблицу, в которой отражены все цвета радуги, показана
в листинге 8 16 (рис 8 16) Рамка таблицы окрашена в томатный цвет
Рис 8 16 Таблица, в которой показаны все цвета радуги
Листинг 8 16 Пример создания таблицы, в которой показаны все цвета радуги
<html><head><title>РАДУГА</title></head>
<body>
<center><font color=red size=5>РАДУГА</font>
<table width="40%"border=3cellspacing=15cellpadding=10bordercolor=tomato>
<tbody> <tr> <td bgcolor=#ff3030 align=center> КРАСНЫЙ
<tr><td bgcolor=#ffd000 align=center> ОРАНЖЕВЫЙ
<tr><td bgcolor=#f3ff5f align=center> ЖЕЛТЫЙ
<tr><td bgcolor=#00ff00 align=center> ЗЕЛЕНЫЙ
<tr><td bgcolor=#cfd3f7 align=center> ГОЛУБОЙ
<tr><td bgcolor=#5f2ff0 align=center> СИНИЙ
<tr><td bgcolor=#b568f4 align=center> ФИОЛЕТОВЫЙ </tr></tbody></table></body></html>
Программа, в которой фон таблицы и документа закрашен разными цветами, по-
казана в листинге 8 17 (рис 8 17) 140 Урок 8. Таблицы
Рис 8 17 Веб-страница, на которой фон таблицы и документа закрашен разными цветами
Листинг 8 17 Пример, в котором фон таблицы отличается от фона документа
<html><head><title>ПРОСТАЯ ТАБЛИЦА</title></head>
<body bgcolor=red>
<h3 align=center>ПРОСТАЯ ТАБЛИЦА </h3>
<div align=center> <center> <table bgcolor=greenyellow border=5>
<caption>ЗАГОЛОВОК ТАБЛИЦЫ</caption>
<tbody> <tr><td>ячейка 11 </td>
<td>ячейка 12 </td></tr>
<tr><td>ячейка 21 </td>
<td><p align=center>ячейка 22
</p></td></tr></tbody></table></center></div></body></html>
Программа, создающая таблицу, в которой отражены различные способы вырав-
нивания, показана в листинге 8 18 (рис 8 18) Рамка таблицы окрашена в черный
и белый цвета
Листинг 8 18 Пример создания таблицы, в которой отражены различные способы
выравнивания
<html><head><title>ВЫРАВНИВАНИЕ В ТАБЛИЦАХ</title></head>
<body bgcolor="#f0fff0">
<h3 align=center><font color=#000080><big><big><strong><em>Различные способы
выравнивания</em></strong></big></big></font></h3>
<table bordercolordark=#000000 cellpadding=5 bordercolorlight=#ffffff border=3><caption
valign=top align=right>Заголовок таблицы</caption>
<tbody> <tr> <td> </td></tr>
<tr><th colspan=2 rowspan=2> </th>
<th colspan=3>Способ выравнивания</th></tr>
<tr><th>По левому краю</th>
<th>Центрирование</th>
<th>По правому краю</th></tr>
<tr><th rowspan=2>Направление</th>
<th>По вертикали</th>
<td>Этот текст выровнен по левому краю</td> Примеры таблиц 141
<td align=middle>Этот текст отцентрирован</td>
<td align=right>Этот текст выровнен по правому краю</td></tr>
<tr><th>По горизонтали</th>
<td valign=top>Вверху</td>
<td align=middle>Посередине</td>
<td valign=bottom align=right>Внизу</td></tr></tbody></table>
</body></html>
Рис 8 18 Таблица, в которой отражены различные способы выравнивания
Программа, создающая таблицу с тремя столбцами и четырьмя строками, подпись
которой располагается внизу, показана в листинге 8 19 (рис 8 19)
Рис 8 19 Таблица, у которой подпись располагается внизу142 Урок 8. Таблицы
Листинг 8 19 Пример создания таблицы, у которой подпись располагается внизу
<html><head><title>ТАБЛИЦЫ</title></head>
<body bgcolor = #e6e6fa>
<h3 align=center>Таблица с тремя столбцами и четырьмя строками</h3>
<div align=center>
<center>
<table bordercolordark=black cellpadding=5 bgcolor=silver bordercolorlight=white
border=1>
<tbody><tr><th>Столбец 1</th>
<th>Столбец 2</th><th>Столбец 3</th></tr>
<tr><td><font color=maroon>Текст выделен цветом </font></td>
<td>ячейка 12 </td><td>ячейка 13 </td></tr>
<tr><td>ячейка 21 </td><td>ячейка 22 </td><td>ячейка 23 </td></tr>
<tr><td>ячейка 31 </td><td>ячейка 32 </td><td>ячейка 33 </td></tr>
<caption valign=bottom align=left>Подпись таблицы внизу и слева</caption></table></
center></div></body></html>
Программа, создающая таблицу с четырьмя столбцами и тремя строками, показа-
на в листинге 8 20 (рис 8 20)
Рис 8 20 Таблица с четырьмя столбцами и тремя строками
Листинг 8 20 Пример создания таблицы с четырьмя столбцами и тремя строками
<html><head><title>ТАБЛИЦА С ЧЕТЫРЬМЯ СТОЛБЦАМИ И ТРЕМЯ СТРОКАМИ</title></head>
<body bgcolor = #fffff0>
<h3 align=center>Таблица с четырьмя столбцами и тремя строками</h3>
<div align=center>
<center>
<table bordercolordark=#000000 cellpadding=5 bgcolor=#ffffc4
bordercolorlight=#ffffff border=1 frame=lhs>
<caption>CSS (Cascading Style Sheets - каскадные листы стилей)</caption>
<tbody> <tr> <th rowspan=2>Объединение двух ячеек по горизонтали</th>
<td><font color=maroon>Текст выделен цветом</font></td> Примеры таблиц 143
<td>ячейка 12 </td> <td>ячейка 13 </td></tr>
<tr> <td>ячейка 21 </td> <td>ячейка 22 </td> <td>ячейка 23 </td></tr>
<tr> <th>строка 3</th> <td>ячейка 31 </td> <td>ячейка 32 </td>
<td>ячейка 33 </td></tr></tbody></table></center></div></body></html>
Еще один пример программы, создающий таблицу с тремя столбцами и четырьмя
строками, у которой, в отличие рис 8 19, подпись размещена сверху, показан в ли-
стинге 8 21 (рис 8 21)
Рис 8 21 Таблица, у которой подпись располагается сверху
Листинг 8 21 Пример создания таблицы, у которой подпись располагается сверху
<html><head><title>ТАБЛИЦЫ С ОБЪЕДИНЕННЫМИ ЯЧЕЙКАМИ</title></head>
<body bgcolor=#faf0e6>
<h3 align=center>ТАБЛИЦЫ С РАЗЛИЧНЫМИ РАМКАМИ</h3>
<div align=center>
<center>
<table bordercolordark=#000000 cellpadding=5 bgcolor=#c0c0c0
bordercolorlight=#ffffff background="" border=2 frame=below>
<caption align=left>Программный код - текст программы</caption>
<tbody> <tr> <th>столбец 1</th>
<th colspan=2>Объединение двух ячеек по вертикале</th></tr>
<tr><td><font color=maroon>Текст выделен цветом </font></td>
<td>ячейка 12 </td>
<td>ячейка 13 </td></tr>
<tr><td>ячейка 21 </td><td>ячейка 22 </td><td>ячейка 23 </td></tr>
<tr><td>ячейка 31 </td><td>ячейка 32 </td>
<td>ячейка 33 </td></tr></tbody></table></center></div>
</body></html>
Еще один пример программы, создающий таблицу без рамки с тремя столбцами
и четырьмя строками, у которой заголовок выровнен по центру, показан в листин-
ге 8 22 (рис 8 22) 144 Урок 8. Таблицы
Рис 8 22 Таблица без рамки
Листинг 8 22 Пример создания таблицы без рамки
<html><head><title>ЗАГОЛОВОК, ВЫРОВНЕННЫЙ ПО ЦЕНТРУ</title>
</head>
<body bgcolor=#fff0f5>
<h3 align=center> Заголовок, выровненный по центру </h3>
<div align=center>
<center>
<table bordercolordark=#000000 cellpadding=5 bgcolor=#c4ecff
bordercolorlight=#ffffff border=3 frame=void>
<caption align=right>Заголовок таблицы - параметр frame = void</caption>
<tbody><tr><th>Заголовок строки 1 - тег th</th>
<td align=right><font color=maroon><i>Текст выделен цветом, курсивом и расположен
с правого края</i></font></td>
<td>ячейка 12 </td><td>ячейка 13 </td></tr>
<tr><th>Заголовок строки 2 - тег th</th><td>ячейка 21 </td><td>ячейка 22 </td><td>ячейка
23 </td></tr>
<tr><th>Заголовок строки 3 - тег th</th><td>ячейка 31 </td><td>ячейка 32 </td><td>ячейка
33 </td></tr></tbody></table></center></div>
</body></html>
Рассмотрим еще один пример создания таблицы, представленный в листинге 8 23
В этом примере показано, что жирные рамки могут создавать различные визуаль-
ные эффекты (рис 8 23) Противоположный результат можно получить, если соз-
дать таблицу без рамки При создании вложенных таблиц границы делают разной
толщины, чтобы легче было различать таблицы
Листинг 8 23 Пример создания вложенных таблиц с разной толщиной рамок
<html><head><title>ТАБЛИЦЫ С РАЗНОЙ ТОЛЩИНОЙ РАМОК</title></head>
<body><table cellspacing=10 cellpadding=0 width="90%" border=8 bordercolor=black>
<tr><td align=center><h2>ТИПЫ БРАУЗЕРОВ</h2> Примеры таблиц 145
<table border cellspacing=10 width="100%">
<tr><td align=center colspan=4><h4>первый гафический браузер появился в 1993 году</h4>
</td></tr>
<tr><td align=center>Microsoft Internet Explorer </td>
<td align=center>Mozilla Firefox</td>
<td align=center>Opera </td>
<td align=center>Safari</td></tr></table></td></tr></table>
</body></html>
Рис 8 23 Вложенные таблицы с разной толщиной рамок
Пример таблицы, в которой наблюдаются интересные эффекты размещения текста
за счет использования атрибута CELLSPACING, показан на рис 8 24 (листинг 8 24)
Рис 8 24 Таблица с интересными эффектами размещения текста146 Урок 8. Таблицы
Листинг 8 24 Пример создания таблицы с интересными эффектами размещения текста
<html><head><title>АТРИБУТЫ ТЕГОВ ТАБЛИЦЫ</title></head>
<body bgcolor = #f0fff0><center>
<table border cellspacing=20>
<tr><td>элемент 11<td> элемент 12<td> элемент 13</td></tr>
<tr><td>элемент 21<td>элемент 22<td>элемент 23</td></tr></table>
<table border cellspacing=20>
<tr><td>элемент 31<td> элемент 32<td> элемент 33</td></tr>
<tr><td>элемент 41<td> элемент 42<td> элемент 43</td></tr></table>
<table border cellspacing=0>
<tr><td>элемент 51<td>элемент 52<td>элемент 53</td></tr>
<tr><td>элемент 61<td> элемент 62<td> элемент 63</td></tr></table>
</body></html>
Пример таблицы, в которой с помощью атрибута CELLSPACING имитируется рамка
вокруг изображения, показан на рис 8 25 (листинг 8 25)
Рис 8 25 Таблица, в которой имитируется рамка вокруг изображения
Листинг 8 25 Пример создания таблицы, в которой имитируется рамка вокруг
изображения
<html><head><title>РАМКА ВОКРУГ ФОТОГРАФИИ</title></head>
<body bgcolor=#008000>
<center> Примеры таблиц 147
<table cellspacing=10 border=15>
<caption align=bottom>ПОРТРЕТ</caption>
<tr><td>
<table border=30>
<tr><td><img src="ПОРТРЕТ.jpg"> </td></tr>
</table></td></tr>
</table></center></body></html>
Еще один пример таблицы, в которой имитируется рамка с тенью, показан на
рис 8 26 (листинг 8 26) Ячейка выглядит выпуклой
Рис 8 26 Таблица с выпуклой рамкой
Листинг 8 26 Пример создания таблицы с выпуклой рамкой
<html><head><title>РАМКА С ТЕНЬЮ</title></head>
<body bgcolor=#e0ffff>
<center>
<table ellpadding=10 cellspacing=0 border=17>
<tr><td align=center>
<h1>Родина моя</h1><h3>Санкт-петербург</h3>
<table border=30 width=100%>
<tr><td> <i>На том и этом свете буду вспоминать я </i></td></tr>
<tr><td> <i>Как упоительны в россии вечера </i></td></tr>
</table></td></tr></table></center></body></html>
Таблицы позволяют размещать текст в колонках Такой пример показан на
рис 8 27 (листинг 8 27)
Листинг 8 27 Размещение текста в колонках
<html><head><title>ТЕКСТ В КОЛОНКАХ</title></head>
<body bgcolor=#dcdcdc >
<center>148 Урок 8. Таблицы
<table width=70% border=0 cellpadding="5">
<tr> <td align=center colspan=2>
<h2>Как сделать красиво?</h2>
<h3>Основные правила: Контраст, Выравнивание, Приближенность</h3></td></tr>
<tr> <td width=50% align=top>
Правило контраста заключается в том, чтобы избежать расположения на странице одинаковых
элементов. Нередко контраст - наиболее важное средство привлечения внимания
к странице.
</td> <td valign=top>
На странице ничто не должно размещаться случайно. Каждый элемент нужно зрительно
связывать с другими элементами. Это придает странице аккуратный, утонченный внешний
вид.
</td></tr></table></center></body></html>
Рис 8 27 Текст в колонках
Пример разноцветной таблицы из четырех столбцов показан на рис 8 28 (лис-
тинг 8 28)
Рис 8 28 Таблица из четырех столбцов Примеры таблиц 149
Листинг 8 28 Пример создания таблицы из четырех столбцов
<html><head><title>ТЕКСТ В ЧЕТЫРЕХ СТОЛБЦАХ</title></head>
<body bgcolor=00ffff>
<center> <h4> Даты возникновения математических знаков</h4>
<table cellpadding=5 width="80%" border=1 cellspacing=2>
<tr align=left bgcolor = 000099>
<td><font face="arial" color=white size=4> Знак <font></td>
<td><font face="arial" color=white size=4> Значение <font></td>
<td><font face="arial" color=white size=4> Кто ввел <font></td>
<td><font face="arial" color=white size=4> Год <font></td></tr>
<tr><td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>= <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>равенство <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>Р.Рекорд<font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>1557<font></td></tr>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow size=3>
>, < <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>больше, меньше <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>Т.Гарриот<font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>1631<font></td></tr>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>¶ <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>Отношение длины окружности к диаметру <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>У.Джонсон<font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>1706<font></td></tr>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>× <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>умножение <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>У.Оутред<font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>1631<font></td></tr>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>log <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>логарифм<font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>И.Кеплер<font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>1624<font></td> </tr>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>sin <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>синус <font></td>150 Урок 8. Таблицы
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>Б.Кавальери<font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>1632<font></td> </tr>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>cos <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>косинус <font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow
size=3>Л.Эйлер<font></td>
<td align=left valign=top bgcolor ="#00ced1"><font color=yellow size=3>1748<font></td>
</tr></tbody></table></center></body></html>
Пример таблицы с общим заголовком и отдельными заголовками столбцов пока-
зан на рис 8 29 (листинг 8 29)
Рис 8 29 Таблица с общим заголовком и отдельными заголовками столбцов
Листинг 8 29 Пример создания таблицы с общим заголовком и отдельными
заголовками столбцов
<html><head><title>ТАБЛИЦА С ОБЩИМ ЗАГОЛОВКОМ И ОТДЕЛЬНЫМИ ЗАГОЛОВКАМИ
СТОЛБЦОВ</title></head>
<body bgcolor=#6600ff>
<table border=5 cellspacing=4>
<caption> Заголовок таблицы </caption>
<tr><th bgcolor="ffffff">Заголовок 1
<th bgcolor="fffffd">Заголовок 2
<th bgcolor="fffffe">Заголовок 3
<tr><td>ячейка 11 <td>ячейка 12<td>ячейка 13
<tr><td>ячейка 21 <td>ячейка 22<td>ячейка 23
<tr><td>ячейка 31 <td>ячейка 32<td>ячейка 33
</table></body></html>
Пример таблицы с общим заголовком и отдельными заголовками столбцов
и строк показан на рис 8 30 (листинг 8 30) Примеры таблиц 151
Рис 8 30 Таблица с общим заголовком и отдельными заголовками столбцов и строк
Листинг 8 30 Пример создания таблицы с общим заголовком и отдельными
заголовками столбцов и строк
<html><head><title>ТАБЛИЦА С ОБЩИМ ЗАГОЛОВКОМ И ОТДЕЛЬНЫМИ ЗАГОЛОВКАМИ СТОЛБЦОВ И
СТРОК</title></head>
<body bgcolor=#ee0066>
<table border=5 cellspacing=4>
<caption>ЗАГОЛОВОК ТАБЛИЦЫ </caption>
<tr><th bgcolor="ffffff">
<th bgcolor="ffffff">Заголовок 1
<th bgcolor="ffffff">Заголовок 2
<th bgcolor="ffffff">Заголовок 3
<th bgcolor="ffffff">Заголовок 4 </tr>
<tr> <th bgcolor="ffffff">Заголовок 5
<td>ячейка 11<td>ячейка 12<td>ячейка 13<td>ячейка 14 </tr>
<tr><th bgcolor="ffffff">Заголовок 6
<td>ячейка 21<td>ячейка 22<td>ячейка 23<td>ячейка 24 </tr>
</table></body></html>
Пример таблицы с объединенными ячейками в столбцах и строках показан на
рис 8 31 (листинг 8 31)
Листинг 8 31 Пример создания таблицы с объединенными ячейками в столбцах
и строках
<html><head><title>ТАБЛИЦА С ОБЪЕДИНЕННЫМИ ЯЧЕЙКАМИ В СТОЛБЦАХ И СТРОКАХ </title></head>
<body bgcolor=#ee0011>
<table border=4 cellspacing=0 >
<caption>Заголовок таблицы </caption>
<tr><td bgcolor="ffffff">Заголовок 1
<td bgcolor="ffffff">Заголовок 2152 Урок 8. Таблицы
<tr><td rowspan=3 bgcolor="ffffff">ячейка 1
<td>ячейка 2
<tr><td>ячейка 3
<tr><td>ячейка 4
<tr><td colspan=2 bgcolor="ffffff" align="center">ячейка 5
<tr><td colspan=2 bgcolor="ffffff" align="center">ячейка 6
<tr><td colspan=2 bgcolor="ffffff" align="center">ячейка 7
<tr><td colspan=2 bgcolor="ffffff" align="center">ячейка 8
</table> </body></html>
Рис 8 31 Таблица с объединенными ячейками в столбцах и строках
Пример таблицы со сложным объединением ячеек в столбцах и строках показан
на рис 8 32 (листинг 8 32)
Рис 8 32 Таблица со сложным объединением ячеек в столбцах и строках Примеры таблиц 153
Листинг 8 32 Пример создания таблицы со сложным объединением ячеек в столбцах
и строках
<html><head><title>ОБЪЕДИНЕНИЕ ЯЧЕЕК В СТОЛБЦАХ И СТРОКАХ</title></head>
<body bgcolor=#ddee11>
<table border=4 cellspacing=0 >
<tr><td bgcolor="ffffff">Заголовок 1
<td bgcolor="ffffff">Заголовок 2
<td bgcolor="ffffff">Заголовок 3
<td bgcolor="ffffff">Заголовок 4
<tr><td rowspan=4 colspan=2 bgcolor="ffffff">ячейка 1
<tr><td>ячейка 2<td rowspan=3> ячейка 5
<tr><td>ячейка 3
<tr><td>ячейка 4
<tr><td rowspan=4 colspan=2 bgcolor="ffffff">ячейка 6
<tr><td colspan=3 bgcolor="white" align="center">ячейка 7
</table></table></body></html>
Пример таблицы, размещенной в ячейке другой таблицы, показан на рис 8 33
(лис тинг 8 33)
Рис 8 33 Таблица, которая размещается в ячейке другой таблицы
Листинг 8 33 Пример создания таблицы, которая размещается в ячейке другой таблицы
<html><head><title>ОБЪЕДИНЕНИЕ ЯЧЕЕК В СТОЛБЦАХ И СТРОКАХ</title></head>
<body bgcolor=#ddeeff>
<table border=5 cellspacing=0>
<tr><td bgcolor="ffffff">ячейка 1
<td>
<table border=3>
<tr><td>ячейка 2-1
<td>ячейка 2-2
<tr><td>ячейка 3-2
<td>ячейка 4-2
</table>
<td bgcolor="ffffff">ячейка 5
<tr><td bgcolor="ffffff">ячейка 3-1
<td bgcolor="ffffff">ячейка 4-1
<td ffffff="ffffff">ячейка 6-1
</table></body></html>154 Урок 8. Таблицы
Примеры трех таблиц, состоящих из одной ячейки и имеющих рамки разной тол-
щины, показаны на рис 8 4 (листинг 8 34)
Рис 8 34 Таблицы, состоящие из одной ячейки
Листинг 8 34 Примеры таблиц, состоящих из одной ячейки
<html><head><title>ОБЪЕДИНЕНИЕ ЯЧЕЕК В СТОЛБЦАХ И СТРОКАХ</title></head>
<body bgcolor=#ddeeee>
<table border=4 cellspacing=3 cellpadding=10>
<tr><td bgcolor="ffffff">одна ячейка </table>
<table border=4 cellspacing=20 cellpadding=10>
<tr><td bgcolor="ffffff">одна ячейка</table>
<table border=4 cellspacing=40 cellpadding=10>
<tr><td bgcolor="ffffff">одна ячейка</table>
</body></html>
В заключении хотелось бы привести листинг таблицы, которую наши студенты
шутя назвали «ТАБЛЕТКА» (листинг 8 35)
Листинг 8 35 Пример вложенных таблиц
<html><head><title>ТАБЛЕТКА</title></head>
<body><html><head><title> текст в таблицах</title></head>
<body><table border=1 bordercolor=black width=30% align=center>
<caption>ТАБЛИЦА</caption> <br><br><br>
<tr><td colspan=8 bgcolor=aquamarine> </td></tr>
<tr><td rowspan=6 bgcolor=burlywood> </td><td colspan=6
bgcolor=aquamarine> </td><td rowspan=6 bgcolor=burlywood> </td></tr>
<tr><td rowspan=4 bgcolor=burlywood> </td><td colspan=4
bgcolor=aquamarine> </td><td rowspan=4 bgcolor=burlywood> </td></tr> Подведем итоги 155
<tr><td rowspan=2 bgcolor=burlywood> </td><td colspan=1 bgcolor=red> </td><td
colspan=1 bgcolor=blue> <td rowspan=2 bgcolor=burlywood> </td></tr>
<tr><td bgcolor=green> </td><td bgcolor=yellow> </td></tr>
<tr><td colspan=4 bgcolor=aquamarine> </tr>
<tr><td colspan=6 bgcolor=aquamarine> </tr>
<tr><td colspan=8 bgcolor=aquamarine> </tr>
</table></body></html>
Подведем итоги
В этом уроке рассказывается о создании таблиц Тег <TR> определяет строку та-
блицы, тег <COL> — столбец таблицы, тег <TD> — ячейку таблицы, тег <TH> — заго-
ловок таблицы, тег <CAPTION> — подпись таблицы Все эти теги должны распола-
гаться внутри тегов <TABLE> и </TABLE>
Поскольку таблицы имеют в веб-дизайне очень важное значение (они исполь-
зуются не только в качестве собственно таблиц, но и как средство точного пози-
ционирования элементов на веб-странице), рассмотрено очень много примеров
таблиц Урок 9 Формы
Формы представляют собой важные элементы HTML-страниц, по-
зволяющие разработчикам страниц интерактивно взаимодейство-
вать с посетителями. С их помощью пользователь может посылать
комментарии по поводу посещения определенного узла, пересылать
запросы, регистрироваться. Разработчик задает вопросы, создавая
форму, а пользователь отвечает на них, заполняя ее. Форма созда-
ется при помощи различных тегов и атрибутов, заключенных в пару
тегов <FORM> и </FORM>. В этом уроке рассматриваются методы соз-
дания форм.
Урок Создание форм 157
Создание форм
Формы предназначены для ввода информации Все формы начинаются тегом
<FORM> (от англ form — форма) и завершаются тегом </FORM> У формы могут
быть атрибуты NAME, ACTION, METHOD, TARGET
Атрибут NAME Атрибут NAME определяет имя формы и обычно не указыва-
ется Применяется для идентификации формы, если в документе присутствует
несколько форм
Атрибут ACTION Обязательный атрибут ACTION задает URL-адрес програм-
мы, которая будет вызываться для обработки формы
Атрибут METHOD Атрибут METHOD определяет способ отправки параметров
формы Принимает значение GET или POST В настоящее время использование
метода GET не рекомендуется
Атрибут TARGET Атрибут TARGET определяет окно, в которое возвращается
результат обработки отправленной формы Возможные значения SELF, PARENT,
TOP, BLANK или явно указанное имя окна
Пример элементарной формы показан на рис 9 1 (листинг 9 1) Имеющиеся на
форме поля ввода задаются тегами <INPUT> Атрибут SIZE регулирует длину поля
ввода
Рис 9 1 Веб-страница, содержащая элементарную форму
Листинг 9 1 Пример создания веб-страницы, содержащей элементарную форму
<html>
<head> <title> ФОРМЫ</title> </head>
<body> <form>
<center><h3>МОЯ ПЕРВАЯ ФОРМА</h3>
ПЕРВОЕ ПОЛЕ<input name="Первое Поле"size="40"><br>
<input name="ВТОРОЕ ПОЛЕ"size="60">ВТОРОЕ ПОЛЕ<br>
</center> </form> </body>
</html>158 Урок 9. Формы
Создать форму легко, но трудно красиво выстроить все элементы Эта проблема не
имеет простого решения Можно разместить поля ввода и раскрывающиеся спи-
ски в левой части страницы, а весь сопроводительный текст — справа Поскольку
длина полей ввода задается атрибутом SIZE, можно выровнять строки по левому
краю, а текст справа оставить не выровненным, как в большинстве документов
Такая форма выглядит аккуратнее Пример такой формы показан на рис 9 2 (ли-
стинг 9 2)
Рис 9 2 Форма с выровненными элементами
Листинг 9 2 Пример создания формы с выровненными элементами
<html>
<head> <title> ФОРМЫ</title> </head>
<body> <form>
<center><h2>КАКАЯ ФОРМА ВЫГЛЯДИТ ЛУЧШЕ?</h2>
<table><tr><td>
ПЕРВЫЙ <input name="ПЕРВЫЙ"size="20"><br>
ПОСЛЕДНИЙ<input name="ПОСЛЕДНИЙ"size="20"><br>
АДРЕС<input name="АДРЕС"size="20"><br>
ГОРОД<input name="ГОРОД"size="20"><br>
ОБЛАСТЬ<input name="ОБЛАСТЬ"size="20"><br>
РАЙОН<input name="РАЙОН"size="20"><br></td>
<td><h3>ИЛИ</h3></td>
<td>
<input name="ПЕРВЫЙ"size="20"> ПЕРВЫЙ<br>
<input name="ПОСЛЕДНИЙ"size="20"> ПОСЛЕДНИЙ<br>
<input name="АДРЕС"size="20"> АДРЕС<br>
<input name="ГОРОД"size="20"> ГОРОД<br>
<input name="ОБЛАСТЬ"size="20"> ОБЛАСТЬ<br>
<input name="РАЙОН"size="20"> РАЙОН</td>
</tr></table></form></center>
</body></html> Размещение на форме элементов управления 159
Размещение на форме элементов
управления
Для создания полей ввода, с которыми мы познакомились в предыдущем разделе,
и других элементов управления используется тег <INPUT> (от англ input — ввод)
Тег имеет атрибуты NAME, SIZE, CHECKED, MAXLENGTH, SRC, TYPE
Атрибут NAME Атрибут NAME определяет имя поля ввода Данное имя ис-
пользуется как уникальный идентификатор поля, по которому впоследствии
можно получить данные, введенные пользователем в это поле
Атрибут SIZE Атрибут SIZE определяет размер поля ввода в символах
Атрибут CHECKED Атрибут CHECKED используется с флажками и переключа-
телями Он означает, что флажок или переключатель, имеющий этот атрибут,
при открытии страницы будет установлен
Атрибут MAXLENGTH Атрибут MAXLENGTH определяет количество симво-
лов, которое пользователи могут ввести в поле ввода При превышении этого
количества браузер отреагирует на попытку ввода нового символа звуковым
сигналом и не даст его ввести Не следует путать этот атрибут с атрибутом SIZE,
который определяет количество видимых в поле символов Если количество
введенных символов окажется больше чем SIZE, в поле появится возможность
прокрутки По умолчанию значение MAXLENGTH равно бесконечности
Атрибут SRC Атрибут SRC задает URL-адрес, указывающий на изображение
(используется совместно с атрибутом IMAGE)
Атрибут TYPE Атрибут TYPE определяет тип элемента управления По умол-
чанию это однострочное поле ввода Все остальные типы должны быть явно
указаны
Значение CHECKBOX превращает поле ввода во флажок, который использу-
ется для передачи в вызываемую программу простых логических значений
(ON или OFF), заданных пользователем
Значение HIDDEN скрывает элемент управления — он не отображается брау-
зером и не дает пользователю возможность изменить присвоенное ему по
умолчанию значение Такой элемент управления используется для переда-
чи в программу неизменной информации, например идентификатора поль-
зователя или пароля
Значение IMAGE позволяет связать с именем элемента управления изобра-
жение При щелчке мышью на таком изображении будет немедленно вы-
звана ассоциированная с формой программа
Значение PASSWORD внешне не меняет поле ввода, но вводимое пользовате-
лем значение не отображается браузером на экране
Значение RADIO превращает поле ввода в переключатель, который позво-
ляет выбрать одно значение из нескольких, задаваемых переключателями
с разными значениями атрибута VALUE, но с одинаковыми значениями атри-160 Урок 9. Формы
бута NAME В вызываемую программу будет передано значение NAME=VALUE,
причем VALUE примет значение установленного переключателя При уста-
новке одного переключателя все остальные автоматически сбрасываются
Значение RESET превращает поле ввода в кнопку, при щелчке на которой все
элементы управления формы примут значения, заданные для них по умол-
чанию
Значение SUBMIT превращает поле ввода в кнопку, при щелчке на которой
будет вызвана ассоциированная с формой программа или произойдет пере-
ход по заданному URL-адресу
Значение TEXT описывает однострочное поле ввода Используйте атрибуты
MAXLENGTH и SIZE для определения максимальной длины вводимого значе-
ния в символах и размера поля ввода (по умолчанию 20 символов)
Атрибут VALUE Атрибут VALUE позволяет присвоить элементу управления
значение по умолчанию или значение, которое будет присвоено атрибуту NAME
при установке соответствующего переключателя (для типа переключателя
данный атрибут обязателен)
Пример формы с переключателями (TYPE=RADIO) показан на рис 9 3 (ли-
стинг 9 3)
Рис 9 3 Форма с переключателями
Листинг 9 3 Пример создания формы с переключателями
<html>
<head><title>ПРИМЕР ФОРМЫ С ПЕРЕКЛЮЧАТЕЛЯМИ</title></head>
<body>
<input type=radio name=modem value="9600" checked> 9600 бит/с <br>
<input type=radio name=modem value="14400" checked> 14400 бит/с<br>
<input type=radio name=modem value="28800" checked> 28800 бит/с<br>
<input type=radio name=modem value="56600" checked> 56600 бит/с<br>
</body>
</html>
В листинге 9 4 представлен пример создания формы, содержащей кнопку отправ-
ки данных (TYPE=SUBMIT) Сама форма показана на рис 9 4 Размещение на форме элементов управления 161
Рис 9 4 Форма с кнопкой отправки
Листинг 9 4 Пример создания формы с кнопкой отправки
<html>
<head> <title>АТРИБУТ submit</title> </head>
<body>
<form action=www.piter.ru method=post>
<input size=40 name=text value="Значение по умолчанию">
<input type=submit value="Отправка запроса" value="Опубликовать"> </form>
</body></html>
В отличие от переключателей в группе флажков (TYPE=CHECKBOX) с одинаковыми
именами может быть установлено сколько угодно флажков В листинге 9 5 приве-
ден пример создания формы с флажками, причем, как показано на рис 9 5, при от-
крытии формы второй и третий флажки оказываются установленными, посколь-
ку для них указан атрибут CHECKED
Рис 9 5 Форма с флажками162 Урок 9. Формы
Листинг 9 5 Пример создания формы с флажками
<html>
<head><title>ФЛАЖКИ</title></head>
<body bgcolor="#dc143c">
<form method=post action =www.piter.ru>
<input type=text name=text
value="Значение по умолчанию" size=40>
<input type=submit value=Опубликовать> <br>
<input type=checkbox name=comp value="www"> Всемирная паутина <br>
<input type=checkbox name=comp value="http"checked> Hyper Text Transfer Protocol <br>
<input type=checkbox name=comp value="html"checked> Hyper Text Markup Language
</form>
</body></html>
В листинге 9 6 приведен пример создания формы с полем для ввода пароля
(TYPE=PASSWORD) При вводе информации в такое поле она отображается в виде
звездочек (рис 9 6)
Рис 9 6 Форма с полем для ввода пароля
Листинг 9 6 Пример создания формы с полем для ввода пароля
<html>
<head><title>Ввод пароля </title></head>
<body>
<form method=post action =www.piter.ru>
<input type=password name=text value="Введите значение" size=40 maxlegth=40><br></form>
</body></html>
Списки выбора
Для создания списков на форме, позволяющих выбрать одно или несколько зна-
чений из множества возможных, используется парный тег <SELECT> По умолча-
нию в поле списка отображается его первый элемент
Элемент списка создается с помощью тега <OPTION> В листинге 9 7 представлен
пример использования тегов <SELECT> и <OPTION> (рис 9 7) Списки выбора 163
Листинг 9 7 Пример создания веб-страницы, содержащей список выбора
<html>
<head><title>ФОРМЫ</title></head>
<body>
<h1 align=left>Устройства ввода-вывода компьютера</h1>
<form>
<select name=group>
<option> Клавиатура
<option> Мышь
<option> Монитор
<option> Принтер
<option> Гибкий магнитный диск
<option> Cd-диск
<option> Dvd-диск
<option> Синхронизатор с карманным пк </select>
</form></body></html>
Рис 9 7 Веб-страница с раскрытым списком выбора
Список выбора, создаваемый тегом <SELECT>, не обязательно является одностроч-
ным Количество одновременно видимых на экране элементов списка задается
атрибутом SIZE Если количество элементов списка превышает значение, указан-
ное в атрибуте SIZE, справа появляется полоса прокрутки Чтобы в списке одно-
временно можно было выбрать несколько элементов (с помощью клавиши Shift
или Ctrl), применяется атрибут MULTIPLE, который задает максимальное количе-
ство одновременно выбранных элементов Пример использования тега <SELECT>
с атрибутами SIZE и MULTIPLE показан на рис 9 8 (листинг 9 8)
Листинг 9 8 Пример создания многострочного списка
<html>
<head><title> ТЕГ select multiple </title></head>
<body>
<form>164 Урок 9. Формы
<select name=group size=4 multiPLE=2>
<option> Запись на формный цилиндр;
<option> Запись на форму;
<option> Запись на фотоформу;
<option> Печатная машина;
<option> Прямая запись;
</select></form></body></html>
Рис 9 8 Многострочный список на форме
В теге <OPTION> обязательно надо указывать атрибут VALUE Только в этом случае
программа, ассоциированная с формой, сможет определить, какой элемент списка
выбран Соответствующий пример показан на рис 9 9 (листинг 9 9)
Рис 9 9 Список, в котором используется атрибут VALUE
Листинг 9 9 Пример создания списка, в котором используется атрибут VALUE
<html>
<head><title> select.htm </title></head>
<body>
<form>
Форматы графических файлов:
<select name="GIF - Graphics Interchange Format">
<option selected value="Graphics Interchange Format"> GIF - Graphics Interchange Format
<option value="JPEG"> JPEG - Joint Photographic Expert Group
<option value="PNG">PNG - Portable Network Graphic
<option value="BMP">BMP - Bit Map - битовая карта
</select> </form>
</body> </html> Многострочные текстовые поля 165
Многострочные текстовые поля
Для создания на форме многострочных текстовых полей, позволяющих пользо-
вателю вводить большие объемы информации, служит тег <TEXTAREA> Этот тег
имеет атрибуты NAME, ROWS, COLS
Атрибут NAME Атрибут NAME задает имя поля ввода
Атрибут ROWS Атрибут ROWS задает высоту поля ввода в символах
Атрибут COLS Атрибут COLS задает ширину поля ввода в символах
Для того чтобы в поле ввода по умолчанию при открытии формы выво-
дился какой-либо текст, его необходимо вставить между тегами <TEXTAREA>
и </TEXTAREA>
Пример использования тега <TEXTAREA> показан на рис 9 10 (листинг 9 10)
Рис 9 10 Форма с многострочным текстовым полем
Листинг 9 10 Пример создания формы с многострочным текстовым полем
<html><head><title>ТЕГ textarea </title></head>
<body><form>
<textarea name="Глоссарий" rows=10 cols=50>
URL
Uniform Resource Locator - унифицированный указатель ресурса
Стандартный способ адресации файлов в WWW
EPS
Encapsulated PostScript
Формат, позволяющий сохранять графические изображения и переносить их из одного
приложения в другое.
</textarea>
</form></body></html>166 Урок 9. Формы
Подведем итоги
В этом уроке рассказано, как создавать формы, позволяющие разработчикам ин-
терактивно взаимодействовать с посетителями своих страниц Такое взаимодей-
ствие происходит посредством размещаемых на форме элементов управления,
таких как однострочные и многострочные поля ввода, флажки, переключатели,
кнопки, раскрывающиеся и прокручивающиеся списки Для создания форм ис-
пользуется тег <FORM>, для создания элементов управления — тег <INPUT>, для
создания списков — тег <SELECT>, для создания многострочных полей ввода — тег
<TEXTAREA> Урок 10 Фреймы
Фреймы позволяют разбивать веб-страницы на подокна, причем
каждое подокно (фрейм) может иметь собственные полосы прокрут-
ки и функционировать независимо от других подокон либо наобо-
рот — управлять их содержанием. Фреймы могут значительно улуч-
шить внешний вид веб-страниц и повысить их функциональность.
Урок168 Урок 10. Фреймы
Свойства фреймов
Ниже перечислены некоторые свойства фреймов
Каждый фрейм имеет свой URL-адрес, что позволяет обращаться к нему и за-
гружать его независимо от других фреймов
Каждый фрейм имеет собственное имя (задаваемое атрибутом NAME), позво-
ляющее обратиться к нему из другого фрейма
Размер фрейма может быть изменен пользователем прямо на экране мышью
(если это не запрещено с помощью специального параметра)
Перечисленные свойства фреймов позволяют создавать разнообразные интер-
фейсные решения
В отдельном фрейме, который будет все время оставаться на экране, можно
разместить статическую информацию, которую автор считает необходимым
постоянно показывать пользователю Это может быть графический логотип
фирмы, соглашение об авторских правах, набор управляющих кнопок, оглав-
ление всех или части веб-документов, содержащихся на веб-сервере, что по-
зволит пользователю быстро находить интересующую его информацию
При интенсивных обращениях пользователя к веб-серверу можно постоянно
отображать на экране два фрейма — в одном фрейме пользователь будет вводить
свои запросы к серверу, а в другом видеть результаты их обработки сервером
Для веб-приложений, обслуживающих базы данных, можно создавать формы
с фреймами, связывая их отношениями главный—подчиненный Тогда в главном
фрейме будут отображаться общие данные из базы данных, а в подчиненном —
подробные данные, относящиеся к выбранному в главном фрейме элементу
Наборы фреймов
Формат документа, использующего фреймы, внешне очень напоминает фор-
мат обычного документа, только вместо тега <BODY> используется парный тег
<FRAMESET>:
<html>
<head>...</head>
<frameset>...</frameset>
</html>
То есть перед тем как размещать на веб-страницы фреймы, с помощью тега
<FRAMESET> (от англ frame set — набор фреймов) создают так называемый набор
фреймов, содержащий информацию о числе фреймов, их относительных и абсо-
лютных размерах Тег <FRAMESET> не несет какой-либо информационной нагрузки,
он только описывает фреймы Тег <FRAMESET> допускает вложения
Общий синтаксис набора фреймов:
<frameset cols="value" | rows="value">
<frame src="url1">
<frame ...>...
</frameset> Наборы фреймов 169
Общий контейнер <FRAMESET> описывает все фреймы, на которые делится экран
Можно разделить экран на несколько вертикальных или несколько горизонталь-
ных фреймов Для описания каждого фрейма в отдельности служит тег <FRAME>
Между тегами <FRAMESET> и </FRAMESET> могут находиться теги <FRAME>, вло-
женные теги <FRAMESET> и </FRAMESET>, а также контейнер из тегов <NOFRAME>
и </NOFRAME>, который позволяет продублировать документ для браузеров, не
поддерживающих фреймы
Тег <FRAMESET> допускает вложения и может иметь атрибуты COLS, ROWS, BORDER,
FRAMEBORDER, причем атрибуты ROWS и COLS взаимоисключающие
Атрибут COLS Атрибут COLS задает количество и размеры столбцов в создава-
емом наборе фреймов Значения ширины различных фреймов перечисляются
в кавычках через запятую в пикселах, в процентах (%) или в связанных мас-
штабных коэффициентах (*), например:
<frameset cols="число, число%, число*">
Атрибут ROWS Атрибут ROWS задает количество и размеры строк в создавае-
мом наборе фреймов в пикселах, в процентах (%) или в связанных масштабных
коэффициентах (*), например:
<frameset rows="число, число%, число*">
Количество фреймов определяется количеством значений в списке Общая
сумма значений высоты всех фреймов (при любом способе задания значений
атрибута) должна составлять высоту всего окна Отсутствие атрибута ROWS
означает один фрейм высотой с окно браузера
Атрибут BORDER Атрибут BORDER задает толщину обрамления в пикселах
для всех фреймов, входящих в данный набор фреймов, например:
<frameset border="число">
Атрибут FRAMEBORDER Атрибут FRAMEBORDER позволяет отменить вывод
обрамления у фреймов независимо от значения атрибута BORDER Значение 1
соответствует наличию, а 0 — отсутствию обрамления, например:
<frameset frameborder="1">
<frameset frameborder="0">
Задание значений атрибута ROWS или COLS в пикселах — далеко не самый лучший
способ описания высоты фрейма, поскольку пользователи могут произвольным
образом менять размер рабочего поля браузера, не говоря уже о различных раз-
решениях экрана Если вы все же выбрали данный способ описания размера, на-
стоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате
получилось 100-процентное заполнение окна браузера
Если значения атрибута ROWS или COLS указываются в процентах (от 1 до 100),
и общая сумма размеров описываемых фреймов превышает 100, то размеры всех
фреймов пропорционально уменьшаются, чтобы в результате получилась сумма в