Всё, что можно увидеть, заходя в браузер и набрав в адресной строке поисковый запрос, так или иначе в своей сути представляет из себя html-страницу. HTML – это язык разметки, с помощью которого представлены все визуальные элементы сайта относительно друг друга. Процесс размещения этих элементов и задание их характеристик называется вёрсткой, а специалист, который занимается вёрсткой – верстальщик.
Как устроен процесс вёрстки?
Современный процесс вёрстки ушёл далеко вперёд уже по сравнению с тем, что было к примеру, 10 лет назад. Стоит ли говорить о том, что на этапе своего формирования, когда интернет только зарождался, веб-средства имели совсем другую выразительность и отвечали иным требованиям.
Постепенно стандарты html-страниц менялись, появлялись новые сопутствующие технологии, стремительно конкурируя, дополняя и смещая друг друга. Однако важно понимать, что всё, что с точки зрения программирования считается “устаревшим”, не исчезает бесследно, а лишь уходит на второй план. В особенной степени это касается веб-разработки.
Не существует некоего унифицированного способа вёрстки, ибо имеются десятки альтернативных способов это сделать, используя различные программные приложения, или вовсе обходясь без них, используя лишь средства самого html. Да и сам html, помимо того, что имеет несколько версий себя самого, является не конкретным языком, а скорее семейством языков разметки, куда входят такие языки как xhtml, xht, xml. В конечном счёте всё зависит от задачи и целей проектировщиков и разработчиков.
К примеру, html-страницу можно создать у себя на рабочем столе, указав имя файла и назначив ему расширение html. Далее, используя теги разметки – основные инструкции для интерпретаторов браузера по отображению страниц, можно сверстать простенькую страничку, на которой будут размещены все основные элементы.
Однако прежде чем это делать, нужно узнать, какие теги для вёрстки являются “валидными”, то есть актуальными на текущий момент, а какие отошли на второй план и могут не поддерживаться современными браузерами. И напротив, если есть желание оставить сайт доступным для большинства браузеров, в том числе устаревших, возможно не стоит внедрять всё самое новое и продвинутое.
Однако сейчас никто не использует html в “голом” виде, так как к примеру для указания дополнительных атрибутов html-элементов, например их положение или визуальные характеристики, давным-давно используется CSS – каскадная таблица стилей. Иными словами, само существование элемента обозначается в html-файле, а уже его свойства задаются в CSS файле, на который впоследствии будет ссылаться html.
Так выглядит код html, при помощи которого создают интернет ресурсы.
Фактически, работа с CSS и подразумевает вёрстку, однако сам CSS тоже неоднороден, имеет несколько стандартов, а потому, и подходов к вёрстке. К примеру, можно верстать устаревшим float, а можно использовать более продвинутую блочную вёрстку, либо зайти ещё дальше и использовать CSS grid. Однако, и это не всё, так как в скором будущем ожидается появление нового CSS-стандарта, что, очевидно, опять внесёт свои коррективы по работе с вёрсткой.
Также стоит упомянуть различные программные интерфейсы, автоматически генерирующие, либо автоматизирующие работу по корректированию как html, так и css-файлов. К примеру, на программном уровне, это могут быть фреймворки, например, как bootstrap. На более поверхностном уровне могут использоваться даже CMS, например word press, где работа со страницей происходит опосредованно с помощью средств самой CMS, при её запуске.
Важной деталью вёрстки является макет – визуальный образ сайта, созданный в графическом редакторе, относительно которого специалист-верстальщик “примеряет” все элементы, настраивая их внешний вид и расположение. Работу над макетом ведут веб-дизайнеры, после чего отдают в обработку верстальщику.