Що таке «верстка div» при створенні сайту, її плюси і мінуси

Сьогодні Інтернет є частиною нашого життя. Звичайні його користувачі навряд чи замислюються над тим, який шлях становлення пройшов їх улюблений сайт перш, ніж з'явився в пошукових системах всесвітньої павутини. Народження сайту починається з задумки дизайнера - художника і людини, що займається створенням основного макета. Після того, як малювання макета повністю завершено, починається не менш важливий процес - верстка шаблону сайту.

Шаблон або макет - це ще не готовий сайт, це якась створена дизайнером модель, на основі якої в подальшому може бути створений повноцінний сайт. З точки зору програмування, шаблон - це набір певних правил для відображення інформації. Для створення найбільш простого статичного сайту зазвичай використовується HTML-шаблон. HTML є стандартною мовою розмітки гіпертексту (документів) в мережі Інтернет.

Верстка макета сайту - це процес формування його веб-сторінок по виготовленому дизайнером шаблоном. Даним видом діяльності займається верстальщик сайтів. Основне завдання верстальника полягає у створення HTML-коду, який дозволяє розміщувати текст, зображення та інші елементи веб-сторінки в певних місцях документа і відображати їх у вікні будь-якого сучасного Інтернет-браузера згідно з розробленим дизайнером макету. Під час своєї роботи верстальник повинен постійно стежити за тим, щоб зверстана їм частину макета однаково коректно відображалася у всіх браузерах. Кількома роками раніше HTML-верстка сайту грунтувалася на використанні таблиць. З часом в мові HTML з'являються нові елементи (теги). Одним їх таких елементів став div. Якщо протягом останніх років верстка div була найбільш краща при створенні сторінок сайту, сьогодні вона є обов'язковою. В даний час за допомогою таблиць сайти практично не верстаються. Замість поняття «верстка div» найбільш часто вживається поняття «верстка шарами» або «верстка блоками».

Div - це тег, за допомогою якого може бути виділений окремий фрагмент HTML коду сторінки. Даний тег є блоковим елементом.

Тег div має два основних параметри:

• Align, що дозволяє вирівнювати його вміст (по лівому, правому краю сторінки, по центру або по ширині) ;
• Title, який додає підказку до його вмісту.

Верстка div: основні плюси:

• невеликий у порівнянні з табличній версткою код разметкі;
• можливість створення «гумового» дизайну сторінки;
• швидка в подальшому завантаження сторінок в браузері користувача;
• полегшення роботи зі стилями (CSS), привласнення стилю елементів за допомогою id.

Верстка div: основні мінуси:

• неможливість правильного відображення сторінки в деяких застарілих браузерах (IE6) ;
• складність розміщення блоків на сторінці і управління ними.

Залежно від створюваного проекту допускається поєднання блокової і табличної верстки.

Чому в даний час більшість професіоналів відходить від використання таблиць при верстці?

У разі застосування табличної верстки сайту його код виходить величезним, що ускладнює подальшу роботу над ним програмістів. Для того щоб знайти зроблену в такому HTML-коді помилку, знадобиться порівняно велика кількість часу. Таблична верстка створює додаткове навантаження на веб-сервер, тим самим сповільнюючи його роботу, а значить, сповільнюючи процес видачі інформації браузером. В результаті сторінка сайту досить довго завантажується.

Верстка сайту є важливим етапом його створення, без неї не обходиться жоден, навіть найпростіший, Інтернет-ресурс. Після того, як робота верстальника завершена, зверстаний макет відправляється в руки веб-програмістів, що забезпечують його інтеграцію на хостинг і впровадження в CMS-систему, на якій він і буде перебувати під час свого існування.