Введение в HTML

Размещено на http://www.allbest.ru/

Введение в HTML



Введение

Язык разметки гипертекста HTML (hypertext markup language) словно бросает вызов тенденции последнего десятилетия - переходу к текстовым процессорам на графической основе WYSIWYG. Для тех, кто начал изучение персональных компьютеров уже после появления таких пакетов, как Microsoft Word for Windows, создание документов для системы World-Wide Web (WWW) "средствами" HTML может сначала показаться столь же естественным, как написание драйверов устройств на "тарабарском" языке времен детства. Ситуация усугубляется полным отсутствием высококачественных средств подготовки документов для HTML; даже лучшие HTML-редакторы до жалости примитивны по сравнению с любым распространенным текстовым процессором; далеко им и до мощных редакторов исходных текстов программ типа CodeWright или незабвенного Brief.

В то же время, для тех из нас, кто живо помнит эпоху редактора WordStar на компьютерах CP/M с 8-дюйм гибкими дисками или приобрел мучительный опыт работы с текстовыми редакторами системы UNIX, например nroff или TeX, задача подготовки документов в HTML покажется хорошо знакомой. Как и другие реликты времен компьютерного средневековья, язык HTML управляется командами и чувствителен к контексту.

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

Выглядит старомодно, не правда ли? Какие же все-таки болваны придумали эту World-Wide Web, совсем они без понятия, что ли? Но подождите... возможно, мы судим HTML по неправильным критериям; может быть, цель HTML не та, что у текстового процессора персонального компьютера. Представьте себе, что вы - один из сотрудников швейцарского банка (или ЦЕРНа - Европейского центра ядерных исследований) и хотите изобрести метод кодирования сложных гипермедиа- документов, в котором основное внимание было бы сосредоточено не на внешнем виде документа, а на его структуре. Вообразите, что такие документы должны восприниматься процессорами любой мыслимой архитектуры, операционными системами, сетями и устройствами массовой памяти разных видов. Предположим, что вы никак не можете предсказать возможности машины, на которой документ будет просматриваться или печататься, - ни минимальное разрешение экрана, ни число цветов, ни ассортимент шрифтов. При таких ограничениях скорее всего у вас получится что-нибудь весьма похожее на HTML.



1. HTML: ОБЩИЕ СВЕДЕНИЯ

Команды форматирования языка HTML, называемые управляющими кодами (tag), представляют собой просто зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше). Управляющие коды HTML нечувствительны к регистру в отличие от escape-последовательностей специальных символов HTML (к которым мы вернемся позже). В большинстве случаев управляющие коды используются симметричными парами, при этом завершающий код отличается от открывающего символом / (знак дроби). Например, если у нас есть гипотетический атрибут форматирования текста, управляемый кодом <X>, и мы хотим применить его к словам "Это мой текст", HTML-последовательность кодов и собственно текста будет выглядеть так: <X>Это мой текст</X>

Данная схема симметричных управляющих кодов во многом похожа на их использование в стандартном обобщенном языке разметки текста SGML (Standard Generalized Markup Language); и действительно, на разработчиков HTML сильно повлияло их знакомство с SGML. Однако HTML не младший брат SGML, это скорее его малость придурковатый кузен. HTML можно втиснуть в рамки определения типа документов (DTD) языка SGML, однако в нем реализованы все возможности, которые дает SGML. И это к лучшему, поскольку средства редактирования SGML по-прежнему можно найти главным образом на мощных рабочих станциях, а цена их такова, что побледнеет любой администратор сети персональных компьютеров.

Сейчас в World-Wide Web сосуществуют три различных версии или уровня HTML. Версии 0.9 или 1.0 (с ними совместима программа просмотра Mosaic, версия 1.0.3) в основном сосредоточиваются на управлении заголовками, списками и форматировании символов. Команды HTML, которые обсуждаются в этой статье, взяты в основном из версии 1.0; они легки в освоении и использовании, и на первые несколько месяцев вашей публикаторской деятельности в Web их, видимо, хватит. Для целей нашего обсуждения я разобью команды HTML 0.9/1.0 на восемь категорий:

команды структуры определяют документ HTML в целом и указывают начала и концы его логических частей;

команды форматирования текстового потока отмечают концы абзацев, принудительные переводы строки, заголовки, сдвинутый (indented) или предварительно сформатированный текст и т. п.;

команды форматирования заголовков обеспечивают оформление заголовков и подзаголовков шести различных уровней;

команды форматирования символов применяются к "физическому" или "логическому" стилю потока символов;

команды форматирования списков применяются для оформления списков нескольких видов;

escape-последовательности специальных символов используются для вывода на экран знаков, которых нет в наборе ASCII; символов, которых нет на клавиатуре автора текста; символов, которые были бы интерпретированы как команды HTML;

команды вставки графики определяют внешние файлы как графические ресурсы для вставки в текст документа и совместного их вывода программой просмотра Web;

команды связей (anchor) создают гипертекстовые связи или служат как отметки мест назначения для этих связей.

В версии 2.0 HTML, с которой совместимы такие программы просмотра Web второго поколения, как Netscape Navigator 1.0 или MacWeb фирмы EINet Galaxy, добавлены команды для меню и интерактивных форм. Варианты версии 2.0 Mosaic для Windows и Macintosh, которая должна стать первой версией, предусматривающей работу с формами, все еще проходят бета-тестирование, однако система Netscape так активно вытесняет Mosaic, что отставание группы разработки системы Mosaic уже мало кого волнует. Преобладание Netscape Navigator 1.0 означает, что можно смело гарантировать - пользователя будет доступ к операциям с формами и вы можете свободно использовать команды форм в документах HTML.

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

2. КОМАНДЫ СТРУКТУРЫ

Три самых важных управляющих кода HTML данной категории - <HTML>, <HEAD> и <BODY>. Они передают программе просмотра Web основную информацию для идентификации и организации документа.

Управляющие коды <HTML> и </HTML> помещаются соответственно в начале и конце всего документа, чтобы обозначить текст как действительный документ на языке разметки гипертекста. Говоря точнее, эти коды ограничивают ту часть документа, которую должна обработать и отобразить программа просмотра Web. На самом деле ни одна из существующих программ просмотра не требует кодов <HTML> и </HTML> и никак их не интерпретирует; однако стоит привыкнуть ставить их во избежание проблем в будущем, когда программы просмотра и редакторы HTML станут сложнее.

Между кодами <HEAD> и </HEAD> помещается раздел заголовка документа. Новички HTML часто неправильно его используют. Важно отметить, что никакой элемент данного раздела не появляется в прокручиваемой, или клиентской, области окна программы просмотра Web. Между кодами <HEAD> и </HEAD> разрешается использовать только несколько других кодов, и единственная пара среди них, которая сейчас может представлять для вас интерес, - это <TITLE> и </TITLE>.

Когда текст обрамляется кодами <TITLE>, программа просмотра Web выводит его на панель заголовка соответствующего окна. Что еще важнее, если пользователя заинтересовал один из ваших документов и он хочет добавить его в "горячий список" hotlist в Mosaic или "заложить закладкой" (bookmark) в Netscape, для включения в "горячий список" или "список закладок" берется именно текст, выделенный кодами <TITLE>. Поэтому заголовок вашего документа должен быть информативным и конкретным, а не туманным и общим. Например, не стоит писать <TITLE>Содержание</TITLE> вместо этого уместнее

<TITLE>PC Magazine Краткий курс HTML - Содержание

</TITLE>

Управляющие коды <BODY> и </BODY> определяют часть документа, которая будет показана пользователю в клиентской области окна программы просмотра Web. Тело документа состоит из произвольной смеси абзацев, горизонтальных линеек, заголовков и списков, перемежающихся вкрапленными управляющими кодами для форматирования символов, гипертекстовых связей и вставляемой графики. Все коды, которые мы будем обсуждать далее, используются внутри раздела <BODY>.

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

