Информация о материале: Родительская категория: Программирование; Категория: HTML

Как верстать в HTML списки.

В этом видео мы рассмотрим, как верстать в HTML списки. HTML настолько гибок, что позволяет делать списки трёх видов. А для этого достаточно знать всего лишь шесть тегов.

Видео урок HTML. Часть 6. Три вида списков HTML.

Какие типы списков есть в HTML.

Для этого нужно знать всего шесть тегов.

Перед тем, показать, что это за теги для создания списков нужно понять, что списками мы постоянно оперируем в повседневной жизни.

Например, может быть список покупок или продуктов для приготовления еды. Это список, который не требует какого-то особого порядка – просто один предмет следует за другим без видимого порядка. Назовём его «Маркированный список».

Это может быть список действий, которые нужно выполнять в строгом порядке. Такие списки лучше нумеровать. И такой список мы будем называть «Нумерованный список».

А ещё есть списки с описаниями. Когда какому-то термину соответствует какое-то определение. Такие списки будем называть «Список определений».

Списки полезны, так как предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для восприятия виде.

Маркированные списки HTML

Маркированные списки – это списки с маркерами.

Для создания такого списка нужно сначала задать контейнер маркированного списка с помощью тега <ul>. И в этот контейнер сложить элементы списка, поместив каждый элемент списка в контейнер <li>.

Как уже стало понятно, теги <ul> и <li> парные и требуют закрывающих тегов. Поэтому, написав открывающий тег, сразу пишем закрывающий – так никогда не ошибёмся. Таков наш Codestyle!

Посмотрим на живом примере, как работает маркированный список, например список видов теплопереноса.

После того, как мы создали контейнер списка <ul> пауза поместим в него по одному элементу, заключив элементы в контейнер <li>.

<html>
    <head>
        <title>Маркированный список</title>
    </head>

    <body>
        <h1>Виды теплопереноса</h1>

        <ul>
            <li>Конвекция</li>
            <li>Кондукция</li>
            <li>Излучение</li>
        </ul>
   </body>
</html>

То, что получается при просмотре в браузере, реально выглядит как список:

Виды теплопереноса

Конвекция
Кондукция
Излучение

Нумерованные списки HTML

Нумерованные списки при разметке мало чем отличаются от маркированных. Отличие всего одно: вместо тега <ul> контейнера списка, нужно использовать тег <ol>.

Элементы списка всё также помещаем в контейнеры <li>.

И всё нумерованный список создаётся также просто!

Помним про Codestyle и закрываем все контейнеры.

Для того, чтобы было нагляднее посмотрим на реальном примере.

В контейнер нумерованного списка «Топ5 планет по диаметру» <ol> поместим список по порядку одного за другим элементы (планеты в порядке убывания) в контейнерах <li>.

<html>
    <head>
        <title>Нумерованный список</title>
    </head>

    <body>
        <h1>Топ5 планет по диаметру</h1>
        <ol>
            <li>Юпитер</li>
            <li>Сатурн</li>
            <li>Уран</li>
            <li>Нептун</li>
            <li>Земля</li>
        </ol>
    </body>
</html>

При отображении этого HTML-кода, нумерация элементов списка происходит автоматически:

Топ5 планет по диаметру

Юпитер
Сатурн
Уран
Нептун
Земля

Списки определений в HTML

Рассмотрим списки определений.

Они немного отличаются от предыдущих. В них есть 3 вида контейнеров, которые вкладываются один в другой.

Основной контейнер (контейнер списка определений) обозначается тегом <dl>.В него вкладываются пары контейнеров термин-определение.
Термин вкладывается в контейнер <dt>,
следующее за ним определение вкладывается в контейнер <dd>.

Если правильно расставлять отступы и писать сразу пару «тег открылся»-«/тег закрылся», то всегда всё будет собираться правильно. Все теги, которые рассмотрены в этом видео, требуют закрывающих тегов.

Для демонстрации того, как выглядят списки определений рассмотрим список «Пара видов еды».

Первым делом организуем список определений контейнером <dl>-</dl>.

После этого начинаем в него вкладывать пары термин-определение:

<html>
    <head>
        <title>Списки определений</title>
    </head>

    <body>
        <h1>Пара видов еды</h1>
        <dl>
            <dt>Суп</dt>
                <dd>Большое количество воды и немного варёных овощей и животных</dd>
            <dt>Каша</dt>
                <dd>Большое количество варёных овощей или круп</dd>
        </dl>
    </body>
</html>

В браузере определение отделено горизонтальным отступом, что удобно для восприятия как отдельных терминов, так и определений, относящихся к ним.

Пара видов еды

Суп: Большое количество воды и немного варёных овощей и животных
Каша: Большое количество варёных овощей или круп

Выводы по видам списков HTML

Про списки пока всё.

Теперь мы умеем составлять списки 3-х видов. Для того, чтобы закрепить увиденное, предлагаю вам самостоятельно создать HTML-документы, в котором будут использоваться списки всех 3-х видов:

Если что-то не получается, то по этой ссылке можно скачать примеры из видео. И конечно всегда можете задавать свои вопросы.

В следующем видео скорее всего будет рассказано о том, что такое пути к файлу, какие они бывают и в каких случаях, какими пользоваться. Это конечно будет видео про URL, про который все слышали, но не до конца понимают, что это значит. Значит надо разобраться! :)

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Видео-уроки HTML. Часть 6. Три вида списков HTML