Файл: Базовые понятия.pdf

25
бавлены в коде HTML. Теперь в таблицу нужно добавить строки и столб- цы. Для этого используются дескрипторы:
… - новая строка таблицы;
… - ячейка заголовка;
… - обычная ячейка таблицы.
Заголовок таблицы
Заголовок таблицы задается парными тегами

и помещается после тега . Для элемента CAPTION можно задать атрибут, определяющий положение заголовка относительно таблицы – align. Этот атрибут может принимать следующие значения:
– top – заголовок показывается сверху таблицы (используется по умолчанию);
– bottom – под таблицей;
– left – слева от таблицы;
– right – справа от таблицы.
Параметры отображения таблицы
Наиболее часто используемые атрибуты HTML-элемента TABLE:
1) align – задает положение таблицы в окне браузера;
2) bgcolor – задает цвет фона таблицы;
3) border – задает толщину внешней границы таблицы;
4) bordercolor – цвет границы таблицы;
5) cellpadding – размер пустого пространства между границами и со- держимым ячеек таблицы;
6) cellspacing – размер пустого пространства между ячейками таблицы;
7) frame – задает отображаемые части внешней рамки таблицы, может принимать одно из перечисленных значений:
– void – рамка не отображается (по умолчанию);
– above – отображается только верхняя граница;
– below – показывается только нижняя граница;
– hsides – отображается верхняя и нижняя границы;
– vsides – показывается правая и левая границы;
– lhs – отображается только левая граница
– rhs – отображается только правая граница;
– box – рамка отображается полностью;
– rules – задает, какие именно границы между ячейками должны отображаться, может принимать одно из следующих значений:
 none – границы между ячейками не отображаются;
 rows – отображаются только границы между строками;
 cols – отображаются только границы между столбцами;
 all – отображаются все границы между ячейками;
 height – задает рекомендуемую высоту таблицы;
 width - задает рекомендуемую ширину таблицы.

Доходы от продаж за второе полугодие
2007 года

Филиал\Период	3квартал			4квартал
	Июль	Август	Сентябрь	Октябрь	Ноябрь	Декабрь название филиала) -->
Филиал1	123123	323233	323453	231423	323212	243673
Филиал2	223523	225243	314423	212445	373812	274673
Филиал3	183123	186834	323453	231423	323212	243673
Филиал4	125163	334343	123553	167423	254412	132367

27 3. Сохраните документ под именем Таблицы.html».
4. Загрузите свой документ.
5. На экране вы увидите результат своей работы, изображенный на рис. 15.
Рис.15. Таблица с объединенными ячейками
ФРЕЙМЫ
Фреймы позволяют разбить окно просмотра на несколько прямо- угольных областей, располагающихся рядом друг с другом. В каждую из областей можно загрузить отдельный HTML-документ, просмотр которого осуществляется отдельно от других документов. Между фреймами, также как и между отдельными окнами браузера, можно организовать взаимо- действие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
При использовании фреймов, файл, описывающий структуру фреймов
(обычно это - index.html) не может содержать в себе никакой другой ин- формации, кроме этого описания. Вместо раздела BODY такой файл со- держит раздел FRAMESET. Внутри тэга-контейнера ...
< FRAMESET> могут содержаться только вложенные тэги FRAMESET и тэги FRAME.
FRAMESET используется для разбиения окна браузера или окна ро- дительского фрейма на отдельные фреймы. При разбиении окна на фрей- мы используются следующие атрибуты элемента FRAMESET:
– cols – список значений ширины создаваемых фреймов (могут зада- ваться как абсолютные значения в пикселях, так и процентные);
– rows – список значений высоты создаваемых фреймов.

