Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.
В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!
Особенности блочных элементов
Блоки – это прямоугольные элементы, которые занимают всю доступную ширину страницы, всегда начинаются с новой строки и по умолчанию автоматически рассчитывают высоту в зависимости от содержимого.
Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.
Главным в блоке выступает контент.
Вокруг него расположены поля, которые называются padding. Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.
HTML & CSS Урок 7. Блоки (тег Div)- StudioProWeb
После идут сами границы, которые именуются английским словом border.
И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.
В качестве примера запрограммируем 2 html блока и заполним созданные элементы текстом.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
На данный момент в браузере этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства.
Внесем-ка ярких красок в обыденную жизнь html
Для того чтобы блочные объекты выглядели интересно и привлекательно, нам в обязательном порядке стоит подключить каскадную таблицу стилей.
Для этого в контейнере head после тега необходимо добавить строку:
Сам по себе элемент располагается только внутри тега и устанавливает связь с внешними файлами, отвечающими за стили.
Настало время задать цветное оформление и расположение блокам.
Первый блок я решил оформить в красных цветах с жирными границами и сделать его полупрозрачным.
Второй же блок – полностью видимый, желтого цвета с тонкими границами и с закругленными углами. Замечу, что блоки не являются фиксированными и текст в них выравнивается по ширине, а не располагается по центру. За все видоизменения отвечает ниже представленный css-код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
.element1 < opacity: 0.7; background: #edab92; float: left; width: 310px; border: 4px solid red; padding: 6px; padding-right: 15px; >.element2
Для того чтобы вы смогли лицезреть данный пример во всей красе во вкладке браузера, создайте простой текстовый файл и внесите в него выше написанный текст. После сохраните документ с названием «style.css», обязательно проверьте, совпадает ли название документа со значением атрибута тега href=»style.css».
Изучаем html блок div
Думаю, вы догадались, что в случае несовпадения, внешний документ с описанием стилей не будет найден, вследствие чего изменения не вступят в силу.
Теперь давайте разберем строки 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
Напоследок хотел бы добавить, что в современной платформе html 5 есть нововведенные блочные теги , , , и другие, которые заменяют привычный div. Их суть применения для человека не отличается ничем, однако они облегчают работу машин.
Надеюсь, что описанная информация была вам полезной. А если это так, то не забудьте оповестить об этом своих знакомых и вступить в ряды моих подписчиков! До связи. Пока-пока!
С уважением, Роман Чуешов
Источник: romanchueshov.ru
«Блочные» Сcылки в HTML5
Одной из новых и захватывающих вещей, которые можно реализовать в HTML5 является возможность оборачивания ссылками блочных элементов.
Представьте, что есть главная страница с множеством тизеров для новостной ленты, каждый из которых ведет на страницу с полным текстом статьи.
Очевидно, что каждая новость должна иметь заголовок, и наверняка появится желание также добавить иллюстрацию и сделать эти блоки кликабельными. Разметка, вероятно, будет выглядеть как-то так:
Bruce Lawson voted sexiest man on Earth
A congress representing all the planet’s women unanimously voted Bruce Lawson as sexiest man alive.
Read more
Обратите внимание, что есть три одинаковые ссылки (или две,как на сайте BBC News, если Вы решите, что ваши пользователи не нуждаются в ссылке «Читать далее»).
Код HTML5 будет таким:
Bruce Lawson voted sexiest man on Earth
A congress representing all the planet’s women unanimously voted Bruce Lawson as sexiest man alive.
Read more
Сейчас одна ссылка обрамляет весь тизер, убирая повторяющийся код, и создавая более широкую кликабельную область.
Отмечу также пару особенностей: во-первых, вам не нужно беспокоиться о том, что каждая ссылка “читать далее”ведет на другой ресурс (см. WCAG 2), потому что вся новость является ссылкой, поэтому весь текст ссылки уникальный. Во-вторых, обратите внимание, что я изменил альтернативный текст у изображения. В первом примере изображение является ссылкой, и я описал ее назначение, тогда как во втором примере текст содержит описание самого изображения — ”gorgeous lovebundle” — и тем самым дает больше информации пользователям.
Блестяще, но не ново.
Интересно, что на самом деле, эта техника не нова — вы можете использовать ее сейчас.
XHTML2 имел похожий механизм, который позволял использовать href с любым элементом, что Эрик Мэйер предложил использовать в HTML5, но, конечно, эта техника не является обратно совместимой . Одним из его альтернативных решений этой проблемы было изменение правил для тега а, и моя тестовая страница демонстрирует, что это работает на данный момент в любом браузере.
Еще одна интересная фишка в html5 — он документирует существующее поведение браузера. Так как браузеры уже поддерживают использование ссылок-контейнеров, и существуют очевидные варианты использования, нет смысла искуственно сохранять неверную структуру.
(Ирония: Эрик Мэйер использовал в качестве рабочего примера ссылку, включающую все яйчеки строки в таблице. Это не работает в HTML5; для этого понадобится скрипт.)
P.S. Это тоже может быть интересно:
- Версия для слабовидящих? А можно не надо? [расшифровка доклада]
- Псевдокласс :has() — не только «родительский селектор»
- CSS-выражения от контейнера для дизайнеров
Если вам понравилась статья, поделитесь ей!
Источник: css-live.ru
Урок 7. Блочная верстка web-сайта. Часть 1
Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.
1. Основные понятия
Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега . Страницы, сверстанные с помощью блочной верстки, значительно меньше весят по сравнению с табличной версткой.
Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы (рис. 1). Содержимым блока может быть что угодно – текст, картинки, списки, формы для заполнения, меню навигации и т.п.
Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).
Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.
Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.
В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.
Контейнер будет содержать в себе пять блоков:
TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;
LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:
CENTER – содержит основной текст страницы;
FOOTER – подвал сайта, содержащий копирайты и другие сведения о сайте, возможно, дублировать навигацию, что является признаком хорошего тона.
Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.
Описание web-страницы в основном делается в CSS документе.
2. «Фиксированный» дизайн методом блочной верстки
1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.
2. Создайте HTML-документ и сохраните его в той же папке.
Определяет тип нашего документа. Любая грамотно сверстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания DOCTYPE. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга , просто не будет прочитана, потому как стандарты становятся жестче.