< на главную

Ниже приводится подборка дескрипторов, ориентированных для работы непосредственно с текстом. Я попыталась максимально компактно и понятно представить всё разнообразие подобных дескрипторов. Насколько мне это удалось - судите сами. На всякий случай уточню, что в примерах "Текст1" - текст до дескриптора, "Текст2" - текст после дескриптора, "Подопытный Текст" - текст между тэгами исследуемого дескрипторами, между ними пробелы.

Разделы

1. Дескрипторы:
а) заголовки
б) изменяющие только написание букв
в) разбивающие текст на части
г) управление переносом слов и прочее
д) вспомогательные (логическое форматирование, дублирующие и т.п.)

2. Атрибуты:
а) color
б) size
в) face
г) align
д) title
е) tabindex
ё) contenteditable
ж) nowrap




1. Дескрипторы

а) заголовки

<h1> ... </h1>Текст1

Заголовок 1-го уровня

Текст2
<h2> ... </h2>Текст1

Заголовок 2-го уровня

Текст2
<h3> ... </h3>Текст1

Заголовок 3-го уровня

Текст2
<h4> ... </h4>Текст1

Заголовок 4-го уровня

Текст2
<h5> ... </h5>Текст1
Заголовок 5-го уровня
Текст2
<h6> ... </h6>Текст1
Заголовок 6-го уровня
Текст2
К заголовкам не получится напрямую применить такие параметры, как color, face и size. Но можно align и прочие. (Подробнее здесь.)
(h - heading - англ. заголовок)
к оглавлению


б) изменяющие только написание букв

<i> ... </i> Текст1 Подопытный Текст Текст2 Курсив. (i - italic - англ. курсив)
<b> ... </b> Текст1 Подопытный Текст Текст2 Полужирный шрифт. (b - bold - англ. жирный (шрифт))
<s> ... </s> Текст1 Подопытный Текст Текст2 Зачёркнутый текст. (s - strike through - англ. зачёркивать)
<u> ... </u> Текст1 Подопытный Текст Текст2 Подчёркнутый текст. (u - underline - англ. подчёркивать)
<tt> ... </tt> Текст1 Подопытный Текст Текст2 Моноширинный шрифт (все символы имеют одинаковую ширину). (tt - teletype - англ. телетайп) (При этом происходит замена шрифта, по умолчанию на Courier New, 13px. Если текст находится внутри таблицы, то Oper-а отображает его 16-ым размером.)
<small> ... </small> Текст1 Подопытный Текст Текст2 Уменьшение размера шрифта. (small - англ. маленький) (По умолчанию размер шрифта уменьшается с 16px до 13.)
<big> ... </big> Текст1 Подопытный Текст Текст2 Увеличение размера шрифта. (big - англ. большой) (По умолчанию размер шрифта увеличивается с 16px до 18.)
<sub> ... </sub> Текст1 Подопытный Текст Текст2 Подстрочный текст. (sub - ≈ от subscript - англ. подстрочный индекс)
<sup> ... </sup> Текст1 Подопытный Текст Текст2 Надстрочный текст. (sup - ≈ от superscript - надстрочный индекс)
<font> ... </font> Текст1 Подопытный Текст Текст2 Сам по себе дескриптор ничего не делает, но возможность использования различных атрибутов делает его одним из самых полезных. (font - англ. шрифт) (В данном примере дескриптор поставлен без атрибутов.)
<blink> ... </blink> Текст1 Подопытный Текст Текст2 Мерцающий текст (blink - англ. мигать, мерцание) (Не работает в IE.)
к оглавлению


Текст1 Подопытный Текст Текст2

в) разбивающие текст на части

<br> Текст до разделителя
Текст после разделителя		 Простой переход на следующую строку. (br - break - англ. разрыв) (Подробнее здесь.)
<hr> Текст до черты
Текст после черты		 Горизонтальная черта. (hr - horizontal rule - англ. горизонтальный разделитель) (Подробнее здесь.)
<p> ... </p> Текст1

Подопытный Текст

Текст2		 Абзац. (p - paragraph - англ. абзац) (Можно использовать и без закрывающего тега </p>.)
<pre> ... </pre> Текст1 
Подопыт-
	ный
	    Текст
