High Списки
Сказка про белого козлика
Помните сказку про Козленка, который учился считать до десяти? Если забыли, я вам напомню.
Итак, маленький, но уже подающий надежды, козленок научился считать до десяти. Его никто этому не учил. Он сам как-то научился. Просто посмотрел в лужу, увидел свое отражение, задумался и сказал:
- Я - это раз!
И это открытие так его потрясло, что он задумался еще глубже. И понял, что, сказав раз, нужно сказать и два. Потому как открытия не могут стоят на месте. Они двигают и двигают прогресс вперед. Вот второй жертвой научного эксперимента и явился проходящий мимо Теленок.
- Два - это Теленок! - завопил радостно наш юный гений.
А Теленок, сразу видно, был двоечником или, даже хуже того - второгодником. К тому же слюнтяем, ябедой и маменькиным сыночком.
- Маааа-Мммааааааа! - замычал Теленок, - Козленок меня считает!
Практичная Корова решила сначала узнать, какую пользу принесет ей этот счет, и на всякий случай, прежде чем распороть "больно умному" Козленку брюхо, склонила рогатую голову набок и спросила:
- А как это?
Но, узнав, что это просто ученые бредни, в ярости бросилась на Козленка. А дальше вы помните… За бедным Козленком носился весь скотный двор! И даже благородный Конь, забыв про свое благородство, задрав хвост во весь опор мчался за испуганным до смерти, белым комочком шерсти, чтобы растоптать беднягу под бифштекс с кровью!!!
И если бы не счастливый случай, когда все чуть было не утонули, бедного Козленка уже не было бы с нами. Но когда он всех спас, все сразу стали кричать ура, восхвалять Козленка по-всякому, и даже глупый Теленок решил взять с него пример и научиться считать.
Помните, капитан-Петух держал в руках документ, и по этому самому документу проверял пассажиров своего судна?
- Козленок
- Теленок
- Корова
- Бык
- Конь
- Свинья
- Кот
- Пес
- Баран
- Петух
Это не просто документ, это список пассажиров, которые могут поместиться на судне. И, наверное, самые догадливые уже давно поняли, что урок этот будет посвящен спискам - нумерованным, маркированным и бог еще знает каким.
И я надеюсь, вы меня за это не побьете. А начала я урок с этой сказки для того, чтобы вы не уснули от скуки. Потому как все мы с вами хоть раз в жизни, да побывали в каких-то списках. Не успеваем мы вылезти из материнского лона, а нам на ногу уже номерочек… и заносят в списки. Типа родилась такая-сякая под номером таким-то… А ведь это и подумать страшно… Имени еще у человека нет, а номер уже на ноге… А когда в последний путь… н-да… но не будем о грустном.
Списки списков
Списки бывают разными. И оформлены они могут быть тоже по-разному. Напротив каждого элемента списка может стоять цифра, хоть арабская, хоть римская, даже кренделек, нарисованный вашей умелой рукой может там стоять. А может кружочек, квадратик или шарик. Список может быть и компактным, он может быть и как меню. Списки могут быть вложенными один в один. Да и наконец, элементы списка могут быть гиперссылками, или как я их называю просто ссылками.
Так что не такое это простое дело - списки. Вы представляете, как было бы скучно возле каждого пункта списка писать цифру или кружочки вручную? Замучаешься. Но вы плохо знаете HTML, если так думаете! Есть тут и теги и дескрипторы, которые позволяют нам весело и беззаботно пройти этот урок. А старые друзья нашего умного выросшего Козла нам в этом помогут.
Для удобства я все возможные списки внесла в одну таблицу. Я опускаю в коде HTML описание кода html, body, head, title, чтобы не загромождать основные моменты. Также я немного сдвинула в коде все <LI>, чтобы вы могли с легкостью ориентироваться и не заблудиться в списках.
Каждый элемент списка обозначается дескриптором LI - List Item (Элемент Списка), заголовок списка - LH - List Header (Заголовок Списка).
| Пояснение | Код в HTML | В окне браузера | |
|---|---|---|---|
|
Для создания нумерованного списка существует дескриптор |
<OL> |
| |
|
Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута <TYPE>: |
<OL> |
|
|
|
Для создания закрашенных кружочков (маркеров), вместо цифр, нужно заменить <OL> на <UL> |
<UL> |
|
|
|
Мы можем изменить форму маркера на круг, квадрат или диск с помощью атрибута TYPE:
TYPE=circle |
<UL> |
|
|
|
Списки могут быть вложенными один в другой по принципу матрешки |
<UL> |
|
|
|
Также, если пустить наших героев "под нож", получится замечательное меню. Этим ножом будет у нас тег <MENU> <MENU> |
<MENU> |
|
|
|
Вместо маркеров можно подставить любое изображение. Помните, в предыдущем уроке я нарисовала симпатичный домик и назвала его home.gif? . Так вот я могу спокойно пустить его вместо маркера! |
<UL> |
 Козленок Теленок Корова Конь Свинья
|
|
|
Ну, и конечно, можно сделать элементы списка - ссылками, если представить, что все эти друзья имеют свои странички в Интернете. |
<UL> |
|
|
|
Иногда возникает необходимость начать список не с единицы, а с другого числа. В этом нам поможет START, которому нужно дать указание, с какого числа нужно начинать отсчет. |
<OL START=5> |
|
Вот такие бывают списки. Есть еще и другие, не столь важные. Например, для того, чтобы сделать списки более компактными можно добавить к тегу UL или OL атрибут compact. Вот так: <UL=compact> или так: <OL=compact>
Все! Эти списки меня доконали!!!
Тренировка!
Введите в форму любой текст, необходимые теги, нажмите на "посмотреть" и любуйтесь на свою работу!
