2. Создание документов HTML

В этой главе мы займемся изготовлением простейших статических документов на языке HTML. Научившись создавать такие документы, вы сможете разместить их на сервере WWW поставщика услуг Internet или даже создать свой виртуальный сервер WWW на сервере этого поставщика.

Язык HTML в своем развитии прошел несколько версий. Заметим, что после версий 1.0 и 2.0 в марте 1995 года был подготовлен черновой вариант версии 3.0, в которой по сравнению с версией 2.0 было много добавлений. Не углубляясь пока в детали, отметим, что основные производители навигаторов (фирмы Netscape и Microsoft) разработали свои расширения языка HTML, которые оказались несовместимыми между собой. В настоящее время ситуация осталась прежней, хотя совместимость навигаторов Netscape Navigator версии 3.0 и Microsoft Internet Explorer версии 3.0 несколько улучшилась.

На смену неудачному, так и не реализованному стандарту языка HTML версии 3.0, был разработан стандарт версии 3.2. В разработке этого стандарта участвовали такие фирмы как Netscape Communications Corporation, Microsoft, IBM, Novell, SoftQuad, Sun Microsystems и Spyglass. Возможно, что такой представительный состав разработчиков стандарта положительно повлияет на совместимость навигаторов.

Первая страница HTML

Итак, начнем. Запустите в среде операционной системы Microsoft Windows 95 или Microsoft Windows NT программу Notepad и наберите текст, приведенный в листинге 2.1. Сохраните этот текст в файле с именем first.htm.

Листинг 2.1. Файл chap2\first.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>XYZ Incorporation</TITLE>
  </HEAD>
  <BODY>
    Добро пожаловать в мир серверов WWW!
  </BODY>
</HTML>

Убедитесь, что у вас установлен навигатор Microsoft Internet Explorer или Netscape Navigator. Рекомендации по установке этих навигаторов вы найдете в 23 томе нашей серии книг “Библиотека системного программиста”, который называется “Глобальные сети компьютеров. Практическое введение в Internet, E-Mail, FTP, WWW и HTML, программирование для Windows Sockets”.

Откройте папку, в которую вы сохранили файл first.htm и сделайте двойной щелчок левой клавишей мыши по пиктограмме файла. Сразу после этого будет автоматически запущен навигатор, в окне которого появится содержимое вашего документа. Другой способ просмотра документа HTML, записанного в файле, заключается в том что вы вначале запускаете навигатор, а затем открываете нужный файл с помощью меню. При использовании навигатора Microsoft Internet Explorer для открытия файла вы должны вначале выбрать из меню File строку Open, а затем в появившейся диалоговой панели Open Internet Address нажать кнопку Open File. После этого вы окажитесь в диалоговой панели с названием Open File, с помощью которой можно выбрать файл документа HTML, расположенный на локальном диске вашего компьютера.

На рис. 2.3 мы показали внешний вид документа first.htm при его просмотре с помощью навигатора Microsoft Internet Explorer.

Рис. 2.3. Внешний вид документа first.htm в окне навигатора Microsoft Internet Explorer

Рассмотрим на этом простейшем примере структуру документа HTML.

Структура документа HTML

Документ HTML содержит операторы, которые могут занимать одну или несколько строк. Например, оператор пролога <!DOCTYPE…> занимает одну строку и описывает тип документа как HTML версии 3.2 (здесь и далее многоточие после имени оператора означает, что оператор может иметь дополнительные параметры). Оператор <HTML> на самом деле состоит из открывающего оператора <HTML> и закрывающего оператора </HTML>, между которыми расположены другие операторы.

Рассмотрим операторы, использованные в нашем простейшем примере, более подробно.

Документ HTML версии 3.2 начинается с оператора <!DOCTYPE…> следующего вида:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Здесь W3C - название организации, разработавшей стандарт. Слово DTD (Document Type Definition) означает определение типа документа. Мы привели параметры оператора <!DOCTYPE…> для языка HTML версии 3.2. Параметры этого оператора для более ранних версий определены в соответствующих стандартах, доступных через Internet.

Заметим, что оператор пролога <!DOCTYPE…> может отсутствовать в документах HTML. Такие документы будут нормально отображаться в окне навигатора. Однако оператор <!DOCTYPE…> может оказать помощь навигатору при отображении страницы, так как он позволяет определить версию языка HTML, использованную при подготовке страницы.

Вслед за оператором пролога следует тело документа HTML, ограниченное операторами <HTML> и </HTML>, как это показано ниже:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  . . . (документ HTML)
</HTML>

Документ HTML состоит из двух основных частей - заголовка документа и тела документа.

Заголовок документа

Заголовок документа выделяется операторами <HEAD> и </HEAD>. Он может содержать другие операторы и занимать несколько строк. Тело документа занимает одну или несколько (возможно, достаточно много) строк. Оно выделяется операторами <BODY> и </BODY>.

Уточненная структура документа HTML представлена ниже:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    . . . (заголовок документа)
  </HEAD>
  <BODY>
    . . . (тело документа)
  </BODY>
</HTML>

Как видите, эта структура несложна.

В нашем первом документе HTML заголовок состоит всего из одной строки:


<TITLE>XYZ Incorporation</TITLE>

С помощью операторов <TITLE> и </TITLE> здесь задается строка заголовка страницы, которая отображается в заголовке главного окна навигатора (рис. 2.3). Каждый документ HTML должен иметь строку заголовка, определенную указанным выше способом. Эта строка идентифицирует документ и отображается навигатором не только в заголовке главного окна, но и в других местах, например, в списке посещенных страниц.

Есть ли ограничения на размер строки заголовка документа?

В стандарте не сказано о существовании таких ограничений, однако если удаленный пользователь работает в видеорежиме с низким разрешением (например, 640х480 пикселов), длинная строка заголовка страницы может не поместиться в заголовке окна.

Заголовок документа может содержать помимо оператора <TITLE> и другие операторы, которые мы рассмотрим позже. Однако оператор <TITLE> является обязательным для любого документа.

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

В отличие от заголовка, тело документа HTML, ограниченное операторами <BODY> и </BODY>, отображается во внутренней области окна навигатора.

В нашем простейшем примере тело состоит всего из одной приветственной строки:


<BODY>
  Добро пожаловать в мир серверов WWW!
</BODY>

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

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

Выравнивание параграфов текста

Тело нашего первого документа HTML состояло из одной текстовой строки. Реальные страницы HTML состоят из нескольких параграфов текста, которые выделяются операторами <P…> и </P>. Например:


<BODY>
  <P>Это первый параграф</P>
  <P>А это второй параграф</P>
</BODY>

Заметим, что оператор </P> является необязательным. Приведенные выше два параграфа можно было оформить и так:


<BODY>
  <P>Это первый параграф<P>А это второй параграф
</BODY>

Оператор <P> может иметь параметры, определяющие различные характеристики параграфа.

В стандарте языка HTML версии 3.2 определен параметр ALIGN, с помощью которого можно задать выравнивание параграфа по горизонтали. Этот параметр может иметь следующие значения:

Значение Тип выравнивания
LEFT По левой границе
CENTER Центрирование
RIGHT По правой границе

