Шрифт:
Введение
Для кого
Данный материал предназначен в первую очередь для тех, кто только начал осваивать веб, не знает за какие ниточки потянуть и что сделать, чтобы понять, как это все работает. Не менее полезен материал будет и дизайнерам, которые рисуют макеты и слабо представляют, что с этим потом делает верстальщик.
Скорее, он даже очень нужен, так как давно существует проблема взаимопонимания между дизайнерами и верстальщиками.
В целом данный материала создавался для повышения компьютерной грамотности
Что такое верстка
Существует несколько видов верстки. Изначально этот термин использовался для обозначения монтажа текста, изображений на макете, который затем переносился на бумагу, и впоследствии, с приходом интернета, версткой стали называть процесс создания гипертекстовой разметки (HTML кода).
Верстка сайта предполагает перенос дизайна макета в формат удобоваримый для браузера. Задача верстки сегодня – создать сайт, который одинаково хорошо будет смотреться на всех устройствах.
Будем откровенны, задача не из легких и, порой, в принципе неосуществима. Все дело в том, что устройства разные, разработчики железа постоянно что-то меняют, создают новое [иначе бы не было прогресса], но верстальщику из-за этого приходится подстраиваться. Не считая того, что технологии и стандарты верстки тоже постоянно дополняются и меняются. О концепциях и подходах поговорим позже.
В чем отличие от типографской верстки
Когда ты работаешь со статическим, аналоговым носителем, таким как бумага, ты знаешь наверняка, как будет выглядеть верстка в конечном счете.
Если ты берешь визитку, то необходимо просто определиться с ее форматом, настроить макет, сверстать и напечатать. На этом процесс можно закончить и переходить к следующему макету.
Как я указал выше – в вебе никогда не можешь быть уверен наверняка, с какого устройства пользователь посмотрит на плоды твоей работы.
Кто такой верстальщик
Термин верстальщик идет из типографии, где представитель профессии набирал полосы в соответствии с созданным макетом. В принципе, в плане веб, ничего не изменилось, просто поменялись инструменты, и верстальщик стал работать по сути только с текстом. Теперь же, вместо бумаги результат работы видят в браузере.
Также верстальщика можно называть более конкретно – верстальщик веб-страниц. Не так давно появился термин пришедший извне – frontend-разработчик.
Могу сказать, это мое личное мнение, но то, что должен уметь фронтедщик и якобы хорошо знать верстальщик, все это не серьезно. Просто front-end хорошо сочетается с back-end и имеет оттенок ориентированности не только на веб, но и на приложения.
Основа профессии верстальщика/фронтендщика – грамотность, знание основ, их правильное использование в разных проектах, от верстки одностраничника – до разработки крупного приложения. А также возможность изучать новые технологии для достижения и преодоления новых высот и сложностей.
Стандарты
Ранее создавалось множество версий HTML. Среди них были XHTML, строгий и переходной режим HTML4. Для обозначения используемого стандарта используется доктайп. Следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Включен
строгий режим стандарта HTML 4.01Сегодня для верстки сайтов актуален только один формат-стандарт – HTML5. И отлично, что к нему пришли. Самым первым его преимуществом является формат записи стандарта в коде:
<!DOCTYPE html>
Включен режим HTML 5.x
Ко второму преимуществу можно отнести семантику. Верстать можно и просто с использованием div-ов. Визуально никакой разницы, вот только в верстке важно не только как это выглядит. Очень важно, чтобы ваш код был семантически корректно сверстан. Это облегчит будущее существование сайта на просторах интернета.
Впрочем, если вы верстаете какое-нибудь веб-приложение, удел которого быть закрытым продуктом, то семантической версткой можно пренебречь.
Почему стоит следовать стандартам
Как я уже указывал ранее, задача верстальщика – обеспечить оптимальное отображение информации на всех устройствах. Стандарты, создаваемые и опекаемые организацией W3C, призваны служить именно этой цели.
Почему я об этом говорю? Потому что можно заставить браузер отображать верстку и без объявления доктайпа. Даже можно не указывать тег html. И большинство устройств спокойно съедят такой код. Но я очень не рекомендую так делать.
Маленький совет
Этим правилом, писать по стандартам, можно пренебречь, если вам необходимо, скажем, отдельно от всего сделать верстку таблицы, которую в дальнейшем вам необходимо вставить в код.
Табличная верстка
Это сильно устаревшая техника верстки, которую я застал, когда обучался дизайну. Тем не менее нельзя обойти стороной то, из чего выросла технология.
Раньше, чтобы расположить элементы в строку рядом друг-с-другом применялись таблицы. Вот пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<table width="300" border>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
Пример кода табличной верстки
Результат обработки кода браузером Edge
Сложность такого метода заключалась в том, что невозможно было обойтись без пространственного понимания сетки. Если вы создавали сетку 5 на 5, то вынуждены были следовать ее логике, чтобы разместить информацию внутри. Или создать еще одну таблицу внутри. Принципы табличной верстки хорошо демонстрируются на примере обычной таблицы в редакторе.
Тут в строке tr вложить элемент столбца td, который занимает место 5 ячеек.