Верстка сайта

Что такое верстка

Первым этапом создания сайта (если не рассматривать идеи, прототипирование и др.) является дизайн. Дизайн - это по сути изображение-полотно, графическое представление того, как будет выглядеть сайт. А сайт из себя представляет набор элементов: логотип, контакты, ссылки, изображения и пр. Все эти элементы обычно реагируют на действия пользователя.

Верстка сайта представляет собой разбиение полотна дизайна на такие элементы. Причем эти части помещаются в специальные теги (div, span, img и др.). Например, верстальщик видит на дизайне логотип, сохраняет его в папку, а в коде пишет: <img src="ссылка на логотип">. Работы по верстке как раз и представляет по большей части написание такого кода, когда дизайн превращается в набор тегов.

Сами теги пишутся в определенном порядке. Браузер читает их и на лету создает страницу сайта. Верстка - по сути структурированный по определенным правилам набор тегов, помещенных в блоки. Блоки - тоже теги.

Весь код помещается в родительский тег html. Страница начинается и заканчивается этим тегом. Все что вне его браузер не воспринимает.

Ниже идет тег head. В нем пишется кодировка страницы, информация для поисковых систем (ключевые слова, описание страницы, заголовок). Например на вкладке браузера вы видите надпись: Верстка сайта. Она взята браузером из блока head. Также в этом блоке подключаются js скрипты и css стили, помещается другая служебная информация.

Ниже идет блок body - здесь размещается основное содержание страницы. Body разбивается на множество других тегов: header, main, section, div, footer и т.д. Тегов огромное количество. У каждого из них есть еще атрибуты. Например: ширина, высота, класс, стили, идентификатор и т.д.

Верстку любой страницы можно посмотреть в браузере. Нажимаете правую кнопку мыши, выбираете "Просмотр кода страницы". Также там написаны вспомогательные скрипты и другая информация.

Что важно

1. Вадидность. Правильная верстка должна отвечать перечню правил в стандарте W3C. Для проверки соответствия есть специальный инструмент валидатор - https://validator.w3.org
2. Адаптивность. Cайт должен подстраиваться под размеры экрана устройств. Обычно это: 375, 576, 768, 992, 1200, 1400px
3. Кроссбраузерность. Так как браузеров много, разрабатываются они отдельными организациями и иногда в одном браузере тег обрабатывается одним образом, в другом браузере по-другому или не отображается и т.д. Интернет развивается, придумываются новые теги, браузеры устаревают. Для того, чтобы верстка отображалась без ошибок она должна быть кроссбраузерной. По-русски: совместимой с большинством браузеров.
4. Возможность подстраиваться. Сайт живет. В нем появляются новые статьи, картинки, изменятся размеры элементов и пр. Верстальщик должен заранее предусмотреть, чтобы сайт отображался правильно при изменении содержания страницы. Например можно задать размер блока как width='300px' и min-width='300px'. В первом случае сайт 'сломается', если пользователь добавит текст в блок. Во-втором случае блок растянется без привлечения верстальщика.
5. Скорость загрузки. Писать код нужно грамотно, стараться не подгружать громоздкие библиотеки, картинки сжимать, использовать предзагрузку, эффекты лучше создавать через css и многое другое. Компьютеры сейчас мощные, интернет скоростной, но зачем перегружать сайт там где можно упростить?

Стоимость и сроки верстки сайта

Стоимость верстки -  от 5000 руб. Зависит от сложности, количества страниц, наличия анимации и пр.