[ПРЕДЫДУЩАЯ СТРАНИЦА][СЛЕДУЮЩАЯ СТРАНИЦА]
[ОГЛАВЛЕНИЕ][ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ]
[КОНЕЦ СТРАНИЦЫ]

Флаги, задающие логические стили текста

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

Консорциумом W3C недавно предложено использование в HTML так называемых таблиц стилей (Style Sheets), позволяющих задавать атрибуты для любого логического стиля, при этом атрибуты могут включать гарнитуру шрифта, курсивное или жирное начертание, размер символов, расстояние между строками, отступы и многое другое. Таблицы стилей можно помещать непосредственно в HTML-файл с документом, где эти стили используются. Также, имеется возможность размещения таблиц стилей в специальных стилевых файлах, на которые в HTML-документах делаются ссылки. Применение стилевых файлов делает весьма простым единообразное форматирование большого количества документов. Таблицы стилей уже поддерживаются в Microsoft Internet Explorer 3.0, а Netscape Corporation обещает реализовать их поддержку в будущих версиях Netscape Navigator. Видимо, широкое использование таблиц стилей начнется только тогда, когда их синтаксис будет полностью стандартизирован и их станут поддерживать все распространенные программы просмотра. Поскольку этого еще не сделано, мы не будем приводить синтаксис стилевых таблиц в данной книге.

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

Выделение
(Emphasis)

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

Синтаксис

<EM>...</EM>

Пример

Когда вы редактируете HTML-документ,
<em>обязательно</em> сохраните текст в формате ASCII.

Как выглядит на дисплее

Когда вы редактируете HTML-документ, обязательно сохраните текст в формате ASCII.

Сильное выделение
(Strong Emphasis)

Используется для более заметного выделения слова или фразы. В Netscape выводится жирным шрифтом.

Синтаксис

<STRONG>...</STRONG>

Пример

Когда вы редактируете HTML-документ,
<strong>обязательно</strong> сохраните текст <em>в формате ASCII</em>.

Как выглядит на дисплее

Когда вы редактируете HTML-документ, обязательно сохраните текст в формате ASCII.

Цитата
(Citation)

Используется для выделения заголовков статей, названий книг и т. п., упоминаемых в тексте. В Netscape выводится курсивом.

Синтаксис

<CITE>...</CITE>

Пример

<cite>Толковый словарь по вычислительным системам</cite>
под редакцией В. Иллингуорта дает следующее толкование этого термина:<BR>

Как выглядит на дисплее

Толковый словарь по вычислительным системам под редакцией В. Иллингуорта дает следующее толкование этого термина:

Компьютерный код
(Computer Code)

Используется для листингов компьютерных программ. В Netscape выводится моноширинным шрифтом типа Курьер. Обратите внимание, что для перехода на новую строку необходим флаг <BR>. Следует заметить, что листинги программ удобнее оформлять при помощи предварительно отформатированного текста (см. стр. 99).

Синтаксис

<CODE>...</CODE>

Пример

<CODE>
switch (Choice)<BR>{<BR>case 1:<BR>ShowHelp();
<BR>break;<BR>case 2:<BR>SaveFile();<BR>break;<BR>}
<BR></CODE>

Как выглядит на дисплее

switch (Choice)
{
case 1:
ShowHelp();
break;
case 2:
SaveFile();
break;
}

Ввод с клавиатуры
(Keyboard Entry)

Используется для выделения текста, который читатель должен вводить с клавиатуры. В Netscape выводится моноширинным шрифтом типа Курьер. [103] Обратите внимание, что для перехода на новую строку необходим флаг <BR>.

Синтаксис

<KBD>...</KBD>

Пример

На приглашение <I>DOS</I> введите следующую команду:
<P><KBD>cd kermit<br>kermit<br></KBD>

Как выглядит на дисплее

На приглашение DOS введите следующую команду:

cd kermit
kermit

Сообщения компьютера
(Computer Output Sample)

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

Синтаксис

<SAMP>...</SAMP>

Пример

После появления на экране сообщения<br><samp>Hard Drive Parked</samp>
<br>выключите компьютер из сети.

Как выглядит на дисплее

После появления на экране сообщения
Hard Drive Parked
выключите компьютер из сети.

Имена переменных
(Variables)

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

Синтаксис

<VAR>...</VAR>

Пример

Введите следующую команду:<BR><kbd>type</kbd>
<var>имя_файла</var><br>и нажмите клавишу Enter.

Как выглядит на дисплее

Введите следующую команду:
type имя_файла
и нажмите клавишу Enter.

Определение
(Definition)

Используется для выделения нового термина, встретившегося в тексте. Netscape 3.0 игнорирует этот флаг, Mosaic - выводит курсивом.

Синтаксис

<DFN>...</DFN>

Пример

Для автоматической генерации классов в языке С++ используются
<DFN>шаблоны классов</DFN>, называемые также
<DFN>параметризованными типами</DFN>.

Как выглядит на дисплее

Для автоматической генерации классов в языке С++ используются шаблоны классов, называемые также параметризованными типами.

Длинная цитата
(Extended Quote)

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

Синтаксис

<BLOCKQUOTE>...</BLOCKQUOTE>

Пример

Ему неожиданно вспомнилась знаменитая речь Линкольна:
<blockquote>Столетие назад наши праотцы основали новую нацию...</blockquote>
и он подумал, не взять ли эти слова эпиграфом к своей книге.

Как выглядит на дисплее

Ему неожиданно вспомнилась знаменитая речь Линкольна:

Столетие назад наши праотцы основали новую нацию...

и он подумал, не взять ли эти слова эпиграфом к своей книге.

Адрес
(Address)

Используется для указания адреса, номера телефона и т. п. В Netscape выводится курсивом.

Синтаксис

<ADDRESS>...</ADDRESS>

Пример

<address>802 W.Ohio<br>Urbana<br>IL 61801</address>

Как выглядит на дисплее

Включение графики в HTML-документы

Включение изображения из графического файла
(Inline Image)

В HTML-документ можно включить изображения из графических файлов в форматах GIF, JPEG и некоторых других. Кодирование графической информации и форматы графических файлов мы уже рассмотрели ранее (стр. 56 и далее). Наиболее часто используемыми в WWW являются графические форматы GIF и JPEG.

Синтаксис [104]

<IMG SRC="местоположение_файла" 
ALIGN= left | right | top | texttop | middle | absmiddle | bottom | absbottom
WIDTH=nnn HEIGHT=nnn
HSPACE=nnn VSPACE=nnn ALT="альтернативный текст">

Атрибуты ALIGN, WIDTH, HEIGHT, HSPACE и VSPACE, задающие расположение рисунка на странице, являются необязательными, а ALT, задающий так называемый альтернативный текст, - обязательным, поскольку он используется неграфическими программами просмотра. Атрибут SRC служит для указания программе просмотра имени и местоположения графического файла. Ниже мы более подробно рассмотрим все атрибуты, но прежде всего расскажем о том, как правильно задать местоположение графического файла.

Простейший пример

<IMG SRC="gsdog.gif" ALT="German Shepherd">Пр-р-ривет!

Как выглядит на дисплее

Пр-р-ривет!

Где программа просмотра должна искать графический файл?

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

1. графический файл находится на том же сервере и в той же директории, что и сам HTML-документ;
2. графический файл находится на том же сервере, что и сам HTML-документ, но в другой директории;
3. графический файл и HTML-документ находятся на разных серверах.

В любом случае допустимо указание полного, или, как говорят, абсолютного, URL графического файла. Абсолютный URL, как мы уже знаем (см. стр. 11), включает имя протокола, адрес сервера, номер порта (если он отличается от принимаемого по умолчанию номера 80), имя директории и имя файла. Однако, в первых двух из вышеперечисленных случаев указание абсолютного URL часто не только избыточно, но и нежелательно, поскольку значительно усложняет перенос документа с одного сервера на другой или даже из одной директории в другую.

Если файл с изображением находится на том же сервере (или на том же локальном диске) и в той же директории, что и сам HTML-документ, то достаточно указать только имя этого файла.

Синтаксис

<IMG SRC="имя_файла" ALT="...">

Пример

