Вивчаємо теги div і span

Здрастуй, шановний читачу.

Це дванадцятий заключний урок вивчення html, в якому ви дізнаєтеся про дуже корисні блоки на сторінці, без яких було б неможливо працювати і верстати шаблони для сайтів, про теги DIV і SPAN.

Перед прочитанням даного уроку рекомендую пройти попередні уроки:

Урок 1. Що таке html?
Урок 2. Частини, заголовки
Урок 3. Списки
Урок 4. Зображення
Урок 5. Посилання. Частина 1
Урок 5. Посилання. Частина 2
Урок 6. Атрибути
Урок 7. Таблиці
Урок 8. Виділення тексту
Урок 9. Форми. Частина 1
Урок 9. Форми. Частина 2
Урок 10. Метатеги
Урок 11. Коментарі

Теорія та практика

В основному з даних двох тегів будується вся html сторінка. Після того як ви зрозумієте що можна робити з цими тегами, ви не будете знати як обходилися раніше без них. Один по одному про кожного з цих тегів.

тег div

Тег div є блоковим елементом, який призначений для виділення фрагмента документа і потім зміною його вмісту.

У коді html він виглядає наступним чином:

12345678910111213141516171819202122

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;/headgt;lt;bodygt;lt;div id="Header"gt;lt;h1gt; Анкетаlt;/h1gt;lt;/divgt;lt;div id="Content"gt;lt;div class="Sidebar"gt;lt;ulgt;lt;ligt; Головнаlt;/ligt;lt;ligt; Про автораlt;/ligt;lt;ligt; Різнеlt;/ligt;lt;/ulgt;lt;/divgt;lt;pgt; Основний текстlt;/pgt;lt;/divgt;lt;div id="Footer"gt; Всі права захищені.lt;/divgt;lt;/bodygt;lt;/htmlgt;

Відео: Відеокурс HTML & CSS. Урок 4. Теги div і span

Ось так виглядає робота з тегом div. Він дуже зручний. Спочатку ми укладаємо все в блоки, а потім за допомогою стилів (CSS) розміщуємо блоки як і де хочемо.

тег span

Тег span є рядковим елементом, який призначений для виділення фрагмента тексту усередині інших тегів, таких як

, або.

Приклад коду з тегом span:

12345678910

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;/headgt;lt;bodygt;lt;pgt; Виявляється, lt;span class="WarningText"gt; давні предкиlt;/spangt; людини, як з`ясували вчені, харчувалися переважно фруктами.lt;/pgt;lt;pgt; Тому наш організм спочатку lt;span class="ExclusiveText"gt; пристосований до вживання фруктівlt;/spangt ;.lt;/pgt;lt;/bodygt;lt;/htmlgt;

Відео: HTML / CSS: Урок 4. Теги div і span

Даний тег працює наступним чином: ви ставите в нього той фрагмент тексту, який хочете виділити і задаєте йому стиль.

Відео: [HTML 5] Урок 8. Трохи теорії. Таблична та блочна верстка. Теги Div і Span

Справа в тому, що якщо для даних тегів стилі не задані, то ви не побачите ніяких змін на html сторінці. Стилі задаються для тега div та span через таблицю стилів (CSS). У коді html ви тільки прив`язуєте певний стиль в CSS через атрибути id = "header" або class = "warningText". Дані атрибути називаються селекторами. Ви зрозумієте як вони працюють коли почнете проходити уроки по CSS.

Пробуйте все прописати руками. Тоді ви краще запам`ятайте і будете пам`ятати де і як їх застосувати.