Создание блоков в html

Создание блоков в html

В предыдущих уроках рассматривалась базовая работа с таблицами. Но помимо таблиц существуют блоки, на основе которых так же делается основа сайтов. Но серьёзная работа с блоками (блочная вёрстка) рассматривается в уроках CSS, а пока рассмотрим основные стилевые атрибуты для работы с блоками.

Блок обозначается тегами "

", ему можно задать цвет заднего фона, цвет и расположение текста, цвет рамок и даже задать с какой стороны рамки будут а с какой нет.

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

Мы против дискриминации буквы «Ё» .

Атрибут "margin: auto" ориентирует блок по центру поля.

Теперь создадим блок с рамкой, но как создать рамку вокруг всего блока вполне очевидно. Поэтому создадим блок, у которого будет только один – левый край рамки.

Теги " " заключаю текст в кавычки (цитата).

Вы можете продолжить самостоятельно экспериментировать над блоками и их рамками.

В HTML для позиционирования элементов на странице мы использовали таблицы. У таблиц есть как преимущества (легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).

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

Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:

шапка сайта
меню контент
низ сайта

Эту страницу мы с вами делали в серии уроков, посвященных HTML, а точнее в уроке 10 этой серии, где мы и верстали ее с помощью таблицы. Эта страница имела следующий код:

Читайте также:  Как разблокировать в фейсбук человека на телефоне

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

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

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

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

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

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

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

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

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

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

Ссылка на основную публикацию
Сколько человек сидит в одноклассниках
Mail.Ru Group исследовала и сравнила аудитории самых популярных в России социальных сетей — «Одноклассники», «Мой Мир», «ВКонтакте», Facebook и Twitter....
Сигнал flash в телефоне panasonic
● 19.12.08 13:08 - krepsky - 9 / 19.12.08 Два дня ломаю голову… Такая ситуация - купили партию телефонов Panasonic...
Сигналы материнской платы при загрузке
BIOS (Basic Input/Output System – базовая система ввода-вывода). Программа системного уровня, предназначенная для первоначального запуска компьютера, настройки оборудования и обеспечения...
Сколько четырехзначных чисел можно составить из нечетных
Условие Решение 1 Решение 2 Решение 3 Поиск в решебнике Популярные решебники Издатель: Н. Я. Виленкин, В. И. Жохов, А....
Adblock detector