Гайд по верстке 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. На данный момент, просто б