Создания интерактивных WEB - страниц для получения информации в сети Интернет с использованием форм, заполняемых пользователем (стр. 2 из 3)

Атрибут ALT. С помощью этого атрибута указывается строка текста, используемая браузером вместо изображения, которое по каким-либо причинам невозможно загрузить.

Атрибут ALIGN. Определяет выравнивание текста относительно изображения. Если этот атрибут принимает одно из значений TOP, MIDDLE или BOTTOM, то текст, следующий за изображением, выравнивается по верхнему краю, по центру или по нижнему краю изображения. Если атрибут ALIGN установить в значение LEFT или RIGHT, то изображение будет плавать у левого или правого поля соответственно, а текст будет его обтекать.

Атрибут HEIGHT и WIGTH позволяют определять размер изображения в пикселах. В качестве примера, поясняющего действие атрибутов HEIGTH & WIGTH на изображение, может быть приведен следущий синтаксис тега <IMG>:

< IMG SRC = “URL” wigth=пикселы heigth=пикселы >.

В том случае, когда графическое изображение используется как альтернатива гипертексту, синтаксис установки графического якоря такой же, как при установке текстового. Между тегами <A href = “URL”> и < /A> вместо текста должен быть помещен тег <IMG>, в соответсвии со следующим снтаксисом:

< Ahref = “URL” > < IMG = “файл_изображения” > < /A>.

Примечание. В том случае, если графический объект интерпретируется как якорь гиперссылки, тогда вызываемый HTML- документ, само изображение, а также вызывающий документ должны находиться в одной папке (на локальном компьютере). В этом случае синтаксис гиперссылки имеет следующий вид:

< AHREF = “bs.htm” > < IMGSRC = “km.jpg”> < /A >

2.7 Фреймы их использование

Фреймы позволяют разделить Web-страницы на независимые области произвольного или фиксированного размера. Выполняя определенные действия в одних фреймах, можно изменять содержимое других фреймов – это позволяет рассматривать фреймы в качестве инструмента навигации. Перечень гиперссылок на документы на узле помещается в одном фрейме, а другой фрейм выделяется собственно под содержимое.

Первый шаг в создании фреймовой схемы расположения состоит в разбивке окна на нужные области. Это осуществляется путем реализации отдельного HTML – документа, который целиком используется для определения фрейма. В этом документе вместо тегов <BODY> & < /BODY> используются теги <FRAMESET> и < /FRAMESET>, предназначенные для определения фреймов. Атрибуты тега <FRAMESET> определяют, как экран разбивается на части.

Тег <FRAMESET> может иметь один их двух атрибутов:

ROWS – для разбивки экрана на две и более строки;

COLS – для разбивки экрана на столбцы.

Каждому атрибуту присваивается список значений сообщающий браузеру размер строк и столбцов (в % от общей ширины окна, в пикселях или символом (*), который означает, что браузер должен использовать все оставшееся место). В качестве примера может быть приведен следующий синтаксис:

. . .

< /FRAMESET>

или

. . .

< /FRAMESET>

Первый пример определяет ширину фреймов в процентах, второй – в пикселях.

Атрибут <FRAMEBORDER> тега <FRAMESET> позволяет устанавливать обрамление у фреймов. Он может принимать одно из двух значений:

1 - соответствует наличию обрамления

0 - отсутствию обрамления.

В случае, если необходимо конструировать достаточно сложную схему разбиения экрана на фреймы осуществляют вложение тегов <FRAMESET> & < /FRAMESET> друг в друга.

Например, схеме организации фреймов, когда экран разбивается сначала на два фрейма по вертикали, а затем первый фрейм разбивается на два по горизонтали (см. Рис.1а), соответствует следующий HTML –код тега FRAMESET:

. . . данные, размещаемые в верхней части первого столбца . . .

. . . данные, размещаемые в нижней части первого столбца . . .

< /FRAMESET>

. . . данные, размещаемые во втором столбце . . .

< /FRAMESET>

а) б)

Рис. 1 Схемы разбиения фреймов.

Схеме разбивки окна на фреймы, изображенной на рис.1б, соответствует следующий фрагмент HTML –программы:

. . . данные, размещаемые в верхней части . . .

. . . данные, размещаемые в первом столбце нижней части . . .

. . . данные, размещаемые во втором столбце нижней части . . .

< /FRAMESET>

< FRAMESET>

Используя вложенные теги <FRAMESET>, можно добиваться построения схемы с фреймами любой степени сложности.

Размещение содержимого в фреймах управляет тег <FRAME>. Этот тег имеет обязательный атрибут SRC, который сообщает браузеру URL –документа, загружаемого в фрейм. Среди шести атрибутов (кроме SRC) тега <FRAME> необходимо выделить два наиболее важных:

Атрибут NAME, с помощью которого осуществляется присвоение фрейму имени. Уникальные имена фреймов важны при нацеливании гиперссылок (атрибут TARGET тега <A>) на конкретные фреймы.

Атрибут SCROLLING = YES/NO/AUTO, который управляет появлением горизонтальной и вертикальной полос прокрутки (в случае, если он равен YES). Если атрибут SCROLLING = AUTO (это значение устанавливается по умолчанию), то браузер сам выводит линейки прокрутки, если они необходимы.

Нацеливание гиперссылок на фреймы позволяет постоянно иметь в одном фрейме их неменяющийся список, а вызываемые документы загружать в другие фреймы. Первоначально, во фреймы, предназначенные для вывода содержимого документов, вызываемых по гиперссылкам, можно загружать любые HTML –документы (не несущие никакой принципиальной информации), а затем содержимое документов, вызываемых по гиперссылкам.

Простейший пример формирования фреймовой схемы и определения ее содержимого (однако являющийся законченным HTML -документом) имеет следующий синтаксис:

<HTML>

<HEAD>

<TITLE> ФРЕЙМЫ < /TITLE>

< /HEAD>

< /FRAMESET>

< /HTML>

2.8 Размещение и реализация изображения в виде карты

Как мы уже знаем, в HTML-документ можно включать изображения, которые считываются программой просмотра из файлов в одном из графических форматов. Ранее (раздел 2.5) было сказано, что всё изображение целиком можно сделать якорем гиперссылки. Однако, подчас возникает вполне естественное желание сделать различные части одного изображения гиперссылками на различные документы. Представим себе, например, документ с изображением электронной схемы прибора, более подробные сведения об элементах которого пользователь может немедленно получать, щелкая мышью на соответствующих участках чертежа. HTML предлагает для этого следующий способ: добавив к флагу <IMG ...> специальный атрибут ISMAP и/или USEMAP, вы можете "сказать" программе просмотра, что данное изображение является картой (Maps, Clickable Images, Imagemaps). Реакция на щелчок мыши на изображении-карте будет различной в зависимости от координат курсора мыши в момент щелчка.

Старый стандарт HTML 2.0 определял только атрибут ISMAP, который предусматривает обработку "щелчка на карте" на WWW-сервере при помощи CGI-запросов, аналогичных применяемым для обработки заполняемых форм. При таком способе обработки координатных запросов читатель WWW-документа должен щелкнуть на интересующей его точке и дождаться отклика сервера, прежде чем он получит возможность хотя бы узнать, соответствует данная точка какой-нибудь гиперссылке, или нет.

Альтернативу описанному выше механизму обработки "щелчков на карте" сервером составляет предложенный в версии HTML 3.0 механизм обработки клиентом, то есть, самой программой просмотра. Карты такого рода определяются при помощи атрибута USEMAP. Описание областей изображения, ассоциированных с различными гиперссылками, помещается в HTML-файл, как показано в нижеследующем примере. Представим себе несложную радиосхему, состоящую из трех диодов и двух резисторов. Картинку с радиосхемой мы поместили в файл mapex.gif, а описание функций каждого из элементов схемы - в файлы diode1.html, diode2.html, diode3.html, res1.html и res2.html (содержание этих файлов здесь не приводится). Мы хотим, чтобы читатель, щелкая на изображении того или иного элемента, загружал соответствующий документ с описанием данного элемента

3 Ход выполнения работы

Задание: вар №2;

предметная область: социологический опрос;

схема фрейма:

элементы управления: кнопка (submit), текстовое окно (textarea)

3.1Создание загрузочного файла

Сначала был создан загрузочный файл, который является главной страничкой сервера и имеет имя index.html. В этом файле заданы размеры, количество и атрибуты фреймов.

<HTML>

<TITLE>Социологическийопрос</TITLE> <FRAMESET rows="30%,*" >

</FRAMESET>

3.2 Создание файлов для каждого фрейма

Затем уже будем создавать файлы для каждого из фреймов. Исходя и варианта задания, у нас их четыре. (1.html, 2.html,3.html,4.html) и два вспомогательных файла (2.html, 4.html) на которые ссылаются соответственно файлы 2.html и 4.html.

Приведем их содержание ниже:

Файл 1.html. В нём записан текст формы

<html>

<head>

<title>Социологический опрос</title>

</head>

<TR>

<TD align="center" colspan="3"> <h2>Заполните, пожалуйста, анкету:</h2></TD>