Представим себе, что URL документа - http://www.scs.uiuc.edu/~dima/index.html, а URL графического файла - http://www.scs.uiuc.edu/~dima/mailbox.gif. Тогда изображение из графического файла включается так:

<IMG SRC="mailbox.gif" ALT="Mail Box">

Если графический файл находится на том же сервере (или том же локальном диске), что и сам HTML-документ, но в другой директории, указывается путь к файлу. При этом путь к файлу может быть задан либо по отношению к директории с HTML-документом, либо по отношению к корневой директории. При загрузке документа с WWW-сервера корневой директорией считается document root directory, которая, как мы уже говорили, задается при настройке сервера. При загрузке с локального диска корневой будет считаться корневая директория в файловой системе. Имена директорий указываются по правилам UNIX:

• подкаталоги разделяются не обратной (\), как в DOS, а простой косой чертой (/);
• косая черта / в начале пути к файлу означает отсчет пути к файлу от корневой директории. Отсутствие такой черты означает отсчет от директории, в которой находится просматриваемый HTML-файл;
• одна точка . означает текущую директорию, а две точки .. - директорию одним уровнем ближе к корневой.

Синтаксис

<IMG SRC="имя_директории/имя_файла" ALT="...">

Пример

Пусть URL документа -

http://www.scs.uiuc.edu/~dima/k9dict_internal/k9dict.html

а файла с изображением -

http://www.scs.uiuc.edu/~dima/mailbox.gif

Тогда команда включения файла может выглядеть так:

<IMG SRC="../mailbox.gif" ALT="Mail Box">

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

<IMG SRC="http://www.scs.uiuc.edu/~dima/mailbox.gif" ALT="Mail Box">

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

До тех пор, пока не возникнет необходимости переместить в WWW-пространстве множество взаимосвязанных документов, в которое входит файл k9dict.html, обе приведенные выше формы включения графического файла с точки зрения читателя документа совершенно эквивалентны. Но при перемещении всей структуры взаимосвязанных HTML-документов и графических файлов из http://www.scs.uiuc.edu/~dima/ на другой сервер и/или в другую директорию и/или локальный диск URL графического файла mailbox.gif изменится. Вследствие этого команда

<IMG SRC="http://www.scs.uiuc.edu/~dima/mailbox.gif" ALT="Mail Box">

станет неправильной и потребует редактирования, тогда как

<IMG SRC="../mailbox.gif" ALT="Mail Box">

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

И лишь только если графический файл и HTML-документ находятся на разных серверах, то у автора документа не остается другого выбора, кроме как указать URL полностью (синтаксис URL см. на стр. 11).

Синтаксис

<IMG SRC="http://адрес_сервера:номер_порта/имя_директории/имя_файла" ALT="...">

Пример

Пусть URL HTML-документа - http://www.chem.msu.su/foo.html, а URL графического файла - http://www.scs.uiuc.edu/~dima/dima_tim.jpg

Тогда команда включения будет такой:

<IMG SRC="http://www.scs.uiuc.edu/~dima/dima_tim.jpg" ALT="Dima and Tim">

Таким образом, мы видим, что чем ближе файлу с HTML-документом расположен графический файл в WWW-пространстве, тем менее подробно указываются его координаты.

Расположение изображений на WWW-странице
(Alignment)

При помощи необязательного атрибута ALIGN флага <IMG ...> можно управлять расположением изображения на странице относительно текста и других изображений.

Синтаксис [105]

ALIGN=left | right | top | texttop | middle | absmiddle | bottom | absbottom

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

1. ALIGN=bottom - нижняя сторона изображения выравнивается по базовой линии следующего за ним текста.

2. *ALIGN=absbottom - нижняя сторона изображения выравнивается по низу строки следующего за ним текста.

3. *ALIGN=absmiddle - горизонтальная линия, проходящая через центр строки следующего за рисунком текста выравнивается по центру изображения.

4. ALIGN=middle - базовая линия следующего за рисунком текста выравнивается по центру изображения.

5. ALIGN=top - изображение располагается на одной линии с самым высоким объектом (текстом или рисунком) в строке.

5'. *ALIGN=texttop - изображение располагается на одной линии с самым высоким символом текста в строке.

6. *ALIGN=left - изображение выравнивается по левому краю окна, а следующий за ним текст обтекает его справа.

