Основные теги для создания и форматирования абзацев в HTML-документе.

Лекция 8

Тема 1: «Теги форматирования текста в HTML документов»

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

2.1. Тег <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность. Для тега доступны глобальные атрибуты.

2.2. Тег <em>

Отображает шрифт курсивом, придавая тексту значимость. Для тега доступны глобальные атрибуты.

2.3. Тег <i>

Отображает шрифт курсивом. Для тега доступны глобальные атрибуты.

2.4. Тег <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту. Для тега доступны глобальные атрибуты.

2.5. Тег <strong>

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

2.6. Тег <sub>

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

2.7. Тег <sup>

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер. Для тега доступны глобальные атрибуты.

2.8. Тег <ins>

Выделяет текст в новой версии документа, подчёркивая его. Для тега доступны следующие атрибуты: cite, datetime.

2.9. Тег <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа. Для тега доступны следующие атрибуты: cite, datetime.

Теги для ввода «компьютерного» текста

3.1. Тег <code>

Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом. Для тега доступны глобальные атрибуты.

3.2. Тег <kbd>

Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. Для тега доступны ‎глобальные атрибуты.

3.3. Тег <samp>

Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом. Для тега доступны ‎глобальные атрибуты.

3.4. Тег <var>

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

3.5. Тег <pre>

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

Теги для оформления цитат и определений

4.1. Тег <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибутаtitle, она появляется при наведении курсора мыши на текст. Для тега доступны глобальные атрибуты.

4.3. Тег <bdo>

Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально. Для тега доступен атрибут dir.

4.4. Тег <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк. Для тега доступен атрибут cite.

4.5. Тег <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки. Для тега доступен атрибут cite.

4.6. Тег <cite>

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

4.7. Тег <dfn>

Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS. Для тега доступен атрибут title.

Абзацы, средства переноса текста

5.1. Тег <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются». Для тега доступны глобальные атрибуты.

5.2. Тег <br>

Переносит текст на следующую строку, создавая разрыв строки. Для тега доступны глобальные атрибуты.

5.3. Тег <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии. Для тега доступны ‎глобальные атрибуты.

Теги форматирования абзацев в HTML документах.

Тема 2: «Теги форматирования абзацев в HTML документах»

Основные теги для создания и форматирования абзацев в HTML-документе.

Начало абзаца задает тег <Р>. Закрывающий тег </P> не обязателен. Текст в абзаце может быть выровнен по левому краю, по правому краю, по ширине и по центру. Для этого применяют атрибут ALIGN:

Например: <p align="left">абзац выровнен по левому краю...</p>

<p align="right">абзац выровнен по правому краю...</p>

<p align="center">абзац выровнен по центру...</p>

<p align="justify">абзац выровнен по ширине...</p>

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

Для форматирования абзацев можно пользаваться так же тегом создания раздела (division) <DIV>. Он работает точно так же, как и <Р>, в нем можно использовать параметр выравнивания ALIGN, но между двумя соседними разделами не оставляется пустая строка. Здесь закрывающий тег необходим - </DIV>.

Например: <DIV ALIGN="center">

...Текст, таблицы, изображения. Выравнивание по центру.

</DIV>

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

Шесть стандартных тегов предусмотрено для оформления заголовков: <H1>, <H2>,...,<H6>. Причем у <Н1> - самый крупный шрифт, а <Н6> - самый мелкий. Все они могут иметь параметр выравнивания ALIGN.

Например: <h1>Заголовок 1 уровня</h1>

<h2>Заголовок 2 уровня</h2>

<h3>Заголовок 3 уровня</h3>

<h4>Заголовок 4 уровня</h4>

<h5>Заголовок 5 уровня</h5>

<h6>Заголовок 6 уровня</h6>

Есть так же особое оформление для цитат - тег <BLOCKQUOTE>. Все что расположено между открывающим и закрывающим тегом, будет сдвинуто по правому краю и отделено от предыдущего и последующего текста пустой строкой.

Чтобы сделать абзацный отступ, необходимо ставить вместо простых пробелов неразрывные, которые и создадут абзацный отступ. Неразрывный пробел в HTML&nbsp; - обязательно маленькими буквами.

Тег <pre> используется, когда требуется написать текст как есть, включая все пробелы и переносы строки.

Например: <pre>Идет бычок, качается,

Вздыхает на ходу...</pre>