Вначале расшифруем аббревиатуру SSI - Server Side Includes или, по-русски, - включения на стороне сервера.

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

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

Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации web-сервера, но в основном применяется именно *.shtml.

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

<!--#command param="value" -->

где # - признак начала SSI-вставки;
command - SSI-команда;
param - параметры SSI-команды.

SSI-команд насчитывается около десятка, но я расскажу только о самых употребляемых. Самая популярная команда - это команда включения содержимого одного файла в другой:

<!--#include virtual="/path/file.ssi" -->

где include - команда вставки;
virtual - параметр, определяющий, как трактовать путь - как абсолютный (file) или как относительный (virtual);
"/path/file.ssi" - путь к включаемому файлу.

Результатом ее выполнения будет вставка содержимого файла file.ssi в месте появления данной директивы. При просмотре сформированного исходника HTML-файла мы не увидим никаких признаков SSI, т.к. данный механизм действует абсолютно прозрачно для броузеров, они получают исключительно корректный HTML-код.

Следующая команда - это команда установки значения переменной:

<!--#set var="pic" value="picture.gif" -->

где var - команда установки значения переменной;
pic - имя переменной;
picture.gif - значение переменной.

В данном случае мы определили переменную с именем pic и присвоили ей строковое значение "picture.gif". Значение переменной pic теперь доступно внутри SSI-вставки, и мы можем его использовать по нашему усмотрению. Например, используя одну и ту же SSI-вставку, но с разными значениями определенной в ней переменной, мы получим различные результаты. Перед тем, как показать реальный пример использования переменных в SSI-включениях, я расскажу о некоторых командах, применяемых при работе с переменными. Во-первых, это команда печати значения переменной:

<!--#echo var="pic" -->

Ее выполнение приведет к тому, что в месте появления команды напечатается значение переменной pic, т.е. "picture.gif".

Переменная может участвовать в выражениях, в этом случае перед ней ставится знак '$', показывающий, что это именно переменная, а не просто текст. Вот пример:

<!--#set var="A" value="123" -->
<!--#set var="B" value="$A456" -->

После такого присвоения переменная B будет содержать строку "123456". Если же в текст понадобится просто вставить знак '$' или какой-нибудь из других специальных знаков, то его нужно предварить слешем, вот так: '\$'. В некоторых случаях для избежания двусмысленности значение переменной может быть заключено в фигурные скобки: "${A}".

Более сложное применение переменных возможно с использованием условных операторов, имеющих следующую форму написания:

<!--#if expr="condition" -->
<!--#elif expr="condition" -->
<!--#else -->
<!--#endif -->

где condition - условие для сравнения.

В зависимости от результатов проверки мы можем подставить тот или иной фрагмент кода. Допустим, мы можем проанализировать тип броузера пользователя и в зависимости от этого выдать либо код для Netscape Navigator-а, либо Internet Explorer-а. Это может оказаться полезным в некоторых случаях, когда невозможно сделать страничку, которая корректно отображалась бы в обоих броузерах. Вот пример использования условного оператора:

<!--#set var="Monday" -->
<!--#if expr="$Monday " -->
<p>Сегодня понедельник.</p>
<!--#else -->
<p>Что угодно, но не понедельник.</p>
<!--#endif -->

В данном случае условием проверки является существование переменной $Monday и, в зависимости от этого, подстановка того или иного HTML-кода.

Теперь давайте рассмотрим реальный пример применения SSI для формирования сложного документа из нескольких SSI-вставок. Вначале напишем текст основного HTML-документа, полагая, что SSI-вставки находятся в каталоге /ssi:

index.shtml

<!--#set var="title" value="Что такое SSI?" -->
<!--#set var="keywords" value="SSI, SHTML, CGI, Apache" -->
<!--#set var="description" value="Пример использования SSI." -->

<!--#include virtual="ssi/_header.shtml" -->

Здесь находится текст нашей странички.

<!--#include virtual="ssi/_footer.shtml" -->

Теперь напишем код для этих SSI-вставок:

_header.shtml

<html>
<head>
<title><!--#echo var="title" --></title>
<meta name="keywords" content="<!--#echo var="keywords" -->">
<meta name="description" content="<!--#echo var="description" -->">
</head>
<body>

_footer.shtml

</body>
</html>

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

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

Второе, не менее важное преимущество, - это возможность мгновенной замены дизайна сайта, не требующая переделывания страничек с информационным содержанием сайта. Для смены дизайна достаточно переписать SSI-вставки, формирующие внешний вид сайта. В нашем случае это файлы _header.shtml и _footer.shtml.