7. *ALIGN=right - изображение выравнивается по правому краю окна, а следующий за ним текст обтекает его слева.

Пример

Пр-р-ривет! <IMG SRC="gsdog.gif" ALT="German Shepherd">В данном
случае изображение не выровнено.

Как выглядит на дисплее

Пр-р-ривет! В данном случае изображение не выровнено.

Пример

Пр-р-ривет!<IMG SRC="gsdog.gif" ALIGN=left ALT="German Shepherd">Это
изображение выровнено по левому краю страницы. Обратите внимание на то,
как текст окружает рисунок.

Как выглядит на дисплее

Пр-р-ривет! Это изображение выровнено по левому краю страницы. Обратите внимание на то, как текст окружает рисунок.

Ширина и высота изображений
(Width and Height)

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

Если истинный размер изображения, содержащегося в графическом файле, не совпадает с заданным при помощи атрибутов WIDTH и HEIGHT, то результат зависит от используемой программы просмотра. В частности, Netscape Navigator 3.0 соответствующим образом растягивает или сжимает картинку, как показано в примере ниже.

Пример

<IMG SRC="GSDog.gif" width=52 height=130 ALT="German Shepherd">Пр-р-ривет!
Изображение искажено! Размер оригинала 100х130, а выведено 52х130.

Как выглядит на дисплее

Пр-р-ривет! Изображение искажено! Размер оригинала 185х216, а выведено 72х140.

Горизонтальный и вертикальный отступ
(Horizontal and Vertical Spaces)

Текст, вплотную прилегающий к изображению, выглядит некрасиво. Гораздо лучше, если между изображением и окружающим его текстом имеется некоторый "зазор". Фирмой Netscape предложено расширение HTML, дающее такую возможность.

Синтаксис

HSPACE=nnn
VSPACE=nnn

где nnn - величина зазора, выраженная в пикселах.

Пример

Пр-р-ривет!<IMG SRC="gsdog.gif" ALIGN=left
hspace=20 vspace=20 ALT="German Shepherd">Это
изображение выровнено по левому краю, и, кроме того,
заданы размеры вертикального и горизонтального отступов.
Обратите внимание на то, что текст, окружающий рисунок,
теперь не прилегает к нему вплотную.

Как выглядит на дисплее

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

Альтернативный текст
(Alternate Text)

Некоторые программы просмотра HTML-документов, ориентированные на использование текстовых терминалов, вообще не способны выводить изображения. Кроме того, при низкой скорости обмена информацией между WWW-сервером и клиентом пользователь может отключить загрузку изображений и просматривать только текст, чтобы избежать длительных задержек (по статистике, так поступает примерно треть пользователей). Чтобы в этих случаях на месте изображений не было "пустого места" и читатель документа не оставался в полном неведении относительно содержания рисунков, необходимо задать для каждого рисунка так называемый альтернативный текст, который будет выводиться на его месте при невозможности вывода графики.

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

Синтаксис

ALT="альтернативный текст"

Пример

<IMG SRC="gsdog.gif" ALT="German Shepherd">Пр-р-ривет!

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

[German Shepherd] Пр-р-ривет!

Гиперсвязи в HTML-документах
(Hyperlinks)

Как мы уже знаем, HTML-документы являются гипертекстовыми. Это означает, что часть текста или участок изображения в HTML-документах может ссылаться на другой участок внутри того же самого документа, или на другой документ [106] в сети Internet. Такая ссылка называется гипертекстовой связью (hypertext link), гипертекстовой ссылкой (hypertext reference) или просто гиперсвязью. Участок текста или изображения, который визуально обозначает гиперссылку в окне программы просмотра, называется якорем (anchor), или горячим пятном (hot spot). Как мы уже говорили (см. также стр. 9 и 53), программа просмотра каким-либо образом (чаще всего подчеркиванием и/или особым цветом) выделяет якорь на фоне остального текста. Когда читатель выбирает гиперссылку при помощи клавиатуры или мыши, программа просмотра пытается загрузить связанный с этим якорем документ.

Синтаксис

<A HREF="путь_к_файлу | URL">Якорь</A> [107]

