Разработка сайта — трудоемкая задача, состоит которая из нескольких этапов. Одним из них является прототипирование или прорисовка структуры ресурса. И уже на этой основе создается макет веб-страниц, который в дальнейшем верстается. Что такое HTML верстка сайта?
HTML верстка — это перевод изображения на понятный браузеру язык (HTML, CSS, JS). Для того, чтобы макет превратился из картинки в рабочий инструмент, требуется запрограммировать каждый элемент страницы: каждую строку, картинку, отступ или форму, создать код, который сможет прочитать любой современный браузер. Дизайн и верстка сайта — два “неразлучных” этапа при разработке проекта. У дизайнера задача нарисовать макет, а вот верстальщик должен оживить его.
Что включает в себя верстка сайта?
Верстать — значит создавать структуру всех элементов ресурса по уже подготовленному макету. Даже малейшая ошибка может привести к тому, что веб-сайт будет работать нестабильно или перестанет функционировать. Именно поэтому верстку, как и весь процесс создания сайта с нуля, стоит доверять только профессионалам.
Существует 2 типа разработчиков:
- Front-end — работает над внешней частью ресурса. Это верстка, создание макета и шаблонов для сайта, пользовательского интерфейса.
- Back-end — выполняет работу на стороне сервера. Создает ядро сайта, платформу, функционал и административную часть.
Верстка основывается на языке разметки HTML. Работа с ним заключается в прописывании тегов. Вот самые частые из них:
<body> </body> | Внутри них размещается содержимое страницы. |
<h1….2…3.> </h1..2..3> | Заголовки на сайте. 1- главный заголовок, 2, 3, 4 — для навигации по странице. |
<p> </p> | параграф |
<i> </i> | шрифт курсивом |
<strong> </strong> | жирный шрифт |
<ul> </ul> | маркированный список |
<ol> </ol> | список с нумерацией |
<img> | изображение |
<a> </a> | гиперссылка |
<table> </table> | таблица |
Верстальщик также выполняет следующие задачи:
- Настраивает приоритетность загрузки элементов страницы
- Подключает анимацию на сайте
- Пишет логику сайта / приложения, которая отрабатывает на фронте, используя язык программирования JS.
Виды верстки
Чтобы не усложнять вопрос разными устаревшими подходами к верстке можно выделить следующие основные типы:
- Полностью адаптивная — это значит, что сайт будет корректно и продуманно отображаться на всех существующих устройствах. К примеру от 320 до 4к (в этом диапазоне все самые популярные размеры).
- Частично адаптивная — это когда индивидуально проработана только часть размеров, а часть разрешений имеет какой-то общий вариант отображения. Например, отображение верстки на больших мониторах 4К+ с большими белыми бортами по бокам.
- Устаревшая. Тут можно назвать множество вариантов, подходов, но всех их объединяет следующее:
- Плохое отображение в современных дисплеях и браузерах.
- Содержание огромного количества ошибок валидаторов.
- Плохие показатели скорости загрузки.
- Удалить и написать страницу с нуля проще, чем существенно ее доработать.
Когда верстка считается правильной
Есть множество правил, соблюдать которые обязательно следует при верстке сайта html с нуля:
- Соответствие макету до единого пикселя
- Понятный и “чистый” код, соответствующий W3C стандартам
- Вынос JS в отдельный файл
- Структурированные заголовки, абзацы
- Сохранение пропорций элементов на разных расширениях
- Корректное отображение во всех браузера и на всех устройствах
- Богатая разметка семантическими тегами
- Высокая скорость загрузки по Google Speed Test
Соблюдение их позволит обеспечить качественную работу ресурса, а также облегчит понимание кода другим специалистам.
Сложности верстки
- Непонимание процесса. Нестандартные решения воплощать непросто. В связи с этим дизайнер должен уметь сопоставлять идеи и возможности для их реализации.
- Отсутствие стандарта. В разных браузерах отображаться элементы могут по-разному, поэтому нужно учитывать этот факт.
- Адаптация отдельных элементов. Некоторые типы анимации могут не поддерживаться устройствами, поэтому выбор нестандартных решений может вызвать сложности.
Инструменты для верстки сайта
Классифицируют их в зависимости от возможностей и функционала на текстовые, визуальные, гибридные программы.
Вот основные инструменты, с которыми работает верстальщик.
- Редактор кода. Sublime text, PhpStorm, Visual Studio.
- Программы для работы с изображениями. Например,Adobe Photoshop, Figma.
- Веб-сервис для совместной разработки — GitHub.
Подбираются инструменты в зависимости от необходимых функций, а также предпочтений специалиста.
Как проверить вёрстку сайта
После выполнения верстки требуется ее протестировать. Проверка состоит из следующих этапов:
- Соответствие макету.
- Проверка кроссбраузерности.
- Обнаружение ошибок кода.
- Валидация HTML и CSS.
- Проверка адаптивности.
- Оценка скорости загрузки. Она не должна превышать 2 секунды. О том, как увеличить скорость загрузки сайта мы писали ранее.
- Проверка шрифтов. Осуществляется тестирование отображения шрифтов для разных ОС.
- Проверка ссылок.
- Качество контента. Отсутствие орфографических и грамматических ошибок.
Для тестирования используются разные сервисы, программы. Если все работает корректно, то ресурс отдается тестировщику для выявления ошибок и недочетов в его работе.