Лого SiteHere.ru

Урок 12. Теги div и span

Урок 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 является строчным элементом, который предназначен для выделения фрагмента текста внутри других тегов, таких как <p>,<table> или <div>.

Пример кода с тегом 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 через атрибуты id="header" или class="warningText". Данные атрибуты называются селекторами. Вы поймете как они работают когда начнете проходить уроки по CSS.

Пробуйте всё прописать руками. Тогда вы лучше запомните и будете помнить где и как их применить.

Больше практикуйтесь!

2 комментария к записи
  • Ирина

    Навигация закончилась… 🙂

     
    • Юрий

      А может вы не в том направлении смотрите уроки?))
      Правильно: влево — предыдущий, вправо — следующий.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *