[ПРЕДЫДУЩАЯ
СТРАНИЦА][СЛЕДУЮЩАЯ
СТРАНИЦА]
[ОГЛАВЛЕНИЕ][ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ]
[КОНЕЦ СТРАНИЦЫ]
Настоящее руководство предназначено для авторов, создающих свои страницы WWW.
Оно отражает современное состояние языка HTML (стандарт языка [90] версии HTML 2, зафиксированный в документе RFC1866, и стандарт представления таблиц, изложенный в RFC1942). Описание конструкций языка проиллюстрировано одним или несколькими примерами. Каждый пример показывает некоторый фрагмент на языке HTML и визуальное представление данного фрагмента на дисплее при использовании графических программ просмотра, таких как Microsoft Internet Explorer 3.0 или Netscape Navigator 3.0. Кроме того, разобраны наиболее распространенные ошибки при использовании тех или иных элементов HTML.
Авторы сочли целесообразным включить в данное руководство некоторые расширения языка, уже поддерживаемые большинством программ просмотра, но отсутствующие в стандарте языка HTML 2. Эти конструкции языка приведены в документе HTML 3.2, также известном под именем "Wilbur".[91] При описании конструкций языка всегда оговаривается, если та или иная конструкция выходит за рамки стандарта и является потенциально несовместимой с некоторыми из программ просмотра.
Сведения о некоторых более сложных средствах представления информации в WWW, таких как рамки (frames), заполняемые формы, язык Java и некоторых других, заинтересованный читатель найдет в следующей главе (стр. 137).
HyperText Markup Language (HTML) - переводится как Язык Разметки Гипертекста. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Документ на языке HTML может включать следующие компоненты:
HTML является гибридом языка описания структуры документа, который позволяет задать взаимоотношения частей документа между собой и с другими документами, и языка описания страниц типа PostScript.
Перед тем, как приступить к описанию языка HTML, мы хотели бы отметить одну важную особенность этого языка. Подобно известному некоторым читателям языку TEX, язык HTML является подмножеством мощного языка SGML (Standard Generalized Markup Language), широко используемого в издательской деятельности (на нем, например, готовятся и печатаются журналы Physical Review и Physical Review Letters). Основная задача SGML - определить, как автору следует разметить текст и указать положение рисунков, чтобы издатель, не перенабирая текст, а изменив лишь несколько строк в стилевых файлах, мог изменять формат текста (например, переходить к набору в две колонки) и получать при этом полиграфически совершенный результат. Основной выигрыш от использования этих языков состоит в переносимости текста между разными издательскими системами. Эта же особенность - приоритет читателя над автором - в значительной степени сохраняется и в HTML. Так, читая документ, пользователи могут устанавливать способы выделения текста, гарнитуру и размер шрифтов по своему вкусу; они могут отменить просмотр рисунков. Компьютеры пользователей могут иметь экраны разных размеров с разным разрешением (от 640х480 до 1600х1280 пикселов), в результате чего максимальное количество символов, выводимых в строке, будет различным, и т. д. Всю эту адаптацию к условиям пользователя и выполняет программа просмотра. При этом, если текст HTML был написан неправильно, вид документа в окне программы просмотра может исказиться до неузнаваемости. Ясное понимание этой особенности языка HTML и следование формальным правилам разметки текста, о которых пойдет речь в этом разделе книги, позволит вам создавать документы, хорошо выглядящие во всех программах просмотра на разных типах компьютеров. Если вам не нравится эта специфика HTML и вы, как автор, хотите сохранить абсолютно неизменным созданный вами шедевр, вам следует закодировать его в форматах PostScript (ps) или Portable Document Format (pdf) . Программы просмотра, встретив файл в одном из этих форматов, вызовут соответствующую внешнюю программу, способную прочитать такой файл, - Ghostscript или Adobe Acrobat - на компьютере пользователя, если они, конечно, там установлены (см. также стр. 23 и 170).
Документ, написанный на HTML, представляет из себя текстовый файл, который можно писать и редактировать при помощи любых текстовых редакторов. Он включает в себя:
Графическая и звуковая информация, включаемая в HTML-документ при помощи специальных команд, хранится в отдельных файлах. Программы просмотра HTML-документов, такие как, например, Netscape Navigator, интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, принято расширение .htm (на серверах с операционной системой DOS) или суффикс .html (на серверах с операционными системами UNIX, Windows 95/NT и др.).
Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл:
< (Less Than)
> (Greater Than)
& (Ampersand)
" (Double Quote)
Символ табуляции, символ возврата каретки и символ перехода на новую строку считаются эквивалентными пробелу, а несколько следующих друг за другом пробелов и/или табуляций и/или символов возврата каретки и/или символов перехода на новую строку эквивалентны ровно одному пробелу, за исключением случая предварительно отформатированного текста, о котором будет сказано ниже.
Пример текста с пробелами и пустыми строками
Если вы желаете опубликовать что-либо в WWW, то вам следует придерживаться соглашений, принятых в HTML.
Как выглядит на дисплее
Если вы желаете опубликовать что-либо в WWW, то вам следует придерживаться соглашений, принятых в HTML.
Если необходимо включить в текст какой-либо из четырех зарезервированных символов < > & ", который, как было сказано выше, не может быть помещен в текст непосредственно, следует закодировать его специальной последовательностью символов. Каждая специальная последовательность начинается амперсендом ( & ) и заканчивается точкой с запятой ( ; ). Зарезервированные символы представляются следующими последовательностями: [92]
< < > > & & " "
Кроме кодировки зарезервированных символов, специальные последовательности служат для кодировки букв национальных алфавитов. Более подробная информация об этом приведена на стр. 134.
Пример
"Это предложение взято в кавычки." Символ & не может быть помещен в текст непосредственно.
Как выглядит на дисплее
"Это предложение взято в кавычки." Символ & не может быть помещен в текст непосредственно.
Флаги предназначены для форматирования и разметки документа. Любой флаг начинается символом < и заканчивается символом > . В названиях флагов строчные и прописные буквы считаются эквивалентными. Например, флаг <br> может быть записан как <BR>.
Существует два вида флагов: парные и непарные. Действие любого парного флага начинается с того места, где встретился открывающий флаг и заканчивается при встрече соответствующего закрывающего флага (признаком которого является символ /, следующий сразу после < ) или конца файла. Например, текст, следующий за флагом курсивного начертания <I> и продолжающийся до его закрывающего парного флага </I> выводится на экран курсивом.
Непарный флаг вызывает "единичное" действие в том месте, где он встречается. Например, флаг <BR> служит для перехода на новую строку при выводе текста.
Многие флаги могут включать дополнительные параметры, или атрибуты, модифицирующие эффект данного флага, например: <P> - флаг начала параграфа, <P ALIGN=CENTER> флаг начала параграфа, выровненного по центру окна.
Назначение различных флагов их атрибутов будет подробно рассмотрено в последующих разделах.
Типичный HTML-документ имеет головную часть и тело. Начало документа отмечается флагом <HTML>, а конец - флагом </HTML>.
Синтаксис
<HTML> <HEAD><TITLE>...</TITLE> </HEAD> <BODY>...</BODY> </HTML>
Пример
<HTML> <HEAD><TITLE>Vasya's Homepage</TITLE> </HEAD> <BODY>Добро пожаловать ко мне в гости!<BR>Рад вас видеть у себя дома. </BODY> </HTML>
Головная часть документа является служебной. Она обычно включает в себя название документа (см. далее). Кроме того, в нее часто помещается <META>-информация - ключевые слова и описание документа, которые читаются некоторыми программами-роботами (см. подробнее на стр. 43 и 78).
Синтаксис
<HEAD>...</HEAD>
Пример
<HEAD><TITLE>Caucasian Ovcharka Homepage</TITLE></HEAD>
Как выглядит на дисплее
(На дисплей вместе с остальной частью документа не выводится.)
Название документа помещается внутри его головной части. Оно выводится не вместе с самим документом, а в полосе заголовка окна [93] программы просмотра. Оно также используется и для других целей. Например, когда программа просмотра создает так называемую закладку (см. стр. 21), то есть запоминает местонахождение документа, к которому вы предполагаете в дальнейшем вернуться, этой закладке присваивается имя, которое берется из названия документа.
Поле title в документе является обязательным. Его не следует делать длиннее 64 символов. Название документа должно быть осмысленным, поскольку это поле читается программами-роботами и заносится в базы данных поисковых систем (см. стр. 43 и 78).
Синтаксис
<TITLE>...</TITLE>
Пример
<HEAD><TITLE>Caucasian Ovcharka Homepage</TITLE></HEAD>
Как выглядит на дисплее
(Выводится отдельно от самого документа)
Определяет "видимую" часть HTML-документа. В документе должно быть только одно тело.
Синтаксис [94]
<BODY>...</BODY>
Пример
<BODY>Это крошечный HTML-документ.</BODY>
Как выглядит на дисплее
Это крошечный HTML-документ.
Комментарий - это текст, который игнорируется программой просмотра. Комментарий предназначен в первую очередь для самого автора документа и может содержать дату создания, версию, замечания и т. п. Комментарии могут находиться в любой части документа, но не внутри флагов.
Синтаксис
<!-- текст_комментария -->[95]
Пример
<!-- This document was created from RTF source by rtftohtml version 2.7.5 -->
Как выглядит на дисплее
(На дисплей не выводится.)
Замечание: в виде комментария в HTML-файл могут быть помещены различные инструкции для WWW-сервера и других служебных программ. Например, при сответствующей настройке WWW-сервера комментарий <!--#exec cgi="/cgi-bin/counter"-->, включенный в HTML-файл, будет вызывать запуск программы counter каждый раз, когда кто-нибудь "берет" этот файл с сервера.
Флаг параграфа может использоваться и как парный, и как непарный [96] флаг. Он служит признаком начала нового параграфа (т.е., абзаца). Программа просмотра выводит перед началом параграфа пустую строку и начинает параграф с новой строки.
В сложившейся практике использования языка HTML (согласно документу "Wilbur", см. стр. 80) в качестве атрибута флага начала параграфа <P> можно задать параметр ALIGN, устанавливающий выравнивание (выключку) параграфа по левому полю, центру или правому полю. Если этот параметр не задавать, выравнивание производится по левому полю.
Синтаксис
Пример
<P>Это первый параграф.<P ALIGN=RIGHT>Это второй.<P>А это - третий. <P ALIGN=CENTER>Этот параграф выровнен по центру.</P>
Как выглядит на дисплее
Это первый параграф.
Это второй.
А это - третий.
Этот параграф выровнен по центру.
Замечание: прием, когда для увеличения расстояния между параграфами вводят несколько последовательных флагов <P><P><P>, не является правильным с точки зрения языка HTML и не будет поддерживаться в будущем. Поэтому авторы не рекомендуют использовать его при форматировании документа. "Правильная" программа просмотра "сожмет" несколько повторяющихся флагов <P> в один.
Текст, следующий за этим флагом, начинается с новой строки (в отличие от флага параграфа, пустая строка при этом в текст не вставляется).
В версии HTML "Wilbur" (см. стр. 80) для управления взаимным расположением текста и рисунков флаг BR можно использовать с атрибутом CLEAR. Использование этого параметра является достаточно специальным вопросом и мы не будем его здесь рассматривать.
Синтаксис
<BR>
Пример
МГУ<BR>Химический факультет<BR>Кафедра электрохимии.<BR>
Как выглядит на дисплее
МГУ
Химический факультет
Кафедра электрохимии
Замечание: как и для флага <P>, последовательность флагов <BR><BR><BR> не следует использовать для увеличения расстояния между строками текста.
Обычно используется для разделения текста на логические части. На месте этого флага рисуется горизонтальная линия. Обратите внимание, что данный флаг завершает текущий параграф и вызывает переход на новую строку.
В сложившейся практике использования языка HTML ("Wilbur") флаг <HR> часто используется с несколькими параметрами, определяющими длину линии по горизонтали в пикселах или процентных долях ширины экрана (WIDTH), ее ширину в пикселах (SIZE), положение на экране (ALIGN) - слева, по центру, справа, - а также вид (атрибут NOSHADE выводит линию черного цвета).
Синтаксис
<HR>
<HR ALIGN=LEFT|CENTER|RIGHT SIZE=nn WIDTH=mm | mm% NOSHADE> [97]
Пример
Первая логическая часть.<HR>Вторая.<HR><P ALIGN=CENTER> Третья.<HR ALIGN=CENTER WIDTH=50%>
Как выглядит на дисплее
Первая логическая часть.
Вторая.
Третья.
Используются для вывода заголовков и подзаголовков. Всего доступно шесть уровней, от 1 до 6, в порядке убывания их значимости. Рекомендуется, чтобы каждый документ содержал заголовок первого уровня (обычно это название документа, которое может и не совпадать с названием, помещенным в поле title). Стандарт языка не рекомендует "перепрыгивать" через уровни, то есть, например, использовать заголовок третьего уровня после заголовка первого уровня. Это может "сбить с толку" некоторые программы просмотра и послужить причиной неправильного форматирования документа. Также, этого "не любят" программы-конвертеры из формата HTML в другие форматы.
В документе "Wilbur" (см. стр. 80) указывается, что при помощи необязательного параметра ALIGN заголовок может быть выровнен ("выключен") по левому полю, центру или правому полю.
Флаг заголовка, в отличие от флага параграфа, должен использоваться только как парный флаг.
Синтаксис
Без выравнивания
<H1>...</H1> <H2>...</H2> <H3>...</H3> <H4>...</H4> <H5>...</H5> <H6>...</H6>
С выравниванием
<H1 ALIGN=LEFT>...</H1> <H1 ALIGN=CENTER>...</H1> <H1 ALIGN=RIGHT>...</H1>
(для остальных пяти уровней аналогично)
Пример
<HTML><HEAD><TITLE>Headers</TITLE></HEAD> <BODY> <H1>Заголовок верхнего уровня</H1> <H2>Заголовок второго уровня</H2> <H3 ALIGN=CENTER>Заголовок третьего уровня</H3> </BODY></HTML>
Замечание: для центрирования заголовка во многих документах в Internet часто можно встретить флаги <CENTER> </CENTER>, предложенные разработчиками фирмы Netscape Corporation как расширение HTML 2 и предназначенные для центрирования больших объемов текста. Поскольку эти флаги не поддерживаются многими программами просмотра, то для центрирования заголовка лучше использовать описанную выше конструкцию
<Hx ALIGN=CENTER></Hx>.
Замечание: имейте ввиду, что некоторые программы просмотра сами выбирают стиль представления заголовков каждого уровня, например курсивный шрифт и небольшой отступ от левого поля для заголовка <H3></H3>. Даже одна и та же версия программы Netscape под Windows и под UNIX будет показывать вашу страницу по-разному (в UNIX размеры букв обычно меньше). Помните, что как автор, вы не можете полностью контролировать средствами HTML вид вашего документа в окне программы просмотра.
Служит для представления информации в виде пронумерованного списка. Каждый элемент списка (List Item) выводится программой просмотра с новой строки, в начале которой автоматически проставляется порядковый номер данного элемента в списке.
В документе "Wilbur" указаны некоторые полезные атрибуты флага <OL>, которые по-видимому будут включены в следующий стандарт языка, например TYPE, который позволяет выбирать для нумерации буквы, арабские, или римские цифры.
Синтаксис
<OL> <LI>... <LI>... ... </OL>
Пример [98]
В черный порох входят три компонента: <OL><LI>калийная селитра,<LI>сера,<LI>древесный уголь.</OL>
Как выглядит на дисплее
В черный порох входят три компонента:
Используется для представления информации в виде простого списка. Каждому элементу списка на экране обычно предшествует символ, иногда называемый "пуля" (bullet).
"Wilbur" (см. стр. 80): В новых версиях ряда программ просмотра формой "пули" можно управлять с помощью атрибута TYPE.
Синтаксис
<UL> <LI>... <LI>... ... </UL>
Пример
<UL> <LI>Это - первый элемент списка.<LI>Второй элемент. <LI>Третий элемент. </UL>
Как выглядит на дисплее
Замечание: часто для представления списка без "пуль" используется неправильная конструкция <UL>...</UL> с записями, в которых исключен флаг <LI>. Для этой цели правильнее использовать флаг <DL> (см. ниже).
Используется для представления информации в виде списка-меню, в котором каждая запись занимает одну строку. Это позволяет сделать список более компактным по сравнению с конструкцией <UL>...</UL>. Формат такого списка зависит от используемой программы просмотра HTML-документа, однако многие программы просмотра используют <MENU> как "синоним" <UL>. Каждому элементу списка на экране обычно предшествует символ "пуля".
Синтаксис
<MENU> <LI>... <LI>... ... </MENU>
Пример
<MENU> <LI>Это - первый элемент списка-меню.<LI>Второй элемент. <LI>Третий элемент. </MENU>
Как выглядит на дисплее
Используется для представления коротких записей (обычно менее 20 символов) в виде списка-индекса. Позволяет формировать список в несколько колонок (обычно с шагом в 24 символа). Формат такого списка зависит от используемой программы просмотра HTML-документа. Обычно каждому элементу списка на экране предшествует символ "пуля".
Синтаксис
<DIR>
<LI>...
<LI>...
...
</DIR>
Пример
<DIR><LI>А-Л<LI>М-У<LI>Ф-Я
</DIR>
Как выглядит на дисплее
Как следует из названия, этот формат используется для оформления глоссариев. Термины (terms) помещаются в строки, начинающиеся флагом <DT>, а определения (definitions) - в строки, начинающиеся <DD>. Вся конструкция окружается флагами <DL> и </DL>. Программа просмотра выводит термины и определения по-разному, например, термины без отступа, а следующие за каждым из них определения - с отступом от левого поля. Если в <DL> задан атрибут COMPACT, некоторые программы просмотра выводят определения терминов на одной строке с самими терминами.
Синтаксис
<DL> <DT>...<DD>... <DT>...<DD>... ... </DL>
Пример
<DL> <DT>Верховье <DD>Часть реки, близкая к ее истокам. <DT>Вестибюль <DD>Большое помещение, отделяющее вход от внутренних частей здания. </DL>
Как выглядит на дисплее
Замечание: не следует использовать флаг <DD> для создания отступа. Например, программа просмотра Arena выделяет содержимое поля <DT> жирным шрифтом, за которым сразу же (без перевода строки) следует содержимое поля <DD>.
Списки одного или различных типов могут быть вложены один в другой. Необходимо быть особенно внимательным при расположении флагов начала и конца каждого списка! Чтобы не ошибиться, удобно записывать элементы вложенной конструкции с небольшим отступом, как показано в следующем примере. [100]
Пример
<OL> <LI>Это первый элемент пронумерованного списка. Он содержит вложенный список. <UL> <LI>Первый элемент вложенного списка. <LI>Второй. <LI>Третий. </UL> <LI>Второй элемент пронумерованного списка. </OL>
Как выглядит на дисплее
Синтаксис
<B>...</B>
Пример
Нажмите клавишу <B>Enter</B>, когда вы готовы.
Как выглядит на дисплее
Нажмите клавишу Enter, когда вы готовы.
Синтаксис
<I>...</I>
Пример
Есть сведения, что <I>de facto</I> он является руководителем этой организации.
Как выглядит на дисплее
Есть сведения, что de facto он является руководителем этой организации.
Этот флаг не является легальным в стандарте языка HTML 2. Возможно, он будет включен в последующие версии языка. Однако следует иметь в виду, что большинство программ просмотра использует подчеркивание для выделения гиперссылок, поэтому мы бы не рекомендовали использовать флаг подчеркивания, чтобы не запутать читателя.
Синтаксис
<U>...</U>
Пример
Есть сведения, что <u>de facto</u> он является руководителем этой организации.
Как выглядит на дисплее
Есть сведения, что de facto он является руководителем этой организации.
Текст выводится моноширинным шрифтом типа Курьер с сохранением всех принципов форматирования, принятых в HTML. Если вам надо сохранить неизменным формат представленной информации, вам следует использовать флаг <PRE>, описываемый ниже.
Синтаксис
<TT>...</TT>
Пример
...и он начал печатать: <BR><tt> Заявление<br>Прошу принять меня на работу...</tt>
Как выглядит на дисплее
...и он начал печатать:
Заявление
Прошу принять меня на работу...
Текст выводится моноширинным шрифтом типа Курьер (Courier) с сохранением оригинального формата, включая пробелы, возврат каретки и табуляцию. Может быть использован для вывода таблиц, листингов компьютерных программ и т. п. Единственное, что вам все же надо сделать - убрать все символы & < " и > из текста, заменив их при необходимости специальными последовательностями (см. стр. 83). Внутри предварительно отформатированного текста можно применять некоторые флаги форматирования, например, <B> и <I>.
Примечание: для оформления таблиц рекомендуется использовать не <PRE>, а специальные конструкции языка HTML, описание которых приведено ниже (см. стр. 128).
Синтаксис
<PRE>...</PRE>
Пример
<PRE> <B>Фамилия Балл</B> Иванов 102 Петров 90 Сидоров 87 </PRE>
Как выглядит на дисплее
Фамилия Балл Иванов 102 Петров 90 Сидоров 87
Подстрочные и надстрочные индексы широко используются при написании математических и химических формул. К сожалению, флаги, осуществляющие форматирование надстрочных и подстрочных символов, в стандарте HTML 2 отсутствуют.
Тем не менее многие программы просмотра уже долгое время поддерживают приводимые ниже флаги и можно надеяться, что они будут включены в ближайший стандарт языка.
Синтаксис
Подстрочный индекс:
<SUB>...</SUB>
Надстрочный индекс:
<SUP>...</SUP>
Пример
SO<SUB>4</SUB><SUP>2-</SUP> + Ba<SUP>2+</SUP> = BaSO<SUB>4</SUB>
Как выглядит на дисплее
SO42- + Ba2+ = BaSO4
В стандарте языка HTML 2 средства управления размером и цветом шрифта отсутствуют, так что описанный в этом разделе флаг <FONT> является нестандартным расширением HTML.
Размер шрифта выражается в некоторых условных единицах, изменяющихся от 1 до 7, и задается с помощью атрибута SIZE флага FONT. Можно задать либо абсолютный размер, либо его изменение относительно размера, установленного в программе просмотра по умолчанию (такому размеру приписывают значение 3). Цвет участка текста задается с помощью атрибута COLOR.
Синтаксис
Абсолютный размер:
<FONT SIZE="nn">...</FONT>
где nn - размер шрифта в произвольных единицах (от 1 до 7).
Относительный размер:
<FONT SIZE="+nn">...</FONT>
или
<FONT SIZE="-nn">...</FONT>
где nn - число пунктов, на которые шрифт будет увеличен (уменьшен) относительно шрифта, принимаемого по умолчанию.
Цвет:
<FONT COLOR="#RRGGBB">...</FONT>
где RR, GG и BB характеризуют доли, соответственно, красного, зеленого и синего компонент в цвете, которым будет выделена часть текста, заключенная между открывающим и закрывающим флагами. Значения RR, GG и BB выражаются в шестнадцатеричной системе счисления (подробнее об RGB-представлении цвета см. стр. 132).
Пример
<font size="-2">Привет! </font>Привет!! <font color="#FF0000" size="+4">Привет!!!</font>
Как выглядит на дисплее
Привет! Привет!! Привет!!!
Замечание: флаг FONT следует применять с большой осторожностью. Во-первых, он не поддерживается многими программами просмотра. Кроме того, программы-роботы не умеют правильно работать с выделенным текстом и не понимают заголовки, созданные с помощью <FONT>, а не <H1>. Наконец, выделенный цветом текст может оказаться невидимым, если на компьютере пользователя установлена "неудачная" палитра.
[НАЧАЛО СТРАНИЦЫ]
[ПРЕДЫДУЩАЯ СТРАНИЦА][СЛЕДУЮЩАЯ СТРАНИЦА]
[ОГЛАВЛЕНИЕ][ПРЕДМЕТНЫЙ
УКАЗАТЕЛЬ]
Просьба присылать замечания и предложения по адресу: www@chemnet.chem.msu.su. Последние изменения внесены: 14 Июль, 1997
(C) D.N. Rassokhin, A.I. Lebedev