Думаю, любой начинающий веб-мастер в первую очередь вникает в то, что любой сайт строится на базе тегов HTML. Но это еще не все. Стоит учитывать тот факт, что посредником между верстальщиком и пользователем является интернет-браузер или пользовательский агент. Для корректной работы последнего элемента были созданы правила по созданию HTML файлов:
- Чтение кода машиной осуществляется сверху вниз и никак иначе;
- Все теги на странице располагаются по принципу блочной системы. Соответственно и сами теги имеют очертания прямоугольного блока;
- Каждому блоку присваивается свои ширина и высота;
- Блоки разделяются на родительские и дочерние элементы;
- Позиция по умолчанию нового блока начинается от нижнего левого угла своего родителя;
- Расположение блоков на прямую зависит от положения соседних.
Именно о разборе этих постулатов пойдет речь в данной статье.
На заметку начинающему веб-мастеру!
Пользовательский агент имеет способность изменять позиционирование блоков и их типов. Поэтому, для начала, разберем различные методы форматирования кода простейшими браузерами.
Визуальный браузер
Каждый браузер имеет в своем арсенале участок, посредством которого происходит визуализация кода. Опытные пользователи используют понятие «порт просмотра». Этому участку заданы определенные размеры и границы. Если же содержимое превышает по размерам границы данного участка, то браузер должен предоставить способ, который позволит просмотреть этот скрытый контент. В этом случае нам на помощь приходят полосы прокрутки:
Блок HTML-файла
Опираясь на спецификации CSS, можно констатировать, что скелет веб-ресурса состоит из прямоугольных составляющих, которые называются чаще всего блоками. Для закрепления и лучшего разъяснения данного тезиса воспользуемся следующим примером:
<html> <body> <p>Абзац с важной информацией.</p> <ul> <li>Первый тезис</li> <li>Второй тезис</li> </ul> </body> </html>
Для улучшения визуализации следует еще добавить отступы и присвоить каждому блоку свой цвет. В результате получим:
А вот реальный пример того, как простейшая блочная система на практике превращается в стильный дизайн:
Также следует понимать, что вне зависимости от уровней вложенности и особенностей тегов — они всегда будут иметь блочную форму и такое же расположение.
Вполне возможно усовершенствование данной системы строения сайтов в будущем, однако пока CSS отлично справляется с помощью простых и изящных прямоугольных блоков.
Контейнер
Контейнер — это особый блок, который внутри себя содержит еще несколько блоков. Язык HTML позволяет нам достаточно просто отличить их от обычных блоков: это те теги, которые могут открываться и закрываться. К примеру ul (<ul></ul>), div (<div></div>), strong (<strong></strong>) и p (<p></p>). В тоже время <img/> не является контейнером.
Также существует отдельный класс элементов HTML страницы, который носит название Replaced element («Замещаемые элементы» на русском). К таким элементам относят ту часть кода, которая при отображении заменяется другой информацией, отличающейся от исходной. К таким элементам относятся <img/>.