<HTML>

<HEAD>

<TITLE>

Текст заголовка окна

</TITLE>

</HEAD>

<BODY>

Текст документа

</BODY>

</HTML>

3. КОМАНДЫ ФОРМАТИРОВАНИЯ ТЕКСТОВОГО ПОТОКА

Три наиболее часто используемых управляющих кода данной категории - <P>, <BR> и <HR>. Это одиночные, а не парные коды; другими словами, программы просмотра не требуют (и не интерпретирует) кодов </P>, </BR> и </HR>.

Управляющий код <P> означает конец абзаца и соответствует коду \par формата RTF (Rich Text Format - расширенный текстовый формат) или значку ASCII 20, который вы увидите на экране в документе WinWord на месте нажатия клавиши [Enter] (в предположении, что в диалоговом окне Tools Options View редактора WinWord установлен режим показа непечатаемых символов). Если остальные управляющие коды не устанавливают иного, весь текст между кодами <P> программой просмотра может быть разбит на строки в соответствии с размером окна, экранного шрифта и т. п. По соглашению программы просмотра Web используют для отделения каждого абзаца от следующего промежуток размером в одну строку.

Управляющий код <BR> вводит принудительный перевод строки и соответствует нажатию клавишной комбинации [Shift]-[Enter] в текстовых процессорах Word. Код <BR> не означает конца логического абзаца, и за строкой с этим кодом дополнительная пустая строка не появится. Типичный пример использования <BR> - отделение фамилии от адреса, чтобы они не попали при просмотре на одну строку.

Управляющий код <HR> сообщает программе просмотра, что в этом месте следует изобразить горизонтальную линию, пересекающую клиентскую область окна. Вторичный эффект кода <HR> подобен действию <BR>: поток текста прерывается, рисуется горизонтальная линия с "разумным" отступом сверху и снизу, затем текст продолжается с левого края ниже линии. Если вы хотите увеличить промежутки между текстом и линией, следует вставить коды <P> до и после кода <HR>. Обработка кода <HR> в существующих программах просмотра Web весьма различна. Некоторые просто рисуют обычную черную линию шириной в 1 пиксел. Другие, например Netscape Navigator, отображают код <HR> в сложную трехмерную оттененную разделительную линию.

По нескольким соображениям применение управляющего кода <HR> гораздо предпочтительнее прямого использования в документе HTML визуальных разделителей, например, подчеркиваний или вставленного отдельного графического объекта. Программа просмотра "знает" размер окна и возможности системы и может провести горизонтальную линию как надо. Использование кода <HR> улучшает также внешний вид документа для конечного пользователя. И наконец, код <HR> компактен и может передаваться по сети быстрее, чем ряд символов подчеркивания или растровое изображение.

Есть еще три команды форматирования текстового потока, про которые стоит помнить в определенных ситуациях, хотя понадобятся они и нечасто. Коды <PRE> и </PRE> выделяют предварительно форматированный текст. В отличие от обычного текста в документе HTML, который выводится на экран красивым пропорциональным шрифтом и разбивается программой просмотра на строки, текст, выделенный кодом <PRE>, печатается равноширинным шрифтом с соответствующей организацией свободного пространства (с помощью символов табуляции, перевода строк и последовательностей пробелов). В HTML 1.0 и 2.0 коды <PRE> - единственный способ передачи табличных данных, хотя результат и не отличается привлекательностью.

Управляющие коды <LISTING> и <BLOCKQUOTE> по смыслу похожи на коды <PRE>. Текст между <LISTING> и </LISTING> рассматривается как исходный текст программы или листинг, сгенерированный транслятором языка программирования. Существующие программы просмотра обрабатывают текст раздела <LISTING> так же, как текст раздела <PRE> различие, возможно, появится в будущем, когда программы просмотра будут использоваться в качестве внешнего интерфейса при работе с разнообразными базами данных, в том числе хранилищами исходных текстов программ и документации. Коды <BLOCKQUOTE> и </BLOCKQUOTE> ограничивают цитаты или извлечения из других источников. Цитируемый текст выделяется с обеих сторон отступом, перед ним и после него могут быть (в зависимости от программы просмотра) дополнительные промежутки, он может быть выведен другим шрифтом.

4. КОМАНДЫ ФОРМАТИРОВАНИЯ ЗАГОЛОВКОВ

В HTML предусмотрены управляющие коды заголовков шести уровней, которые можно использовать для форматирования заголовков и подзаголовков документа: <H1>, <H2>, <H3>, <H4>, <H5> и <H6>. Эти коды должны использоваться парами; например, последовательность HTML

<H1>Мой заголовок</H1>

означает, что текст "Мой заголовок" будет выведен как заголовок первого уровня. Хотя действительная гарнитура и кегль будут зависеть от программы просмотра (и даже могут задаваться пользователем), вы можете быть уверены, что текст, выделенный кодами <H1>, будет крупнее и внушительнее, чем текст <H2>, который, в свою очередь, будет больше текста <H3> и т. д.

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

Рис. 1 и 2 содержат исходный HTML-текст с различными уровнями заголовков и результат его обработки программой просмотра Netscape Navigator на обычной машине с Windows 3.1.

1. Данный исходный текст HTML показывает различные типы заголовков HTML.

<HTML>

<HEAD>

<TITLE>HTML Headings</TITLE>

</HEAD>

<BODY>

<H1>This is a Level 1 Heading</H1>

<HR>

<H2>This is a Level 2 Heading</H2>

<HR>

<H3>This is a Level 3 Heading</H3>

<HR>

<H4>This is a Level 4 Heading</H4>

<HR>

<H5>This is a Level 5 Heading</H5>

<HR>

<H6>This is a Level 6 Heading</H6>

<HR>

<ADDRESS>

Created 3/13/95 / Last Modified 3/13/95/<BR>

Cedars-Sinai Medical Center / duncan@csmc.edu

</ADDRESS>

</BODY>

</HTML>

2. Эти заголовки сформированы программой просмотра Web по исходному тексту HTML на рис. 1

This is a Level 1 Heading

This is a Level 2 Heading

This is a Level 3 Heading

This is a Level 4 Heading

This is a Level 5 Heading

This is a Level 6 Heading

Created 3/13/95 / Last Modified 3/13/95/

Cedars-Sinai Medical Center / duncan@csmc.edu

5. КОМАНДЫ ФОРМАТИРОВАНИЯ СИМВОЛОВ

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

<B> Полужирный шрифт

<I> Курсив

<U> Подчеркивание

<TT> "Телетайпный" текст - равноширинный шрифт (Курьер)

Например, последовательность текста

Второе <B>слово</B> в этом <I>предложении</I>

выделено полужирным шрифтом, а пятое - курсивом. <P>

будет выглядеть на экране так:

Второе слово в этом предложении выделено полужирным

шрифтом, а пятое - курсивом.

Коды логических атрибутов более абстрактны и более многочисленны и примерно соответствуют стилям символов из таблицы стилей текстового процессора:

<ADDRESS>	Информация для контакта с автором документа HTML
<CITE>	Цитата
<CODE>	Используется для директив HTML
<DFN>	Определение
<EM>	Выделение (обычно курсивом)
<KBD>	Клавиатурный символ
<SAMP>	Пример вывода команды
<STRONG>	Усиленное выделение (полужирным шрифтом)
<VAR>	Переменная в программе

