Формирование списков на Web-странице

Тема: Формирование списков на Web-странице.

Цели и задачи урока:

 Дидактическая:

Сформулировать основные принципы создания списков на WEB-странице; познакомить учеников с основными командами формирования списков; продемонстрировать использование этих команд на конкретных примерах оформления списков на WEB -страницах; формировать навыки и умения создания простейших списков на WEB-страницах.

 Развивающая:

Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.

 Воспитывающая:

Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью. Показать важность знаний и умений в сфере информационных компьютерных технологий.

Тип урока:

Закрепление ранее полученных и усвоение новых знаний.

 Средства обучения:

Интерактивная доска, слайды, персональные компьютеры, раздаточный материал с заданием.

Методы обучения:

Объяснение, беседа, наблюдение, упражнение.

Вид и формы контроля знаний:

Фронтальный опрос, групповая работа, практическая работа.

Средства контроля:

     Опрос, персональный компьютер. (Проверка выполненной работы).

 Ожидаемые результаты:

 В конце урока ученики смогут использовать команды языка HTML для форматирования текста, создавать списки различных видов;

Домашнее задание: учить конспект.

Ход занятия:

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

2.    Сообщение темы и цели занятия.             -1 мин.

3.    Повторение изученного материала.        -10 мин.

4.    Изучение нового материала.                    -15 мин.

5.    Домашнее задание.                                    -1 мин.

6.    Практическая работа.                                -15 мин.

7.    Подведение итогов занятия.                     -2 мин.

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

1.      Проверка готовности учеников к уроку (пенал, дневник, тетрадь, учебник)

2.      Проверка количества учеников.

Сообщение темы и цели занятия.         

       Учитель: Сегодня мы с Вами изучим еще один раздел HTML программирования: Формирование списков на  Web-странице.

Повторение изученного материала.

Учитель:  Перед тем как приступить к изучению нового материала, давайте с Вами повторим пройденный материал.

Вопрос ученикам: Что такое тэг?

Ответы учеников. (Тэг это инструкция браузеру отображения текстовой информации)

Вопрос ученикам: Что такое браузер?

Ответы учеников.(Браузер это программа отображения Web-страниц …)

Игра по группам:

       Класс делится на две команды. Участник первой команды выходит к доске и пишет два тэга. После этого участник сам выбирает ученика с другой команды для пояснения тэга. Если вызванный им ученик не отвечает на вопрос, он сам должен рассказать об этом тэге.  Зачетный бал начисляется ученику пояснившему тэг.

       Каждый участник пишет два тэга.

 Потом выходит ученик второй команды и повторяет те же действия.

В итоге к доске выходят четыре ученика. По два с каждой команды.

Повторно вызывать одного и того же ученика нельзя.

Изучение нового материала.

Для того чтобы технический текст содержащий параметры или свойства какого-то устройства и имел небольшой и понятный вид, необходимо использовать списки различных видов. Это увеличивает наглядность и понятность документа. Списки делятся на несколько видов.

Ø  Вопрос ученикам: Какие виды списков вы знаете?

Ø  Ответы учеников.

Слайд№1

HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде. Разберем все по порядку.

Нумерованные списки: <OL> ... </OL>

Каждый новый элемент списка следует начинать с метки <LI> и  заканчивать </LI>.

Пример:

<OL>

  <LI> Пункт1; </LI>

  <LI> Пункт2; </LI>

  <LI> Пункт3; </LI>

</OL>

Ø  Вопрос ученикам: Какие виды нумерации списков вы знаете?

Ø  Ответы учеников... (арабские, римские, буквенные).

Слайд№2

Для задания вида нумерации используют атрибут TYPE.

Атрибут TYPE задает тип нумерации:

•       арабские цифры (по умолчанию),

•       «I» (римские цифры),

•       «a» (строчные буквы) «А» (заглавные).

Пример:

<OL TYPE=«а»>

Ø  Ученики конспектируют слайд.

Ø  Просмотр демонстрационного ролика создания нумерованного списка. Слайд№3

Маркированные списки: <UL> ... </UL>

Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Принцип построения пунктов точно такой же как и в нумерованных списках . Например, чтобы создать вот такой список:

·         Пункт1;

·         Пункт2;

·         Пункт3;

необходим вот такой HTML-текст:

<UL>

  <LI> Пункт1; </LI>

  <LI> Пункт2; </LI>

  <LI> Пункт3; </LI>

</UL>

Ø  Вопрос ученикам: Как отличаются между собой маркированные списки?

Ø  Ответы учеников... (могут иметь различный вид маркера).

Слайд№4

Для задания вида маркера используют атрибут TYPE.

Атрибут TYPE задает тип маркера:

•       “disc” (диск)

•       “square”         (квадрат)

•       “circle”           (окружность)

Пример:

<UL TYPE =“disc” >

Ø  Ученики конспектируют слайд.

Ø  Просмотр демонстрационного ролика создания нумерованного списка. Слайд№5

Списки определений: <DL> ... </DL>

Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Разберем это на примере.

Слайд№6

Вложенные списки

Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует. Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.

Ø  Вопрос ученикам: Какой будет выведен список после выполнения данного кода?

Ø  Ученики должны рассказать, какой список должен получиться при выполнении данного фрагмента кода. (После ответа учеников отображается список.)

Домашнее задание.

Слайд№8  

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

Слайд№8  

Подведение итогов занятия.

После выполнения задания. Ученик сохраняет свою страницу на диске. И сообщает о готовности. К нему подходит учитель и проверяет задание и сообщает результат ученику.