Урок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):

Выводится с помощью тэга:
^текст
Пример:
основной текст ^{надстрочный индекс}
2³=8

Подстрочный индекс (Subscript):

Выводится с помощью тэга:
_текст

Пример:
основной текст _{подстрочный индекс}
C₂H₅OH

Имитация стиля печатной машинки (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 процентов от ширины страницы, без тени:

---

Назад |  Наверх