Теги форматирования текста в HTML (h1, p, b, strong, font)
О том, как заработать деньги в интернете, создать сайт и раскрутить его

Теги форматирования текста в HTML: как создать текст красиво и понятно

Здравствуйте, уважаемые друзья! Ну, что вы готовы продолжать изучение нелегкого с первого взгляда языка HTML. Думаю, что «да».

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

Материал сегодняшней темы я посвятил очень важному элементу оформлению текстов —  html теги форматирования текста.

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

HTML форматирование текста, нам обязательно понадобится, именно тогда, когда вы на собственном сайте, постараетесь обратить внимание своих пользователей на какие-либо важные моменты.

Что-то подчеркнуть, выделить, исправить, в конце концов. То есть, вариантов использования html тегов форматирования текстов масса, и в любом случае они вам будут нужны. Вернее, умение пользоваться тегами html.

Напомню вам о том, что такое HTML теги. Теги – это специальные пометки в html разметке документа, которыми обозначается начало и конец элементов html документа.

Элементы html документа могут не содержать никакого текста, в этом случае применяется, например, тег перевода строк <br>, без указания закрывающего тега. Либо элементы html документа, могут содержать атрибуты, которые указывают на какое-либо свойство текста, например,  теги html font, указывают на размеры шрифта.

Сегодня мы с вами рассмотрим основные html теги форматирования текста, при помощи которых производится создание и редактирование текста в html.

Теги форматирования текста в html документе: классификация    

 HTML теги разделения на абзац и переноса строк

 HTML теги абзаца в тексте парные <p></p>, но закрывающий тег не является обязательным. Для того, чтобы сделать в html новый абзац, достаточно поместить перед началом абзаца <p>.  В этом случае абзацы текста будут разделены между собой пустой строкой.

Тег принудительного перевода строк <br>. После него текст начинается с новой строки.

Посмотрим пример html кода форматирования текста по абзацам и выравнивания по сторонам.

А вот так, этот html документ будет выглядеть в браузере

HTML теги для выделения текста курсивом

Эта группа тегов является парной.

Теги <cite></cite> применяются при логическом выделении названий: книги, статьи, цитирование.

Тегами <dfn></dfn> выделяются какие-либо определения. Тегами <em></em> и <i></i>, как правило,  выделяются наиболее важные фрагменты в тексте.

Пример html кода для выделения текстов курсивом

В браузере наш текст будет выглядеть следующим образом.

Теги, отвечающие за жирный шрифт html

Теги <b></b> и <strong></strong>, также являются парными тегами. Оба тега используются одинаково, но специалисты рекомендуют применять тег <strong>.

В html документе это будет выглядеть следующим образом

И, соответственно, в браузере вы увидите текст, выделенный жирным шрифтом.

Теги, отвечающие за подчеркивание текста html

Они как и теги жирного шрифта, являются парными. Теги <ins></ins> и <u></u>, и вновь специалисты рекомендуют для подчеркивания текста использовать один из тегов, а именно: <u>

Пример html кода для подчеркнутого текста

Вот, как выглядит конечный результат в браузере.

HTML теги для создания моноширного шрифта

Напомню вам, что моноширный шрифт – это вид шрифта, у которого все знаки одинаковой ширины.

Для форматирования в html документе моноширного шрифта применяются парные теги: <kbd></kbd>; <samp></samp> и <tt></tt>

Рассмотрим форматирование моноширного текста на примере:

И, соответственно в вашем браузере будет наблюдаться следующая картинка

Теги для вывода индексов (верхних и нижних) в тексте

Для вывода различных математических, физических или химических значений и формул, очень часто мы сталкиваемся с необходимостью указания индекса, например, формула воды H2O. И, если в редакторе Word нам в помощь панель инструментов, то при составлении текстового html документа потребуются теги форматирования.

Тегами <sub></sub> мы выведем индекс шрифтом меньшего размера и ниже уровня строки. Тегами <sup></sup> мы выведем индекс шрифтом меньшего размера, наоборот, выше уровня строки.

Например, код:

Вывод на экране браузера

Тег html font и его основные параметры

Теги <font></font> являются парными и в них заключаются основные параметры html шрифта текста:

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

Размер шрифта: size. Указывается от одного до 7-ми в условных единицах. HTML шрифт текста по умолчанию равен 3.

Цвет шрифта в html: color. По умолчанию всегда чёрный. Для ввода цвета шрифта в html документ, существует два варианта:

  • По имени (названию) цвета. Например: color=»blaсk» – черный цвет. 
  • По коду (шестнадцатеричный код цвета). Код начинается с символа «#» и включает в себя шесть цифр, например: #000000 – черный цвет. 

Таблица цветов html и кодов, как пример, вот здесь: goo.gl/1i4vZ. Вы можете набрать в поисковике запрос «таблицы цветов html» и выбрать таблицу, которая вам понравится.

Пример применения тега html font

Следующий текст мы видим в окне браузера, и радуемся тому, что у нас всё получилось.

Как совместно использовать html теги форматирования текста

Ну, вот, например, понадобилось вам создать текст жирным красным курсивом. Для этой операции мы должны попробовать применить теги форматирования: strong, font и em.

А как это сделать? Первое важное условие совместного использования тегов форматирования – соблюдение порядка вложенности html тегов. Открытый первым тег, закрывается последним.

Пример последовательности:

  • Текст выделяем красным
  • Помещаем текст в тег html курсива
  • И, наконец, всё заключаем в теги жирного шрифта

В итоге, в окне браузера мы видим то, что сделали

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

Подписаться по e-mail RSS