28
Между тэгами должны содержаться либо описания каждого фрейма с использованием HTML-элемента
FRAME. Этот HTML-элемент задается одиночным тэгом . Наи- более часто используемые атрибуты HTML-элемента :
– name – задает имя фрейма, позволяя использовать его в качестве целевого фрейма в гиперссылках;
– src – URI документа, содержимое которого отображается в окне фрейма;
– noresize – булев атрибут, блокирует возможность изменения разме- ра окна фрейма;
– scrolling – позволяет показывать или убрать полосы прокрутки в ок- не фрейма, может принимать значение yes(показать полосы прокрутки), no
(не отображать) или auto (используется по умолчанию: показать полосы прокрутки только в том случае, если содержимое не умещается в окне фрейма);
– frameborder – задает, должен ли браузер показывать рамку окна фрейма, может принимать значение 1 (рамка показывается) или 0 (рамка не показывается);
– marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселях);
– marginheight – задает расстояние между границами фрейма и его содержимым по вертикали.
Целевой фрейм отдельных гиперссылок
Для указания целевого фрейма каждой гиперссылки, то есть фрейма, в котором будет показано содержимое открываемого по ссылке HTML- документа, используется атрибут target. Значением этого атрибута может быть либо имя нужного фрейма (значений атрибута name этого фрейма), либо одного из следующих предопределенных строковых значений:
_blank – открыть документ в новом окне;
_self – открыть документ в том же окне, где находится гиперссылка;
_parent – открыть документ в окне родительского фрейма (аналогично
_self, если фрейм, в котором находится гиперссылка, не имеет родителя);
_top – заменить содержимое окна браузера на содержимое открывае- мого документа, отменяя все созданные ранее фреймы.
Атрибут target поддерживается для всех HTML-элементов, позво- ляющих создавать гиперссылки: А, LINK, AREA. Пример:
FRAMESET ROWS="15%, 70%, 15%" /FRAMESET - создается фреймовая структура (по умолчанию с сеткой шириной 5 пикселей) из трех строк: первая строка 15 % высоты окна браузера, вторая 70 % и третья 15 %;

29
FRAMESET COLS="*, 3*" BORDER=3 BORDERCO-
LOR=GRAY /FRAMESET - создается фреймовая структура из двух столбцов: первый ¼ ширины окна браузера, второй ¾ ширины, с сеткой шириной 3 пикселя, цвет сетки - серый;
FRAMESET ROWS="50%, 50%" COLS="50%, 50%" FRAME-
BORDER=NO /FRAMESET - создается фреймовая структура без сетки из двух столбцов и двух строк, делящих окно браузера на 4 равные части.
Упражнение 12
1. Запустите программу Блокнот.
2. Наберите в окне редактора текст файла HTML:









3. Сохраните документ под именем index.html.
4. Создайте самостоятельно три простых HTML-документа, под имена- ми Страница 1, Страница 2, Страница 3. Первый документ должен содержать текст: «Содержимое первой страницы» соответственно два сле- дующих: «Содержимое второй страницы», «Содержимое третьей страницы».
5. Загрузите установочный файл (index).
6. На экране вы увидите результат своей работы, изображенный на рис. 16.
7. Изучите внимательно текст HTML-документ (index). Здесь создает- ся внешний набор из двух фреймов, занимающих всю высоту окна браузера. При этом в левом фрейме внешнего набора создается еще один набор фреймов. Нужно заметить, что блок

> аналогичен одному элементу FRAME (описывает содержимое одного фрейма из внешнего набора). Поэтому, анализируя приведенный пример, можно однозначно сказать, что разбивается левый фрейм внешнего набора, а в правый фрейм загружается содержимое документа Страница 3.html.

30
Рис.16. Сайт с фреймами
ЛАБОРАТОРНАЯ РАБОТА № 4
1. Запустите программу Paint.
2. Создайте рисунок, который вы в дальнейшем будете использовать в качестве фонового изображения.
3. Сохраните этот рисунок под именем «Фон.gif».
4. Создайте домашнюю страничку, состоящую из нескольких фрей- мов (структуру фреймов выбрать самостоятельно).
5. Оформите, Web-страницу используя полученные знания.
6. Пример создания домашней странички приведен на рис. 17.
7. Переход по ссылке «Моё хобби» на рис. 18.
Рис.17. Пример оформления домашней странички
Здравствуйте

31
Рис. 18. Переход по ссылке «Моё хобби»
Элемент NOFRAMES
Фреймы являются весьма привлекательным средством оформления сайтов. Однако фреймы появились не сразу. У достаточно большого коли- чества пользователей до сих пор могут стоять старые версии браузеров, НЕ поддерживающие фреймов вообще.
Если важно, чтобы при просмотре сайта, использующего фреймы, пользователь хоть что-то увидел, то следует применять HTML-элемент
NOFRAMES. Этот элемент задается парными тегами <br> . Он помещается в один файл с описанием набора фрей- мов. Между этими тэгами помещается текст, который браузер показывает в том случае, если он не поддерживает фреймы (или если пользователь от- ключил в браузере поддержку фреймов).
ФОРМЫ
Назначение форм состоит в том, чтобы дать возможность посетителю управлять содержимым Web-страницы, вызывать на выполнение сценарии, а также вводить собственные данные и отправлять их на Web-сервер или по адресу электронной почты.
Создание формы
Для вставки формы в HTML-документ используется элемент FORM.
Он задается парными тэгами < FORM > FORM >. Между этими тэгами помещаются описания элементов управления формы. При создании формы используются следующие атрибуты:

32
– action – обязательный для каждой формы параметр, URI програм- мы-обработчика данных формы;
– method – задает способ отправки данных, введенных в форму, может принимать значения get (используется по умолчанию) или post;
– enctype – задает тип данных формы, если используется метод от- правки post; по умолчанию имеет значение application/x-www-form- urlencoded; при необходимости передачи файлов используется значение multipart/form-data;
– accept-charset – применяется при передаче файлов, позволяет ука- зать, какие кодировки используются для каждого из файлов (список стро- ковых значений – названий кодировок), по умолчанию устанавливается значение UNKNOWN (приложение на сервере должно само определять кодировку);
– accept – описывает типы файлов (MIME – типы), предаваемые сер- веру; если этот параметр не использовать, то серверное приложение долж- но уметь само определять типы передаваемых ему файлов.
Стандартные элементы управления
Элементы управления, которые используются чаще всего – одно- строчное текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки (как пользовательские, так и выполняющие стандартные действия), поля имен файлов. Все упомянутые элементы управления отображаются браузером Internet Explorer. Для обозначения всех этих элементов управ- ления используется один HTML-элемент – INPUT. Этот элемент задается одиночным тэгом и имеет следующие атрибуты:
– type – принимает строку, задающую тип элемента управления (по умолчанию используется строка text и создается соответственно поле для ввода текста. Значения атрибута type приведены в табл. 3.
Таблица 3
Значения атрибута type
Значение атрибута
Особенности text
Создается однострочное текстовое поле. Значение атри- бута value отображается в качестве текста по умолчанию. Ат- рибут size воспринимается как количество символов, которое может отображаться в поле без необходимости горизонталь- ной прокрутки текста. Атрибут maxlength задает максималь- ное количество символов, которые могут быть введены в поле password
Действие этого значения аналогично действию значения text, но дополнительно скрывается вводимый пользователем текст (заменяется символами «*» или другими). Используется для ввода конфиденциальной информации типа паролей

33
окончание табл. 3
Значение атрибута
Особенности checkbox
Создает элемент управления флажок. Задавать значение атрибута value нужно обязательно, так как именно это значение отправляется серверу, если флажок установлен. Можно исполь- зовать несколько элементов управления checkbox с одинаковым значением атрибута name для обеспечения возможности зада- ния нескольких значений одного свойства radio
Создает переключатель. Имеет смысл использовать как минимум два этих элемента управления вместе, объединенных в группу, с заданием одного и того же значения атрибута name.
Тогда у пользователя появляется возможность выбора одного из нескольких вариантов (одновременно можно установить только один переключатель в группе). Значение атрибута value задавать также обязательно, оно используется аналогично эле- менту управления checkbox file
Создает поле для ввода имени файла с возможностью вы- бора файла с помощью диалогового окна открытия файла или без него, что зависит от браузера. Содержимое выбранного файла или файлов пересылается вместе с формой. Для коррект- ной работы необходима установка значения атрибута method формы в post, a enctype — в multipart/form-data. Значение атри- бута value используется как имя файла по умолчанию. Значение атрибута size задается и работает аналогично элементу управ- ления text submit
Создает кнопку, при нажатии которой браузер отправит форму. Значение атрибута value задает надпись на кнопке image
Создает изображение, при щелчке на котором произойдет отправка формы браузером. При этом на сервер передаются также координаты указателя мыши относительно левого верх- него угла изображения. Атрибут src задает расположение используемого изображения reset
Создает кнопку, при нажатии которой значения всех эле- ментов управления будут заменены значениями по умолчанию.
Значение value задает надпись на кнопке button
Создает пользовательскую кнопку. При нажатии или дру- гом действии с кнопкой может выполняться ассоциированный сценарий. Значение атрибута value используется как надпись на кнопке. Подробно создание сценариев, ассоциирование их с элементами управления и не только будет рассмотрено далее hidden
Создает скрытый элемент управления. Для него задаются атрибуты name и value. Пользователь не видит и не может из- менить содержимое этого элемента управления. Однако данные скрытого элемента управления отправляются серверу вместе с остальными данными формы

34
– name – используется для задания имени элементу управления
(строка, которая помимо идентификации элемента управления добавляется в данные, отсылаемые серверу);
– checked – булев атрибут, если он установлен, то флажок или пере- ключатель считается (и отображается браузером);
– size – задает размер элемента управления (единицы измерения и действие специфичны для разных элементов управления);
– value – начальное значение для полей ввода текста и полей для ука- зания имен файлов, также используется как надпись таких элементов управления, как кнопки; необязательно для всех элементов управления, кроме флажков и переключателей;
– disabled – булев атрибут, установка которого не позволяет пользо- вателю работать с элементом управления;
– readonly – булев атрибут, позволяет запретить изменение состояния элемента управления (работает только для текстовых полей и поля выбора файла, так что для остальных элементов управления лучше использовать атрибут disabled, однако при этом данные деактивированных элементов управления не отправляются серверу);
– maxlenth – задает максимальную длину текста, который может быть введен в текстовые поля (положительное численное значение);
– src – для элемента управления image задает расположение исполь- зуемого изображения;
– title – описание элемента управления (может отображаться браузе- рами как всплывающая подсказка);
– align – задает горизонтальное выравнивание элемента управления, работает так же, как и для любого другого HTML-элемента, поддержи- вающего этот атрибут;
– tabindex – номер элемента управления при навигации при помощи табуляции;
– accesskey – «горячая» клавиша для элемента управления (для пере- хода к элементу управления нужно нажать Alt и заданную клавишу).
Многострочное текстовое поле
Обозначается этот элемент управления HTML-элементом TEXTAREA и задается парными тэгами и .
Списки
Другой способ дать возможность пользователю выбрать то или иное значение состоит в использовании списков. Различают два вида списков: обычные с полосой прокрутки и раскрывающиеся. Раскрывающийся спи- сок удобен в тех случаях, когда нужно сэкономить место на странице и уместить много элементов управления в пределах окна обозревателя.

35
Несмотря на различия во внешнем виде и функциональности, списки обоих типов создаются с помощью одних и тех же дескрипторов. LECT>... — создает пустой объект списка.
Установка атрибутов в дескрипторе определяет вид и функциональность списка.
SIZE — устанавливает число строк в поле списка. Если этому атрибу- ту присвоено значение 1, обозреватель показывает раскрывающийся спи- сок, при любом другом положительном значении — обычный список с по- лосой прокрутки.
MULTIPLE — позволяет выбирать в списке сразу несколько элемен- тов. По умолчанию атрибут не установлен.
При выборе какого-либо элемента снимается выделение с элемента, который был выбран ранее.
Выбор нескольких элементов невозможен в раскрывающемся списке, поэтому установка атрибута multiple преобразует список в обычный даже в том случае, если атрибуту size присвоено значение 1.
NAME — имя объекта списка для обращения к списку в коде сценария.
<ОPTI0N> — создает элемент списка. Данные дескрипторы добавля- ются в список между парой дескрипторов ... SELECT>.
Любой текст за дескриптором отображается обозревателем как текст элемента списка. В данном дескрипторе устанавливаются сле- дующие атрибуты:
– VALUE — значение элемента списка. Данное значение никак не отображается в окне обозревателя, но именно оно, а не подпись выбранно- го элемента списка, добавляется в данные формы;
– SELECTED — установка этого атрибута выделяет элемент списка по умолчанию.
Если атрибут selected установлен в нескольких дескрипторах
, тогда как в дескрипторе списка атрибут multiple не был установлен, выделен будет последний элемент в списке с установленным атрибутом select.
Упражнение 13
1. Запустите программу Блокнот.
2. Наберите в окне редактора текст файла HTML:

Фамилия:

36

Группа переключателей

Белый
Красный
Желтый
Зеленый

Группа флажков

Груша
Персик
Яблоко
TYPE=
'button'
VALUE='Пишите мне'
ON-
CLICK=window. open('mailto:MyAddress@mail.ru');>
ONCLICK=window.open('http:\\\\www.MySite.org\\MyFoto.htm');>