High Star

Списки




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

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

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

- Я - это раз!

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

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

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

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

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

- А как это?

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

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

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

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

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

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

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

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

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

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

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

ПояснениеКод в HTMLВ окне браузера

Для создания нумерованного списка существует дескриптор
<OL> (Ordered List - Нумерованный Список).
Он имеет закрывающийся тег </OL>

<OL>
  <LI>Козленок
  <LI>Теленок
  <LI>Корова
  <LI>Бык
  <LI>Конь
</OL>

  1. Козленок
  2. Теленок
  3. Корова
  4. Бык
  5. Конь

Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута <TYPE>:
TYPE=1 - Числа
TYPE=A - Прописные буквы
TYPE=a - Cтрочные буквы
TYPE=I - Прописные римские буквы
TYPE=i- Строчные римские буквы

<OL>
  <LI TYPE=1>Козленок
  <LI TYPE=1>Теленок
  <LI TYPE=A>Корова
  <LI TYPE=A>Бык
  <LI TYPE=a>Конь
  <LI TYPE=a>Свинья
  <LI TYPE=I>Кот
  <LI TYPE=I>Пес
  <LI TYPE=i>Баран
  <LI TYPE=i>Петух
</OL>

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

Для создания закрашенных кружочков (маркеров), вместо цифр, нужно заменить <OL> на <UL>

<UL>
  <LI>Козленок
  <LI>Теленок
  <LI>Корова
  <LI>Бык
  <LI>Конь
</UL>

  • Козленок
  • Теленок
  • Корова
  • Бык
  • Конь

Мы можем изменить форму маркера на круг, квадрат или диск с помощью атрибута TYPE:

TYPE=circle
TYPE=square
TYPE=disc

<UL>
  <LI TYPE=circle >Козленок
  <LI TYPE=circle >Теленок
  <LI TYPE=square >Корова
  <LI TYPE=square >Бык
  <LI TYPE=disc >Конь
  <LI TYPE=disc >Свинья
</UL>

  • Козленок
  • Теленок
  • Корова
  • Бык
  • Конь
  • Свинья

Списки могут быть вложенными один в другой по принципу матрешки

<UL>
  <LI>Первый урок
  <LI>Второй урок
  <LI>Третий урок
    <UL>
      <LI>Знакомство с графикой
      <LI>Обрезка изображения
      <LI>Оптимизация для web
    </UL>
  <LI>Четвертый урок
  <LI>Пятый урок
</UL>

  • Первый урок
  • Второй урок
  • Третий урок
    • Знакомство с графикой
    • Обрезка изображения
    • Оптимизация для web
  • Четвертый урок
  • Пятый урок

Также, если пустить наших героев "под нож", получится замечательное меню. Этим ножом будет у нас тег <MENU> <MENU>

<MENU>
  <LI>Козлятина
  <LI>Телятина
  <LI>Говядина
  <LI>Конина
  <LI>Свинина
  <LI>Кошатина
  <LI>Собачатина
  <LI>Баранина
  <LI>Курятина
</MENU>

  • Козлятина
  • Телятина
  • Говядина
  • Конина
  • Свинина
  • Кошатина
  • Собачатина
  • Баранина
  • Курятина
  • Вместо маркеров можно подставить любое изображение. Помните, в предыдущем уроке я нарисовала симпатичный домик и назвала его home.gif? . Так вот я могу спокойно пустить его вместо маркера!

    <UL>
      <IMG src="home.gif"> Козленок<br>
      <IMG src="home.gif"> Теленок<br>
      <IMG src="home.gif"> Корова<br>
      <IMG src="home.gif"> Конь<br>
      <IMG src="home.gif"> Свинья<br>
    </UL>

      Козленок
      Теленок
      Корова
      Конь
      Свинья

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

    <UL>
      <LI><A href="kid.html">Козленок</A>
      <LI><A href="calf.html">Теленок</A>
      <LI><A href="cow.html">Корова</A>
      <LI><A href="pig.html">Свинья</A>
      <LI><A href="goose.html">Гусь</A>
    </UL>

    Иногда возникает необходимость начать список не с единицы, а с другого числа. В этом нам поможет START, которому нужно дать указание, с какого числа нужно начинать отсчет.

    <OL START=5>
      <LI>Козленок
      <LI>Теленок
      <LI>Поросенок
    </OL>

    1. Козленок
    2. Теленок
    3. Поросенок

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

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

    Тренировка!

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