Изучаем HTML тег параграфа p | Бизнес блог Макса Метелева

27 декабря, 2017 Максим Метелев 21960 просмотров Комментариев нет

Добрый день друзья. До Нового Года остается мало времени и посему для вас подготовил новый урок в котором мы изучим что же такое параграф в html. На протяжении нескольких первых уроков он уже мелькал и вы его видели. Не лишним будет рассказать о нем в этом выпуске. Итак, приступим.

Тег параграфа в html определяется тегом

Пример:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

1 2	<p>This is a paragraph.</p> <p>This is another paragraph.</p>

Пример как выглядит тег параграфа p

Примечание: Многие браузеры добавляют свободное пространство (отступы) до и после абзаца.

Содержание

1 Отображение в HTML
2 Не забывайте закрыть тег P
3 Переход на новую HTML строку
4 Проблема в стихотворении
5 Элемент pre в HTML
6 Практика!

Отображение в HTML

Вы не можете быть на 100% уверены, как будет отображаться тег в HTML.

Большие или маленькие экраны и измененные окна создадут разные результаты. С помощью HTML вы не сможете изменить вывод, добавив лишние пробелы или дополнительные строки в свой html код.

При отображении страницы браузер удалит лишние пробелы и доп.строки:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

Браузер не воспринимает пробелы внутри параграфа

Не забывайте закрыть тег P

Так как он является парным не забудьте поставить слэш в конечном теге Хотя большинство браузеров отобразит его правильно, если вы забудете это сделать, но мы категорически за то, чтобы вы проставляли все четко!

<p>This is a paragraph.
<p>This is another paragraph.

1 2	<p>This is a paragraph. <p>This is another paragraph.

Необходимо закрывать тег параграфа

Пример выше будет работать, но не полагайтесь на это.

Примечание: Забыв проставить конечный тег параграфа, вы рискуете в дальнейшем получить непредвиденную ошибку.

Переход на новую HTML строку

Элемент html определяет разрыв строки, это вы уже знаете из прошлых выпусков. Используйте его если хотите сделать перенос на новую строку при этом не создавая нового абзаца.

Пример:

<p>This is<br>a paragraph<br>with line breaks.</p>

1	<p>This is<br>a paragraph<br>with line breaks.</p>

Тег переноса строки Br

Еще раз напоминаю, что тег одинарный и у него нет пары. Такая вот судьба у него 🙂

Проблема в стихотворении

Все четверостишье будет расположено в одно строчку:

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

Без обозначения тега переноса все будет в одну строчку

Элемент pre в HTML

Элемент html <pre> определяет преформатированный текст.

Текст внутри данного тега будет отображаться шрифтом фиксированной ширины (обычно это тип шрифта Courier) и он сохраняет как пробелы, так и разрыв строк.

Пример:

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

<pre>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

Вот так он выглядит в браузере:

Использование html тега pre

Как видно из примера шрифт отличается от того, что помещен в наш тег параграфа p.

Практика!

Задание #1

Задание #2

Задание #3

Задание #4

На этом все друзья. Надеюсь, что данный урок оказался вам полезен и вы извлекли из него определенные фишки. Обучение продолжается! Будьте в курсе новых статей уроков.

Рубрики: Обучение html