This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
ИНСТИТУТ «ОТКРЫТОЕ ОБЩЕСТВО» (ФОНД СОРОСА) Санкт-Петербургское отделение
ИНТЕРНЕТ-ЦЕНТР
В.В. Захаркина
Основы создания Web-страниц Методическое пособие
Санкт-Петербург 2000
2
Основы создания Web-страниц
Отказ от ответственности Несмотря на то, что были предприняты все усилия для того, чтобы данный документ был свободен от опечаток, ошибочных сведений и устаревших ссылок на ресурсы Интернет, Санкт-Петербургское отделение Института "Открытое общество" не несет никакой ответственности за убытки, как прямые, так и косвенные, которые могут быть вызваны использованием этого документа. Авторские права Данный документ может свободно распространяться для индивидуального использования в некоммерческих целях. Авторские права на данный документ принадлежат Санкт-Петербургскому отделению Института "Открытое общество". 2000 Институт "Открытое общество". С.-Петербургское отделение Все упомянутые торговые марки являются собственностью их владельцев.
Основы создания Web-страниц
3
Содержание ВВЕДЕНИЕ..................................................................................................................................................... 4 СТАНДАРТЫ ЯЗЫКА HTML........................................................................................................................... 4 БРАУЗЕРЫ ...................................................................................................................................................... 4 РЕДАКТОРЫ HTML-ДОКУМЕНТОВ ............................................................................................................... 5 ОСНОВЫ ЯЗЫКА HTML ........................................................................................................................... 6 СИНТАКСИС HTML-ТЕГОВ ........................................................................................................................... 6 СТРУКТУРА HTML-ДОКУМЕНТА .................................................................................................................. 7 АДРЕСАЦИЯ РЕСУРСОВ ................................................................................................................................. 7 ПРЕДСТАВЛЕНИЕ ЦВЕТОВ В HTML-ДОКУМЕНТАХ...................................................................................... 8 ГРАФИЧЕСКИЕ ФОРМАТЫ ............................................................................................................................. 9 ОСНОВНЫЕ ТЕГИ HTML ......................................................................................................................... 9 КОММЕНТАРИЙ ............................................................................................................................................. 9 СИМВОЛЬНЫЕ ПРИМИТИВЫ .......................................................................................................................... 9 ИНФОРМАЦИЯ О ДОКУМЕНТЕ В СЕКЦИИ ЗАГОЛОВКА ............................................................... 10 ЦВЕТА ТЕКСТА И ФОН ДОКУМЕНТА ............................................................................................................ 10 ФОРМАТИРОВАНИЕ ТЕКСТА........................................................................................................................ 11 Разбиение текста .................................................................................................................................. 11 Форматирование символов ................................................................................................................... 11 Форматирование абзацев...................................................................................................................... 12 Списки ..................................................................................................................................................... 13 Заголовки разных уровней внутри текста .......................................................................................... 13 ГРАФИЧЕСКИЕ ИЗОБРАЖЕНИЯ .................................................................................................................... 14 ГИПЕРССЫЛКИ............................................................................................................................................. 14 ТАБЛИЦЫ ..................................................................................................................................................... 15 ИЗОБРАЖЕНИЕ-КАРТА ................................................................................................................................. 17 КАДРЫ ......................................................................................................................................................... 18 Описание структуры набора кадров ................................................................................................... 19 Общий вид HTML-документа, задающего набор кадров ................................................................... 19 Дополнительные атрибуты тегов и ................................................... 21 Целевые кадры........................................................................................................................................ 21 НЕСКОЛЬКО СОВЕТОВ ................................................................................................................................. 22 ЛИТЕРАТУРА ............................................................................................................................................. 22
4
Основы создания Web-страниц
Введение Одним из основных сервисов Интернет сейчас с полным основанием можно считать службу World Wide Web (WWW). Информация в WWW представлена в виде так называемых гипертекстовых (или, более широко, гипермедийных) документов, которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты. Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши. Активными могут быть фрагменты текста, целые изображения и их части; щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа. Гипертекстовые документы для WWW представляют собой текстовые файлы, размеченные в соответствии со стандартами языка HTML (HyperText Markup Language - язык разметки гипертекста), командам которого посвящена значительная часть этого пособия. Говоря о таких файлах, употребляют разные термины: HTML-файл, HTML-документ, HTML-страница, Web-страница, WWWстраница и так далее. Совокупность HTML-файлов, посвященных определенной теме, оформленных в едином стиле и связанных друг с другом гиперссылками, представляют собой Web-сайт. Просмотр HTML-документов осуществляется с помощью программ-браузеров (от английского browser), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам.
Стандарты языка HTML Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами (от английского tag). Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа. Целый ряд тегов указывает браузеру, как надо отформатировать текстовый фрагмент (они задают размер, цвет, начертание, выравнивание текста). Другие теги определяют графическое оформление (фон документа, вставка изображений), задают активные зоны и т.д. Каждый из многих десятков тегов позволяет задать какие-то параметры отображения документа. Синтаксис и семантика языка HTML определяются в стандарте HTML. Стандарты разрабатываются на основании многочисленных предложений, проходят ряд стадий. Разработка проводится группой под эгидой World Wide Web Consortium (W3C). Информацию "из первых рук" о стандартах, рекомендациях и перспективах развития HTML можно найти в Интернет по адресу http://www.w3.org/MarkUp . Основными вехами на пути развития стандартов HTML можно считать принятие стандартов HTML 1.0, HTML 2.0, HTML 3.2. На момент написания этого пособия последней разработкой является стандарт HTML 4.01. Каждый вновь принимаемый стандарт предоставляет в распоряжение webмастера новые теги, позволяющие сделать HTML-документ эффективным и внешне привлекательным.
Браузеры В Интернет представлены разные типы информационных ресурсов, передача которых с компьютера на компьютер подчиняется определенным сетевым протоколам. Для гипертекстовых документов системы WWW это протокол http (HyperText Transfer Protocol - протокол передачи гипертекстов, то есть тех самых HTML-документов, о которых идет речь). Обмен данными между компьютерами согласно определенному протоколу организуется программами двух типов : программами-серверами и программами-клиентами. Браузер (от английского browser) - это программа-клиент. Программа-сервер обеспечивает хранение информационных ресурсов и выдачу их по запросам программ-клиентов. Программа-клиент (браузер) должна уметь формировать запросы серверу, принимать и интерпретировать для пользователя получаемую с сервера информацию.
Основы создания Web-страниц
5
За годы развития Интернет был создан целый ряд программ просмотра гипертекстовых документов, но сейчас с большой долей уверенности можно считать, что Ваша потенциальная аудитория использует либо Netscape Navigator фирмы Netscape Communications Corporation, либо Microsoft Internet Explorer фирмы Microsoft Corporation. Каждая из этих фирм постоянно развивает и дорабатывает свой браузер, выпуская все новые версии. В процессе создания новой версии браузера разработчики каждой из конкурирующих фирм, естественно, учитывают как рекомендации ныне действующего стандарта HTML, так и предложения по его развитию, особенно те предложения, которые выдвинуты данной фирмой. Результат очевиден: • браузеры разных фирм иногда по-разному интерпретируют теги в HTML-документе; • есть теги, поддерживаемые только браузерами конкретной фирмы; • браузеры устаревших версий “не понимают” тегов, соответствующих новым стандартам. В случае, когда в HTML-документе встречаются теги, неизвестные браузеру, он их просто игнорирует без всяких сообщений об ошибках. Таким образом, простой HTML-документ, не содержащий тегов, соответствующих последнему принятому стандарту HTML, скорее всего, будет адекватно отображен практически всеми браузерами. Применяя же новинки последнего стандарта, Вы, скорее всего, лишитесь существенной части потенциальной аудитории, которая в лучшем случае не сможет в полной мере насладиться изяществом оформления Вашего сайта, а в худшем - вообще не сможет получить никакой информации.
Редакторы HTML-документов Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (Notepad). Это очень поучительно, поскольку Вы поневоле изучите синтаксис HTML-тегов и прочувствуете особенности структуры HTML-документа, но при этом все теги придется вводить вручную. Очень удобен редактор Textpad, позволяющий в одном из своих режимов вставлять в текст HTMLтеги или символьные примитивы HTML из предлагаемого набора. Прекрасно реализованы в этом редакторе и многие другие возможности, необходимые при работе с HTML-документами. Некоммерческую версию программы можно получить на сервере www.textpad.com . Наиболее часто, все же, используют специализированные редакторы, предназначенные именно для подготовки HTML-документов. Отличаясь друг от друга спектром возможностей, предоставляемых разработчику, они обладают принципиально схожим интерфейсом, позволяя вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах. При этом разработчик видит документ таким, каким он будет при просмотре с помощью браузера. Возможны также просмотр и правка исходного текста HTML-документа. Особенно распространены HTML-редакторы фирм - разработчиков браузеров; на сегодняшний день это Netscape Composer и редакторы фирмы Microsoft FrontPage и FrontPage Express. Много новых возможностей по сравнению с ними предоставляют редакторы других фирм – например, популярные на момент написания данного пособия Macromedia Dreamweaver и Allaire Homesite. Пожалуй, стоит поработать со всеми этими редакторами, оценить их положительные и отрицательные стороны и выбрать тот, который Вам больше понравится. Не забывайте, что помимо возможностей, соответствующих стандарту HTML, редакторы могут предлагать к использованию и набор "своих" тегов, которые поддерживаются не всеми браузерами. Наконец, HTML-документ может быть получен преобразованием в HTML-формат, например, из формата документов пакета Microsoft Office 97 - 2000. Широко используемый текстовый редактор Microsoft Word, а также не менее популярные Microsoft Excel и Microsoft Access версий 97-2000 позволяют сохранить файл в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Надо отметить, что при таком преобразовании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции. Значительно эффективнее пользоваться специальными HTML - редакторами.
Основы создания Web-страниц
6
Основы языка HTML Исчерпывающее описание стандартов HTML и учебные пособия для начинающих web-мастеров можно найти как на многочисленных интернетовских сайтах, так и в печатных изданиях (некоторые ссылки приведены в разделе Литература). Здесь же ограничимся обзором базовых возможностей HTML.
Синтаксис HTML-тегов HTML-документ представляет собой текстовый файл, содержащий собственно текст, который должен быть отображен в окне браузера, и команды разметки - HTML-теги, определяющие внешний вид документа при их интерпретации браузером. HTML-тег записывается в угловых скобках (символы < >) и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен. Теги условно можно разделить на две группы. Теги одной группы (называемые также контейнерами) имеют два компонента: открывающий (начальный) и закрывающий (конечный); закрывающий компонент имеет то же название, но при записи перед названием ставится косая черта (символ /) . Между открывающим и закрывающим компонентами может располагаться текст документа и другие теги. Фрагмент документа, расположенный между открывающим и закрывающим элементом тегаконтейнера форматируется браузером согласно смыслу тега. Например, текст, расположенный между тегами и , будет выведен полужирным начертанием (название тега - от английского bold). Теги другой группы (называемые также автономными) не имеют конечного компонента. При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег , встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif . Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки; последовательность записи атрибутов несущественна. Подавляющее большинство атрибутов употребляются в виде пары название атрибута=значение атрибута. В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки. В закрывающих компонентах тегов атрибуты не указываются. Вот пример тега с атрибутами : Название атрибута Значение атрибута
Значение атрибута
Название атрибута Название тега
Встретив такой тег в HTML-документе, браузер интерпретирует его, выводя следующий за тегом текст символами, увеличенными относительно базового размера (SIZE=+2) и красного цвета (COLOR=RED) ; это форматирование текста применяется до тех пор, пока не встретится закрывающий тег . Регистр символов в записи тегов и атрибутов значения не имеет.
Основы создания Web-страниц
7
Структура HTML-документа Здесь приводится структура HTML-документа, не содержащего кадров (о кадрах см. раздел Кадры). HTML-документ заключается в теги и . Между этими тегами располагаются две секции: секция заголовка (между тегами и ) и секция тела документа (между тегами и ). Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и теги, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее. Вот самый простой HTML-документ : Самый простой HTML-документ
Браузер отобразит этот документ, выведя в своем окне строку "Самый простой HTML-документ", расположенную в секции тела документа. Секция заголовка пуста, что не является синтаксической ошибкой, хотя на практике, конечно, в этой секции следует задавать определенную информацию (см. раздел Информация о документе в секции заголовка ). В теге могут быть указаны атрибуты, определяющие цвета текста и фон документа (см. раздел Цвета текста и фон документа).
Адресация ресурсов Местоположение информационных ресурсов в WWW может быть определено в абсолютной и относительной форме. Адресация в абсолютной форме используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL (Uniform Resource Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере, это протокол http. Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ /); в именах файлов и каталогов различаются прописные и строчные буквы; пробелы не допускаются. Вот примеры URL: http://www.ecosafe.nw.ru/tspm/win/welcome.html Путевое имя файла Доменное имя компьютера Сетевой протокол
http://195.21.123.13:81100 ftp://everything.com/soft/prog.zip mailto:[email protected] Последний URL, указывающий на протокол mailto и адрес электронной почты, стоит особняком в ряду других, поскольку не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты (символы // ).
Основы создания Web-страниц
8
Адресация в относительной форме используется при ссылках на ресурсы, находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ /) ; переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы .. ). Чтобы было понятнее, представим себе компьютер, например, с такой структурой каталогов, содержащих HTML-файлы: Win1251
start.htm books.htm
Nature Flora
forest.htm river.htm
Fauna
fox.htm hare.htm
Town
ecology.htm people.htm
Адрес файла fox.htm относительно start.htm :
Fauna/fox.htm
Адрес файла fox.htm относительно forest.htm :
../Fauna/fox.htm
Адрес файла ecology.htm относительно fox.htm :
../../Town/ecology.htm
При адресации WWW-ресурсов (то есть HTML-документов) есть возможность ссылаться и на фрагменты HTML-документов в виде http://www.ecosafe.nw.ru/tspm/win/ Science.htm#new ,
где после символа # указывается заранее определенный идентификатор фрагмента (метка) документа (см. раздел Гиперссылки ).
Представление цветов в HTML-документах В HTML-документе существует возможность указывать цвет фона документа, фона ячеек таблиц и цвета текстовых фрагментов, в частности, цвета гиперссылок (обычных, активных и посещенных). Значения цвета можно задавать в одной из двух форм. Первая форма использует задание цветов в RGB-палитре (Red-Green-Blue). При этом код цвета указывается как шестиразрядное шестнадцатеричное число, задающее интенсивность красной (первые две цифры), зеленой (следующие две цифры) и голубой (последние две цифры) составляющей. Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. Очевидны коды черного (000000) и белого цветов (FFFFFF), а также ярко-красного, ярко-зеленого и яркосинего (FF0000, 00FF00 и 0000FF). Миллионы оттенков (а именно, 166 = 16777216) могут быть заданы с помощью RGB-триады. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ #. Возможно и задание цветов с помощью имен. Microsoft Internet Explorer поддерживает 16 стандартных имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white) , а Netscape Navigator - несколько сотен. В Netscape Navigator представлены, например, такие оттенки синего: blue (5 вариантов), cornflowerblue, darkblue, darkslateblue, deepskyblue, dodgerblue, lavender, lightblue (5 вариантов), lightskyblue (5 вариантов), lightslateblue, lightsteelblue (5 вариантов), mediumblue, mediumslateblue, midnightblue, navy, navyblue, powderblue, skyblue (5 вариантов), slateblue (5 вариантов), steelblue (5 вариантов), royalblue (5 вариантов). Каждому названию цвета соответствует определенная RGB-триада, например, цвету "navy" соответствует "#000080".
Основы создания Web-страниц
9
Несмотря на принципиальную возможность задать миллионы цветов, надо учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра. В этой палитре браузер подберет цвет, наиболее близкий к заданному.
Графические форматы Браузеры поддерживают три графических формата: • GIF - Graphic Interchange Format . При сохранении изображения в этом формате количество используемых цветов не должно превышать 256. Обычно этот формат используют для небольших изображений, содержащих области однородной окраски с четкими границами. • Формат GIF позволяет создать прозрачные фрагменты изображения. Кроме того, этот формат поддерживает анимацию. • JPEG (JPG) - Joint Photography Experts Group . Этот формат допускает сохранение изображений, содержащих миллионы цветов, с тонкими цветовыми переходами. Например, фотографии обычно сохраняются в формате JPEG. • Изображения в этом формате не могут иметь прозрачных областей. • PNG - Portable Network Graphics. Этот формат является развитием формата GIF; обладая всеми его преимуществами, не имеет ограничений в количестве используемых цветов. • Формат PNG пока не поддерживается браузерами, хотя дополнительные модули поддержки для ведущих браузеров можно свободно получить, например, по адресу : http://www.group42.com/develop.htm . • Несмотря на приведенные общие характеристики графических форматов для WWW, выбрать оптимальный для конкретного изображения формат зачастую можно только экспериментальным путем. При этом преследуется основная цель: достичь хорошего качества изображения при минимальном размере файла.
Основные теги HTML В этом разделе приводится описание ряда наиболее часто использующихся тегов, соответствующих стандарту HTML 3.2.
Комментарий Текст комментария размещается в теге и не отображается в окне браузера.
Символьные примитивы Символы < , >, " и & являются специальными символами HTML; при необходимости использовать их в тексте, отображаемом браузером, следует применять символьные примитивы: символ < > & "
Информация о документе в секции заголовка В секции заголовка указывается информация о документе, которая используется при его отображении. Синтаксически не является необходимым, но на практике обязательно должен быть задан заголовок документа. Текст, заключенный между тегами <TITLE> ... , отображается в заголовке окна браузера. Фактически, это первая информация о содержании документа, которую видит пользователь еще до загрузки документа. Заголовок должен быть достаточно кратким и в то же время емким, отражать суть документа и заинтересовывать потенциальную аудиторию. В секции заголовка обычно помещается и ряд тегов <META> с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о документе. Обязательным для тега <META> является атрибут CONTENT, в котором указывается значение метаинформации. В качестве второго атрибута может использоваться атрибут HTTP-EQUIV (эквивалентное HTTP-имя метаинформации, которое будет включено в HTTP-заголовок HTML-документа при передаче его клиенту) либо атрибут NAME, задающий имя метаинформации. Вот примеры метаинформации, задаваемой в секции заголовка: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
- указывается тип кодовой таблицы (windows-1251, Koi8-R и другие), использованной при подготовке текстовой части документа; включая подобные теги в документ, Вы избавляете свою аудиторию от необходимости настраивать браузер на конкретную кодировку кириллицы. <META NAME="Author" CONTENT="Valentina Zakharkina"> - указывается автор WWW-страницы. <META NAME="GENERATOR" CONTENT="Mozilla/3.01Gold (Win95; I) [Netscape]"> - указывается программа - редактор HTML-страницы. <META NAME="KEYWORDS" CONTENT=" фракталы,множество системы,fractal,Mandelbrot set,dynamical systems">
Мандельброта,динамические
- указывается через запятую набор ключевых слов, которые могут быть использованы рядом
поисковых систем. <META NAME="DESCRIPTION" CONTENT="Представляем информацию о творчестве учеников средней школы №1 города Великие Луки”>
- приводится краткое описание содержания сайта.
Цвета текста и фон документа Цвет основного текста, цвета гипертекстовых ссылок и фон документа описываются в начальном теге тела документа с помощью атрибутов : TEXT=цвет
цвет основного текста документа
LINK= цвет
цвет непосещенных гиперссылок
VLINK= цвет
цвет посещенных гиперссылок
ALINK= цвет
цвет активных гиперссылок (вспыхивает на мгновение при щелчку мыши по гиперссылке)
BGCOLOR= цвет
цвет фона документа
BACKGROUND=url
адрес графического файла, используемого при создании фонового изображения
Все перечисленные атрибуты необязательны, однако их всегда стоит указывать, чтобы цветовая гамма документа не зависела от умолчаний браузера. Фоновое изображение обычно выбирают небольшим по размеру; браузер помещает его в левый верхний угол окна документа и копирует, распространяя мозаикой по горизонтали и вертикали, пока не будет заполнено все пространство окна. Это, например, дает возможность создания различных
Основы создания Web-страниц
11
полосатых и клетчатых фонов с помощью элементарных графических изображений. Чуть сложнее создать текстурный фон: тут придется немного поэкспериментировать с маленькими образцами фона, чтобы не было заметно "стыков". Если указан атрибут BACKGROUND, отменяется цвет фона, заданный в BGCOLOR.
Форматирование текста Разбиение текста Отображение текста HTML-документа браузером имеет ряд особенностей. Текст выводится в окно браузера слово за словом; при достижении правой границы окна очередное слово переносится на новую строку. Таким образом, по умолчанию (если не использованы специальные теги форматирования, например, ), горизонтальной полосы прокрутки не появляется. Вертикальная полоса прокрутки появляется, если документ не умещается в видимой части окна. Весь так называемый пробельный материал (последовательно идущие пробелы, символы табуляции, символы перевода строки) отображаются браузером как один пробел. Например, если содержимое секции имеет вид Попытаемся и переводы
вывести
лишние пробелы
строки
то в окне браузера будет выведен текст без лишних пробелов и перевода строки : " Попытаемся вывести лишние пробелы и переводы строки ". Для того, чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги. Именно :в • каждый символьный примитив HTML-документа
воспринимается как один пробел;
например, текст
шесть пробелов
будет выглядеть как "шесть
пробелов"
• Тег (от английского break) разрывает текстовый поток и вставляет новую строку. Несколько последовательных тегов интерпретируются как несколько пустых строк. Межстрочный интервал одинарный. Закрывающего компонента тег не имеет. • Тег
(от английского paragraph) начинает абзац с новой строки; новый абзац отделяется от предыдущего двойным межстрочным интервалом. Абзац пустым быть не может, то есть несколько последовательных тегов
интерпретируются как один (в отличие от тега ). Закрывающий компонент
не обязателен. Тег
имеет необязательный атрибут, указывающий на вид выравнивания абзаца (см. раздел форматирование абзацев). • Текст, заключенный между тегами и (от английского preformatted), отображается так, как он был отформатирован предварительно, со всеми пробелами и переносами строк.
Форматирование символов Теги форматирования символов подразделяют на две группы: теги физического форматирования (типографские элементы) и логического форматирования (идиоматические элементы). Все эти теги имеют как открывающий, так и закрывающий компонент. Многочисленные теги несут разную смы-
12
Основы создания Web-страниц
словую нагрузку, но отображение текста, заключенного между открывающим и закрывающим компонентами, не столь разнообразно. Вот наиболее употребительные из этих тегов : Логическое форматирование:
Полужирным шрифтом отображается текст, заключенный между тегами : <STRONG> ...
(сильное выделение)
Курсивом (наклонным шрифтом) отображается текст, заключенный между тегами : ...
(определение)
<EM> ...
(выделение)
...
(цитата)
...
(переменная)
Моноширинным щрифтом отображается текст, заключенный между тегами : ...
(программный код)
Физическое форматирование:
Полужирным шрифтом отображается текст, заключенный между тегами : ... (от английского bold) Курсивом (наклонным шрифтом) отображается текст, заключенный между тегами : ... (от английского italic) Моноширинным щрифтом отображается текст, заключенный между тегами : ... (от английского TeleType) Подчеркнутым отображается текст, заключенный между тегами : ... (от английского underline) Перечеркнутым отображается текст, заключенный между тегами : <S> ... (от английского strikethrough) Как нижний индекс отображается текст, заключенный между тегами : <SUB> ... (от английского subscript) Как верхний индекс отображается текст, заключенный между тегами : <SUP> ... (от английского superscript) Параметры шрифта
Текст, заключенный между тегами ... имеет размер, цвет и гарнитуру, задаваемую атрибутами SIZE = значение
размер; задается либо в форме абсолютного значения (число от 1 до 7), либо относительно размера основного шрифта (в форме +n или -n).
COLOR = цвет
цвет.
FACE = список шрифтов
предпочтительные гарнитуры для отображения текста; названия перечисляются через запятую, например, FACE="Verdana,Helvetica,Arial,Sans-Serif"
Форматирование абзацев Фактически, форматирование абзацев, предусмотренное в стандартах HTML, сводится лишь к выравниванию Вид выравнивания может быть задан следующими тегами:
Основы создания Web-страниц
13
...
(абзац - см. Разбиение текста) и ... (раздел) с помощью атрибута ALIGN, который может принимать значения LEFT, CENTER и RIGHT , задающие выравнивание по левому краю, центру и правому краю окна браузера. По центру будет выровнен и текст, заключенный в теги ... . Применение закрывающего компонента для всех этих тегов, вообще говоря, не обязательно. Если закрывающего компонента нет, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, либо до конца документа.
Списки HTML позволяет создавать нумерованные (упорядоченные), маркированные (неупорядоченные) списки, а также так называемые списки определений (используются редко). Фрагмент текста, представляющий собой список, заключается в теги: ...
упорядоченный список (от английского ordered list)
...
неупорядоченный список (от английского unordered list)
...
список определений (от английского definition list)
Каждый элемент упорядоченного или неупорядоченного списка заключается в теги
...
(от английского list item). Элементы списка определений заключается в теги ... (термин) либо .. (определение). При выводе текста браузер располагает каждый элемент списка с новой строки, предваряя его номером либо маркером в случае упорядоченного или неупоядоченного списка. В списке определений текст, заключенный между тегами ... , сдвигается на некоторое количество позиций (в разных браузерах по-разному) вправо относительно остального текста. Это свойство можно с успехом использовать и в том случае, когда по существу никакого списка нет, а просто надо сдвинуть ряд строк правее основного текста. Допустимы вложенные списки. Тег имеет необязательные атрибуты : TYPE = формат
формат нумерации; может иметь значения: 1
арабские цифры (по умолчанию)
A
прописные буквы a
START = значение
строчные буквы
I
большие римские цифры
i
маленькие римские цифры
первый номер в списке (по умолчанию 1)
Тег
имеет необязательный атрибут TYPE = формат
формат маркера; может иметь значения: Disc
диск (по умолчанию)
Circle
окружность
Square
квадрат
Заголовки разных уровней внутри текста Теги вида ... оформляют заключенный в них текст в виде заголовка уровня n. Значения n могут изменяться от 1 до 6. Заголовок высшего уровня выводится наиболее крупным шрифтом.
14
Основы создания Web-страниц
Теги , , ... , могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), RIGHT и CENTER.
Графические изображения Тег вставляет изображение в текстовый поток. Закрывающего компонента этот тег не имеет. Обязательный атрибут: SRC = url
адрес графического файла
Основные необязательные атрибуты: ALT = текст
альтернативный текст, выводимый в режиме браузера без загрузки изображений
BORDER = значение
толщина обрамляющей рамки в пикселах; 0 означает отсутствие рамки (по умолчанию)
HEIGHT = значение
высота изображения в пикселах (по умолчанию оригинальная) либо в процентах от высоты окна браузера
WIDTH = значение
ширина изображения в пикселах (по умолчанию оригинальная) либо в процентах от ширины окна браузера
HSPACE = значение
свободное пространство слева и справа от изображения в пикселах
VSPACE = значение
свободное пространство сверху и снизу от изображения в пикселах
ALIGN = значение
выравнивание изображения по горизонтали или вертикали. Значения TEXTTOP, ABSCENTER, CENTER, BOTTOM, ABSBOTTOM обеспечивают различные варианты вертикального выравнивания относительно текстовой строки; при применении этих значений вставленное изображение разрывает текстовый поток. Если заданы значения LEFT либо RIGHT, изображение соответствующим образом будет выровнено по горизонтали; задание этих значений обеспечивает обтекание изображения текстом
USEMAP = #имя
указывается имя, задаваемое в теге MAP, задающем в данном изображении области, чувствительные к щелчку мыши
Несмотря на то, что формально обязательным является только атрибут SRC, на практике необходимо следует указывать и альтернативный текст (атрибут ALT). Ведь многие работают с браузером в режиме без загрузки изображений, особенно когда связь плохая, и документ загружается долго. К тому же, до сих пор существуют браузеры, не поддерживающие графики. Значения атрибутов BORDER, HEIGHT и WIDTH тоже лучше указывать явным образом, не полагаясь на умолчания. Само наличие атрибутов HEIGHT и WIDTH говорит о возможности масштабирования исходного изображения. Увеличивать исходное изображение обычно бессмысленно, поскольку это ведет к потере качества. Масштабирование изображений в сторону увеличения применяется в особых случаях, когда необходимо вывести цветные полосы либо прозрачные "распорки" строго определенной ширины и высоты. При этом достаточно изготовить изображение размером 1х1 пиксел (нужного цвета или прозрачное) и вставить в документ, задав необходимые размеры. А вот сильно уменьшенные варианты изображений используют довольно часто, например, для создания каталога миниатюр, каждая из которых имеет гиперссылку на полномасштабное изображение.
Гиперссылки Связь между HTML-документами и фрагментами документов организуется с помощью тегов ... (от английского anchor - якорь). Тег употребляется в двух формах.
Основы создания Web-страниц
15
• В первом случае - при создании гиперссылки - обязательным является атрибут HREF = url
- адрес целевого документа.
Текст и изображения, размещенные между тегами ... , становятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута LINK тега (либо цветом по умолчанию). Из необязательных атрибутов здесь упомянем один: TARGET = имя
- имя кадра или окна для вывода целевого документа.
• Во втором случае - при создании якоря (метки) фрагмента - обязателен атрибут NAME = имя - имя идентификатора фрагмента. Созданный в некоторой точке документа якорь служит для того, чтобы была возможность ссылаться не на весь документ целиком, а на его фрагмент. При создании ссылки на этот фрагмент используется тег с атрибутом HREF. Имя идентификатора фрагмента дописывается к адресу целевого документа через символ #. Вот пример совместного использования якоря и гиперссылки. Представим себе длинный документ book.htm , состоящий из нескольких глав. Создадим в точке начала каждой главы метку-якорь и дадим этим меткам удобные имена, например: ....... Глава 1. ........ ....... Глава 2. ........
....... Теперь можно создать гиперссылки из этого же документа или из любого другого на указанные фрагменты. Приведем, например, гиперссылки на точку документа, с которого начинается Глава 2. Гиперссылка из того же документа : переход к Главе 2
Гиперссылка из другого документа, находящегося в том же каталоге: переход к Главе 2
Отметим, что тег позволяет сделать активной зоной текстовый фрагмент или изображение целиком; для того же, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег <MAP>, реализующий чувствительное изображение-карту (см. раздел Изображение-карта).
Таблицы Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью позиционирования фрагментов текста и изображений друг относительно друга. Действительно, помещая изображения и фрагменты текстов в ячейки таблицы с невидимой границей, можно добиться эффекта обтекания изображения текстом, расположить текст как многоколоночный и так далее. Основные теги, используемые для описания таблиц :
...
;
...
;
...
. Все табличные данные заключаются в теги
...
; описание каждого ряда ячеек заключается в теги
...
; содержимое каждой ячейки заключается в теги
...
. Таким образом, для описания, например, таблицы из двух строк (рядов), каждая из которых содержит две ячейки, придется создать следующую конструкцию:
16
Основы создания Web-страниц
содержимое 1-ой ячейки первой строки
содержимое 2-ой ячейки первой строки
содержимое 1-ой ячейки второй строки
содержимое 2-ой ячейки второй строки
Ячейки таблицы могут содержать любые данные, допустимые в HTML-документе, в частности, текст, изображения, текст с HTML-тегами; допустимы вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными; если по замыслу web-мастера какая-то ячейка должна выглядеть пустой, поместите в нее хотя бы неразрывный пробел . Ячейки, не содержащие данных, могут некрасиво выглядеть в Netscape Navigator : не отображается заданный фон и рамки ячеек. Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером (если не задан атрибут ячейки NOWRAP); текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку. Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты ROWSPAN и COLSPAN. Теги, описывающие таблицы, имеют много атрибутов; все они необязательны. Здесь упомянем те, которые одинаково поддерживаются браузерами Netscape Navigator и Microsoft Internet Explorer. Учтите, что даже при использовании лишь этих атрибутов таблицы могут по-разному выглядеть в разных браузерах. Следовательно, как и во многих других случаях, уверенность в качестве Вашего сайта даст только тестирование в разных браузерах. Атрибуты тега
задают параметры таблицы в целом: ALIGN = значение
Выравнивание относительно текстового потока; возможны значения left, right и center
BACKGROUND = url
Фоновое изображение для всей таблицы таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше)
BGCOLOR = цвет
Фоновый цвет
CELLPADDING = значение
Расстояние от границ ячейки до ее содержимого в пикселах
CELLSPACING = значение
Расстояние между ячейками в пикселах
HSPACE = значение
Свободное пространство слева и справа от таблицы в пикселах
VSPACE = значение
Свободное пространство сверху и снизу от таблицы в пикселах
WIDTH = значение
Ширина таблицы; задается либо в пикселах, либо в процентах от текущей ширины окна браузера; примеры: WIDTH=256 ; WIDTH=100%
Атрибуты тега
задают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге
, отменяются) . ALIGN = значение
Выравнивание содержимого ячеек ; возможны значения left, right и center
BACKGROUND = url
Фоновое изображение для ячеек данного ряда таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше)
BGCOLOR = цвет
Фоновый цвет для ячеек данного ряда
Основы создания Web-страниц
BORDER = значение
Толщина рамки, обрамляющей ячейки данного ряда; BORDER=0 - без обрамления
VALIGN = значение
Вертикальное выравнивание содержимого ячеек ; возможны значения top, center и bottom
17
Атрибуты тега
задают параметры данной ячейки (при возникновении противоречий атрибуты, заданные в тегах
и
, отменяются) . ALIGN = значение
Выравнивание содержимого ячейки ; возможны значения left, right и center
BACKGROUND = url
Фоновое изображение для ячейки таблицы (Microsoft Internet Explorer 3.0 и выше и Netscape Navigator 4.0 и выше)
BGCOLOR = цвет
Фоновый цвет для ячейки
BORDER = значение
Толщина рамки, обрамляющей ячейку; BORDER=0 - без обрамления
VALIGN = значение
Вертикальное выравнивание содержимого ячейки; возможны значения top, center и bottom
WIDTH = значение
ширина ячейки; задается либо в пикселах, либо в процентах от ширины таблицы;
ROWSPAN = значение
указывает количество строк, охватываемых ячейкой
COLSPAN = значение
указывает количество столбцов, охватываемых ячейкой
NOWRAP
при задании этого атрибута текст не располагается автоматически в ячейке; отображается лишь та его часть, что умещается в видимой части ячейки; может появиться горизонтальная полоса прокрутки.
При работе с таблицами учтите, что указанное значение атрибута WIDTH во многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).
Изображение-карта Иногда согласно дизайнерскому замыслу web-мастера в HTML-документ надо поместить изображение, отдельные части которого должны переводить по гиперссылке на разные целевые документы. Один из очевидных примеров такого изображения - географическая карта, щелкнув мышкой по определенным зонам которой, мы переходим к соответствующим документам. В этом случае организовать ссылку с использованием тега непосредственно нельзя, и приходится либо "разрезать" изображение на несколько отдельных, состыковать их и действовать обычным образом (см. раздел Гиперссылки), либо использовать тег <MAP>. У тега-контейнера <MAP> единственным обязательным артибутом является его имя NAME, которое должно быть использовано при описании атрибута USEMAP тега IMG , описывающего изображение, призванного служить картой (см. пример, приведенный ниже). Внутри контейнера <MAP> каждой чувствительной к перемещению мыши зоне изображения должен соответствовать тег с атрибутами: COORDS = список
список через запятую координат активной зоны (зависит от типа заданной формы зоны)
HREF = url
адрес целевого документа гиперссылки, связанного с указанной зоной
SHAPE = форма
возможные значения: circle (окружность – задается координатами центра и радиусом в пикселах) rectangle (прямоугольник - задается координатами левого верхнего и правого нижнего угла) polygon (многоугольник - задается координатами своих вершин)
Основы создания Web-страниц
18
NOREF
иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет
Пусть, например, у нас есть изображение russia.gif размера 358х194 пиксела и три HTML-документа, на которые надо организовать гиперссылки : peterburg.htm, moscow.htm и yakutsk.htm . Активными зонами изображения хочется сделать кружки, условно отмечающие местоположение на карте трех городов.
Центры кружков, если принять за точку отсчета (0,0) левый верхний угол изображения, находятся примерно на уровне (47,58) - Санкт-Петербург (координаты указаны на картинке) (46,82) - Москва (254,91) - Якутск. Логично в данном случае выбрать окружность в качестве формы активной зоны. Приняв, например, радиус этой окружности равным 8 пикселам (с избытком), реализовать гиперссылки можно с помощью следующего HTML-кода: <MAP NAME="mymap">
Кадры Кадры (фреймы – от английского frame) позволяют разбить окно браузера на области, в каждую из которых можно загрузить свой HTML-документ. При описании гиперссылок в этом случае есть возможность отобразить целевой документ в любом кадре из описанного набора. Структура HTML-документа, задающего набор кадров, отличается от простейшей, описанной в разделе "Структура HTML-документа". Секция по-прежнему присутствует, а вместо секции , описывающей содержание одного документа, используется конструкция, описывающая набор кадров. При этом используются два тега: ... - описывает структуру набора кадров; указывает, на сколько кадров и каких пропорций надо разбить окно браузера.
Основы создания Web-страниц
19
- для каждого кадра указывает, какой документ и с какими параметрами первоначально загружается в кадр.
Описание структуры набора кадров При описании структуры набора кадров в теге ... необходимо указать хотя бы один из атрибутов COLS или ROWS, значения которых определяют количество строк и столбцов в разбиении и размеры получающихся кадров. Размеры кадров (ширина и высота) могут быть определены тремя способами: - в пикселах; - в процентах от ширины либо высоты окна браузера; - каждый символ * в описании размеров интерпретируется как указание отвести для кадра равную часть от оставшегося пространства окна. Например, описание
задает разбиение окна на три столбца, первый из которых имеет ширину 50 пикселов, ширина второго составляет 30% от всей ширины окна, а остальное пространство отдается третьему столбцу. Описание
задает разбиение окна на четыре строки, первая из которых имеет высоту 20% от высоты всего окна, третья - 30% от высоты всего окна, а остальное пространство делится поровну между второй и четвертой строкой. Описание
задает разбиение окна на два столбца, ширина первого из которых составляет 30% от всей ширины окна, и на две строки, первая из которых имеет высоту 60% от высоты всего окна. Таким образом, получаются четыре кадра.
Общий вид HTML-документа, задающего набор кадров Описав структуру набора кадров с помощью тега , для каждого кадра надо определить тег , обязательный атрибут SRC которого задает адрес документа, первоначально загружаемого в кадр. Вот пример HTML-документа, описывающего набор кадров с минимальным набором атрибутов: <TITLE> Пример набора кадров
Основы создания Web-страниц
20
Обратите внимание на то, что тег не имеет закрывающего компонента. Здесь описаны четыре кадра соответствующих пропорций, в первые три из которых первоначально загружаются HTML-документы Frame1.htm, Frame2.htm и Frame3.htm, а в четвертый - графическое изображение из файла Picture.jpg. Кадры заполняются, начиная с верхнего левого, слева направо и сверху вниз, так что набор кадров в браузере имеет вид :
Изображение из файла Picture.jpg
Допустимы вложенные наборы кадров. Вот пример такого документа : <TITLE> Пример вложенных наборов кадров
Основы создания Web-страниц
21
Дополнительные атрибуты тегов и Тег имеет ряд необязательных атрибутов, настраивающих обрамление кадров. Эти атрибуты различны для браузеров Netscape Navigator и Internet Explorer, что затрудняет их применение, однако приведем основные. Для Netscape Navigator : BORDER = значение
толщина рамки, обрамляющей ячейку; по умолчанию 5 пикселов; BORDER=0 - без обрамления
BORDERCOLOR = цвет
цвет обрамления
FRAMEBORDER = значение
включение / выключение объемного обрамления; возможные значения : yes и no
Для Internet Exploreк : FRAMESPACING = значение
промежуток между кадрами в пикселах
FRAMEBORDER = значение
включение / выключение объемного обрамления; возможные значения : 1 и 0.
Те же атрибуты могут быть указаны и в теге для отдельного кадра; в этом случае они отменяют соответствующие атрибуты тега . Как видно, возможен конфликт этих атрибутов, например значения атрибута FRAMEBORDER различаются для разных браузеров. Ряд других атрибутов тега одинаково интерпретируются браузерами : SRC = url
адрес документа, первоначально загружаемого в кадр; обязательный атрибут
NAME = имя
имя кадра; используется при перенаправлении целевого документа по гиперссылке
SCROLLING = значение
полосы прокрутки выводятся в кадре всегда (yes), не выводятся (no), выводятся по необходимости (auto - по умолчанию)
NORESIZE
если указан этот атрибут, пользователь не сможет изменять заданные размеры кадра
MARGINHEIGHT = значение
сверху и снизу от кадра добавляется свободное пространство высотой в указанное количество пикселов
MARGINWIDTH = значение
справа и слева от кадра добавляется свободное пространство шириной в указанное количество пикселов
Целевые кадры Если помещенный в кадр документ содержит гиперссылки, то по умолчанию целевой документ загружается в тот же кадр. Умолчание можно изменить, указав имя кадра (атрибут NAME тега ) и использовав это имя в качестве значения атрибута TARGET тега (см. раздел "Гиперссылки"). Например, дополним описание уже упоминавшегося кадра :
Тогда, в каком бы кадре не находился документ, содержащий гиперссылку, целевой документ можно отобразить в этом кадре с помощью тега Если будет выбрана эта гиперссылка, документ New.htm будет загружен в кадр по имени main . Помимо имен, даваемых кадрам автором сайта, в качестве значения атрибута TARGET могут использоваться следующие зарезервированные имена :
Основы создания Web-страниц
22
• • • •
_blank - целевой документ загружается в новое окно браузера; _top - целевой документ загружается в то же окно, но поверх всех кадров, занимая полностью пространство окна; _parent - если документ с гиперссылкой находится во вложенном наборе кадров, то целевой документ загружается в родительское окно или набор кадров; _self - целевой документ загружается в тот же кадр (соответствует умолчанию).
Используя кадры, помните об особенностях гиперссылок : • Если атрибут TARGET не указан, целевой документ загружается по умолчанию в тот же кадр; • Если указано несуществующее имя кадра, открывается новое окно браузера, получая при этом заданное имя; • Для внешних ссылок следует задавать значения атрибута TARGET либо _top , либо _blank, чтобы чужие сайты не отображались в Ваших кадрах, а занимали полное окно. Пожалуй, не стоит злоупотреблять применением имени _blank , ибо часто пользователи не замечают, что открылось новое окно, незакрытые окна множатся и пользователь запутывается в них.
Несколько советов • • • • • •
Не увлекайтесь тегами, соответствующими последним стандартам; помните о владельцах устаревших версий браузеров. Тестируйте Ваш сайт по возможности в различных браузерах разных версий, при различных разрешениях экрана. Не полагаясь на умолчания, указывайте явным образом атрибуты тегов. Помните о кодировке кириллицы (см. раздел "Информация о документе в секции заголовка "). Прежде, чем использовать графические изображения, оцените размер файла. Если надо, потратьте время на обработку изображения, добиваясь приемлемого качества при минимальном размере файла; Работая с редактором HTML-документов, не забывайте посмотреть на исходный HTML текст; часто его необходимо подправить. Особенно следите за относительной адресацией ресурсов. Если Вы забыли сохранить документ перед тем, как вставлять в него изображения и гиперссылки, редактор использует абсолютную форму адресации (ссылаясь на систему каталогов Вашего компьютера). В таком случае при переносе сайта на другой компьютер гиперссылки перестают работать, изображения отсутствуют.
Литература Прежде всего надо попробовать самостоятельно поискать информацию в Интернет. Стоит задать поисковой системе ключевое слово "HTML", как Вы получите множество ссылок на описание стандартов HTML и учебников по HTML (в частности, по-русски). Задайте ключевое слово "texture" - и получите множество ссылок на сайты, предлагающих коллекции текстурных фонов. Задайте ключевое слово "GIF" - получите не только ссылки на коллекции анимированных GIF-ов, но и ссылки на некоммерческие программы анимации. Исчерпывающее описание стандартов HTML "из первоисточника" на английском языке можно найти в Интернет на сайте World Wide Web Consortium по адресу http://www.w3.org/MarkUp . На этом сайте приводятся и периодически обновляемые ссылки на переводы, в частности, на русский язык (http://www.w3.org/Consortium/Translation ). Прекрасное описание стандарта HTML 3.2 содержится в книге Стивена Спейнаура и Валери Куэрсиа "Справочник Web-мастера". В этой книге есть и глава, посвященная CGI, обзор HTTP, краткие справочники по языкам Perl и JavaScript, информация по конфигурации серверов. Настольной книгой web-мастера может служить бестселлер Дмитрия Кирсанова "Веб-дизайн" (СПб, Символ-Плюс, 1999).
Основы создания Web-страниц
23
Ну, а на сайте Интернет-центра Санкт-Петербургского отделения Института «Открытое общество» будут регулярно появляться небольшие конспекты учебных курсов, подобные данной методичке. Их версии в формате Word 97 и в формате HTML можно получить по адресу http://www.spb.osi.ru/IC/distant/default.htm
