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


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

«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"> — определение кавычек.

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

Специальные символы

Специальные символы


Ваш комментарий

Ваш адрес email не будет опубликован.

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности