Конспект урока "Списки на Web-страницах. Интерактивные формы на Web-страницах" 8 класс

Автор: Фоминова Елена Владимировна, учитель физики и информатики
МБОУ СОШ № 23 МО Усть-Лабинский район хутора Братского
Краснодарского края
Урок 8 класс
Тема урока: «Списки на Web-страницах. Интерактивные формы на Web-
страницах»
Цели урока: формирование навыков и умений работы с тегами при
создании на Web-странице упорядоченных, неупорядоченных, вложенных
списков.
Задачи урока:
образовательные: сформулировать основные принципы добавления списков
на WEB-страницы; познакомить учеников с видами списков в HTML;
продемонстрировать использование этих списков на конкретных примерах;
развивающие: развивать логику, умение анализировать, сравнивать, делать
выводы, высказывать свою мысль;
воспитательные: воспитывать аккуратность, внимательность, вежливость и
дисциплинированность, бережное отношение к своему здоровью.
Тип урока: комбинированный: изучения нового материала и первичного
закрепления полученных знаний.
Формы работы учащихся: фронтальная, индивидуальная.
Оборудование и ЭОР: компьютер, мультимедийный проектор,
персональные компьютеры для учеников, презентация к уроку, примеры веб-
страниц, самостоятельная работа по вариантам.
Ход урока.
1. Организационный момент.
Приветствие учащихся, создание рабочей атмосферы и позитивного настроя.
Эпиграф к уроку стихи Н.Заболоцкого:
Не позволяй душе лениться!
Чтоб воду в ступе не толочь,
Душа обязана трудиться
И день и ночь, и день и ночь.
2. Целеполагание и мотивация. Звучит песня из мультфильма «Фиксики и
Интернет». Учитель задает вопросы, выслушивает мнение учащихся,
формирует окончательный ответ.
1. Ребята, вы прослушали фрагмент песни, и, наверное, сможете сказать,
о чем мы с вами сегодня будем говорить на уроке? Интернет огромная
копилка знаний и фактов.
Умение создавать Web-сайты становится все более актуальным навыком
пользователя Интернета. Опубликовать сайт в Интернете настолько просто и
доступно, что эта возможность привлекает все большее число людей. Тема
нашего урока «Списки на Web-страницах. Интерактивные формы» Слайд 1
3. Актуализация знаний.
Учитель. Но прежде чем приступать к изучению новой темы, проверим ваши
знания по теме «Основы языка разметки гипертекста HTML». В течение 7
минут нужно выполнить тест из 6 вариантов.
4. Объяснение нового материала.
Учитель. Сегодня мы познакомимся с использованием списков при
оформлении текстов. Текст с перечислением это список. Выделяют два
основных вида списков маркированный и нумерованный. Маркированный
список используют, если порядок перечисления не важен, нумерованный
если порядок перечисления важен.
Списки бывают: упорядоченные, неупорядоченные, списки определений,
списки вложений.
Слайд 2
Упорядоченные списки используются для:
Оглавлений.
Перечня предписаний (например, инструкции по установке стиральной
машины).
Последовательных разделов книги.
Присоединения номеров к кратким фразам, на которые, возможно,
придется где-то ссылаться.
Слайд 3
Тэги для упорядоченных списков: тэг <ol>…</ol> заголовок списка, тэг <li>
- элемент списка
Атрибуты: start=“число“ устанавливает номер списка, с которого начинается
нумерация, type=”тип” устанавливает тип номеров в списке.
В тэг <li> можно вставлять атрибуты Type=”тип” и value=“число“
Слайд 4
Тип
Стиль
Образец
1
Арабские цифры
1, 2, 3, 4,…
A
Заглавные буквы
A, B, C, D,…
a
Строчные буквы
a, b, c, d,…
I
Заглавные римские
I, II, III, IV,…
i
Строчные римские
i, ii, iii, iv,…
Пример 1. (Приложение1)
<html>
<head> <title>Упорядоченные списки</title> </head>
<body bgcolor="#005500" text="#00CCFF">
<ol start="3"><H2>Список предметов, начиная с "3":</H2>
<li> История
<li> Математика
<li> Физика
<li> Информатика </ol>
<ol type="A"><H2>Список с использованием букв:</H2>
<li> История
<li> Математика
<li> Физика
<li> Информатика </ol>
<ol start="10" type="I" ><H2>Список с римскими цифрами:</H2>
<li> История
<li> Математика
<li> Физика
<li> Информатика </ol>
</body>
</html>
Неупорядоченные списки используются для перечня элементов, для которых
не важен порядок следования:
Список гиперссылок;
Выделение ключевых фрагментов текста;
Список покупок.
Тэги <UL>…</UL> заголовок списка, <li> - элемент списка.
Атрибуты (маркеры для обозначения элементов списка)
Disc (по умолчанию), Circle , Square
Слайд 5
Пример 2. (Приложение 2)
<html>
<head> <title>Неупорядоченные списки</title> </head>
<body bgcolor="#005500" text="#00CCFF">
<ul type="circle"><H2>Список предметов 1:</H2>
<li>История
<li> Математика
<li> Физика
<li> Информатика </ul>
<ul type="square"><H2>Список предметов 2:</H2>
<li>История
<li> Математика
<li> Физика
<li> Информатика </ul>
<ul><H2>Список предметов 3:</H2>
<li>История
<li> Математика
<li> Физика
<li> Информатика </ul>
<ul><H2>Смешанный список:</H2>
<li>История
<li type="circle"> Математика
<li type="square"> Физика
<li> Информатика </ul>
</body>
</html>
Списки определений используются для словарей, списка типа имя / значение,
создания маркеров элементов списка.
Списки определений устроены как статьи в толковом словаре, которые могут
быть заполнены текстом и картинками.
Тэг <DL>…</DL> заголовок списка
Каждый элемент списка состоит из двух частей – термина и определения:
<dd> - термин
<dt> - определение или объяснение
Слайд 6
Пример 3. (Приложение 3)
<html>
<head> <title>Списки определений</title>
</head>
<body bgcolor="#005500" text="#00CCFF">
<h2 align="center">Классификация типичных темпераментов человека,<br>основанная
на возрениях Гиппократа </h2>
<font size="+1">
<IMG SRC="r1.jpg" align=left width=20% hspace=20>
<dl>
<dt> Флегматик
<dd>Пассивный, очень трудоспособный, медленно приспосабливающийся;
настроение устойчивое, мало поддается внешнему влиянию; вялость эмоциональных
реакций и медлительность в волевой деятельности.<br><br>
<dt> Сангвиник
<dd>Активный, энергичный, легко приспосабливающийся; живость и подвижность
эмоциональных реакций, быстрота и сила волевых проявлений.<br><br>
<dt> Холерик
<dd>Активный, очень энергичный, легко приспосабливающийся; порывистость и
сила эмоциональных реакций, бурные волевые проявления.<br><br>
<dt> Меланхолик
<dd>Пассивный, легко утомляющийся, тяжело приспосабливающийся; слабость
волевых проявлений и преобладание подавленного настроения, неуверенность в себе.
</dl>
</font>
</body>
</html>
Вложенные списки. Использование небольших рисунков в качестве
маркеров списка.
Слайд 7
Пример 4. (Приложение 4)
<html>
<head> <title> Маркированный список</title>
</head>
<body bgcolor="#005500" text="#00CCFF">
<h2>Знаки Зодиака </h2>
<b>
<ul>
<img src="r2.gif">Овен<br>
<img src="r2.gif">Телец<br>
<img src="r2.gif">Близнецы<br>
<img src="r2.gif">Рак<br>
<img src="r2.gif">Лев<br>
<img src="r2.gif">Дева<br>
<img src="r2.gif">Весы<br>
<img src="r2.gif">Скорпион<br>
<img src="r2.gif">Стрелец<br>
<img src="r2.gif">Козерог<br>
<img src="r2.gif">Водолей<br>
<img src="r2.gif">Рыбы<br>
</ul>
</b>
</body>
</html>
5. Физическая минутка. Давайте немного отдохнём. Смотрим на меня.
Будьте внимательны:
Если ты юноша, то выполняй круговые движения головой, иначе выполни
три наклона вперед и три назад.
Если у тебя длинные волосы, то выполняй наклоны головы вперёд-назад,
иначе влево и вправо.
Если у тебя серые глаза, то выполняй наклоны влево и вправо, иначе
поворачивай туловище влево, вправо.
6. Закрепление материала. Практическая работа «Создание списков»
Слайд 8
Задание. Оформить HTML-документ, содержащий 6 списков (расположить
друг под другом):
Дни недели:
1. Понедельник
2. Вторник
3. Среда
4. Четверг
5. Пятница
6. Суббота
7. Воскресенье
Времена года:
I. Зима
II. Весна
III. Лето
IV. Осень
Весенние месяцы:
a) Март
b) Апрель
c) Май
Виды информации,
воспринимаемые
человеком:
o Зрительная
o Слуховая
o Осязательная
o Обонятельная
o Вкусовая
Виды информации,
воспринимаемой
компьютером:
Числовая
Символьная
Графическая
Звуковая
Видео
Виды компьютерных
сетей:
Локальные
Корпоративные
Региональные
Глобальные
Сохранить документ в файле с именем cpicki.html в рабочей папке.
Просмотреть HTML-документ в обозревателе Internet Explorer.
7. Рефлексия.
После выполнения теста учитель предлагает ученикам закончить
предложения:
Я сегодня узнал…
Я согласен с тем, что…
Я понял, что изучать …
8. Подведение итогов, выставление оценок.
9. Домашнее задание. П 3.7 , стр119-124
Слайд 9
Список использованной литературы
1. Н.Д. Угринович «Преподавание курса “Информатика и ИКТ в
основной и старшей школе“ 8-11 классы: методическое пособие» - М.:
БИНОМ. Лаборатория знаний, 2013
2. Н.Д. Угринович «Информатика и ИКТ»: учебник для 8 класса - М.:
БИНОМ. Лаборатория знаний, 2013