Написание и форматирование текста в HTML

Обратите внимание, что, например, заголовок 1-го уровня имеет буквы гораздо крупнее, чем заголовок 3-го уровня. Также, заметьте что буквы во всех заголовках выделены жирным шрифтом. Но как можно добавить текстовые абзацы в HTML? Абзацы с текстом определяются с помощью элемента P.

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

Результат интерпретирования данного кода – следующий:

Чтобы перенести часть текста с новой строки, используется элемент BR. У этого элемента нет содержимого, поэтому в последних версиях открывающий тег также содержит закрывающую спецификацию, со следующим синтаксисом – <BR />. Этот элемент поддерживается всеми известными браузерами.

В следующем примере несколько предложений были перенесены с новой строки

Постарайтесь заметить разницу между этим и предыдущем примером – при использовании элемента BR – текст будет переведён с новой строки, без дополнительного пространства с предыдущей строкой, как в случае использования элемента P – результат будет следующим:

Про элемент FONT, я просто скажу – что он больше не поддерживается HTML5, и по этой причине я не буду его описывать. Все его возможности сегодня заменены свойствами стиля. Кроме элементов для определения текстовых заголовков и параграфов, в HTML есть несколько элементов, которые можно использовать для форматирования, выделения и украшения текста. У всех этих элементов есть начальные и конечные теги. Некоторые из этих элементов также можно заменить свойствами CSS. 

Наиболее используемые элементы для форматирования текста, представлены в следующей таблице:

Напишем пример, в котором будут использованы некоторые из этих HTML-элементов:

Посмотрите результат на экране и обратите внимание на то, как использовались HTML-элементы:

Еще один HTML элемент, ABBR. Он определяет аббревиатуру. Синтаксис данного элемента: 

<abbr title = “description”> аббревиатура </abbr>

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

Пусть будет вот такой простой пример:

Результат интерпретирования этой строки – будет следующим:

Было бы хорошо знать ещё, что в HTML есть специальный элемент, который позволяет отображать последовательность программного кода на веб-странице. Для этого используется элемент CODE. Этот элемент состоит из парных тегов – посмотрите синтаксис:

 <code> Содержимое </code>

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

Подведем итоги этого урока

– содержимое веб-страницы, видимое в окне веб-браузера, определяется внутри элемента BODY;
– комментарии, которые в некоторых случаях помогают понять код, вставляются в веб-документ с помощью символов «знак меньше, восклицательный знак, минус, минус» и в конце – «минус, минус, знак больше» – <! – комментарий – ->;
– текстовые заголовки на веб-странице определяются с помощью элементов H1, H2, H3, H4, H5, H6.  А самый важный заголовок это H1;
– элемент P используется для определения текстового параграфа, а элемент BR используется для перехода содержимого с новой строки;
– в HTML есть несколько HTML-элементов, которые можно использовать для форматирования или выделения текста, например: B, EM, I, STRONG, MARK и др.

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