Тег DIV – является, пожалуй, одним из самых часто встречающихся тегов html. В частности, форматирование элементов страницы с помощью стилей, используется совместно с использование блоков, организованных с помощью тегов DIV.
Тег DIV – это тег, с помощью которого хотят выделить фрагмент документа с целью изменения его внешнего вида. Другими словами, с помощью тега DIV выделяют блок в html коде, которому придают вид отличный от другого содержимого html кода.
Тег DIV – является блочным элементом, содержимое которого начинается с новой строки, а в конце блока всегда добавляется перенос строки. Синтаксис написания тега DIV:
<div>…</div>
Использование закрывающего тега </div> обязательно.
У тега DIV – всего два параметра. Первый параметр – align. С помощью параметра align, задается выравнивание содержимого тега DIV.
Вот значения, которые может принимать параметр align:
left – выравнивание текста по левому краю страницы,
center – выравнивание текста по центру страницы,
right – выравнивание по правому краю,
justify – выравнивание по всей ширине страницы.
Синтаксис записи – <div align=»center | left | right | justify»>…</div>
Второй параметр — title добавляет всплывающую текстовую подсказку к содержимому тега DIV.
Теперь давайте приведём примеры использования тега DIV.
Когда мы с вами создаём html код документа, то вставлять текст в документ просто так — неправильно.
Текст должен располагаться или в параграфе, (тег <p> … </p>) или в другом блочном элементе.
В данном случае, тег DIV, является универсальным блочным элементом, который можно без опаски применять для добавления текста в html документ.
Обычное добавление текста в документ html и его выравнивание на странице, это самое простое применение тега DIV. Наиболее удобно управлять видом содержимого блока с помощью стилей.
Как вы знаете из третьего СѓСЂРѕРєР°, есть три способа определения стилей. Стили могут быть определены:
1 — прямо в теге,
2 — в контейнере HEAD,
3 — во внешнем файле, содержащем таблицу стилей.
В наших примерах, давайте остановимся на последнем варианте и будем определять стили таблицей, расположенной во внешнем файле.
При этом, для выбора нужного стиля из таблицы, тег DIV, снабжают параметром class или id с именем селектора. Давайте посмотрим, как это работает, на примере следующего html кода.
Создадим html файл с именем div.html следующего содержания:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Тег DIV</title>
<link href=»css/file.css» rel=»stylesheet» type=»text/css»/>
</head>
<body>
<div id=»block1″>Это первый текстовый блок. Данный блок
имеет жёлтый фон и красную рамку. Толщина рамки 1 пиксел.</div>
<div class=»block2″>А это второй блок с белым Фоном.
Этот блок имеет зелёную рамку. Толщина рамки 2 пикселя.</div>
</body>
</html>
Как видите, контейнер <head> </head> — содержит строку <link href=»css/file.css» rel=»stylesheet» type=»text/css»/>, которая указывает на файл стилей file.css, который находится в каталоге CSS.
Файл стилей file.css, для примера, содержит следующую таблицу стилей:
#block1 {
width: 200px;
background: Yellow;
padding: 5px;
padding-right: 20px;
border: solid 1px Red;
float: left;
}
.block2 {
width: 200px;
background: White;
padding: 5px;
border: solid 2px green;
float: left;
position: relative;
top: 40px;
left: -70px;
}
Если открыть файл div.html браузером, тогда мы получим следующее:
То есть мы видим, что применяя, тег DIV в сочетании с таблицами стилей, на html странице достаточно легко добавлять любые нужные нам блоки и располагать эти блоки в нужном нам месте страницы.
Теперь, вооружившись HTML и CSS справочниками, Вы легко разберетесь с любым html кодом, который содержит форматирование контента на основе таблиц стилей.
Со временем, Вы научитесь писать свой html код, в котором будете использовать таблицы стилей CSS.
Кстати, Вы можете бесплатно скачать качественные справочники CSS и html.
Ну что же, мы с Вами находимся всего в одном шаге от того, чтобы разработать собственный html шаблон, основой которого являются DIV блоки, а форматирование содержимого html документа, осуществляется с помощью каскадных таблиц стилей.
Об этом мы с Вами поговорим в следующий раз.
Автор: Милованов Виктор
sozdavaite-sait.ru
Значение и применение
Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.
Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.
Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.
Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный.
Прочитать о разметке страницы в HTML 5 вы можете в следующей статье учебника: «Теги разметки страницы».
В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.
Тег <span> вы можете использовать для таких задач как:
- Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
- Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
- Создание различных форматирующих стилей для выбранного участка текста.
- Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.
Пример использования
<!DOCTYPE html> <html> <head> <title>Теги <div> и <span></title> </head> <body> <div style = "color:green"> <p>Абзацы мы объединили тегом <div>, а это <span style = "color:red">слово</span> мы заключили тегом <span>.</p> <p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p> </div> <div style = "background-color:khaki"> <p>Обратите внимание, что тег <div> является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p> <p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег <span>).</p> </div> </body> </html>
В этом примере мы:
- Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
- Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
- Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.
Результат нашего примера:
Отличия HTML 4.01 от HTML 5
Атрибут align не поддерживается в HTML5.
Значение CSS по умолчанию
div { display: block; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
basicweb.ru
Классы и идентификаторы
Классы (class) и идентификаторы (id) выполняют одни и те же задачи. Они задают разные стили для тега <div>, как во внешнем CSS файле, так и внутри документа, через тег style. Тут надо пояснить, что они работают в связке не только с тегом <div>, но и со многими другими тегами.
Рассмотрим на примере ниже следующий код HTML-разметки:
<div id="content">
Учиться никогда не поздно!
</div>
<div class="content">
Повторение мать учения
</div>
Зададим внешний вид 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 свойств выше приоритет, чем у свойств классов.
<style>
#text {color: red;}
.text {color: blue;}
</style>
<div id="text" class="text">красный текст</div>
Этот пример наглядно демонстрирует, что несмотря на то, что class с синим текстом находится ниже, текст все равно красный. Если бы id не имел приоритета, то текст был бы синий.
Кроме того конкретному тегу можно задавать несколько классов, перечисляя их через пробел. Такая система позволяет не создавать лишних классов, а использовать их более эффективно. У id селектора разумеется такой возможности нет.
Есть еще одно важное отличие, оно касается программистов. Если планируется обратиться к элементу HTML документа через язык JavaScript, то обязательно надо применять id, реализовывать это через классы намного сложнее.
Когда лучше использовать id, а когда class?
Если на странице какой-нибудь из элементов, например, шапка сайта, меню, кнопка, используется только один раз, то надо применять id. Селектор class применяется к одному тегу или к разным тегам столько раз, сколько раз они прописаны на странице. Например, картинки, маркированные списки, абзацы.
В заключении хочу дать дружественный совет всем тем, кто хочет научиться самостоятельно создавать сайты. Очень долго и не эффективно черпать знания о сайтостороении из статей и уроков. Обратите внимание на мой видеокурс по данной тематике. Это один из лучших курсов для начинающих.
myrusakov.ru
Возникновение
Усложнение веб-страниц и развитие компьютерной техники привело к тому, что веб-документ был разделен на две части — каркас (HTML-код) и оформление (таблицы стилей). Благодаря этому удалось достичь небывалого развития веба, результаты которого мы сейчас можем лицезреть на большинстве современных сайтов. Кроме улучшения процесса разработки <div> HTML позволил определить для каждого отдельного элемента свои правила оформления. Это способствовало улучшению читаемости кода веб-страницы и уменьшению времени загрузки документа. Теперь поисковые машины гораздо быстрее и лучше обрабатывают информацию, доступную на сайте.
Стандарты и проверка
Тег <div> в HTML используется в строгом соответствии со стандартами W3C (Консорциума всемирной паутины). Проверка кода страницы проводится специальным инструментом — валидатором, который парсит (сканирует и ищет) всевозможные ошибки на странице. Валидная страница означает, что все теги были использованы правильно и полностью отвечают требованиям стандартов.
Теги <div> позволяют создавать блоки или, как их еще называют, контейнеры. При этом отдельные элементы могут вкладывать друг в друга, создавая при этом структуры необходимой конфигурации и сложности. Использование тега <div> без сопровождения классом или идентификатором практически не встречается. Это обусловлено «безликостью» элемента. Если ему не присвоить класс, то в итоге все контейнеры будут иметь идентичную конфигурацию.
Для того чтобы создать действительно правильный документ, необходимо использовать следующую структуру тега <div> class= «какое-то_имя». Обращаясь по имени класса, в таблицах стиля можно определить положение, размер, подведение и другие параметры отдельного блока в документе.
Использование классов и идентификаторов
Блок <div> HTML может определяться как идентификатором id, так и классом class. Отличие первого от второго в том, что id используется на странице документа только один раз. То есть его используют для определения уникальных элементов, которые более нигде не повторяются в коде страницы. Атрибут класса позволяет применять те же правила стилей к нескольким элементам. Такой подход значительно упрощает разработку и поддержку кода. Кроме того, один объект может иметь одновременно несколько классов. Для правильного распознания их просто разделяют пробелами.
Естественно, блочная структура документа вовсе не подразумевает использование только лишь одних тегов <div>. В структуре любой интернет-страницы всегда будут и другие элементы. Кроме того, сам по себе блочный элемент <div> может иметь совсем другой вид отображения. Делается это при помощи свойства display. Элемент может иметь строчное или даже табличное отображение, что позволяет значительно увеличить гибкость использования блока и создать сайт любой конфигурации.
Тег <div>. HTML-свойства
Как уже было сказано выше, данный тег не изменяет оформление фрагмента страницы, а используется для создания семантической структуры с последующим оформлением посредством таблиц стилей. Использование закрывающего тега для этого элемента является обязательным.
Несмотря на то что многие современные браузеры смогут распознать такую ошибку, в некоторых случаях незакрытый тег может стать причиной «разваливания» структуры документа и его неверного отображения.
Так как данный элемент является блочным, то вмещенный в него контент будет начинаться с новой строки. Для изменения подобного поведения необходимо изменить параметры отображения блока свойством display. Кроме группирования вложенных элементов, тег <div> позволяет форматировать расположение контента внутри него. Для этого используется атрибут align, благодаря которому можно разместить текст или изображение по левому краю, по правому краю или по центру родительского элемента.
Позиционирование блоков
Использование атрибута position позволяет изменить метод позиционирования выбранного элемента. Так, существует три типа позиционирования:
- Статическое (static) — используется по умолчанию. В этом случае элемент располагается в соответствии с позицией в HTML-коде.
- Относительное (relative). В данном случае расположение объекта рассчитывается так же, как и в случае со статическим позиционированием, но данное свойство позволяет изменять позицию для дочерних элементов.
- Абсолютное (absolute). Положение его рассчитывается относительно элемента с относительным позиционированием.
Другие атрибуты
Для изменения позиции относительно точки начала координат используются атрибуты top и left. Значения могут быть как положительными, так и отрицательными. Ширина и высота блочного элемента задается атрибутами width и height соответственно. Если они не были указаны в таблицах стилей, то блок будет занимать всю ширину родительского элемента. Если контент блока не помещается по всей ширине «родителя», то тогда поведение элемента определяется атрибутом overflow.
Надеемся, данная стать помогла разобраться с вопросом о том, что такое <div> в HTML.
fb.ru
Поддержка браузерами
Описание
Элемент <div> является обычным контейнером для содержимого, который не несет в себе никакого семантического смысла. Он используется для группирования в одном блоке логически связанных между собой элементов с целью разметки и стилизации. Обычно его используют только тогда, когда никакой другой семантический элемент (article, section и т.д.) не является более целесообразным.
HTML тег <div> является блочным, его содержимое всегда начинается с новой строки и занимает всю доступную ширину, но отступов от других элементов он не имеет, то есть элементы, расположенные до и после него, будут вплотную прилегать сверху и снизу. Отступы легко можно отрегулировать с помощью каскадных таблиц стилей (CSS).
Содержимым тега <div> может быть любой другой элемент HTML: абзац, изображение, ссылка, другой блок с контентом (т.е. другой div вместе со всем своим содержимым).
Атрибуты
Тег <div> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
div { display: block; }
Пример
<div style="background: #ff0000;">Блок красного цвета</div> <div style="text-align: center;">Выравниваем текст по центру</div>
Результат данного примера в окне браузера:
puzzleweb.ru