Конспект урока "Списки на 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, 2, 3, 4,…

Заглавные буквы

A, B, C, D,…

Строчные буквы

a, b, c, d,…

Заглавные римские

I, II, III, IV,…

Строчные римские

i, ii, iii, iv,…

Пример 1. (Приложение1)

<html>

<head> <title>Упорядоченные списки</title> </head>

<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>

<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>

<h2 align="center">Классификация типичных темпераментов человека,<br>основанная

на возрениях Гиппократа </h2>

<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>

<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>

</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

Скачать материал

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

Информатика - еще материалы к урокам:

Предметы

Похожие материалы