Текст2		 Предварительно отформатированный текст. (preformatted text) Побочным эффектом является отображение текста моноширинным шрифтом.
<blockquote> ... </blockquote> Текст1
Подопытный Текст
Текст2		 Крупная цитата. (от англ. block - блок и quote - цитата)
<div> ... </div> Текст1
Подопытный Текст
Текст2		 Дескриптор определяет границы текстового блока, внутри которого действуют его атрибуты, поэтому без них практически не употребляется. Один из самых полезных. (div - ≈ от division - англ. раздел, секция, деление)
(Подробнее вопрос о влиянии на дескрипторы основных атрибутов рассмотрен здесь.)
к оглавлению


г) управление переносом слов и прочее

<nobr> ... </nobr> Ссылка на пример Запрет браузеру как-либо разделять фразу. (nobr - ≈ not break - англ. без разрыва) (Аналогичен <div nowrap>)
&nbsp; Подопытный текст Спец. символ неразрывного пробела (выглядит как пробел, но обрабатыватся браузером подобно букве). (nbsp - ≈ not break space - англ. неразрывное пространство)
&shy; По­до­пыт­ный текст Спец. символ мягкого переноса (позволяет браузеру выполнить перенос части слова). (shy - англ. застенчивый, стеснительный)
<abbr> ... </abbr> Текст1 Подопытный текст Текст2 Аббревиатура. Практически всегда употребляется с атрибутом title, содержащем расшифровку сокращения (как в примере). Создаёт всплывающую подсказку, а также необходим для озвучивания и перевода. (abbr - abbreviation - англ. сокращение)
<!-- ... -- >   Комментарий. (После открывающей символопоследовательности рекомендуется пробел.)
<wbr> Ссылка на пример Разрешает браузеру при необходимости переноса разорвать фразу в данном месте (обычно используется вместе с <nobr> или <div nowrap>). (Работает в IE8, Safari5 и Google Chrome 8, но не работает в Firefox 3.6 и Opera 11.)
к оглавлению


д) вспомогательные (логическое форматирование, дублирующие и т.п.)

Здесь собраны дескрипторы, которые, как я поняла, не дают каких-то новых возможностей. Но в некоторых случаях их использование позволяет сделать написание исходного кода html-страниц более быстрым и понятным.
<em> ... </em> Текст1 Подопытный Текст Текст2 Важный фрагмент. (Почти всегда курсив.) (em - emphasis - англ. особое внимание)
<strong> ... </strong> Текст1 Подопытный Текст Текст2 Усиленное выделение. (Почти всегда полужирный.) (strong - англ. сильный, крепкий, твёрдый)
<code> ... </code> Текст1 Подопытный Текст Текст2 Фрагмент кода программы. (Обычно моноширинный шрифт.) (code - англ. код)
<var> ... </var> Текст1 Подопытный Текст Текст2 Имя переменной, функции, класса и т.п. (Обычно курсив.) (var - variable - англ. переменная)
<samp> ... </samp> Текст1 Подопытный Текст Текст2 Пример программы и т.п. (Обычно моноширинный шрифт.) (samp - sample - англ. образец)
<kbd> ... </kbd> Текст1 Подопытный Текст Текст2 Пример текста, введённого пользователем. (Обычно моноширинный или полужирный.) (kbd - keyboard - англ. клавиатура)
<cite> ... </cite> Текст1 Подопытный Текст Текст2 Цитата или ссылка на сторонний источник информации. (Обычно курсив.) (cite - citation - англ. цитата)
<q> ... </q> Текст1 Подопытный Текст Текст2 Небольшая цитата. (Иногда выделяется кавычками.) (q - quotation - англ. цитата)
<dfn> ... </dfn> Текст1 Подопытный Текст Текст2 Определение термина. (Обычно курсив.) (dfn - definition - англ. определение)
<del> ... </del> Текст1 Подопытный Текст Текст2 Выделение удалённого откуда-то текста (к примеру, при изменение закона). (Почти всегда перечёркивание.) (del - delete - англ. удалять)
<ins> ... </ins> Текст1 Подопытный Текст Текст2 Выделение вставленного текста. (Обычно подчёркивание.) (ins - insert - англ. вставлять)
<address> ... </address> Текст1
Подопытный Текст
Текст2		 Различная контактная информация (имена сотрудников организации, её адрес, ссылки на другие HTML-документы и т.п.). (address - англ. адресовать, направлять)
<strike> ... </strike> Текст1 Подопытный Текст Текст2 Зачёркнутый текст (синоним <s>).
<acronym> ... </acronym> Текст1 Подопытный Текст Текст2 Акроним. Очень похож на <abbr>, разница непонятна.
<center> ... </center> Текст1
Подопытный Текст
Текст2		 Простейшая команда выравнивания по центру. Осталась от ранних версий HTML. (Сейчас обычно используют атрибут align со значением center.)
к оглавлению





