Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Ответы по Программированию в интернете.docx
Скачиваний:
3
Добавлен:
22.09.2019
Размер:
544.18 Кб
Скачать

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ № 1

  1. Технологические основы устройства Интернета.

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

Сети в пределах одного здания называются локальными (LAN – Local Area Net – локальная сеть) и работают, как правило, под управлением специально выделенного компьютера – сервера. Глобальные или территориальные сети (WAN – Wide Area Net – территориальная сеть) объединяют компьютеры, находящиеся на значительном расстоянии друг от друга. В них применяется специализированное сетевое оборудование (маршрутизаторы, роутеры, мосты), используются как собственные линии связи, так и средства других телекоммуникационных систем – городской телефонной сети, кабельного телевидения.

Современные сетевые технологии очень разнообразны. Существует большое число различных типов локальных и глобальных сетей. Они могут строиться на разных физических и логических принципах, использовать бесчисленное множество программных продуктов, протоколов, средств маршрутизации, форматов данных, по-своему решать вопросы диагностики, устойчивости, безопасности. До появления Интернета проблема совместимости сетей разных типов стояла очень остро.

С технической точки зрения, Интернет – это гигантская совокупность сетей меньшего масштаба, объединенных общими правилами коммуникации. Эти правила, называемые интернет-протоколами (TCP/IP), позволяют общаться компьютерам, входящим в сети любых типов, использующих любые операционные системы и программы. С помощью протоколов решается также проблема устойчивости и надежности Сети, когда выход из строя или отключение ее части не влияет на работоспособность системы в целом.

В Интернете нет центра управления, нет жестких ограничений, он не принадлежит никакой организации или государству. Любое устройство, работающее по интернет-протоколам, может подключаться к Сети и использовать все ее ресурсы. Разумеется, использование этих ресурсов находится под юрисдикцией той страны, на территории которой действует пользователь.

Интернет соединяет в единую систему миллионы компьютеров. Одни компьютеры выполняют служебные функции, обеспечивая бесперебойное функционирование сети, другие хранят на своих жестких дисках тысячи гигабайт информации, третьи подключаются к сети лишь на время. В любом случае компьютер получает уникальный 32-разрядный адрес, состоящий из 4-х чисел от 0 до 255, разделенных точками (например, 123.34.0.1 или 200.190.34.120) Он называется IP-адресом, то есть адресом интернет-протокола, по которому определяется положение компьютера в сложной иерархии сетей, составляющих Интернет. IP-адрес может быть статическим (постоянным) или динамическим, выделяемым компьютеру только на время его подключения к Сети. Часто за IP-адресом скрывается локальная сеть, соединенная с Интернетом через специальный прокси-сервер.

Распределением IP-адресов занимаются специализированные организации. При регистрации сети в Интернете, ей выделяется определенный диапазон адресов, которые могут использоваться в этой сети. Например, провайдер коммутируемого доступа (то есть компания, которая предоставляет доступ в Интернет по телефону), имеет в своем распоряжении 200 IP-адресов. При подключении дозвонившегося и указавшего верный логин и пароль абонента, ему присваивают свободный IP-адрес, который после отключения может быть передан другому абоненту.

Всего может быть образовано 4,5 млрд. различных адресов, однако уже сейчас обнаруживается их нехватка. А ведь в недалеком «цифровом» будущем планируется подключать к Интернету не только компьютеры, но и бытовые устройства. Поэтому интернет-протоколы следующего поколения будут использовать 128-разрядную адресацию. Адреса используются сетевыми устройствами-маршрутизаторами, для передачи сообщений в нужном направлении. Но обычный пользователь ищет не какой-то конкретный компьютер, а определенную информацию. Эта информация хранится на жестких дисках компьютеров, которые постоянно подключены к Сети.

Данные различных типов записываются в виде файлов, имеющих имя и трехсимвольное расширение. Оно определяет, как файл будет обрабатываться компьютером. Файл dog.jpg – фотография, которую можно посмотреть на экране монитора или распечатать на принтере. Файл luna.mp3 – музыкальный, его можно прослушать через наушники или колонки. Referat.doc – документ программы WORD, а mike.mp3 – страница гипертекста.

Именно страницы гипертекста отображаются на экране монитора при путешествии по Интернету. Они содержат фотографии, тексты, картинки, а главное – ссылки на другие страницы. Программа, обрабатывающая файлы гипертекста, называется браузером (browser – обозреватель). Браузер определяет форму отображения страницы, расставляет в нужные места картинки, обеспечивает правильный переход по ссылкам и выполняет множество других полезных функций. Наиболее известные браузеры это самый распространенный Internet Explorer фирмы Miсrosoft, популярный в 1990-ые Netscape Communicator, Opera.

Совокупность файлов образует сайт. Сайт принадлежит какому-либо лицу или организации и имеет уникальный адрес. Он ведет на главную страницу сайта, с которой открывается доступ к другим страницам. Небольшие сайты так и называются – домашние странички. Они обычно содержат фотографии, небольшие тексты, несложные элементы оформления.

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

Для удобства составления и запоминания адресов сайтов совместно с IP-адресацией действует Система Доменных Имен (DNS – Domain Name System, domain – зона, владение), которая отражает логическую структуру Интернета. Все его информационное пространство разделено на зоны первого уровня по принадлежности к стране (.RU –Россия,.UC – Украина) или по профилю ресурса (.com – коммерческие организации,.edu – образовательные учреждения). Когда-то зон первого уровня было только 6, а сейчас их около 300). Следует сказать, что доменный адрес не связан напрямую с физическим расположением ресурса. Сайт a.ru может размещаться на компьютере, находящемся, например, во Франции. Домены первого уровня делятся на бесчисленное количество доменов второго, многие домены второго уровня, например, narod.ru, содержат большое число доменов третьего и т.д.

Регистрацией доменов первого уровня занимается международная организация ICAAN (Internet Corporation for Assigned Names), второго – соответствующие национальные организации. В России это RU-Center (Региональный сетевой информационный центр, РСИЦ).

Адрес любого информационного ресурса записывается в виде нескольких слов, разделенных точками, например, krugosvet.ru или school_385.narod.ru. Эти слова, которым обычно придают смысловую окраску, и определяют адрес, как последовательность доменов разного уровня. Самый правый – первый уровень, затем второй и т.д. Обычно адрес состоит из двух-трех доменных имен.

Зонами первого уровня распоряжаются специальные организации. Они ведают регистрацией новых имен второго уровня, а, главное, тем, чтобы по доменному адресу можно было отыскать требуемый сайт. Для этого в Интернете существуют специальные серверы DNS, которые сопоставляют доменное имя сайта и IP-адрес того компьютера, на котором этот сайт размещается. Базы данных DNS постоянно обновляются и корректируются.

Для правильной передачи информации по сети слева от доменного имени указывается название протокола, в соответствии с которым организована эта информация:

http:// – протокол передачи гипертектовых страниц,

ftp:// – протокол пересылки файлов,

wap:// – протокол для передачи информации на мобильные телефоны (WAP – Wireless Application Protocol – протокол беспроводной связи).

Доменное имя вместе с названием протокола образует полный адрес ресурса URL (Unified Resourse Locator – универсальный указатель ресурсов). Справа от URL можно указать путь к конкретному файлу в структуре сайта. Обычно для адресов сайтов название протокола опускается, а перед доменным именем ставится WWW, например, www.krugosvet.ru.

Объем информации, доступной через Интернет, огромен и растет с каждым днем. Отыскать необходимые сведения подчас необычайно трудно. Для помощи в решении этой задачи существуют интернет-каталоги и поисковые системы (поисковые машины, поисковики).

Каталоги ресурсов или классификаторы содержат адреса и иногда аннотации к сайтам, сгруппированым в категории по тематике. Каждая категория может содержать несколько подкатегорий. Сайты в категориях бывают отсортированы по степени популярности, определяемой с помощью счетчиков посещений. Переходя по названиям рубрик, можно добраться до интересующей информации. Например: Развлечения – Активный отдых – Туризм – Снаряжение – Магазины и так далее.

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

Умение хорошо ориентироваться в океане информации Интернета – настоящее искусство. На сайтах поисковых систем даже проводятся конкурсы по эффективному поиску в Сети.

  1. Вопросы безопасности, сопряженные с CGI – программированием.

Большое количество приложений основано на использовании внешних программ, управляемых Web-сервером. Такие приложения генерируют информацию динамически, выбрав её из баз данных или других источников. Для связи между Web-сервером и вызываемыми программами используется стандарт CGI (Common Gateway Interface – общий интерфейс шлюза).

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

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

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

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

Вот некоторые из них.

  • QUERY_STIRNG. Скрипты используют эту переменную для того, чтобы получить информацию в текстовой форме, которая следует справа от знака вопроса после URL,переданного в запросе от пользователя скрипту для обработки. Например, при запросе вида GET avalon.ru/index/html?a=1&b=3 HTTP/1.1 значение переменной QUERY_STIRNG = “a=1&b=3”.

  • REQUEST_METHOD используется для того, чтобы определить тип HTTP-запроса, который послан браузером серверу. Например, если браузер посылает запрос методом GET, то переменная окружения имеет следующее значение: REQUEST_METHOD = GET.

  • Переменная SCRIPT_NAME используется для того, чтобы определить путь к скрипту, который будет запузен сервером. Например, если имеется URL http://www.avalon.ru/our_site/somescript.php, то переменная окружения примет следующее занчение: SCRIPT_NAME = our_site/somescript.php.

  • Переменная HTTP_ACCEPT служит для того, чтобы определить, какие MIME-типы может принимать браузер. Они указаны в HTTP-заголовках, которые браузер послал серверу. Например, переменная окружения может принимать следующее значение: HTTP_ACCEPT = audio/mpeg, text/html, text/plain.

  • Переменная HTTP_USER_AGENT используется для того, чтобы идентифицировать тип браузера, который делает запрос серверу. Значение переменной получается из заголовков запроса клиента. Например: HTTP_USER_AGENT = Mozilla/2.01 Gold(Win95PE).

Данные из HTNL-формы передаются в сценарий в виде набора переменных. CGI-сценарий использует эти данные при выполнении программы.

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ № 2

1. Назначение и возможности CSS.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими Шрифт Брайля.

CSS при отображении страницы может быть взята из различных источников:

* Авторские стили (информация стилей, предоставляемая автором страницы) в виде:

o Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.

o Встроенных стилей — блоков CSS внутри самого HTML-документа.

o Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.

* Пользовательские стили

o Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.

* Стиль браузера

o Стандартный стиль, используемый браузером по умолчанию для представления элементов.

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так:

селектор

{

свойство: значение;

свойство: значение;

свойство: значение;

}

Например:

p {font-family: "Garamond", serif;}

h2

{

font-size: 110 %;

color: red;

background: white;

}

.note

{

color: red;

background: yellow;

font-weight: bold;

}

p#paragraph1 {margin: 0;}

a:hover {text-decoration: none;}

#news p {color: blue;}

Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.

В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:

<p class="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

CSS-вёрстка

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Преимущества CSS вёрстки:

* Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.

* Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и кэшируется.

* Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.

* Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

2. Организация взаимодействия CGI – скриптов и СУБД архитектуры клиент/сервер на примере Perl и MySQL.

Для работы с базами данных в Perl используется стандартный интерфейс

программирования DBI, обеспечивающий доступ к большинству существующих СУБД

с помощью подключаемых драйверов. Схемы подключения к различным СУБД

(точнее, правила формирования имени источника данных) могут незначительно

различаться, мы рассмотрим работу с использованием mySQL.

В первую очередь необходимо подключить модуль DBI:

use DBI;

Далее подключаемся к базе данных:

my $dbh = DBI->connect('DBI:mysql:hostname:base:port', 'user,

'password, { RaiseError => 1, AutoCommit => 1});

Здесь $dbh -- дескриптор базы данных, используемый в дальнейшей работе,

DBI:mysql:hostname:base:port -- имя источника данных, включающее имя

драйвера, имя хоста, базы, к которой мы подключаемся, и номер порта, на

который настроен sql-сервер, user/password -- имя и пароль пользователя,

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

По завершении работы желательно закрыть дескриптор:

$dbh->disconnect();

Возможно использование двух способов работы с базой. В случае, если нам

нужно только передать информацию в базу, используется метод do, параметром

которого является строка SQL-запроса:

$dbh->do("insert into mytable values (1,1)");

Если же необходимо получить информацию из базы, используется следующая

процедура:

1. Получаем дескриптор команды с помощью метода prepare:

my $sth = $dbh->prepare ("select * from mytable where field1>1");

2. Выполняем команду:

$sth->execute();

3. Получаем данные. Используется один из четырех методов:

fetchrow_array

fetchrow_hash

fetchrow_arrayref

fetchrow_hashref

Методы возвращают соответственно массив, хэш, ссылку на массив, ссылку

на хэш, в которых хранятся значения полей текущей записи. Для выборки всех

записей используется цикл, после выборки всех записей функции возвращают

пустой список, воспринимаемый как значение false:

while(my $hash_ref = $sth->fetchrow_hashref)

{

foreach my $fieldname(keys %$hash_ref)

{

print "$fieldname: $hash_ref->{$fieldname }\n";

}

print "\n";

}

4. Освобождаем ресурсы:

$sth->finish();

При передаче текстовой информации в базу рекомендуется предварительно

обработать ее методом $dbh->quote(), расставляющим кавычки и управляющие

символы в строке в соответствии с правилами используемой СУБД.

Кроме того, возможно использование привязки параметров в виде:

$sth = $dbh->prepare("select * from mytable where field1=?");

$sth->bind_param(1, "значение параметра");

$sth->execute();

либо

$sth = $dbh->prepare("select * from mytable where field1=?");

$sth->execute("значение параметра");

В этом случае в методе quote необходимости нет, он вызывается

автоматически.

Использование привязки параметров особенно эффективно при выполнении

нескольких однотипных запросов подряд. В этом случае достаточно один раз

подготовить запрос с помощью функции prepare, и выполнять его с помощью

функции execute столько раз, сколько необходимо.

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ № 3

1. Структура XHTML - документа.

Любой XHTML-файл состоит из трех разделов — элемента <!DOCTYPE>, заголовка (<HEAD>) и тела документа (<BODY>). Последние два элемента перекочевали из HTML и ничем не отличаются от своего родоначальника (пример 2.1).

Пример 2.1. Простейший XHTML-документ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->

</head>

<body>

<!-- А здесь надо размещать все, что хочется увидеть на странице. -->

</body>

</html>

Элемент <!DOCTYPE> сообщает браузеру о типе текущего документа и как его интерпретировать. Различают несколько версий и типов XHTML-документов, они приведены в табл. 2.1.

Табл. 2.1. Версии XHTML и допустимые типы документа

Версия XHTML

Тип документа

Описание

XHTML 1.0

Strict

«Строгое» описание документа, включающее все правила.

XHTML 1.0

Transitional

«Переходный» тип, более лояльно относящийся к коду документа.

XHTML 1.0

Frameset

Устанавливается при использовании на странице фреймов.

XHTML 1.1

XHTML 1.1

Эта версия основана на XHTML 1.0 Strict, но понимается браузерами как XML-приложение. В первую очередь предназначено для работы с различными медиа-данными.

Xhtml 1.0 Strict

Используется в том случае, если в документе идет четкое разделение оформления и содержания. При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили (пример 2.2).

Пример 2.2. Документ со строгой разметкой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> ... </head>

<body> ... </body>

</html>

Xhtml 1.0 Transitional

Обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере. В этом случае допускается в коде документа использовать теги физического проектирования (например, тег <TT>) и лишь частично стили. В примере 2.3 показан вид тега <!DOCTYPE> для подобных документов.

Пример 2.3. «Переходный» документ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> ... </head>

<body> ... </body>

</html>

Xhtml 1.0 Frameset

Применяется, когда окно браузера делится на два или более фрейма (пример 2.4).

Пример 2.4. Документ с фреймами

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> ... </head>

<frameset> ... </frameset>

</html>

Элемент <!DOCTYPE> хотя и обязателен, но не является непосредственной частью XHTML-документа, поэтому для него закрывающего тега не требуется.

Xhtml 1.1

Является старшей версией «строгого» XHTML (пример 2.5).

Пример 2.5. XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> ... </head>

<body> ... </body>

</html>

Шаблон документа XHTML Strict

Тег <HTML> является корневым для остальных элементов веб-страницы и располагается сразу после определения типа документа <!DOCTYPE>. Поскольку тип документа может быть любым, а не только тем, что приведен в табл. 2.1, то необходимо дать понять браузеру, что он имеет дело со спецификой XHTML. Для чего в тег <HTML> добавляется параметр xmlns.

Также в контейнере <HEAD> требуется наличие заголовка <TITLE>. Таким образом, минимальный XHTML-документ с метатегом, устанавливающим кодировку веб-страницы, показан в примере 2.6.

Пример 2.6. Шаблон XHTML-документа

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Новый документ</title>

</head>

<body>

</body>

</html>

В данном примере используется тип XHTML 1.0 Strict и кодировка Windows-1251.

2. Интеграция web-приложений с базами данных.

В настоящее время проблема распределенных вычислений решается либо в рамках Web технологий, либо DCOM/CORBA моделей. Сравнение этих решений по стоимости дает предпочтение Web технологиям.

Модель распределенных вычислений в рамках Web технологий, в случае реализации доступа к базе данных на стороне сервера, можно изобразить так [1]

Из рисунка видно, что в состав любого приложения Web баз данных входит компонент, который реализуют CGI скриптом. Однако это не единственный компонент таких приложений. Кроме него в состав приложения входит компонент отображения результатов обработки базы данных. Его часто реализуют на языке HTML.

Таким образом, приложения Web баз данных (WebDBApp) - это сплав компонент, который в общем случае можно графически представить так [2]

Как видно WebDBApp можно создавать на основании различных комбинаций компонент. Мы ограничимся рассмотрением комбинации

WebDBApp = HTML + PhP3 + SQL

Разрабатывать WebDBApp можно различными способами. Выбранный здесь способ основан на компоновке базовых примитивов и их модификаций.

Используемый подход к разработке приложений не нов. Он основан на идее повторного использования кода. Эта идея, например, в эволюции процедурных языков привела к появлению объектно-ориентированного программирования.

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

создание таблиц баз данных;

удаление таблиц из базы данных.

Во вторую группу входят:

добавление данных;

просмотр данных;

изменение значений данных;

удаление записей таблиц.

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

Соединение с базой данных

Для баз данных Postgres95 это делают с помощью функции

int pg_Connect(string host, string port, string options, string tty, string dbname);

Эта функция возвращает идентификатор соединения. Он равен 1, если соединение прошло успешно. В противном случае его значение равно 0.

Сохраните ниже приведенный скрипт в файле connect.php3 и поместите его в папку WebDBApp.

<?

$cnct = pg_Connect( "host=localhost port=5432 dbname=chek user=chek" );

if( !$cnct )

{

// соединения нет

echo "Connect to database failed! Please, consult the system administrator. \n";

exit;

}

else

{

// соединение прошло успешно

echo "Do Something \n";

}

?>

Запустите скрипт на исполнение, для чего воспользуйтесь, например, Netscape Navigator. Введите в его адресной строке путь к папке WebDBApp, например, так http://ssu.sumy.ua/teach/WebDBApp/connect.php3

Если соединение с базой данных произойдет успешно, то вы увидите следующее сообщение

Как мы уже отмечали приложения Web баз данных - это сплав PhP и HTML кодов. Как же сервер их различает. Для указания начала PhP кода используют такую комбинацию символов <?, а его завершение помечают так ?>. Цвет символов серверу безразличен. Этот цвет выбран для того, чтобы в дальнейшем было зрительно легко отличать PhP код от остального текста.

Комментарии выделены зеленым цветом.

Создайте в папке WebDBApp папку primitive и сохраните там примитив соединения с базой данных

<?

$cnct = pg_Connect( "host=localhost port=5432 dbname=chek user=chek" );

if( !$cnct )

{

// соединения нет

echo "Connect to database failed! Please, consult the system administrator. \n";

exit;

?>

как connect.inc файл.

Создание таблиц

А теперь нам осталось совсем чуть-чуть, чтобы создать таблицу test - воспользоваться SQL командой CREATE TABLE. Например, так

<?

//*** соединение с БД ***

require "primitive/connect.inc";

//*** создание таблицы ***

$result = pg_Exec( $cnct, "CREATE TABLE test (id int, name char(20))" );

if ( $result )

{

// таблица создана

echo "Table create \n";

}

?>

Используемая здесь функция

int pg_Exec(int connection, string query)

позволяет переадресовать SQL запрос Postgres95 для исполнения. Ключевое слово require позволяет включить текст примитива connect.inc, который был помещен в папку primitive.

Сохраните этот скрипт под именем create.php3 и запустите его на исполнение.

Добавление данных

Результатом исполнения скрипта create.php3 является файл test. Каждая запись этого файла состоит из двух типов данных: номера по списку id и соответствующих ему фамилии и инициалов - name.

Операция добавления данных позволяет создавать новые записи и заполнять их поля заданными значениями.

Примитив добавления данных

<?

// *** соединение с БД ***

require "primitive/connect.inc";

// *** добавление данных ***

$result = pg_Exec( $cnct, "INSERT INTO test values(1, 'Иванов')" );

if ( $result )

{

echo "Data insert \n";

}

?>

назовем insert.php3.

Поместите его на сервер и запустите на исполнение Netscape Navigator'ом.

Если данные будут добавлены, то вы увидите сообщение: "Data insert".

Просмотр данных

Предварительно задают объем просматриваемых данных.

Эту операцию называют "выборка". Ее реализуют SQL командой SELECT. Например, так

SELECT * FROM test

Затем данные, которые выбраны из таблицы, распечатывают построчно. Для этого используют функции, которые сохраняют строки таблиц, как массивы, например,

array pg_Fetch_Array(int result, int row);

Здесь row - номер строки. Их нумеруют, начиная с 0.

Итак, примитив просмотра данных

<?

// *** соединение с БД ***

require "primitive/connect.inc";

// *** просмотр данных ***

$result = pg_Exec( $cnct, "SELECT * FROM test" );

if ( $result )

{

$arr = pg_Fetch_Array ($result, 0);

echo $arr['name'];

}

?>

назовем view.php3.

Поместите его на сервер и запустите на исполнение.

Обратите внимание, что данный скрипт позволяет просмотреть значение поля name только одной записи.

Если в таблице несколько строк, и вы хотите просмотреть результат выбоки как таблицу, то используйте следующий скрипт

<?

//*** соединение с БД ***

require "primitive/connect.inc";

// *** просмотр данных ***

$result = pg_Exec( $cnct, "SELECT * FROM test" );

$RecCount = pg_NumRows( $result ); // число записей, которые следует отобразить на экране

?>

<HTML>

<BODY>

<TABLE BORDER="1" WIDTH="200">

<?

$i = 0;

do // отображаем записи построчно

{

$arr = pg_Fetch_Array ($result, $i);

?>

<TR>

<TD>Name: </TD><TD><? echo $arr['name']; ?> </TD>

</TR>

<? $i = $i + 1; // номер следующей записи, которую будем отбражать строкой таблицы

} while ($i < $RecCount);

?>

</TABLE>

<BR>

</BODY>

</HTML>

Назовем этот скрипт view_n.php3.

Результат его исполнения такой

Изменение значений данных

Можно произвести SQL командой UPDATE. Например, так

UPDATE test    SET name = 'Петров'    WHERE name = 'Иванов'

Такие запросы, как правило, образуют конкатенацией (символ ".=" ) и хранят в переменной. В ниже следующем скрипте это переменная $query.

<?

// *** соединение с БД ***

require "primitive/connect.inc";

// *** изменение значений данных ***

// формирование запроса

$query = "UPDATE test " ;

$query .= "SET name = 'Петров' " ;

$query .= "WHERE name = 'Иванов' " ;

// Исполнение запроса

$result = pg_Exec( $cnct, $query );

if ( $result )

{

echo "Data update \n";

}

?>

Сохраните скрипт под именем udate.php3. Запустите его и убедитесь, что фамилия "Иванов" была изменена на "Петров".

Удаление записей таблиц

Для удаления всех записей из таблицы используют команду SQL вида

DELETE FROM test;

Записи, где значения полей, которые удовлетворяют некоторым условиям, удаляют так:

DELETE FROM test WHERE name='Иванов';

Удаление таблиц из базы данных

Таблицу удаляют следующей SQL командой

DROP TABLE test;

Примитивы, которые мы разрабатываем должны быть универсальны. Другими словами, они должны позволять работать с изменяемыми значениями параметров SQL. В противном случае разрабатывать приложения компоновкой примитивов нельзя.

Рассмотрим в качестве примера реализацию примитива добавления данных с параметром.

В частном случае, когда номер по списку id = 1 и соответствующая ему фамилия - name = "Иванов", он может быть записан так

<?

// *** соединение с БД ***

require "primitive/connect.inc";

// *** добавление данных ***

$result = pg_Exec( $cnct, "INSERT INTO test values(1, 'Иванов')" );

if ( $result )

{

echo "Data insert \n";

}

?>

Параметры примитива можно изменять с помощью html форм.

Начало описания формы обозначают оператором <FORM>. Заканчивают форму оператором </FORM>. Например,

<FORM METHOD=Get ACTION="insert.php3">

</FORM>

Рассмотрим основные параметры оператора <FORM>.

METHOD

- задает метод передачи данных от браузера расширению сервера Web (в нашем случае CGI скрипту). Мы указали метод Get, поскольку объем передаваемых данных невелик. Для передачи больших объемов данных используют метод Post. В этом случае скрипт получает данные, читая их из стандартного потока ввода.

ACTION

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

Ввод данных производят посредством однострочных полей. Их помещают в форму с помощью оператора <INPUT>:

<INPUT TYPE=text NAME="na" SIZE=20>

Параметр TYPE определяет тип органа управления, вставленного в форму оператором <INPUT>. Если значение этого параметра равно text, вставляется однострочное поле, предназначенное для редактирования текстовой строки. Параметр NAME определяет имя поля, которое будет посылаться на сервер вместе с содержимым поля. И, наконец, параметр SIZE определяет ширину поля редактирования в символах.

Для отправки вводимых с помощью формы данных на сервер используют кнопки. Их вставляют в форму с помощью оператора <INPUT>:

<INPUT TYPE=Submit VALUE="Ввод">

Значение TYPE, определяющее тип кнопки, здесь равно Submit, поскольку кнопка предназначена для передачи данных из формы на сервер. Надпись на кнопке определяют параметром VALUE.

Совет. Если вы хотите очистить форму, то значение параметра TYPE должно быть равно Reset.

Окончательно, текст html формы для ввода параметра name примитива добавления данных будет иметь вид

<html>

<body>

<FORM METHOD=Get ACTION="insert.php3">

<P><INPUT TYPE=Text NAME=na SIZE=20><P>

<P><INPUT TYPE=Submit VALUE="Ввод"></P>

</FORM>

</body>

</html>

Последнее, что необходимо - это заменить строку примитива

$result = pg_Exec( $cnct, "INSERT INTO test values(1, 'Иванов')" );

на следующую

$result = pg_Exec( $cnct, "INSERT INTO test values(1, '$na')" );

Это позволит добавлять в таблицу БД строки с любыми значениями параметра name.

Приложение Web баз данных "справочник телефонов" выбрано из следующих соображений:

по сути, это не сложное приложение;

оно может быть использовано на практике.

Данное приложение позволяет по заданой фамилии или ее части найти в базе данных все похожие фамилии. Затем оно формирует html документ, который содержит список из этих фамилий и соответствующих им номеров телефонов.

Для ввода фамилии или ее части пользователь должен заполнить однострочную форму, которой соответствует следующий htm код

<html>

<body>

<FORM METHOD=Get ACTION="view.php3">

<P><INPUT TYPE=Text NAME=_fio SIZE=20><P>

<P><INPUT TYPE=Submit VALUE="Введите фамилию"></P>

</FORM>

</body>

</html>

Теперь обсудим текст скрипта view.php3. Структурно он должен состоять из трех частей, которые должны обеспечить:

соединение с БД;

выборку данных из БД на основании совпадения фамилий с введенной в форму комбинацией символов;

динамическое формирование html документа.

Первую из перечисленных задач можно решить примитивом connect.inc.

Вторую задачу SQL командой

SELECT * FROM phone WHERE lower(fio) LIKE '_fio%'

Для решения третьей задачи можно предложить следующий скрипт, который разработан на основе view_n.php3

<?

// *** динамическое формирование html документа ***

$RecCount = pg_NumRows( $result ); // число записей, которые следует отобразить на экране

if (empty( $RecCount )) {

echo "No Data\n"; // нет таких фамилий

}

else{

?>

<HTML>

<BODY>

<TABLE BORDER="1" WIDTH="200">

<? // *** построчное отображение записей ***

$i = 0;

do {

$arr = pg_Fetch_Array ($result, $i);

?>

<TR>

<TD>Name: </TD><TD><? echo $arr['fio']; ?> </TD>

<TD>Phone: </TD><TD><? echo $arr['num']; ?> </TD>

</TR>

<? $i = $i + 1; // номер следующей записи, которую будем

отбражать строкой таблицы

} while ($i < $RecCount);

}

?>

</TABLE>

<BR>

</BODY>

</HTML>

Назовем его примитивом view_m.inc.

Окончательно текст скрипта view.php3, который обеспечивает реализацию "справочника телефонов" следующий:

<?

//*** соединение с БД ***

require "primitive/connect.inc";

// *** выборка данных ***

$result = pg_Exec( $cnct, "SELECT * FROM phone WHERE lower(fio) LIKE '$_fio%'" );

// *** отображение данных ***

require "primitive/view_m.inc";

?>

Результат работы приложения "справочник телефонов" в случае просмотра абонентов, фамилии которых начинаются на "Ив" приведен ниже.

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ № 4

1. Основные элементы HTML: заголовки, абзацы, списки, гипертекстовые ссылки.

Одним из первых правил составления любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. В HTML-документе разделение на абзацы производится с помощью специального тега <P>. Синтаксис этого тега таков:

<P ALIGN="выравнивание">

Атрибут ALIGN определяет способ выравнивания абзаца. Он может иметь следующие значения:

· LEFT – текст выравнивается по левому краю окна броузера. Это значение используется по умолчанию, т.е. когда атрибут не указан.

· CENTER – текст выравнивается по центру окна броузера.

· RIGHT – текст выравнивается по правому краю окна броузера.

Пример использования тега <P>:

<HTML>

<HEAD>

<TITLE>Приветствие</TITLE>

</HEAD>

<BODY>

<P>Добро пожаловать!</P>

<P ALIGN="CENTER">Добро пожаловать!</P>

<P ALIGN="RIGTH">Добро пожаловать!</P>

</BODY>

</HTML>

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

Для разметки заголовков используются теги <H1>, <H2>, <H3>, <H4>, <H5> и <H6>. Эти теги требуют соответствующего закрывающего тега. Заголовок с номером 1 является самым крупным (заголовок верхнего уровня), а с номером 6 – самым мелким. Теги заголовка нельзя использовать для выделения отдельных слов текста с целью увеличения их размера. При использовании тегов заголовков происходит вставка пустой строки до и после заголовка, поэтому тегов абзаца и перевода строки здесь не требуется.

Синтаксис тегов заголовков:

<Hn ALIGN="выравнивание">

Атрибут ALIGN определяет способ выравнивания заголовка. Он может иметь те же значения, что и аналогичный атрибут у тега абзаца.

Пример использования разных заголовков:

<HTML>

<HEAD>

<TITLE>Пример</TITLE>

</HEAD>

<BODY>

<H1>Заголовок 1</H1>

<H2 ALIGN="CENTER">Заголовок 2</H2>

<P>Простой текст</P>

</BODY>

</HTML>

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

Маркированный список

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

Для создания маркированного списка необходимо использовать тег-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий теги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому нет необходимости использовать теги абзаца или принудительного перевода строки.

Каждый элемент списка должен начинаться тегом <LI> и заканчиваться тегом </LI>.

Спецификация элемента UL:

<UL TYPE="вид маркера">

Атрибут TYPE задает вид маркера, которым выделяются элементы списка. Он может имеет следующие значения:

· DISK – маркеры отображаются закрашенными кружочками, это значение используется по умолчанию;

· CIRCLE – маркеры отображаются не закрашенными кружочками;

· SQUARE – маркеры отображаются квадратиками.

Спецификация элемента LI для маркированного списка:

<LI TYPE="вид маркера">

Атрибут TYPE задает вид маркера, он может принимать такие же значения, что и одноименный атрибут элемента UL. Значение по умолчанию – DISK.

Пример использования маркированного списка:

<HTML>

<HEAD>

<TITLE>Пример списка</TITLE>

</HEAD>

<BODY>

<UL>

Крупные города России:

<LI>Москва</LI>

<LI>Санкт-Петербург</LI>

<LI>Новосибирск</LI>

</UL>

</BODY>

</HTML>

Нумерованный список

Нумерованные списки иногда называют упорядоченными. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от броузера и может задаваться атрибутами тегов списка. В остальном реализация нумерованного списка во многом похожа на реализацию маркированного списка.

Для создания нумерованного списка следует использовать тег-контейнер <OL> </OL>, внутри которого располагаются все элементы списка.

Каждый элемент списка должен начинаться тегом <LI> и заканчиваться тегом </LI>.

Спецификация элемента OL:

<OL TYPE="вид нумерации" START="начальная позиция">

Атрибут TYPE задает вид нумерации, которой выделяются элементы списка. Он может иметь следующие значения:

· A – маркеры в виде прописных латинских букв;

· a – маркеры в виде строчных латинских букв;

· I- маркеры в виде больших римских цифр;

· i- маркеры в виде маленьких римских цифр;

· 1- маркеры в виде арабских цифр, это значение используется по

умолчанию.

Атрибут START определяет позицию, с которой начинается нумерация списка. Используя этот атрибут, можно начать нумерацию, например, с цифры 5 или буквы E, в зависимости от вида нумерации. Значением атрибута START является число, вне зависимости от вида нумерации.

Спецификация элемента LI для нумерованного списка:

<LI TYPE="вид нумерации" VALUE="номер элемента">

Атрибут TYPE задает вид нумерации, он может принимать такие же значения, что и одноименный атрибут элемента ОL. По умолчанию значение этого атрибута – 1.

Атрибут VALUE позволяет изменить номер данного элемента, при этом изменятся номера и последующих элементов.

Пример использования нумерованного списка:

<HTML>

<HEAD>

<TITLE>Пример списка</TITLE>

</HEAD>

<BODY>

<UL>

Города России по величине:

<LI>Москва</LI>

<LI>Санкт-Петербург</LI>

<LI>Новосибирск</LI>

</UL>

</BODY>

</HTML>

Список определений

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

Списки определений задаются с помощью тега-контейнера <DL>. Внутри него тегом <DT> отмечается определяемый термин, а тегом <DD> – абзац с его определением. Внутри элемента <DT> нельзя использовать абзацы (P) и заголовки (H1-H6), но их можно использовать внутри элемента <DD>. Атрибутов для элементов списка определений нет. В общем случае список определений записывается следующим образом:

<DL>

<DT>Термин</DT>

<DD>Определение термина</DD>

</DL>

Пример использования списка определений:

<HTML>

<HEAD>

<TITLE>Пример списка определений</TITLE>

</HEAD>

<BODY>

<DL>

<H2 ALIGN="CENTER">Состав Microsoft Office</H2>

<DT>Microsoft Word</DT>

<DD>Многофункциональный текстовый процессор</DD>

<DT>Microsoft Excel</DT>

<DD>Программа для работы с электронными таблицами</DD>

<DT>Microsoft Access</DT>

<DD>Система управления базами данных</DD>

</DL>

</BODY>

</HTML>

Гиперссылки – переходы к другим документам. Они являются основой HTML. Гиперссылки можно использовать для перехода не только к другим HTML-документам, но и другим объектам, которые можно разместить на компьютере, например, к видео- и аудиофайлам, архивам, рисункам и т.п.

Каждая ссылка состоит из двух частей. Первая – это то, что отображается броузером. Она называется указателем ссылки. Вторая часть – адресная, содержащая адрес объекта, к которому должен происходить переход. Эту часть называют URL (универсальный идентификатор ресурсов).

Когда вы щелкаете мышью по указателю ссылки, броузер загружает документ, адрес которого указан в URL.

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

Универсальный идентификатор ресурсов URL

По своей сути URL – это адрес файла, к которому происходит переход. Указание адреса может быть относительным или абсолютным.

Когда в URL указывается полный путь к файлу, независимо от того, где этот файл находится (в Интернете или на жестком диске компьютера), то это абсолютное указание. Например: http://www.mysite.ru/page.htm – абсолютный адрес документа, находящегося в Интернете, c:\web\doc1.htm – абсолютный адрес документа на диске c.

Если в URL указывается не полный путь, а путь относительно адреса документа, в котором находится ссылка, то это относительное указание. Например, броузер отображает документ, абсолютный адрес которого c:\web\doc1.htm, в этом документе имеется ссылка с адресом pict/ris1.jpg, то это означает, что на самом деле ссылка будет на документ по адресу c:\web\pict\ris1.jpg.

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

Правила записи ссылок

Для организации ссылки необходимо указать броузеру, что является указателем ссылки, а также определить адрес документа, на который происходит ссылка. Оба этих действия выполняются c помощью тега <A>.

Тег <A> имеет следующую спецификацию:

<A HREF="URL-адрес" NAME="имя ссылки" TARGET="объект для вывода">

Атрибут HREF используется для задания адреса файла, к которому производится переход. Значением этого атрибута является текстовая строка, содержащая абсолютный или относительный URL-адрес.

Атрибут NAME предназначен для задания ссылке имени. Значением этого атрибута является короткая текстовая строка. Этот атрибут используется для ссылок внутри одного HTML-документа.

Атрибут TARGET позволяет определить, куда будет выводиться документ, на который происходит переход. Этот атрибут может иметь значение _blank – это означает, что документ будет выводиться в новом окне броузера.

Пример ссылки:

<A HREF="doc1.htm">Документ 1</A>

При нажатии мышью на этой строке броузер загрузит и отобразит файл doc1.htm, т.е. “Документ 1” – это указатель ссылки, а “doc1.htm” – URL-адрес.

Внутренние ссылки

Кроме ссылок на другие документы, часто бывает полезно включить ссылки на различные части текущего документа. Например, большой документ читается лучше, если он имеет оглавление со ссылками на соответствующие разделы.

Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Для этого в месте, куда потом будет производиться ссылка, надо поместить тег <A> с атрибутом NAME, определив этим атрибутом имя указателя. Например:

<A NAME="glava5"></A>

Обратите внимание, что в этом примере отсутствует содержимое тега <A>. Обычно так и делают, поскольку здесь нет необходимости как-то выделять текст, а требуется лишь указать местоположение.

После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого в атрибуте HREF тега <A> помещается имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка.

Например:

<A HREF="#glava5">Глава 5</A>

Теперь, если пользователь щелкнет кнопкой мыши на словах “Глава 5”, то броузер выведет соответствующую часть документа в окне просмотра.

Можно совмещать внутренние ссылки со ссылками на другие документы. Например:

<A HREF="doc1.htm#glava5">Глава 5 Документа 1</A>

При нажатии на эту ссылку броузер откроет файл doc1.htm, найдет в этом файле указатель glava5 и выведет в окне просмотра соответствующую

информацию.

Ссылки на документы различных типов

Когда пользователь щелкает мышью на ссылке, указывающей на другой HTML-документ, то документ выводится непосредственно в окне броузера. Если же ссылка указывает на документ иного типа, программа просмотра принимает документ и затем решает, что с ним делать дальше.

· Броузер знает этот тип документа и умеет с ним обращаться. Например, если создать ссылку на графический файл формата GIF и щелкнуть мышью на ней, то броузер очистит окно просмотра и отобразит указанное изображение.

· Броузер не распознает тип принятого документа и не знает, что с ним делать дальше. В этом случае он обратится к вспомогательным программам, имеющимся на компьютере пользователя. Если подходящая программа найдется, броузер запустит ее и передаст ей полученный документ для обработки. Например, если пользователь щелкнет на ссылке на видеофайл формата AVI, броузер загрузит файл, найдет программу для демонстрации AVI-файлов и запустит ее. Видеофайл будет показан в дополнительном небольшом окне.

Ссылки на ресурсы Интернета

Основное назначение HTML-документов – это глобальная компьютерная сеть Интернет. HTML-документ, размещенный в Интернете, становится Web-страницей. Чтобы обратиться к Web-странице, надо указать URL-адрес в такой форме: http://sitename/docname, где sitename – имя сайта, docname – имя документа. Например: http://kotoz.newmail.ru/autor.htm.

Можно на Web-странице разместить адрес электронной почты. Для этого URL-адрес указывается так: mailto:address, где address – это адрес почтового ящика. Например: mailto:angela@mail.ru.

Также существуют специальные форматы URL-адреса для других ресурсов Интернета (FTP, TelNet, Newsgroup, Gopher, WAIS).

2. Язык программирования Perl как основной инструмент разработки CGI – скриптов.

Perl — высокоуровневый интерпретируемый динамический язык программирования общего назначения, созданный Ларри Уоллом, лингвистом по образованию. Название языка представляет собой аббревиатуру, которая расшифровывается как Practical Extraction and Report Language «практический язык для извлечения данных и составления отчётов». Первоначально аббревиатура состояла из пяти символов и в таком виде в точности совпадала с английским словом pearl, жемчужина. Но затем буква 'A' «потерялась». Талисманом языка Perl является верблюд — не слишком красивое, но очень выносливое животное, способное выполнять тяжёлую работу.

Перл унаследовал много свойств от языков Си, shell script, awk.

Сегодня основной для разработчиков является пятая версия языка Perl, однако (на некоторых веб-серверах) продолжают использоваться программы (скрипты), написанные на предыдущей — четвёртой — версии (из-за частичной обратной несовместимости). Фактически стандарт языка определяется реализацией интерпретатора.

С 2000 года идет разработка новой (6-ой) версии языка. В отличие от предыдущих версий, разработчики планируют создать четко определенный стандарт языка. В настоящее время существуют экспериментальные компиляторы Perl 6, но продолжается дальнейшая дискуссия о новых правилах. На русском языке информация о новой версии языка доступна на сайте http://perl6.ru/

Основные библиотеки, используемые в web-программировании

Одни и те же задачи web-программирования могут решаться на Perl различными способами, выбор подходящего для конкретного приложения -- в значительной степени дело вкуса. Главный лозунг Perl -- "Всегда есть больше одного решения" (There's more than one way to do it, TMTOWTDI). В приложении к материалу текущего раздела, одну и ту же работу вы можете сделать самостоятельно, вручную разбирая строки или отсылая пакеты, а можете доверить ее стандартным библиотекам, которые, впрочем, тоже можно использовать по-разному. Профессиональная черта программистов -- лень – как правило, толкает нас по второму пути, но добросовестность и любопытство принуждают посмотреть, как же это все устроено внутри.

Серверные приложения

Для начала рассмотрим задачу создания серверного приложения. Как было

описано выше, информация из формы собирается в строку вида

param1=value1&param2=value2...&paramN=valueN, которая попадает в серверное

приложение либо через переменную окружения QUERY_STRING, либо через

стандартный ввод, в последнем случае переменная окружения CONTENT_LENGTH

содержит ее размер. Метод, которым передавались данный, задается переменной

окружения REQUEST_METHOD.

Доступ к переменным окружения в Perl осуществляется через ассоциативный

массив %ENV, для чтения строки заданного размера из входного потока

предпочтительней воспользоваться функцией read. Вся процедура получения

входной строки выглядит так (в реальной программе стоило бы добавить

ограничение на длину входной строки):

if($ENV{"REQUEST_METHOD"} eq 'POST')

{

read(STDIN, $query, $ENV{'CONTENT_LENGTH'});

}

else

{

$query = $ENV{'QUERY_STRING'};

}

Далее нам понадобится разбить входную строку на составляющие:

@params = split(/&/, $query);

Теперь @params содержит список строки вида param1=value1. Далее нам

придется выделить из них имена и значения, не забывая о необходимости

декодирования нестандартных символов:

foreach $p(@params)

{

($name, $value) = split(/=/, $);

$value =~ tr/+/ /;

$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;

$in{$name} = $value;

}

Впервые встретившаяся нам функция hex занимается преобразованием

"шестнадцатеричная строка->число", функция pack -- преобразует полученное

значение в бинарную форму, осуществляя в нашем случае преобразование "код

символа->символ".

По завершении цикла все параметры формы оказываются размещенными в

ассоциативном массиве %in, и их значения можно получить как $in{'param1'}.

Далее следует содержательная часть нашей программы, обработка входных

параметров, выборка данных из баз и т.п. Наконец, обработанную информацию

необходимо вернуть пользователю. В первую очередь необходимо сообщить

клиенту, как именно он должен рассматривать передаваемую далее информацию.

Как мы помним, это осуществляется с помощью HTTP-заголовков.

Как правило, используется два способа -- перенаправление клиента на

новый адрес, или формирование виртуального документа. В первом случае все,

что от нас требуется -- вывести на стандартный вывод заголовок Location:

print "Location: <u>http://newurl/text.html\n\n"</u>;

Во втором случае мы сообщаем клиенту, что вся последующая информация

должна рассматриваться, к примеру, как html-файл:

print "Content-type: text/html\n\n";

print '<html><head><title>Ok</title></head><body>Results:

<br>...</body></html>';

Через HTTP-заголовки передается масса вспомогательной информации --

версия сервера, информация о клиенте, cookie, способ авторизации и т.п.

Как видите, ничего сложного в получении и передаче информации

CGI-приложением нет, но действия при этом выполняются типовые, и возникает

естественное желание написать их раз и навсегда и поместить в библиотеку. Мы

не первые, у кого возникло такое желание, так что теперь вместо переноса из

скрипта в скрипт типового кода можно воспользоваться стандартным (начиная с

версии Perl 5.004) модулем CGI.pm:

use CGI;

$Query = new CGI;

$val1 = $Query->param('param1'); # получаем значение параметра

$cookie1 = $Query->cookie('cookie1'); # получаем значение cookie

# Подготавливаем новый cookie:

$newcookie = $Query->cookie(

-name=>'new', # имя

-value=>'value', # значение

-expires=>"+1y", # прекращает действие через год

-domain=>'www.mydomain.ru' # определен для некоторого домена

);

Формируем и выводим HTTP-заголовки:

print $Query->header(

-type=>'text/html',

-cookie=>$newcookie,

-Pragma=>"no-cache"

# ...

);

Также CGI.pm содержит функции для формирования html-кода, сохранения

результатов запроса в файле и т.п. Дополнительную информацию о модуле можно

получить с помощью команды perldoc CGI.

Клиентские приложения

Написание клиентских web-приложений на Perl строится по обратной схеме

-- формируем строку параметров и HTTP-заголовки, соединяемся с сервером,

передаем ему запрос и ожидаем ответ. Как обычно, проделать это можно

несколькими способами.

1. Рецепт для любителей ручной работы. Используем низкоуровневые

функции для работы с сокетами, являющиеся минимальными обертками вокруг

соответствующих функций на С.

use Socket;

# подготавливаем строчку с параметрами формы

$forminfo = 'param1=val1&param2=val2';

# подготавливаем и осуществляем соединение:

# выбираем работу через TCP

$proto = getprotobyname('tcp');

# открываем потоковый сокет

socket(Socket_Handle, PF_INET, SOCK_STREAM, $proto);

# подготавливаем информацию о сервере

$port = 80;

$host = "www.somehost.com";

$sin = sockaddr_in($port,inet_aton($host));

# соединяемся с сервером

connect(Socket_Handle,$sin) || die ("Cannot connect");

# передаем серверу команды, используя дескриптор сокета

# собственно команда GET

send Socket_Handle,"GET /cgi-bin/env.cgi?$forminfo HTTP/1.0\n",0;

# HTTP-заголовки

send Socket_Handle,"User-Agent: my agent\n",0;

send Socket_Handle,"SomeHeader: my header\n",0;

send Socket_Handle,"\n",0;

# начинаем чтение из дескриптора сокета аналогично

# тому, как читали из файла.

while (<Socket_Handle>)

{

print $_;

}

close (Socket_Handle);

При использовании нестандартных символов в параметрах формы их следует

преобразовать в вид %XX, где XX -- их шестнадцатеричное представление.

Кодирование выполняется следующим кодом:

$value=~s/([^a-zA-Z0-9_\-.])/uc sprintf("%%%02x",ord($1))/eg;

2. Чуть меньше ручной работы -- использование модуля IO::Socket.

Рассмотрим его на примере метода POST:

use IO::Socket;

$forminfo = 'param1=val1&param2=val2';

$host = "www.somehost.com";

$socket = IO::Socket::INET->new(Proto => "tcp",

PeerAddr => $host,

PeerPort => "http(80)")

or die ("Cannot connect");

$socket->autoflush(1);

$length = length($forminfo)+1;

$submit = "POST $path HTTP/1.1\n".

"Content-type: application/x-www-form-urlencoded\n".

"Content-length: $length\n".

"Host: $host\n\n"

"$forminfo\n";

print $socket $submit;

while(<$socket>)

{

print;

}

close $remote;

3. Наконец, наиболее комфортный для программиста вариант --

использование комплекса модулей libwww-perl, или LWP. LWP, как правило,

входит во все последние дистрибутивы Perl, кроме того, последняя версия

всегда доступна на CPAN и на <u>http://www.linpro.no/lwp/.</u>

Основные модули, используемые при работе с LWP (для получения

дополнительной инфомрации о каждом модуле воспользуйтесь командой perldoc

<имя модуля>):

LWP::UserAgent

LWP::Simple

HTTP::Request

HTTP::Response

HTTP::Headers

HTTP::Cookies

LWP::Simple предназначен для простейших операций наподобие получения

информации о документе или получении документа методом GET:

use LWP::Simple;

$content = get('http://somehost/text.html');

LWP::UserAgent -- основной модуль для более тонкой работы с web. Его

назначение -- создание виртуального броузера, выполняющего всю работу по

взаимодействию с сервером:

# создание

$UserAgent = new LWP::UserAgent;

# задание строки с именем "броузера"

$UserAgent->agent("MoZilla 9.0 (non-compatible; MSIE 9.3; PalmOS)");

# работа через прокси

$UserAgent->proxy('http', $proxy);

HTTP::Request отвечает за формирование запроса серверу, HTTP::Headers

-- за формирование заголовков запроса:

# формируем заголовки

$Headers = new HTTP::Headers(Referer => $referer);

# формируем запрос

$Request = new HTTP::Request(POST => $url, $Headers);

# говорим, что передаваться будут данные формы

$Request->content_type('application/x-www-form-urlencoded');

# передаем данные

$Request ->content($forminfo);

Взаимодействие с сервером осуществляется функцией request, возвращающей

объект HTTP::Response:

$Response = $UserAgent->request($Request);

if($Response->is_success) # успешно выполненный запрос

{

# получаем информацию, возвращенную сервером

$text = $Response->content;

}

Для работы с cookie используется модуль HTTP::Cookie и функция

cookie_jar, сообщающая нашему виртуальному броузеру о необходимости

использовать объект Cookie:

my $СookieJar = new HTTP::Cookies;

$UserAgent->cookie_jar($CookieJar);

Для сохранения и загрузки cookie используются функции

$CookieJar->load($cookiefilename);

$CookieJar->save($cookiefilename);

Можно формировать их значения и вручную с помощью функции set_cookie.

Для доступа к ресурсам, защищенным средствами сервера, используется

HTTP-заголовок Authorization. Его значение должно содержать тип авторизации

(обычно BASIC) и строку вида "имя_пользователя:пароль", в случае

basic-авторизации закодированную base64. Для кодирования можно

воспользоваться модулем MIME::Base64:

use MIME::Base64;

$authorization = MIME::Base64::encode_base64("$name:$password");

$Request->header(Authorization => "BASIC $authorization");

Работа с базами данных

Для работы с базами данных в Perl используется стандартный интерфейс

программирования DBI, обеспечивающий доступ к большинству существующих СУБД

с помощью подключаемых драйверов. Схемы подключения к различным СУБД

(точнее, правила формирования имени источника данных) могут незначительно

различаться, мы рассмотрим работу с использованием mySQL.

В первую очередь необходимо подключить модуль DBI:

use DBI;

Далее подключаемся к базе данных:

my $dbh = DBI->connect('DBI:mysql:hostname:base:port', 'user,

'password, { RaiseError => 1, AutoCommit => 1});

Здесь $dbh -- дескриптор базы данных, используемый в дальнейшей работе,

DBI:mysql:hostname:base:port -- имя источника данных, включающее имя

драйвера, имя хоста, базы, к которой мы подключаемся, и номер порта, на

который настроен sql-сервер, user/password -- имя и пароль пользователя,

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

По завершении работы желательно закрыть дескриптор:

$dbh->disconnect();

Возможно использование двух способов работы с базой. В случае, если нам

нужно только передать информацию в базу, используется метод do, параметром

которого является строка SQL-запроса:

$dbh->do("insert into mytable values (1,1)");

Если же необходимо получить информацию из базы, используется следующая

процедура:

1. Получаем дескриптор команды с помощью метода prepare:

my $sth = $dbh->prepare ("select * from mytable where field1>1");

2. Выполняем команду:

$sth->execute();

3. Получаем данные. Используется один из четырех методов:

fetchrow_array

fetchrow_hash

fetchrow_arrayref

fetchrow_hashref

Методы возвращают соответственно массив, хэш, ссылку на массив, ссылку

на хэш, в которых хранятся значения полей текущей записи. Для выборки всех

записей используется цикл, после выборки всех записей функции возвращают

пустой список, воспринимаемый как значение false:

while(my $hash_ref = $sth->fetchrow_hashref)

{

foreach my $fieldname(keys %$hash_ref)

{

print "$fieldname: $hash_ref->{$fieldname }\n";

}

print "\n";

}

4. Освобождаем ресурсы:

$sth->finish();

При передаче текстовой информации в базу рекомендуется предварительно

обработать ее методом $dbh->quote(), расставляющим кавычки и управляющие

символы в строке в соответствии с правилами используемой СУБД.

Кроме того, возможно использование привязки параметров в виде:

$sth = $dbh->prepare("select * from mytable where field1=?");

$sth->bind_param(1, "значение параметра");

$sth->execute();

либо

$sth = $dbh->prepare("select * from mytable where field1=?");

$sth->execute("значение параметра");

В этом случае в методе quote необходимости нет, он вызывается

автоматически.

Использование привязки параметров особенно эффективно при выполнении

нескольких однотипных запросов подряд. В этом случае достаточно один раз

подготовить запрос с помощью функции prepare, и выполнять его с помощью

функции execute столько раз, сколько необходимо.

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ № 5

1. Вставка изображений и других объектов в web – страницу.

Для встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.

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

Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице.

Если в начале адреса стоит слэш (символ /), то отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru означает, что написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу показать в браузере файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.

Если перед адресом добавляется упоминание протокола HTTP (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.

Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 9.1 показан файл index.html, в который требуется поместить рисунок sample.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.

Рис. 9.1. Пример размещения файлов

Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис.9.2, относительный путь к рисунку sample.gif из файла index.html будет images/pic.gif.

Рис. 9.2. Пример размещения файлов

В примере 9.1 показаны несколько способов указания пути к графическому файлу при добавлении изображений на веб-страницу.

Пример 9.1. Вставка изображения в документ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <img src="http://www.htmlbook.ru/images/sample.gif"> - абсолютный адрес размещения изображения <img src="/images/sample.gif"> - адрес размещения изображения относительно корня сайта <img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа </body> </html>

Альтернативный текст

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

Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 9.2.

Пример 9.2. Добавление альтернативного текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <a href="index.html"><img src="home.gif" alt="Вернуться на главную страницу"></a> </body> </html>

Размеры изображения

Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG> (пример 9.3). В качестве значений используется пиксел — элементарная точка на мониторе.

Пример 9.3. Размеры изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <img src="sample.gif" height="111" width="100"> </body> </html>

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.

Замечание

Подход, когда приходится менять размеры изображения относительно исходных, не следует применять часто. Если количество пикселов в картинке насильно увеличивается, то они никак не появятся из ниоткуда и браузеру придется, используя алгоритмы интерполяции, достраивать их самостоятельно. Тот же алгоритм применяется и в обратном случае, когда необходимо уменьшить картинку. Данный подход изменения размера изображения получил термин ресемплирование. Качество ресемплирования напрямую зависит от типа изображения, чем больше оно содержит мелких и контрастных деталей, тем хуже конечный результат, который проявляется как размытость.

Рамка вокруг изображения

Вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста на веб-странице. Для этого служит параметр border тега <IMG> (пример 9.4). В качестве значения указывается толщина рамки в пикселах.

Пример 9.4. Добавление рамки вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <img src="sample.gif" height="111" width="100" border="1"> </body> </html>

Поля вокруг изображения

Для любого изображения можно задать пустые поля по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство (пример 9.5).

Пример 9.5. Добавление отступов вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <img src="sample.gif" align="left" height="50" width="50" hspace="10" vspace="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html>

Выравнивание изображения

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>. В табл. 9.1 перечислены возможные значения этого параметра и результат его использования.

Табл. 9.1. Значения параметра align для выравнивания изображений

Значение

Описание

Пример

bottom

Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

left

Изображение располагается по левому краю родительского элемента.

L orem ipsum dolor sit amet, consectetuer adipiscing elit...

middle

Середина изображения выравнивается по базовой линии текущей строки текста.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

right

Изображение выравнивается по правому краю родительского элемента.

L orem ipsum dolor sit amet, consectetuer adipiscing elit...

top

Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Наиболее популярные параметры ? left и right, создающие обтекание вокруг изображения (пример 9.6).

Пример 9.6. Обтекание текста вокруг рисунка

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=Windows-1251" http-equiv="content-type"> </head> <body> <img src="sample.gif" align="left" height="50" hspace="10" vspace="10" width="50">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body> </html>

Элемент <EMBED> используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

Спецификация HTML 4.0 рекомендует использовать тег <OBJECT> для загрузки внешних данных вместо тега <EMBED>. Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить <EMBED> внутрь контейнера <OBJECT>.

Вид внедренного объекта зависит от установленных в браузере плагинов, типа загружаемого файла, а также от параметров тега <EMBED>. На рис. 1 и рис. 2 показан вид воспроизведения в браузере различных типов файлов.

Рис. Воспроизведение аудиофайла в браузере

Синтаксис

<embed width="..." height="..."></embed>

Параметры

align

Определяет как объект будет выравниваться на странице и способ его обтекания текстом.

height

Высота объекта.

hidden

Указывает, скрыть объект на странице или нет.

hspace

Горизонтальный отступ от объекта до окружающего контента.

pluginpage

Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.

src

Путь к файлу.

type

MIME-тип объекта.

vspace

Вертикальный отступ от объекта до окружающего контента.

width

Ширина объекта.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <EMBED>

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED</title>

</head>

<body>

<embed src="mouse.swf" width="400" height="300" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED</title>

</head>

<body>

<embed src="mouse.swf" width="400" height="300" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

</body>

</html>

Описание параметров тега <EMBED>

Параметр ALIGN

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Определяет выравнивание объекта на странице и способ его отображения совместно с другими нижележащими элементами вроде текста

Синтаксис

<embed align="absmiddle | baseline | bottom | left | middle | right | texttop | top">...</embed>

Аргументы

absmiddle

Выравнивание середины объекта по середине текущей строки.

baseline

Выравнивание объекта по базовой линии текущей строки.

bottom

Выравнивание нижней границы объекта по окружающему тексту.

left

Выравнивает объект по левому краю окна, текст обтекает его справа.

middle

Выравнивание середины объекта по базовой линии текущей строки.

right

Выравнивает объект по правому краю окна, текст обтекает слева.

texttop

Верхняя граница объекта выравнивается по самому высокому текстовому элементу текущей строки.

top

Верхняя граница объекта выравнивается по самому высокому элементу текущей строки.

Значение по умолчанию

bottom

Пример 2. Выравнивание объекта

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED, параметр align</title>

</head>

<body>

<embed src="movie.avi" width="400" height="300" align="left"></embed>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh

euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED, параметр align</title>

</head>

<body>

<embed src="movie.avi" width="400" height="300" align="left"></embed>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh

euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

</body>

</html>

Параметр HEIGHT и WIDTH

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Параметр height устанавливает высоту объекта, а width — его ширину. В заданные размеры входит не только само изображение, например в случае воспроизведения видеофайла, но и панель управления им, включая кнопки проигрывания, паузы, остановки и т.д. По этой причине на размер отображаемого объекта влияет тип файла и применяемый плагин.

Если используется процентная запись, то размеры объекта вычисляются относительно родительского элемента — контейнера, где находится тег <EMBED>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что объект будет занимать всю доступную ширину веб-страницы.

Несмотря на заданные размеры объекта, его исходные пропорции сохраняются, но в случае явного диссонанса высоты и ширины добавляется пустое пространство по вертикали или горизонтали.

Синтаксис

<embed height="ширина" width="высота">...</embed>

Обязательные параметры

Да.

Аргументы

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Нет.

Параметр HIDDEN

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Параметр hidden представляет собой выключатель, который определяет, отображать объект в окне браузера или нет. Это особенно удобно для скрытия панели управления при воспроизведении фоновой музыки. Если этот атрибут указан, значение параметров width и height игнорируется.

Синтаксис

<embed hidden>...</embed>

Аргументы

Нет.

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 3. Сокрытие объекта

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED, параметр hidden</title>

</head>

<body>

<embed src="jazz.mp3" hidden></embed>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh

euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED, параметр hidden</title>

</head>

<body>

<embed src="jazz.mp3" hidden></embed>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh

euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

</body>

</html>

Параметр HSPACE и VSPACE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Для любого объекта можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании объекта текстом, в этом случае необходимо вокруг него добавить пустое пространство.

Синтаксис

<embed hspace="отступ по горизонтали" vspace="отступ по вертикали">...</embed>

Аргументы

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Пример 4. Отступы вокруг объекта

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED, параметр hspace и vspace</title>

</head>

<body>

<embed src="banner.swf" width="600" height="200"

type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"

hspace="10" vspace="10"></embed>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED, параметр hspace и vspace</title>

</head>

<body>

<embed src="banner.swf" width="600" height="200"

type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"

hspace="10" vspace="10"></embed>

</body>

</html>

Параметр PLUGINSPAGE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Если браузер не поддерживает указанный тип файлов заданный параметром src, то pluginspage используется для того, чтобы перейти по указанному адресу, откуда можно скачать и установить необходимый плагин. Браузер сообщает пользователю, что требуемого плагина для отображения файла нет, и запрашивает, загружать его или нет.

Синтаксис

<embed pluginspage="URL">...</embed>

Аргументы

Любой корректный URL (Universal Resource Locator, универсальный указатель ресурсов).

Значение по умолчанию

Нет.

Пример 5. Адрес требуемого плагина

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED, параметр pluginspace</title>

</head>

<body>

<embed src="ban.swf" width="200" height="200"

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег EMBED, параметр pluginspace</title>

</head>

<body>

<embed src="ban.swf" width="200" height="200"

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

</body>

</html>

Параметр SRC

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Параметр src указывает путь к файлу, который необходимо загрузить в окно браузера. Браузер анализирует расширение файла и решает по нему, какой плагин или внешняя программа требуется для отображения файла.

Синтаксис

<embed src="URL">...</embed>

Аргументы

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Параметр TYPE

Описание

Не всегда браузер может распознать тип файла по его расширению. В таких случаях лучше указывать его тип с помощью параметра type, который устанавливает MIME-тип для данных.

Синтаксис

<embed type="MIME-тип">...</embed>

Аргументы

Имя MIME-типа в любом регистре. Допускается устанавливать сразу несколько значений, разделяя их запятыми.

Значение по умолчанию

Нет.

Тег OBJECT

Браузер

Internet Explorer

Netscape

Opera

Safari

Firefox

Версия

5.5

6.0

7.0

8.0

8.0

9.0

7.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Поддерживается

Да

Да

Да

Да

Да

Да

Да

Да

Да

Да

Да

Да

Да

Да

Да

Да

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Элемент <OBJECT> сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называются плагин, или запуска вспомогательной программы.

Спецификация HTML 4 разрешает вкладывать несколько тегов <OBJECT> с разным содержанием друг в друга. Это позволяет отображать тот контент, который понимает браузер, при отсутствии нужного плагина. Например, внешний тег <OBJECT> загружает видеофайл, а для случая, когда соответствующий кодек (программа для сжатия и восстановления видеоданных) не установлен, внутренний тег <OBJECT> показывает графическое изображение. Дополнительно внутрь контейнера <OBJECT> можно поместить тег <PARAM>, который передает дополнительные параметры для отображения объекта.

Синтаксис

<object width="..." height="..."></object>

Параметры

align

Определяет, как объект будет выравниваться на странице и способ его обтекания текстом.

classid

Адрес программы (приложения или плагина), которая работает с данным объектом, и будет запускать его.

code

Имя Java-апплета для его выполнения.

codebase

Путь к папке с Java-апплетом, который указан параметром code или classid.

codetype

Указывает на тип объекта, который задан параметром classid.

data

Адрес файла для его отображения в окне браузер.

height

Высота объекта.

hspace

Горизонтальный отступ от объекта до окружающего контента.

type

MIME-тип объекта.

vspace

Вертикальный отступ от объекта до окружающего контента.

width

Ширина объекта.

Закрывающий тег

Обязателен.

Пример 1. Использование тега <OBJECT>

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег OBJECT</title>

</head>

<body>

<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

width="400" height="300">

<param name="movie" value="8.swf">

<param name="quality" value="high">

<param name="scale" value="exactfit">

<param name="bgcolor" value="#ffffff">

</object></p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег OBJECT</title>

</head>

<body>

<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

width="400" height="300">

<param name="movie" value="8.swf">

<param name="quality" value="high">

<param name="scale" value="exactfit">

<param name="bgcolor" value="#ffffff">

</object></p>

</body>

</html>

Описание параметров тега <OBJECT>

Параметр ALIGN

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Определяет выравнивание объекта на странице и способ его отображения совместно с другими нижележащими элементами вроде текста

Синтаксис

<object align="absmiddle | baseline | bottom | left | middle | right | texttop | top">...</object>

Аргументы

absmiddle

Выравнивание середины объекта по середине текущей строки.

baseline

Выравнивание объекта по базовой линии текущей строки.

bottom

Выравнивание нижней границы объекта по окружающему тексту.

left

Выравнивает объект по левому краю окна, текст обтекает его справа.

middle

Выравнивание середины объекта по базовой линии текущей строки.

right

Выравнивает объект по правому краю окна, текст обтекает слева.

texttop

Верхняя граница объекта выравнивается по самому высокому текстовому элементу текущей строки.

top

Верхняя граница объекта выравнивается по самому высокому элементу текущей строки.

Значение по умолчанию

bottom

Пример 2. Выравнивание объекта

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег OBJECT, параметр align</title>

</head>

<body>

<p><object data="demo.mpg" width="400" height="300"

align="left"></object></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh

euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег OBJECT, параметр align</title>

</head>

<body>

<p><object data="demo.mpg" width="400" height="300"

align="left"></object></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh

euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>

</html>

Параметр CLASSID

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Адрес программы, которая работает с данным объектом, и будет запускать его. Параметр classid указывает браузеру, какую программу, плагин или апплет нужно загрузить. Можно также использовать идентификатор зарегистрированного ActiveX приложения, предваряя его ключевым словом clsid.

Синтаксис

<object classid="URL">...</object>

Аргументы

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример 3. Использование параметра classid

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег OBJECT, параметр classid</title>

</head>

<body>

<p><object codetype="application/java-vm" codebase="http://htmlbook.ru/applet.class"

classid="java:program.start" height="100" width="100">

<param name="options" value="que">

</object></p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег OBJECT, параметр classid</title>

</head>

<body>

<p><object codetype="application/java-vm" codebase="http://htmlbook.ru/applet.class"

classid="java:program.start" height="100" width="100">

<param name="options" value="que">

</object></p>

</body>

</html>

Параметр CODE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Параметр code используется для замены тега <APPLET>, который загружает и выполняет Java-aпплет. В качестве значения code используется имя класса Java-апплета (файл с рашсирением class). Если файл располагается не в той же папке что и текущий документ, то следует указать путь к нему через параметр codebase. Работает только в браузере Internet Explorer.

Синтаксис

<object code="имя класса">...</object>

Аргументы

Имя класса Java-апплета.

Значение по умолчанию

Нет.

Пример 4. Использование параметра code

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег META, параметр code</title>

</head>

<body>

<p><object code="clock.class"></object></p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег META, параметр code</title>

</head>

<body>

<p><object code="clock.class"></object></p>

</body>

</html>

Параметр CODEBASE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Путь к папке, где хранится файл с классом указанный в значении параметра code или classid. Атрибут codebase должен содержать только имя папки, а не файла.

Синтаксис

<object codebase="путь">...</object>

Аргументы

Путь к файлу с классом относительно текущего документа

Значение по умолчанию

Нет.

Пример 5. Использование параметра codebase

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег META, параметр codebase</title>

</head>

<body>

<p><object classid="clock.class" codebase="java_applets"></object></p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег META, параметр codebase</title>

</head>

<body>

<p><object classid="clock.class" codebase="java_applets"></object></p>

</body>

</html>

Параметр CODETYPE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Сообщает браузеру о типе объекта, который указан в параметре classid. Браузер может использовать эту информацию, чтобы подготовить необходимые ресурсы для воспроизведения файла. Если параметр codetype отсутствует, то рассматривается значение атрибута type, хотя он обычно и связывается с параметром data. В случае, когда не указаны оба параметра codetype и type, браузер получает данные о типе загружаемого файла самостоятельно.

Синтаксис

<object codetype="MIME-тип">...</object>

Аргументы

Имя MIME-типа в любом регистре.

Значение по умолчанию

Нет.

Пример 6. Использование параметра codetype

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег META, параметр codetype</title>

</head>

<body>

<p><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

codetype="video/quicktime"></object></p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег META, параметр codetype</title>

</head>

<body>

<p><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

codetype="video/quicktime"></object></p>

</body>

</html>

Параметр DATA

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

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

Путь к файлу определяется относительно папки, заданной атрибутом codebase. Если этого параметра нет, тогда путь следует задавать относительно текущего документа.

Синтаксис

<object data="URL">...</object>

Аргументы

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример 7. Использование параметра data

HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег META, параметр data</title>

</head>

<body>

<p><object data="movies/intro.mpg" type="application/mpeg"

width="300" height="200"></object></p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Тег META, параметр data</title>

</head>

<body>

<p><object data="movies/intro.mpg" type="application/mpeg"

width="300" height="200"></object></p>

</body>

</html>

Параметр HEIGHT и WIDTH

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

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

Если используется процентная запись, то размеры объекта вычисляются относительно родительского элемента — контейнера, где находится тег <OBJECT>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что объект будет занимать всю доступную ширину веб-страницы.

Синтаксис

<object height="ширина" width="высота">...</object>

Обязательные параметры

Да.

Аргументы

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Нет.

Параметр HSPACE и VSPACE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Для любого объекта можно задать невидимые отступы по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании объекта текстом, в этом случае необходимо вокруг него добавить пустое пространство.

Синтаксис

<object hspace="отступ по горизонтали" vspace="отступ по вертикали">...</object>

Аргументы

Любое целое положительное число в пикселах.

Значение по умолчанию

0

Параметр TYPE

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Сообщает браузеру о типе объекта, который указан в параметре data. Браузер может использовать эту информацию, чтобы подготовить необходимые ресурсы для воспроизведения файла.

Браузер вначале анализирует значение codetype, а в случае его отсутствия смотрит значение type. Если не указаны оба параметра codetype и type, браузер получает данные о типе загружаемого файла самостоятельно.

Синтаксис

<object type="MIME-тип">...</object>

Аргументы

Имя MIME-типа в любом регистре.

Значение по умолчанию

Нет.

2. Задачи технологии CGI. Место интерфейса CGI в процессе взаимодействия клиента и сервера.

Большое количество приложений основано на использовании внешних программ, управляемых Web-сервером. Такие приложения генерируют информацию динамически, выбрав её из баз данных или других источников. Для связи между Web-сервером и вызываемыми программами используется стандарт CGI (Common Gateway Interface – общий интерфейс шлюза).

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

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

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

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

Вот некоторые из них.

  • QUERY_STIRNG. Скрипты используют эту переменную для того, чтобы получить информацию в текстовой форме, которая следует справа от знака вопроса после URL,переданного в запросе от пользователя скрипту для обработки. Например, при запросе вида GET avalon.ru/index/html?a=1&b=3 HTTP/1.1 значение переменной QUERY_STIRNG = “a=1&b=3”.

  • REQUEST_METHOD используется для того, чтобы определить тип HTTP-запроса, который послан браузером серверу. Например, если браузер посылает запрос методом GET, то переменная окружения имеет следующее значение: REQUEST_METHOD = GET.

  • Переменная SCRIPT_NAME используется для того, чтобы определить путь к скрипту, который будет запузен сервером. Например, если имеется URL http://www.avalon.ru/our_site/somescript.php, то переменная окружения примет следующее занчение: SCRIPT_NAME = our_site/somescript.php.

  • Переменная HTTP_ACCEPT служит для того, чтобы определить, какие MIME-типы может принимать браузер. Они указаны в HTTP-заголовках, которые браузер послал серверу. Например, переменная окружения может принимать следующее значение: HTTP_ACCEPT = audio/mpeg, text/html, text/plain.

  • Переменная HTTP_USER_AGENT используется для того, чтобы идентифицировать тип браузера, который делает запрос серверу. Значение переменной получается из заголовков запроса клиента. Например: HTTP_USER_AGENT = Mozilla/2.01 Gold(Win95PE).

Данные из HTNL-формы передаются в сценарий в виде набора переменных. CGI-сценарий использует эти данные при выполнении программы.

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ № 6

1. Предыстория создания языка HTML. HTML как основа World Wide Web и подмножество языка SGML.

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.

HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 19911992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов (размечаемых «тегами»), служащих для создания относительно простых, но красиво оформленных документов. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE> предназначен для создания в документах самых обычных таблиц, однако стал использоваться для дизайна. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.

Постепенно HTML стал усложняться, стали добавляться новые теги и дескрипторы к ним, причём разные производители браузеров предлагали либо свои теги, либо их свою трактовку в обход соглашениям и рекомендациям W3C. Позднее проблема была относительно решена с появлением технологии CSS, но разная трактовка различных тегов браузерами, а иногда и просто банальные ошибки в написании браузеров всё же до сих пор усложняют написание веб-страниц.

2. Технология SSI.

Большинство страниц на сайте, несмотря на их разное содержание, имеет одинаковую структуру кода. Например, верхняя и нижняя часть документа практически не меняется от страницы к странице. В таком случае рекомендуется одинаковые фрагменты кода хранить в отдельных файлах и подключать их по мере необходимости. Однако традиционный HTML не позволяет делать подобные кунштюки, поэтому помочь здесь может SSI.

SSI (Server-Side Includes, включения на стороне сервера) позволяет добавлять контент во множество страниц, причем незаметно для пользователя. Это значит, что при запросе браузера определенного документа ему передается уже готовый, полностью сформированный код. Особенностью SSI является то, что это технология работает только под управлением веб-сервера, например, Apache.

Обычно веб-сервер проверяет на наличие встроенных команд не все файлы на сервере, а только с заданным расширением, как правило, shtml. Чтобы проверить, работает ли у вас SSI, создайте два файла в одной папке, один с именем index.shtml, а второй — content.html, как показано в примере 1.1.

Пример 1.1. Использование SSI

Файл index.shtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<!--#include file="content.html"-->

</body>

</html>

Файл content.html

<h1>Работает!</h1>

В данном примере содержимое файла content.html встраивается в файл index.shtml в том месте, где стоит команда <!--#include file="content.html"-->. Обратите внимание, что файл content.html не содержит никаких тегов вроде <HTML> и <BODY>, иначе они также будут добавлены в исходный документ.

Если посмотреть итоговый код документа, то мы увидим следующее (пример 1.2).

Пример 1.2. Код, полученный в результате использования SSI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<h1>Работает!</h1>

</body>

</html>

Если ваш сервер поддерживает SSI, то после открытия файла index.shtml, вы увидите надпись «Работает!». В том случае, когда написано нечто другое или вообще ничего нет, возможны два варианта.

1. Отображается надпись [an error occurred while processing this directive]. Это означает, что SSI работает, но в коде содержится ошибка. Например, добавлены лишние пробелы или указанного файла нет.

2. Ничего не отображается. Следует посмотреть исходный код документа, если в нем видна строка <!--#include file="content.html"-->, значит веб-сервер не поддерживает SSI или оно не распространяется на расширение shtml.

Расширение shtml не является обязательным, для веб-сервера Apache его можно поменять на любое другое с помощью конфигурационного файла .htaccess. Для этого в корне сайта создается обычный текстовый файл с именем .htaccess (без расширения и с точкой вначале). В этом файле следует набрать строку, как показано в примере 1.3.

Пример 1.3. Содержимое файла .htaccess

AddHandler server-parsed .html

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

Замечание

Расширение shtml позволяет четко отделять файлы с директивами SSI от обычных HTML-файлов. Если вы установите проверку всех документов, в том числе и без SSI, то при этом возрастет нагрузка на веб-сервер и несколько увеличится время загрузки файлов.

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

SSI поддерживает несколько директив, предназначенных для разных целей и расширяющих возможности по модификации веб-страниц.

Все директивы записываются в следующем виде.

<!--#директива параметр="значение"-->

Каждая директива начинается с ключевого набора <!--#, пробелы между символами не допускаются. После символа решетки идет указание директивы, а возможные параметры указываются через пробел.

Имена директив, которые используются в SSI, описаны далее.

Директива config

Позволяет управлять некоторыми опциями SSI, такими как задание формата вывода даты, времени, размера файла и установка текста сообщения о возникновении ошибки.

Параметр errmsg

errmsg устанавливает сообщение, отображаемое при возникновении ошибок. По умолчанию выводится текст [an error occurred while processing this directive], но вы можете поменять его на свой, да еще написав по-русски. Синтаксис следующий.

<!--#config errmsg="Сообщение об ошибке"-->

Параметр timefmt

Параметр timefmt устанавливает формат даты и времени для директивы flastmod. Синтаксис следующий.

<!--#config timefmt="формат"-->

Для контроля выводимой информации могут применяться следующие шаблоны.

%a - сокращенное название дня недели.

%A - полное название дня недели.

%b - сокращенное название месяца.

%B - полное название месяца.

%c - формат даты и времени по умолчанию.

%d - день месяца (от 01 до 31).

%D - дата в формате мм/дд/гг.

%e - день месяца без ведущего нуля (от 1 до 31).

%H - часы в 24-часовом формате (от 00 до 23).

%I - часы в 12-часовом формате (от 00 до 12).

%j - день года (от 001 до 366).

%m - номер месяца (от 01 до 12).

%M - минуты (от 00 до 60).

%p - выводит AM или PM в зависимости от времени и заданного формата.

%r - время с автоматическим добавлением AM или PM.

%T - время в формате чч:мм:сс.

%y - год (от 00 до 99).

%% - вывод символа %.

Разрешается совмещать между собой любые шаблоны, а также писать дополнительные символы. В примере 2.1 показано использование параметра timefmt.

Пример 2.1. Вывод даты и времени модификации файла.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<!--#config timefmt="Дата: %d-%m-%y, время: %T"-->

<!--#flastmod file="gtm.css"-->

</body>

</html>

В результате данного примера получим строку следующего вида.

Дата: 04-07-05, время: 19:24:09.

Параметр sizefmt

Параметр sizefmt определяет формат вывода размера файла. Синтаксис следующий.

<!--#config sizefmt="bytes | abbrev"-->

Значение bytes отображает размер файла в байтах (3,152), abbrev - в килобайтах (3k) или мегабайтах (6,1M), в зависимости от объема документа. В примере 2.2 показано использование параметра sizefmt.

Пример 2.2. Формат вывода размера файла

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<!--#config sizefmt="abbrev"-->

Объем файла musa.mp3 - <!--#fsize file="musa.mp3"-->

</body>

</html>

Директива include

Директива include вставляет содержимое другого файла в текущий документ. К файлу обязательно должен быть открыт доступ, иначе он не будет показан. У директивы include имеется два параметра: file и virtual.

Параметр file

Указывает путь к файлу относительно текущего документа. Можно использовать как текстовые файлы, так и HTML-документа, а также включать другие SSI-файлы (обычно с расширением shtml). Синтаксис использования следующий.

<!--#include file="URL"-->

Параметр virtual

Задает виртуальный путь к документу на сервере. Синтаксис следующий.

<!--#include virtual="URL" -->

Между параметрами file и virtual есть определенная разница. Если вы применяете путь к документам относительно корня сайта (такой путь характеризуется слешем вначале, например /file.html), то следует использовать параметр virtual. При указании относительного пути, следует воспользоваться параметром file (пример 2.3).

Пример 2.3. Путь к файлу

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<!--#include virtual="/inc/header.html"-->

<p>...</p>

<!--#include file="../inc/footer.html"-->

</body>

</html>

Директива echo

Директива echo предназначена для вывода значений переменных и даты, формат которой определяется параметром timefmt директивы config. У echo единственный параметр var, он определяет выводимое значение.

<!--#echo var="значение для вывода"-->

В примере 2.4 показано использование директивы echo для вывода переменной окружения.

Пример 2.4. Вывод значения переменной окружения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<!--#echo var="HTTP_USER_AGENT"-->

</body>

</html>

Директива fsize

Директива fsize отображает размер определенного файла. Формат вывода задается с помощью параметра sizefmt директивы config. Синтаксис использования следующий.

<!--#fsize file="URL" | virtual="URL"-->

Путь к файлу определяется с помощью параметров file или virtual, которые имеют те же функции, что и для директивы include.

Директива flastmod

Отображает дату последней модификации указанного файла. Формат даты устанавливается через директиву config и параметр timefmt. Синтаксис следующий.

<!--#flastmod file="URL" | virtual="URL"-->

Путь к файлу определяется с помощью параметров file или virtual, которые имеют те же функции, что и для директивы include.

Директива exec

Директива exec вставляет результат выполнения команды или CGI-программы в HTML-документ. Эта директива включает два параметра: cmd и cgi.

Параметр cmd

Запускает указанную командную строку с использованием локального интерпретатора.

<!--#exec cmd="команда"-->

Параметр cgi

Выполняет CGI-программу и результат ее выполнения вставляет в указанное место. В качестве параметра указывается адрес программы.

<!--#exec cgi="URL"-->

В примере 2.5 показано одно из применений параметра cgi.

Пример 2.5. Использование директивы exec

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<p>Всего прочитало эту страницу <!--#exec cgi="/cgi-bin/counter.cgi"-->

человек.</p>

</body>

</html>

В данном примере запускается программа counter.cgi, которая подсчитывает число посетителей данной страницы и записывает его в файл или в базу данных. После этого результат отображается в месте, где стоит строка <!--#exec cgi="/cgi-bin/counter.cgi"-->.

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

При использовании SSI общий синтаксис вывода определенной переменной окружения будет следующий.

<!--#echo var="переменная"-->

Некоторые переменные с их описанием перечислены в табл. 3.1. Заметьте, что все имена пишутся заглавными символами. Хотя это условие и необязательно, именно такая форма записи является традиционной и устоявшейся.

Табл. 3.1. Список переменных окружения

Переменная

Описание

DOCUMENT_ROOT

Путь к корневой папке сайта. Для локального веб-сервера значение может принимать вид z:/home/htmlbook.ru/www, а в других случаях зависит от операционной системы сервера и используемого программного обеспечения. Например, значение может быть следующим: /home/www/htmlbook.ru/htdocs.

GATEWAY_INTERFACE

Версия CGI (Common Gateway Interface, общий шлюзовый интерфейс). Значение обычно равно CGI/1.1.

HTTP_ACCEPT

Типы файлов, которые способен принять браузер. В качестве значения возвращается список поддерживаемых MIME-типов разделенных запятыми, например: text/xml, application/xml, text/html.

HTTP_CONNECTION

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

HTTP_HOST

Доменное имя сайта. Обычно различают имена с префиксом www (www.htmlbook.ru) и без него (htmlbook.ru). Переменная вернет тот адрес сайта, который указан в адресной строке браузера.

HTTP_REFERER

Адрес страницы, с которой пользователь перешел на данный сайт, он еще называется реферер.

HTTP_USER_AGENT

Идентификатор используемого браузера и операционной системы. В качестве значения возвращается строка, содержащая ключевые слова. Например, следующая строка Mozilla/5.0 (Windows; U; Windows NT 5.0; ru-RU; rv:1.7.8) Gecko/20050511 Firefox/1.0.4 говорит, что пользователь использует браузер Firefox 1.0.4 под операционной системой Windows 2000 (внутреннее название - Windows NT 5.0).

QUERY_STRING

Запрос, который указан в адресной строке после вопросительного знака (?). Обычно пишется в форме «переменная=значение», где переменные разделяются между собой амперсандом (&). Так, при написании адреса http://www.htmlbook.ru/?id=5&slv=34 будет возвращено значение id=5&slv=34.

REMOTE_ADDR

IP-адрес посетителя сайта.

REQUEST_METHOD

Метод получения данных. По умолчанию применяется метод GET.

REQUEST_URI

Адрес запрашиваемого документа. Отсчет ведется от корня сайта, т.е. для полного адреса http://www.htmlbook.ru/1.html вернется значение 1.html.

SERVER_ADDR

IP-адрес компьютера, на котором размещается сайт.

SERVER_ADMIN

Адрес электронной почты администратора сайта.

SERVER_NAME

Имя сервера.

SERVER_PORT

Порт, по которому ожидается получение данных на сервер.

SERVER_PROTOCOL

Протокол для получения и отправки данных. Значение обычно равно HTTP/1.1.

SERVER_SOFTWARE

Программное обеспечение установленное на сервере. Для веб-сервера Apache возвращается номер версии (Apache/1.3.27), а также версия PHP (PHP/4.3.6).

В примере 3.1 показано использование переменных окружения для отображения на веб-странице требуемой информации.

Пример 3.1. Вывод значения переменной DOCUMENT_ROOT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<p>Путь к корневой папке сайта: <!--#echo var="DOCUMENT_ROOT"--></p>

</body>

</html>

В результате выполнения примера будет выведена следующая строка.

Путь к корневой папке сайта: /home/htmlbook.ru/www

Значения переменных окружения можно посмотреть с помощью программы, написанной на языке программирования Perl (пример 3.2).

Пример 3.2. Вывод переменных окружения

#!/usr/bin/perl print "Content-type: text/html\n\n"; print "<html>\n<body>\n"; print "<table border=0 cellspacing=10 width=100%>\n";

print "<tr><td align=right valign=top>$a</td><td>$b</td></tr>\n" while ($a,$b) = each %ENV;

print "</table>\n"; print "</body>\n</html>\n";

В цикле while программа «пробегается» по хэшу %ENV и передает ключ и значение переменным $a и $b, которые выводятся в ячейках таблицы.

Область применения SSI достаточно обширна, эту технологию используют для автоматического добавления на веб-страницу содержимого другого файла, вывода значений переменных окружения, встраивания результата выполнения CGI-программ и т.д. Сразу следует оговорить, что достаточно сложный сайт лучше целиком делать с использованием серверного языка программирования или воспользоваться готовым «движком» —- автоматизированной системой по управлению содержанием сайта. SSI же в основном применяется для HTML-документов, чтобы упростить процесс их создания и расширить возможности. В то же время, понятие «сложный сайт» достаточно размыто, так что можно сделать вполне интересный и полезный ресурс исключительно с помощью HTML и SSI.

Далее рассмотрим некоторые аспекты применения SSI на практике.

Добавление на веб-страницу содержимого другого файла

Основное преимущество SSI заключается в том, что это технология позволяет вставлять содержимое текстового документа или HTML-файла в текущую веб-страницу. В случае добавления текстового файла, его содержимое вставляется без всякого форматирования. Для HTML-документа форматирование сохраняется, включая текст и теги.

Как правило, код HTML веб-страниц на сайте имеет повторяющуюся структуру. Например, верхняя часть («шапка») и нижняя часть («подвал») для всех веб-страниц остаются обычно неизменными. Логично было бы вынести их в отдельные файлы и подключать с помощью директивы include, как показано в примере 4.1.

Пример 4.1. Встраивание содержимого файла в текущий документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<!--#include virtual="/inc/header.html"-->

<p>Содержание текущей веб-страницы</p>

<!--#include virtual="/inc/footer.html"-->

</body>

</html>

В данном примере в текущий документ вставляется содержимое файла header.html и footer.html через директиву include. Параметр virtual задает путь к файлу относительно корня сайта.

Счетчик посетителей

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

Способ 1. Применение директивы exec

Для включения результата выполнения программы в текущую веб-страницу используется директива exec, как показано в примере 4.2. Значением параметра cgi служит путь к серверной программе.

Пример 4.2. Применение директивы exec

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<p>...</p>

<p>Статью прочитало, чел.: <!--#exec cgi="/cgi-bin/counter.cgi?id=5"--> </p>

</body>

</html>

В данном примере программе counter.cgi передается параметр id со значением 5. Этот параметр выступает в качестве идентификатора статьи. Таким образом, используется один файл для подсчета числа читателей, а меняется только идентификатор статьи.

Способ 2. Использование директивы include

Директива include может применяться не только для вставки HTML-файла в текущий документ, но и для вызова серверной программы (пример 4.3).

Пример 4.3. Использование директивы include

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>SSI</title>

</head>

<body>

<p>...</p>

<p>Статью прочитало, чел.: <!--#include virtual="/inc/counter.php?id=5"--> </p>

</body>

</html>

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

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

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ № 7

1. Причины и сущность кризиса кризиса языка HTML, сложившегося в середине 90-х гг. ХХ в. Пути выхода из кризиса: технология CSS.

Созданный в 1995 году HTML исключительно как язык разметки текста, содержащего только заголовки, абзацы и ссылки, очень быстро стал использоваться для того, для чего он не предназначался – дизайна веб-страниц. В него очень быстро стали внедрять новые теги, дескрипторы для тегов. Но, так как HTML изначально предназначался для другого, он со всеми дополнениями стал неточен, непредсказуем и непостоянен. Кроме того, коды страниц разрослись до недопустимых размеров, зачастую почти повторяющиеся для разных браузеров. И web-разработчики стали требовать от W3C создания новой технологии, на что консорциум ответил представлением каскадных таблиц стилей – CSS.

CSS при отображении страницы может быть взята из различных источников:

* Авторские стили (информация стилей, предоставляемая автором страницы) в виде:

o Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.

o Встроенных стилей — блоков CSS внутри самого HTML-документа.

o Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.

* Пользовательские стили

o Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.

* Стиль браузера

o Стандартный стиль, используемый браузером по умолчанию для представления элементов.

Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так:

селектор

{

свойство: значение;

свойство: значение;

свойство: значение;

}

Например:

p {font-family: "Garamond", serif;}

h2

{

font-size: 110 %;

color: red;

background: white;

}

.note

{

color: red;

background: yellow;

font-weight: bold;

}

p#paragraph1 {margin: 0;}

a:hover {text-decoration: none;}

#news p {color: blue;}

Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.

В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:

<p class="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

Эта технология позволила использовать для дизайна страниц вместо таблиц логические блоки (span или div), описывать один раз свойство много раз встречающихся абзацев текста, даже описывать свойства нескольких страниц в одном файле, что позволило сэкономить трафик в несколько раз. И даже избавиться от некоторых тегов, таких, как <font>. Появились целые технологии веб-дизайна, например, технология Зельдмана, которая состоит в том, что веб-страница делится на три вертикальных логических блока <div> . К сожалению, иногда приходится комбинировать блоки с таблицами из-за некорректной работы браузеров. Да и web-авторы слишком привыкли использовать атрибуты представления и таблицы для решения всех своих задач – от макетирования документа до визуального дизайна, лишь время от времени добавляя щепотку CSS.

2. Возможности web-сервера Apache. Основные параметры конфигурации сервера. Переменные окружения.

Apache HTTP-сервер (произносится /ə.ˈpæ.ʧi/, сокращение от англ. a patchy server) — свободный веб-сервер. С апреля 1996 и до настоящего времени является самым популярным HTTP-сервером в Интернете. По статистике Netcraft, в августе 2007 года он работал на 51 % всех веб-серверов[1], в апреле 2008 года — на 49 %[2].

Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, использовать СУБД для аутентификации пользователей, модифицировать сообщения об ошибках и т. д. Поддерживает IPv6.

Недостатком наиболее часто называется отсутствие удобного стандартного интерфейса для администратора[3].

Сервер был написан в начале 1995 года и считается, что его имя восходит к шуточному названию «a patchy» (англ. «заплаточный»), так как он устранял ошибки популярного тогда сервера Всемирной паутины NCSA HTTPd 1.3. В дальнейшем, с версии 2.х сервер был переписан заново и теперь не содержит кода NCSA, но имя осталось. На данный момент разработка ведётся в ветке 2.2, а в версиях 1.3 и 2.0 производятся лишь исправления ошибок безопасности.

Веб-сервер Apache разрабатывается и поддерживается открытым сообществом разработчиков под эгидой Apache Software Foundation и включён во многие программные продукты, среди которых СУБД Oracle и IBM WebSphere.

По-русски часто произносят апа́ч, хотя даже русское слово «апачи» в ед. числе остаётся «апачи».

Различия 1 и 2 версии: Версия 1 - Для каждого запроса создаётся новый процесс; Версия 2 - Для каждого запроса создаётся новый поток или процесс.

Многопоточность в UNIX

На UNIX системах, которые поддерживают потоки (нити) стандарта POSIX, Apache теперь может выполняться в гибридном многопроцессово-многопоточном режиме. Это способствует расширяемости системы для многих, но не для всех конфигураций.

Новая система сборки

Система сборки была полностью изменена, и теперь основывается на autoconf и libtool. Это делает процесс конфигурирования Apache более похожим на аналогичный процесс в других программных продуктах.

Поддержка различных протоколов

Apache теперь имеет специальную инфраструктуру, способную обслуживать различные протоколы. Модуль mod_echo был написан в качестве примера этому.

Улучшенная поддержка отличных от UNIX платформ

Apache 2.0 стал работать быстрее и надёжнее на отличных от UNIX платформах, таких как BeOS, OS/2 и Microsoft Windows. С введением новых специфичных для каждой платформы мульти-процессных модулей (MPMs) и библиотеки Apache Portable Runtime (APR), эти платформы теперь поддерживаются с помощью их собственных API, что позволяется избежать введения зачастую неправильно работающих из-за большого количества ошибок POSIX — эмулирующих слоёв.

Новый API для Apache

API для написания модулей значительно изменился в версии 2.0. Многие из проблем версии 1.3, связанные с порядком следования модулей и их приоритетами, должны исчезнуть. В версии 2.0 большая часть данной работы теперь делается сервером автоматически, а порядок следования модулей определяется отдельно в каждом хуке (hook), что делает процесс более гибким и конфигурируемым. Также были добавлены новые функции, которые предоставляют дополнительные возможности использования модулей, избавляя от необходимости внесения каких-либо изменений в ядро сервера.

Поддержка протокола IPv6

В системах, где протокол IPv6 поддерживается нижележащей библиотекой Apache Portable Runtime, Apache по умолчанию получает возможность слушать IPv6 сокеты. Вдобавок к этому директивы Listen, NameVirtualHost и VirtualHost могут работать с адресными строками, заданными в формате IPv6 (то есть например «Listen [2001:db8::1]:8080»).

Использование фильтров

Модули Apache теперь можно написать так, что они будут исполнять роль фильтров, обрабатывающих потоки данных, которые приходят или уходят из сервера. Это позволяет, к примеру, данным, являющимся результатом работы CGI-скрипта, быть обработанными SSI фильтром INCLUDES, предоставляемым модулем mod_include. Модуль mod_ext_filter позволяет внешним программам исполнять роль фильтров точно таким же образом, каким CGI программы действуют в качестве обработчиков (handlers).

Сообщения об ошибках на разных языках

Сообщения об ошибках, посылаемые браузеру, теперь представлены на нескольких языках и используют SSI технологию. Они могут быть легко отредактированы администратором под свои нужды.

Упрощенная конфигурация

Многие запутанные директивы были упрощены. Наиболее сбивающие с толку Port и BindAddress были убраны; для привязки к IP адресу используется только директива Listen; директива ServerName определяет имя сервера и номер порта теперь только для перенаправлений и работы с виртуальными хостами.

Поддержка юникода Windows NT

Apache 2.0 на Windows NT теперь использует кодировку utf-8 для работы с именами файлов. Это позволяет использовать нижележащую файловую систему, работающую в формате Unicode, что предоставляет поддержку сервером многоязычности для всех NT- систем, включая Windows 2000 и Windows XP. Это не распространяется на такие операционные системы, как Windows 95, 98 или ME, которые для обращения к файловой системе используют локальные кодовые страницы.

Новая библиотека для работы с регулярными выражениями

В состав Apache 2.0 была включена библиотека для работы с Perl-совместимыми регулярными выражениями (PCRE). Все регулярные выражения теперь используют более мощный синтаксис Perl 5.

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

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

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

Вот некоторые из них.

  • QUERY_STIRNG. Скрипты используют эту переменную для того, чтобы получить информацию в текстовой форме, которая следует справа от знака вопроса после URL,переданного в запросе от пользователя скрипту для обработки. Например, при запросе вида GET avalon.ru/index/html?a=1&b=3 HTTP/1.1 значение переменной QUERY_STIRNG = “a=1&b=3”.

  • REQUEST_METHOD используется для того, чтобы определить тип HTTP-запроса, который послан браузером серверу. Например, если браузер посылает запрос методом GET, то переменная окружения имеет следующее значение: REQUEST_METHOD = GET.

  • Переменная SCRIPT_NAME используется для того, чтобы определить путь к скрипту, который будет запузен сервером. Например, если имеется URL http://www.avalon.ru/our_site/somescript.php, то переменная окружения примет следующее занчение: SCRIPT_NAME = our_site/somescript.php.

  • Переменная HTTP_ACCEPT служит для того, чтобы определить, какие MIME-типы может принимать браузер. Они указаны в HTTP-заголовках, которые браузер послал серверу. Например, переменная окружения может принимать следующее значение: HTTP_ACCEPT = audio/mpeg, text/html, text/plain.

  • Переменная HTTP_USER_AGENT используется для того, чтобы идентифицировать тип браузера, который делает запрос серверу. Значение переменной получается из заголовков запроса клиента. Например: HTTP_USER_AGENT = Mozilla/2.01 Gold(Win95PE).

Данные из HTNL-формы передаются в сценарий в виде набора переменных. CGI-сценарий использует эти данные при выполнении программы.

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ № 8

1. Внутреннее устройство web-страницы. Статические и динамические страницы. Объекты, связанные с web – страницей.

Веб-страница, обрамляемая тегами <html>, состоит из заголовочной части, заключённой в теги <head>, и тела страницы, заключённого в теги <body>.

Заголовочная часть может состоять из названия страницы в тегах <title>, служебной информации в тегах <meta>, сценариев в тегах <script>, таблиц стилей в тегах <style> и некоторых других.

Тело страницы может состоять из таблиц <table>, заголовков <h1> -- <h6>, абзацев<p>, списков <ul>, <ol>, логических блоков <div>, <span>, рисунков <img/>, ссылок <a> и некоторых других, которые могут многократно вкладываться друг в друга самым причудливым образом.

Страницы, в зависимости от того, как они написаны, могут быть статическими и динамическими.

Если страница не изменяется при её просмотре пользователем, в неё не добавлена интерактивность, то страница является статической.

Если же в страницу при помощи дополнительных языков добавлена интерактивность или на странице размещены клипы, двигающиеся объекты, то она называется динамической. Существует несколько технологий создания динамических веб-страниц.

Во-первых, это написание сценариев на JavaScript – языке программирования, созданным для Netscape Navigator и позднее внедрённым в Internet Explorer. Мощности JavaScript, как правило, достаточно, чтобы написать простенькие программки для выполнения на странице.

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

В-третьих, это ActiveX – спецификация, разработанная Microsoft, которая позволяет запускать на странице обычные приложения Windows, написанные на C++, Бейсике и так далее. Эти приложения, называемые элементами управления, загружаются и устанавливаются один раз и навсегда. Но эта технология поддерживается только браузерами Internet Explorer.

В-четвёртых, это VBScript – созданный Microsoft язык написания сценариев, синтаксически аналогичный Бейсику, а по возможностям – JavaScript. Но в отличие от JavaScript, который признаётся всеми браузерами, VBScript поддерживается только в Internet Explorer.

В-пятых, это CGI (Common Gateway Interface – общий шлюзовой интерфейс) – спецификация, позволяющая запускаться программа на сервере, что и является главным отличием CGI от JavaScript. Программы CGI могут быть написаны многих языках программирования, Perl, C++, Бейсике и так далее.

В-шестых, это Flash – технология создания интерактивных веб-страниц в специальной программе от Adobe с подключением языка Action Script. Требует наличия на компьютере специальной программы Flash Player, но как показывает статистика, она стоит у 95% пользователей.

Ещё существуют технологии PHP, ASP, JSP, CFML.

Как показывает практика, наиболее популярными из всех технологий оказались JavaScript и Flash.

Окно браузера в DOM представляет собой объект windows, дочерними объектами которого являются document, history и location. Дочерними объектами объекта document являются все теги, расположенные на странице.

Объект history содержит такие важные функции, как go(n) – ссылка на страницу n в истории, back – ссылка на предыдущую страницу, forward – ссылка на следующую страницу, previous – ссылка на предыдущую страницу, next – ссылка на следующую страницу, current – ссылка на текущую страницу, length – длина списка сохранённых адресов.

Объект location содержит функции: href=”URL-address” – переход по указанной ссылке, protocol – определение протокола, reload – перезагрузка текущей страницы, replace – загрузка новой страницы без изменения истории в браузере.

Объект document содержит много функций, среди которых: URL – определения адреса текущей веб-страницы, title – определение заголовка веб-страницы, lastModified – определение даты последнего изменения страницы, write – отображение чего-либо на веб-странице, referrer – адрес предыдущей веб-страницы.

Основными свойствами и методами объекта являются: alert, confirm, prompt – диалоговые окна, status – предоставляет доступ к строке состояния.

2. JavaScript как язык программирования: идентификаторы, литералы, переменные, типы данных, операции, базовые конструкции. Создание и использование объектов.