Для выравнивания строк параграфа, например, по левой границе, вы должны задать параметры оператора <P> следующим образом:


<P ALIGN=LEFT>Выравнивание по левой границе

Заметим, что выравнивание с помощью параметров оператора <P> работает не для всех навигаторов. В частности, навигатор Microsoft Internet Explorer версии 2.0 и даже 3.0 не выполняет центрирование параграфа указанным выше способом.

Тем не менее, существует универсальный способ центрирования параграфа, описанный в спецификации на язык HTML версии 3.2. Он заключается в использовании операторов <CENTER> и </CENTER>:


<P><CENTER>Центрирование параграфа</CENTER>

В листинге 2.2 мы привели исходный текст документа HTML, в котором демонстрируются различные способы выравнивания строк параграфа, в том числе и с использованием операторов <CENTER> и </CENTER>.

Листинг 2.2. Файл chap2\alighn.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>XYZ Incorporation</TITLE>
  </HEAD>
  <BODY>
    <P ALIGN=RIGHT>Выравнивание по правой границе
    <P ALIGN=LEFT>Это пример параграфа, выровненного 
по левой границе
    <P ALIGH=CENTER>Центрирование параграфа первым способом
    <P><CENTER>Центрирование параграфа вторым способом</CENTER>
  </BODY>
</HTML>

Загрузив этот документ в навигатор Microsoft Internet Explorer, вы сможете убедиться, что первый способ выравнивания, основанный на использовании параметра ALIGH=CENTER, здесь не работает (рис. 2.4). Аналогично ведет себя навигатор Netscape Explorer.

Рис. 2.4. Просмотр документа HTML, демонстрирующего различные способы выравнивания параграфов

В спецификации языка HTML версии 3.2 определен еще один способ выравнивания параграфов, основанный на использовании операторов <DIV…> и </DIV>. Параметры этого оператора указываются аналогично параметрам выравнивания оператора <P>. Например, выравнивание по левой границе выполняется следующим образом:


<DIV ALIGN=LEFT><P>Это пример параграфа, выровненного 
по левой границе</DIV>

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

С оператором <DIV…>, однако, тоже существует проблема. Она заключается в том, что этот оператор… не работает с навигаторами Netscape Explorer версии 3.0 и Microsoft Internet Explorer версии 3.0. Чтобы убедиться в этом, достаточно подготовить документ HTML, исходный текст которого приведен в листинге 2.3.

Листинг 2.3. Файл chap2\alighn2.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>XYZ Incorporation</TITLE>
  </HEAD>
  <BODY>
    <DIV ALIGN=RIGHT><P>Выравнивание по правой границе</DIV>
    <DIV ALIGN=LEFT><P>Это пример параграфа, выровненного 
по левой границе</DIV>
    <DIV ALIGH=CENTER>
      <P>Центрирование параграфа</P>
    </DIV>
    <DIV ALIGH=JUSTIFY>
      <P>Этот параграф выравнивается и по левой, 
и по правой границе окна навигатора
    </DIV>
  </BODY>
</HTML>

Результат просмотра этого документа показан на рис. 2.5.

Рис. 2.5. Центрирование, а также одновременное выравнивание по левому и правому краю с помощью оператора <DIV…> не работает в навигаторе Microsoft Internet Explorer версии 3.0

Какой способ центрирования параграфов лучше использовать в ваших документах?

Очевидно, лучше использовать тот способ, который будет работать с наиболее популярными навигаторами. В мире наибольшей популярностью пользуется навигатор Netscape Navigator. На втором месте стоит Microsoft Internet Explorer. Поэтому вам желательно обеспечить совместимость своих документов с этими навигаторами. Сказанное, относится, разумеется, не только к способам центрирования параграфов, но и к другим возможностям языка HTML.

Что же касается центрирования, вероятно, лучше всего пользоваться оператором <CENTER>:


<P><CENTER>Центрирование параграфа</CENTER>

Почему же вообще возникла проблема совместимости, когда есть спецификация на язык HTML?

Дело том, что первое время навигаторы, созданные фирмами Netscape и Microsoft, развивались независимо друг от друга. Каждая из этих фирм создала собственное программное обеспечение для серверов WWW и навигаторов, а также различные расширения языка HTML. При этом расширения фирмы-конкурента, разумеется, полностью игнорировались. С появлением версий 3.0 навигаторов Netscape Navigator и Microsoft Internet Explorer ситуация с совместимостью несколько улучшилась, однако маловероятно, что такая совместимость будет когда-либо полной. Поэтому создавая документы HTML, всегда проверяйте, как они выглядят при просмотре основными навигаторами.

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

Шрифтовое выделение

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

Изменение размера шрифта

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

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

Документы HTML обычно не содержат ссылок на название конкретного шрифта, такое, например, как Arial или Times New Roman. К тому же, в документах HTML не указывается точный размер шрифта в пунктах. Причина этого заключается в том, что разработчик документа HTML не может знать, какие шрифты используются для просмотра документа.

Пользователи могут работать в операционной системе Microsoft Windows, IBM OS/2 Warp или на компьютере Macintosh, они могут иметь различные наборы шрифтов. Поэтому нет смысла указывать название шрифта - скорее всего у пользователя шрифт с таким названием просто не установлен. В результате страница будет оформлена другим шрифтом, что может очень сильно изменить ее внешний вид.

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

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

Что же касается операторов языка HTML, управляющих размером шрифта, то они позволяют указать относительное изменение высоты символов, а не абсолютные значения.

Операторы <BIG> и <SMALL>

С помощью операторов <BIG> и <SMALL> вы можете, соответственно, увеличить и уменьшить высоту символов текста. Эти операторы используются в паре с операторами </BIG> и </SMALL>, например:


<BIG>Добро пожаловать в мир серверов WWW!</BIG>

Оператор <BASEFONT…>

Оператор <BASEFONT…> предназначен для изменения базового размера шрифта, его начертания и цвета. Параметры, определяющие начертание шрифта и цвет символов, мы рассмотрим немного позже. Что же касается базового размера шрифта, то он задаются параметром SIZE:


<P><BASEFONT SIZE=3>Размер шрифта равен 3

В этом примере базовый размер шрифта устанавливается равным 3, однако не следует думать, что здесь имеется в виду высота символов, равная 3 пунктам. Пользователь может изменить фактический размер шрифта, поэтому значение 3 следует рассматривать как относительное. По умолчанию навигаторы Microsoft Internet Explorer и Netscape Navigator используют для шрифта с размером 3 высоту символов, равную 12 пунктам.

Таблица соответствия базового размера шрифта, указанного в операторе <BASEFONT…>, и отображаемая навигатором Microsoft Internet Explorer показана ниже:

Значение параметра SIZE Размер символов в пикселах
1 9
2 10
3 12
4 14
5 18
6 24
7 36

Заметьте также, что параметр SIZE изменяет размер шрифта нелинейно. Если, например, размер символов для значений этого параметра 1 и 2 отличаются друг от друга на единицу, то для значений 6 и 7 разница составит 12 пикселов.

Оператор <FONT…>

С помощью оператора <FONT…> с параметром SIZE вы можете изменить текущий размер шрифта относительно базового значения, заданного оператором <BASEFONT…>.

В качестве значения для параметра SIZE вы можете указывать значения со знаками + или -. Например, в следующем примере первая строка имеет размер 3, а вторая - 6:


<P><BASEFONT SIZE=3>Размер шрифта равен 3
<P><FONT SIZE=+3>Размер шрифта равен 3+3=6

В листинге 2.4 мы привели пример документа HTML, в котором использованы описанные ранее операторы, предназначенные для изменения размера шрифта.

Листинг 1.4. Файл chap2\size.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>XYZ Incorporation</TITLE>
  </HEAD>
  <BODY>
    <P>
    <BIG>Добро пожаловать в мир серверов WWW!</BIG>
    <P>
    Образец нормального шрифта
    <P>
    <SMALL>
    Образец шрифта уменьшенной высоты
    </SMALL>
    <P><BASEFONT SIZE=3>Размер шрифта равен 3
    <P><FONT SIZE=+3>Размер шрифта равен 3+3=6
    <P><FONT SIZE=-1>Размер шрифта равен 3-1=2
  </BODY>
</HTML>

На рис. 2.6 показан внешний вид этого документа в окне навигатора Microsoft Internet Explorer.

Рис. 2.6. Изменение размера шрифта

Цвет в документах HTML

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

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

Обозначение цвета

Цвет отдельных элементов документа HTML определяется соответствующими параметрами операторов, создающих эти элементы. В качестве значения операторам необходимо передавать либо численное значение отдельных компонент цвета, либо символическое название цвета.

Численное значение указывается в виде #RRGGBB, где RR определяет содержание красной компоненты цвета, GG - зеленой, а BB - голубой.

Содержание компонент может изменяться в диапазоне от 0 до FF (шестнадцатеричное значение). Например, значение #FF0000 соответствует чистому красному цвету, а значение #00FF00 - чистому зеленому цвету.

Если вы ограничите себя только шестнадцатью цветами, допустимыми в режиме VGA, то сможете указывать цвет символически. Ниже мы привели список символических названий цвета, которые можно указывать в языке HTML:

Символическое название Цвет Численное значение
Aqua морская волна #00FFFF
Black черный #000000
Blue голубой #0000FF
Fuchsia малиновый #FF00FF
Gray серый #808080
Green зеленый #008000
Lime ярко-зеленый #00FF00
Maroon темно-красный #800000
Navy темно-синий #000080
Olive оливковый #808000
Purple пурпурный #800080
Red красный #FF0000
Silver серебряный #C0C0C0
Teal темная морская волна #008080
White белый #FFFFFF
Yellow желтый #FFFF00

К сожалению, символическое определение цвета не работает, если пользователь будет просматривать документ HTML навигатором Netscape Navigator версии 2.0. Навигатор Netscape Navigator версии 3.0, а также навигатор Microsoft Internet Explorer способен работать с символическим определением цвета.

Изменение цвета фона документа HTML

По умолчанию навигаторы отображают фон документов HTML серым цветом. С помощью параметра BGCOLOR оператора <BODY> вы можете изменить цвет фона документа HTML, значительно улучшив его внешний вид:


<BODY BGCOLOR=#FFFF00>

Другая возможность оформления заключается в использовании растровых изображений в качестве фона. Об этом мы расскажем позже.

Изменение цвета текста

Цвет текста легко изменить в операторе <FONT…>, задавая параметр COLOR. В приведенном ниже фрагменте документа текстовая строка отображается красным цветом:


<FONT COLOR=RED>Красный цвет

Здесь мы использовали символическое обозначение цвета.

Заметим, что в спецификации языка HTML версии 3.2 допускается определение цвета в операторе <BASEFONT…>, задающем параметры базового шрифта. Цвет определяется при помощи параметра COLOR, как и в операторе <FONT…>. К сожалению, определение цвета базового шрифта не работает в навигаторе Netscape Navigator версий 2.0 и 3.0. В этом можно убедиться на примере документа HTML, исходный текст которого приведен в листинге 2.5.

Листинг 2.5. Файл chap2\color.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>XYZ Incorporation</TITLE>
  </HEAD>
  <BODY BGCOLOR=YELLOW>
    <P>
    <P><BASEFONT COLOR=RED>Красный цвет
    <P><FONT SIZE=+3 COLOR=SILVER>Серебряный цвет
  </BODY>
</HTML>

Если просмотреть этот документ в среде навигатора Microsoft Internet Explorer, строка “Красный цвет” будет действительно отображаться красным цветом на желтом фоне. Навигатор Netscape Navigator покажет эту строку черным цветом.

Цвет в других элементах документа HTML

Многие операторы документа HTML позволяют задавать цвет определяемых ими элементов. Это ссылки на другие страницы HTML, таблицы, рамки, разделительные линии и так далее. Как правило, во всех операторах для указания цвета используется только что описанный нами параметр COLOR. По мере изучения языка HTML вы научитесь задавать цвет всех элементов документа HTML.

Изменение начертания шрифта

Очень часто для выделения отдельных предложений, слов или символов используется изменение начертания шрифта. При этом можно указывать наклонный, утолщенный, подчеркнутый или перечеркнутый шрифт, шрифт с малым или большим размером символов, шрифт с мигающими символами, шрифт для отображения надстрочных или подстрочных индексов и так далее. В ряде случаев вы можете указать даже название шрифта, такое например, как Arial или Times New Roman. Однако, как мы уже говорили, нельзя рассчитывать, что навигатор пользователя сможет отобразить текст указанным вами шрифтом - этот шрифт может отсутствовать в системе пользователя.

Физическое форматирование символов

В языке HTML определены операторы так называемого физического форматирования символов текста. Эти операторы определяют внешний вид символов явным образом.

Наряду с операторами физического форматирования существуют операторы логического форматирования, которые мы опишем в следующем разделе. Эти операторы предназначены для указания семантического (смыслового) назначения оформляемого текста. Анализируя операторы логического форматирования, навигатор самостоятельно подбирает для этого текста шрифтовое оформление.

Ниже мы перечислили операторы физического форматирования:

Оператор Описание
<B>, </B> Выделение жирным шрифтом
<I>, </I> Выделение наклонным шрифтом
<U>, </U> Выделение подчеркиванием
<STRIKE>, </STRIKE> Выделение перечеркиванием
<TT>, </TT> Оформление шрифтом с фиксированной шириной букв
<BIG>, </BIG> Текст с крупным размером букв
<SMALL>, </SMALL> Текст с малым размером букв
<BLINK>, </BLINK> Мигающий текст
<SUB>, </SUB> Подстрочный индекс
<SUP>, </SUP> Надстрочный индекс
Оператор <B>

Оператор <B> используется в паре с оператором </B> и предназначен для выделения фрагмента текста жирным шрифтом. Вот пример его использования:

Выделение символов <B>жирным шрифтом</B>

Операторы <I>, <U>, <STRIKE>

Операторы <I>, <U>, <STRIKE> предназначены, соответственно, для выделения наклонным, подчеркнутым и перечеркнутым шрифтом. Эти операторы используются в паре с операторами </I>, </U> и </STRIKE> аналогично только что рассмотренному оператору <B>.