Когда вы используете управляющие коды логических атрибутов форматирования символов, в действительности вы не можете предсказать, как конкретная программа просмотра Web их обработает. В настоящее время большинство программ просмотра отображают различные коды логических атрибутов в <B>, <I> и <TT> и часто больше ничего с ними не делают. В то же время использование логических стилей открывает множество возможностей на будущее, поскольку данные коды сообщают программе просмотра нечто важное о природе текста и о его виде. Так что авторам Web лучше там, где это возможно, использовать коды логических, а не физических атрибутов.

Кстати, может возникнуть соблазн попытаться использовать коды форматирования символов в сочетании, например так: <B><I><U>Некоторый текст</U></I></B>. Ведь это обычный способ применять несколько атрибутов форматирования к символам в текстовом процессоре! Однако правильное поведение программ просмотра Web в ответ на такую последовательность не гарантируется: одни могут доблестно попытаться выполнить все ваши указания, другие просто выберут какой-то один атрибут и применят его, а некоторые могут просто ничего не сделать. Мой совет - избегать использовать коды форматирования символов в сочетаниях.

На рисунках 3 и 4 показаны примеры управляющих кодов форматирования символов и их действие.

3. Этот исходный текст HTML показывает различные коды форматирования символов HTML.

<HTML>

<HEAD>

<TITLE>HTML Character Formatting</TITLE>

</HEAD>

<BODY>

<H1>Examples of HTML Character Formatting</H1>

<HR>

<B>This is "bold" text</B><BR>

<I>This is "italic" text</I><BR>

<T>This is "typewriter" text</TT><BR>

<E>This is "emphasized" text</EM><BR>

<STRONG>This is "strong" text</STRONG><BR>

<CITE>This is "citation" text</CITE><BR>

<SAMP>This is "sample" text</SAMP><BR>

<KBD>This is "keyboard" text</KBD><BR>

<VAR>This is "variable" text</VAR><BR>

<DFN>This is "definition" text</DFN><BR>

<HR>

<ADDRESS>

Created 3/13/95 / Last Modified 3/13/95/<BR>

Cedars-Sinai Medical Center / duncan@csmc.edu

</ADDRESS>

</BODY>

</HTML>

4. Примеры форматирования символов, сформатированные программой просмотра Web по исходному тексту HTML на рис. 3

Examples of HTML Character Formatting

This is "bold" text

This is "italic" text

This is "typewriter" text

This is "emphasized" text

This is "strong" text

This is "citation" text

This is "sample" text

This is "keyboard" text

This is "variable" text

This is "definition" text

Created 3/13/95 / Last Modified 3/13/95/

Cedars-Sinai Medical Center / duncan@csmc.edu



6. КОМАНДЫ ФОРМАТИРОВАНИЯ СПИСКОВ

Версии 0.9/1.0 и 2.0 HTML предусматривают три типа списков: упорядоченные списки, неупорядоченные списки и списки определений, которые обозначаются соответственно метками <OL>, <UL> и <DL>. Упорядоченные списки предназначены для последовательных операций или алгоритмов, и программа просмотра Web автоматически генерирует номера для каждого пункта в списке. Неупорядоченные списки используются, например, при составлении перечня покупок, когда порядок несуществен и перед каждым элементом в выводимом на экран списке будет стоять буллит (специальный "списковый" значок). Списки определений обеспечивают специальное форматирование, как в словарях, или глоссариях, для терминов и связанных с ними описаний.

Отдельные элементы в упорядоченном и неупорядоченном списке помечаются одиночным кодом <LI>, а элементы в списках <DL> - кодами <DT> и <DD> для термина и его значения соответственно. Например, последовательность HTML

<UL>

<LI>Это элемент списка

<LI>Это другой элемент

<LI>Это последний элемент

</UL>

будет выведена в виде

Это элемент списка

Это другой элемент

Это последний элемент

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

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

Дополнительные примеры применения списков разных типов приводятся на рисунках 5 - 8.

5. Этот исходный текст HTML демонстрирует упорядоченные (нумерованные) и неупорядоченные (с буллитами) списки HTML.

<HTML>

<HEAD>

<TITLE>HTML Ordered and Unordered Lists</TITLE>

</HEAD>

<BODY>

<H1>This is an Unordered (Bulleted) List</H1>

<HR>

<UL>

<LI>This is 1st item.

<LI>This is 2nd item.

<LI>This is 3rd item.

</UL>

<HR>

<OL>

<H1>This is an Ordered (Numbered) List</H1>

<HR>

<OL>

<LI>This is 1st item.

<LI>This is 2nd item.

<LI>This is 3rd item.

</OL>

<HR>

<ADDRESS>

Created 3/13/95 / Last Modified 3/13/95/<BR>

Cedars-Sinai Medical Center / duncan@csmc.edu

</ADDRESS>

</BODY>

</HTML>

6. Упорядоченные (нумерованные) и неупорядоченные (с буллитами) списки, сформированные программой просмотра Web по исходному тексту HTML на рис. 5.

This is an Unordered (Bulleted) List

This is 1st item.

This is 2nd item.

This is 3rd item.

This is an Ordered (Numbered) List

This is 1st item.

This is 2nd item.

This is 3rd item.

Created 3/13/95 / Last Modified 3/13/95/

Cedars-Sinai Medical Center / duncan@csmc.edu



7 Этот исходный текст HTML демонстрирует вложенные списки и списки определений.

<HTML>

<HEAD>

<TITLE>HTML Nested and Definition Lists</TITLE>

</HEAD>

<BODY>

<H1>This Demonstrates Nested Lists</H1>

<HR>

<UL>

<LI>This is the 1st item.

<UL>

<LI>This is a nested bulleted item.

<LI>This is another nested bulleted item.

</UL>

<LI>This is the 2nd item.

<OL>

<LI>This is a nested numbered item.

<LI>This is another nested numbered item.

</OL>

<LI>This is a 3rd item.

</UL>

<HR>

<H1>This is Definition List</H1>

<HR>

<DL>

<DT>This is first term.

<DD>This is a description of the first term.

The description can be very long. This is more

description of the first term.

<DT>This is second term.

<DD>This is a description of the second term.

The description can be very long. This is more

description of the second term.

</DL>

<HR>

<ADDRESS>

Created 3/13/95 / Last Modified 3/13/95/<BR>

Cedars-Sinai Medical Center / duncan@csmc.edu

</ADDRESS>

</BODY>

</HTML>

веб программирование гипертекст форматирование

8. Вложенные списки и списки определений, сформированные программой просмотра Web по исходному тексту HTML на рис. 7

This Demonstrates Nested Lists

This is the 1st item.

This is a nested bulleted item.

This is another nested bulleted item.

This is the 2nd item.

This is a nested numbered item.

This is another nested numbered item.

This is a 3rd item.

This is Definition List

This is first term.

This is a description of the first term. The description can be very long. This is more description of the first term.

This is second term.

This is a description of the second term. The description can be very long. This is more description of the second term.

Created 3/13/95 / Last Modified 3/13/95/

Cedars-Sinai Medical Center / duncan@csmc.edu

7. СПЕЦИАЛЬНЫЕ СИМВОЛЫ

Спецификация HTML определяет набор символов для документов HTML как набор 8-разрядных однобайтовых символов ISO 8859/1, который также известен как Латинский алфавит N 1 (Latin-1). Это набор из 256 символов, который содержит много графических элементов и символов с диакритическими знаками, необходимых для текстов на большинстве европейских языков, в том числе и на английском. Младшие 128 кодов символов ISO 8859/1 практически те же, что и в ASCII, и этот поднабор иногда называют International Reference Version, или ISO-646.

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

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

Кроме того, нам понадобится какой-то способ вывода символов, которые могли бы быть интерпретированы как части команд форматирования HTML: < (меньше), > (больше), & (амперсанд) и " (кавычка). Чтобы сделать это, HTML предусматривает специальные "escape-последовательности", которые могут использоваться для кодирования символов, не входящих в таблицу ASCII, и ограничителей команд HTML. В спецификациях HTML эти escape-последовательности называются символьными объектами (character entities).

