Создание списков средствами 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. Нумерованный список:

Открывающий Закрывающий Описание
<ol> </ol> Начало нумерованного списка
<li> </li> Задание элементов списка

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

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

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

Открывающий Закрывающий Описание
<ul> </ul> Начало маркированного списка
<li> </li> Задание элементов списка

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

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

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

Практическая работа.

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

Возможности HTML-кодов:

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

  • Table
  • TR
  • TD
  • Border

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

  • P
  • Align
  • Font color
  • Br

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

  • UL
  • OL
  • LI
  • Start