Задание 5. Работа со списками

Цель работы: Изучить основные приемы работы с различными видами списков.

Имеется три основных типа списков, которые можно использовать на HTML-странице:

Неупорядоченный список имеет следующий вид:

• Яблоки зеленые

• Бананы желтые

• Апельсины оранжевые

Упорядоченный список выглядит так:

1. Запустите программу.

2. Введите имя файла.

3. Нажмите кнопку ОК.

А в списке определений каждый элемент имеет детальное описание.

Например:

Париж, Франция

Столица Франции. Наиболее известные

достопримечательности – Эйфелева башня и Собор Парижской богоматери.

Москва, Россия

Столица России. Наиболее известные достопримечательности

– Кремль, Большой театр и Останкинская телебашня.

Лондон, Англия

Столица Англии. Наиболее известные достопримечательности

– Тауэр и Биг Бен.

1. Создайте неупорядоченный список. Для того, чтобы сделать это, используйте тэги <UL></UL> для списка в целом и тэги <LI></LI> для элементов списка. Например,

<ul>

<li>Яблоки зеленые</li>

<li>Бананы желтые</li>

<li>Апельсины оранжевые</li>

</ul>

2. Загрузите страницу в браузер и посмотрите, что получилось.

3. Создайте упорядоченный список. Он создается почти также, как и неупорядоченный, только для списка в целом используются тэги <OL></OL>, а для элементов списка - <UL></UL>. Например:

<ol>

<li>Запустите программу.</li>

<li>Введите имя файла.</li>

<li>Нажмите кнопку ОК.</li>

</ol>

4. Загрузите страницу в браузер и посмотрите, что получилось.

5. Создайте список определений. Список сам по себе создается тэгами <DL></DL>. Каждый элемент списка включает в себя терм (создается тэгами <DT></DT>) и определение терма (создается тэгами <DD></DD>. Список определений может быть закодирован следующим образом:

<dl>

<dt><strong>Париж, Франция</strong></dt>

<dd>Столица Франции. Наиболее известные

достопримечательности – Эйфелева башня и Собор

Парижской богоматери.</dd>

<dt><strong>Москва, Россия</strong></dt>

<dd>Столица России. Наиболее известные

достопримечательности – Кремль, Большой театр и

Останкинскаяd>

телебашня.</d<dt><strong>Лондон, Англия</strong></dt>

<dd>Столица Англии. Наиболее известные

достопримечательности – Тауэр и Биг Бен.</dd>

</dl>

6. Загрузите страницу в браузер и посмотрите, что получилось.

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

Глава 1

Раздел 1.1

Раздел 1.2

Глава 2

Раздел 2.1

Раздел 2.2

Раздел 2.3

А это код HTML, который создает подобный список:

<ol>

<li>Глава 1

<ol>

<li>Раздел 1.1</li>

<li>Раздел 1.2</li>

</ol>

</li>

<li>Глава 2

<ol>

<li>Раздел 2.1</li>

<li>Раздел 2.2</li>

<li>Раздел 2.3</li>

</ol>

</li>

</ol>

8. Загрузите страницу в браузер и посмотрите, что получилось.

9. Создайте список, который объединяет списки различных типов. В следующем примере упорядоченный и неупорядоченный списки включены в список определений. Например, так:

Цвета фруктов

• Яблоки зеленые

• Бананы желтые

• Апельсины оранжевые

Инструкция

1. Запустите программу.

2. Введите имя файла.

3. Нажмите кнопку ОК.

А это код HTML, который создает подобный список:

<dl>

<dt><strong>Types of Fruit</strong></dt>

<dd>

<ul>

<li>Яблоки зеленые</li>

<li>Бананы желтые</li>

<li>Апельсины оранжевые</li>

</ul>

</dd>

<dt><strong>Firework Instructions</strong></dt>

<dd>

<ol>

<li>Запустите программу.</li>

<li>Введите имя файла.</li>

<li>Нажмите кнопку ОК.</li>

</ol>

</dd>

</dl>

10. Загрузите страницу в браузер и посмотрите, что получилось.