Теги HTML-контейнера - правильное использование? Встроенные контейнеры Создание списков в HTML
В этой статье познакомимся с основными элементами сетки Bootstrap, а также разберём несколько примеров, в которых рассмотрим, как применять эти элементы сетки для разработки макета сайта.
Элементы сетки фреймворков Bootstrap 3 и 4
Основными элементами сетки Bootstrap 3 и 4 являются:
- обёрточные контейнеры - элементы с классом container или.container-fluid ;
- ряды - элемент с классом row ;
- адаптивные блоки - элементы, с одним или несколькими классами col .
Обёрточный контейнер - это первый элемент, с которого начинается создание макета страницы или некоторой его самостоятельной части. Его основное назначение - это установить ширину разрабатываемого макета . В Bootstrap 3 и 4 обёрточные контейнеры бывают 2 типов . Первый (container) предназначен для создания адаптивно-фиксированного макета, а второй (container-fluid) - для адаптивно-резинового (адаптивно-гибкого) макета.
Адаптивно-фиксированный макет характеризуется тем, что он имеет условно постоянную ширину, которая на одних диазонах viewport браузера имеет одно значение, а на дугих - другое.
Например , в Bootstrap 3 определено 4 диапазона (контрольные точки): xs (по умолчанию), sm (ширина viewport больше 768px), md (ширина viewport больше 992px), lg (ширина viewport больше 1200px).
Обёрточный контейнер (container) устанавливает макету:
- на дипазоне xs ширину, равную ширине viewport браузера;
- на дипазоне sm , ширину равную 750px;
- на дипазоне md , ширину равную 970px;
- на дипазоне lg , ширину равную 1170px.
Ширина же адаптивно-резинового макета не имеет фиксированного значения, она всегда равна ширине vieport браузера.
Обёрточный контейнер кроме установления ширины макету ещё выравнивает его по центру страницы и задаёт внутренние поля (padding) слева и справа по 15px.
Ряд - это тоже контейнер, но для адаптивных блоков сетки Bootstrap.
В Bootstrap 3 его основная роль - это создать отрицательные отступы (margin) слева и справа по 15px.
В Boostrap 4 он не только задаёт отрицательные отступы, но и выполняет ещё функцию flex-контейнера . Т.е. если данный элемент не установить, то адаптивные блоки вообще не будут иметь свойственного им поведения.
Принцип использования элемента "ряд" очень прост, он всегда должен выступать родителем для адаптивных блоков . Т.е. если какой-то элемент (обёрточный контейнер или адаптивный блок) необходимо разметить с помощью адаптивных блоков , то перед тем как их создать сначала установите ряд , а уже в нём эти блоки.
Адаптивный блок - это элемент, который имеют адаптивную ширину. Т.е. его ширина на одном диапазоне viewport может иметь одно значение, а на другом - другое.
Установка поведения адаптивного блока осуществляется с помощью одного или нескольких классов col .
Синтаксис класса col:
Col-{breakpoint}-{number_columns}
{breakpoint} - это контрольная точка , которая определяет минимальную ширину viewport, начиная с которой этот класс будет действовать.
В Bootstrap 3 для использования доступно по умолчанию четыре контрольные точки (xs , sm , md и lg), а в Bootstrap 4 - пять контрольных точек (без обозначения, sm , md , lg и xl). Контрольные точки приведены в порядке возрастания ширины viewport, начиная с которой они начинают действовать.
{number_columns} - это ширина адаптивного блока , которую он будет иметь, начиная с этой контрольной точки . Указывается ширина адаптивного блока с помощью колонок Bootstrap (целого числа) по умолчанию от 1 до 12. Данное число определяет, какую часть ширины он будет иметь относительно содержащего его блока (элемента «ряд»). Минимальная ширина адаптивного блока - это 1/12 (8.3%), а максимальная - 12/12 (100%).
Например , адаптивный блок с классом col-xs-6 col-sm-4 col-md-3 col-lg-2 будет (Bootstrap 3):
- на устройстве xs иметь ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд»;
- на устройстве sm иметь ширину, равную 4 колонкам Bootstrap, т.е. 33.33% (4/12*100%) относительно ширины элемента «ряд»;
- на устройстве md иметь ширину, равную 3 колонкам Bootstrap, т.е. 25% (3/12*100%) относительно ширины элемента «ряд»;
- на устройстве lg иметь ширину, равную 2 колонкам Bootstrap, т.е. 16.67% (2/12*100%) относительно ширины элемента «ряд».
Если же какую-то контрольную точку не указать , то действие этого класса распространится и на следующие контрольные точки . Это связано с тем, что в CSS Bootstrap медиа запросы построены с использованием минимальной ширины.
Например , адаптивный блок с классом col-xs-8 col-md-6 будет (Bootstrap 3):
- на контрольной точке xs и sm иметь ширину, равную 8 колонкам Bootstrap, т.е. 66.7% (8/12*100%) относительно ширины элемента «ряд»;
- на устройстве md и lg ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд».
По умолчанию адаптивные блоки имеют ширину, равную 12 колонок Bootstrap, т.е. 100%. Если у вас какой-то блок, начиная с xs должен иметь это значение, то его можно не указывать.
Например , адаптивный блок с классом col-md-6 col-lg-9 будет (Bootstrap 3):
- на контрольной точке xs и sm иметь ширину, равную 12 колонок Bootstrap, т.е. 100% (12/12*100%) относительно ширины элемента «ряд»;
- на устройстве md иметь ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд»;
- на устройстве lg иметь ширину, равную 9 колонкам Bootstrap, т.е. 75% (9/12*100%) относительно ширины элемента «ряд».
Адаптивные блоки в Bootstrap располагаются линиями. В одну линию может поместиться адаптивные блоки с суммарным количеством колонок Bootstrap по умолчанию не больше 12 . Блоки, которые не помещаются в первую линию, переносятся на следующую линию и т.д.
В Bootstrap 3 при создании макета имеется один очень важный момент, который связан с тем, что адаптивные блоки не всегда переносятся на следующую линию . Это поведение адаптивных блоков объясняется тем, что они в этой версии фреймворка являются плавающими (float:left).
Например , в этой разметке третий адаптивный блок располагается не на второй линии, а прилипает к первому адаптивному блоку:
Чтобы это исправить необходимо перед адаптивным блоком, который должен начинаться с новой линии добавить пустой элемент div с классом clearfix .
Основные правила создания макета с помощью элементов сетки Bootstrap
Основные этапы создания макета веб-страницы:
- создать основные секции (например: header , main , footer);
- создать внутри каждой секции обёрточный контейнер;
- поместить внутрь каждого обёрточного контейнера, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
- создать внутри каждого ряда необходимую структуру с помощью адаптивных блоков;
- поместить внутрь необходимых адаптивных блоков, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
- выполнить пункт 5;
- выполнять пункты 6 и 7 до тех пор, пока не будет достигнута необходимая структура создаваемого макета.
В качестве примера создадим нижеприведённый макет на Bootstrap 3 и 4.
Верстка вышеприведённого макета на Bootstrap 3:
Верстка вышепредставленного макета на Bootstrap 4:
В этой лекции рассказывается об элементах разметки тела HTML-документа, подробно разбирается их типизация, назначение и применение.
Теги тела документа
Теги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:
- иерархических контейнеров и заставок;
- заголовков (от Н1 до Н6);
- блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
- горизонтальных отчеркиваний и адресов;
- текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
- математических описаний, графики и гипертекстовых ссылок.
Тело документа – контейнер ВОDY
Описание тегов тела документа следует начать с тега ВОDY. В отличие от тега НEАD, тег ВОDY имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:
<ВОDY ВАСКGROUND="image.gif">
Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес локального файла. Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.
В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. Далее в таблице приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.
Название | Код | Название | Код |
aqua | #00FFFF | navy | #000080 |
black | #000000 | olive | #808000 |
blue | #0000FF | purple | #800080 |
fuchsia | #FF00FF | red | #FF0000 |
gray | #808080 | silver | #C0C0C0 |
green | #008000 | teal | #008080 |
lime | #00FF00 | white | #FFFFFF |
maroon | #800000 | yellow | #FFFF00 |
Так, значения атрибутов в таблице 3.1 определяют цвет текста как синий, фона - белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тега ВОDY указать
<ВОDY ВGCOLOR=#FFFFFF ТЕХТ=#0000FF VLINK=#FF0000 LINK=#00FF00>,
то цвет фона будет белым, текст будет синим, ссылки - зелеными, а пройденные ссылки станут красными. Однако пользоваться этими атрибутами следует крайне осторожно, так как у пользователя может оказаться другой интерфейс, который эти параметры не интерпретирует.
Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег <ВОDY LEFTMARGIN =»40″> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.
Теги управления разметкой
Заголовки
Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1>Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2>Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ>НЗ> еще меньше и так далее до <Н6>Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 - крайне редко.
Ниже на рисунке показан результат использования следующих заголовков:
Заголовок 1
Заголовок 2
Тег
Тег
Применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.
Атрибут АLIGN
Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.
АLIGN=justify выравнивание по левому и правому краям. Реализовано не во всех программах интерпретации.
АLIGN=left выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы - на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить.
АLIGN=right выравнивание по правому краю. Текст, выравненный по правому краю и не выравненный по левому - концы строк находятся на одном уровне, а начало на разных, - часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге <Р>.
АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тегом <АLIGN=сеntеr>. Однако этот тег применим не ко всем объектам HTML-страницы, поэтому разработчики Netscape добавили тег <СЕNТЕR>, который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Explorer 3.0 и другими. К тегу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выравненный по левому краю.
Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст «обтекать» графический объект. Для этого следует поместить тег туда, где должен быть графический объект, и добавить атрибут ALIGN=left, ALIGN=right или АLIGN=center. Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не «обтекал» графику, а прерывался, необходимо применить тег
c атрибутом СLEAR.
Использование тега <ВR>
Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этого и нужен тег ВR. Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:
Текст будет продолжен, начиная
с ближайшего пустого левого поля.
Текст будет продолжен, начиная
с ближайшего пустого правого поля.
Текст будет продолжен, как
только и левое, и правое поля окажутся пустыми.
Элемент разметки
Тег
Теги управления отображением символов
Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.
Теги, управляющие формой отображения
Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации - все это делает страницы более интересными. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью тега FONT. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.
Теги <ВIG> и - изменение размеров шрифта
Текст, расположенный между тегами <ВIG>ВIG> или , будет, соответственно, больше или меньше стандартного.
Верхние и нижние индексы
С помощью тегов
Атрибут SIZЕ
Атрибут SIZЕ тега
Атрибут СОLОR
Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.
Теги, управляющие формой отображения, приведены в таблице.
Тег | Значение |
… | Курсив (Italic) |
… | Усиление (Вold) |
… | Телетайп |
… | Подчеркивание |
Перечеркнутый текст | |
… | Увеличенный размер шрифта |
… | Уменьшенный размер шрифта |
… | Подстрочные символы |
… | Надстрочные символы |
<ЕМ>…ЕМ> | Типографское усиление |
<СIТЕ>…СIТЕ> | Цитирование |
… | Усиление |
<СODE>…СODE> | Отображает примеры кода (например, "коды программ") |
Последовательность литералов | |
<КВD>…КВD> | Пример ввода символов с клавиатуры |
… | Переменная |
… | Определение |
… |
Текст, заключенный в двойные кавычки |
Эти теги допускают вложенность, поэтому все они имеют тег начала и конца. При использовании таких тегов следует помнить, что их отображение зависит от настроек программы-интерфейса пользователя, которые могут и не совпадать с настройками программы-разработчика гипертекста.
Создание списков в HTML
Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists
- ), нумерованный список (упорядоченный) (Ordered Lists
- ), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.
Неупорядоченные списки - тег
Ненумерованный список. Ненумерованный список предназначен для создания текста типа:
- первый элемент списка;
- второй элемент списка;
- третий элемент списка.
Записывается данный список в виде последовательности:
- первый элемент списка
- второй элемент списка
- третий элемент списка
Теги - это теги начала и конца ненумерованного списка, тег
- (List Item) задает тег элемента списка. Помимо этих тегов, существует тег, позволяющий именовать списки -
(List Header). Атрибуты маркеров в ненумерованном списке
Чтобы не применять одни и те же маркеры на разных уровнях вложенности, можно использовать атрибут ТYРЕ. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены теги с атрибутами стандартных маркеров:
- Тег создает сплошные маркеры
такого типа, как в списках первого уровня по
умолчанию.
- ,
- ) используют для создания списка терминов и их определений. Схема использования тега следующая.
- Термин
- Определение
Определяемый термин записывается на одной строке, а его определение - на следующей, с небольшим отступом вправо. Тег
- позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов
- Ширина такого элемента будет равна ширине родителя. То есть, например, ширина текста поста будет равна всей ширине колонки;
- Высота определяется количеством контента. То есть, абзац будет выше, если в нем больше текста;
- Новый блок начинается с новой строки .
- text-align: left; — выравнивание по левому краю;
- text-align: right; — выравнивание по правому краю;
- text-align: justify; — выравнивание по ширине;
- , то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег
Горизонтальные линейки - тег <НR>
Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид. Попробуйте поэкспериментировать с тегом <НR>, и вы получите линии, совсем не похожие на те, которыми обычно пользуетесь.
Преформатированный вывод - тег <РRЕ>
Применение этого тега позволяет отобразить текст «как есть» (без форматирования), теми же символами и с тем же разбиением на строки.
Применение тега
Текст, помещенный между тегами , мерцает. Данный тег поддерживается только браузером Netscape Navigator. Пользоваться им следует с большой осторожностью.
Влад Мержевич
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры
,,
И др.
Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (, например). Запрещено добавлять внутрь встроенных элементов блочные (пример 1).
Пример 1. Использование блочных элементов
Блочные элементы Lorem ipsum dolor sit amet...
Ut wisi enim ad minim veniam
В данном примере абзац (тег
) вставляется внутрь контейнера
, а ссылка (тег ) — в заголовок. Кстати, ошибкой будет поступить наоборот — добавить
в контейнер (
Ut wisi
), поскольку тег не относится к блочным элементам.Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними. К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.
Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег
в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тегвнутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width ), отступов (margin ), полей (padding ) и границ (border ). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
Ширина Lorem ipsum dolor sit amet...В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width .
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto , это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Ширина Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1 ) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2 ) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег
). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3 ) вообще не применяется свойство width , поэтому оно определяется по умолчанию — auto . В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin , padding и border . Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Высота Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.Результат данного примера продемонстрирован на рис. 3.
Рис. 3. Высота блока в разных браузерах
Видно, что браузер оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.
Цвет фона
Цвет фона элемента проще всего устанавливать через универсальное свойство background . Фоном при этом заливается область, которая определяется значениями width , height и padding (рис. 4).
Рис. 4. Область слоя, которая заполняется фоновым цветом
Таким образом, margin не принимает участия в формировании цветной области.
Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.
а. Internet Explorer 7
б. Firefox, Internet Explorer 8+
Рис. 5. Отображение рамки в браузерах
В примере 5 показано, как создать код для получения подобной границы.
Пример 5. Пунктирная рамка
Рамка Lorem ipsum dolor sit amet...Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.
Резюме
Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width , но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height , поскольку по умолчанию браузер применяет аргумент auto , который заставляет настраивать размеры элемента автоматически.
Поскольку уж мы начали разбираться в коде своих блогов на Вордпресс — нам не обойти вопрос html форматирования. Конечно, это целая наука. Но мы постараемся разобраться с основами: понять, какие теги используются для форматирования текста — отдельных постов, страниц. Тогда нам удастся вносить в эту структуру осмысленные изменения.
Блочная верстка Вордпресс
Для начала обсудим общий принцип формирования html-кода для Вордпресс. Он носит название «блочная верстка». И, как нетрудно догадаться, это значит, что шаблон состоит из неких блоков. Мы уже видели это на примере шаблона страницы или одной записи ().
Но и если вы откроете код любой статьи блога (например, в режиме html-редактора) — то увидите те же блоки, расположенные один над другим. Вообще, такая верстка является настолько естественной, что многие авторы даже не задумываются, что это именно определенный принцип, а не сложившееся само собой положение вещей.
На самом деле, далеко не все так очевидно. Вот, например, верстка таблицы (можете подробно прочитать о таблицах в отдельной статье):
Левая ячейка Правая ячейка Мы видим, что отдельные элементы (ячейки) прописаны одна над другой. А располагаться они будут на одной линии. Вот результат такой простой записи:
Левая ячейка Правая ячейка Обратите внимание, что, если в таблице нет никаких границ — то содержимое ее ячеек выглядит, как обычная запись. Представьте, что мы можем (а мы можем!) задать любую конфигурацию для ячеек, добавить туда не только текст, но и картинки… А теперь попытайтесь представить, каким навороченным будет код такой страницы!
Именно такой принцип верстки применяли раньше (например, для сайтов narod) и иногда применяют до сих пор! Он называется «табличная верстка». Так что, естественность блочной верстки — это удачная находка разработчиков, а не случайность.
Элементы блочной верстки
Но как формируются блоки в блочной верстке? Как браузер отличает, что один элемент закончился и начался следующий? Как он определяет, что у этого элемента такие свойства и стили, а у другого — другие? — Это главные вопросы, которые приводят нас от теории к практике.
Итак, блоки — это фрагменты контента, которые заключены в блочные теги или блочные элементы (контейнеры). Вообще-то, их немало, но мы сегодня познакомимся с самыми важными и часто встречающимися — тегами div, p, h.
У всех блочных элементов есть общие правила форматирования:
Контейнер div
Это базовый тег для любого шаблона Вордпресс. Посмотрите коды своей темы — там будут вызовы функций php:
php ...; ?>
И некие фрагменты, заключенные в теги — собственно, контейнер:
...Причем в такой контейнер могут заключаться и php-функции, и другие теги (например, активные ссылки, ограниченные тегами а, заголовки h и т.д.)
Зачем же вообще нужен такой контейнер? — Чтобы присвоить ему отдельный стиль, который будет прописан отдельно (в таблице стилей). Так можно написать довольно лаконичный код, состоящий из отдельных блоков для которых будет назначено название или id стиля. Но сам CSS-код оформления будет подгружаться из другого файла. Свойства стиля дописываются так:
...или так...Посмотрите на код любого из разделов шаблона вашего блога и сразу увидите, о чем я говорю. Для тренировки, попробуйте вычленить отдельные блоки и понять, за отображение каких элементов страницы они отвечают. А потом найдите в таблице стилей название или id стилей, которые относятся к разным блокам.
Контейнер p
Эти теги мы преимущественно встретим в форматировании отдельной записи — стоит только открыть html редактор статьи. Потому, что этот тег содержит в себе контент одного абзаца текста. Как правило, к нему применяют стилевое свойство text-align, которое устанавливает выравшивание:
Полная запись выглядит, например, так:
Все другие стилевые свойства для этого тега заданы в таблице стилей. Там прописаны и шрифты, и их размеры, и цвет текста (ведь он может быть не только черным!)
Контейнер h
Это известный тег, в который заключаются заголовки — h1, h2, h3 и так далее. Стили для каждого типа заголовков уже прописаны в теме блога. Они участвуют и в верстке страниц шаблона, и в форматировании отдельных постов.
Об использовании заголовков разного уровня в тексте уже говорено-переговорено сеошниками всех мастей. Но мы можем применить этот тег и в шаблоне Вордпресс. Например, добавить девиз своего блога на главную страницу — под шапкой, над перечнем постов. Например, так:
Мой блог - самый лучший!
А в следующий раз мы рассмотрим строчные элементы, без которых верстка и форматирование блога, также, невозможны.
Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Онлайн учебники на сайт
Учебник по HTML 4
Тег-контейнер
Тег-контейнер
является элементом уровня блока, служащим для выделения фрагмента документа. Целью этого выделения является управление параметрами данного фрагмента, которое обычно выполняется с помощью назначения стилей. Приведем пример:(Фрагмент документа)
В этом примере фрагмент HTML-документа обрамляется тегами
идля задания некоторых его свойств. В данном случае все текстовые элементы выделенного фрагмента будут отображаться зеленым (green) цветом. Аналогом тегауровня текста является элемент .Заметим, что непосредственное назначение стилевых свойств отдельного фрагмента так, как это сделано в примере, использовать не желательно в соответствии с концепцией разделения структуры документа и его представления. Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.
Тег
Тег-контейнер
предназначен для горизонтального выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень блока и его полезно использовать для центрирования таких элементов, как, например, таблиц, так как они не могут быть центрированы назначением ALIGN=CENTER тега
.
По существу тег
является краткой формой следующей записи: . Дальнейшее использование тегапо причинам, отмеченным в предыдущем разделе, также нежелательно.
- Тег создает маркеры в виде
окружностей.
- Тег создает сплошные квадратные
маркеры.
Упорядоченные списки - тег
Нумерованные списки. Тег
- вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:
<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3., 4. и т.д. <ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С., D. и т.д.
- Тег создает список с нумерацией
в формате а., b., с., d. и т.д.
<ОL ТYРЕ=I> Тег создает список с нумерацией
в формате I., II., III., IV. и т.д.
Список определений - тег
Теги списка (Definition List:
- ,
- ) и список определений. Теги для ненумерованных и нумерованных списков - это основа HTML. HTML 3.2 добавляет несколько атрибутов к тегам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты и в сами теги элементов списка (List Item