post image

Что такое HTML верстка сайта?

Время на чтение: 10 минут
author avatr Валерий Жур,
CTO ITprofit

Разработка сайта  —  трудоемкая задача, состоит которая из нескольких этапов. Одним из них является прототипирование или прорисовка структуры ресурса. И уже на этой основе создается макет веб-страниц, который в дальнейшем верстается.  Что такое 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. 

Виды верстки

Чтобы не усложнять вопрос разными устаревшими подходами к верстке можно выделить следующие основные типы:

  1. Полностью адаптивная —  это значит, что сайт будет корректно и продуманно отображаться на всех существующих устройствах. К примеру от 320 до 4к (в этом диапазоне все самые популярные размеры). 
  2. Частично адаптивная  — это когда индивидуально проработана только часть размеров, а часть разрешений имеет какой-то общий вариант отображения. Например, отображение верстки на больших мониторах 4К+ с большими белыми бортами по бокам.
  3. Устаревшая. Тут можно назвать множество вариантов, подходов, но всех их объединяет следующее:
  • Плохое отображение в современных дисплеях и браузерах.
  • Содержание огромного количества ошибок валидаторов.
  • Плохие показатели скорости загрузки.
  • Удалить и написать страницу с нуля проще, чем существенно ее доработать.

Когда верстка считается правильной

Есть множество правил, соблюдать которые обязательно следует при верстке сайта html  с нуля: 

  • Соответствие макету до единого пикселя
  • Понятный и “чистый” код, соответствующий W3C стандартам 
  • Вынос JS в отдельный файл
  • Структурированные заголовки, абзацы
  • Сохранение пропорций элементов на разных расширениях  
  • Корректное отображение во всех браузера и на всех устройствах
  • Богатая разметка семантическими тегами   
  • Высокая скорость загрузки по Google Speed Test

Соблюдение их позволит обеспечить качественную работу ресурса, а также облегчит понимание кода другим специалистам. 

Сложности верстки 

HTLM верстка это

  • Непонимание процесса. Нестандартные решения воплощать непросто. В связи с этим  дизайнер  должен  уметь сопоставлять идеи и возможности для их реализации.
  • Отсутствие стандарта. В разных браузерах отображаться элементы могут по-разному, поэтому нужно учитывать этот факт. 
  • Адаптация отдельных элементов. Некоторые типы анимации могут не поддерживаться устройствами, поэтому выбор нестандартных решений   может вызвать сложности.

Инструменты для верстки сайта

Классифицируют их  в зависимости от возможностей и функционала на текстовые, визуальные, гибридные программы. 

Вот основные инструменты, с которыми работает верстальщик. 

  • Редактор кода. Sublime text, PhpStorm, Visual Studio.
  • Программы для работы с изображениями. Например,Adobe Photoshop, Figma.
  • Веб-сервис для совместной разработки — GitHub.

Подбираются инструменты в зависимости от необходимых функций, а также предпочтений специалиста. 

Как проверить вёрстку сайта

HTML верстка

После выполнения верстки требуется ее протестировать. Проверка состоит из следующих этапов:

  • Соответствие макету.
  • Проверка кроссбраузерности. 
  • Обнаружение ошибок кода.
  • Валидация HTML и CSS.  
  • Проверка адаптивности. 
  • Оценка скорости загрузки. Она не должна превышать 2 секунды.  О том, как увеличить скорость загрузки сайта мы писали ранее. 
  • Проверка шрифтов. Осуществляется тестирование отображения шрифтов  для разных ОС. 
  • Проверка ссылок.
  • Качество контента. Отсутствие орфографических и грамматических ошибок. 

Для тестирования используются разные сервисы, программы. Если все работает корректно, то ресурс отдается тестировщику для выявления ошибок и недочетов в его работе.