Теги, определяющие абзац, пробел, HTML блок и параграф
Рассмотрим в деталях HTML блоки и параграфы как элементы интернет-страницы.
- HTML параграф определяется тегами <p> </p>.
- HTML параграфы обыкновенно содержат текст, форматирующие теги, изображения.
- HTML параграф не может содержать внутри себя блочные элементы, такие как заголовки
<h1> – </h6>, блок <div> </div> и другие параграфы. - HTML блок определяется тегами <div> </div>.
- HTML блок может вмещать в себя любые элементы web-страницы, в любом количестве.
- HTML блоки прекрасно подходят для верстки интернет-страниц, ими легко манипулировать.
Рассмотрим расположенный ниже код:
<html>
<head>
<title>HTML параграфы и блоки</title>
</head>
<body>
<p>Первая строка</p>
<p>Вторая строка</p>
<div>Третья строка</div>
<div>Четвертая строка</div>
<div style="color:#ff0000"><p>Пятая строка</p></div>
<div>Шестая строка</div>
</body>
</html>
|
Посмотреть в новом окне HTML блоки и параграфы
Нам видно, что HTML параграфы имеют отступы по вертикали – такова особенность тегов <p> </p>. HTML блоки
<div> </div> такие пространства не создают, потому что они не несут никакой нагрузки,
а просто являются контейнерами.
Tеги <p> </p> не могут содержать другие <p> </p> или <div> </div>.
Внутри <p> </p> могут быть размещены линейные элементы, такие как
<span> </span> или, например, теги, отвечающие за
форматирование текста.
Теги <p> </p> и <P> </P>, в принципе, одно и то же,
но W3C консорциумом рекомендовано использовать маленькие буквы. В новой версии HTML как и в
современном XHTML использование больших букв при написании тегов запрещено.
Блок <div> </div> может содержать внутри себя сколько угодно
<div> </div> и <p> </p> и других элементов HTML документа. Он идеально подходит для верстки, но об этом позже – в
уроках CSS самоучителя.
HTML пробел из таблицы специальных символов
HTML пробел позволяет увеличить расстояние между словами и символами.
Что касается пробелов между словами, то сколько бы не было их в
Блокноте, то есть в исходном коде, на web-странице отобразится только
один. Если вам понадобится увеличить растояние –
используйте символ пробела из таблицы символов. Вы спросите: Зачем нужны эти закодированные значения обычных символов? – Я отвечу:
Они нужны, чтобы отображать, например, такие скобки < >. Другими словами,
для вывода на экран тегов <p> </p>, в своем редакторе я пишу: <code><p> </p></code>. Теги <code> </code>, как мы помним, преобразуют текст в моноширинный (машинописный).
Способы отображения HTML абзаца
Примеры вывода абзаца:
<html>
<title>Абзац в HTML</title>
</head>
<body style="background-color:#ffee77">
<p><blockquote>Отступ слева с использованием тегов.</blockquote></p>
<p style="text-indent:100px">Отступ слева с использованием CSS атрибута.</p>
</body>
|
Посмотреть в новом окне: HTML абзац
В первом случае абзац выводится тегами <blockquote> </blockquote>, а во втором случае — с помощью CSS атрибута text-indent и его значения, которое устанавливается в пикселях и может иметь любую величину, что бывает очень удобно.
HTML абзац или отступ мы рассматривали в уроке Выравнивание текста.
