Форматирование текста HTML
На этом уроке будут рассмотрены основные приемы форматирования текста.
- Тег HR - горизонтальная линия.
- Теги H1..H6 - заголовки текста.
- Тег P - абзац.
- Тег BR - новая строка.
- Теги комментария.
Тег HR создает горизонтальную линию и используется для визуального выделения фрагментов текста на экране. Тег HR не имеет закрывающего тега.
Теги H1, H2, H3, H4, H5, H6, создают заголовки текста. Заголовки выделяют текстовую информацию на экране, улучшая ее восприятие. Заголовки в HTML бывают разными по уровню (значимости). Самый крупный заголовок - H1; самый мелкий заголовок - H6.
Тег P формирует отдельный абзац текста. По умолчанию:
- Перед абзацем добавляется небольшой отступ.
- Абзац выравнивается по левому краю.
- Между словами ставится по одному пробелу, независимо от того, сколько их поставлено в HTML-коде.
- Перенос текста на следующую строку происходит автоматически, если слово не умещается на строке экрана.
Тег BR начинает новую строку, он не имеет закрывающего тега.
ПРИМЕР:
... <body> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6> Эта строка текста содержит <br> переход на другую строку. <p> Эта строка текста отформатирована при помощи тега Р. </p> <p>Эта строка текста подчеркнута тегом HR</p> <hr> </body> ... |
Абзацы придают тексту хорошую читаемость и восприятие текста. Абзац является независимым элементом HTML-страницы, и отображается отдельно от других элементов. Такие элементы называются блоками. Абзац в HTML отделяется небольшим отступом от предыдущего и последующего элементов HTML-страницы. Если абзац помещается целиком в родительский элемент HTML-страницы, он будет выведен в одну строку, если нет - абзац будет разбит на несколько строк. В нашем примере родительским элементом для тега P является тег BODY.
| ВАЖНО!
В коде HTML-страницы пробелы и переводы строк между тегами, которые создают блоки, никак не отображаются в окне браузера. Поэтому, HTML-код можно форматировать для удобства его чтения. Например, хорошей практикой написания HTML-кода, является формирование отступов для обозначения вложенности тегов. |
Для удобства чтения большой текст делится заголовками, которые разбивают текст на параграфы, главы, разделы. Уровень заголовка в HTML указывает насколько крупную часть текста он начинает.
- H1 открывает самую крупную часть текста, обычно это заголовок всей HTML-страницы. Заголовок первого уровня браузер отображает самым крупным шрифтом.
- H2 используется для большого раздела HTML-страницы.
- H3 используется для главы.
- H4, H5, H6 используются для отдельных параграфов. Заголовок шестого уровня отображается полужирным шрифтом, размер которого равен размеру текста абзаца.
Для обычной HTML-страницы вполне хватает заголовков первых трех уровней. Заголовки H4, H5, H6 используются для очень больших HTML-страниц, которые имеют сложную структуру.
Значительно расширяют функциональные возможности многих тегов их атрибуты. В качестве примера рассмотрим наиболее часто используемый атрибут align, который определяет выравнивание текста.
Значения атрибута align:
- center - выравнивание текста по центру;
- left - выравнивание текста по левому краю (значение по умолчанию);
- right - выравнивание текста по правому краю;
- justify - выравнивание текста по ширине.
ПРИМЕР:
... <body> <h1 align="center">Заголовок 1</h1> <p align="right"> Текст выровнен по правому краю </p> <p align="justify"> Для того, чтобы текст абзаца был выровнен по ширине, его длина должна быть более одной строки. В таком случае браузер автоматически выравнивает текст по левому и правому краю. Выравнивание происходит за счет добавления "лишних" пробелов между словамии. </p> </body> ... |
В заключение данного урока расскажем о комментариях. Комментарии никак не обрабатываются браузером, он их игнорирует. Комментарии являются служебной информацией для веб-дизайнера, облегчая ему чтение HTML-кода. Следует сказать, что тег комментария является единственным в HTML, где открывающий и закрывающий теги разные:
- открывающий тег комментария: <!--
- закрывающий тег комментария: -->
Все, что находится между тегами комментария никак не обрабатывается браузером. Сам текст комментария должен быть отделен от тегов комментария пробелами.
