Баннер мобильный (2) Научиться

Верстка

Словарь

24 марта 2023

Поделиться

Скопировано

Содержание

    Верстка — это описание визуальной части сайта с помощью гипертекстового документа на основе HTML-разметки. Проще говоря, соединение и расположение на странице документа разных элементов веб-сайта: текстовых блоков, изображений, таблиц, видео и т.д.

    Верстка сайта — один из наиболее важных этапов создания интернет-ресурса. От нее зависит:

    • скорость загрузки сайта;
    • корректность его отображения в браузере;
    • соответствие стандартам HTML и требованиям поисковых систем;
    • адаптивность под разные устройства пользователей (планшет, смартфон, ноутбук).

    Верстка относится к сфере frontend-разработки. Она помогает правильно расположить элементы на странице и сделать так, чтобы работать с ними было максимально удобно.

    HTML

    HTML — язык разметки, при помощи которого браузеры показывают нам размер, порядок, шрифт и форму текста. Популярные HTML-теги:

    • <body> </body> — все web-содержимое страницы;
    • <table> </table> — таблица;
    • <h1> </h1> — заголовок;
    • <h2> </h2> — заголовок второго уровня;
    • <img> — изображение;
    • <strong> </strong> — жирный шрифт;
    • <a> </a> — ссылка на сторонний сайт; между тегами необходимо поставить атрибут href, содержащий адрес этой ссылки.

    Виды верстки

    Блочная верстка

    Тег <div> — блочный элемент и обычно используется для группировки крупных элементов. Верстальщик создает в интегрированной среде разработки IDE макет сайта: готовит фоны и изображения, размечает, где какая область (верх, низ, основной контент, боковые панели) будет находиться. Каждая часть страницы размещается в соответствующем блоке <div>.

    Все стилевые решения вынесены за границы HTML-кода в каскадные таблицы стилей (CSS). С ними можно менять цвет, размеры, расположение, границы и другие свойства блоков <div>. В HTML-документе это прописывается так: <div class=”one”></div>, фоновый цвет задается следующим образом: background: red. В итоге получается красный блок. А если нужно ограничить его размер 250 пикселями, то необходимо прописать: width: 250px и height: 250px.

    Валидность верстки

    В программировании валидность означает соответствие кода стандарту W3C (Консорциума Всемирной паутины) и корректное отображение веб-сайта на разных устройствах. Этот показатель обеспечивается соблюдением правил построения кода, его оптимизации и минимизации. Благодаря такой верстке сайт может занять более высокие позиции в поисковой выдаче.

    Чтобы верстка была валидной, нужно как минимум, чтобы элементы HTML-кода содержались в соответствующих разделах. Должен быть прописан элемент !DOCTYPE html, теги <body>, <html>, <head>.

    Несколько полезных советов для быстрой верстки

    Анализируйте макет до начала работы

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

    Научитесь быстро печатать

    Метод слепой печати поможет научиться быстро набирать код, не отвлекаясь от макета и внешнего вида веб-сайта в браузере.

    Выберите и настройте среду разработки

    Писать HTML-код можно в любом редакторе кода, даже в «Блокноте», но это долго и неэффективно. Верстальщик может установить IDE (интегрированную единую среду разработки, которая используется разработчиками для создания проекта). От «Блокнота» она отличается массой возможностей: наличием встроенного проводника, подсветкой синтаксиса, управлением форматированием кода, возможностью работы с Git (инструментом, позволяющим фиксировать изменения в коде) и пр.

    Используйте популярные плагины в редакторе кода

    Emmet — позволяет использовать сокращения кода вместо ручного ввода целых конструкций.

    AutoFileName — поможет быстро найти файлы в папке проекта прямо при добавлении пути в атрибут src.

    eCSStractor — с помощью него можно выделить участок HTML-кода с написанными классами и вставить в CSS-код готовые селекторы. В результате вам больше не придется писать в CSS селекторы — только нужные свойства.

    Используйте методологию Яндекса БЭМ — блок-элемент-модификатор

    С помощью нее можно создавать расширяемые и повторно используемые компоненты интерфейса. В результате вам больше не потребуется тратить время на придумывание названий классов или того, как элементы будут зависеть друг от друга.

    Используйте препроцессор — надстройку над привычными языками (CSS и пр.)

    Препроцессор Sass помогает в организации кода, избавляет от написания селектора каждый раз с новой строки, позволяет сократить код и вынести одинаковые реализации.

    Используйте сборщики проекта

    Они выполнят то, что разработчику не хочется делать руками и что отнимает много времени. Например, Gulp позволяет:

    • автоматически обновлять страницу браузера при сохранении кода;
    • расставлять префиксы для поддержки разных браузеров;
    • автоматически собирать все файлы в один;
    • создавать SVG-спрайты.

    Признаки правильной верстки

    • Структура страницы составлена в HTML, параметры стилей присвоены в отдельном CSS.
    • Использовано небольшое количество изображений. Все по максимуму прописано текстом или кодом.
    • Верстка корректно отображается при разных разрешениях во всех популярных браузерах: Chrome, Opera, Firefox, Safari.
    • Атрибуты элементов <title>, <alt>, <description> корректно заполнены.
    • Использованы заголовки разных уровней (h1, h2, …, h6).

    Инструменты верстальщика

    • Программы для тестирования: Markup Validator, CrossBrowserTesting, IETester, Dr Watson, Validator.w3, CSS Validator.
    • Программы для работы с изображениями: Photoshop, Krita, Gimp и пр.
    • Редакторы кода: VS Code, Webstorm, Notepad++, SublimeText, Webstorm, CSS3 Generator, UltraEdit, Firebug, Winless, CoffeeCup HTML Editor, WinMerge.

    Проверка верстки

    Процесс базового тестирования предполагает ручные прогоны сценариев в разных браузерах и на разных устройствах. В этих сервисах можно найти точную информацию: validator.w3.org и jigsaw.w3.org/css-validator. Также нужно проверить верстку на соответствие макету с помощью сервиса welldonecode.com/perfectpixel. Page Ruler поможет измерить в пикселях сверстанные блоки, оценить размеры форм, шапок, логотипов, контактных данных, карточек, рубрик, виджетов и пр.

    Чтобы научиться правильно верстать, лучше не искать простые пошаговые алгоритмы для чайников, а записаться на полноценный обучающий курс, например, «Frontend-разработчик».

    Поделиться

    Скопировано

    0 комментариев

    Комментарии