17.10.09

Упорядоченные списки, неупорядоченные списки, вложенные списки, списки определений

Основное правило HTML и XHTML - ВСЕ ТЕГИ должны быть ВЛОЖЕНЫ друг в друга, как матрешки.
Например, следуйщий код - НЕверный:


<html>
<head>
<body>
<head>
</body>
</html>


ВЕРНО:



<html>
<head>
</head>
<body>
</body>
</html>





    Используя это правило, научимся создавать:
  • Упорядоченные списки

  • Неупорядоченные списки

  • Вложенные списки



То что Вы только что прочитали - и есть список, в данном случае он НЕУПОРЯДОЧЕННЫЙ..Но как мы его создали?
Добавьте следующий код к коду из урока 1 (между тегами <body> и </body>)



<ul>
Тут начинаем что-нибудь перечислять, например, что нужно для приготовления салата:
<li>Помидор</li>
<li>Огурец</li>
<li>Зелень</li>
<li>Лук</li>
</ul>


Обратите внимание, что теги <li> и </li> должны быть вложены в теги <ul> и </ul>

А теперь создаем упорядоченный список:



<ol>
Начинаем что-нибудь перечислять, например, что нужно для приготовления салата:

<li>Помидор</li>
<li>Огурец</li>
<li>Зелень</li>
<li>Лук</li>
</ol>




Результат:


    Начинаем что-нибудь перечислять, например, что нужно для приготовления салата:
  1. Помидор

  2. Огурец

  3. Зелень

  4. Лук



Вложенные списки:



В канцелярском магазине я купила:
<ol>
<li>Скрепки</li>
<li>Ручки
<ul>
<li>Зеленые</li>
<li>Красные</li>
<li>Черные</li>
</ul>
</li>
<li>Тетради
<ul>
<li>в клетку</li>
<li>в линию</li>
</ul>
</li>
</ol>


Результат:

В канцелярском магазине я купила:
  1. Скрепки
  2. Ручки
    • Зеленые
    • Красные
    • Черные
  3. Тетради
    • в клетку
    • в линию



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

    состоят из 3-х элементов:
  • <dl> и </dl> - элемент списка (что-то вроде <ul> и </ul>

  • <dt> и </dt> - термин (то что нужно определить)

  • <dd> и </dd> - определение


Сейчас все будет ясно ; )



<dl>
<dt>Тарелка</dt>
<dd>Столовая посуда круглой формы с широким плоским дном и приподнятыми краями.</dd>
<dd>Неопознанный летающий объект, летающая тарелка; НЛО.</dd>
<dt>Вилка</dt>
<dd>Один из предметов столового прибора с несколькими зубьями на ручке, которым берут куски пищи.</dd>
<dd>Название различных деталей, устройств, приспособлений, имеющих раздвоенный конец.</dd>
</dl>


Результат:

Тарелка

Столовая посуда круглой формы с широким плоским дном и приподнятыми краями.

Неопознанный летающий объект, летающая тарелка; НЛО.
Вилка

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

Название различных деталей, устройств, приспособлений, имеющих раздвоенный конец.




Вот и весь секрет ; )

Комментариев нет:

Отправить комментарий

Как создать свой сайт?