Тег div




Применение тега div, синтаксис и создание сайта на основе тега div.

Изучение блочного элемента — тега <div> может показаться довольно трудным, но это на первый взгляд. Практически ни один сайт не создается без использования блоков <div>, как минимум изображение вставляется с его помощью, правда существуют и другие способы, но этот самый универсальный. А оформление страниц с применением данных блоков делает код более читабельным и универсальным. Можно построить полностью сайт на таблицах, такая техника также постоянно применяется, но многие блоки сайта требуют персональных свойств, а применяя блоки <div> — можно достичь максимально комфортных условий для показа контента.

Тег div

Вникать в самые азы по изучению свойств блока <div> в данной статье не буду, а показать некоторые моменты, которые будут наиболее полезны при верстке своего сайта — нужно. Также можно посмотреть и скачать пример сайта созданного на блоках <div>, который описан в другой статье.

Примеры использования блоков <div>

Пример 1: формируются блоки таким способом — <div> наполнение </div> — закрывающий тег </div> — обязательный!!! Главное не запутаться в формировании блоков, потому что лишний тег может «рвать» страницу, а искать его можно долго. По данной причине каждый блок в свойствах нужно называть нужным названием и вставлять поочередно, тогда через время, при редактировании, легко будет что то менять.

Пример 2: без применения свойств, с блоков толку никакого. А значит всегда нужно задавать параметры размеров блока, или выставлять автоматическое расширение размера, под наполнение. В примере заданы высота, ширина, и бордер, который желательно сразу указывать, чтобы видеть само расположение блока, так будет удобнее при позиционировании, а дальше бордер можно обнулить (сделать невидимым), или окрасить нужным цветом.

Пример 3: расположить блок можно в любом месте страницы, для этого в свойствах нужно задать параметр position и задать ему индентификатор, например relative, который располагает блок в общем потоке (один за другим).

Пример 4: чтобы блоки <div> не налезали друг на друга, нужно задать параметр float:none;, который запрещает обтекание блока другими блоками и все они располагаются один за другим. А если задать параметры left или right — то разрешается обтекание блока слева, или справа.

Как видно из примеров, если задавать стили блокам непосредственно в самом коде каждого <div>, то код разрастается и теряется динамика. Просто при смене дизайна, нужно будет переписывать каждый блок по отдельности, что очень затруднительно. По этой причине и создается файл, который обычно называют CSS, который является единым файлом стилей для всего сайта и подключается ко всему сайту, а значит задает свойства стилей для всех блоков и всего шаблона.

Пример 5: создадим блок, с текстовым наполнением, которому присвоим индентификатор id=»text», свойства которого будут описаны в файле CSS и расположим наполнение в середине блока, придав свойства align=»center». Если файл CSS отсутствует, просто сайт может быть одностраничным, или нужно задать свойства только для этой страницы, тогда блок свойств нужно расположить в самом начале страницы, до закрывающего тега </head>, как показано в Примере 6.

Пример 7: если нужно расположить сам блок по центру страницы, тогда можно создать блок, который будет шириной 100%, и задать в нем свойство align=»center», а внутри него расположить нужный нам блок <div>. Кстати такая техника расположения блоков применяется постоянно, потому желательно хорошо изучить и практиковаться с данным методом позиционирования блоков. Для примера, меню делается обычно помещением нескольких блоков один внутри другого и таких вложений может быть много.

Для удобства, зададим отступы для внутреннего блока, чтобы было не меньше 10 пикселей со всех сторон — margin:10px;, чтобы смотрелось правильно и более естетично. Обычно всем блокам нужно задавать отступы со всех сторон, тогда код будет более читабельным.

здесь может быть все что угодно
пример расположения 2 блоков div

Данные примеры блоков самые распостраненные, а подробное изучение не возможно в одной статье, поетому желательно изучать учебники по HTML. Естественно не только текст вставляют в блоки <div>, а также изображения. Как вставить изображение — читайте в прошлой статье. О позиционировании блоков можно почитать в статье — как расположить блоки в ряд, там описан один из способов.