HTML и CSS для начинающих: основы вёрстки
Можно сделать сайт, ни разу не заглянув в его код: современные CMS и конструкторы позволяют обойтись мышкой и визуальным редактором. Но рано или поздно любой владелец сайта сталкивается с ситуацией, когда нужно поправить отступ, понять, почему съехал блок, или объяснить фрилансеру, что именно сломалось. В этот момент базовое знание HTML и CSS оказывается бесценным. Хорошая новость: основы вёрстки вполне можно освоить за несколько недель спокойных занятий. В этой статье мы разберём, как устроена веб-страница и что нужно понять в первую очередь, не погружаясь в программирование.
Что такое HTML и CSS
HTML — это язык разметки. Он описывает, из чего состоит страница: где заголовок, где абзац, где список, где картинка, где ссылка. HTML не отвечает за то, как это выглядит, — только за смысл и структуру. Представьте рукопись, в которой редактор пометил: «это заголовок главы», «это цитата», «это сноска». Именно такие пометки и делает HTML.
CSS — это язык стилей. Он отвечает за внешний вид: цвета, шрифты, размеры, отступы, расположение блоков на экране, поведение страницы на телефоне. Если HTML — это скелет и органы, то CSS — одежда и причёска.
Разделение на эти два языка придумано не случайно. Одну и ту же разметку можно оформить совершенно по-разному, просто подключив другой файл стилей. Именно так работают темы оформления в CMS: содержимое остаётся прежним, а внешний вид меняется целиком.
Третий язык, который часто упоминают рядом, — JavaScript. Он добавляет странице поведение: всплывающие окна, слайдеры, проверку форм. Но для старта он не обязателен, и начинать лучше именно с разметки и стилей.
Как браузер показывает страницу
Когда вы открываете сайт, браузер получает от сервера HTML-документ. Он читает его сверху вниз и строит в памяти дерево элементов: страница, в ней шапка, в шапке логотип и меню, ниже основной блок со статьёй, внутри статьи заголовки и абзацы. Затем браузер загружает файлы стилей и применяет правила оформления к каждому элементу дерева. Наконец, он рассчитывает, где что должно располагаться, и отрисовывает результат на экране.
Понимание этой последовательности помогает разбираться с проблемами. Если на странице нет нужного текста — дело в разметке. Если текст есть, но выглядит не так — дело в стилях. Если всё было нормально, а потом что-то поменялось при клике — скорее всего, вмешался скрипт.
В любом браузере можно открыть инструменты разработчика и посмотреть разметку и стили любой страницы. Это лучший учебник, который всегда под рукой.
Из чего состоит HTML-документ
Любая страница построена из элементов. Элемент обычно состоит из открывающего тега, содержимого и закрывающего тега. Тег — это название элемента в угловых скобках. Например, абзац обозначается тегом «p», и текст абзаца располагается между его открывающей и закрывающей частью.
Документ имеет обязательный каркас. В самом начале стоит объявление типа документа, которое сообщает браузеру, что перед ним современный HTML. Затем идёт корневой элемент «html», внутри которого два больших блока:
- Головная часть, тег «head». Здесь находится служебная информация, которую посетитель не видит на странице: заголовок для вкладки браузера в теге «title», описание для поисковиков, кодировка, подключение файлов стилей.
- Тело документа, тег «body». Всё, что посетитель видит на экране: тексты, изображения, меню, формы.
У элементов бывают атрибуты — дополнительные параметры, которые пишутся внутри открывающего тега. Например, у ссылки есть атрибут «href» с адресом, куда она ведёт, а у изображения — атрибут «src» с адресом файла и атрибут «alt» с текстовым описанием картинки.
Основные теги, которые нужно знать
Тегов в HTML много, но для повседневной работы хватает пары десятков. Вот главные из них, описанные словами.
Заголовки. Шесть уровней, от «h1» до «h6». Тег заголовка «h1» обозначает главный заголовок страницы, и он должен быть один. Заголовки второго уровня, «h2», делят материал на крупные разделы, «h3» — на подразделы внутри них. Остальные уровни используются редко.
Текст. Тег «p» — абзац. Тег «strong» выделяет важное, обычно жирным. Тег «em» делает смысловое ударение, обычно курсивом. Тег «br» переносит строку, но злоупотреблять им не стоит: абзацы лучше делать абзацами.
Списки. Тег «ul» создаёт маркированный список, тег «ol» — нумерованный. Каждый пункт внутри них оборачивается в тег «li».
Ссылки и изображения. Тег «a» — ссылка, тег «img» — картинка. Изображение не имеет закрывающего тега, вся информация передаётся атрибутами.
Смысловые блоки. Тег «header» для шапки, «nav» для навигации, «main» для основного содержимого, «article» для самостоятельной статьи, «section» для тематического раздела, «aside» для боковой колонки, «footer» для подвала. Эти теги называют семантическими: они подсказывают браузеру, поисковику и программам для незрячих людей, какую роль играет каждый фрагмент.
Универсальный контейнер. Тег «div» — блок без особого смысла, который используют для группировки и оформления. Новички часто строят из него всю страницу целиком. Это работает, но семантические теги делают разметку понятнее.
Как работает CSS
Стили состоят из правил. Каждое правило говорит: «вот к таким элементам примени вот такие свойства». Часть правила, которая выбирает элементы, называется селектором. Выбирать можно по названию тега (например, все абзацы), по классу (все элементы, которым вы присвоили класс «кнопка»), по идентификатору (один уникальный элемент) и по множеству более сложных признаков.
Свойства описывают внешний вид. Самые употребительные из них:
- цвет текста и цвет фона;
- семейство шрифта, его размер, насыщенность и межстрочный интервал;
- внутренние отступы, то есть расстояние от содержимого до границы блока;
- внешние отступы, то есть расстояние от блока до соседей;
- рамки и скругление углов;
- ширина и высота блока;
- способ расположения элементов на странице.
Название CSS расшифровывается как «каскадные таблицы стилей». Каскад означает, что к одному элементу может относиться несколько правил, и браузер по определённым законам решает, какое из них победит. Более конкретный селектор побеждает более общий, а при равенстве выигрывает правило, записанное ниже. Понимание каскада избавляет от половины вопросов вида «почему мой стиль не применяется».
Блочная модель и расположение элементов
Каждый элемент на странице браузер воспринимает как прямоугольник. У этого прямоугольника есть содержимое, внутренний отступ вокруг содержимого, рамка и внешний отступ. Эту схему называют блочной моделью, и она — ключ к пониманию вёрстки. Когда блок оказался шире, чем вы ожидали, почти всегда виноваты отступы или рамка, которые добавились к заданной ширине.
Элементы бывают блочными и строчными. Блочные, вроде абзаца или заголовка, занимают всю доступную ширину и начинаются с новой строки. Строчные, вроде ссылки или выделения жирным, встраиваются в текст и занимают столько места, сколько нужно их содержимому.
Чтобы расставить блоки рядом друг с другом, сегодня используют две современные технологии. Гибкие контейнеры удобны для выстраивания элементов в ряд или в столбец: меню, карточки, кнопки. Сеточная раскладка позволяет описать всю страницу как таблицу из строк и колонок и размещать в ней крупные блоки. Старые приёмы с обтеканием и таблицами для разметки лучше не изучать в первую очередь — они остались в учебниках по инерции.
Адаптивность: сайт на любом экране
Большая часть посетителей сегодня приходит с телефонов. Поэтому страница должна одинаково хорошо выглядеть и на узком экране смартфона, и на широком мониторе. Для этого в CSS есть медиазапросы — условия вида «если ширина экрана меньше такой-то, примени вот эти правила». С их помощью колонки на телефоне выстраиваются друг под другом, шрифт подстраивается, а меню сворачивается в кнопку.
Ещё одна важная деталь — специальная служебная строка в головной части документа, которая сообщает мобильному браузеру, что страницу нужно показывать в реальном масштабе экрана, а не уменьшенной копией настольной версии. Без неё адаптивная вёрстка не сработает. Подробнее об этом рассказано в статье о мобильной версии сайта.
Как учиться вёрстке
Не пытайтесь выучить все теги и свойства наизусть. Гораздо эффективнее учиться на практике, постепенно усложняя задачи.
- Сверстайте простую страницу о себе. Заголовок, пара абзацев, список, ссылка, фотография. Только разметка, без стилей.
- Добавьте оформление. Подберите шрифт, цвета, отступы. Посмотрите, как меняется восприятие одного и того же текста.
- Сделайте раскладку. Шапка, меню, основная колонка, боковая колонка, подвал.
- Сделайте страницу адаптивной. Проверьте её на телефоне и добейтесь, чтобы всё читалось удобно.
- Повторите чужой макет. Возьмите понравившуюся страницу и попробуйте воспроизвести её внешний вид самостоятельно, не заглядывая в исходный код. Потом сравните.
Хорошие бесплатные справочники и интерактивные учебники по HTML и CSS существуют на русском языке, их легко найти. Выберите один и держитесь его, не прыгая между десятками курсов.
Полчаса практики каждый день дают больше, чем выходные, потраченные на чтение теории.
Зачем это владельцу сайта на CMS
Даже если вы не собираетесь становиться верстальщиком, базовые знания окупаются очень быстро. Вы сможете самостоятельно поправить мелкие недочёты темы, добавить свои стили, не дожидаясь помощи. Вы будете понимать, правильно ли расставлены заголовки в статьях, что важно для поисковой оптимизации. Вы сможете грамотно сформулировать задачу исполнителю и оценить, насколько адекватна его цена. А если захотите сделать простой лендинг или визитку, то, как разобрано в материале CMS или самописный сайт, сможете сверстать его полностью сами.
Наконец, вёрстка — это востребованный навык на фрилансе. Многие начинают с мелких правок на чужих сайтах и постепенно переходят к полноценным проектам. Если эта мысль кажется привлекательной, загляните в статью о том, как устроена работа программиста на удалёнке.
Итог
HTML описывает, из чего состоит страница, а CSS — как она выглядит. Освоив каркас документа, два десятка основных тегов, принципы каскада, блочную модель и современную раскладку, вы будете понимать устройство любого сайта. Учитесь на практике, двигайтесь от простого к сложному и используйте инструменты разработчика в браузере как личный учебник. Эти знания пригодятся и владельцу сайта на CMS, и тому, кто задумывается о заработке на вёрстке.