Как сделать блок в html и умело научиться размещать его на своей web-странице

Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.

В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!

Особенности блочных элементов

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

Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.

Главным в блоке выступает контент.

Вокруг него расположены поля, которые называются padding. Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.

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

И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.

В качестве примера запрограммируем 2 html блока и заполним созданные элементы текстом.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Заголовок</title>
</head>
<body>
    <div class="element1">
        В этом блочном элементе разместим текст первого объекта.
    </div>
    <div class="element2">
        А вот в этом блочном элементе разместим текст второго объекта.
    </div> 
</body>
</html>

На данный момент в браузере этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства.

Внесем-ка ярких красок в обыденную жизнь html

css стили

Для того чтобы блочные объекты выглядели интересно и привлекательно, нам в обязательном порядке стоит подключить каскадную таблицу стилей.

Для этого в контейнере head после тега <title> необходимо добавить строку:

<link rel="stylesheet" href="style.css">

Сам по себе элемент <link> располагается только внутри тега <head> и устанавливает связь с внешними файлами, отвечающими за стили.

Настало время задать цветное оформление и расположение блокам.

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

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

.element1 {
opacity: 0.7;
background: #edab92;
float: left;
width: 310px;
border: 4px solid red;
padding: 6px;
padding-right: 15px;
}
 
.element2 {
width: 310px;
float: left;
background: #fc0;
border: solid 1px grey;
position: relative;
padding: 6px;
left: -65px;
top: 55px;
border-radius: 10px;
}

Для того чтобы вы смогли лицезреть данный пример во всей красе во вкладке браузера, создайте простой текстовый файл и внесите в него выше написанный текст. После сохраните документ с названием «style.css», обязательно проверьте, совпадает ли название документа со значением атрибута тега <link> href="style.css".

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

Теперь давайте разберем строки css-кода. Для наглядности я структурировал все в таблицу с двумя колонками.

Свойство	Значение
opacity	Отвечает за прозрачность объекта. При opacity равному 0 элементы становятся полностью прозрачными, при 1 – полностью видимыми.
width	Отвечает за ширину блочных элементов.
background	Задает характеристические параметры фона, который в свою очередь может задаваться как цветом, так и картинкой.
border	Позволяет установить толщину, цвет и стиль границ вокруг объекта.
float	Задает выравнивание элемента. Остальные объекты по умолчанию обтекают данный. Можно задать значения: left, right, none (не задает обтекание элементов) или inherit (повторяет значение родительского объекта).
border-radius	Способствует округлению углов блока. Можно указывать как одинаковый радиус для всех углов, так и уникальный для каждого.
top	Определяет расстояния между верхними границами родительского элемента и дочернего.
left	Определяет расстояния между левыми границами родительского и дочернего элементов.

Обратите внимание на строку в коде примера position: relative в element2. Так как этому атрибуту, определяющему позиционирование объекта, задано значение relative, то расположение самого объекта будет меняться не от координат верхнего края браузера, а от координат верхней границы первого блока element1.

Вот почему при задании top = 55px и left = -65px второй блочный элемент сдвинулся вниз на 55 пикселей и вправо на 65 пикселей от границ первого блока.

Кстати, особо внимательные могли заметить, что left = -65px и right = 65px – это одно и то же.

А что же HTML 5

HTML5

Напоследок хотел бы добавить, что в современной платформе html 5 есть нововведенные блочные теги <nav>, <article>, <footer>, <header> и другие, которые заменяют привычный div. Их суть применения для человека не отличается ничем, однако они облегчают работу машин.

Надеюсь, что описанная информация была вам полезной. А если это так, то не забудьте оповестить об этом своих знакомых и вступить в ряды моих подписчиков! До связи. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 11006 раз