12. Списки

Сказка про белого козлика

Помните сказку про Козленка, который учился считать до десяти? Если забыли, я вам напомню.

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

- Я - это раз!

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

- Два - это Теленок! - завопил радостно наш юный гений.

А Теленок, сразу видно, был двоечником или, даже хуже того - второгодником. К тому же слюнтяем, ябедой и маменькиным сыночком.

- Маааа-Мммааааааа! - замычал Теленок, - Козленок меня считает!

Практичная Корова решила сначала узнать, какую пользу принесет ей этот счет, и на всякий случай, прежде чем распороть "больно умному" Козленку брюхо, склонила голову набок и спросила:

- А как это?

Но, узнав, что это просто ученые бредни, в ярости бросилась на Козленка. А дальше вы знаете… За бедным Козленком носился весь скотный двор! И даже благородный Конь, забыв про свое благородство, задрав хвост во весь опор мчался за испуганным до смерти, белым комочком шерсти, чтобы растоптать беднягу под бифштекс с кровью!!!

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

Помните, капитан-Петух держал в руках документ, и по этому самому документу проверял пассажиров своего судна?

1. Козленок
2. Теленок
3. Корова
4. Бык
5. Конь
6. Свинья
7. Кот
8. Пес
9. Баран
10. Петух

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

И я надеюсь, вы меня за это не побьете. А начала я урок с этой сказки для того, чтобы вы не уснули от скукоты. Потому как все мы с вами хоть раз в жизни, да побывали в каких-то списках. Не успеваем мы вылезти из материнского лона, а нам на ногу уже номерочек… и заносят в списки. Типа родилась такая-сякая под номером таким-то таким-то… А ведь это и подумать страшно… Имени еще у человека нет, а номер уже на ноге… А когда в последний путь… н-да… но не будем о грустном.

Списки списков

Списки бывают разными. И оформлены они могут быть тоже по-разному. Напротив каждого элемента списка может стоять цифра, хоть арабская, хоть римская, даже кренделек, нарисованный вашей умелой рукой может там стоять. А может кружочек, квадратик или шарик. Список может быть и компактным, он может быть и как меню. Списки могут быть вложенными один в один. Да и наконец, элементы списка могут быть гиперссылками, или как я их называю просто ссылками.

Так что не такое это простое дело - списки. вы представляете, как было бы скучно возле каждого пункта списка писать цифру или кружочки вручную? Замучаешься. Но вы плохо знаете HTML, если так думаете! Есть тут и теги и дескрипторы, которые позволяют нам весело и беззаботно пройти этот урок. А старые друзья нашего умного выросшего Козла нам в этом помогут.

Для удобства я все возможные списки внесла в одну таблицу. Я опускаю в коде HTML описание кода html, body, head, title, чтобы не загромождать основные моменты. Также я немного сдвинула в коде все <li>, чтобы вы могли с легкостью ориентироваться и не заблудиться в списках.

Каждый элемент списка обозначается дескриптором li (list Item - Элемент Списка), заголовок списка - LH (list Header).

Изменение нумерации списков

Но иногда бывает необходимо начать нумерацию не с единицы, а с другого значения, вот скажем нам нужен такой список:

3. Третий нумер нашей программы
4. Четвертый нумер
5. Пятый, есссесна!

Ну, что ж, открою вам маленький секрет! Запомните хорошее слово start и все у вас получится.

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

<ol start="3">
    <li>Третий нумер нашей программы</li>
    <li>Четвертый нумер</li>
    <li>Пятый, есссесна!</li>
</ol>

Ну, а если мы захотим в каком-то длинном списке где-то в центре поменять нумерацию, стартера недостаточно, но зато достаточно волшебного слова value И тогда, если мы напишем такой код:

<ol>
    <li>Первый участник</li>
    <li>Второй участник</li>
    <li>Третий участник</li>
    <li>Четвертый участник</li>
    <li>Пятый участник</li>
    <li>Шестой участник</li>
    <li>Седьмой участник</li>
    <li value=28>А тут двадцать восьмой участник</li>
    <li>Двадцать девятый</li>
    <li>Тридцатый участник</li>
    <li>Тридцать первый</li>
    <li>Тридцать второй</li>
    <li value=47>А тут опять замена на сорок седьмого</li>
    <li>Сорок восьмой</li>
    <li>Сорок девятый</li>
    <li>Пятидесятый!</li>
</ol>

То получим следующий список:

Вот такие бывают списки. Есть еще и другие, не столь важные. Например, для того, чтобы сделать списки более компактными можно добавить к тегу ul или ol атрибут compact. Вот так: <ul=compact> или так: <ol=compact>

Все! Эти списки меня доконали!!!

Тренировка!

Введите в форму любой текст, необходимые теги, нажмите на "посмотреть" и любуйтесь на свою работу!