Вот наиболее важные из них:

Escape-последовательность	Отображается как
&lt;	<
&gt;	>
&amp;	&
&quot;	"

Специальные символы могут также кодироваться цифровой escape-последовательностью, где число соответствует коду символа ISO 8859.

Escape-последовательность	Отображается как
&#60;	<
&#62;	>
&#38;	&
&#34;	"
&#169;	©
&#174;	®

Полный список escape-последовательностей весьма длинен; лучший перечень содержится в спецификации HTML 2.0, которая доступна в виде гипертекста во многих узлах системы WWW (попробуйте сперва http://info.cern.ch).

Отметим, что, согласно спецификации HTML, escape-последовательности для специальных символов чувствительны к регистру символов. Но некоторые программы просмотра (в том числе Netscape Navigator) воспринимают символы верхнего регистра так же, как и нижнего.



8. КОМАНДЫ ВСТАВКИ ГРАФИКИ

Одно из самых захватывающих свойств WWW - ее мультимедиа-возможности, т. е. вставка рисунков, пиктограмм, видеоклипов и звука наравне с текстом и представление результатов в визуально насыщенном, привлекательном и цельном виде. Эта базовая ориентация на графику, как я полагаю, - главная причина стремительного взлета World-Wide Web, появившейся в 1994 г. буквально из ничего и практически сразу затмившей своих чисто текстовых предшественников, медленно росшей глобальной сети клиентов и серверов Gopher.

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

На простейшем уровне графические элементы вставляются в текст с помощью управляющего кода <IMG>. Он содержит унифицированный адрес ресурса URL, определяющий действительное положение графического объекта в отдельном файле, и некоторые подробности его вывода на экран. Другими словами, графика на самом деле не включается в документ HTML, а вызывается по ссылке. Адрес может быть абсолютным или относительным, так что сам графический объект может находиться или на той же машине, что и обращающийся к нему документ HTML, или на любом другом адресуемом сервере Web, или даже на собственном жестком диске пользователя. Полный вид кода <IMG> такой:



<IMG SRC="URL" [ALIGN=TOP|MIDDLE|BOTTOM] [ALT="text"]>

Когда пользователь просматривает документ HTML, программа отдельными транзакциями извлекает все графические объекты, упоминающиеся в документе, и затем объединяет их в выводимый объект в соответствии с дополнительным параметром выравнивания (по умолчанию - BOTTOM). Необязательный параметр ALT задает текст, который будет выведен вместо рисунка программами просмотра Web, работающими только в текстовом режиме, например Lynx. Большинство графических программ просмотра могут работать со встраиваемыми изображениями нескольких типов, в том числе с JPEG-файлами, растровыми изображениями формата X и GIF-файлами из CompuServe. Чаще всего используется формат GIF, хотя из-за недавних юридических разборок положение в 1996 г. может быстро измениться.

Давайте посмотрим простой пример встраиваемой графики. Приведенный ниже фрагмент в документе HTML отображает графический файл JOHNDOE.GIF в левой части окна просмотра, а текст "John Doe" - в правой, при этом линейка, на которой располагается текст, будет находиться на половине высоты рисунка.

<P>

<IMG SRC="JOHNDOE.GIF" ALIGN=MIDDLE>

John Doe<P>

Заметьте, что адрес графического файла - относительный, так что программа просмотра будет пытаться найти его там же, где и сам документ HTML, содержащий ссылку на него.

Проверка адреса и вопросы производительности - больное место для мультимедиа-публикаций Web. Поскольку документы HTML и их встроенная графика в действительности находятся в разных файлах на сервере Web, ссылка на файл в документе и реальный файл легко могут рассогласоваться. Путешествуя по сети, вы часто можете видеть, что ваша программа просмотра Web отображает вместо некоторого вставляемого рисунка обобщенную пиктограмму, означающую: "Я не могу найти нужный файл по адресу, указанному в коде <IMG>". Могут происходить и менее серьезные ошибки, например, когда содержимое графического файла было исправлено или полностью изменено после создания документа HTML, содержащего на него ссылку, либо когда при коллизии имен файлов на удаленной системе или при ошибке в задании адреса будет показано не то изображение. Когда в Web появятся более сложные авторские системы,, проблемы этого рода, несомненно, станут менее значительными.

Проблемы производительности в обозримом будущем тоже никуда от нас не уйдут. Несколько килобайт кодированного текста HTML могут превратиться во многие страницы форматированного текста на экране, но даже крохотный графический объект с 256 цветами, отличный от пиктограммы, займет как минимум несколько килобайт, а полноэкранная картинка легко может потребовать более 100 Кбайт. Несложно представить, до чего замедлится производительность программы просмотра при интенсивном использовании графики, особенно для тех пользователей, кто связывается с Internet с помощью модема со скоростью 14,4 кбит/с и соединения SLIP или по арендованной линии с пропускной способностью 56 кбит/с.

Первая широко используемая программа просмотра Web - Mosaic 1.0.3 - не позволяла пользователю делать что-либо, пока все графические файлы, упоминаемые в документе HTML, не будут получены, если только загрузка рисунков не была отменена полностью. Когда я впервые начал использовать Mosaic, у моей фирмы было только относительно низкоскоростное (56 кбит/с) соединение со скелетом Internet. Помню, как я скрипел зубами в ожидании, пока Mosaic покажет рассредоточенный между пиктограммами, большими картами и рисунками документ Web, созданный бездумным автором на машине с мультимегабитным доступом к Internet, наивно полагающим, что и все остальные в мире имеют такой же.

Программы просмотра второго поколения, такие, как Netscape Navigator, до некоторой степени обходят проблему производительности, проводя получение графических файлов в "фоновом" режиме и позволяя пользователю листать текст документа или переходить к другому документу до окончания загрузки файла. Но как автор документов Web вы можете лучше позаботиться о читателе, используя графические элементы только там, где это действительно необходимо, и предусмотрительно помещая в документ маленькие копии ("thumbnail") иллюстраций, позволяющие быстро переключиться на свои полноразмерные оригиналы.

9. КОМАНДЫ ГИПЕРТЕКСТОВЫХ СВЯЗЕЙ

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

<A HREF="URL">некоторый текст</A>

где "некоторый текст" - это то, что видит пользователь, а URL - "место назначения" гипертекстовой связи. Адрес этого места может быть абсолютным, с полным именем сервера и именем файла документа назначения; относительным, означающим, что имя сервера и начальный каталог предполагаются теми же, что и у документа, содержащего код гипертекстовой связи; или даже локальным, если файл находится на компьютере, где запущена программа просмотра Web, а не на сервере Web. Между кодами <A> и </A> можно поместить текст любого объема, код <IMG> для вставки графики или сочетание того и другого.

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

<A HREF="URL#метка">некоторый текст</A>

Метка должна находиться в HTML-документе назначения и иметь такой вид:

<A NAME="метка">текст, который увидит пользователь</A>

Поддержка меток в документах HTML дает возможность создания гипертекстовых связей, которые просто заставляют программу просмотра менять положение просматриваемого документа в окне. Такие коды имеют вид

<A HREF="#метка">некоторый текст</A>

Обратите внимание на отсутствие адреса URL и обязательное наличие символа #. Гипертекстовые связи такого типа стали очень популярны в документах Web, которые часто начинаются с плана (outline) документа (реализованного как упорядоченный или неупорядоченный список), где каждый элемент на самом деле представляет собой код гипертекстовой связи, адресующий к соответствующему разделу документа. Единственный неудачный момент таких внутридокументных связей - это то, что кнопка возврата (Back) программы просмотра Web никогда не действует так, было бы естественно ожидать!

Размещено на Allbest.ru