Создание списков средствами HTML-программирования

Тип урока: практический.

Цель: формирование навыков оформления списков на web-страницах.

Задачи:

1. Научить создавать 3 вида списков с помощью html-тегов.
2. Развивать навыки создания html-документов.
3. Воспитывать культуру оформления html-документов.

1. Организационный момент.

2. Объявление темы и цели урока.

3. Работа по теме урока:

3.1  Повторение ранее пройденного материала, актуализация знаний (Приложение1).

3.2 Изучение нового материала: создание списков (Приложение2):

В html документах используются три вида списков: пронумерованные, промаркированные и списки определений или как их еще называют – списки описаний. Отдельно о вложенных списках, то есть одного списка внутри другого. Создаются такие списки очень просто. Для этого достаточно расположить пару тегов (открывающий и закрывающий) внутри другой пары. Итак:

В случае формирования пронумерованных списков, браузер автоматически вставит номер элементов списка по порядку. То есть, если вам нужно будет убрать какие-либо элементы списка, то браузер автоматически пересчитает, те что остались.

Начало нумерованного списка определяется открывающим тэгом <ol> а конец – закрывающим тэгом </ol>. Все элементы списка начинаются с тэга <li>. Например:

<ol>
<li>Первая строка списка</li>
<li>Вторая строка списка</li>
<li>Третья строка списка</li>
</ol>

В визуальном режиме это будет выглядеть так:

1. Первая строка списка
2. Вторая строка списка
3. Третья строка списка

Атрибуты тега <ol> – type и start.

Атрибут type устанавливает стиль нумерации элементов списка и может принимать следующие значения:

“А” – заглавные буквы A, B, C ...
“а” – строчные буквы a, b, c ...
“I” – большие римские числа I, II, III ...
“i” – маленькие римские числа i, ii, iii ...
“1” – арабские числа 1, 2, 3 ...
По умолчанию <ol type="1" >

Атрибут start устанавливает первое число, с которого начинается нумерация элементов списка. Может быть: start="1,2,3... и.т.д."

Например, нумерованный список:

<ol type="I" start="5">
<li>Первая строка списка</li>
<li>Вторая строка списка</li>
<li>Третья строка списка</li>
</ol>

Будет выглядеть в визуальном режиме вот так:

V. Первая строка списка
VI. Вторая строка списка
VII. Третья строка списка

Для маркированных списков браузер применяет для отметки элемента списка маркеры. Вид маркера, обычно, определяется в таблице стилей.

Начало маркированного списка определяется открывающим тэгом <ul> а конец – закрывающим тэгом </ul>. Все элементы списка начинаются с тэга <li>. Например:

<ul>
<li>Первая строка списка</li>
<li>Вторая строка списка</li>
<li>Третья строка списка</li>
</ul>

В визуальном режиме это будет выглядеть так:

• Первая строка списка
• Вторая строка списка
• Третья строка списка

Атрибут тега <ul> – type. Атрибут type устанавливает внешний вид маркера. Круглый (circle), квадратный (square) или дисковидный (disc), который, кстати, используется по умолчанию. Например:

<ul type="square">
<li>Первая строка списка</li>
<li>Вторая строка списка</li>
<li>Третья строка списка</li>
</ul>

В визуальном режиме это будет выглядеть так:

Первая строка списка
Вторая строка списка
Третья строка списка

Вот такой небольшой пример:

<ol>
<li> Сайт
<ul>
<li>Страница сайта1
<li>Страница сайта2
</ul>
<li> Блог
<ul>
<li>Страница блога1
<li>Страница блога2
</ul>
</оl>

В визуальном режиме это будет выглядеть так:

1. Сайт
   • Страница сайта1
   • Страница сайта2
2. Блог
   • Страница блога1
   • Страница блога2

4. Закрепление полученных знаний, выполнение практического задания на карточках (раздаточный материал).

5. Рефлексия.

6. Подведение итогов урока.

1. Нумерованный список:

Type – устанавливает стиль нумерации элементов списка и может принимать следующие значения:

“А” – заглавные буквы A, B, C ...
“а” – строчные буквы a, b, c ...
“I” – большие римские числа I, II, III ...
“i” – маленькие римские числа i, ii, iii ...
“1” – арабские числа 1, 2, 3 ...

2. Маркированный список:

Служебное слово:

Type – устанавливает стиль нумерации элементов списка и может принимать следующие значения:

• круглый (disc),
• квадратный (square)
• дисковидный (circle) – по умолчанию

Задание: оформите предложенный ниже список по образцу.

1. При создании таблиц необходимы следующие теги и служебные слова:

• Table
• TR
• TD
• Border

2. При работе с текстом необходимы следующие теги и служебные слова:

• P
• Align
• Font color
• Br

3. При создании списков необходимы следующие теги и служебные слова:

• UL
• OL
• LI
• Start