Гайд по верстке HTML странички. Объяснение принципов, а не примеров

Существует более 100 различных стандартных HTML тегов, при помощи которых можно сверстать страничку. И еще больше CSSсвойств, применяемых к этим HTML тегам. Правда в том, что на практике в основном используются всего 6 из этой сотни и может-быть 10-15 CSS свойств. В данной статье я попробую охватить сценарии использования HTML и CSS, которые закроют 80% ваших задач, а также аргументирую, почему создание страничек сайта при помощи верстки не уступает по сложности использованию конструкторов сайта (разница только в скорости). Давайте приступим!

И начнем с краткого описания HTML и CSS тегов, которые мы будем использовать.

HTML теги:

CSS свойства:

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

Где писать

Если эта статья по верстке у вас не первая, то вы уже знаете, что располагать HTML и CSS можно по-разному. Помещать все в одном файле, разделять на несколько, помещать внутрь компонентов. Рассказ о все возможных вариациях – НЕ тема данной статьи, поэтому мы просто выберем один самый простой способ и будем писать все в одном файле. Все что касается HTML мы будем добавлять внутрь тега < body >, все что касается CSS, внутрь тега < style >.Пробовать все что вы изучите в статье можно в этом шаблоне HTML странички.

Чтобы посмотреть на свои изменения, просто откройте файл с помощью любого браузера (и делайте перезагрузку странички, после добавления изменений).

Что писать

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

Есть 3 основных способа настройки такой “адресации”:

По тегу. Нам нужно добавить html тег и в секции со стилями добавить название этого тега со свойствами внутри фигурных скобок.

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