где путь_к_файлу - путь к файлу со связанным документом, а URL - это Uniform Resource Locator связанного документа. URL в гиперсвязях записывается по правилам, описанным в первой части книги (стр. 11).

Замечание: в якорь гиперссылки можно включить изображение из графического файла. При этом, щелчок мышью на любой части этого изображения приведет к выбору данной гиперссылки. О том, как сделать различные части одного изображения гиперссылками на различные документы, будет рассказано в разделе, посвященном картам (стр. 149).

Пример

Щелкните на рожице <A HREF="10anecdotes.html"><IMG SRC="face.gif" ALT="Face"></A>
- и вы прочитаете десятку наших лучших анекдотов.

Как выглядит на дисплее

Щелкните на рожице - и вы прочитаете десятку наших лучших анекдотов.

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

Гиперсвязь с документом, находящимся в той же директории на том же WWW-сервере или локальном диске

В этом случае достаточно указать имя связанного файла.

Синтаксис

<A HREF="имя_файла">Якорь</A>

Пример

<A HREF="publications.html">Список публикаций сотрудников
лаборатории</A> насчитывает более трехсот статей.

Гиперсвязь с документом, находящимся в другой директории на том же сервере или локальном диске

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

Синтаксис

<A HREF="имя_директории/имя_файла">Якорь</A>

Пример

Пусть HTML-документ находится в директории /usr/students/vasya/public_html, а связанные HTML-документы с именами my_publications.html и resume.html - в директории /usr/students/vasya/public_html/personal_info. Тогда гиперсвязь кодируется на HTML таким образом:

Заинтересованных лиц прошу прочитать мое
<A HREF="personal_info/resume.html">резюме</A>
и <A HREF="personal_info/my_publications.html>список публикаций</A>.

Гиперсвязь с документом, находящимся в той же файловой системе, с использованием протокола file

Для гиперсвязей с документами только в пределах данной локальной файловой системы можно воспользоваться специальным протоколом file.

Синтаксис

<A HREF="file://путь_к_файлу">Якорь</A>

Пример

Предположим, что документ предназначен для пользователя IBM PC-совместимого компьютера под управлением Windows 95. Пусть HTML-документ с именем LocalTest.html находится на одном из локальных дисков, а документ index.html, на который сделана ссылка - на локальном диске C: в директории \DIMA\HOMEPAGE. Тогда гиперсвязь с файлом index.html в файле LocalTest.html кодируется на HTML так:

<A HREF= "file:///C|/DIMA/HOMEPAGE/index.html">Локальная версия домашней страницы</A>

Как видно из примера, имя дисковода обозначается соответствующей латинской буквой, за которой следует вертикальная черта | (а не двоеточие!). Сразу после двоеточия идут три косые черты подряд, при этом, самая правая из них обозначает корневую директорию.

Гиперсвязь с документом, находящимся на другом WWW-сервере

В этом случае требуется указать URL полностью по правилам, описанным ранее (см. стр. 11).

Синтаксис

<A HREF="http://адрес_сервера:номер_порта/имя_директории/имя_файла">Якорь</A>

Пример

Гиперсвязь с документом http://bunny.cs.uiuc.edu:8000/302/index.html

Курс <A HREF= "http://bunny.cs.uiuc.edu:8000/302/index.html">
CS302 Software Engineering</A>, который ведет профессор Winslett,
в значительной степени посвящен работе над большими программными проектами.

Как выглядит на дисплее

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

Гиперсвязь с сервером пересылки файлов (FTP server)

Синтаксис

<A HREF= "ftp://имя_пользователя:пароль@адрес_сервера:номер_орта/путь_к_файлу>Якорь</A>

По вполне понятным причинам, авторы HTML-документов, как правило, используют гиперсвязи лишь с анонимными FTP серверами, т. е., с серверами, на которые можно получить доступ под именем anonymous. При этом часть URL имя_пользователя:пароль@ опускается. [108] Если номер порта равен 21, то :номер_порта также можно опустить. путь_к_файлу состоит из директории, за которой может следовать имя файла. Если последнее не задано, FTP сервер высылает программе просмотра список файлов в данной директории. При обращении к файлу на FTP-сервере поведение программы просмотра диктуется типом файла, как это было описано на стр. 23 (см. также стр. 170), при этом программа просмотра пытается определить тип файла по его расширению.

