Арсений Матыцин - Я верстальщик. Веб-верстальщик

Данный материал предназначен в первую очередь для тех, кто только начал осваивать веб, не знает за какие ниточки потянуть и что сделать, чтобы понять, как это все работает. Не менее полезен материал будет и дизайнерам, которые рисуют макеты и слабо представляют, что с этим потом делает верстальщик.

Скорее, он даже очень нужен, так как давно существует проблема взаимопонимания между дизайнерами и верстальщиками.

В целом данный материала создавался для повышения компьютерной грамотности среди людей хоть как-то связанных с версткой.

Существует несколько видов верстки. Изначально этот термин использовался для обозначения монтажа текста, изображений на макете, который затем переносился на бумагу, и впоследствии, с приходом интернета, версткой стали называть процесс создания гипертекстовой разметки (HTML кода).

Верстка сайта предполагает перенос дизайна макета в формат удобоваримый для браузера. Задача верстки сегодня – создать сайт, который одинаково хорошо будет смотреться на всех устройствах.

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

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

Если ты берешь визитку, то необходимо просто определиться с ее форматом, настроить макет, сверстать и напечатать. На этом процесс можно закончить и переходить к следующему макету.

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

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

Также верстальщика можно называть более конкретно – верстальщик веб-страниц. Не так давно появился термин пришедший извне – frontend-разработчик.

Могу сказать, это мое личное мнение, но то, что должен уметь фронтедщик и якобы хорошо знать верстальщик, все это не серьезно. Просто front-end хорошо сочетается с back-end и имеет оттенок ориентированности не только на веб, но и на приложения.

Основа профессии верстальщика/фронтендщика – грамотность, знание основ, их правильное использование в разных проектах, от верстки одностраничника – до разработки крупного приложения. А также возможность изучать новые технологии для достижения и преодоления новых высот и сложностей.

Ранее создавалось множество версий HTML. Среди них были XHTML, строгий и переходной режим HTML4. Для обозначения используемого стандарта используется доктайп. Следующим образом:

Включен строгий режим стандарта HTML 4.01

Сегодня для верстки сайтов актуален только один формат-стандарт – HTML5. И отлично, что к нему пришли. Самым первым его преимуществом является формат записи стандарта в коде:

Включен режим HTML 5.x

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

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

Как я уже указывал ранее, задача верстальщика – обеспечить оптимальное отображение информации на всех устройствах. Стандарты, создаваемые и опекаемые организацией W3C, призваны служить именно этой цели.

Почему я об этом говорю? Потому что можно заставить браузер отображать верстку и без объявления доктайпа. Даже можно не указывать тег html. И большинство устройств спокойно съедят такой код. Но я очень не рекомендую так делать.

Маленький совет

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

Это сильно устаревшая техника верстки, которую я застал, когда обучался дизайну. Тем не менее нельзя обойти стороной то, из чего выросла технология.

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

Пример кода табличной верстки

Результат обработки кода браузером Edge

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

Тут в строке tr вложить элемент столбца td, который занимает место 5 ячеек.

Эта часть таблицы объединяет в себе 2 ячейки по горизонтали и 4 ячейки по вертикали

А справа →,

в ячейку вложена таблица 5 на 5, которая по умолчанию отбивается от границ ячейки отступами.

Если возникала необходимость добавить одну ячейку во второй строке, то она выбивалась из ряда. Чтобы этого избежать приходилось либо в каком-нибудь столбце указывать объединение по вертикали на одну ячейку больше, либо переделывать сетку на 6 в ширину, или же создавать вложенную таблицу.

Такие манипуляции по склейке ячеек производятся с помощью атрибутов:

colspan – объединение ячеек по ширине

rowspan – объединение ячеек по высоте

Пример: