Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>3 сен 2024</li>

3 <li>0</li>

4 </ul><h2>Вёрстка сайта: инструкция для новичков</h2>

5 Ваш первый гайд по созданию и оформлению веб-страниц.

6 Иллюстрация: Оля Ежак для Skillbox Media

7 Автор. На 50% состоит из музыки и ещё на 50% - из любви к интересным людям.

8 Если разработчик пишет код и создаёт программу, это называется программированием. Однако, когда вместо программы создаётся сайт, мы говорим о вёрстке. Вёрстка сайта - это преобразование дизайнерских макетов в интерактивные веб-страницы, которые пользователи видят в интернете.

9 Из этой статьи вы узнаете:

10 <ul><li><a>что такое вёрстка</a>;</li>

11 <li><a>какой она бывает</a>;</li>

12 <li><a>что такое валидная вёрстка</a>;</li>

13 <li><a>когда вёрстка считается правильной</a>;</li>

14 <li><a>с какими инструментами работают верстальщики</a>.</li>

15 </ul>Для лучшего понимания процесса вёрстки давайте рассмотрим основные этапы создания сайта - от идеи до его публикации в интернете. Это будет упрощённая схема, поскольку в реальных проектах некоторые этапы могут совмещаться или делиться на подэтапы с участием множества специалистов.

16 Исследование.На этом этапе заказчик определяет цели и задачи будущего сайта, его целевую аудиторию и основные функциональные требования. В результате создаётся техническое задание, которое подробно описывает, как должен выглядеть сайт и какие задачи он должен выполнять.

17 Создание прототипа.На основе технического задания веб-дизайнер разрабатывает прототип сайта. Прототип - это упрощённое визуальное представление сайта, отображающее его структуру, расположение элементов и функциональные возможности. После утверждения прототипа дизайнер создаёт графический макет, который включает детализированное оформление, цвета, шрифты и стилистику. Этот макет затем утверждается заказчиком как окончательный дизайн сайта.

18 Вёрстка сайта.На этом этапе к процессу подключается верстальщик, который преобразует графический макет в рабочий сайт. Для этого верстальщик использует две основные технологии:

19 <ul><li>HTML (HyperText Markup Language) - это язык разметки, который расставляет на странице заголовки, абзацы, изображения и другие элементы. HTML можно сравнить с каркасом здания, определяющим расположение стен, окон и дверей.</li>

20 <li>CSS (Cascading Style Sheets) - это язык стилей, отвечающий за оформление страницы. CSS управляет внешним видом, цветом, шрифтами и расположением элементов. Его можно сравнить с внутренней отделкой дома, которая включает покраску стен, выбор мебели и оформление интерьера.</li>

21 </ul>HTML и CSS всегда работают в связке. Например, HTML добавляет на страницу абзац, а CSS задаёт его цвет и шрифт. Подобным образом с помощью HTML и CSS верстается каждый элемент сайта.

22 Дальнейшие действия: свёрстанному сайту могут потребоваться этапы тестирования, оптимизации и внедрения дополнительной функциональности. Например, для интернет-магазина это могут быть:

23 <ul><li>Интеграция с базой данных: для хранения информации о продуктах, заказах и клиентах.</li>

24 <li>Разработка серверной логики: для обработки запросов, управления корзиной покупок и создания<a>API</a>для связи между<a>фронтендом и бэкендом</a>.</li>

25 <li>Добавление интерактивности на страницы:для реализации работы корзины покупок, фильтрации товаров и обновления страниц без перезагрузки.</li>

26 <li>Разработка администраторской панели: для управления товарами, заказами и пользователями.</li>

27 </ul>Функциональность и набор технологий зависят от целей проекта. Однако все дополнительные этапы начинаются только после того, как верстальщик преобразует графический макет в рабочий сайт.

28 В начале 2000-х разработчики часто использовали<a>табличную вёрстку</a>, размещая содержимое сайта в столбцах и ячейках. Этот метод упорядочивал контент, но не обеспечивал адаптацию сайта под разные размеры экранов. В результате сайт мог корректно отображаться на одном устройстве, но становился нечитаемым на другом, особенно на мобильных телефонах. Для решения этой проблемы появились новые методы вёрстки: фиксированная, резиновая, адаптивная и отзывчивая (респонсивная).

29 Первая мобильная версия сайта vk.com требовала постоянного скроллинга в разные стороны для перемещения по страницеИзображение: AM-STUDiO / ShutterstockФиксированная вёрсткапредполагает одинаковую ширину страницы, независимо от размера экрана устройства. Если элемент не помещается на экране, появляется полоса прокрутки. Этот подход был популярен в период, когда количество пользователей смартфонов было небольшим и были распространены мониторы с фиксированными разрешениями, такими как 800×600 или 1024×768.

30 Изображение:<a>Мария Черноскулова</a>/ BehanceРезиновая вёрсткаоставляет элементы на странице на своих местах, но при этом растягивает или сжимает их в зависимости от ширины экрана. Это достигается за счёт использования относительных размеров вместо фиксированных. Например, если в фиксированной вёрстке у кнопки ширина 200 пикселей, то она всегда будет 200 пикселей, независимо от размера экрана. В резиновой вёрстке кнопка может занимать 20% ширины экрана, и её размер изменится в зависимости от ширины устройства. Однако если контент не поместится в блок, он может выйти за его пределы и перекрыть другой контент.

31 Изображение:<a>Мария Черноскулова</a>/ BehanceАдаптивная вёрсткапозволяет подстраивать структуру и стиль страницы в зависимости от размера экрана устройства. Можно создать отдельные макеты для разных разрешений и поддерживать оптимальную функциональность сайта на мобильных телефонах, планшетах и десктопах. Для реализации адаптивной вёрстки используются медиазапросы - специальные CSS-правила, позволяющие применять различные стили в зависимости от ширины экрана или его ориентации.

32 Изображение:<a>Мария Черноскулова</a>/ BehanceРеспонсивная вёрсткаиспользует медиазапросы и задаёт размеры элементов в относительных единицах, что позволяет им плавно изменять размер и расположение в зависимости от ширины экрана. Например, при уменьшении ширины экрана текст в колонках может автоматически переноситься на следующую строку, тогда как в адаптивной вёрстке текст может просто уменьшаться или обрезаться. Такой подход обеспечивает более гибкое и удобное отображение контента на различных устройствах.

33 Изображение: предоставлено Олегом РязанцевымЕсли разработчики будут произвольно использовать HTML и CSS, это приведёт к путанице и непредсказуемости в отображении сайтов. Поэтому существует<a>Всемирный консорциум W3C</a>, который разрабатывает и утверждает стандарты веб-вёрстки. Таким образом, валидная вёрстка - это код, выполненный в соответствии со спецификациями W3C.

34 Преимущества валидной вёрстки:

35 <ul><li>Совместимость между браузерами.Возьмём элемент <button> с атрибутом type="submit". Если его неправильно закрыть, в Chrome он может отображаться как кнопка, а в Firefox - как текст. Валидная вёрстка гарантирует единообразное отображение всех элементов на разных платформах. В нашем случае в Chrome и в Firefox мы увидим кнопку.</li>

36 <li>Оптимизация поисковой выдачи.Валидный код обеспечивает чёткую и структурированную разметку, что упрощает анализ и индексацию сайта поисковыми роботами. Например, тег <h1> для основного заголовка помогает поисковым системам лучше понять содержание страницы, что может улучшить её ранжирование в результатах поиска.</li>

37 <li>Улучшение доступности.Валидная вёрстка делает сайт удобным для пользователей с особыми потребностями или проблемами со здоровьем. Например, если добавить текст в атрибут alt, пользователи с нарушением зрения смогут услышать описание изображения на сайте.</li>

38 </ul>Чтобы не запоминать спецификации наизусть, для разработчиков созданы валидаторы - специальные инструменты, которые проверяют код на соответствие стандартам W3C. Валидаторы анализируют разметку и указывают на проблемные места, которые нужно исправить.

39 Пример результата работы валидатора: обнаружены незначительные неточности и ошибки, которые могут повлиять на работу кода. Неточности выделены жёлтым, а ошибки - красным. Оба типа проблем нужно исправить, чтобы вёрстка считалась валиднойСкриншот:<a>W3C Markup Validation Service</a>/ Skillbox MediaЕсли вы хотите познакомиться со спецификацией W3C, посмотрите следующие документы:

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

41 <ul><li>Кросс-браузерность.Сайт должен корректно отображаться во всех популярных браузерах, таких как Chrome, Firefox, Safari и Edge. Также важно учитывать кросс-платформенность, чтобы всё одинаково хорошо работало на различных операционных системах: Windows, macOS, Linux, iOS и Android. Это обеспечит единый пользовательский опыт, независимо от устройства или браузера, при помощи которых пользователи заходят на сайт.</li>

