Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ПРОЕКТ № 4 - пятница.docx
Скачиваний:
1
Добавлен:
27.08.2019
Размер:
1.19 Mб
Скачать

Списки определений

Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения - в теги <dd></dd>. Пример кода списка определений:

<html>

<head>

<title>Списки определений</title>

</head>

<body>

<dl>

<dt>Термин 1</dt>

<dd>Определение термина 1</dd>

<dt>Термин 2</dt>

<dd>Определение термина 2</dd>

</dl>

</body>

</html>

Результат:

Вложенные списки

Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков. Пример кода многоуровневого списка:

<html>

<head>

<title>Вложенные списки</title>

</head>

<body>

<ul>

<li>Животные

<ol>

<li>кошки</li>

<li>собаки</li>

</ol>

</li>

<li>Растения

<ol>

<li>деревья</li>

<li>цветы</li>

</ol>

</li>

</ul>

</body>

</html>

Результат:

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

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

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

Так что не такое это простое дело - списки. Вы представляете, как было бы скучно возле каждого пункта списка писать цифру или кружочки вручную? Замучаешься. Но вы плохо знаете 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. Теленок

  1. Корова

  2. Бык

  1. Конь

  2. Свинья

  1. Кот

  2. Пес

  1. Баран

  2. Петух

Для создания закрашенных кружочков (маркеров), вместо цифр, нужно заменить <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>

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.