учебник. Учебник. Методические указания по выполнению лабораторнопрактического цикла для студентов очной и заочной формы обучения направления Прикладная информатика
 Скачать 1.91 Mb.
|
Оглавление20 Рис.10. Списки Упражнение 1 Упражнение 2 Упражнение 3 Упражнение 4 Упражнение 5 Упражнение 6 ='Упражнение 7.html'>Упражнение 7 21 ГРАФИКА НА WEB-СТРАНИЦАХ Для вставки изображения в текст HTML-документа используется эле- мент. Для задания HTML-документа применяется одиночный тэг < IMG >. Список наиболее используемых атрибутов: – атрибуту src присваивается путь к файлу на диске или URL – адрес файла рисунка в Интернете; – alt – альтернативный текст, который отображается на месте изобра- жения, если по каким-либо причинам само изображение не может быть по- казано; – border – задает толщину границы вокруг рисунка в пикселях; – align – определяет выравнивание изображения; – height – задает высоту изображения в пикселях; – width – определяет ширину изображения в пикселях; – vspace – задает величину свободного пространства между изобра- жением и текстом сверху и снизу; – hspace – задает величину свободного пространства между изобра- жением и текстом справа и слева; – name – позволяет идентифицировать изображение так, что на него могут ссылаться различные сценарии. Упражнение 9 1. Откройте программу Paint. 2. Создайте простой рисунок (например, опознавательный знак транс- портного средства). 3. Установите необходимые размеры для рисунка, сохраните его в своей папке HTML под именем рисунок 1.jpeg. 4. Откройте программу Блокнот. 5. Наберите в окне редактора текст файла HTML:  - небольшое изображение с рам- кой 22 Рис.12. Web – страница с рисунком Линейки Линейка – горизонтальная линия в окне браузера. Для вставки линей- ки в HTML-документ используется элемент HR. Этот HTML – документ задается при помощи одинарного тэга и имеет следующие атрибуты: – align – задает выравневание линейки в окне браузера, может прини- мать значения left, right или center; – noshade – булев атрибут, указывает браузеру, что линейку следует отображать плоской (без традиционной тени); – size – численное значение, определяющее толщину линии; – width – численное значение, определяющее ширину линейки; может задаваться как абсолютное (в пикселях) значение, так и относительное (в процентах от ширины окна браузера). Упражнение 10 1. Запустите программу Блокнот. 2. Наберите в окне редактора текст файла HTML: Линейка с настройками по умолчанию Линейки различной толщины 23 Плоская линейка Линейки с различным выравниванием 24 Это опознавательный знак транспортного средства. Устанавливается на транспортное средство, на котором проводится обучение вождению.  25 бавлены в коде HTML. Теперь в таблицу нужно добавить строки и столб- цы. Для этого используются дескрипторы: … | - ячейка заголовка; … | - обычная ячейка таблицы. Заголовок таблицы Заголовок таблицы задается парными тегами
27 3. Сохраните документ под именем Таблицы.html». 4. Загрузите свой документ. 5. На экране вы увидите результат своей работы, изображенный на рис. 15. Рис.15. Таблица с объединенными ячейками ФРЕЙМЫ Фреймы позволяют разбить окно просмотра на несколько прямо- угольных областей, располагающихся рядом друг с другом. В каждую из областей можно загрузить отдельный HTML-документ, просмотр которого осуществляется отдельно от других документов. Между фреймами, также как и между отдельными окнами браузера, можно организовать взаимо- действие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера. При использовании фреймов, файл, описывающий структуру фреймов (обычно это - index.html) не может содержать в себе никакой другой ин- формации, кроме этого описания. Вместо раздела BODY такой файл со- держит раздел FRAMESET. Внутри тэга-контейнера 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. Этот элемент задается парными тегами ФОРМЫ Назначение форм состоит в том, чтобы дать возможность посетителю управлять содержимым Web-страницы, вызывать на выполнение сценарии, а также вводить собственные данные и отправлять их на Web-сервер или по адресу электронной почты. Создание формы Для вставки формы в HTML-документ используется элемент 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 Несмотря на различия во внешнем виде и функциональности, списки обоих типов создаются с помощью одних и тех же дескрипторов. Установка атрибутов в дескрипторе 36 | |||||||||||||||||||||||||||||||||||||||||