Пример

На <A HREF="ftp://ftp.cso.uiuc.edu/">FTP-сервере</A> в Computing and
Communication Services Office в Университете штата Иллинойс можно
найти массу полезных программ. Прежде чем туда забраться, прочитайте
файл <A HREF= "ftp://ftp.cso.uiuc.edu/README">README</A>.

Как выглядит на дисплее

На FTP-сервере в Computing and Communication Services Office в Университете штата Иллинойс можно найти массу полезных программ. Прежде чем туда забраться, прочитайте файл README.

Гиперсвязь с гофер-сервером (Gopher Server)

Синтаксис гиперсвязи с гофер-сервером похож на синтаксис гиперсвязи с WWW-сервером. Имеется возможность задать имя директории и конкретного файла на сервере. Если номер порта равен 70, указывать его не обязательно.

Синтаксис

<A HREF="gopher://адрес_сервера:номер_порта/имя_директории/имя_файла>Якорь</A>

Пример

Загляните в гости к <A HREF= "gopher://gopher.uiuc.edu:70">Гоферу</A>
в Computing and Communication Services Office в Университете штата Иллинойс.
Там есть много интересного. Но прежде чем туда зайти, прочитайте
<A HREF="gopher://gopher.uiuc.edu:70/00/Welcome">Приветственное сообщение</A>.

Как выглядит на дисплее

Загляните в гости к Гоферу в Computing and Communication Services Office в Университете штата Иллинойс. Там есть много интересного. Но прежде чем туда зайти, прочитайте Приветственное сообщение.

Гиперсвязь с сервером групп новостей (телеконференций) Usenet (News Server)

Обратите внимание на то, что синтаксис гиперсвязи с сервером групп новостей имеет существенные отличия от того, что мы видели в других случаях. Имя сервера не указывается, поскольку чаще всего только один сервер групп новостей доступен там, где читатель вашего документа получает доступ к Internet (если он вообще ему доступен). Чтобы гиперсвязь такого рода "сработала", программа просмотра читателя документа должна быть заранее правильно настроена. [109]

Синтаксис

<A HREF="news:имя_группы">Якорь</A>

Пример

Узнайте, какие <A HREF="news:*">группы новостей</A> доступны на вашем сервере.

Как выглядит на дисплее

Узнайте, какие группы новостей доступны на вашем сервере.

Гиперсвязь с сервером электронной почты (Mail Server)

Большинство программ просмотра позволяет отправить электронное письмо по адресу, указываемому в просматриваемом HTML-документе. Синтаксис "почтового" якоря напоминает синтаксис якоря групп новостей, рассмотренного выше. Для работы с сервером электронной почты программа просмотра читателя документа также должна быть предварительно настроена (см. примеч. 109 на стр. 125).

Синтаксис

<A HREF="mailto:электронный_адрес">Якорь</A>

Пример (адрес вымышленный!)

<A HREF="mailto:user@aaa.bbb.ccc.ru">Жду ваших писем!</A>

Как выглядит на дисплее

Жду ваших писем!

Гиперсвязь с сеансом telnet

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

Синтаксис

<A HREF="telnet://имя_компьютера/">Якорь</A>

Пример

Вы можете найти это издание в <A HREF="telnet://illinet.aiss.uiuc.edu/">каталоге
библиотеки Университета штата Иллинойс</A>.

Как выглядит на дисплее

Вы можете найти это издание в каталоге библиотеки Университета штата Иллинойс.

Гиперсвязь с определенным разделом HTML-документа

Гиперсвязь может ссылаться не только на некоторый HTML-документ вообще, но и на определенное место в таком документе, так называемую мишень (target). При выборе гиперсвязи, ссылающейся на мишень, программа просмотра загружает связанный документ и выводит его в окне начиная с того места, где расположена данная мишень. Для того, чтобы можно было ссылаться на мишень в некотором HTML-документе, необходимо дать этой мишени определенное имя, встречающееся в пределах данного документа только один раз. Синтаксис гиперсвязи, ссылающейся на мишень, отличается от обычного, рассмотренного в предыдущих разделах, только тем, что сразу после пути к файлу или URL связанного документа (без пробелов!) записывается символ # и имя мишени. Имя мишени может быть любой комбинацией букв, цифр и символов подчеркивания, но не должно содержать никаких других символов или пробелов. Если гиперсвязь ссылается на мишень, расположенную внутри того же документа, то тогда задается лишь имя мишени, перед которым также записывается символ #.

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

