Элементы для работы с текстом

Содержание

1 Блочная цитата
2 Элемент ‘pre’ — авторское форматирование
3 ‘adress’ — курсивный текст в виде абзаца
4 Работа с цветом
5 Размер текста
6 Шрифт
7 Визуальное оформление текста
8 Логическое форматирование
9 Специальные символы

Блочная цитата

«blockquote» — это блочная цитата (или блок с кавычками). Свой контент этот элемент отодвигает от краев по горизонтали слева и справа на 40px (сорок пикселей).

Этот элемент блочный, а внутри можно располагать любые элементы: блочные или строчные.

<blockquote>любой текст  любой текст  любой текст  любой текст</blockquote>

Элемент ‘pre’ — авторское форматирование

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

Этот элемент обладает уникальной особенностью по отношению к пробельным символам. Обычный браузер пробельные символы сокращает и производит по ним автоматический перенос (т.е. если текст не входит по ширине, автоматом он переносится на следующую строку). А элемент ‘pre’ сохраняет все наши пробельные символы (никаких переносов и сокращений).

Элемент ‘pre’ отображает свое содержание моноширинным шрифтом. Не рекомендую использовать в ‘pre’ табуляцию (разными программами отображается по-разному).

‘adress’ — курсивный текст в виде абзаца

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

Информация, заключенная в ‘adress’, выводится курсивом:

<adress>
г. Москва, пер. Луков д.1 оф. 101
</adress>

Работа с цветом

С помощью цвета мы можем оформлять сам текст и фон. Для указания цвета обычно используют модель RGB (три цвета: red — gree — blue). Т.е. для отображения любого пикселя мы будем использовать указание яркости в трех цветовых каналах (каждый пиксель формируется с помощью свечения трех пятен).

Яркость в каждом из цветовых каналов измеряется с помощью 1 байта. Каждый канал можем описать с помощью 256 степеней яркости. По традиции это записывается в шестнадцатеричной системе счисления (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F).

Весь диапазон цветов: 00 — FF (0 — 255).

#00FF00 — зеленый;
#FF0000 — красный;
#0000FF — синий;
#FFFFFF — белый;
#000000 — черный.

Т.е. указанный цвет состоит из трех каналов (2 символа в каждом). Сначала указывается канал red, затем green, затем blue.

Элемент ‘bgcolor’ задает фоновый цвет. Элемент ‘font’ и его атрибут color — задает цвет этого элемента (применяется только в элементе font). Можно просто указать цвет текста через атрибут text=»наш цвет».

Примеры использования цветов:

<body bgcolor="green" text="#0000FF">
<font color='red'>красный цвет</font>

Рекомендую использовать шестнадцатеричную систему счисления, а не названия цветов (типа red, blue, silver, black, tomate).

Размер текста

Для указания размера шрифта (в некой относительной шкале) применяется атрибут size внутри элемента font. Примеры:

<font size="3">базовый размер шрифта</font>
<font size="-1">величина шрифта на единицу меньше базового</font>
<font size="+3">на 3 единицы больше базового</font>

Шрифт

Разный шрифты позволяют по-разному отображать текст. Т.к. шрифтов сегодня огромное количество, их делят на группы:

Семейство шрифтов serif (серийный шрифт) — это пропорциональные шрифты с засечками. Здесь ширина каждого символа зависит от его внешнего вида. Основной шрифт — Times New Roman.
Sans-serif — пропорциональные шрифты без засечек. Шрифты рубленные. Основной шрифт — Arial.
Monospace — моноширинные шрифты. Под каждый символ дается одинаковое по ширине пространство. Основной шрифт — Courier.
Курсив.
Фэнтези.

Сегодня пользователь использует разные операционные системы, и в них может не оказаться искомого шрифта. Что делать? Указать в коде несколько шрифтов, если какого-то из указанных нет, применится следующий по списку, и заканчивается указанием семейства данных шрифтов (на случай, если никаких шрифтов не найдено у вас на компьютере).

<font face="Arial,Verdana, sans-serif"></font>

Визуальное оформление текста

Сюда входят элементы, которые относятся к строчным. Некоторые из этих элементов уже устарели. Примеры элементов:

<i> — курсив.
<b> — полужирный.
<u> — подчеркнутый.
<strike> — перечеркнутый.
<tt> — моноширинный.
<big> — увеличить шрифт.
<small> — уменьшить шрифт.
<sup> — надиндекс.
<sub> — подиндекс.

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

Логические элементы — это элементы, за которыми кроется какой-то смысл. Примеры:

<em> — выделение важных фрагментов курсивом.
<strong> — выделение особо важных фрагментов полужирным.
<ins> — выделение фрагмента подчеркиванием, когда требуется показать явно, что текст был вставлен после опубликования документа.
<del> — выделение фрагмента перечеркиванием, когда требуется показать явно, что текст был удален после опубликования документа.
<cite> — выделение цитат курсивом.
<code> — отображение фрагментов программного кода моноширинным шрифтом.
<kbd> — текст, вводимый с клавиатуры: отображается моноширинным шрифтом.
<var> — название переменных: отображается курсивом.
<samp> — выделение нескольких символов моноширинным шрифтом.
<dfn> — определение вложенного термина курсивом.
<abbr title="Какое-то слово"> — аббревиатура.
<acronym title="Какое-то слово"> — акроним.
<q lang="ru"> — определение кавычек.

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