Атрибуты div. Избегаем распространенных ошибок в HTML5 разметке

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

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

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

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

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

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

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

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

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

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

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

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

Итак, давайте поясню. У нас есть конструкция < ! 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 >

< / head >

< body >

Любая веб-страница состоит из расположенных на ней элементов, и практически всегда за их размещение отвечает блочная верстка div. Конечно, существует еще и табличная верстка с использованием тегов

, ,

, и существуют даже споры о том, какую лучше использовать систему — блочную или табличную. Однако в действительности в в настоящее время вы не встретите ни одного из современных, популярных и удобных сайтов, использующих только табличную верстку. В лучшем случае она используется только для того, для чего она и предназначена — то есть для создания таблиц, но никак не для формирования самой структуры сайта.

Дело в том, что div верстка сайта позволяет задавать множество css-свойств, недоступных для таблиц. Кроме того, самый главный недостаток табличной системы состоит в том, что таблица не будет показана на экране до тех пор, пока она не будет полностью загружена браузером. Если весь сайт сделан в таблице, то он появится на дисплее лишь после того, как будет полностью загружен весь html-код страницы.

Тег DIV и свойство float

Основа блочной системы — это тег

, который является контейнером для контента. Внутри него также могут содержаться другие контейнеры

Использовать тег DIV — не сложнее, чем . Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер

(часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.

По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».

Рассмотрим это свойство на примере с двумя блоками.

Блок для контента

Блок для сайдбара

Этот код даст следующий результат:

Свойство clear

Важно учитывать, что свойство float распространяется не только на сам блок, в котором оно прописано, но и на последующий элемент, который будет идти за этим блоком. То есть если мы к вышеописанным двум блокам добавим еще один блок, не указывая ему никаких свойств, то он расположится не с новой строки, а начнется справа от второго блока.

Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.

Дополним вышеуказанный пример новым элементом:

Блок для контента

Блок для сайдбара

Новый блок, расположенный снизу

Результат:

Отступы в блочной верстке

Помимо расположения блоков, немаловажным является задание отступов как между блоками, так и внутри них. Для этого, соответственно, используются свойства margin и padding.

Отступы задаются отдельно для верхней, правой, нижней и левой частей элемента. Их можно задать одной строкой путем перечисления четырех значений:

Margin: 20px 10px 0 40px

Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.

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

Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.

Элемент

(от англ. division - раздел, секция) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или с именем класса или идентификатора.

Как и при использовании других блочных элементов, содержимое

всегда начинается с новой строки, после него также добавляется перенос строки.

Синтаксис

...

Закрывающий тег

Обязателен.

Пример

DIV

Почвообразовательный процесс физически иссушает монолит в полном соответствии с законом Дарси. В лабораторных условиях было установлено, что сушильный шкаф теоретически возможен. Выветривание, несмотря на внешние воздействия, однократно.

Конкреция пространственно трансформирует пирогенный псевдомицелий, хотя этот факт нуждается в дальнейшей тщательной экспериментальной проверке.

Результат данного примера показан на рис. 1.

Рис. 1. Вид блоков, оформленных с помощью стилей

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации ) - первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

В таблице браузеров применяются следующие обозначения.

Сегодня уже трудно найти сайт, где не использовался бы такой нужный и важный тег

. Посмотрите код любого сайта, который найдете в интернете и увидите, что тег

чаще других тегов встречается в HTML документе. Причина такой популярности – это блочная верстка. Иными словами с помощью блочного тега

верстаются сайты.

Благодаря этому тегу весь HTML код документа имеет наглядную и логически понятную структуру. В которой легко разобраться не только верстальщику, но и другим специалистам, совместно работающим над одним проектом. Однако тег

без своих «сателлитов» - селекторов id и class ничего не стоит.

Классы и идентификаторы

Классы (class) и идентификаторы (id) выполняют одни и те же задачи. Они задают разные стили для тега

, как во внешнем CSS файле, так и внутри документа, через тег style . Тут надо пояснить, что они работают в связке не только с тегом

, но и со многими другими тегами.

Рассмотрим на примере ниже следующий код HTML-разметки:

Учиться никогда не поздно!

Повторение мать учения

Зададим внешний вид HTML документу с помощью CSS файла стилей:

/* знак # перед именем - обозначение id */

#content {
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}

/* (.) перед именем обозначает class */

Content {
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}

Имена id и class задает сам разработчик произвольно, исходя из смысловой нагрузки. Мы назвали их просто content . Нельзя давать имена русскими буквами, можно использовать цифры, символ дефиса (-) и подчеркивания (_) .

Мы видим два абсолютно одинаковых блока. К верхнему блоку применяется селектор id , а к нижнему блоку применятся селектор class . Вы спросите, где же разница между div-ами id и class ? Чисто внешне, пока никакой разницы, до тех пор, пока мы применяем по одному id и class на одну страницу.

В чем тогда различие между class и id ?

Различие кроется в самом названии id , значит идентификатор, то есть уникальный. Главное отличие от классов в том, что селектор id может использоваться на странице только один раз. Селектор class , наоборот может применяться на одной странице бесконечное количество раз.

Например:

Content /* может применяться к любым тегам */
div.content /* применяется только к тегам div с классом.content */
div#content /* для id такая запись не имеет смысла, он уникален */

Так же стоит отметить, что у id свойств выше приоритет, чем у свойств классов.

красный текст

Этот пример наглядно демонстрирует, что несмотря на то, что class с синим текстом находится ниже, текст все равно красный. Если бы id не имел приоритета, то текст был бы синий.

Кроме того конкретному тегу можно задавать несколько классов, перечисляя их через пробел. Такая система позволяет не создавать лишних классов, а использовать их более эффективно. У id селектора разумеется такой возможности нет.

Есть еще одно важное отличие, оно касается программистов. Если планируется обратиться к элементу HTML документа через язык JavaScript , то обязательно надо применять id , реализовывать это через классы намного сложнее.

Когда лучше использовать id , а когда class ?

Если на странице какой-нибудь из элементов, например, шапка сайта, меню, кнопка, используется только один раз, то надо применять id . Селектор class применяется к одному тегу или к разным тегам столько раз, сколько раз они прописаны на странице. Например, картинки, маркированные списки, абзацы.

В заключении хочу дать дружественный совет всем тем, кто хочет научиться самостоятельно создавать сайты. Очень долго и не эффективно черпать знания о сайтостороении из статей и уроков. Обратите внимание на по данной тематике. Это один из лучших курсов для начинающих.

Категории