Борьба с ограничениями HTML
До известной степени все же можно управлять внешним видом выводимого текста. Для этого существует тэговая пара<FONT> </FONT>. У этого тэга есть несколько атрибутов.
Атрибут FAСE указывает, каким именно шрифтом следует вывести текст, расположенный внутри тэговой пары. Например:
<FONT FAСE=”Arial”> Этот текст необходимо вывести шрифтом Arial</FONT>
В данном примере мы указали Web – браузеру, что текст, заключенный внутри тэговой пары <FONT>, следует вывести, используя шрифт Arial. И Web – браузер именно так и поступит, если только на компьютере, на котором он запущен, установлен это шрифт. А если нет? В этом случае, текст будет выведен установленным по умолчанию шрифтом. В атрибуте FASE можно через запятую задать несколько шрифтов, тогда если не будет в наличии первого, то текст будет выведен вторым или последующим из списка, который установлен в системе:
<FONT FAСE=”Arial, Academy,Antigua”> Этот текст необходимо вывести шрифтом Arial или Academy или Antigua</FONT>
На практике создают Web – приложения, используя лишь самые распространенные шрифты, такие как Arial и Time New Roman.
У тэга <FONT> есть и другие атрибуты. Атрибут SIZE отвечает за размер символов выводимого текста. По умолчанию этот атрибут равен 3. Если атрибут указать большим числом размер шрифта увеличится, если меньшим – уменьшится.
<FONT SIZE =5> Крупный шрифт </FONT>
<FONT SIZE =3> Мелкий шрифт </FONT>
Рис. 9.4 Применение тэга FONT SIZE
Цвета и цветовые триады
Еще один важный атрибут –COLOR, управляющий цветом выводимого текста.
Любой видимый нами цвет – есть смесь цветовых лучей спектра. В электронно-лучевых трубках любой цветовой оттенок получают путем смешения трех цветовых составляющих: красной, зеленой и синей. От интенсивности той или иной составляющей зависит итоговой оттенок. Например, если взять 100% красного луча, мешать его со 100% зеленного, то получится желтый цвет. Если смешать 100% всех трех составляющих, получиться белый цвет.
В атрибуте COLOR любой цвет устанавливается, как комбинация красной, зеленой и синей составляющей (red, green, blue – RGB). Однако указывается не процент того или иного цвета, содержащегося в комбинации, а некое число от 0 до 2555, которое характеризует процентное соотношение данного цвета в комбинации. Все числа указываются не в десятичном, а в шестнадцатеричном виде.
Шестнадцатеричное число, это число, составленное из десяти цифр (от 0 до 9) и шести первых литер латинского алфавита (A,B,C,D,E,F) например 12, 3E, 9F,AA,C2 и т.д. Атрибуту COLOR указывается цвет в виде триады: COLOR =#RGB, например (рис.9.4):
<FONT COLOR=#FF0000>Красный цвет</FONT><BR>
<FONT COLOR=#00FF00>Зеленый цвет</FONT><BR>
<FONT COLOR=#0000FF>Синий цвет</FONT><BR>
<FONT COLOR=#С0С0С0>Серый цвет</FONT><BR>
Рис. 9.5 Пример использования тэга COLOR.
Все атрибуты тэга <FONT> можно использовать одновременно, например(рис.9.6):
<FONT Face = "Arial" COLOR=#00FF00 SIZE=15> крупный зеленый шрифт гарнитуры Arial</FONT>
Рис. 9.6 Пример использования нескольких атрибутов <FONT>
В рамках одного тэга можно использовать произвольное количество его атрибутов.
Следующий тэг, который мы рассмотрим – это тэг начало абзаца <P> </P>. Используя этот тэг можно один абзац отделить от другого. В простейшей форме этот тэг идентичен тэгу <BR>.
Листинг 4 Разбивка на абзацы(рис.9.7).
<HTML>
<HEAD>
<TITLE> АБЗАЦЫ</TITLE>
</HEAD>
<BODY>
<P>« Там, где собираются мошенники, всегда есть и дураки; а если имеется достаточное количество дураков, они представляют собой более выгодный объект эксплуатации для мошенников.</P>
<P> Психология дурака стала вопросом, вполне достойным серьезного внимания мошенников. Вместо того, чтобы добиваться своей конечной выгоды, дурак действует так, что его образ действий в общем можно предсказать в такой же степени, как попытки крысы найти путь в лабиринте.</P>
<P> К счастью для нас, люди не бывают только дураками или только мошенниками».</P>
<P> Ноберт Винер «Кибернетика или управление и связь в животном и машине» </P>
</BODY>
</HTML>
Рис. 9.7 Результат Листинга 4
Тэг <P> устанавливает интервал между абзацами, чего нет при использовании тэга <BR>.
Но точно также можно было бы структурировать этот текст, если использовать парный тэг <P> .</P>, а в тех местах, где стоит закрывающий .</P>, поставить тэг <BR>. Так зачем, же введен дополнительный тэг?
У тэга <P> имеется атрибут ALIGN, с помощью которого можно управлять форматированием текста внутри данного абзаца. Рассмотрим листинг
Листинг 5 (рис. 9.8)
<HTML>
<HEAD>
<TITLE> АБЗАЦЫ</TITLE>
</HEAD>
<BODY>
<P ALIGN=LEFT><FONT SIZE =5>Текст, прижатый к левому полю</FONT></P>
<P ALIGN=CENTER> Текст, по центру</P>
<P ALIGN=RIGHT> Текст, прижатый к правому полю</P>
</BODY>
</HTML>
Рис. 9.8 Иллюстрация использования атрибута ALIGN.
Используя тэг FONT, можно несколько разнообразить внешний вид страницы, как это показано в листинге.
Листинг 6 Формирование текста и изменение его внешнего вида (рис. 9.9).
<HTML>
<HEAD>
<TITLE> АБЗАЦЫ</TITLE>
</HEAD>
<BODY>
<FONT COLOR=#FF0000 SIZE=7>
<P ALIGN=LEFT> Текст, прижатый к левому полю</P></FONT>
<FONT COLOR=#00FF00 SIZE=5>
<P ALIGN=CENTER> Текст, по центру</P></FONT>
<FONT COLOR=#0000FF SIZE=3>
<P ALIGN=RIGHT> Текст, прижатый к правому полю</P></FONT>
</BODY>
</HTML>
Рис. 9.9 Форматирование вводимого текста.
Другие тэги работы с текстом
Наконец, следует кратко коснуться и остальных тэгов, которые чаще всего используются для создания дополнительных визуальных эффектов при работе с текстом.
Во-первых, это уже известный нам тэг <BODY>, который имеет несколько атрибутов. Применительно к оформлению текста, нас интересует атрибуты BGCOLOR и TEXT. Атрибут BGCOLOR устанавливает цвет фона, а атрибут TEXT – цвет текста. Оба атрибута используют цветовую триаду RGB. В приведенном фрагменте показана установка красного цвета символов на черном фоне для всего HTML – документа (рис. 9.10):
<BODY BGCOLOR=#000000 TEXT=#FF0000>
<P ALIGN=LEFT> Текст, прижатый к левому полю</P></FONT>
Рис. 9. 10 Пример применения тэга
BODY BGCOLOR
В любом месте документа цвет символов можно изменить с использованием уже известного нам тэга FONT, но вот цвет фона изменить нельзя.
Любой текстовый редактор позволяет менять начертание шрифта, делая текст жирным (bold), наклонным (italic) или подчеркнутый (underline). Все три варианта начертания можно получить, используя тэги, соответственно: <B> </B>, <I></I> <U> и </U>.
Листинг 7 Варианты начертания (рис. 9.11).
<HTML>
<HEAD>
<TITLE> Варианты начертания</TITLE>
</HEAD>
<BODY>
Простой текст, а это <B> <I> <U> жирный, наклонный и подчеркнутый </U> </I> </B> текст
</BODY>
</HTML>
Рис. 9.11 Варианты начертания текста
HTML дает возможность менять начертание символов. Обратите внимание , что применение сразу трех тэгов дало тройной эффект, закрывающиеся тэги идут в обратном порядке:
<B> <I> <U> . . . . </U> </I> </B>
Существуют тэги, для заголовков. В примере описано шесть заголовков, причем каждый последующий выводится шрифтом меньшего размера (рис. 9.12).
<H1> Заголовок 1</H1>
<H2> Заголовок 2</H2>
<H3> Заголовок 3 </H3>
<H4> Заголовок 4</H4>
<H5> Заголовок 5</H5>
<H6> Заголовок 6 </H6>
Рис. 9.12 Пример применения тэгов заголовок
Пара тэгов <BIG> и </BIG> увеличивает размер символов, заключенных между ними на единицу. Причем речь идет о внутренних единицах HTML документа. Уменьшение на единицу достигается тэгами <SMALL> и </SMALL>. Несколько подряд идущих тэгов увеличения (уменьшения) изменяют размер шрифта на несколько единиц.
Наконец можно представить текст в виде списков. Чаще всего используется нумерованный список (тэговая пара <OL>) и маркированный (тэговая пара <UL>)/ Каждый элемент списка обрамляется тэговой парой <LI>. Например:
Листинг 8 СПИСКИ
<HTML>
<HEAD>
<TITLE> Списки</TITLE>
</HEAD>
<BODY>
<H2> Нумерованный список </H2>
<OL>
<LI> Элемент</LI>
<LI> Элемент</LI>
<LI> Элемент</LI>
</OL>
<H2> Маркированный список </H2>
<UL>
<LI> Первый</LI>
<LI> Второй</LI>
<LI> Третий</LI>
</UL>
</BODY>
</HTML>
Этот HTML – документ приведет к выводу текста, который будет выглядеть, как показано на рис. 9.13.
Рис. 9.13 Листинг 8
Очень часто для представления текстовой информации требуется использовать списки.
Возникает вопрос, почему HTML разработан таким образом, что не удается полностью контролировать внешний вид HTML – документа?
Дело в том, что Интернет состоит из сегментов, реализованных при помощи различных как аппаратных, так и программных платформ. Проще говоря, никогда заранее неизвестно, с компьютера, какой архитектуры, и работающего под управлением какой операционной системы будет затребован тот или иной HTML – документ. Более того, даже в рамках одной операционной системы, например, Windows, возможны варианты: никогда заранее неизвестно, какое разрешение экрана установлено у пользователя, развернут – ли Web – браузер при работе во весь экран или занимает только часть экрана и т.д.
Иначе говоря, заранее неизвестно, в какое пространство, необходимо вставить тот или иной текстовый фрагмент. Поэтому HTML представляет минимальный набор средств, для форматирования текста, а детальная «привязка» выводимого изображения к конкретной машине перекладывается на Web –браузер.