2. Атрибуты

Ниже приведены некоторые наиболее распространённые атрибуты дескрипторов. Не любые из них могут применяться с любыми дескрипторами, установить строгую закономерность крайне сложно. Часто для достижения нужного эффекта различные дескрипторы приходится вкладывать друг в друга. Грубо говоря, атрибуты color, size и face используются с <font>; align - с заголовками и элементами разбивки текста на блоки; title, tabindex и contentedible очень универсальны; а nowrap замечен только с <div> и <body>.



а) color="цвет"

Задание цвета текста. (color - англ. цвет) Примеры:
<font color=blue>Образец синей надписи</font> - Образец синей надписи
<font color=#0000FF>Образец синей надписи</font> - Образец синей надписи
к оглавлению



б) size="цифра"

Атрибут позволяет контролировать размер шрифта. Значение может лежать в границах от 1 до 7, по умолчанию используется 3. Может задавать не только абсолютной цифрой, но и операциями уменьшения/увеличения. (size - англ. размер) Примеры:
<font size=2>Абра-Кадабра</font> - Абра-Кадабра
<font size=-2>Абра-Кадабра</font> - Абра-Кадабра
<font size=+2>Абра-Кадабра</font> - Абра-Кадабра
к оглавлению



в) face="название_шрифа"

Позволяет отобразить текст определённым шрифтом. Название шрифта можно писать в любом регистре. Также можно использовать список шрифтов, перечисленных через запятую, в этом случае будет применён первый имеющийся в распоряжении ОС. (face - англ. лицо, внешний вид) Примеры:
<font face="Comic Sans MS">Абра-Кадабра</font> - Абра-Кадабра
<font face="monospace, Courier New, Courier">Абра-Кадабра</font> - Абра-Кадабра

Стандартными шрифтами, по идее находящимися на компьютере любого пользователя, считаются:
к оглавлению



г) align="значение"

Способы выравнивания текста (или иного содержимого):
left
Форматирование по левому краю. (Используется по умолчанию.)
center
Форматирование по центру.
right
Форматирование по правому краю.
justify
Форматирование по ширине. (Если до полного заполнения строки недостаёт небольшого количество пикселов, то расстояние между буквами немного увеличивается, так, чтобы последний символ на строке находился в самой крайне-правой позиции. Благодаря такому приёму заполняется вся ширина абзаца и те получаются ровными не только слева, но и справа. Как вы можете это видеть на данном примере, разве зря я столько писала?) (другими словами, выравнивание по обоим краям документа)
(align - англ. выравнивать)
к оглавлению



д) title="текст"

Позволяет привязать к нужному заголовку, абзацу или конкретному слову небольшую всплывающую подсказку. (title - англ. название, надпись) К примеру: <abbr title="World Wide Web">www</abbr> - www
к оглавлению



е) tabindex="цифра"

Если расставить по тексту документа эти атрибуты-метки, то можно будет перемещаться между его частями при помощи клавиш <Tab> / <Shift+Tab>. (tab - англ. этикетка, ярлык; index - англ. индекс, указатель)
к оглавлению



ё) contenteditable="значение"

Если какой-либо текст окажется внутри дескриптора с данным атрибутом, вы сможете вносить в него изменения прямо в браузере (хотя исходный документ при этом не меняется). Возможные значения аргумента: false (по умолчанию), true и inherit (наследование значения от внешнего контейнера). Может быть применён и к дескриптору <body>. Возможно, Вам покажется более удобным подправлять текст напрямую в браузере, а затем скопировать изменённый вариант в исходный код. (content - англ. содержание; edit - англ. редактировать) Можете поэкспериментировать на данном абзаце.
(Да, ещё, как показала практика, вместо фразы contenteditable=true достаточно просто написать contenteditable.)
к оглавлению



е) nowrap

Запрет браузеру как-либо разделять фразу. (Эффект аналогичен использованию дескриптора <nobr>) Может быть вставлен и в дескриптор <body>. Пример можно посмотреть здесь. (Атрибут работает тольков IE8. Не работает в работает в Firefox 3.6, Opera 11, Safari 5 и Google Chrome 8 .)

< на главную к оглавлению
Hosted by uCoz