На этом шаге мы рассмотрим пример использования этих тэгов.
Вернемся теперь к алгоритму, приведенному в начале прошлого шага, и рассмотрим его применение на конкретном примере.
Предположим, нужно получить HTML-документ, который отображался в браузере так, как показано на рисунке 1.
Рис.1. Результат просмотра HTML-документа в браузере
Здесь приведен фрагмент Delphi-приложения. Цвет фона фрагмента программы задан значением функции rgb: rgb(230,230,230); шрифт - Courier New; размер шрифта - 15 px.
Общие характеристики HTML-документа:
- шрифт - Times New Roman;
- цвет - синий;
- цвет фона документа - значение функции rgb(219,248,254);
- выравнивание - по ширине.
Кроме того, служебные слова выделены жирным шрифтом, а комментарии (символы, заключенные в фигурные скобки) - курсивом синего цвета.
Обратите внимание на то, что тексты программ размещаются в HTML-документах как предварительно отформатированный текст, поэтому разместим наш фрагмент приложения в тэге-контейнере <PRE>.
Прежде всего, реализуем два класса, позволяющие учесть перечисленные параметры документа и фона приложения (классы для отображения служебных слов и комментариев создадим позднее).
Текст HTML-документа может быть следующим:
<HTML>
<HEAD>
<TITLE>Пример использования тэга DIV</TITLE>
<STYLE>
<!--
#fon {
color: black;
background: rgb(230,230,230);
font-family: "Courier New";
font-size: 15px;
}
BODY {
color: blue;
font-family: "Times New Roman";
text-align: justify;
background: rgb(219,248,254); }
-->
</STYLE>
</HEAD>
<BODY>
Это обычный текст. А дальше идет фрагмент программы.
<DIV ID=fon>
<PRE>
type
TForm1 = class(TForm)
Button1: TButton;
Label1: TLabel;
procedure Button1Click(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;
</PRE>
</DIV>
</BODY>
</HTML>
Результат просмотра этого документа в браузере приведен на рисунке 2.
Рис.2. Результат просмотра HTML-документа в браузере
Если сравнить рисунки 1 и 2, то можно сделать вывод, что они различаются только отображением служебных слов и комментариев. Реализуем классы для их отображения:
. . . .
#comm {
color: blue;
font-style: italic;}
#sl_sl {
color: back;
font-weight: bold;}
. . . .
Обратите внимание: мы задали только цвета и стили отображения текста, остальные параметры будут унаследованы от параметров задания фона.
Теперь осталось поместить служебные слова и комментарии в тэги <DIV> с указанием соответствующего класса, например, так:
. . . .
<BODY>
Это обычный текст. А дальше идет фрагмент программы.
<DIV ID=fon>
<PRE>
<DIV ID=sl_sl>type</DIV>
TForm1 = <DIV ID=sl_sl>class</DIV>(TForm)
. . . .
Выполните указанные изменения созданного HTML-документа и просмотрите его в браузере. Объясните полученный результат.
Просмотр созданного документа в браузере даст не тот результат, который мы ожидали. Почему? Ведь сейчас служебные слова выделяются жирным, а комментарии отображаются курсивом синего цвета, что требовалось по условию задачи! Дело в том, что тэг <DIV> свое содержимое отображает на новой строке, а нам необходимо, чтобы фрагменты текста оставались на своих местах. Поэтому для решения этой задачи тэг <DIV> не подходит. В этом случае нужно воспользоваться тэгом <SPAN>, назначение которого то же, что и тэга <DIV>, однако он оставляет свое содержимое на месте.
Приведем полный текст HTML-документа, решающего указанную задачу.
<HTML>
<HEAD>
<TITLE>Пример использования тэга DIV</TITLE>
<STYLE>
<!--
#fon {
color: black;
background: rgb(230,230,230);
font-family: "Courier New";
font-size: 15px; }
#comm {
color: blue;
font-style: italic;}
#sl_sl {
color: back;
font-weight: bold;}
BODY {
color: blue;
font-family: "Times New Roman";
text-align: justify;
background: rgb(219,248,254); }
-->
</STYLE>
</HEAD>
<BODY>
Это обычный текст. А дальше идет фрагмент программы.
<DIV ID=fon>
<PRE>
<SPAN ID=sl_sl>type</SPAN>
TForm1 = <SPAN ID=sl_sl>class</SPAN>(TForm)
Button1: TButton;
Label1: TLabel;
<SPAN ID=sl_sl>procedure</SPAN> Button1Click(Sender: TObject);
<SPAN ID=sl_sl>private</SPAN>
<SPAN ID=comm>{ Private declarations }</SPAN>
<SPAN ID=sl_sl>public</SPAN>
<SPAN ID=comm>{ Public declarations }</SPAN>
<SPAN ID=sl_sl>end;</SPAN>
<SPAN ID=sl_sl>var</SPAN>
Form1: TForm1;
</PRE>
</DIV>
</BODY>
</HTML>
На следующем шаге мы рассмотрим отображение списков.
