Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Списки списков
|
|
Списки бывают разными. И оформлены они могут быть тоже по-разному. Напротив каждого элемента списка может стоять цифра, хоть арабская, хоть римская, даже кренделек, нарисованный вашей умелой рукой может там стоять. А может кружочек, квадратик или шарик. Список может быть и компактным, он может быть и как меню. Списки могут быть вложенными один в один. Да и наконец, элементы списка могут быть гиперссылками, или как я их называю просто ссылками.
Так что не такое это простое дело - списки. Вы представляете, как было бы скучно возле каждого пункта списка писать цифру или кружочки вручную? Замучаешься. Но вы плохо знаете 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. Теленок C. Корова D. Бык e. Конь f. Свинья VII. Кот VIII. Пес ix. Баран x. Петух | |
| Для создания закрашенных кружочков (маркеров), вместо цифр, нужно заменить < 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> | o Козленок o Теленок § Корова § Бык · Конь · Свинья | |
| Списки могут быть вложенными один в другой по принципу матрешки | < UL> < LI> Первый урок < LI> Второй урок < LI> Третий урок < UL> < LI> Знакомство с графикой < LI> Обрезка изображения < LI> Оптимизация для web < /UL> < LI> Четвертый урок < LI> Пятый урок < /UL> | · Первый урок · Второй урок · Третий урок o Знакомство с графикой o Обрезка изображения o Оптимизация для 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> | 5. Козленок 6. Теленок 7. Поросенок |
Вот такие бывают списки. Есть еще и другие, не столь важные. Например, для того, чтобы сделать списки более компактными можно добавить к тегу UL или OL атрибут compact. Вот так: < UL=compact> или так: < OL=compact>
|
|