Метаданные в html

Понять, нравится ли вам писать классы в разметке

Когда речь заходит о сетках, мир фронтенда делится на два лагеря. Один пишет сеточные классы в разметке (например, такой подход используют Bootstrap и Foundation). Я называю это HTML-сетками. Разметка выглядит так:


<div class="container">  <div class="row">    <div class="col-md-9">Content</div>    <div class="col-md-3">Sidebar</div>  </div></div>

Другие создают сетки на CSS. Я называю это CSS-сетками.

С CSS-сетками разметка получается проще, чем с HTML-сетками. Вам не приходится повторять одни и те же классы, размечая визуально похожие части документа. Также вам не нужно помнить, как называются классы сетки:

<div class="content-sidebar">  <div class="content"></div>  <div class="sidebar"></div></div>

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

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border

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

table, th, td { border: 1px solid black; }

Попробовать »

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

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

  • separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
  • collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table class="first">
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Изменение порядка колонок

Свойство float позволяет не только менять визуальный порядок следования колонок, но и перемещать любые из них выборочно. Можно перенести три столбца вправо, а один — влево и т. д. Главное, чтобы всем столбцам хватило места в одном ряду.

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

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

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

Еще одна причина — поисковые системы. Нередко роботы читают лишь небольшой отрывок кода HTML, и, если ваша веб-страница весьма длинная, а важная для поисковых систем информация находится где-то в ее конце, робот может до нее не дойти.

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

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

Блочная верстка сайта

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

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.Отличия:

  1. Высота слоев ограничена высотой контента:
Табличная верстка Блочная верстка

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

Вертикальная линия HTML с помощью псевдоэлемента

Если вам удобнее работать с CSS -стилями, то вы можете воспользоваться еще одним способом добавления вертикальных линий. Данный вариант немного сложнее и заключается в использовании псевдоэлементов :before и :after. Но у псевдоэлементов есть один очень ощутимый плюс, они позволяют без добавления HTML-кода, разместить на станице, соответственно, перед блоком или после него дополнительный элемент.

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

Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или слевой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

Вот как это будет выглядеть:

PHP

