Основы HTML и CSS для владельца сайта
Даже если ваш сайт сделан на конструкторе или системе управления контентом, рано или поздно возникает ситуация, когда нужно что-то поправить «руками»: изменить цвет кнопки, добавить отступ, исправить кривую таблицу в статье. Обращаться к разработчику ради каждой мелочи долго и дорого. Базовое понимание HTML и CSS позволяет решать такие задачи за минуты. В этой статье — тот минимум, который стоит знать каждому владельцу сайта.
Что такое HTML
HTML — язык разметки, на котором написаны все веб-страницы. Он описывает структуру и содержание страницы: где заголовок, где абзац, где список, где изображение, где ссылка. Браузер читает HTML и отображает страницу так, как её видит посетитель.
HTML состоит из тегов — специальных меток в угловых скобках. Большинство тегов парные: открывающий и закрывающий. Между ними находится содержимое. Например, абзац текста обрамляется тегами абзаца, а заголовок — тегами заголовка нужного уровня.
Структура HTML-документа
Каждая веб-страница имеет базовую структуру:
- объявление типа документа — сообщает браузеру, что это HTML-страница;
- корневой элемент — обрамляет всё содержимое страницы и указывает язык;
- заголовочная часть — служебная информация: кодировка, заголовок страницы, описание, подключение стилей;
- тело документа — всё, что видит посетитель.
Владельцу сайта особенно важно знать о заголовочной части. Там находятся заголовок страницы и описание, которые показываются в поисковой выдаче. Их правильное заполнение влияет на то, кликнут ли пользователи по вашей ссылке.
Основные теги
Вот теги, которые встречаются чаще всего:
Заголовки. Шесть уровней — от первого до шестого. Первый уровень используется один раз на странице для главного заголовка, второй — для разделов, третий — для подразделов. Правильная иерархия заголовков важна и для читателей, и для поисковых систем.
Абзац. Обрамляет блок текста. Браузер автоматически добавляет отступы между абзацами.
Ссылка. Делает текст или изображение кликабельным. Содержит адрес, на который ведёт ссылка. Можно указать, чтобы ссылка открывалась в новой вкладке.
Изображение. Вставляет картинку. Обязательно содержит адрес изображения и альтернативный текст, который отображается, если картинка не загрузилась, и помогает поисковикам понять её содержание.
Списки. Маркированные и нумерованные. Каждый пункт обрамляется отдельным тегом.
Таблица. Состоит из строк и ячеек. Используется для табличных данных, а не для вёрстки страницы.
Выделение. Теги для жирного и курсивного текста, а также для смыслового выделения.
Блоки. Универсальные контейнеры для группировки элементов. Сами по себе не имеют оформления, но позволяют применять стили к группе элементов.
Атрибуты
Теги могут иметь атрибуты — дополнительные параметры. Например, у ссылки атрибут адреса, у изображения — атрибуты источника, альтернативного текста, ширины и высоты. Особенно важны атрибуты класса и идентификатора: через них к элементам применяются стили CSS.
Что такое CSS
CSS — язык описания внешнего вида страницы. Если HTML отвечает за то, что находится на странице, то CSS — за то, как это выглядит: цвета, шрифты, размеры, отступы, расположение элементов.
Стили описываются правилами. Каждое правило состоит из селектора — указания, к каким элементам применять стиль, — и набора свойств со значениями. Например, правило может сказать: «все заголовки второго уровня — тёмно-синего цвета, размер шрифта двадцать пикселей, отступ сверху тридцать пикселей».
Как подключаются стили
Стили можно подключить тремя способами:
- Внешний файл. Стили хранятся в отдельном файле, который подключается в заголовочной части страницы. Это лучший способ: один файл стилей управляет оформлением всего сайта.
- Внутренний блок. Стили размещаются прямо в коде страницы в специальном блоке. Действуют только на этой странице.
- Встроенные стили. Стили прописываются прямо в атрибуте конкретного элемента. Удобно для быстрой правки, но плохо для поддержки.
Основные свойства CSS
Цвет текста и фона. Задаются названием цвета, шестнадцатеричным кодом или другими форматами.
Шрифт. Семейство шрифта, размер, начертание, межстрочный интервал.
Отступы. Внешние отступы задают расстояние между элементами, внутренние — расстояние от границы элемента до его содержимого.
Границы. Толщина, стиль и цвет рамки вокруг элемента.
Размеры. Ширина и высота элементов.
Выравнивание. Выравнивание текста по левому краю, центру, правому краю или по ширине.
Расположение. Современные способы раскладки элементов на странице — гибкие контейнеры и сетки.
Блочная модель
Ключевое понятие CSS — блочная модель. Каждый элемент на странице — это прямоугольник, который состоит из содержимого, внутренних отступов, рамки и внешних отступов. Понимание этой модели помогает разобраться, почему элемент занимает больше места, чем ожидалось, или почему между блоками появляется лишний зазор.
Типичные задачи владельца сайта
Вот что можно сделать самостоятельно с базовыми знаниями:
- исправить заголовок и описание страницы для поисковых систем;
- поменять текст, ссылку или изображение в шаблоне;
- изменить цвет кнопки или ссылок;
- увеличить шрифт, если текст плохо читается;
- добавить отступ между блоками;
- исправить таблицу, вставленную из текстового редактора с лишним форматированием;
- добавить альтернативный текст изображениям;
- вставить код счётчика или виджета.
Как не сломать сайт
Перед любыми правками:
- Сделайте резервную копию файла, который собираетесь менять.
- Вносите изменения постепенно и проверяйте результат после каждого.
- Используйте инструменты разработчика в браузере, чтобы сначала проверить изменения.
- Если сайт на CMS, вносите правки в дочернюю тему или специальное поле для дополнительных стилей — иначе при обновлении темы изменения пропадут.
- Проверяйте результат на телефоне и компьютере.
Адаптивность
Сегодня большинство посетителей заходят на сайты с телефонов. Адаптивная вёрстка позволяет странице подстраиваться под размер экрана. Это достигается с помощью медиазапросов — правил CSS, которые применяются только при определённой ширине экрана. Например, на широком экране боковая колонка стоит справа, а на узком — опускается под основной контент.
Если вы вносите правки в оформление, обязательно проверяйте, как они выглядят на разных устройствах. Изменение, которое хорошо смотрится на компьютере, может сломать вёрстку на телефоне.
Валидность и чистота кода
Валидный код соответствует стандартам. Браузеры умеют отображать и невалидный код, но ошибки могут приводить к непредсказуемому поведению в разных браузерах. Существуют бесплатные сервисы проверки, которые показывают ошибки в HTML и CSS. Периодически проверяйте свои страницы, особенно после правок.
Чистый код — это ещё и отсутствие лишнего: ненужных стилей, пустых тегов, устаревших элементов. Текст, вставленный из текстовых редакторов, часто тащит за собой массу лишнего форматирования. Перед вставкой очищайте его или вставляйте как простой текст.
Где учиться дальше
Базовые знания HTML и CSS можно получить за несколько вечеров. Существует множество бесплатных учебников, интерактивных курсов и справочников. Хороший способ учиться — практика: создайте простую страницу о себе, поэкспериментируйте со стилями, попробуйте повторить понравившийся элемент с другого сайта. Через пару недель вы будете уверенно чувствовать себя в коде своего сайта.
Итог
HTML описывает структуру страницы, CSS — её внешний вид. Знание основных тегов, свойств и блочной модели позволяет владельцу сайта самостоятельно решать множество мелких задач: править тексты и заголовки, менять оформление, исправлять ошибки вёрстки. Пользуйтесь инструментами разработчика в браузере, делайте резервные копии и проверяйте результат на разных устройствах. Эти навыки окупятся многократно сэкономленным временем и деньгами.