Что есть такое блочная верстка и с чем ее едят? Ранее сайты верстали при помощи таблиц. Каждый элемент страницы — заголовок, текст, картинка — располагался в собственной ячейке, ячейки кучно роились в других, более крупных ячейках, те в свою очередь лежали в главной ячейке, сиречь самой странице сайта. Табличная верстка сейчас уже морально устарела, хотя очень многие вебмастера продолжают ее использовать. Большим минусом ее является тяжеловесный код. Ведь каждую мало-мальскую ячейку нужно обозначить определенными тэгами. Поэтому более не станем говорить за таблицы, а таки плавно перейдем к блочной верстке.
Для начала немного теории. Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы. Содержимым блока может быть что угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.
Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная). Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был "впритык” к стенкам блока. Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Блоки, как и таблицы — это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как "обтекание” (float). Но об этом чуть позже.
Тэг — это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру тэг абзаца:
<p>Текст абзаца.</p>
всегда обозначается буквой "p” и никак иначе. Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен "слэш” — косая черта, наклоненная вправо. Не все тэги имеют закрывающую пару. Например тэг изображения img его не имеет вовсе. Но чтобы соответствовать современным стандартам и требованиям спецификации XHTML, ему все-таки добавляют перед закрывающей угловой скобкой пробел со слэшем. Выглядит это примерно так:
В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому (”р” — к абзацам, "а” — к ссылкам, "img” — к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: "шапка” (header), блок навигации, блок основного содержимого, "футер” (footer) или подвал по-нашему. У данного тэга, как и у любого другого, имеются свои собственные атрибуты.
Атрибут — описательная характеристика тэга. То есть что он может делать и каким образом. Например, опять же возьмём тэг изображения:
<img src="images/risunok.jpg" mce_src="images/risunok.jpg" width="200px" height="50px" alt="Рисунок меня, где я кормлю собаку, а она кусает меня зачем-то" />
В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов. Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images, шириной 200 пикселей, высотой 50 пикселей. И + альтернативный текст, который всплывает на страничке при наведении мышки на рисунок. Это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Вот для них и существуют альтернативные подписи к рисункам. Если же их нет смысла подписывать (например маркер списка или стрелка какая), то у атрибута alt оставляют пустое место — alt=”".
Итак, атибуты тэга div. Их есть всего два:
id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например "header” (про кавычки не забываем), или "footer". Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением "header” (шапка) одни настройки, а для подвала "footer” совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом р относится к "шапке” и будет набран крупным и красным шрифтом, а вот этот к "подвалу” и будет мелким и серым. И никакой путаницы!
class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать.
