Давненько о WEB-разработке ничего не писал – надо приступить к этому. Про CSS вы уже знаете, но сегодня нам css-стили не понадобятся, в следующий раз будем использовать. А сегодня я только расскажу о верстке HTML-страниц с помощью DIV-элементов. Дам небольшие примеры.
Вообще, что такое верстка? Грубо говоря это расположение элементов соответственно с эскизом сайта. Если у нам задали (или мы хотим) чтобы у нас был на сайте основной блок информации и дополнительный (с боку) – то так и должно быть. Мы должны сверстать там, чтобы информация появлялась по центру (основная) и сбоку (дополнительная).
Раньше эту задачу решали с помощью таблиц (TABLE в HTML). Таблица – это элемент, в котором есть строки, столбцы и ячейки. Можно всю страницу разделить на большое количество ячеек (каждую из которых – также можно разделить на ячейки). И в эти ячейки помещать необходимые объекты. В принципе – просто.
Но объем кода в несколько раз возрастает. И для его понимания требуется много ресурсов. Так что на смену табличной верстке пришла блочная (DIV) верстка. Все объекты разделяются на блоки (с помощью DIV-тегов) и из этих блоков мы и будем конструировать наши странички, изменять их цвет и тд.
По умолчанию блок занимает все отведенное ему от левой границы до правой (высотой блок именно столько, сколько занимает объект в нем). Но такую растяжку можно исправить, это делается с помощью CSS (в следующий раз расскажу). И теперь небольшой пример HTML-странички с DIV-версткой:
<html>
<head>
<title>DIV верстка:</title>
</head>
<body>
<hr>
<div id="1">
Первый блок
</div>
<hr>
<div id="2">
Второй блок
</div>
<hr>
<div id="3">
Блок побольше<br>
Из нескольких строк<br>
Высота - всего 4 строки<br>
А ширина - весь дисплей<br>
</div>
<hr>
<div class="4">
Еще блок
<div class="C1">
   Подблок
</div>
</div>
<hr>
<div class="C1">
Класс отдельный, но стиль берется из класса C1
</div>
<hr>
</body>
<html>
Все просто, есть несколько блоков. В блоках можно объявлять другие блоки. И еще одна особенность у DIV-блоков. У них можно объявить идентификатор (ID) и класс (CLASS). С помощью названий, которые стоят после ID или CLASS можно в CSS обращаться к данным блокам и изменять их внешний вид.
Отличие следующее – ID уникален, CLASS – может повторяться. Обычно идентификатор применяется для блоков страницы (верхняя часть, центральная, боковая и нижняя), а классы – применяются к повторяющимся блокам типа P, H и тд.
В следующий статье я приведу описание примера, в котором будет создана очень простая верстка без картинок (для упрощения понимания). А для тех, кому дорого свое время на изучение данной темы (и особенно для тех, кто проживает в нашей Северной Столице) – говорю что сайт в спб - это недорого и довольно быстро. По ссылке можете перейти на ресурс, который предлагает геогрифически-ориентированные услуги по созданию сайтов (в данном случае – для жителей Петербурга). Цены хорошие, переходите – и все сами узнаете.
Комментариев нет:
Отправить комментарий