Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

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

Это третье видео, в котором мы уже научимся создавать простые HTML-документы с размеченным текстом с помощью тегов <p>, <br>, <pre> и <blockquote>. После этого видео станет понятно, зачем же мы вообще взялись за изучение HTML, т.к. на примерах, разобранных в этом видео, станет виден общий механизм преобразования обычного текста в текст с разметкой HTML.



Обычный текст – это набор букв, которые идут друг за другом.
Буквы сгруппированы в отдельные блоки, разделённые пробелами – это слова.
Слова сгруппированы в более крупные блоки, разделённые точками, знаками вопроса и восклицания – это предложения.
Предложения в свою очередь тоже могут быть сгруппированы в блоки, разделённые вертикальными отступами – это абзацы.

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

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

Тег <p>

Для разбиения на абзацы в HTML используется тег <p> (запомнить просто: p от слова Paragraf). Каждый абзац с текстом нужно помещать в отдельный контейнер, обозначенный открывающим и закрывающим тегом <p>.

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

ВАЖНО: Каждый абзац начинается с тега <p> и заканчивается закрывающим тегом </p>.

Тег <br>

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

Тег <br> устанавливает перевод строки в том месте, где он установлен и, в отличие от тега <p>, вертикального отступа не производит. (запомнить просто: br от слова break).

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

ВАЖНО: Тег <br> одиночный и закрывающего тега не имеет.

Тег <pre>

Иногда необходимо отобразить текст так, как он есть, не внося его отображение изменений. Для этого есть HTML-тег <pre>.

Тег <pre> используется для обозначения блока предварительно форматированного текста. В границах этого блока текста будут сохранены все пробельные символы и переносы строк.

У тега <pre> есть особенность, что текст обычно выводится моноширинным шрифтом.

ВАЖНО: Тег <pre> размечает область текста, поэтому нужен закрывающий тег </pre>.

Тег <blockquote>

Рассмотрим ещё один HTML-тег <blockquote>.

Тег <blockquote> используется для выделения длинных цитат в тексте документа.

Текст, помещенный в контейнер <blockquote>, обычно имеет не только вертикальные, но и горизонтальные отступы, что делает цитату заметной.

ВАЖНО: Тег <blockquote> требует открывающего и закрывающего тега </blockquote>

Задание

В данном видео мы наконец-то начали понимать, в чём соль HTML – это разметка текстовой информации на блоки. С помощью всего 4-х тэгов (<p>, <br>, <pre> и <blockquote>) мы уже можем разметить текст так, чтобы его было приятно воспринимать.

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


Если что-то пошло не так, задавайте вопросы. Для тех, кто всё-таки не смог создать файлы с тегами <p>, <br>, <pre> и <blockquote>, можно скачать их по этой ссылке. Они находятся в zip-архиве, так он скачается. Иначе файлы просто открывались бы в браузере.

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Log in to comment