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

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

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

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

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

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

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

Відео: Відео урок: HTML-блоки. Тег div і span. Блокова верстка. # 24

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

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

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

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

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

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

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

Відео: Вивчаємо тег div і класи в html - Уроки html css на cleverbear.ru

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