.vert-line:before{ content: » «; background: #33CCFF; width: 2px; height: 25px; float: left; margin-right: 10px; }

1 2 3 4 5 6 7 8

.vert-linebefore{

content» «;

background#33CCFF;

width2px;

height25px;

floatleft;

margin-right10px;

}

Результат:

Вертикальная линия без HTML

Для блока с классом vert-line мы присваиваем псевдоэлемент :before и задаем свойствами параметры элемента, который будет сгенерирован при формировании страницы. В нашем случае мы делаем вертикальную линию с шириной 2 пикселя и высотой 25 пикселей.

Так же мы задаем цвет фона (background: #33CCFF;), обтекание с левой стороны (float: left;), и отступ с правой стороны (margin-right: 10px;), чтобы отделить текст блока от линии.

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

Минусом использования псевдоэлемент является то, что они могут не поддерживаться старыми версиями браузеров.

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


До встречи в следующих статьях!

С уважением Юлия Гусарь

Размер таблицы

После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding:

th, td { padding: 7px; }

Попробовать »

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

table { width: 70%; }
th { height: 50px; }

Попробовать »

Чередование фонового цвета строк таблицы

При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr class="alt"><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr class="alt"><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

Попробовать »

Добавлять атрибут к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: (четные) или (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

Попробовать »

А что выбрал бы я?

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

Так много статей читать…

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

  1. Дизайн сетки;
  2. Как сетка ведёт себя на разных вьюпортах;
  3. Использовуется CSS- или HTML-сетка.

Мы можем двигаться дальше, только определившись с этими вещами. В этой статье условия такие:

  1. Я собираюсь создавать CSS-сетку. Почему я их рекомендую в ещё одной статье.

Итак, давайте начнём!

Создаём сетку

Процесс создания сетки состоит из восьми шагов:

  1. Выбор технологии реализации
  2. Установка ;
  3. Создание контейнера сетки;
  4. Расчёт ширины колонок;
  5. Определение положения отступов;
  6. Создание отладочной сетки;
  7. Создание вариаций раскладки;
  8. Адаптация раскладки.

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

Шаг 1: выбор технологии

Что вы будете использовать для создания сетки — CSS-гриды, флексы или старые добрые флоаты? Решения и детали реализации зависят от выбранной технологии.

CSS-гриды, безусловно, лучше всего подходят для создания сетки (потому, что гриды ). К сожалению, сегодня поддержка гридов оставляет желать лучшего. В каждом браузере они скрыты за флагом, поэтому мы не будем рассматривать гриды в этой статье. (Прим. редактора: на момент публикации перевода гриды уже поддерживаются без флагов в Chrome, Firefox и Safari). Я настоятельно рекомендую ознакомиться с работой Рейчел Эндрю, если вы хотите узнать о гридах больше.

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

Если вы выбрали флексы, помните об отличиях от флоатов, которые нужно учесть.

Шаг 2: установка

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

Вот наглядный пример того, как вычисляется в зависимости от значения свойства :

Свойство box-sizing и его влияние на расчёт ширины

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

html {  box-sizing: border-box;}*,*:before,*:after {  box-sizing: inherit;}

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

Шаг 3: создание контейнера сетки

У каждой сетки есть контейнер, определяющий её максимальную ширину. Как правило, я называю его . Префикс означает layout (раскладка). Я использую такое именование с тех пор, как изучил SMACSS, методологию Джонатана Снука.

.l-wrap {  max-width: 1140px;  margin-right: auto;  margin-left: auto;}

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

Шаг 4: расчёт ширины колонок

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


Если вы помните, при использовании CSS-сеток разметка выглядит примерно так:

<div class="l-wrap">  <div class="three-col-grid">    <div class="grid-item">Элемент сетки</div>    <div class="grid-item">Элемент сетки</div>    <div class="grid-item">Элемент сетки</div>  </div></div>

Из этой разметки понятно, что сетка имеет всего три колонки. Также видно, что для создания отступов нет дополнительных . Это означает, что:

  1. Мы создаём колонки с помощью свойства ;
  2. Мы создаём отступы с помощью свойств или .

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

Фиксированная ширина страницы

Веб-страница с фиксированной шириной позволяет хорошо контролировать разметку. Ширина в данном случае задается в пикселях. С фиксированным контейнером вы можете быть уверены, что все элементы страницы будут находиться на своих местах без риска съехать и развалить верстку. И каким бы широким ни был экран, сайт с фиксированной шириной будет смотреться на нем прилично и читабельно.

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

Списки

Неупорядоченный список

Тег (сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

Непосредственно в теге могут находиться только теги (сокращение от «list item»), которые обозначают элементы или пункты списка:

По умолчанию элементы отмечаются маркерами такого же цвета, как цвет текста.

Упорядоченный список

Тег (сокращение от «ordered list»)

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

Пункты упорядоченного списка тоже размечаются с помощью тега . Пример кода:

По умолчанию перед элементами ставится их порядковый номер. У  может быть несколько атрибутов: , и .

Атрибут меняет стартовое число нумерации пунктов. Может быть отрицательным.

Атрибут меняет направление нумерации на противоположный. Этот атрибут не требует значения.

С помощью атрибута можно задавать различные типы маркеров: строчные и заглавные латинские буквы или римские цифры.

Список описаний

Тег (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

  • обозначает сам список описаний;
  • (сокращение от «description term») обозначает термин;
  • (сокращение от «description definition») обозначает описание или определение.

Теги и  пишутся внутри . Каждый список может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

По умолчанию браузер добавляет небольшой отступ слева от определений.

Вертикальная линия HTML

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

Можно дописать стили в самом теге:

PHP

<div style=»border-left:3px solid red; padding-left:10px;»> <h3> Вертикальная линия HTML </h3> </div>

1 2 3 4 5

<div style=»border-left:3px solid red; padding-left:10px;»>

<h3>

ВертикальнаялинияHTML

<h3>

<div>

Результат:

Вертикальная линия HTML

С помощью свойства border-left мы задаем границу блока с левой стороны, и задаем следующие параметры границы:

  • 3px – толщина линии
  • solid – сплошная линия.Так же можно сделать: пунктирную(dotted), прерывистую (dashed), double (двойную), вогнутую (groove), и выпуклую (ridge).
  • red – это цвет границы. Его вы можете задать названием цвета, в шестнадцатеричном формате, с помощью таблицы цветов RGB или RGBA.

Подробнее о способах задания цвета и кодовых значениях цветов вы можете почитать в этих статьях:«Изменение цвета шрифта в CSS. Коды цветов HTML и CSS»«Как определить цвет на сайте»

Для задания границы вы можете использовать следующие свойства:

  • border-left – граница слева
  • border-right— граница справа
  • border-top – сверху
  • border-bottom – снизу
  • border – граница по всему контуру блока

Свойства border-top и border-bottom можно так же использовать для задания горизонтальной линии

Так же нам нужно указать отступ текста от границы с помощью свойства padding-left, иначе он будет к ней прилипать. В моем случае отступ равен 10 пикселям.

Если вам удобнее работать с CSS стилями в отдельном файле, то для блока нужно присвоить класс и для этого класса прописать данные свойства в CSS -файле. Вот как это будет выглядеть:


HTML:

PHP

<div class=»block-vert-line»> <h3> Вертикальная линия HTML для текста в блоке </h3> </div>

1 2 3 4 5

<div class=»block-vert-line»>

<h3>

ВертикальнаялинияHTMLдлятекставблоке

<h3>

<div>

CSS:

PHP

.block-vert-line{ border-left:3px solid green; padding-left:15px; }

1 2 3 4

.block-vert-line{

border-left3pxsolid green;

padding-left15px;

}

Результат:

Вертикальная линия HTML для текста в блоке

Редактировать стили для сайта проще всего при помощи редактора кода NotePad++. Как с ним работать я показывала в этой статье:Редактирование файлов сайта в Notepad++

Немного о grid-системах

Сетка (англ. grid) использовалась дизайнерами еще до эры Интернета. Grid-система — это набор колонок и рядов, которые помогают правильно разместить элементы макета.

Самая распространенная grid-система имеет 12 колонок одинаковой ширины, между которыми, как правило, есть небольшое расстояние. Такое количество столбцов вовсе не означает, что вам нужно создавать сайт с двенадцатью колонками. Вы можете сделать макет с любым количеством колонок, разделив 12-колоночную сетку на группы. Допустим, если макет состоит из трех колонок, то можно сделать эти колонки одинаковой ширины, каждая из которых будет занимать 4 столбца grid-системы. Либо под две колонки отвести половину сетки (6 столбцов), тогда как третья колонка займет оставшееся пространство сетки (еще 6 столбцов).

Пример того, как выглядит 12-колоночная сетка:

Подобная сетка гибкая и простая в использовании, она позволяет создавать разнообразные макеты, в то же время придерживаясь общей измерительной схемы. Зачастую в CSS grid-системах есть ряды и колонки, которые через классы именуются как и (либо ) соответственно. Колонки помещаются в ряды, а внутрь колонок — содержимое либо вложенные ряды с колонками. Одним из распространенных CSS-фреймворков, которые используют grid-систему, является Bootstrap.

Далее в учебнике: проблемы float-элементов.

Непостоянная ширина страницы

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

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

Создание таблицы в HTML

Рассмотрим теги для создания таблицы:

1
2
3
4
5
<table>
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат: Добавим границу для таблицы — атрибут :

1
2
3
4
5
<table border="1">
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:

Создания таблицы начинается с тега (от англ. «таблица»). Тег служит для создания строки. В строке располагаются ячейки — тег . Завершается таблица закрывающим тегом

Атрибуты тега TABLE

— таблица влево; – табл. по центру; — табл. вправо.
ширина
цвета рамки
ширина грани рамки
внутреннее расстояние до рамки
(фон таблицы)

Важно: Для ячеек-заголовка таблицы используется тег вместо. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TD или TH — ячейки

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

Важно:

  • Тег служит для создания заголовка таблицы
  • Для группировки заголовочных ячеек используется тег
  • Для группировки основного содержимого таблицы используется тег
  • Тег определяет нижнюю часть таблицы

Пример: Создать «каркас» таблицы со всеми тегами группировки

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table  border="1">
<caption>таблица<caption>
<thead>
	<tr>
	<th>Заголовок 1<th><th>3аголовок 2<th>
	<tr>
<thead>
<tbody>
	<tr>
	<td>содержимое<td><td>содержимое<td>
	<tr>
<tbody>
<tfoot>
...
<tfoot>
<table>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).

Таблица с областями группировки
Столбец 1 Столбец 2 Столбец 3 Столбец 4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4

Адаптивный дизайн страницы

Золотая середина и наилучшее решение для современного сайта — это адаптивный веб-дизайн. Суть его заключается в создании нескольких вариаций разметки с коррекцией ширины контейнера в зависимости от размеров экрана. Например, для настольных компьютеров можно установить ширину страницы в 960 пикселей, для планшетов — ширину этой же страницы в 700 пикселей, а для всех смартфонов вообще задать непостоянную ширину в процентах. Таким образом вы можете превратить, к примеру, большой трехколоночный макет в узкий одноколоночный, если сайт просматривается с небольшого экрана.

Определять стили для страницы, основываясь на ширине окна браузера, можно благодаря медиазапросам (Media Queries). Как вы наверняка помните, мы уже пробовали знакомиться с ними на практике ранее в книге.

Чуть позже в данном разделе мы обязательно вернемся к технике создания адаптивного дизайна. А пока что далее в книге пойдет речь о таком понятии как блочная верстка.


С этим читают