Выбирая операторы шрифтового оформления, учтите, что навигатор Netscape Navigator первых версий не работает с оператором <U>. В навигаторе Netscape Navigator версии 3.0 этот недостаток устранен.

Оператор <TT>

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

Однако для отображения листингов программ и другой аналогичной информации удобно использовать шрифт с фиксированной шириной символов. С помощью оператора <TT>, который используется в паре с оператором </TT>, вы можете указать, что для отображения текста навигатор должен выбрать шрифт с фиксированной шириной символов. Напомним, что конкретный пропорциональный или фиксированный шрифт, которым выводится текст, зависит от настройки навигатора.

Операторы <BIG> и <SMALL>

Об операторах <BIG> и <SMALL> мы уже рассказывали в разделе “Изменение размера шрифта”. Первый из этих операторов увеличивает, а второй - уменьшает высоту символов отображаемого текста. Эти операторы необходимо использовать, соответственно, в паре с операторами </BIG> и </SMALL>.

Оператор <BLINK>

Оператор <BLINK>, который используется в паре с оператором </BLINK>, позволяет выделить текст миганием. Эта иллюминация, однако, будет видна только в навигаторе Netscape Navigator. Что же касается навигатора Microsoft Internet Explorer, то он игнорирует оператор <BLINK>. Впрочем, для создания динамических страниц имеются и другие, более мощные средства, которые мы рассмотрим позже в отдельной главе.

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

Операторы <SUP> и <SUB>

С помощью операторов <SUP> и <SUB>, которые используются в паре с операторами </SUP> и </SUB>, вы можете создать, соответственно, надстрочный и подстрочный индекс.

Пример использования операторов физического форматирования

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

Листинг 2.6. Файл chap2\physical.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Команды физического форматирования</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    Выделение символов <B>жирным шрифтом</B>
    <P>Выделение символов <I>наклоном</I>
    <P>Выделение символов <U>подчеркиванием</U>
    <P>Выделение символов <STRIKE>перечеркиванием</STRIKE>
    <P>Шрифт с <TT>фиксированной шириной символов</TT>
    <P><BIG>Крупные</BIG> символы и <SMALL>мелкие</SMALL> символы
    <P><BLINK>Мигающие</BLINK> символы
    <P>H<SUB>2</SUB>0 - это вода<SUP>*</SUP>
  </BODY>
</HTML>

Внешний вид этой страницы при ее просмотре в навигаторе Microsoft Internet Explorer версии 3.0 представлен на рис. 2.7.

Рис. 2.7. Физическое форматирование текста

Логическое форматирование символов

Как мы уже говорили, операторы логического форматирования предназначены для указания семантического (смыслового) назначения оформляемого текста. Они определяют не конкретный способ оформления, а указывают навигатору тип информации, подлежащей выделению. Способ выделения выбирается навигатором.

Ниже мы привели список операторов логического форматирования символов с кратким описанием.

Оператор Описание
<CITE>, Цитата
<EM>, </EM> Текст, имеющий особое значение
<STRONG>, </STRONG> Сильное выделение текста
<KBD>, </KBD> Текст, введенный пользователем
<CODE>, </CODE> Листинг программы
<SAMP>, </SAMP> Последовательность литералов
<VAR>, </VAR> Имя переменной
<!-- ... --> Комментарий

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

Оператор <CITE>

С помощью оператора <CITE> вы можете оформит в тексте цитату. Обычно цитата выделяется наклонным шрифтом. Оператор <CITE> должен использоваться в паре с оператором </CITE>.

Оператор <EM>

С помощью оператора <EM> вы можете оформить текст, имеющий особое значение. Название этого оператора произошло от слова emphasis, которое можно перевести как ударение, подчеркивание или особое значение. Такой текст обычно выделяется с использованием наклонного шрифта.

Оператор <STRONG>

Текст, выделенный оператором <STRONG>, отображается с использованием жирного шрифта. Вы можете выделять в тексте таким шрифтом отдельные слова или символы.

Оператор <KBD>

Оператор <KBD> предназначен для выделения текста шрифтом с фиксированной шириной символов. Это может быть, например, образец команд, введенных пользователем. Навигатор Microsoft Internet Explorer версии 3.0 отображает такой текст жирным шрифтом с фиксированной шириной символов, а навигатор Netscape Navigator использует фиксированный нежирный шрифт.

Оператор <CODE>

Специально для публикации листингов программ в документах HTML предназначен оператор <CODE>. Этот оператор предполагает использование нежирного шрифта с фиксированной шириной символов.

Оператор <SAMP>

С помощью оператора <SAMP> обычно выделяют отдельные слова или последовательность литеральных символов. Такой текст отображается нежирным шрифтом с фиксированной шириной символов.

Оператор <VAR>

Оператор <VAR> предназначен для выделения имен переменных или функций и используется обычно при описании листингов программ.

Операторы <!-- ... --> и <COMMENT>

Еще два оператора логического форматирования, которые мы рассмотрим в этом разделе, это операторы <!-- ... --> и <COMMENT>. Они предназначены для вставки в документ HTML строк комментария, которые не отображаются навигатором.

Заметим, что с помощью оператора <!-- ... --> можно вставлять не только однострочный, но и многострочный комментарий, например:


<!-- Это однострочный комментарий -->
<!--
А это
  многострочный 
    комментарий
-->

Навигатор Microsoft Internet Explorer допускает определение комментария с помощью оператора <COMMENT>, например, так:


<COMMENT>Однострочный комментарий</COMMENT>

Однако, навигатор Netscape Navigator версии 3.01 игнорирует оператор <COMMENT>, поэтому мы не рекомендуем им пользоваться.

Пример использования операторов логического форматирования

В листинге 2.7 мы привели пример использования команд логического форматирования.

Листинг 2.7. Файл chap2\logical.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
     <TITLE>Команды логического форматирования</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <CITE>Цитата</CITE>
    <P><EM>Текст, имеющий особое значение</EM>
    <P><STRONG>Сильно выделенный текст</STRONG>
    <P><KBD>Текст, введенный пользователем</KBD>
    <P><CODE>Листинг программы</CODE>
    <P><SAMP>Последовательность литералов</SAMP>
    <P><VAR>Имя переменной</VAR>
    <P><!-- Комментарий -->
  </BODY>
</HTML>

На рис. 2.8 показано, как этот документ выглядит в окне навигатора Microsoft Internet Explorer версии 3.0.

Рис. 2.8. Использование команд логического форматирования

Для того чтобы показать, что команды логического форматирования не предназначены для явного определения внешнего вида символов, приведем внешний вид этой же страницы при ее просмотре в навигаторе Netscape Navigator (рис. 2.9).

Рис. 2.9. Просмотр документа с логическим форматированием в окне навигатора Netscape Navigator

Как нетрудно заметить, Netscape Navigator не выделяет жирным шрифтом цитату и текст, имеющий особое значение, для оформления которых мы использовали, соответственно, операторы <CITE> и <EM>. Кроме того, не был выделен жирным шрифтом текст, оформленный командой <KBD>.

Вставка предварительно отформатированного текста

