Изучаем html блоки тег div - верстка, примеры, видео

27 ноября, 2014 Максим Метелев 40603 просмотров Комментариев нет

Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка.

У вас наверняка возникли вопросы, особенно если вы новички, что же это такое?

В сегодняшней статье я развею все ваши сомнения и отвечу на вопросы что из себя представляют div блоки в

Приступим к изучению.

Содержание

1 HTML div блоки и верстка
2 Примеры использования тегов div
- 2.1 Рекомендую ознакомиться с этими статьями:

HTML div блоки и верстка

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

Здесь располагался логотип Тут телефон
Здесь был сайдбарС пунктами меню	Раздел меню 1	Раздел меню 2	Раздел меню 3

Вот примерно таким было создание сайтов. Это очень примитивный пример, зато вы наглядно можете представить как создавались сайты в те далекие времена. Технологии интернет не стоят на месте и в какой-то момент к нам пришло такое понятие как html div верстка. И тут, как говорится, понеслось.

Ее значение в сайтостроении действительно велико. Теперь создавать сайты и управлять блоками html стало проще простого. Сайты стали получаться красивыми, интересными. Теперь весь мир верстает ими только в путь.

Вот так теперь можно изобразить упрощенно модель использования div html блоков.

Html div блоки

Удобство заключается в независимости блоков друг от друга, ими легко управлять по отдельности, двигать как вам угодно, добавлять стили, можно задавать общие стили через CSS правила для нескольких групп Div. Согласитесь это удобно.

Примеры использования тегов div

Давайте разберем на практике несколько примеров как можно применить теги div на html странице. На простом примере мы создадим 4 блока на странице. Я буду всегда использовать в этом и дальнейших примерах программу Notepad++

Примеры кода блоков div на веб странице в редакторе

Итак, давайте поясню. У нас есть конструкция <!DOCTYPE html> она годна для современных браузеров и поддерживает разметку html 5 про нее мы поговорим в дальнейших выпусках.

Далее открывается большой «родительский» контейнер <html> . Он парный его нужно закрыть в конце обязательно! Потом идет открытие служебного тега <head> , который тоже парный и в нем содержится служебная информация о кодировке <meta charset> , самый главный seo заголовок страницы title, описание (его сюда я не включал, ибо нет необходимости, мы разбираем чисто технический аспект), сюда же подключают CSS стили, шрифты (библиотека Google Fonts), яваскрипты.

Следующим идет тег <body> . В нем уже будет хранится вся наша разметка блоков и все контейнеры с тегами. Просто запомните его как огромную «бочку».

И вот, наконец, пошли наши контейнеры div.

<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
<div class="footer"></div>

Важно! Они тоже парные их нужно также наряду с другими тегами закрывать.

Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их. Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс.

Можно задавать не только атрибут class, но также можно использовать и id (идентификатор). Вы можете задать вопрос: «А какая мне разница, какой использовать?» Отвечу, для верстки можете применить любой способ. С одним лишь отличием — по приоритету id имеет больше привилегий, чем class .

Это я поясню в видео шпаргалке ниже.

У каждого свой стиль создания сайтов, мне больше нравится использовать именно class, поскольку эта запись в CSS отображается с точкой .selector

Да, кстати, хочу сказать, что header, sidebar, content, footer — это все селекторы CSS, а они уже будут иметь атрибуты.

Итак, продолжаем разгребать кашу в головах пользователей. Div блоки с class мы создали теперь приступим к CSS.

Откроем внутри тега head css правила для нашей страницы, т.е оформим ее. Сделаем это вот так:

стиля для блоков div

Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)

<!DOCTYPE HTML>
<html>
        <head>
                <meta charset="utf-8">
                <title>Пример использования div тегов</title>
                <style>
                        .header {
                                width:600px;
                                height:120px;
                                border:1px solid black;
                        }
                        
                        .sidebar {
                                width:200px;
                                height:300px;
                                border:1px solid black;
                                float:left;
                        }
                        
                        .content {
                                width:370px;
                                height:300px;
                                border:1px solid black;
                                margin-left:230px;
                        }
                        
                        .footer {
                                width:600px;
                                height:130px;
                                border:1px solid black;
                        }
                </style>
        </head>
        <body>
                <div class="header"></div>
                <div class="sidebar"></div>
                <div class="content"></div>
                <div class="footer"></div>
        </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Пример использования div тегов</title>

<style>

.header {

width:600px;

height:120px;

border:1px solid black;

}

.sidebar {

width:200px;

height:300px;

border:1px solid black;

float:left;

}

.content {

width:370px;

height:300px;

border:1px solid black;

margin-left:230px;

}

.footer {

width:600px;

height:130px;

border:1px solid black;

}

</style>

</head>

<body>

</body>

</html>

У блока с контентом .content я добавил отступ от левого края margin-right:230px; О том, как сделать отступы я говорил вот в этой статье.

Чтобы увидеть границы наших div блоков я применил атрибут border и задал значение 1px, solid — сплошная линия и выбрал цвет черный black.

Также вы наверняка обратили внимание, что у селектора .sidebar я добавил атрибут float:left; Это обеспечивает «обтекание» других блоков по левому краю. Вот что получилось бы, если мы уберем этот элемент:

пример без обтекания блоков

Теперь предлагаю вашему вниманию видео урок, где я подробно рассказываю про возможности html div верстки. Смотрите внимательно и просто повторяйте. Ниже можете скачать исходник с нашим примером. Спасибо за внимание!

[sociallocker id=»3259″]Скачать Исходник

[/sociallocker]