HTML контейнеры: верстка и форматирование

Поскольку уж мы начали разбираться в коде своих блогов на Вордпресс — нам не обойти вопрос html форматирования. Конечно, это целая наука. Но мы постараемся разобраться с основами: понять, какие теги используются для форматирования текста — отдельных постов, страниц. Тогда нам удастся вносить в эту структуру осмысленные изменения.

Блочная верстка Вордпресс

Для начала обсудим общий принцип формирования html-кода для Вордпресс. Он носит название «блочная верстка». И, как нетрудно догадаться, это значит, что шаблон состоит из неких блоков. Мы уже видели это на примере шаблона страницы или одной записи (читайте статью о постоянных элементах страницы).

Но и если вы откроете код любой статьи блога (например, в режиме html-редактора) — то увидите те же блоки, расположенные один над другим. Вообще, такая верстка является настолько естественной, что многие авторы даже не задумываются, что это именно определенный принцип, а не сложившееся само собой положение вещей.

На самом деле, далеко не все так очевидно. Вот, например, верстка таблицы (можете подробно прочитать о таблицах в отдельной статье):

<table>
<tr>
<td>   Левая ячейка</td>
<td>   Правая ячейка</td>
</tr>
</table>

Мы видим, что отдельные элементы (ячейки) прописаны одна над другой. А располагаться они будут на одной линии. Вот результат такой простой записи:

Обратите внимание, что, если в таблице нет никаких границ — то содержимое ее ячеек выглядит, как обычная запись. Представьте, что мы можем (а мы можем!) задать любую конфигурацию для ячеек, добавить туда не только текст, но и картинки… А теперь попытайтесь представить, каким навороченным будет код такой страницы!

Именно такой принцип верстки применяли раньше (например, для сайтов narod) и иногда применяют до сих пор! Он называется «табличная верстка». Так что, естественность блочной верстки — это удачная находка разработчиков, а не случайность.

Элементы блочной верстки

Но как формируются блоки в блочной верстке? Как браузер отличает, что один элемент закончился и начался следующий? Как он определяет, что у этого элемента такие свойства и стили, а у другого — другие? — Это главные вопросы, которые приводят нас от теории к практике.

Итак, блоки — это фрагменты контента, которые заключены в блочные теги или блочные элементы (контейнеры). Вообще-то, их немало, но мы сегодня познакомимся с самыми важными и часто встречающимися — тегами div, p, h.

У всех блочных элементов есть общие правила форматирования:

• Ширина такого элемента будет равна ширине родителя. То есть, например, ширина текста поста будет равна всей ширине колонки;
• Высота определяется количеством контента. То есть, абзац будет выше, если в нем больше текста;
• Новый блок начинается с новой строки.

Контейнер div

Это базовый тег для любого шаблона Вордпресс. Посмотрите коды своей темы — там будут вызовы функций php:

<? php ...; ?>

И некие фрагменты, заключенные в теги — собственно, контейнер:

<div>...</div>

Причем в такой контейнер могут заключаться и php-функции, и другие теги (например, активные ссылки, ограниченные тегами а, заголовки h и т.д.)

Зачем же вообще нужен такой контейнер? — Чтобы присвоить ему отдельный стиль, который будет прописан отдельно (в таблице стилей). Так можно написать довольно лаконичный код, состоящий из отдельных блоков для которых будет назначено название или id стиля. Но сам CSS-код оформления будет подгружаться из другого файла. Свойства стиля дописываются так:

<div class="название стиля">...</div>
или так
<div id="id стиля">...</div>

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

Контейнер p

Эти теги мы преимущественно встретим в форматировании отдельной записи — стоит только открыть html редактор статьи. Потому, что этот тег содержит в себе контент одного абзаца текста. Как правило, к нему применяют стилевое свойство text-align, которое устанавливает выравшивание:

• text-align: left; — выравнивание по левому краю;
• text-align: right; — выравнивание по правому краю;
• text-align: justify; — выравнивание по ширине;

Полная запись выглядит, например, так:

<p style="text-align: right;">...</p>

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

Контейнер h

Это известный тег, в который заключаются заголовки — h1, h2, h3 и так далее. Стили для каждого типа заголовков уже прописаны в теме блога. Они участвуют и в верстке страниц шаблона, и в форматировании отдельных постов.

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

<?php get_header(); ?>
<h3>Мой блог - самый лучший!</h3>
<?php the_content(); ?>

А в следующий раз мы рассмотрим строчные элементы, без которых верстка и форматирование блога, также, невозможны.