Май 14, 2020 Запись была обновлена
Урок 12. Теги 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 он выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="header"> <h1>Анкета</h1> </div> <div id="content"> <div class="sidebar"> <ul> <li>Главная</li> <li>Об авторе</li> <li>Разное</li> </ul> </div> <p>Основной текст</p> </div> <div id="footer">Все права защищены.</div> </body> </html> |
Вот так выглядит работа с тегом div. Он очень удобен. Сначала мы заключаем всё в блоки, а затем с помощью стилей(CSS) размещаем блоки как и где хотим.
Тег span
Тег span является строчным элементом, который предназначен для выделения фрагмента текста внутри других тегов, таких как , или .
Пример кода с тегом span:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p>Оказывается, <span class="warningText">древние предки</span> человека, как выяснили учёные, питались преимущественно фруктами.</p> <p>Поэтому наш организм изначально <span class="exclusiveText">приспособлен к употреблению фруктов</span>.</p> </body> </html> |
Данный тег работает следующим образом: вы помещаете в него тот фрагмент текста, который хотите выделить и задаете ему стиль.
Дело в том, что если для данных тегов стили не заданы, то вы не увидите никаких изменений на html странице. Стили задаются для тега div и span через таблицу стилей(CSS). В коде html вы только привязываете определенный стиль в CSS через атрибуты или . Данные атрибуты называются селекторами. Вы поймете как они работают когда начнете проходить уроки по CSS.
Пробуйте всё прописать руками. Тогда вы лучше запомните и будете помнить где и как их применить.
Больше практикуйтесь!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Навигация закончилась… 🙂
А может вы не в том направлении смотрите уроки?))
Правильно: влево — предыдущий, вправо — следующий.