Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры


   

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

На этом уроке будут рассмотрены основные приемы форматирования текста.

Тег HR создает горизонтальную линию и используется для визуального выделения фрагментов текста на экране. Тег HR не имеет закрывающего тега.

Теги H1, H2, H3, H4, H5, H6, создают заголовки текста. Заголовки выделяют текстовую информацию на экране, улучшая ее восприятие. Заголовки в HTML бывают разными по уровню (значимости). Самый крупный заголовок - H1; самый мелкий заголовок - H6.

Тег P формирует отдельный абзац текста. По умолчанию:

Тег 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 указывает насколько крупную часть текста он начинает.

Для обычной HTML-страницы вполне хватает заголовков первых трех уровней. Заголовки H4, H5, H6 используются для очень больших HTML-страниц, которые имеют сложную структуру.

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

Значения атрибута align:

ПРИМЕР:

...
<body>
<h1 align="center">Заголовок 1</h1>

<p align="right">
Текст  выровнен по правому краю
</p>

<p align="justify">
Для того, чтобы текст абзаца был выровнен по ширине,
его длина должна быть более одной строки.
В таком случае браузер автоматически выравнивает текст по левому и правому краю.
Выравнивание происходит за счет добавления "лишних" пробелов между словамии.
</p>

</body>
...

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

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


TOP ↑