Гайд по верстке 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 тег:

    <meta name='viewport' content='width=device-width, initial-scale=1'>
    

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

С чего начинать верстку странички

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блочный. По умолчанию, если вы создадите < div > тег(без CSS) и поместите в него какие-то элементы (к примеру текст), < div > тег растянется на всю ширину родительского контейнера. К слову, тег < body > также является контейнером и по свойствам похож на < div > .Если вы добавите еще один < div >, то он отобразиться на странице под первым, что в целом логично, т.к. первый уже занимает всю ширину, а значит второй просто физически можно разместить только снизу или сверху. А т.к мы добавляем новый html тег под первым, то и на странице они появятся в том-же порядке – снизу вверх.

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

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

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

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

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

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