Главная страница
Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
Списки списков
Списки бывают разными. И оформлены они могут быть тоже по-разному. Напротив каждого элемента списка может стоять цифра, хоть арабская, хоть римская, даже кренделек, нарисованный вашей умелой рукой может там стоять. А может кружочек, квадратик или шарик. Список может быть и компактным, он может быть и как меню. Списки могут быть вложенными один в один. Да и наконец, элементы списка могут быть гиперссылками, или как я их называю просто ссылками.
Так что не такое это простое дело - списки. Вы представляете, как было бы скучно возле каждого пункта списка писать цифру или кружочки вручную? Замучаешься. Но вы плохо знаете 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>
|