 |
Дополнительные возможности в языке html для форматированию текста.
|
|
|
|
Когда Вы создаете сайт или страницу, очень часто чтобы хоть немного оживить текст, нужно использовать такие приемы как выделение текста или фраз жирным шрифтом, или добавление цитаты в текст с выделением этой цитаты курсивом. Для этого в html есть свои теги:
| - STRONG | Выделяет текст жирным |
| - EM | Выделяет текст курсивом |
| - U | Подчеркивает |
| - S | Зачеркивает текст |
| - SUP | Текст как верхний регистр |
| - SUB | Текст как нижний регистр |
| -FONT | Цвет, размер и тип текста |
| - HR | Вставка линии в документ |
STRONG – очень часто используемый атрибут, предназначен для выделения текста жирным шрифтом. Так же есть аналоговый, но устаревший тег <b> или <bold>, конечно эти теги можно использовать, но советую Вам использовать тег только стронга, устаревшие теги не приветствуются поисковыми системами.
Пример практического применения:
<strong> Выделяем жирным с помощью стронга </strong> <br>
<b> Выделяем жирным старым тегом болд </b>
Браузер отобразит это так:
По примеру видно, что действия этих тегов идентичны. Так же в программах по редактированию html документов, таких как html редактор Adobe Dreamweaver на панели с инструментами по форматированию данный тег обозначен кнопкой B и S.
EM – данный тег предназначен для выделения текста курсивом (текст с наклоном в право). Как и с предыдущим тегом, у него есть свой аналог тег <i>, но его тоже лучше не использовать. В html редакторе Adobe Dreamweaver данный тег обозначен кнопкой I, но при нажатии программа вставляет тег <em>.
Пример использования тега:
<em> Выделяем текст курсивом </em> <br>
<i> Выделение курсивом старым тегом </i>
Соответственно браузер отобразит это так:
U – Данный тег подчеркивает текст заключенный в нем. Желательно не использовать подчеркивание, так как многие путают такой текст с ссылками и это становится не удобным для посетителя сайта.
|
|
|
Пример для общего понимания тега:
<u> Подчеркиваем текст! </u>
Отображение в браузере:
S – данный тег зачеркивает текст. Часто он используется в интернет магазинах, где для привлечения, зачеркивают старую цену и пишут новую как будто со скидкой 
Пример кода:
Вниманиe акция! новая цена <s> 10 500 </s> 5 599 рублей!
Отображение браузером:
SUP – Формирует текст в верхнем индексе к основному тексту. Может быть полезно при написании формул по математики.
Пример кода:
2 <sup> 2 </sup> = 4; <br>
2 <sup> 3 </sup> = 8; <br>
2 <sup> 4 </sup> = 16;
Отображение:
SUB – Данный тег похож на предыдущий, только отображает текст как нижний индекс к основному тексту. Полезно при написании формул по химии.
Пример кода:
Формула спирта - С <sub> 2 </sub> Н <sub> 5 </sub> ОН
Итог:
FONT – данный тег предназначен, чтобы изменять цвет, тип и размер шрифта в тексте.
Атрибуты:
SIZE – устанавливает размер шрифта, можно использовать цифровые значения 1,2,3 и тд.
COLOR – атрибут для установки цвета. Задать можно как зарезервированными словами типа red и тд или html кодом цвета (RPG). Советую использовать коды цветов, на сайте можно скачать удобную программу для подбора html цвета. С ее помощью можно быстро узнать код цвета любой точки экрана, очень полезная вещь при создании сайта.
FACE – Устанавливает тип шрифта, советую использовать стандартные шрифты такие как Arial, Tahoma,. Эти шрифты есть на всех компьютерах, иначе Вы рискуете что сайт будет отображаться некорректно.
Пример кода:
Это обычный текст <br>
<FONT SIZE="5" COLOR="red"> Увеличенный шрифт красного цвета </FONT><br>
<FONT SIZE="3" FACE="Courier New" COLOR="Violet"> Моноширинный фиолетовый шрифт текста размер 3 </FONT>
Браузер обработает все команды примерно так:
|
|
|
Примечание: Это Вам нужно знать для общего развития, но когда Вы изучите стили CSS все это будет прописано именно в таблице стилей. На самом деле таблицы стилей очень удобная вещь, но об этом позже.
HR – вставляет в документ горизонтальную линию, закрывающий тег для него не нужен! Данный тег используется довольно редко, но иногда удобно его применять.
Атрибуты:
WIDTH – параметр задает длину линии. Установить можно в пикселях или в процентах. Проценты считаются от ширины окна.
SIZE – устанавливает толщину линии, тоже использует пиксели.
ALIGN – этот атрибут Вам уже знаком, он отвечает за выравнивание, значения у атрибута такие же:
right – выравнивание по правому краю
left – выравнивание по левому краю
center – по центру (данный параметр установлен по умолчанию!)
NOSHADE – данный атрибут устанавливает сплошную закраску линии, он не имеет параметров или значений. Если не указывать этот атрибут, линяя будет выглядеть объемной.
COLOR – устанавливает цвет линии. Цвет устанавливать в коде html, ссылка на программу подбора html цвета расположена выше. (данный атрибут будет работать только в браузере Internet Explorer)
Пример кода:
Какой то текст <hr noshade width="70%" align="left"> Еще немного текста <br>
Линия толщиной 4px и без noshade
<hr width="70%" align="left" size ="4px">
Все это выглядит так:
|
|
|