Синтаксис мишени

<A NAME="имя_мишени">Мишень</A>

Синтаксис гиперссылки

<A HREF="URL#имя_мишени">Якорь</A>

Пример

Пусть мишень находится в файле glossary.html, а якорь гиперсвязи - в файле signal_processing.html, расположенном в той же директории, что и glossary.html

Фрагмент файла glossary.html

<DL>
<DT><A NAME="firmware"><B>Firmware</B></A>
<DD>Программно-аппаратные средства; программы ПЗУ.
<DT><A NAME="first_in_first_out"><B>first-in, first-out</B></A>
<DD>Очередь; структура данных <DFN>первым вошел - первым вышел</DFN>.
</DL>

Фрагмент файла signal_processing.html

Буфер был организован в виде структуры данных
<A HREF="glossary.html#first_in_first_out">first-in, first-out</A>.

Как якорь выглядит на дисплее (так как файлы в данном примере вымышленные, то гиперсвязь сделана внутри этой страницы)

Буфер был организован в виде структуры данных first-in, first-out.

Как мишень выглядит на дисплее

first-in, first-out

Очередь; структура данных первым вошел - первым вышел.

Таблицы
(Tables)

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

Таблица - это совокупность ячеек (cells), каждая из которых занимает заданное число строк (rows) и столбцов (columns). Таблица может включать ячейки двух видов: 1) ячейки, содержащие подзаголовки частей таблицы (headers) и 2) "обычные" ячейки с данными (data cells). Ячейки могут содержать как форматированный в соответствии с правилами HTML текст, так и графику. Таблица может иметь подпись (caption). В нижеследующих таблицах приведены флаги а атрибуты, предназначенные для описания таблиц на HTML. [110]

Описывать на HTML большие и сложные таблицы "вручную" - довольно трудоемкая работа. Многие HTML-редакторы, в частности, редактор, встроенный в программу просмотра Netscape Navigator Gold версии 2.0 и старше, существенно помогают в этом довольно утомительном занятии (о HTML-редакторах см. стр. 72).

Пример описания таблицы на HTML

<TABLE BORDER=1>
<CAPTION>Подпись к таблице</CAPTION>
<TR>
<TH ROWSPAN=2>Ячейка 1 занимает 2 строки
<TH COLSPAN=2>Ячейка 2 занимает 2 столбца
<TR>
<TD>Ячейка 3
<TD>Ячейка 4
<TR>
<TD>Ячейка 5
<TD>Ячейка 6
<TD>Ячейка 7
</TABLE>

Как выглядит на дисплее

Цветовая схема документа и изображения-"обои"

Путешествуя по WWW при помощи графической программы, легко убедиться в том, что авторы WWW-публикаций очень редко оставляют цветовую схему окна на усмотрение программы просмотра ("по умолчанию"). Расширения HTML, предложенные фирмой Netscape, дают автору возможность установить цветовую схему документа по своему усмотрению, а также выделить цветом отдельные участки текста, о чем было сказано выше (стр. 101). Кроме того, имеется возможность задать изображение, которое будет служить фоном для данного документа, - так называемые "обои", или background image. Программа просмотра сначала заполняет копиями этого изображения всю видимую часть окна (подобно отделке стены кафельной плиткой с рисунком), а содержание документа выводит поверх "обоев". Необходимо отметить, что использование отличных от принятой программой просмотра по умолчанию цветовых схем, и, тем более, "кричащих" обоев, часто в значительной степени затрудняет чтение WWW-документов. [114] Впрочем, читатель HTML-документа может "приказать" программе просмотра игнорировать заданную автором этого документа цветовую схему, а также не использовать "обои". В Netscape Navigator 3.0 для этого выбирается меню Options | General Preferences, затем в категории Colors ставится "галочка" Always Use My Colors, Overriding Document.