Еще одна возможность оформления символов, удобная, например, для размещения в документе листингов программ, связана с использованием команд <PRE> и </PRE>. Эти команды называются командами включения предварительно отформатированного текста.

Команда <PRE> имеет параметр WIDTH, который указывает максимальное количество символов в одной строке. По умолчанию значение этого параметра равно 80.

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

На включаемый отформатированный текст накладываются некоторые ограничения.

Во-первых, в таком тексте нельзя использовать оператор <P>. Переход к новой строке выполняется по символу новой строки, который обычно вставляется текстовыми редакторами после каждой строки.

Во-вторых, в предварительно отформатированном тексте нельзя использовать команды, определяющие формат параграфа. Тем не менее, можно использовать операторы форматирования символов, такие как <U>.

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

В листинге 2.8 мы привели исходный текст документа HTML, в который включен листинг программы.

Листинг 2.8. Файл chap2\preform.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Включение предварительно отформатированного текста</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    А вот несложная программа, составленная на языке Си:
    <PRE WIDTH="60">
      int main(int argc, char *argv[])
      {
        printf(&quot;Hello, world!&quot;);
      }
    </PRE>
  </BODY>
</HTML>

Заметьте, что символ кавычки в операторе printf здесь заменен на строку &quot;, так как этот символ является специальным.

Внешний вид страницы показан на рис. 2.10.

Рис. 2.10. Страница, содержащая предварительно отформатированный текст

Более просто, однако, можно выполнить форматирование листинга программ с помощью специально предназначенного для этого оператора <LISTING>, который используется в паре с оператором </LISTING>:


<LISTING>
int main(int argc, char *argv[])
{
  printf("Hello, world!");
}
</LISTING>

Обратите внимание, что при использовании оператора <LISTING> нет необходимости заменять символы кавычек на строку &quot;.

Хотя оператор <LISTING> не определен в спецификации языка HTML версии 3.2, он работает в навигаторах Microsoft Internet Explorer версии 3.0 и Netscape Navigator версии 3.01.

Отключение интерпретатора HTML

Если вы собираетесь разместить на страницах вашего сервера, например, учебник по языку HTML или большое количество листингов, содержащих специальные символы, вы можете воспользоваться оператором <PLAINTEXT>. Этот оператор, который, кстати, работает только с навигатором Microsoft Internet Explorer, отключает интерпретатор языка HTML, в результате чего текст документа будет отображаться без соответствующей обработки.

В листинге 2.9 мы привели исходный текст документа HTML, в котором используется оператор <PLAINTEXT>:

Листинг 2.9. Файл chap2\plain.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Отключение интерпретатора HTML</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <PLAINTEXT>Для выделения строки символов красным цветом
вы можете использовать следующую конструкцию
языка HTML:
      <P><FONT COLOR=RED>Строка красного цвета
    </PLAINTEXT>
  </BODY>
</HTML>

Внешний вид этого документа при его просмотре в окне навигатора Microsoft Internet Explorer показан на рис. 2.11.

Рис. 2.11. Демонстрация использования оператора <PLAINTEXT>

К сожалению, навигатор Netscape Navigator покажет этот же документ неправильно, так как он “не понимает” оператор <PLAINNTEXT>. Для того чтобы документ выглядел нормально в навигаторах Netscape Navigator и Microsoft Internet Explorer, вам придется отказаться от удобного оператора <PLAINNTEXT>, заменив специальные символы < и >, соответственно, на строки &lt; и &gt;, как это показано в листинге 2.10.

Листинг 2.10. Файл chap2\plain1.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Отключение интерпретатора HTML</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    Для выделения строки символов красным цветом
    вы можете использовать следующую конструкцию
    языка HTML:
    <P>&lt;FONT COLOR=RED&gt;Строка красного цвета
  </BODY>
</HTML>

Указание шрифта по его названию

Как мы уже говорили, трудно делать какие-либо предположения относительно шрифтов, установленных в системе удаленного пользователя. Тем не менее, с помощью параметра FACE оператора <FONT…> вы можете указать конкретные названия шрифтов, с использованием которых должен отображаться текст.

В одном параметре FACE можно указать несколько названий шрифтов, разделив эти названия запятыми:


<FONT FACE="Arial Cyr, Arial, Helv DL">Шрифт гельветика

Если в системе пользователя установлен шрифт Arial Cyr, то строка “Шрифт гельветика” будет отображаться с использованием именно этого шрифта. В противном случае будет сделана попытка отобразить строку шрифтом Arial, а затем Helv DL. Если окажется, что в системе нет ни одного из перечисленных шрифтов, строка будет отображена тем шрифтом, что установлен в навигаторе для использования по умолчанию.

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

Листинг 2.11. Файл chap2\font.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Образцы шрифтов</TITLE>
  </HEAD>
  <BODY BGCOLOR=WHITE>
    <P><FONT FACE="Arial Cyr, Arial, Helv DL">Шрифт гельветика
    <P><FONT FACE="Courier New Cyr, Courier New">Шрифт курьер
    <P><FONT FACE="Times New Roman Cyr, Times New Roman">Шрифт таймс
  </BODY>
</HTML>

На рис. 2.12 показано, как этот документ выглядит при его просмотре в окне навигатора Microsoft Internet Explorer.

Рис. 2.12. Выбор шрифта по его названию

Вставка специальных символов и символьных объектов

В языке HTML определены четыре специальных символа, предназначенных для служебных целей. Это символы <, >, & и “. Вы не можете вставлять специальные символы в обычный текст, вместо этого необходимо использовать следующую замену:

Символ Замена
< &lt;
> &gt;
& &amp;
" &quot;

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

При необходимости вы можете вставить в документ HTML байт с произвольным шестнадцатеричным кодом. Для этого вы должны включить в текст последовательность символов вида &#XX, где XX - шестнадцатеричное число в диапазоне от 0 до FF.

Символы, которые не входят в таблицу ASCII, могут быть представлены в специальном виде - как символьные объекты (character entities). К сожалению, некоторые редакторы документов HTML, например, редактор Microsoft Internet Assistant for Microsoft Word и Microsoft FrontPage представляет символы кириллицы именно таким образом, что существенно увеличивает объем документов HTML.

Ниже мы привели список символьных объектов. Пользуясь этим списком, вы можете, например, составить программу, которая послужит дополнением для редактора Microsoft Internet Assistant for Microsoft Word и будет выполнять обратную замену символьных объектов на символы кириллицы.

