В предыдущих уроках рассматривалась базовая работа с таблицами. Но помимо таблиц существуют блоки, на основе которых так же делается основа сайтов. Но серьёзная работа с блоками (блочная вёрстка) рассматривается в уроках CSS, а пока рассмотрим основные стилевые атрибуты для работы с блоками.
Блок обозначается тегами "
", ему можно задать цвет заднего фона, цвет и расположение текста, цвет рамок и даже задать с какой стороны рамки будут а с какой нет.
Создадим, для начала, простой блок и зададим ему цвет и некоторые параметры для текста внутри него.
Мы против дискриминации буквы «Ё» .
Атрибут "margin: auto" ориентирует блок по центру поля.
Теперь создадим блок с рамкой, но как создать рамку вокруг всего блока вполне очевидно. Поэтому создадим блок, у которого будет только один – левый край рамки.
Теги " " заключаю текст в кавычки (цитата).
Вы можете продолжить самостоятельно экспериментировать над блоками и их рамками.
В HTML для позиционирования элементов на странице мы использовали таблицы. У таблиц есть как преимущества (легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).
В CSS для позиционирования элементов используются блоки (div-ы). Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку браузерами, поэтому приходится писать кроссбраузерный код (т.е. код, который отображается разными браузерами почти одинаково).
Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:
| шапка сайта | |
| меню | контент |
| низ сайта | |
Эту страницу мы с вами делали в серии уроков, посвященных HTML, а точнее в уроке 10 этой серии, где мы и верстали ее с помощью таблицы. Эта страница имела следующий код:
Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.
В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!
Особенности блочных элементов
Блоки – это прямоугольные элементы, которые занимают всю доступную ширину страницы, всегда начинаются с новой строки и по умолчанию автоматически рассчитывают высоту в зависимости от содержимого.
Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.
Главным в блоке выступает контент.
Вокруг него расположены поля, которые называются padding. Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.
После идут сами границы, которые именуются английским словом border.
И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.
В качестве примера запрограммируем 2 html блока и заполним созданные элементы текстом.
