Блокова верстка тегів div html

Ще якихось десять років тому в рунеті найбільш часто використовувалася так звана табличная верстка. З огляду на те що стандарти деяких браузерів значно відрізнялися один від одного, доводилося шукати рішення, яке б дозволило правильно відобразити інтернет-документ у всіх додатках. Але час минав, розвивалися стандарти, і на зміну досить жорсткою і негнучкою табличній прийшла добре змінна і чуйна блокова верстка. У основі такої технології лежить принцип використання елементів

. HTML-документи в більшості своїй почали будуватися на основі окремих блоків, які, на відміну від табличної верстки, можуть бути незалежними один від одного.

виникнення

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

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

Стандарти та перевірка

тег

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

Теги

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

без супроводу класом або ідентифікатором практично не зустрічається. Це обумовлено «безликостью» елемента. Якщо йому не привласнити клас, то в підсумку все контейнери будуть мати ідентичну конфігурацію.

Для того щоб створити дійсно правильний документ, необхідно використовувати наступну структуру тега

class = "якесь то_імя». Звертаючись по імені класу, в таблицях стилю можна визначити положення, розмір, підведення і інші параметри окремого блоку в документі.

Використання класів і ідентифікаторів

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

блок

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

Відео: Tutorial HTML ~ Відео урок HTML блоки Тег div і span Блокова верстка

Природно, блокова структура документа зовсім не має на увазі використання тільки одних тегів

. У структурі будь-який інтернет-сторінки завжди будуть і інші елементи. Крім того, сам по собі блоковий елемент

може мати зовсім інший вигляд відображення. Робиться це за допомогою властивості display. Елемент може мати рядкове або навіть табличное відображення, що дозволяє значно збільшити гнучкість використання блоку і створити сайт будь-якої конфігурації.

Відео: HTML5 уроки для початківців | # 13 - Використання тегів div і span

тег
. HTML-властивості

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

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

Так як даний елемент є блоковим, то вміщений у нього контент буде починатися з нового рядка. Для зміни такої поведінки необхідно змінити параметри відображення блоку властивістю display. Крім групування вкладених елементів, тег

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

позиціонування блоків

Використання атрибуту position дозволяє змінити метод позиціонування обраного елемента. Так, існує три типи позиціонування:

Статична (static) - використовується за умовчанням. У цьому випадку елемент розташовано згідно з позицією в HTML-коді.
Відносне (relative). В даному випадку розташування об`єкта розраховується так само, як і у випадку зі статичним позиціонуванням, але ця властивість дозволяє змінювати позицію для дочірніх елементів.
Абсолютна (absolute). Положення його розраховується щодо елемента з відносним позиціонуванням.

інші атрибути

Для зміни позиції щодо точки початку координат використовуються атрибути top і left. Значення можуть бути як позитивними, так і негативними. Ширина і висота блочного елемента задається атрибутами width і height відповідно. Якщо вони не були вказані в таблицях стилів, то блок буде займати всю ширину батьківського елемента. Якщо контент блоку не поміщається по всій ширині «батька», то тоді поведінку елемента визначається атрибутом overflow.

Сподіваємося, дана стати допомогла розібратися з питанням про те, що таке

в HTML.

Поділися в соц мережах:

Увага, тільки СЬОГОДНІ!