Имя объекта Символы кириллицы Латинские символы Описание соответствующего латинского символа
&Agrave; А À Прописная A, тупое ударение
&Aacute; Б Á Прописная A, сильное ударение
&Acirc; В Â Прописная A, диактрическое ударение
&Atilde; Г Ã Прописная A, тильда
&Auml; Д Ä Прописная A, умляут
&Aring; Е Å Прописная A, звонкое произношение
&AElig; Ж Æ Прописная AE, дифтонг
&Ccedil; З Ç Прописная C, седиль
&Egrave; И È Прописная E, тупое ударение
&Eacute; Й É Прописная E, сильное ударение
&Ecirc; К Ê Прописная E, диактрическое ударение
&Euml; Л Ë Прописная E, умляут
&Iacute; Н Í Прописная I, сильное ударение
&Igrave; М Ì Прописная I, тупое ударение
&Icirc; О Î Прописная I, диактрическое ударение
&Iuml; П Ï Прописная I, умляут
&ETH; Р Ð Прописная Eth
&Ntilde; С Ñ Прописная N, тильда
&Oacute; У Ó Прописная O, сильное ударение
&Ograve; Т Ò Прописная O, тупое ударение
&Aring; У Å Прописная A, звонкое произношение
&Ocirc; Ф Ô Прописная O, диактрическое ударение
&Otilde; Х Õ Прописная O, тильда
&Ouml; Ц Ö Прописная O, умляут
&Oslash; Ш Ø Прописная O, слэш
&Ugrave; Щ Ù Прописная U, тупое ударение
&Uacute; Ъ Ú Прописная U, сильное ударение
&Uuml; Ь Ü Прописная U, умляут
&Ucirc; Ы Û Прописная U, диактрическое ударение
&Yacute; Э Ý Прописная Y, сильное ударение
&THORN; Ю Þ Прописная THORN
&szlig; Я ß Строчная немецкая буква s с резким произношением
&agrave; а à Строчная a, тупое ударение
&aacute; б á Строчная a, сильное ударение
&acirc; в â Строчная a, диактрическое ударение
&atilde; г ã Строчная a, тильда
&auml; д ä Строчная a, умляут
&aring; е å Строчная a, звонкое произношение
&aelig; ж æ Строчная ae, дифтонг
&ccedil; з ç Строчная c, седиль
&egrave; и è Строчная e, тупое ударение
&eacute; й é Строчная e, сильное ударение
&ecirc; к ê Строчная e, диактрическое ударение
&euml; л ë Строчная e, умляут
&iacute; н í Строчная i, сильное ударение
&igrave; м ì Строчная i, тупое ударение
&icirc; о î Строчная i, диактрическое ударение
&iuml; п ï Строчная i, умляут
&eth; р ð Строчная eth
&ntilde; с ñ Строчная n, тильда
&ograve; т ò Строчная o, тупое ударение
&oacute; у ó Строчная o, сильное ударение
&ocirc; ф ô Строчная o, диактрическое ударение
&otilde; х õ Строчная o, тильда
&ouml; ц ö Строчная o, умляут
&oslash; ш ø Строчная o, слэш
&ugrave; щ ù Строчная u, тупое ударение
&uacute; ъ ú Строчная u, сильное ударение
&uuml; ь ü Строчная u, умляут
&ucirc; ы û Строчная u, диактрическое ударение
&yacute; э ý Строчная y, сильное ударение
&thorn; ю þ Строчная thorn
&yuml; я ÿ Строчная y, умляут
&reg; ® ® Зарегистрированная марка TradeMark
&copy; © © Права собственности Copyright
&nbsp;     Неразделяющий пробел

В приведенном выше списке нет букв “Ч” и “ч”. Эти буквы имеют коды, соответственно, &#215; и &#247;.

Выделение параграфа горизонтальной линией

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

Для того чтобы включить в документ HTML горизонтальную разделительную линию, вы должны использовать оператор <HR…>. Этот оператор имеет ряд параметров, определяющих внешний вид линии:

Название параметра Описание
ALIGN Параметр ALIGN определяет выравнивание линии. Этот параметр может иметь одно из следующих значений: LEFT (по левой границе), CENTER (центрирование), RIGHT (по правой границе). По умолчанию линия центрируется
COLOR Цвет разделительной линии. Этот параметр работает только в навигаторе Microsoft Internet Explorer
NOSHADE Если указан этот параметр, линия изображается плоской, без трехмерного выделения тенями
SIZE Высота разделительной линии в пикселах
WIDTH Ширина линии. Может указываться либо в пикселах, либо в процентном отношении от ширины окна. Если используется второй способ, после числа, задающего значение параметра, должен находится символ процента %

В листинге 2.12 мы привели документ HTML, в котором имеются разделительные линии различного вида.

Листинг 2.12. Файл chap2\horzline.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Горизонтальная разделительная линия</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    Эта линия используется по умолчанию
    <HR>
    Линия без трехмерного выделения
    <HR NOSHADE>
    <P>Выравнивание по левой границе
    <HR SIZE=8 WIDTH=50% ALIGN=LEFT COLOR=#FF0000>
    <P>Выравнивание по правой границе
    <HR SIZE=8 WIDTH=50% ALIGN=RIGHT COLOR=#FF0000>
    <P>Центрирование
    <HR SIZE=8 WIDTH=50% ALIGN=CENTER COLOR=#FF0000>
  </BODY>
</HTML>

Первая разделительная линия задается оператором <HR> без параметров. Она выглядит как тонкая линия с трехмерным выделением тенями (рис. 2.13).

Рис. 2.13. Документ HTML, содержащий несколько разных разделительных линий

При размещении второй линии указан параметр NOSHADE, поэтому эта линия не имеет трехмерного выделения.

Далее в документе HTML размещены три линии, которые имеют высоту 8 пикселов, ширину, равную половине ширине окна навигатора, красный цвет и различный тип выравнивания по горизонтали.

Заметим, что параметр COLOR, определяющий цвет линии, работает только в навигаторе Microsoft Internet Explorer. Для пользователей навигатора Netscape Navigator все линии в приведенном выше документе HTML будут черного цвета.

Есть и еще один интересный момент, связанный с использованием параметра COLOR. Линии, для которых указан цвет, автоматически теряют трехмерное выделение в окне навигатора Microsoft Internet Explorer.

Организация списков

Списки встречаются в документах очень часто. Обычно списки бывают нумерованными и ненумерованными (неупорядоченными). В последнем случае каждый элемент списка выделяется каким-либо символом, обычно жирной точкой.

Для создания списков в языке HTML определены операторы LI, UL, OL, MENU и DIR.

Неупорядоченные списки

Для создания неупорядоченного списка предназначен оператор <UL>, который используется в паре с оператором </UL>, закрывающем список. Каждая строка в списке отмечается оператором <LI>, как это показано ниже:


<UL>
  <LI>Первая строка
  <LI>Вторая строка
  <LI>Третья строка
</UL>

Если документ со списком предназначен для просмотра навигатором Netscape Navigator, вы можете добавить в оператор <LI> параметр TYPE. Этот параметр определяет внешний вид символа, который используется для выделения строки в списке, и может иметь следующие значения:

Значение оператора TYPE Символ, который используется для выделения
DISK Круглая жирная точка
CIRCLE Окружность
SQUARE Маленький черный квадрат

К сожалению, навигатор Microsoft Internet Explorer игнорирует параметры команды LI, используя для выделения только жирную точку.

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

Листинг 2.13. Файл chap2\list.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Ненумерованные списки</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <UL>
      <LI>Первая строка
      <LI>Вторая строка
      <LI>Третья строка
    </UL>
    <UL>
      <LI TYPE=DISK>Первая строка
      <LI TYPE=CIRCLE>Вторая строка
      <LI TYPE=SQUARE>Третья строка
    </UL>
  </BODY>
</HTML>

Внешний вид этого документа при его просмотре в навигаторе Netscape Navigator показан на рис. 2.14.

