Верстка сайту і її види

Час читання 5 хв.
Читaти статтю

В 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) розміщуються елементи вебсторінок і задаються параметри, щодо її відтворення в браузері. Результат повинен відповідати макету, швидко завантажуватися, гарно виглядати в усіх браузерах і розмірах екрану. Верстальники, які хочуть мати задоволених клієнтів і постійну роботу, мають створювати сайти, що відповідають цим вимогам.