Изначально, такой термин, как «верстка» применялся к газетам, журналам, книгам и другой полиграфической продукции. Он означал размещение таблиц, абзацов, отступов так, чтобы читателю было максимально удобно распознавать текст. Позднее, с развитием интернета, термин перешел в пользование веб-разработчиков. Появилась даже такая, профессия, как верстальщик.
Иными словами, верстка – это разметка всех элементов, заголовков, изображений и основного контента на странице. Верстальщик должен максимально четко располагать на странице различную информацию, используя для этого язык HTML.
Разработка сайта делится на два основных вида:
- Back-end;
- Front-end.
HTML-верстка – это термин, относящийся к сфере Front-end, основа визуального восприятия сайта, единый стандарт разметки элементов.
Этот язык состоит из тегов, наиболее популярные из них:
- body – тег для основного содержимого страницы;
- h1 – тег для заголовков;
- h2-h6 – теги для подзаголовков;
- img – тег для изображений;
- strong – тег для жирного шрифта;
- a – тег, для ссылки на другой ресурс, для него требуется вспомогательный тег href.
Инструменты, нужные для верстки
Чаще всего, верстальщику нужен только редактор, для работы с кодом. Однако, базовые навыки работы в графическом редакторе тоже не повредят. Как правило, дизайнер передает верстальщику уже готовый макет сайта, а верстальщик располагает элементы в нужных местах.
Наиболее популярный и функциональный редактор – Webstorm. Выбор редактора зависит от предпочтений специалиста.
Проверка верстки
Сайт должен быть заверстан в абсолютном соответствии с макетом. Расхождения в разметке, пикселях, колонтитулах и других элементах можно проверить с помощью различных бесплатных инструментов.
Rage Ruler – служит как линейка, для измерения блоков и других элементов в пикселях.
Window Raizer – расширение браузера, которое помогает дизайнерам и верстальщикам проверить адаптацию сайта под различные экраны.
Основные аспекты, которые можно проверить без инструментов:
- Каждый тег должен быть закрыт, закрывающим тегом;
- Страница отображается в разных браузерах одинаково корректно;
- В коде нет ошибок;
- Теги не содержат знаки кириллицы.
Что такое верстка сайта – это неотъемлемый этап его создания. Любому начинающему владельцу сайта стоит изучить основы HTML, чтобы быть более осведомленным в том, как располагаются элементы на сайте, и как возможно изменить их местоположение.
