Создание списков средствами HTML-программирования
Просмотров: 15
Тип урока: практический.
Цель: формирование навыков оформления списков на web-страницах.
Задачи:
- Научить создавать 3 вида списков с помощью html-тегов.
- Развивать навыки создания html-документов.
- Воспитывать культуру оформления 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
• Страница сайта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