Как работает

, элемент разделения контента HTML

Development | Amber | Комментировать запись

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

Элемент разделения <div> по сути работает как контейнер, который структурирует веб-страницу, делит ее на отдельные компоненты, что позволяет создавать индивидуальный стиль. В этом мануале мы поговорим о том, как создавать и стилизовать контейнеры <div>.

Сам по себе элемент <div> мало влияет на макет страницы, обычно для настройки размера, цвета, расположения он использует атрибуты. Часто разработчики стилизуют элементы <div> с помощью CSS, но в этом мануале мы покажем вам, как стилизовать их непосредственно в HTML-документе.

Стиль элемента <div> оформляется с помощью HTML атрибута style. Как показано в примере ниже, элемент <div> может содержать несколько свойств стиля одновременно:

<div style=”property: value; property: value;”></div>

Обратите внимание, элемент <div> состоит из открывающего и закрывающего тега, но при этом не требует какого-либо контента. Чтобы посмотреть, как элемент <div> работает на практике, очистите файл index.html и вставьте в него такой код.

<div style="width:300px;height:200px; background-color:red;">
</div>

Примечание: Если вы работали с этой серией мануалов непоследовательно, рекомендуем обратиться к статье Подготовка HTML-проекта, чтобы создать файл index.html.

Сохраните файл и перезагрузите его в браузере.

Читайте также: Основы работы с HTML-элементами

Вы должны получить красный прямоугольник шириной 300 пикселей и высотой 200 пикселей.

Чтобы добавить контент в элемент <div>, поместите его между открывающим и закрывающим тегами <div>. Попробуйте добавить такой текст:

<div style="width:300px;height:300px; background-color:red;">
This is text inside a div.
</div>

Сохраните файл и перезагрузите его в браузере. Вы увидите:

Вы также можете вложить один контейнер <div> внутрь другого контейнера <div>. Попробуйте разместить желтый фрагмент внутри красного прямоугольника. Это делается следующим образом:

<div style="width:300px;height:300px; background-color:red;">
<div style="width:100px;height:100px; background-color:yellow;">
</div>
</div>

Сохраните файл и перезагрузите его в браузере. Вы увидите желтый квадрат в верхнем левом углу красного.

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

<div style="width:300px;height:300px;background-color:red;">
<div style="width:100px;height:100px; background-color:yellow;">
</div>
</div>
<div style="width:100px;height:100px; background-color:blue;">
</div>

Сохраните файл и перезагрузите его в браузере. Вы увидите синий квадрат под красным квадратом.

Теперь вы должны иметь общее представление о том, как работают элементы <div>. Мы еще вернемся к ним позже, когда начнем создавать наш веб-сайт.