По id. Для id аналогично, как и с классом, но название атрибута id, а вместо точки используется хештег(#).

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

Обязательный атрибут любой HTML странички

Прежде чем вы начнете пробовать что-то на практике из написанного здесь, обязательно добавьте внутрь тега < head > следующий html тег:

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

Как правило все статьи и гайды о том, как научиться верстать html страничку, начинаются с объяснения, какие есть CSS свойства и значения этих свойств, и как они влияют на внешний вид html тегов.В итоге вы получаете некий список из CSS свойств с кратким их описанием. Ну и небольшим количеством примеров. Проблема в том, что когда перед вами встает задача сделать что-то новое, то вы не можете понять “А что мне вообще нужно сейчас использовать??”. Поэтому свое объяснение я построю обратным образом. Мы разберем из каких элементов чаще всего состоит сайт, и при помощи каких тегов и CSS свойств, создавать эти элементы. А поскольку сайты в основном состоят из похожих блоков, то зная, как создавать эти блоки, вы в дальнейшем сможете создать свой сайт, со своей стилизацией и цветами.

Из каких компонентов состоит сайт

Любую страничку сайта можно представить как набор прямоугольниковразных размеров. Это так, хотя бы потому что, абсолютно любой html тег, независимо от того какие стили на него наложены, всегда имеет прямоугольные границы (границы, которыми этот элемент соприкасается с другими элементами). Даже если, вы видите круг или треугольник, он всегда вписан в прямоугольник.

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

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

В CSS у нас есть 2 принципиально разных подхода позиционирования элементов: абсолютное и с помощью контейнеров(относительное).

Абсолютное позиционирование больше всего похоже на то, как мы располагаем элементы в дизайн редакторе, т.к. этот подход предполагает задание абсолютных отступов(отступов от краев экрана).

К примеру, возьмем вот такую HTML страничку без позиционирования.

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

Вот какие CSS пришлось указать, чтобы задать данную конфигурацию:

Здесь мы первой строчкой у каждого правила говорим использовать абсолютное позиционирование для данного элемента, после чего указываем отступы от верхней и левой границы экрана. И все бы хорошо, но теперь представьте, что будет когда на странице появятся не 2 элемента, а 20. Вам придется для каждого элемента высчитывать сколько пикселей нужно сделать отступ, чтобы данный элемент не накладывался на другой. А потом вам захочется какой-нибудь элемент в середине страницы поместить чуть ниже или увеличить его размер. А значит вам не только придется поменять стили у данного элемента, но и пересчитать отступы для всех элементов, находящихся ниже. Это долго, неудобно и сложно поддерживать.

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

Позиционирование при помощи контейнеров

Контейнер – это невидимый прямоугольник, внутрь которого помещаются элементы странички. Контейнеры, как правило, создаются при помощи тегов < div >, реже < span >. Весь смысл в том, что мы заполняем всю HTML страничку контейнерами, помещаем элементы внутрь и позиционируем ОТНОСИТЕЛЬНО этих контейнеров. Таким образом, изменение стилей какого-либо компонента будет затрагивать, только компоненты, находящиеся с ним в одном контейнере.

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

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

Мы создаем 2 контейнера, в первом будет находиться квадрат, а втором кнопка с полем ввода. Поскольку второй контейнер(controls-container) на HTML страничке находится под (square-container), то нам не нужно задавать отступ сверху для элементов внутри него, как было с абсолютным позиционированием. Чтобы задать отступ слева мы, конечно, можем для кнопки и поля ввода добавить отдельные отступы, но лаконичнее будет добавить внутренний отступ слева(padding-left) для самого контейнера и тогда все элементы внутри него будут иметь этот отступ.

Типы контейнеров

Блочный. По умолчанию, если вы создадите

тег (без CSS) и поместите в него какие-то элементы (к примеру текст),

тег растянется на всю ширину родительского контейнера. К слову, тег также является контейнером и по свойствам похож на . Если вы добавите еще один , то он отобразиться на странице под первым, что в целом логично, т.к. первый уже занимает всю ширину, а значит второй просто физически можно разместить только снизу или сверху. А т.к мы добавляем новый html тег под первым, то и на странице они появятся в том-же порядке – снизу вверх.

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

Инлайновый. Второй тип контейнера создается при помощи тега < span >. От блочного он отличается тем, что, во-первых, он растягивается не по ширине родительского контейнера, а по содержимому внутри. А во-вторых, в случае если позволяет ширина экрана, этот контейнер добавляется справа от другого < span >, если в HTML мы добавили его ниже. И слева, если в HTML мы добавили его выше.

Вот как работают эти контейнеры. Для большей ясности я покрасил границы контейнеров:

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

Позиционирование элементов.

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

В случае, если нам нужно задать позиционирование внутри контейнера, то мы должны пользоваться другими CSS свойствами: margin и padding. Margin – это внешний отступ, padding – внутренний. Ниже будут примеры, а пока ограничимся данным описанием. Значение обоих свойств состоит из 4 частей, означающих отступы с разных сторон.

Аналогично для padding. Для каждого свойства есть 4 подсвойства, которые означают отступ с конкретной стороны.

А теперь небольшой пример, показывающий разницу внутренних(padding)и внешних(margin)отступов.

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

Во-втором случае, мы задали внутренний отступ для самого контейнера, в итоге оба прямоугольника имеют отступ слева, при этом оранжевый прямоугольник не вышел за пределы контейнера, а вот сам контейнер увеличился в размерах (Хотя для обоих зеленых контейнеров установлена ширина 150px). Все потому, что по умолчанию, ширина элементов задается без учета внутреннего отступа. Это поведение можно поменять. Но это тема для отдельной статьи.

Flex контейнер

С помощью marginиpaddingможно задавать отступы. Но, что, если вам нужно отцентрировать все элементы внутри контейнера или прижать их к правой стороне, или сделать между ними равные отступы, или равномерно распределить внутри контейнера. Конечно, этого можно добиться при помощи обычных отступов, но существует Flexконтейнер, который позволяетрешать некоторые шаблонные(часто возникающие) задачи значительно легче и быстрее.

Флекс контейнер – это обычный контейнер. Его можно добавить с помощью тега < div > или < span >, но, чтобы он приобрел дополнительные свойства в CSSнужно добавить этому контейнеру свойство display: flex;

Какие частые задачи позволяет решить Flex контейнер

А теперь продемонстрируем все это на примере:

В левом зеленом квадрате элементы расположены - горизонтально, а в правом – вертикально. Все потому, что мы для правого контейнера указали свойство flex-direction: column.Для левого мы не указывали ничего дополнительного, т.к. расположение элементов по горизонтали является умолчательным поведением для флекс контейнера.

Далее вы можете заметить, что для обоих контейнеров добавлено свойство justify-content: center. Оно центрирует элементы, при этом вы можете заметить, что внутри левого контейнера элементы отцентрированы по горизонтали, а внутри правого по вертикали. Всё из-за того, что для правого мы добавили свойство flex-direction. Оно меняет стандартную ось вдоль которой идет центровка или др. преобразования.

Точно также если мы захотим отцентрировать по вертикали элементы в левом контейнере. Мы должны будем добавить свойство align-items: center. И по аналогии это же свойство отцентрирует по горизонтали элементы во втором контейнере. Таким образом, чтобы поместить элементы в центр контейнера, мы должны указать оба свойства.

Второй пример:

Здесь для элементов левого контейнера мы задали фиксированный отступ 20px между ними с помощью свойства gap.Для правого контейнера мы указали шаблон, по которому задается отступ между элементами, с помощью свойства justify-content: space-between;В данном случае два крайних элемента прижимаются к краям, а все остальные равномерно занимают оставшееся пространство. И как вы могли заметить отступы во втором случае применяются по вертикали(вы уже знаете почему).

Познакомиться с другими свойствами Flex контейнера вы можете самостоятельно.

Мы довольно детально разобрали что такое контейнеры и какие они бывают. Теперь вы знаете, что после того, как вы обозначили, из каких “прямоугольников” состоит наш дизайн, нужно разместить все эти прямоугольники внутрь контейнеров, чтобы задать позиционирование. К примеру, вот таким образом:

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

А далее вам нужно будет задать расположение самих контейнеров и элементов внутри, с помощью CSS свойств, описанных ранее.

Дальнейшие шаги вы можете прочитать в источнике