Html блочная верстка: HTML5 | Блочная верстка

Блочная вёрстка | htmlbook.ru

Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем я буду активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <layer>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <layer> не был включён в спецификацию HTML и остался лишь расширением браузера Netscape.

Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)».

Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам различались, поэтому приходилось писать достаточно сложный код, который бы учитывал эти особенности.

В настоящее время разработчики популярных браузеров стали придерживаться спецификаций HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку это снизило время на отладку сайта в разных браузерах. Тем не менее, различия в подходах у браузеров существуют и при их возникновении разработчики придерживаются следующих форм работы.

• Если наблюдаются небольшие различия в отображении одного сайта в разных браузерах, то на эти отличия закрывают глаза. Попросту говоря, никак не исправляют. Посетители в любом случае не будут попиксельно сравнивать сайт в разных браузерах. Здесь следует сделать оговорку, что сайт в любом случае должен отображаться корректно и без ошибок.
• Если у сайта имеются существенные различия при его показе в одном и другом браузере, то для их устранения применяют хаки.

Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

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

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам <div>.

В HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление.

Таким образом, выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании тегов <div> и стилей. При этом придерживаются следующих принципов.

Разделение содержимого и оформления

Код HTML должен содержать только теги разметки и теги логического форматирования, а любое оформление выносится за пределы кода в стили. Такой подход позволяет независимо управлять видом элементов страницы и её содержимым. Благодаря этому над сайтом может работать несколько человек, при этом каждый выполняет свою функцию самостоятельно от других.

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

Активное применение тега <div>

При блочной вёрстке существенное значение уделяется универсальному тегу <div>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая её то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв тег <div> является кирпичиком вёрстки, её базовым фундаментом.

Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.

Таблицы применяются только для представления табличных данных

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

Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу <div>, с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу <div> для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег <div> или <div >.

В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру, <header> и <footer> используются для создания «шапки» и «подвала», <nav> для навигации, <aside> для боковой панели. Включение в спецификацию HTML подобных элементов призвано снизить доминирование тега <div> и придать больше смысла разметке.

Поэтому в вёрстке на HTML5 активно применяется термин «элемент», под которым подразумевается соответствующий тег и элемент который он создаёт.

Изложенные выше принципы блочной вёрстки при этом сохраняются за исключением того момента, что <div> в некоторых случаях заменяется более осмысленными тегами.

Блочные элементы | htmlbook.ru

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h2>,…,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in.

Для блочных элементов характерны следующие особенности.

• Блоки располагаются по вертикали друг под другом.
• На прилегающих сторонах элементов действует эффект схлопывания отступов.
• Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h2>Заголовок</h2></a> не пройдёт валидацию, правильно вложить теги наоборот — <h2><a>Заголовок</a></h2>.
• По ширине блочные элементы занимают всё допустимое пространство.
• Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
• Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
• Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
• На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
• Текст по умолчанию выравнивается по левому краю.

Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет <div> как универсальный кирпичик вёрстки. Тег <div> допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь <div>. В примере 3.13 показан фрагмент кода сайта CSS Zen Garden, где активно применяются эти теги для формирования требуемой конструкции.

Пример 3.13. Использование тега <div>

<div>
  <div>
    <div>
      <h2><span>css Zen Garden</span></h2>
      <h3><span>The Beauty of <acronym 
         title="Cascading Style  Sheets">CSS</acronym> Design</span></h3>
    </div>
    <div>
      <p><span>A demonstration of what can be accomplished 
      visually through <acronym title="Cascading Style Sheets">CSS</acronym>
      - based design.  Select any style sheet from the list to load it into 
      this page.</span></p>
    </div>
  </div>
</div>

Если в одном блочном элементе содержатся строчные элементы наряду с блочными, то вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя. В примере 3.14 внутри <div> располагается два тега <p> и рядовой текст. Поскольку этот элемент анонимный, напрямую только к нему одному нельзя применить стили.

Пример 3.14. Анонимный блок

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Анонимный блок</title>
 </head>
 <body>
  <div>
   <p>Первый абзац</p>
   Анонимный блок
   <p>Второй абзац</p>
  </div>
 </body>
</html>

Схематично блоки в данном примере показаны на рис.  3.23. Серым цветом выделены блочные теги <p>, а пунктиром — анонимный блок.

Рис. 3.23. Блоки в документе

Преобразование в блочный элемент

В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height. В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.

