Koval
Web
Production

Верстка сайта и ее виды

14 сентября, 2020
Время чтения 5 мин.
Читать статью

В 2020 в мире около 1.74 миллиарда зарегистрированных вебсайтов. Только представьте эту цифру. Все они существуют благодаря верстке. Что такое верстка сайта и какая верстка соответствует требованиям современного мира, читайте дальше.

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

Коротко? Это создание веб-страниц. Подробнее? Вы объясняете браузеру, что изображено на макете, который предоставил дизайнер. Не описываете увиденное словами или показываете жестами, а объясняете на языке, который понимают браузеры. Это написание понятного для веббраузера кода.

Объяснить браузеру, что он должен изобразить картинку 200х200, заголовок синего цвета, а при наведении курсора на контакты — появиться диалоговое окно, можно с помощью:

  • HTML
  • CSS
  • JavaScript

HTML

Верстка начинается с HTML. Это язык разметки гипертекста, состоящий из тегов, с помощью которых можно добавить:

  • структурированный текст, который содержит заголовки, цитаты, списки, таблицы;
  • интерактивные объекты;
  • гиперссылки;
  • видео, картинки, звук.

Тег это символ, определяющий особенность текста. Благодаря тегам, браузерам предоставляется команда, как воссоздать определенный фрагмент информации.

С помощью гипертекстовой разметки не только наполняют вебсайт, но и придают ему смысл. Это называют — семантическая верстка. Используя теги вы объясняете браузеру, где в тексте заголовок (h1, h2 … h6), где цитата (<blockquote>), а где список (<ul>, <ol>). Так он понимает, о чем идет речь и во время запросов в поисковой системе, будет выдавать пользователю информацию, которую тот искал.

CSS — тюнинг сайта

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

JavaScript

Ваш сайт — актер, а код написан на JavaScript — сценарий, который он должен прочитать и в соответствии с ним играть роль. Вы прописываете, когда и как, элементы веб-ресурса изображаться на экране. Это взаимодействие, тип «поведения» сайта с пользователем.

JS используют в фронтенд-разработке (создание удобного взаимодействия пользователя с сайтом), но если проект небольшой, верстальщики тоже пользуются JavaScript.

Виды верстки сайта

За процессом реализации:

1. Табличная верстка

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

Создается основная таблица, которая делится на ячейки, где размещаются другие таблицы. Коротко, таблицы в таблицах. Тавтология, но в ней вся суть такого типа создания веб-страниц. И если для проектирования сложных задач — это пережиток, то для электронных писем — лучший вариант.

2. Блочная

Здесь все просто. Все части страницы делятся на блоки (шапка, сайдбар, футер), их основа — контент. При такой верстке код получается компактный и хорошо индексируется (поисковые роботы прекрасно понимают чем наполнен ресурс).

По типу отображения:

1. Адаптивная

Хамелеон в интернет-пространстве. Около 50% вебтрафика поступает с мобильных устройств, остальные 50% пользователи компьютеров. Кого предпочтете? Разумно найти оптимальное решение. Этим решением является адаптивная верстка. Это означает, что сайт прекрасно подстраивается под различные размеры экранов на устройствах. Отгадайте загадку: «Зимой и летом, на планшете и на iphone, выглядит красиво?» Правильно. Адаптивный сайт.

2. Резиновая верстка

Сайт, как жвачка, при необходимости можно растянуть. Но, что много, то не здорово. Качество картинки может портиться, текст становиться нечитаемым, а пользователь разочарованным. Старайтесь достичь идеала!

3. Фиксированная

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

Вы перфекционист, пока не идеально, значит не готово?

Тогда знайте, что верстка должна:

  • Обеспечивать быструю загрузку страницы. Жизненно необходимо, чтобы пользователь попал на сайт и не покинул его преждевременно. Как известно, большинство людей готовы ждать загрузки менее 3-х секунд.

Также этот фактор учитывают поисковые системы при ранжированию.

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

Что нужно знать для верстки сайтов?

1. HTML і CSS

Для простого сайта этого будет достаточно. Но готовьтесь к высокой конкуренции и относительно небольшой зарплате. Если вы амбициозный и стремитесь максимально реализовать свой потенциал, то ваш путь в фронтенд-разработчики (программисты, работающие с интерфейсом для пользователя). Для этого понадобится язык программирования JavaScript.

2. Английский язык

Можно работать веб разработчиком без знаний английского, но так сложнее.
Во-первых. Языки программирования чаще всего созданы на английском и вам придется зазубривать все значения. Это повлияет и на качество, и на скорость.
Во-вторых. Частыми заказчиками являются зарубежные пользователи. Понадобится посредник.
В-третьих. Помощь при возникновении трудностей легче найти на английском.

3. Разбираться в программах для верстки сайтов. Их можно разделить:

  • для работы с макетом. Часто это — Photoshop. Также активно используют Figma, InVision — эти программы онлайн и они очень популярны.
  • для написания кода: Sublime Text, VS Code, Atom и др. Лучше потестировать несколько и выбрать для себя лучший вариант. Так вы сможете подстроить процесс под свои нужды и быстрее писать код.

Итак, верстка — этап создания сайта, на котором с помощью гипертекстовой разметки (HTML) и каскадных таблиц стилей (CSS) размещаются элементы веб-страниц и задаются параметры, по ее воспроизведению в браузере. Результат должен соответствовать макету, быстро загружаться, хорошо выглядеть во всех браузерах и размерах экрана. Верстальщики, которые хотят иметь довольных клиентов и постоянную работу, должны создавать сайты, соответствующие этим требованиям.