Министерствообразования и науки Украины
Севастопольскийнациональный технический университет
Кафедратехнической кибернетики
ОТЧЕТ
по контрольнойработесоздания интерактивныхWEB — страниц для получения информации в сети Интернет с использованием форм,заполняемых пользователем.
Выполнил: студент гр. А-41з
Брусинов С. Э.
Проверил: Альчаков В.В.
Севастополь — 2007
1 Цель работы Изучитьвозможности создания интерактивных WEB- страниц для получения информации в сети Интернет с использованием форм,заполняемых пользователем.
2Основные положения
2.1 Кратко о WWW и о гипертекстеINTERNETопределяется как глобальная информационная сеть, имеющая доступ практически ковсей совокупности всемирных компьютерных сетей. В INTERNET находят применениеразличные службы (сервисы), такие как электронная почта, телеконференции,системы поиска и доставки файлов, Всемирная паутина — />Word WideWeb, в основе которой лежит идея формирования документа в форме гипертекстовойструктуры.Всемирнаяпаутина — WWW — это средство поддержки системы гипертекста на INTERNET./>Гипертекстпредставляет собой форму организации документа, текст которого может содержатьссылки к отдельным словам, фразам, рисункам и другим элементам текста, чтопозволяет получить дополнительную информацию об этих элементах текста. Спомощью ссылок отдельные страницы текста связываются между собой, образуягипертекстовый документ. Таким образом, гипертекстовый документ состоит изнабора текстовых фрагментов, графики, выделенных элементов документа и системысвязи выделенных элементов с другими документами.
2.2Тег, контейнер, атрибут
В основегипертекстового языка лежит понятие />/>тег (tag — метка, ярлык, этикетка, бирка) определяющим инструкцию по форматированиюследующего за тегом текстового (или иного) фрагмента документа.
Каждый тег начинаетсясо знака «меньше ()». Между этимидвумя символами находится ключевое слово, указывающее основную функцию тега.Например, ключевое слово IMG в теге означает, что тег вставляетизображение в документ. Разнообразие ключевых слов позволяет создавать огромныеколичества эффектов форматирования.
Многие теги HTML,особенно те, которые обеспечивают специальное форматирование, являются парными.Первый тег в паре активизирует эффект, а второй тег – завершает его действие.Например, тег включает курсив. В конце текста, выделяемого курсивом,ставится тег . Косая черта ( / ) перед ключевым словом означаетпрерывание эффекта, управляемого этим словом. Первый тег в паре называетсяоткрывающим, второй – закрывающим. Парные теги называются />контейнерными,потому что они образуют как бы контейнер для форматируемого текста. Например, вHTML-коде, HTML – теги очень важны , теги и являются контейнерными для текста “очень важны”.
Другие HTML-теги стоятсами по себе и называются одиночными. Они, как правило, являются«одномоментными» инструкциями форматирования, например, вставкой изображения,горизонтальной линии, перевода строки и т.д.
Помимо ключевого слова,имеющегося у каждого тега, некоторые теги содержат />атрибуты,модифицирующие его действие. Подбирая значение атрибутов, можноэкспериментировать в поисках оптимальной схемы размещения элементов настранице. Например, тег , который изображает горизонтальную линию,имеет несколько атрибутов, влияющих на внешний вид линии. Так, используя атрибутWIDTH, можно заставить линию дойти до середины строки (width = 50%), аатрибутом SIZE изменять толщину линии (size = 4, значение по умолчанию =1).
2.3Структура любого HTML- документа
Теги и открывают и соответственно закрывают HTML документ. Теги и отделяют заголовок, где, как правило, записываетсяслужебная информация не читаемая в окне программы просмотра, например, в нашемслучае в заголовке документа командами и в верхнемлевом углу браузера выводятся слова «пример». Тело всего документавыделяется тегами и . Между этими тегами, какправило, записывается все то, что будет отображаться при открытии документа.Слово «привет!» отображается при просмотре большими буквами потому,что заключено между тегами и эти теги применяются дляоформления заголовков в тексте выводимом на экран браузером. В эти тегах Выможете применять числа от 1 до 6. Основной текст нашего документа «примерHTML — документа» выделен тегами и это теги абзаца.Обычно между этими тегами в программе пишут текст, который затем будетвыводиться на экран.
2.4Виды списков, которые возможно реализовать в HTML- документе
HTML поддерживает триразличных типов списков, каждый из которых позволяет красиво организоватьбольшое количество информационных элементов. Для задания списка необходима паратегов на весь список и по паре на каждый элемент списка Если речь идет обупорядоченных списках, то имеются в виду теги и , еслиже речь идет о неупорядоченных списках (маркированных), то подразумеваются теги & .
Браузер автоматическинумерует элементы упорядоченного списка, начиная с 1.
Третий тип списков –списки описаний (глоссарии) позволяют перечислять термины, за которыми следуютих определения. Термины заключаются в теги & , аописания (определения) в теги & .
Для определения каждогоэлемента списка используется открывающийся и закрывающийся теги & .
Например:
Numered list items
List items are idented
Тег имеетдва атрибута: Type и Start. Атрибут TYPE устанавливатеся равным 1, А, а, i илиI, в зависимости от типа нумерации списка – цифрами, большими или малымибуквами, большими или малыми римскими цифрами.
Атрибут STARTиспользуется, если нумерация должна начинаться не с единицы.
Например:
— значит, нумерация списка будет начинаться с буквы С.
Тег поддерживает атрибут Type, позволяющий вместо маркировочного символа «кружок»(О), (Type = “dise”), устанавливаемого по умолчанию, задавать маркированныйсимвол «квадрат» (Type = “square”) или «окружность» (Type = “circle”).
Рациональноеиспользование тегов & позволяет создавать вложенныедруг в друга маркированные и нумерованные списки, а также использованиеатрибута TYPE тега позволяет создавать вложенные нумерованные спискис разным типом нумерации (буквы и цифры).
2.5Использование именованных якорей гиперссылок
Когда пользовательвыбирает гиперссылку, браузер загружает документ, на который указываетгипертекст и выводит на экран его начало. В том случае, если документ оченьбольшой пользователю приходится долго его прокручивать, чтобы перейти к нужномуместу. Чтобы избежать этого, HTML предоставляет возможность установить />именованные якоря (закладки в документе), а гиперссылки будутнепосредственно указывать на эти якоря (т.е. будет осуществляться переход позакладке внутри документа).
/>Длясоздания точек привязки (установления закладок) в пределах одного документаиспользуется следующий синтаксис:
[тело ссылки],
где«уникальное_имя_закладки» — это уникальное имя точки привязки, а «тело_ссылки»- это литерал, отображаемый на экране.
Ниже приведен примерпрограммы, поясняющей механизм расстановки закладок внутри документа.
Anchors
Topic.1
Topic 1 stuff
Topic.2
Topic 2 stuff
Topic.3
Topic 3 stuff
В качестве места, длякоторого создается закладка, могут выступать заголовки разделов внутри большогопо размерам документа. Переход по этим закладкам обеспечивает быстрое перемещениепо документу к нужному разделу.
Теги, использующиесядля связывания с точками привязки в пределах одного HTML- документа, идентичнытегам создания гиперссылок на внешние документы. Для создания гиперссылки нановый фрагмент используется соединяющий синтаксис:
имя_якоря
, где [URL] –необязательный адрес, «имя_закладки» — название точки привязки в пределахтекущего документа, «имя_якоря» — это текст или какое-либо другое содержимое,щелчек по которому будет активизировать гиперссылки.
Именованные якоряполезны при создании оглавления, ссылки которого указывают на различные частидокумента. Наиболее распространенный метод связывания с точкой внутреннейпривязки предусматривает использование символа «#» и названия точки привязкибез указания URL. В этом случае переход по необходимому адресу осуществляетсябез повторной загрузки документа.
Пример определенияточек привязки и установления гипертекстовых ссылок на эти точки приведен ниже:
Anchors
Read About Topic_1
Read About Topic_2
Read About Topic_3
Topic 1
Topic 1 stuff
Topic 2
Topic 2 stuff
Topic 3
Topic 3 stuff
2.6Графические объекты для гиперссылок в HTML- документе
Чтобы разместитьизображение на странице необходимо воспользоваться тегом . Приработе с этим тегом вставки изображения используется следующий синтаксис:
.
Значение атрибута SRCзадает «имя_файла» с изображением.
Тег включает несколько полезных атрибутов, характеристика которых дана ниже:
Атрибут ALT. С помощьюэтого атрибута указывается строка текста, используемая браузером вместоизображения, которое по каким-либо причинам невозможно загрузить.
Атрибут ALIGN.Определяет выравнивание текста относительно изображения. Если этот атрибутпринимает одно из значений TOP, MIDDLE или BOTTOM, то текст, следующий заизображением, выравнивается по верхнему краю, по центру или по нижнему краюизображения. Если атрибут ALIGN установить в значение LEFT или RIGHT, тоизображение будет плавать у левого или правого поля соответственно, а текстбудет его обтекать.
Атрибут HEIGHT и WIGTHпозволяют определять размер изображения в пикселах. В качестве примера,поясняющего действие атрибутов HEIGTH & WIGTH на изображение, может бытьприведен следущий синтаксис тега :
.
В том случае, когдаграфическое изображение используется как альтернатива гипертексту, синтаксисустановки графического якоря такой же, как при установке текстового. Междутегами и вместо текста должен быть помещентег , в соответсвии со следующим снтаксисом:
.
Примечание. В томслучае, если графический объект интерпретируется как якорь гиперссылки, тогдавызываемый HTML- документ, само изображение, а также вызывающий документ должнынаходиться в одной папке (на локальном компьютере). В этом случае синтаксисгиперссылки имеет следующий вид:
2.7Фреймы их использование
Фреймы позволяютразделить Web-страницы на независимые области произвольного или фиксированногоразмера. Выполняя определенные действия в одних фреймах, можно изменятьсодержимое других фреймов – это позволяет рассматривать фреймы в качествеинструмента навигации. Перечень гиперссылок на документы на узле помещается водном фрейме, а другой фрейм выделяется собственно под содержимое.
Первый шаг в созданиифреймовой схемы расположения состоит в разбивке окна на нужные области. Этоосуществляется путем реализации отдельного HTML – документа, который целикомиспользуется для определения фрейма. В этом документе вместо тегов & используются теги и ,предназначенные для определения фреймов. Атрибуты тега определяют, как экран разбивается на части.
Тег может иметь один их двух атрибутов:
ROWS – для разбивкиэкрана на две и более строки;
COLS – для разбивкиэкрана на столбцы.
Каждому атрибуту присваиваетсясписок значений сообщающий браузеру размер строк и столбцов (в % от общейширины окна, в пикселях или символом (*), который означает, что браузер должениспользовать все оставшееся место). В качестве примера может быть приведенследующий синтаксис:
… .
или
… .
Первый примеропределяет ширину фреймов в процентах, второй – в пикселях.
Атрибут тега позволяет устанавливать обрамление уфреймов. Он может принимать одно из двух значений:
1 — соответствуетналичию обрамления
0 — отсутствиюобрамления.
В случае, еслинеобходимо конструировать достаточно сложную схему разбиения экрана на фреймыосуществляют вложение тегов & друг вдруга.
Например, схемеорганизации фреймов, когда экран разбивается сначала на два фрейма повертикали, а затем первый фрейм разбивается на два по горизонтали (см. Рис.1а),соответствует следующий HTML –код тега FRAMESET:
… данные,размещаемые в верхней части первого столбца… .
… данные,размещаемые в нижней части первого столбца… .
… данные,размещаемые во втором столбце… .
/> /> /> /> /> /> /> />
а) б)
Рис. 1 Схемы разбиенияфреймов.
Схеме разбивки окна нафреймы, изображенной на рис.1б, соответствует следующий фрагмент HTML–программы:
… данные,размещаемые в верхней части… .
… данные,размещаемые в первом столбце нижней части… .
… данные,размещаемые во втором столбце нижней части… .
Используя вложенныетеги , можно добиваться построения схемы с фреймами любойстепени сложности.
Размещение содержимогов фреймах управляет тег . Этот тег имеет обязательный атрибут SRC,который сообщает браузеру URL –документа, загружаемого в фрейм. Среди шестиатрибутов (кроме SRC) тега необходимо выделить два наиболее важных:
Атрибут NAME, с помощьюкоторого осуществляется присвоение фрейму имени. Уникальные имена фреймов важныпри нацеливании гиперссылок (атрибут TARGET тега ) на конкретныефреймы.
Атрибут SCROLLING =YES/NO/AUTO, который управляет появлением горизонтальной и вертикальной полоспрокрутки (в случае, если он равен YES). Если атрибут SCROLLING = AUTO (этозначение устанавливается по умолчанию), то браузер сам выводит линейкипрокрутки, если они необходимы.
Нацеливание гиперссылокна фреймы позволяет постоянно иметь в одном фрейме их неменяющийся список, авызываемые документы загружать в другие фреймы. Первоначально, во фреймы,предназначенные для вывода содержимого документов, вызываемых по гиперссылкам,можно загружать любые HTML –документы (не несущие никакой принципиальнойинформации), а затем содержимое документов, вызываемых по гиперссылкам.
Простейший примерформирования фреймовой схемы и определения ее содержимого (однако являющийсязаконченным HTML -документом) имеет следующий синтаксис:
ФРЕЙМЫ
2.8Размещение и реализация изображения в виде карты
Как мы уже знаем, вHTML-документ можно включать изображения, которые считываются программойпросмотра из файлов в одном из графических форматов. Ранее (раздел 2.5) былосказано, что всё изображение целиком можно сделать якорем гиперссылки. Однако,подчас возникает вполне естественное желание сделать различные части одногоизображения гиперссылками на различные документы. Представим себе, например,документ с изображением электронной схемы прибора, более подробные сведения обэлементах которого пользователь может немедленно получать, щелкая мышью насоответствующих участках чертежа. HTML предлагает для этого следующий способ:добавив к флагу специальный атрибут 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. В этом файле заданы размеры, количество и атрибуты фреймов.
Социологический опрос
3.2Создание файлов для каждого фрейма
Затем уже будемсоздавать файлы для каждого из фреймов. Исходя и варианта задания, у нас ихчетыре. (1.html, 2.html,3.html,4.html) и два вспомогательных файла (2.html,4.html) на которые ссылаются соответственно файлы 2.html и 4.html.
Приведем их содержаниениже:
Файл 1.html. В нёмзаписан текст формы
Социологическийопрос
Заполните, пожалуйста, анкету:
Фамилия:
Имя:
Отчество:
Пол:
Мужской
Женский
Возраст:
Менее 20
20-30
30-50
Более 50
Страна:
Город:
Дом:
Место работы:
Ваше социальное положение(должность):
Ваша заработная плата:
Менее 200
200-500
500-1500
Более 1500
Ваши увлечения:
Спорт
Туризм
Искуство
Музыка
Техника
Ваши комментарии:
Запишите, устраивает ли васваше социальное положение, если нет, то почему?
Файл2.html:
«Чемобусловлена необходимость в опросе»
Файл2.1.html.
Каждый из нас в той или иной степени
соприкасается …………(текст пропущен)…стране и в
других странах).
Файл3.html:
Помогите провести социологический опрос. Просто заполните анкету, приведенную ниже.Опрос поможет датьоценку социальной обстановке в стране. Предоставленные Вами данные абсолютно конфиденциальныи разглашению не подлежат. Благодарим за сотрудничество.
Файл 4.html:
Содержание
«Каким образом происходит опрос»
Файл 4.1.html:
Как происходит опрос
Всё очень……(текст пропущен)……… картотеку.
4Выводы
Входе выполнения контрольной работы былиизучены возможности интерактивных WEB страниц, была разработана активная формадля передачи данных в сеть Internet в соответствии с вариантом задания.