Рис. 2.14. Использование неупорядоченных списков

Если просматривать этот документ в навигаторе Microsoft Internet Explorer, то нижний список не будет ничем отличаться от верхнего.

Для создания неупорядоченных списков вы также можете использовать вместо оператора <UL> оператор <MENU> (вместе с оператором </MENU>). Элементы таких списков должны состоять из одиночных строк (наподобие строк меню).

Списки, созданные оператором <MENU>, выглядят более компактно, чем списки, сделанные при помощи оператора <UL>.

Нумерованные списки

Для создания нумерованных списков предназначен оператор <OL>, который необходимо использовать вместе с оператором </OL>. Нумерованный список создается аналогично только что рассмотренному неупорядоченному списку. Каждая строка в списке должна быть отмечена оператором <LI>.

В операторе <OL> можно указывать перечисленные ниже параметры:

Параметр Описание
START Начальный номер для списка
TYPE Тип нумерации:
A заглавными буквами
a прописными буквами
I заглавными римскими цифрами
i прописными римскими цифрами
1 арабскими цифрами
COMPACT Список должен отображаться компактно с уменьшением расстояния между строками

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

Листинг 2.14. Файл chap2\listol.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Нумерованные списки</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <OL>
      <LI>Первая строка
      <LI>Вторая строка
      <LI>Третья строка
    </OL>
    <OL TYPE=a>
      <LI>Первая строка
      <LI>Вторая строка
      <LI>Третья строка
    </OL>
  </BODY>
</HTML>

На рис. 2.15 мы привели исходный вид этого документа.

Рис. 2.15. Нумерованные списки

Заметим, что если бы во втором списке был указан параметр START со значением, например, c, строки списка были бы пронумерованы символами c, d и e.

Список каталогов

С помощью команды <DIR> создают списки, состоящие из коротких строк, имеющих длину до 20 символов.

В листинге 2.15 показан документ HTML, в котором присутствует список, созданный с помощью команды <DIR>.

Листинг 2.15. Файл chap2\listdir.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Ненумерованные списки</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <DIR>
      <LI>Первый;<LI>второй;
      <LI>третий;
      <LI>четвертый;
      <LI>пятый
  </DIR> 
  </BODY>
</HTML>

На рис. 2.16 мы показали внешний вид этого документа при его просмотре в окне навигатора Microsoft Internet Explorer.

Рис. 2.16. Список, созданный с использованием оператора <DIR>

Список определений

Если вам нужно разместить в документе HTML список определений каких либо терминов, то вы можете воспользоваться для этого операторами <DL>, <DT> и <DD>.

Оператор <DL> совместно с оператором </DL> отмечает начало и конец списка определений. Оператором <DT> отмечается строка, содержащая определяемый термин, а оператором <DT> - определение термина.

В листинге 2.16 приведен исходный текст документа HTML, содержащий список определений:

Листинг 2.16. Файл chap2\listdef.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Ненумерованные списки</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <DL>
      <DT><B>HTTP</B>
        <DD>Протокол передачи гипертекста HyperText
Transfer Protocol, используется для работы с
серверами WWW
      <DT><B>HTML</B>
        <DD>Язык разметки гипертекста HyperText Mark-up Language, 
обеспечивает возможность разметки гипертекста
для его размещения на сервере WWW
    </DL> 
  </BODY>
</HTML>

В этом документе определяемые термины для наглядности дополнительно выделены жирным шрифтом, для чего использован оператор <B>.

Внешний вид получившегося списка определений показан на рис. 2.17.

Рис. 2.17. Список определений терминов

Бегущая строка

С помощью оператора <MARQUEE>, который используется в паре с оператором </MARQUEE>, можно разместить на экране бегущую строку, например:


<MARQUEE>Бегущая строка…Бегущая строка…</MARQUEE>

Бегущая строка может быть использована для привлечения внимания пользователя, однако не злоупотребляйте этой возможностью - неуместная бегущая строка может раздражать пользователя и он покинет вашу страницу, так и не прочитав на ней что-нибудь важное…

Оператор <META>

Оператор <META>XE "<META>" обеспечивает для навигатора дополнительную информацию о документе HTML. С помощью этого оператора вы можете отменить кэширование документа, заставить навигатор выполнять загрузку документа HTML периодически с заданным интервалом времени. Можно сделать так, чтобы навигатор через заданное время после загрузки документа HTML автоматически загрузил другой документ HTML.

Рассмотрим параметры оператора <META>.

Параметр Описание
CONTENT Содержимое дополнительной информации, которая связана с заданным именем или ответным заголовком протокола HTTP. Может использоваться вместе с параметром URL, для определения даты и времени, когда необходимо выполнить повторную загрузку документа HTML
CHARSET Этот параметр определяет набор символов, который используется в данном документе HTML. Параметр CHARSET указывается в составе оператора CONTENT
HTTP-EQUIV Параметр HTTP-EQUIV выполняет привязку к ответному заголовку HTTP. Эта информация может использоваться различными навигаторами по-разному
NAME Имя дополнительной информации
URL Адрес URL документа HTML. Параметр URL указывается в составе оператора CONTENT

Ниже мы привели несколько примеров использования оператора <META>.

Отмена кэширования страницы

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

Однако в ряде случаев кэширование следует отменить. Это нужно сделать, например, если содержимое страницы изменяется динамически сервером (о создании динамических страниц мы расскажем в седьмой и восьмой главах нашей книги). Если такая страница будет кэшироваться, пользователь не заметит изменений.

Как отменить кэширование?

Это можно сделать, если в секции заголовка, созданного оператором <HEAD>, указать оператор <META> следующего вида:


<META HTTP-EQUIV="Expires" CONTENT="Tue, 02 Jan 1996 01:00:00 GMT">

Заметим, что дата, указанная в параметре CONTENT, уже должна наступить. В этом случае документ с таким заголовком будет всегда устаревшим и навигатор каждый раз будет загружать его заново.

Автоматическая перезагрузка документа

Если какой-либо документ периодически обновляется на сервере, вы можете сообщить навигатору, что этот документ надо время от времени перезагружать. Такая перезагрузка выполняется с использованием методики, которая называется client pull, что можно перевести как запрос данных со стороны клиента (то есть навигатора).

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


<META HTTP-EQUIV="Refresh" CONTENT=3>

Автоматическая загрузка другого документа

С помощью оператора <META> можно решить такую задачу, как автоматическая загрузка заданного документа HTML через определенный интервал времени.

Для чего это может потребоваться?

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

В приведенном ниже фрагменте через 15 секунд после загрузки текущего документа будет загружен документ с адресом http://www.my.ru/hello1.htm:


<META HTTP-EQUIV="Refresh" CONTENT="15; URL=http://www.my.ru/hello1.htm">

Включение дополнительных заголовков HTTP

С помощью оператора <META> вы можете включить любые дополнительные заголовки HTTP. Эти заголовки будут передаваться вместе с вашим документом навигатору.

Например, разместим в заголовке следующие операторы:


<META HTTP-EQUIV="Expires" CONTENT="Tue, 02 Jan 1996 01:00:00 GMT">
< META HTTP-EQUIV ="Keywords" CONTENT="Write, Read">