Пример 3.15. Меню

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Меню</title>
  <style type="text/css">
   .menu {
    width: 220px; /* Ширина меню */
    padding: 5px; /* Отступы от рамки до пунктов меню */
    border: 1px solid #000; /* Рамка вокруг меню */
   } 
   . menu P { margin: 0 0 2px; }
   .menu A {
    padding: 2px; /* Отступ от рамки вокруг ссылки до текста */
    display: block; /* Ссылка как блочный элемент */
    border: 1px solid #fff; /* Маскируем рамку вокруг ссылки */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   .menu A:hover {
    background: #faf3d2; /* Цвет фона под ссылкой */
    color: #800000; /* Новый цвет ссылки */
    border: 1px dashed #634f36 /* Рамка вокруг ссылки */
   }
  </style>
 </head>
 <body>
  <div>
   <p><a href="l.html">Метод простых итераций</a></p>
   <p><a href="2.html">Метод случайных чисел</a></p>
   <p><a href="3.html">Метод дихотомии</a></p>
   <p><a href="4.html">Метод золотого сечения</a></p>
  </div> 
 </body>
</html>

Вся строка выступает ссылкой, поэтому при наведении на неё курсора происходит изменение стиля (рис. 3.24).

Рис. 3.24. Ссылка как блочный элемент

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

CSS по теме

• display
• height
• margin-bottom
• padding
• width

Статьи по теме

• Блочные элементы
• Блочные элементы

Блок отображения HTML | Как блокировать отображение в HTML с примерами?

Блок отображения HTML — одно из наиболее важных свойств положения в HTML, которое отвечает за размещение элементов уровня блока в блоке отображения. При разработке веб-страницы всегда важно правильно расположить элементы в определенном месте. Установка правильного положения макета является одной из самых важных задач. По умолчанию свойство display используется как встроенное. Это всегда будет начинаться с новой строки и растягивать элементы слева направо, чтобы занимать место на всю ширину. Можно установить свойства высоты и ширины для элементов уровня блока, а также включить в него другие встроенные или блочные элементы.

Синтаксис:

• Каждый элемент размещается на веб-странице в определенном месте. Значение свойства помогает нам определить, как оно должно отображаться на веб-странице; будет следующим:

 дисплей :блок; 

• Синтаксис для отображения со значением позиции следующий:

 позиция :значение; 

• В приведенном выше синтаксисе позиция — это область размещения, где фактически будут размещаться элементы. В значение мы можем использовать Block для отображения элементов блочного уровня. Таким образом, он будет использоваться как:

 позиция :блок; 

• Этот блок HTML содержит такие элементы, как
  ,

  ,

  , а также можно использовать встроенные элементы внутри блока отображения.
• С помощью CSS можно определить свойство отображения с некоторыми указанными значениями, например:

 display: [ , ] [, , ] 

Существуют следующие значения display для HTML:

1. нет значения

 {
дисплей:нет;
} 

2. встроенное значение

 {
дисплей: встроенный;
} 

3. значение блока

 {
дисплей:блок;
} 

4. встроенное значение блока

 {
отображение: встроенный блок;
} 

Все вышеперечисленные значения помогают нам устанавливать и контролировать макет; в большинстве случаев значения макета являются либо встроенными, либо блочными. Блок отображения начинается с новой строки, покрывающей всю ширину контейнера, чтобы поместить элементы веб-страницы в блок отображения HTML. Элементы блочного уровня не позволяют использовать внутри себя другие блочные элементы.

Как отображается блок в HTML?

• В этом формате используются поля, расположенные друг за другом в вертикальном направлении. Он начнется с вершины содержащего блока.
• Эти блоки управляются вертикальным расстоянием между ними с использованием эквивалентного пространства, которое в CSS называется свойством поля.
• В этом процессе форматирования отображаемого блока левая внешняя сторона каждого блока присоединяется к левой стороне содержащего его блока. То же самое произойдет с правыми краями содержащих блоков.
• Другой способ определить блок отображения в HTML — расположить элементы блока в горизонтальном направлении, как в английском языке. Он расположит макет по вертикали ниже один за другим.
• Поскольку мы используем поля, это помогает создать пространство между двумя блоками или элементами, которое будет отделять элементы друг от друга.
• Элементы уровня блока будут занимать все пространство в линейном направлении, поэтому наши элементы будут разделены на содержащий их блок.
• Как мы знаем, мы можем задавать свойства высоты и ширины для макета в нем, поэтому это помогает размещать блоки друг под другом один за другим.

Примеры блока отображения HTML

Ниже приведены различные примеры.

Пример #1

Это обычный пример, показывающий, как свойство блока отображения HTML будет использоваться в коде HTML следующим образом:

Код:

 

<стиль>
. block_demo{
граница: 2 пикселя сплошного красного цвета;
ширина: 50%;
дисплей:блок;
}

<тело>
 
Список названий цветов:
 
<дел>
<ул>
Красный
Зеленый
Синий
Оранжевый
Фиолетовый
Розовый