Цель работы: Изучить основные приемы работы с различными видами списков.
Имеется три основных типа списков, которые можно использовать на HTML-странице:
Неупорядоченный список имеет следующий вид:
· Яблоки зеленые
· Бананы желтые
· Апельсины оранжевые
Упорядоченный список выглядит так:
1. Запустите программу.
2. Введите имя файла.
3. Нажмите кнопку ОК.
А в списке определений каждый элемент имеет детальное описание. Например:
Париж, Франция
Столица Франции. Наиболее известные достопримечательности – Эйфелева башня и Собор Парижской богоматери.
Москва, Россия
Столица России. Наиболее известные достопримечательности – Кремль, Большой театр и Останкинская телебашня.
Лондон, Англия
Столица Англии. Наиболее известные достопримечательности – Тауэр и Биг Бен.
Создайте неупорядоченный список. Для того, чтобы сделать это, используйте тэги <UL></UL> для списка в целом и тэги <LI></LI> для элементов списка. Например,<ul>
<li>Яблоки зеленые</li>
<li>Бананы желтые</li>
<li>Апельсины оранжевые</li>
</ul>
Загрузите страницу в браузер и посмотрите, что получилось. Создайте неупорядоченный список. Он создается почти также, как и неупорядоченный, только для списка в целом используются тэги <OL></OL>, а для элементов списка - <UL></UL>. Например:<ol>
<li>Запустите программу.</li>
<li>Введите имя файла.</li>
<li>Нажмите кнопку ОК.</li>
</ol>
Загрузите страницу в браузер и посмотрите, что получилось. Создайте список определений. Список сам по себе создается тэгами <DL></DL>. Каждый элемент списка включает в себя терм (создается тэгами <DT></DT>) и определение терма (создается тэгами <DD></DD>. Список определений может быть закодирован следующим образом:<dl>
<dt><strong>Париж, Франция</strong></dt>
<dd>Столица Франции. Наиболее известные достопримечательности – Эйфелева башня и Собор Парижской богоматери.</dd>
<dt><strong>Москва, Россия</strong></dt>
<dd>Столица России. Наиболее известные достопримечательности – Кремль, Большой театр и Останкинская телебашня.</dd>
<dt><strong>Лондон, Англия</strong></dt>
<dd>Столица Англии. Наиболее известные достопримечательности – Тауэр и Биг Бен.</dd>
</dl>
14. Загрузите страницу в браузер и посмотрите, что получилось.
15. Создайте вложенные списки. Например, список, который представляет собой содержание книги, может выглядеть следуюшим образом:
Глава 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>
Загрузите страницу в браузер и посмотрите, что получилось.