При этом будут сформированы следующие дополнительные заголовки HTTP:


Expires: Tue, 02 Jan 1996 01:00:00 GMT
Keywords: Write, Read

Определение набора символов

В примере, приведенном ниже, указывается, что документ HTML оформлен с использованием кодовой страницы 1251 для операционной системы Windows:


<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">

Эта кодовая страница содержит символы кириллицы и указывается для России.

Таблицы стилей

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

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

Для упрощения оформления документов современные текстовые процессоры, такие, например, как Microsoft Word, используют оформление по образцу. Образцы содержат в себе описания параметров оформления и называются стилями. Например, в стиле может быть указано, что заголовок второго уровня отображается красным цветом и должен быть отцентрирован.

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

Вернемся к проблеме оформления большого количества документов HTML. Для решения этой проблемы вы можете использовать так называемые каскадные таблицы стилей Cascading Style Sheets (CSS), разработанные консорциумом World Wide Web Consortium (W3C).

Полное описание текущей редакции каскадных таблиц стилей вы можете найти на сервере консорциума W3C по адресу http://www.w3.org/pub/WWW/TR/WD-css1.html. Кроме того, мы рекомендуем вам обязательно познакомиться с описанием таблиц стилей A User's Guide to Style Sheets, расположенном на сервере http://www.microsoft.com. Мы же расскажем вам только о самых важных возможностях таблиц стилей, реализованных в навигаторе Microsoft Internet Explorer версии 3.0.

Что же касается навигатора Netscape Navigator версии 3.0, то он не работает со стилями. Однако в ближайшем будущем фирма Netscape планирует добавить такую возможность в свой навигатор.

Способы использования стилей

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

Общие таблицы стилей для нескольких документов HTML

Наиболее интересное применение таблиц стилей - это их использование для оформления многих, возможно, даже всех документов HTML, расположенных на вашем сервере. При этом выполняется подключение (linking) файлов таблиц стилей к документам HTML. Имя файла таблицы стилей должно иметь вид *.css.

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

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

Встраивание таблиц стилей в документы HTML

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

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

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

Встраивание стилей в операторы HTML

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

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

Создание файлов таблиц стилей

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

Внешний вид файла таблицы стилей лучше изучать на конкретном примере (листинг 2.17).

Листинг 2.17. Файл chap2\styles\styles.css


H1 { font-size: 24;
     font-weigt: bold;
     color: red;
     margin-left: 10% }

H2 { font-size: 20;
     font-weigt: bold;
     color: black; 
     font-family: Courier }

P.italic { font-style: italic }
P.red { color: red }

Здесь мы определили стили H1, H2, P.italic и P.red.

Определение стиля начинается с имени класса (например, H1), вслед за которым в фигурных скобках перечисляются параметры стиля. Для стиля с классом H1 мы указали размер шрифта, равный 24 пунктам, задали утолщение, красный цвет и отступ с левой стороны на 10 процентов от ширины экрана.

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

Ссылка на файл таблицы стилей

Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить оператор <LINK>. Пример ссылки на файл таблицы стилей вы можете найти в листинге 2.18.

Листинг 2.18. Файл chap2\styles\cssdemo.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Команды логического форматирования</TITLE>
    <LINK REL=STYLESHEET HREF="styles.css" TYPE="text/css">
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <H1>Заголовок первого уровня</H1>
    <P>Обычный текст
    <H2>Заголовок второго уровня</H2>
    <P CLASS=italic>Наклонный текст
    <P CLASS=red>Текст красного цвета
  </BODY>
</HTML>

Параметры оператора <LINK> необходимо задавать, как указано в этом примере. В параметре HREF должен быть указан адрес URL файла таблицы стилей. Этот файл может находиться на любом сервере WWW, а не только на том, где размещен данный документ HTML.

Как пользоваться стилями из файла таблицы стилей?

Очень просто.

Если в файле определены параметры для операторов языка HTML, предназначенных для оформления текста (например, для операторов <H1> или <H2>, как в нашем примере), вы просто указываете эти операторы без изменений:


<H1>Заголовок первого уровня</H1>
<P>Обычный текст
<H2>Заголовок второго уровня</H2>

Однако при определении стиля вы можете не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. Например, ниже определены классы italic и red для оператора <P>:


P.italic { font-style: italic }
P.red { color: red }

Для того чтобы задействовать созданные классы, вы должны указать имя нужного класса в параметре CLASS оператора <P> (или другого оператора форматирования текста), как это показано ниже:


<P CLASS=italic>Наклонный текст
<P CLASS=red>Текст красного цвета

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

Рис. 2.18. Внешний вид документа, оформленного с использованием файла таблицы стилей

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

Заголовок второго уровня изображен с использованием шрифта с фиксированной шириной символов, так как в соответствующем стиле было указано семейство шрифтов Courier.

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

Стили в документе HTML

Вы можете встроить таблицу стилей непосредственно в документ HTML, для чего нужно использовать оператор <STYLE>. Этот оператор применяется в паре с закрывающим оператором </STYLE>. Между операторами <STYLE> и </STYLE> находится таблица стилей.

В листинге 2.19 мы привели пример документа HTML, в который встроена таблица стилей.

Листинг 2.19. Файл chap2\styles\embed.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Встроенная таблица стилей</TITLE>
    <STYLE TYPE="text/css">
      <!--
      H1 { font-size: 24;
           font-weigt: bold;
           color: red;
           margin-left: 10% }

      H2 { font-size: 20;
           font-weigt: bold;
           color: black; 
           font-family: Courier }

      P.italic { font-style: italic }
      P.red { color: red }
      -->
    </STYLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <H1>Заголовок первого уровня</H1>
    <P>Обычный текст
    <H2>Заголовок второго уровня</H2>
    <P CLASS=italic>Наклонный текст
    <P CLASS=red>Текст красного цвета
  </BODY>
</HTML>

Внешний вид этого документа при просмотре в навигаторе Microsoft Internet Explorer аналогичен показанному на рис. 2.18. Навигатор Netscape Navigator, как и в предыдущем случае, игнорирует стилевое оформление.

Обратите внимание на использование оператора комментария <!-- -->. Когда документ просматривается навигатором, не распознающем стилевое оформление, то такой навигатор проигнорирует как оператор <STYLE>, так и таблицу стилей. Если убрать оператор комментария, таблица стилей появится в окне навигатора, чего вы, очевидно, не хотели.

Стили в операторах HTML

Указывая в операторах оформления текста параметр CLASS, вы можете непосредственно задавать параметры стилевого оформления. Соответствующий пример документа HTML мы привели в листинге 2.20.

Листинг 2.20. Файл chap2\styles\inline.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Встроенные стили</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <H1 STYLE="font-size: 24; font-weigt: bold; color: red;
        margin-left: 10%">Заголовок первого уровня</H1>

    <P>Обычный текст

    <H2 STYLE="font-size: 20; font-weigt: bold;
        color: black; 
        font-family: Courier">Заголовок второго уровня</H2>

    <P  STYLE="font-style: italic">Наклонный текст
    <P  STYLE="color: red">Текст красного цвета
  </BODY>
</HTML>

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