Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
| Код HTML | Описание | Пример |
|---|---|---|
| <b>Текст</b> | Жирное начертание текста | Текст |
| <i>Текст</i> | Курсивное начертание текста | Текст |
| <sup>Текст</sup> | Верхний индекс | e=mc2 |
| <sub>Текст</sub> | Нижний индекс | H2O |
| <pre>Текст</pre> | Текст пишется как есть, включая все пробелы | Текст |
| <em>Текст</em> | Курсивный текст | Текст |
| <strong>Текст</strong> | Жирное начертание текста | Текст |
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <B> и <I> (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Текст</title>
</head>
<body>
<p><b><i>"А где же печенье и самогоноваренье?!"</i></b> - воскликнул Мальчиш-плохиш.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов <SUP> и <SUB> сдвигает текст относительно базовой линии и уменьшает размер шрифта. Если нужно еще уменьшить индекс, можно еще добавить тег <SMALL> (пример 2).
Пример 2. Создание нижнего индекса
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Текст</title>
</head>
<body>
<p><b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub>SO<sub><small>4</small></sub></i></p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги <STRONG> и <EM> выполняют те же функции, что теги <B> и <I>, но написание последних короче, привычней и удобней.
Следует отметить, что теги <B> и <STRONG>, также как <I> и <EM> являются не совсем эквивалентными и заменяемыми. Первый тег <B> — является тегом физической разметки и устанавливает жирный текст, а тег <STRONG> — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <B> и <STRONG>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
| Статья опубликована: 04.09.2005 | Последнее обновление: 07.02.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Алексей
23.06.2006
Влад Мержевич
26.06.2006
Алексей
07.07.2006
Наталья
08.08.2006
Влад Мержевич
08.08.2006
Почитай здесь http://htmlbook.ru/content/?id=55
Наталья
08.08.2006
Светлана
13.12.2006
Если мне в предложении всего два слова надо выделить другим цветом?
Влад Мержевич
14.12.2006
http://htmlbook.ru/faq/?&a=3
Ольга
24.12.2006
Влад Мержевич
25.12.2006
Slava
28.02.2007
пример:
<font class=text>Текст</font>
и он в некоторых смыслах лучше чем тег <div>
в чем недостатки этого тега ? расскажите?
Влад Мержевич
01.03.2007
Выражение <font class=text>Текст</font> - оксюморон. FONT используется для управления параметрами текста, но здесь эта функция переложена на стили. И нахрена тогда спрашивается нужен этот тег? Правильно использовать <span class="text">Текст</span>.
Дмитрий
06.04.2007
Николай
03.05.2007
Влад Мержевич
04.05.2007
т
а
к
Евгений
31.07.2007
Влад Мержевич
31.07.2007
http://htmlbook.ru/faq/?a=6
Екатерина
31.08.2007
Kei
02.09.2007
Влад Мержевич
03.09.2007
Нет.
2 Kei
Да.
Don Pablo
19.09.2007
Кто прав? Может что новое появилось?
Влад Мержевич
20.09.2007
Даша
01.03.2008
Артур
02.04.2008
Саша
22.04.2008
Екатерина
24.04.2008
:)
27.07.2008