Изучаем HTML. Часть 2 — Форматируем текст

**Admin** Пн Ноя 01, 2010 10:19 pm

Продолжаем изучать HTML. Давайте начнем издеваться над текстом странички.

Может Вас это увидит, но браузеру все равно, сколько Вы сделаете пробелов между словами на своей страничке. Переносы строки он тоже не воспринимает. Для форматирования текста создано большое количество тегов.

Обычно текст делится на абзацы (или параграфы). Для указания абзацев используется тег:
Содержание абзаца

Как это ни странно, но абзацы можно не закрывать (Но лучше, если они будут закрыты. Почему — в одном из следующих уроков) Например, следующий текст внутри странички будет вполне корректным:

Код HTML:
<body>
Следующая строка будет выделена параграфом

Это параграф.

Это еще один параграф.
</body>Попробуйте сами поиграть с этим тегом на своей страничке.

Управление переносами:
 — принудительный перенос текста внутри абзаца.
… — Запрет разрыва текста.
 — рекомендуемый перенос. Можно использовать внутри ….

Выделяем структуру документа:
<H1>…</H1> — самый большой заголовок
…
<H6>…</H6> — самый маленький текст

Выделяем текст по смыслу:
<CODE>…</CODE> — Компьютерный код
<CITE>…</CITE> — Выделение цитат
<KBD>…</KBD> — Клавиатурный шрифт
<SAMP>…</SAMP> — Выделение примеров
… — Выделение важных фрагментов
<VAR>…</VAR> — Выделение имен (i, j, k ) переменных
<DFN>…</DFN> — Выделение определений
… — Расставить акценты
<BLOCKQUOTE>…</BLOCKQUOTE> — Выделение фрагмента текста в большом текстовом блоке на странице.

Меняем стилистику текста:
… — Выделение полужирным шрифтом
… — Выделение курсивом
<TT>…</TT> — Выделение телетайпным шрифтом
… — Выделение подчеркиванием
<STRIKE>…</STRIKE> — Выделение перечеркиванием
… — Шрифт в верхнем индексе
… — Шрифт в нижнем индексе
… — Мелкий шрифт
<BIG>…</BIG> — Крупный шрифт

Пара дополнительных тегов:
<PRE>…</PRE> — предварительно отформатированный текст. Текст внутри этих тегов не будет изменяться браузером — будут сохранены все пробелы, переносы строк и пр. Удобно для вывода различных листингов, песен с аккордами и пр.
<HR> — Вставка линии-разделителя. Удобен для разделения текста на независимые части (например, отделение новостей друг от друга).

Все эти теги я собрал в одном примере: Просмотреть пример.

На этом пока остановимся. Пожалуйста, отпишитесь, что у Вас получилось, а что — нет. Вместе разберемся.