Министерство образования и науки Украины

Севастопольский национальный технический университет

Кафедра технической кибернетики

ОТЧЕТ

по контрольной работе

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

Выполнил: студент гр. А-41з

Брусинов С. Э.

Проверил: Альчаков В.В.

Севастополь - 2007

1 Цель работы

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

2 Основные положения

2.1 Кратко о WWW и о гипертексте

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

Всемирная паутина - 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

< /BODY>

< /HTML >

В качестве места, для которого создается закладка, могут выступать заголовки разделов внутри большого по размерам документа. Переход по этим закладкам обеспечивает быстрое перемещение по документу к нужному разделу.

Теги, использующиеся для связывания с точками привязки в пределах одного 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

< /BODY>

< /HTML >

2.6 Графические объекты для гиперссылок в HTML- документе

Чтобы разместить изображение на странице необходимо воспользоваться тегом . При работе с этим тегом вставки изображения используется следующий синтаксис:

.

Значение атрибута SRC задает «имя_файла» с изображением.

Тег включает несколько полезных атрибутов, характеристика которых дана ниже:

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

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

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

.

В том случае, когда графическое изображение используется как альтернатива гипертексту, синтаксис установки графического якоря такой же, как при установке текстового. Между тегами и вместо текста должен быть помещен тег , в соответсвии со следующим снтаксисом:

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

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

< A HREF = “bs.htm” > < IMG SRC = “km.jpg”> < /A >

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

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

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

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

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

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

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

. . .

или

. . .

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

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

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

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

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

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

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

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

< /FRAMESET>

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

< /FRAMESET>

а) б)

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

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