Показать Меню
falbar Основы HTML

Урок 9. Работа со шрифтом и цветом, форматирование текста

Основы HTML

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

Как подключить сторонние шрифты на сайт в этой статье я рассказывать не буду, эта проблема решается в CSS. Существует где-то 18 видов шрифтов, которые работают в разных браузерах одинаково и в большинстве случаев их хватает. Этот список можно увидеть тут "Общие шрифты для ОС".

Все шрифты делятся на три основные группы:

  • С засечками или серифный шрифт(serif);
  • Без засечек или рубленый шрифт(sans-serif);
  • Моноширинный шрифт(monospace).

В HTML для указания шрифта тексту используется элемент font с атрибутом face.

HTML элемент font

Для задания цвета текста и размера используются такие атрибуты как color и size. Атрибут size изменяется в пределах от 1-7 относительно базового размера шрифта.

HTML атрибуты color и size

Ещё два интересных атрибута, которые можно увидеть это bgcolor и text. Они используются для задания цвета фона и текста, применяются к элементу body . У других элементов эти атрибуты не работают.

HTML атрибуты bgcolor и text

Работая с цветом при создании HTML страниц можно натолкнуться на определенную специфику, связанную с отображением. Важной частью этого является безопасная палитра цветов. В ней указанно 216 цветов, которых в различных браузерах будут отображаться одинаково. Внизу пример одной из таких палитр.

Безопасная палитра цветов

Теперь давайте разберём элементы, которые используются для оформления текста. Все эти элементы делятся на две группы:

  • Визуального или непосредственного форматирования;
  • Логического форматирования.

Основным отличием этих двух групп является их смысловая нагрузка для поисковиков. Фактически для пользователя, который откроет страницу в браузере, разницы ни какой нет, но не стоит забывать о поисковиках.

Давайте разберем наглядный пример, есть два элемента b и strong. Оба этих элемента выводят текст на экран в жирном виде и пользователь естественно разницы не заметит. Как видит эти элементы поисковой робот. Натыкается на b, просто жирный текст идет дальше. Натыкается на strong, важная часть текста и поэтому он выделен, идет дальше.

Этот пример показывает важность использования элементов второй группы. Так же можно заметить, что названия сами по себе несут смысловую нагрузку b(bold) жирный, strong сильный.

Теперь давайте рассмотрим сами элементы для начала первой группы:

HTML элементы визуального форматирования

Из картинки видно, что каждый из них делает. Стоит только отметить, что элементы big и small устарели, но и раньше от них смылся было мало. Ещё важный момент о котором хотелось рассказать об элементе b он так же устарел, но из–за того что многие привыкли к нему в HTML 5 планирует вернуть.

Теперь можно рассмотреть элементы второй группы:

HTML элементы логического форматирования

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

Подписаться на обновления

Комментариев еще не оставлено