Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены



Уроки HTML


Форматирование HTML текста; виды шрифтов

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

Существуют следующие теги, форматирующие HTML текст:

• Теги <b> </b> - жирный текст (жирный шрифт).
• Теги <strong> </strong> - жирный текст (жирный шрифт).
• Теги <big> </big> - текст, размером больше обычного (крупный шрифт).
• Теги <small> </small> - текст, размером меньше обычного (мелкий шрифт).
• Теги <code> </code> - моноширинный текст (моноширинный шрифт).
• Теги <kbd> </kbd> - моноширинный текст (моноширинный шрифт).
• Теги <samp> </samp> - моноширинный текст (моноширинный шрифт).
• Теги <em> </em> - наклонный текст (наклонный шрифт).
• Теги <i> </i> - наклонный текст (наклонный шрифт).
• Теги <dfn> </dfn> - наклонный текст (наклонный шрифт).
• Теги <ins> </ins> - подчеркнутый текст (подчеркнутый шрифт).
• Теги <del> </del> - зачеркнутый текст (зачеркнутый шрифт).
• Теги <sup> </sup> - текст в верхнем индексе.
• Теги <sub> </sub> - текст в нижнем индексе.
• Теги <pre> </pre> - текст отображается со всеми отступами и переносами.

Ниже продемонстрирована работа этих тегов. А после них показано, как задавать размер и стиль текстам разных шрифтов.

<b> жирный текст … </b>

жирный текст …

<big> Крупный шрифт… </big>

Крупный шрифт…

<code> моноширинный текст…</code>

моноширинный текст…

<i> наклонный текст…</i>

наклонный текст…

<ins> Текст подчёркнут…</ins>

Текст подчёркнут…

<del> Зачёркнутый текст… </del>

Зачёркнутый текст…

<sup>текст в верхнем индексе  </sup>

текст в верхнем индексе

<sub>текст в нижнем индексе</sub>

текст в нижнем индексе

<pre> Текст, в котором сохранились     
                   все       отступы     и
                          переносы………      .</pre>

 Текст, в котором сохранились     
                   все       отступы     и
                          переносы………      .


Размер шрифтов и текста HTML

Размер текста задаётся в пикселях внутри первого тега.

Вот примеры, в которых показано как задавать размер шрифтов и простые атрибуты стиля (цвет).
Заметьте, размер текста задаётся параметром font-size: внутри кавычек после style="

<p  style="font-size: 8px">Высота текста – 8 пиксилей </p>

Высота текста – 8 пиксилей

<p  style="font-size: 16px">Высота текста – 16 пиксилей </p>

Высота текста – 16 пиксилей

<i style="font-size: 18px; color: Orange">  Большой наклонный текст</i>

Большой наклонный текст

<code style="font-size: 14px; color: #A8AFA6">   Серый моноширинный текст…</code>

Серый моноширинный текст…




◄ Предыдущий урок Содержание Следующий урок ►