X-Phantom


- Компьютерные науки
- Видеоигры, стримы, анонсы
- Заработок в интернете
- Самосовершенствование





Вы вошли на сайт, как гость
Главная О проекте Партнеры Карта сайта

Форматирование текста в HTML

Форматирование текста в HTML

Если вы уже немного знакомы с языком разметки и научились создавать web страницы, то самое время перейти к работе с текстом в HTML.

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

Вообразите себе веб-страницу, которая выглядит как исписанная на 100% страница книги, задержитесь ли вы на такой страничке? Большое количество пользователей сразу закроют такую страницу, ведь она слишком серая, монотонная и вообще не вызывает интерес. Поэтому не стоит пренебрегать тегами форматирования текста в HTML.


Заголовки в HTML

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

  • <h1> - <h6> - это парные теги, в которые заключаются заголовки. Цифра в данном теге задаёт уровень значимости заголовка. Главное название статьи берётся в теги <h1></h1> , подзаголовки второго уровня берутся в теги <h2></h2> и т.д.

На практике, наиболее популярные уровни подзаголовков с 1-ого по 3-ий, остальные практически не встречаются. Ниже расставлены теги заголовков, по степени их значимости:

  • <h1> ... </h1> - Основной заголовок;
  • <h2> ... </h2> - подзаголовок;
  • <h3> ... </h3> - подзаголовок третьего уровня;
  • <h4> ... </h4> - подзаголовок четвертого уровня;
  • <h5> ... </h5> - подзаголовок пятого уровня;
  • <h6> ... </h6> - подзаголовок шестого уровня.

К данным тегам можно применить параметр align, который отвечает за горизонтальное выравнивание заголовков. У этого параметра могут быть следующие значения:

  • left - значение выравнивания заголовка по левой стороне (значение по умолчанию);
  • right - значение выравнивания заголовка по правой стороне;
  • center - значение выравнивания заголовка по центру;
  • justify - значение выравнивания заголовка по ширине.

Значения параметров задаются с помощью символа = , а сами значения обязательно берутся в кавычки "". Для примера создадим страничку с заголовками различных уровней, также зададим заголовкам разные параметры горизонтального выравнивания.

Работа с текстом в HTML

Открыв данную страницу в браузере, Вы должны получить следующий результат:

Работа с текстом в HTML

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


Абзацы и перенос на новую строку

Форматирование текста в HTML невозможно без использования абзацев и переноса текста на новую строку. Кроме того абзацы проще стилизовать, добавив стили в соответствующий тег.

  • <p> - этим парным тегом необходимо окружать все абзацы на странице. По стандарту, тег оставляет одну пустую строку сверху и одну снизу от абзаца. Как и в случае с заголовками, тег отвечающий за абзацы имеет параметр align, со всеми своими значениями. Для примера создадим три абзаца с разными параметрами:
Работа с текстом в HTML

Работа с текстом в HTML
  • <br> - это одиночный тег, который способен перенести любое содержимое страницы на новую строку. Чаще всего его используют для текста, если сравнивать тег с программой Word, то именно он имитирует нажатие Enter. (Кол-во тегов <br> = кол-во нажатий на «enter»). Давайте рассмотрим данный тег на деле:
Работа с текстом в HTML

Работа с текстом в HTML

Как видите, после указания тега <br>, последующее содержимое(будь то текст, картинка, видео и т.д) автоматически переносится на новую строку. Если задать последовательно 2 тега, то перенос будет двойным.


Вид текста

Теперь перейдём к тегам, которые непосредственно влияют на внешний вид текста. Работа с текстом в HTML подразумевает: изменение шрифта, цвета, размера, подчеркивание, зачеркивание и других способов изменить внешний вид текста.

  • <strong> или <b> - в данные теги необходимо заключать текст, который должен быть выделен жирным шрифтом. Как правило, жирный текст используют для выделения ключевых фраз и важных фрагментов текста;
  • <cite> или <em> - эти теги придают тексту курсивный вид, работают по принципу предыдущих тегов. Курсивом выделяют менее важные фрагменты текста, также его используют для повышения стилистики текста.
  • <ins> или <u> - данные теги используют для подчеркивания определенных слов или словосочетаний в тексте. Мы не рекомендуем использовать подчеркивание в обычном тексте, т.к. по общепринятым понятиям, подчеркиваются только ссылки. Хотя этого делать никто и не запрещал.

Используем вышеперечисленные HTML теги для текста на примере:

Форматирование текста в HTML

Форматирование текста в HTML
  • <font> - сам по себе данный парный тег ничего не делает, однако, если ему задать параметры с значениями, то он может оказаться весьма полезным. Рассмотрим параметры этого тега подробнее:
  • face - назначает шрифт текста. Наиболее популярные: times new roman, arial, calibri. Задать можно несколько шрифтов через запятую, на случай если первый не поддерживается браузером, будет использован следующий по списку;
  • size - этот параметр задаёт размер текста. Существуют размеры от 1 до 7, значение по умолчание - 3;
  • color - благодаря данному параметру задаётся цвет текста. Значение по умолчание - black, то есть черный цвет. Цвет можно задать тремя способами: Таблица цветовых кодов.

Закрепим знания HTML тегов для текста и проработаем навыки на следующем примере:

Форматирование текста в HTML

Форматирование текста в HTML

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


Устаревшие HTML теги для текста

Есть несколько устаревших тегов, которые редко используются веб-программистами, но всё же они могут вам понадобиться. Лет 5 назад был слух, что браузеры перестанут их поддерживать, но они отлично работают по-прежднему.

  • <center> - контейнер (парный тег), который выводит своё содержимое на центр страницы. Порой очень выручает.
  • <del> - тег используется для зачеркивания текста. Очень специфичный и не популярный тег, однако и сегодня ему можно найти применение.
  • <q> - тег отвечающий за "кавычки". Некоторые считают, что лучше использовать данный тег, чем клавиатурные кавычки. Используется для выделения названий и цитат.
  • <blockquote> - длинные цитаты, важные блоки и весомые предложения советуют окружать этим парным тегом. Содержимое тега имеет небольшие отступы с правой и левой сторонами.
  • <tt> - хотите придать вашему тексту шрифт старинной печатной машинки, тогда этот тег вам поможет. Приблизительный вид: шрифт печатной машинки

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

Дата первой публикации: 06.07.2016
Дата последнего обновления: 06.07.2016
Рекомендовать друзьям:
Навигация
Сообщество
твиттер окру гуглплюс твитч гудгейм
© 2017 X-Phantom, все права защищены