Хомоненко А.Д., Цыганков В.М., Мальцев М.Г. - Базы данных. Учебник для высших учебных заведений (6-е изд.) - 2009
.pdf14. Введение |
в технологии |
публикации |
543 |
Пример. Задание таблицы, содержащей 3 строки и 3 столбца.
CTABLE ALIGN=LEFT BORDER=1>
<TR> <ТН>Заголовок 1 столбца</ТН> <ТН> Заголовок 2 столбца</ТН>
<ТН> Заголовок 3 столбца </THX/TR>
<TR> <Ю>Данные 2 стр. и 1 столб.</Ю> <TD> Данные 2стр. и 2 столб.</TD>
<TD> Данные 2стр. и 3 столб.</TD> </TR>
<TR> <TD> Данные 3 стр. и 1 столб.</ТН> <TD> Данные 3 стр. и 2 столб.<ДО>
<TD> Данные 3 стр. и 3 столб.</TD> </TR> <ДАВ1Е>
Этот пример задает таблицу, обрамленную рамкой, содержащую 3 строки и 3 столбца.
Аналогичным образом могут задаваться таблицы с произвольным числом строк и столбцов.
Теги определения кадров
Под кадром (фреймом — от англ. термина FRAME) понимается некоторая отдельная часть окна обозревателя. Кадры определяются внутри кадровой структуры (блока определений кадров), именуемой FRAMESET.
Для определения блока кадров используется контейнерный тег <FRAMESET>, имеющий следующий формат
<FRAMESET атрибут1=значение... атрибутМ=значение >
...Теги кадров ...
</FRAMESET>.
Внутри этого тега-контейнера могут располагаться только теги <FRAME>, определяющие одиночные кадры, или другие контейнеры <FRAMESET>. Рассматриваемый тег замещает тег <BODY>. HTML-доку мент, имеющий структуру FRAMESET, не должен иметь тег <BODY>, иначе кадровая структура будет игнорирована.
Рассмотрим применение важных атрибутов ROWS и COLS тега <FRAMESET>, определяющих строки и столбцы как отдельные кадры в кадровой структуре. В HTML-доку менте можно определить любое число строк
истолбцов как кадров. При этом необходимо задать значение для хотя бы одного из атрибутов ROWS или COLS. Тег <FRAMESET> с атрибутами ROWS
иCOLS имеет следующий формат:
<FRAMESET ROWS-'списокзначений" COLS=" список_значений "> </FRAMESET>
544 |
Часть 4. Публикация |
баз данных в Интернете |
Здесь список_значений содержит отделенные через запятую значения параметров, определяющих размеры кадров в пикселях, процентах или относительных единицах.
Следует учитывать, что кадр не может быть единственным. Для того чтобы обозреватель отобразил кадровую структуру, необходимо задать в списке значений параметров атрибутов ROWS или COLS более одного значения. Например:
<FRAMESET ROWS="50,50,100,100">
<FRAMESET COLS="50%,50%">
Здесь первая строка определяет набор кадров из четырех строк, высота которых составляет 50,50,100,100 пикселов соответственно, вторая строка определяет набор кадров из двух столбцов.
Высоту строки в пикселях задавать нежелательно, так как при этом не учитывается, что окна обозревателей могут иметь различную величину. В абсолютных единицах можно указывать размеры кадра лишь для небольших изображений, в остальных случаях лучше пользоваться относительными величинами, например:
<FRAMESET ROWS="25%,50%,25%">
Приведенный код создает три строки кадров высотой в 25%, 50% и 25% от высоты окна обозревателя.
Замечание.
Относительно точности указания высоты кадров в процентах можно не волноваться: если сумма не равна 100%, масштаб кадров будет пропорционально изменен.
Задание параметров кадров в относительных единицах выглядит следующим образом:
<FRAMESET COLS="*,2*,3*">
Здесь символ * означает пропорциональное деление окна программы просмотра. Таким образом, окно будет разделено на три вертикальных кадра, первый из которых будет иметь ширину в 1/6, второй — в 2/6 (или 1/3) и третий — в 3/6 (или 1/2) от ширины окна обозревателя. Единица при указании относительных значений может быть опущена.
Указание значений атрибутов ROWS и COLS может быть и смешанным, например:
<FRAMESET COLS="100,25%,*,2*">
Здесь первому кадру будет присвоено абсолютное значение в 100 пикселов по ширине, второму — 25% от ширины окна. Оставшееся пространство делится между третьим и четвертым кадрами в пропорции 1/3 к 2/3.
546 |
|
|
|
Часть 4. Публикация |
баз данных |
в Интернете |
||
ЕШNetscape |
|
|
|
|
|
н |
о |
ш |
Файл Правка |
Вцд |
Переход Компоненты |
Справка |
|
|
|
||
.jfc * Заклааки J ^ |
Адрес: (те/main.'html•( ( Щ Г Что по теме |
|
||||||
|
-IP^- |
|
^ ^ |
|
|
Й4 |
|
|
Назад |
Вперед |
|
Обновтъ |
Домой |
Поиск |
Netscape |
Пе< |
|
Instant Message |
Д |
Members |
§ WebMail j§j) Connections |
§ |
В |
|||
Первый кадр
В т о р ой |
Второй кадр, второй |
подкадр |
кадр, |
|
|
первый |
|
|
подкадр |
|
|
|
ГВы раб f b |
^ i ^ L J ^ Л |
Рис. 14.3. Вид окна обозревателя, содержащего файл main.htm
Как видно из рисунка, документ состоит из трех кадров. Верхний кадр занимает половину окна обозревателя по высоте. Нижняя половина поделена еще на два кадра. Левый нижний кадр (первый подкадр), на долю которого приходится 25% ширины окна обозревателя. Нижний правый кадр (второй подкадр) занимает 75% от ширины окна обозревателя. Такая разбивка на кадры реализуется на основе включения в набор кадров тега <FRAMESET> еще одного набора кадров.
Теги создания форм
Формы HTML являются основным средством организации интерактивного взаимодействия в Интернете при разработки Web-приложений. Они служат для пересылки данных от пользователя к Web-серверу. С помощью элементов HTML-докуменга можно создавать простые формы, предполагающие ответы типа "да" и "нет", а также разрабатывать сложные формы для заказов или для того, чтобы получить от пользователей какие-либо комментарии и пожелания, создавать требуемые интерфейсные элементы, фиксировать выбор параметра пользователем и т. д.
В HTML-доку менте формы задаются с помощью контейнерного тега < F O R M > и состоят из нескольких полей ввода (ограниченная область на экране обозревателя), которые обозреватель отображает в виде графических
14. Введение |
в технологии |
публикации |
547 |
элементов управления: кнопок выбора, переключателей, строк ввода текста, управляющих кнопок и т. д. Для создания полей ввода предназначены теги <INPUT>, <SELECT>, <TEXTAREA>, которые задаются внутри тега <FORM>. Рассмотрим коротко теги, используемые для создания форм и полей ввода на форме.
Тег <FORM> в общем виде записывается в следующем формате:
<FORM ACTION="URL" МЕГНОО=метод^передачи ENCTYPE=MIME-™n>
содержимое формы
</FORM>
Параметр ACTION является обязательным. В качестве его значения задается адрес URL программы-сценария (модуля расширения сервера на базе интерфейса CGI, ISAPI), которая будет обрабатывать извлеченную из формы информацию.
Параметр METHOD определяет метод пересылки данных формы от обозревателя к Web-серверу. Если параметр имеет значение GET, то данные формы передаются в составе запроса URL, будучи присоединенными к нему справа от символа "? " в виде пар "переменная=значение", разделенных символом "&". Например, первая строка запроса может иметь следующий вид:
GET /bhv.ru/cgi-bin/prog1 .cgi?name=stive&format=HTML HTTP/1.0
Web-cepeep после получения запроса присваивает переменной среды QUERY_STRING значение строки запроса и вызывает программу-сценарий, указанную в начальной части строки запроса. Эта программа может обратиться к переменной среды QUERY_STRING для обработки размещенных в ней данных.
Если параметр METHOD имеет значение POST, то данные формы пересылаются Web-cepeepy в теле запроса, который передает их, например, в программу CGI через стандартный ввод.
Значение параметра ENCTYPE определяет формат кодирования данных (или медиа-тип) содержимого формы при передаче их от обозревателя к Webсерверу. Кодирование данных выполняется для предотвращения их искажения при передаче.
Рассмотрим использование тегов-дескрипторов <TEXTAREA>, <SELECT> и <INPUT>, применяемых в HTML для создания интерфейсных объектов внутри формы (тег-дескриптор — это тег, который может использоваться только внутри тега <FORM>).
Замечания.
Использование тегов-дескрипторов вне форм поддерживается в обозревателе Internet Explorer. Netscape Navigator требует использовать теги-дескрип- торы только внутри тега-контейнера <FORM>.
5 4 8 |
Часть 4. Публикация |
баз данных в Интернете |
Теги-дескрипторы имеют следующее назначение:
•<TEXTAREA> позволяет вводить многострочную текстовую информацию;
•<SELECT> используется для выбора нужной строки в окне с полосой прокрутки либо в раскрывающемся меню;
•<INPUT> является многоцелевым тегом и позволяет вводить текстовую информацию в виде строки, создавать интерфейсные объекты в виде кнопок по установке и сбросу флагов (check boxes) и переключателей (radio buttons), обычные кнопки и другие объекты.
Т е г < S E L E C T >
Тег <SELECT> является контейнерным и позволяет организовать внутри формы выбор одной опции (параметра) из набора нескольких кнопок без использования полей выбора и переключателей. Тег <SELECT> позволяет выполнить компактное представление элементов выбора в виде раскрывающегося списка или списка прокрутки.
Тег <SELECT> записывается в следующем формате:
<SELECT NAMЕ=имя_поля SIZE=4i/icno MULTIPLE> элементы меню или списка
</SELECT>
Здесь: параметр SIZE определяет количество видимых элементов выбора, при SIZE=1 используется раскрывающееся меню, при SIZE="4Hano" большем 1 используется список прокрутки, для которого "число" определяет количество видимых элементов; задание параметра MULTIPLE позволяет выполнять выбор из меню или списка одновременно несколько элементов.
Элементы меню в теге <SELECT> задаются с помощью тега <OPTION>, записываемого в следующем формате:
COPTION SELECTED VALUE=3Ha4eHne>TeKCT
Атрибут S E L E C T E D задает выбор элемента по умолчанию. Параметр V A L U E содержит значение, пересылаемое серверу, если данный элемент выбран в меню или списке. Текст, находящийся в конце тега, выводится на экран обозревателя на месте элемента в списке.
Тег < T E X T A R E A >
Тег <TEXTAREA> является контейнерным и используется для создания внутри формы поля ввода многострочного текста. Это поле может отображается в виде ограниченной прямоугольной области с горизонтальной и вертикальной полосами прокрутки. Тег имеет следующий формат:
C T E X T A R E A N A M E = H M A R O W S = 4 n c n o C O L S = число >
текст по умолчанию
</TEXTAREA>
14. Введение |
в технологии |
публикации |
549 |
Атрибуты ROWS и COLS определяют число строк и число столбцов видимого текста соответственно. Между открывающим и закрывающим тегами может быть размещен текст, отображаемый в поле ввода по умолчанию.
Т ег < I N P U T >
Тег <INPUT> предназначен для генерирования внутри формы полей для ввода текста, пароля, имени файла и задания различных кнопок. Тег имеет следующий формат:
<INPUT ТУРЕ=тип_поля_ввода МАМЕ=имя_поля_ввода дополнительные_параметры>
Первые два параметра являются обязательными. Параметр TYPE определяет тип поля ввода: кнопка выбора, кнопка передачи и др. Параметр NAME задает имя поля, которое используется как идентификатор передаваемого Web-cepeepy значения. Состав дополнительных параметров зависит от значения параметра TYPE, определяющего типа поля.
Атрибут TYPE тега <INPUT> может принимать следующие значения:
•TEXT — является значением по умолчанию. В этом случае создается интерфейсный элемент в виде одной строки для ввода данных. Для этого
типа поля ввода наиболее часто используется атрибут VALUE, которое предоставляет доступ к данным находящимся внутри этого поля;
•PASSWORD — аналогичен предыдущему типу, но заменяет вводимые символы пароля звездочками;
•CHECKBOX — выводит поле для установки флагов в виде ограниченной области, в котором может быть произведен выбор сразу несколько опций из числа предложенных. В этом поле может использоваться атрибут CHECKED, который определяет установленный по умолчанию флаг;
•RADIO — аналогичен предыдущему типу поля, но имеет отличный внешний вид (аналогичный интерфейсному виду Radio-кнопки — графическому элементу операционной системы Windows) и не позволяет отменять сделанный выбор;
•RESET — позволяет создать кнопку для обновления формы;
•SUBMIT — используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой-сценарием.
Например, создание различных элементов тега INPUT и других тегов формы для отправки информации на сервер выполняется с помощью следующего кода:
<FORM>
Введите ваше имя:
<INPUT TYPE-'text" NAME="My" \/а1ие="Имя" SIZE="10" MAXLENGTH-'20"> Введите пароль:
<INPUT TYPE="password" NAME="pass1" Size="30" MAXLENGTH="30">
550 |
Часть 4. Публикация |
баз данных в Интернете |
<BR>
Выберите тип действия: <BR>
CINPUT TYPE="checkbox" NAME="mycheckboxl" VALUE="Параметр!"
C H E C K E D >
Действие 1
<INPUT TYPE="checkbox" NAME="mycheckbox2" VALUE=" Параметр2"> Действие 2
<BR>
<INPUT TYPE="radio" NAME="my1" VALUE=" Параметр2"> Действие 3
CINPUT TYPE="radio" NAME="my2" VALUE=" ПараметрЗ"> Действие 4
<BR>
<TEXTAREA NAME="My_textarea " ROWS=4 COLS=40> Справочный текст, внутри которого <BR>
можно ввести собственные данные <BR> Эта форма посылает данные серверу </TEXTAREA> <BR>
<SELECT NAME="menu">
<OPTION SELECTED УАШЕ="Действие1 "> Действие 1 <OPTION VALUE=" Действие2"> Действие2
COPTION VALUE=" ДействиеЗ"> ДействиеЗ </SELECT>
CINPUT TYPE="reset" VALUE="Reset "> CBR>
CINPUT TYPE="submit" VALUE=" Послать данные!"> C/FORM>
На Рис. 14.4 приведено содержимое окна обозревателя, содержащее текст примера с элементами различных типов тегов INPUT, SELECT и TEXTAREA.
В этом примере у элемента "текстовое поле" использованы дополнительные атрибуты: SIZE="10" определяет размер рамки для размещения 10 символов, а атрибут MAXLENGTH="20" максимальный размер внутреннего представления текстовой строки в символах. Атрибут NAME у всех типов используется для получения доступа к заданному элементу HTML-доку- мента.
Графические теги
В HTML-доку менте используются два формата графических изображений: GIF и JPEG. Эти форматы используют большинство современных обозревателей.
14. Введение в технологии |
публикации |
|
|
|
551 |
|||
Netscape |
|
|
|
|
|
И И |
и |
|
Файл Правка |
Вид |
Переход Компоненты |
Справка |
|
||||
|
£ " " Закладки Jfc |
Адрес: ]е8%Е52 •*} |
Что по теме |
д |
||||
|
|
|
|
|
|
|
|MJ |
|
Назад |
Вперед |
|
Обновить |
Домой |
Поиск Netscape |
|
||
Д |
Instant Message |
§J Members |
Щ] WebMail Ц |
Connections |
§ |
|||
Введите ваше имя: Имя |
Введите |
пароль: |
|
|||||
Выберите тип действия: |
|
|
|
|
||||
Ф |
Действие 1 Г" |
Действие 2 |
|
|
|
|||
Г |
Действие 3 |
|
Действие 4 |
|
|
|
||
Справочный текст, внутри которого <BR> можно ввести собственные данные <BR> Эта форма посылает данные серверу
15ействие2 ^ |
Reset |
Послать данные! |
|
|
|
|
|
|
|
|
[ВьГ|=1^ щ |
m |
1 ^ |
|
Рис. 14.4. Окно обозревателя с текстом примера
Для использования изображения на HTML-странице применяется тег IMG следующего формата:
<IMG атрибут1=значение ... атрибутМ=значение >
Рисунок отображается в том месте документа, где находится тег <IMG>. Отметим применение некоторых наиболее важных атрибутов тега <IMG>.
Атрибут SRC используется для указания URL-адреса файла, содержащего рисунок. Например:
<IMG SRC="my.gif">
Атрибуты HEIGHT и WIDTH позволяют устанавливать размер изображения в пикселях соответственно по высоте и ширине. Например:
<IMG SRC="my.gif" HEIGHT=200 WIDTH=100 >
552 |
Часть 4. Публикация |
баз данных в Интернете |
Замечание.
Использовать эти атрибуты нужно весьма аккуратно, так как при изменении масштаба изображения программа просмотра может сильно исказить рисунок.
Атрибут ALT позволяет выводить краткое текстовое описание вместо рисунка, в случае если пользователь установил отмену загрузки изображений. Если изображения выводится, то это описание отображается на месте рисунка до начала его загрузки. Например:
<IMG SRC-'my.gif" ALT-'Описание рисунка">
Атрибут BORDER используется для установления толщины рамки в пикселях, которая выделяет рисунок.
Теги задания ссылок
Одним из важных элементов в HTML-доку менте является ссылка. Она состоит из указателя (anchor) и адресной части ссылки (URL-адрес). Указатель ссылки отображается обозревателем в HTML-доку менте. При выборе пользователем указателя ссылки обозреватель загружает HTML-доку мент, адрес которого определяется URL-адресом. В качестве указателя ссылки может выступать текст или изображение. Обычно обозреватель отображает указатель ссылки в виде подчеркнутого прямой линией текста.
Ссылки задаются с помощью тега контейнерного типа следующего формата:
<А HREF="URL-aflpec">TeKCT указателя или Теги задающие изображение</А>
Атрибут HREF тега <А> задает URL-адрес HTML-доку мента, который отображается в окне обозревателя при выборе ссылки.
Информация находящаяся внутри контейнера, может содержать текст указателя или специальные теги, задающие изображения. Например:
<А HREF="my.htmr>,LUifl отображения файла my.html выберите этот текст </А>
Для создания графической ссылки следует в контейнер тега ссылки включить тег, определяющий изображение, например:
<А HREF="my.html"XIMG SRC="pncyHOK.gif"></A> .
В случае необходимости ссылаться на разные части текущего документа используются внутренние ссылки. Для задания внутренней ссылки нужно в атрибуте HREF тега <А> поместить имя указателя со специальным префиксом (#):
<А HREF="#l/lMfl"> Текст внутри ссылки </А>
где Имя — специальное имя, которое используется для организации связи с фрагментом текста; Текст внутри ссылки — текст указателя ссылки, отображаемый в окне обозревателя.