42 <li>Соответствие макету.Вёрстка должна точно следовать дизайнерскому макету, включая размеры, отступы и расположение элементов. Несоответствие может нарушить визуальный стиль и сделать сайт неудобным для пользователей. Например, если кнопку расположить слишком близко к другим элементам, её может быть трудно нажимать на смартфонах.</li>

43 <li>Семантичность.Важно использовать семантические теги для описания структуры контента. Например, <header> для заголовков и <nav> для меню. Это делает сайт более удобным для пользователей, так как правильная структура облегчает навигацию и восприятие информации. Также это помогает поисковым системам лучше индексировать и ранжировать страницы.</li>

44 <li>Оптимизация производительности.Сайт должен быстро загружаться даже при слабом или нестабильном интернет-соединении. Для этого верстальщик должен уменьшать размеры изображений, использовать<a>кэширование</a>и минимизировать код. Эти меры помогают улучшить пользовательский опыт и снизить вероятность отказов, когда пользователи покидают сайт из-за долгого времени загрузки.</li>

45 <li>Удобство навигации.Сайт должен иметь понятное меню, логичную структуру и интуитивно понятные элементы управления, чтобы пользователи могли быстро находить нужную информацию.</li>

46 <li>Чистота кода.В коде вёрстки не должно быть лишних элементов и избыточных стилей, чтобы другим разработчикам было легко в нём ориентироваться. Для этого существуют<a>BEM (Block Element Modifier)</a>и другие методологии, которые обеспечивают читаемость кода и облегчают его поддержку.</li>

47 </ul>Схема слева - HTML4: чтобы не запутаться в <div>, разработчикам приходилось добавлять id или class. Схема справа - HTML5: по названию семантических тегов понятно, какую часть сайта они представляютИзображение: Майя Мальгина для Skillbox Media<ul><li>Редакторы кода:<a>VS Code</a>,<a>Sublime Text</a>,<a>Brackets</a>.</li>

48 <li>Валидаторы:<a>Markup Validation Service</a>,<a>HTMLHint</a>,<a>CSS Lint</a>.</li>

49 <li>Фреймворки и библиотеки:<a>Bootstrap</a>,<a>Bulma</a>,<a>Tailwind CSS</a>.</li>

50 <li>Графические редакторы:<a>Figma</a>,<a>Sketch</a>,<a>Pixso</a>.</li>

51 <li>Предпроцессоры для ускорения работы:<a>Sass</a>,<a>LESS</a>,<a>Stylus</a>.</li>

52 <li>Системы контроля версий:<a>Git</a>,<a>GitHub</a>,<a>GitLab</a>,<a>Bitbucket</a>.</li>

53 <li>Инструменты для сборки и автоматизации:<a>Webpack</a>,<a>Gulp</a>,<a>Parcel</a>,<a>Grunt</a>.</li>

54 <li>Сервисы для тестирования:<a>BrowserStack</a>,<a>Selenium</a>.</li>

55 <li>Работа с API:<a>Postman</a>,<a>Insomnia</a>,<a>Swagger</a>.</li>

56 <li>Анализ производительности:<a>GTmetrix</a>,<a>WebPageTest</a>,<a>Pingdom</a>.</li>

57 <li>Инструменты разработчика:<a>Chrome DevTools</a>,<a>Firefox Developer Tools</a>.</li>

58 </ul><ul><li>Проверка SEO:<a>Google Search Console</a>,<a>Ahrefs</a>,<a>Semrush</a>.</li>

59 <li>Прототипирование:<a>InVision</a>,<a>Marvel</a>.</li>

60 <li>Библиотеки и иконки:<a>Font Awesome</a>,<a>Material Icons</a>.</li>

61 <li>Генераторы и конвертеры изображений:<a>TinyPNG</a>,<a>ImageOptim</a>,<a>CloudConvert</a>,<a>iLoveIMG</a>.</li>

62 <li>Сервисы для работы со шрифтами:<a>Google Fonts</a>,<a>Adobe Fonts</a>,<a>Font Squirrel</a>,<a>DaFont</a>.</li>

63 </ul><a>Практический курс: "Веб-вёрстка" Узнать о курсе</a>