Синтаксис

Цветовая схема и "обои" определяются при помощи специальных атрибутов флага <BODY> (см. стр. 87). Описание этих атрибутов приведено в нижеследующей таблице.

Данная таблица требует некоторых пояснений.

Цвет задается последовательностью из шести шестнадцатеричных [115] цифр, следующих после двойных кавычек и символа #. Эта последовательность должна завершаться двойными кавычками и не должна содержать пробелов. Последовательность из шести цифр делится на три пары, определяющие интенсивность красной (Red), зеленой (Green) и синей (Blue) компоненты цвета соответственно (так называемое RGB - представление цвета). "Смешивая" чистые цвета в надлежащих пропорциях, получают желаемый оттенок и яркость. Определить цифровую кодировку желаемого цвета, за исключением черного (#000000), белого (#FFFFFF) и "чистых" (#FF0000, #00FF00 и #0000FF) цветов, без использования специальных программных средств практически невозможно. К счастью, большинство HTML-редакторов, в том числе и встроенный в Netscape Navigator Gold 3.0, дают возможность выбора цвета в диалоговом окне, освобождая автора от необходимости знать что либо об RGB-представлении и шестнадцатеричной системе счисления.

>>Пример<<

<HTML><HEAD><TITLE>Белый текст на черном фоне</TITLE></HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
<P>Белый текст на черном фоне.</P>
</BODY>
</HTML>

Что же касается использования изображения для создания рисунка "обоев", то такое изображение может загружаться из файла в одном из графических форматов, как об этом уже было рассказано выше (см. разделы, посвященные включению графики в HTML-документы на стр. 65 и 109).

Пусть, например, файл hatch.gif содержит вот такое изображение:

>>Пример<< (рисунок выбран специально, чтобы показать, что на фоне некоторых "обоев" текст довольно трудно читать)

<HTML>
<HEAD><TITLE>Текст на фоне обоев</TITLE></HEAD>
<BODY BACKGROUND="hatch.gif">
<H1>Текст на фоне обоев.</H1>
</BODY>
</HTML>

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

Символы < > & и " в HTML зарезервированы для служебных целей (например, символ < служит признаком начала флага). При необходимости использования какого-либо из этих четырех символов в тексте документа необходимо представлять его в виде определенного стандартом HTML сочетания символов (escape sequence, character entity) согласно таблице. В этой таблице также приведены сочетания ASCII-символов, которые можно использовать для кодирования символов, не входящих в таблицу ASCII, при написании HTML-документов на языках, использующих латинский алфавит.

*НП=Неразрывный пробел (Nonbreaking Space) используется в тех случаях, когда необходимо, чтобы два соседних слова всегда выводились на одной строке.

** Символ с кодом nnn, где nnn-десятичное число.

Замечание: использование приведенных в таблице последовательностей для кодировки символов, за исключением &lt; &gt; &amp; и &quot;, не гарантирует их правильного отображения программой просмотра. Вид отображения этих символов зависит от шрифта, используемого программой просмотра. Например, при работе с программой просмотра под Microsoft Windows последовательность &Ocirc; будет отображаться как Ф при использовании шрифта Times New Roman Cyr, Baltica или другого шрифта с кириллицей в кодировке Microsoft Windows (о кодировках см. также стр. 25). Возможно, положение вскоре улучшится с распространением универсальной кодировки символов Unicode.

Пример кодировки специальных символов

В HTML включение изображения осуществляется следующей командой:
<code>&lt;IMG SRC=&quot;<var>имя_файла</var>&quot;&gt;</code>

Как выглядит на дисплее

В HTML включение изображения осуществляется следующей командой: <IMG SRC="имя_файла">

[НАЧАЛО СТРАНИЦЫ]
[ПРЕДЫДУЩАЯ СТРАНИЦА][СЛЕДУЮЩАЯ СТРАНИЦА]
[ОГЛАВЛЕНИЕ][ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ]

Просьба присылать замечания и предложения по адресу: www@chemnet.chem.msu.su. Последние изменения внесены: 14 Июль, 1997

(C) D.N. Rassokhin, A.I. Lebedev