| Уроки 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>
Серый моноширинный текст…
| ◄ Предыдущий урок | Содержание | Следующий урок ► |