5.1.2 Работа с текстом
Тэги управления стилем текста:
Жирный шрифт (bold):
Для управления плотностью шрифта применяются теги:
<b>текст</b>
<strong>текст</strong>
Отличие тэга <b> от тэга <strong> в том, что тэг <b> указывает браузеру выводить текст жирным шрифтом, а тэг <strong> указывает, что текст надо выделить. Как браузер будет выделять текст, жирным шрифтом, курсивом или жирным курсивом - зависит от конкретного браузера.
Пример:
Действие тэга <strong>
Действие тэга <b>
Курсив (italic):
Курсивный шрифт выводится с помощью тэгов:
<i>текст</i>
<em>текст</em>
Пример:
Курсив
Примечание: тэг <em> обычно используется для выделения слова из текста, и в различных браузерах может работать по разному.
Подчеркнутый шрифт (underline):
Выводится с помощью тэга:
<u>текст</u>
Пример:
Подчеркнутый шрифт
Перечеркнутый шрифт (strike):
Выводится с помощью тэга:
<strike>текст</strike>
Пример:
Перечеркнутый
шрифт
Надстрочный индекс (Superscript):
Выводится с помощью тэга:
<sup>текст</sup>
Пример:
основной текст надстрочный индекс
23=8
Подстрочный индекс (Subscript):
Выводится с помощью тэга:
<sub>текст</sub>
Пример:
основной текст подстрочный индекс
C2H5OH
Имитация стиля печатной машинки (Teletype):
<tt>текст</tt>
Пример:
Teletype
Шрифт для вывода цитат (citation):
<cite>текст</cite>
Пример:
основной текст цитата
Шрифт для вывода исходного текста программ (code):
Выводится с помощью тэга:
<code>текст</code>
или
<samp>текст</samp>
Отображается моноширинным шрифтом Courier.
Пример:
Обычный шрифт
Шрифт для текстов программ
Шрифт для выделения переменной в программе:
Выводится с помощью тэга:
<var>текст</var>
Пример:
текст программы переменная
Шрифт для имитации ввода с клавиатуры:
Выводится с помощью тэга:
<kbd>текст</kbd>
Отображается моноширинным шрифтом Courier.
Пример:
Обычный шрифт
Шрифт для имитации ввода с клавиатуры
Заголовки
Выводятся с помощью тэгов:
<h1>Самый большой заголовок</h1>
...
<h5>Самый маленький заголовок</h5>
Пример:
H1
H2
H3
H4
H5
Блок с отступом
Выводится с помощью тэга:
<BLOCKQUOTE>текст</BLOCKQUOTE>
Пример:
основной текст
блок текста с отступом
Тэги управления цветом и размером шрифта:
Задание базового шрифта:
Размер, цвет и стиль шрифта по умолчанию задается с помощью тэга <BASEFONT> и не применяется к заголовкам
Если базовый шрифт не задан по умолчанию используется шрифт с размером 3
атрибуты элемента <BASEFONT>
color=(цвет).Цвет шрифта.
size=(целое число от 1 до 7). Размер шрифта
face=(список разделенных запятыми названий шрифтов).
Пример:
<BASEFONT SIZE="2"> Устанавливаем размер базового шрифта равным двум.
Увеличение размера шрифта:
Выполняется с помощью тэга:
<big>текст</big>
Пример:
основной текст
Увеличенный текст
Уменьшение размера шрифта:
Выполняется с помощью тэга:
<small>текст</small>
Пример:
основной текст
Уменьшенный текст
Управление размером шрифта с помощью тэга <FONT>:
Размер шрифта меняется с помощью атрибута SIZE тэга <FONT>
Пример:
Текст программы:
<font size="1">size=1</font>
<font size="2">size=2</font>
<font size="3">size=3</font>
<font size="4">size=4</font>
<font size="5">size=5</font>
<font size="6">size=6</font>
<font size="7">size=7</font>
Результат выполнения:
size=1 size=2 size=3 size=4
size=5 size=6 size=7
В атрибуте SIZE можно указывать размер шрифта относительно текущего размера SIZE
Пример:
Текст программы:
<font size="+1">size +1</font>
<font size="+2">size +2</font>
<font size="-3">size -3</font>
Результат выполнения:
size +1
size +2
size -3
Управление цветом шрифта с помощью тэга <FONT>:
Цвет шрифта меняется с помощью атрибута COLOR тэга <FONT>
Пример:
Текст программы:
<FONT COLOR="#FF0000">FONT COLOR="#FF0000"</FONT>
<FONT COLOR="red">FONT COLOR="red"</FONT>
Результат выполнения:
FONT COLOR="#FF0000"
FONT COLOR="red"
Таблица соответствия названий цветов и значений RGB.
Black |
#000000 |
Green |
#008000 |
Silver |
#C0C0C0 |
Lime |
#00FF00 |
Gray |
#808080 |
Olive |
#808000 |
White |
FFFFFF |
Yellow |
#FFFF00 |
Maroon |
#800000 |
Navy |
#000080 |
Red |
#FF0000 |
Blue |
#0000FF |
Purple |
#800080 |
Teal |
#008080 |
Fuchsia |
#FF00FF |
Aqua |
#00FFFF |
Задание шрифтов с помощью тэга <FONT>:
Имя шрифта задается с помощью атрибута FACE тэга <FONT>
<font face="имя шрифта"></font>
Задает имя шрифта. Можно задавать несколько шрифтов через запятую, в этом случае используется первый найденный шрифт.
Пример:
Текст программы:
<font face="Impact", "Arial Cyr", "Arial", "MS Sans Serif">
текст будет выведен шрифтом "Impact" при наличии его на вашем компьютере.
</font>
Результат выполнения:
текст будет выведен шрифтом "Impact" при наличии его на вашем компьютере.
Тэги для форматирования текста:
Вывод отформатированного текста:
Выполняется с помощью тэга <pre>текст</pre>
Текст, находящийся между этими тэгами будет выведен в том же виде, в котором вы его напечатали в документе, т.е. со всеми пробелами и переносами.
Пример:
Текст программы:
<PRE>
Отформатированный
текст
</PRE>
Результат выполнения:
Отформатированный
текст
Комментарии в программе:
Комментарии вставляются в программу с помощью тэгов:
<!--комментарии-->
Для MSIE еще можно применять тэги:
<COMMENT>комментарии</COMMENT>
Эти тэги предназначены для вставки в документ HTML строк комментария, которые не отображаются браузером.
Пример:
<!--
многострочный
комментарий
-->
Переход на следующую строку:
Принудительный перенос строки выполняется с помощью тэга <br>
Пример:
Текст программы:
Выполняем<br>переход на<BR>следующую строку
Результат выполнения:
Выполняем
переход на
следующую строку
Запрет переноса:
Тэги <nobr>текст</nobr> указывает браузеру, что вывод текста между ними должен выполняться одной строкой.
Если строка не помещается в окно браузера, появляется горизонтальная линейка прокрутки.
Управление выравниванием текста:
Выравнивание блока текста осуществляется с помощью атрибута ALIGN тэга <DIV>текст</DIV>
Атрибут ALIGN может принимать значения:
ALIGN="LEFT" - выравнивание по левому краю
ALIGN="RIGHT" - выравнивание по правому краю
ALIGN="CENTER" - выравнивание по центру
ALIGN="JUSTIFY" - выравнивание по обеим краям
Пример:
Текст программы:
<DIV ALIGN="CENTER">Текст, выравненный по центру</DIV>
Результат выполнения:
Текст, выравненный по центру
Вообще, атрибут ALIGN можно применять во многих тэгах, например:
<P ALIGN="JUSTIFY">текст</P> - выравнивание абзаца
<TD ALIGN="CENTER">текст</TD> - выравнивание текста в ячейке таблицы
<H1 ALIGN="CENTER">текст</H1> - выравнивание заголовка и т.д.
Отцентрировать блок текста можно также и с помощью тэга <CENTER>текст</CENTER>
Горизонтальная разделительная линия:
Вывод горизонтальной линии осуществляется с помощью тэга <hr>
В этом тэге можно применять атрибуты:
ALIGN=LEFT, CENTER, RIGHT - выравнивание линии.
NOSHADE - линия без тени.
SIZE - толщина линии в пикселях.
WIDTH - ширина линии.
Пример:
Текст программы:
<HR>
<HR ALIGN="CENTER" SIZE="10" WIDTH="50%" NOSHADE>
Результат выполнения:
обычная линия:
линия шириной 10 пикселей, выравненная по центру, шириной 50 процентов от ширины страницы, без тени: