В этой части курса мы рассмотрим самое важное и самое нужно понятие - понятие "блок".
(P.S.: Полный текст поста можно посмотреть в моем блоге, в ленте они не открываются)
В прошлый раз мы рассмотрели что значат строки между тегами <head> и </head>, а также коснулись нового понятия - языка стилей CSS, а также задали фон для нашей темы как пример написания кода на языке СSS.
Сейчас мы отодвинем в сторону практическое написание и кода и почитаем немного теории.
Раньше, с появлением языка html и до появления CSS, сайты создавались (про создание сайта применяется термин "верстка" или "верстать страницы", далее я буду использовать этот термин) с помощью таблиц. Вот представьте, вам нужно сверстать (создать) сайт вот такого формата:
Тогда Вам бы пришлось создать таблицы 3х3 ячеек, две верхние склеить в одну и две нижние также склеить в одну ячейку. Тогда бы Вы получили макет сайта, который представлен выше. А что, если в боковую панель вам нужно тоже разделить, допустим, на 4 куска? Тогда в ячейку, которая является боковой панелью, пришлось бы вставить еще одну таблицу. А если структура сайта очень сложная - то представьте сколько вложенных таблиц будет. И для каждой придется прописывать как она должна выглядеть и так далее… Такое построение сайта имеет большие недостатки: много кода, трудно переделывать. С развитием сети Интернет появилось более удобный способ верстки страниц (то есть создания сайта) - это язык CSS и его блоки.
Что такое "блок"? Представьте, что Вы строите башню из кубиков. Вы берете кубик, кладете на него другой, на этот еще один и так до тез пор, пока не будете удовлетворены результатом:
Вот так и наш шаблон мы будет создавать - класть один блок на другой.
Далее, как создать блок? За блок отвечает тег <div></div>. Чтобы создать четыре блока друг на друге нужно написать между тегами <body> и </boby> такой вот код:
<body>
<div> <!-- Блок 1 -->
</div>
<div> <!-- Блок 2 -->
</div>
<div> <!-- Блок 3 -->
</div>
<div> <!-- Блок 4 -->
</div>
</body>
Теперь, вставив этот код в шаблон и сохранив его Вы на своей странице… ничего не увидите :) Все потому, что эти блоки ничего не содержат внутри себя. Давайте напишем любой текст внутри блока (между каждым из тегов) <div></div>:
<body>
<div> <!-- Блок 1 -->
Любой текст 1
</div>
<div> <!-- Блок 2 -->
Любой текст 2
</div>
<div> <!-- Блок 3 -->
Любой текст 3
</div>
<div> <!-- Блок 4 -->
Любой текст 4
</div>
</body>
Результат должен быть таким:
Видите? Блоки с текстом лежат один под другим. Заметьте порядок - как вы написали в шаблоне, так они появятся и на страницы - "Любой текст 1" будет самым верхним, а "Любой текст 4" - самым нижним.
На этом пока что все. В следующий раз мы рассмотрим как давать имена блокам и начнем изучать как менять внешний вид блоков. Если у Вас есть вопросы по поводу уроков - пишите в комментарии или Вконтакте
Показать/Скрыть текст статьи