От себя:
Когда я начинал работать с чистым HTML я просто страдал, когда нужно поменять баннеры на страницах. Заменить новостные блоки. Или изменить меню на сайте, когда страниц более 30. И на каждой надо поменяить ссылку и заново качать на сервер. Используя SSI - эти проблемы полностью себя исчерпали. Теперья собираю страницу по частям.
1. Новости отдельно.
2. Меню отдельно.
3. Реклама отдельно.
4. И т.п.
Т.е. страница состоит полностью из частей и любой блок можно модернизировать отдельно.
Очень полезно когда Вы еще далеки от программирования на php, и писать порталы далеко не можете. Любые вопросы как же начать работать с SSI пишите к нам в гостевую для читателей.

Сперва нам необходимо создать простой скрипт. Допустим, HTML-страница содержит два элемента для ввода текста. В первый из них пользователь должен вписать свое имя, во второй элемент - адрес для электронной почты. Если пользователь ввел свое имя (например, 'Stefan') в первый элемент, то скрипт создает выпадающее окно с сообщением 'Hi Stefan!'.

Что касается информации, введенной в первый элемент, то Вы будете получать сообщение об ошибке, если туда ничего не было введено. Любая представленная в элементе информация будет рассматриваться на предмет корректности. Конечно, это не гарантирует, что пользователь введет не то имя. Браузер даже не будет возражать против чисел. Например, если Вы ввведете '17', то получите приглашение 'Hi 17!'. Так что эта проверка не может быть идеальна. Второй элемент формы несколько более сложнее. Попробуйте ввести простую строку - например Ваше имя. Сделать это не удастся до тех пор, пока Вы не укажите @ в Вашем имени... Признаком того, что пользователь правильно ввел адрес электронной почты служит наличие символа @. Этому условию будет отвечать и одиночный символ @, даже несмотря на то, что это бессмысленно. В Интернет каждый адрес электронной почты содержит символ @, так что проверка на этот символ здесь уместна.

Как скрипт работает с этими двумя элементами формы и как выглядит проверка?

<html>
<head>
<script language="JavaScript">
<!-- Скрыть

function test1(form) {
if (form.text1.value == "")
alert("Пожалуйста, введите строку!")
else {
alert("Hi "+form.text1.value+"! Форма заполнена корректно!");
}
}

function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Неверно введен адрес e-mail!");
else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Введите Ваше имя:<br>
<input type="text" name="text1">
<input type="button" name="button1"
value="Проверка" onClick="test1(this.form)">
<P>
Введите Ваш адрес e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2"
value="Проверка" onClick="test2(this.form)">
</body>
</html>

Рассмотрим сначала HTML-код в разделе body. Здесь мы создаем лишь два элемента для ввода текста и две кнопки. Кнопки вызывают функции test1(...) или test2(...), в зависимости от того, которая из них была нажата. В качестве аргумента к этим функциям мы передаем комбинацию this.form, что позже позволит нам адресоваться в самой функции именно к тем элементам, которые нам нужны. Функция test1(form) проверяет, является ли данная строка пустой. Это делается посредством if (form.text1.value == "")... . Здесь 'form' - это переменная, куда заносится значение, полученное при вызове функции от 'this.form'. Мы можем извлечь строку, введенную в рассматриваемый элемент, если к form.text1 припишем 'value'. Чтобы убедиться, что строка не является пустой, мы сравниваем ее с "". Если же окажется, что введенная строка соответствует "", то это значит, что на самом деле ничего введено не было. И наш пользователь получит сообщение об ошибке. Если же что-то было введено верно, пользователь получит подтверждение - ok.

Следующая проблема заключается в том, что пользователь может вписать в поле формы одни пробелы. И это будет принято, как корректно введенная информация! Если есть желание, то Вы конечно можете добавить проверку такой возможности и исключить ее. Я полагаю, что это будет сделать легко, опираясь лишь на представленную здесь информацию. Рассмотрим теперь функцию test2(form). Здесь вновь сравнивается введенная строка с пустой - "" (чтобы удостовериться, что что-то действительно было введено читателем). Однако к команде if мы добавили еще кое-чего. Комбинация символов || называется оператором OR (ИЛИ). Команда if проверяет, чем заканчивается первое или второе сравнения. Если хотя бы одно из них выполняется, то и в целом команда if имеет результатом true, а стало быть будет выполняться следующая команда скрипта. Словом, Вы получите сообщение об ошибке, если либо предоставленная Вами строка пуста, либо в ней отсутствует символ @. (Второй оператор в команде if следит за тем, чтобы введенная строка содержала @.)

Stefan Koch. Перевод Радик Усманов. www.citforum.ru/internet/koch/tutorial.htm