Основы языка разметки гипертекста HTML. Списки.

Предмет: Информатика и ИКТ

Группа: 10 класс

Тема урока: Основы языка разметки гипертекста HTML. Списки.

Цель: Использование основ языка разметки гипертекста HTML при оформлении списков и Web-конструировании.

Задачи:

Образовательная: вспомнить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов; научить обучающихся оформлять и использовать списки при создании Web-страниц.

Развивающая: способствовать развитию информационной культуры; развивать эмоциональную сферу:  формировать положительные эмоции  к процессу обучения.

Воспитательная: воспитывать уважение и  умение сотрудничать с окружающими людьми, трудолюбие  и добросовестность, воспитывать  интерес  к занятиям информатикой  как возможной области будущей практической деятельности.

Тип урока: Урок усвоения новых знаний и применение их на практике.

Оборудование: 1. Современные компьютеры.

                            2. Мультимедийный проектор.

Оснащение:       Презентация Power Point.

                             Раздаточный материал для обучающихся.

Программное обеспечение: ОС Windows, браузер.

Список использованной литературы:    

1. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса / Н. Д. Угинович. – 10-е изд. – М.: БИНОМ. Лаборатория знаний, 2013. – 213 с. : ил.

Продолжительность проведения: один урок по 45 минут.

 Ход занятия   

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

Учитель: Здравствуйте, ребята! На прошлых уроках мы уже начали изучать язык разметки гипертекста HTML. Познакомились с основными тегами, разобрали структуру html-документа. А как вы это усвоили на практике, мы проверим во второй половине нашего урока.

(Демонстрация презентации, 1 слайд).

1. Этап подготовки обучающихся к активному сознательному усвоению знаний.

Учитель: А сейчас предлагаю вспомнить некоторые понятия (беседа с обучающимися).

Гипертекст – структура, позволяющая устанавливать смысловые связки между элементами текста и другими документами.

Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов (все атрибуты располагаются в начальном теге).

Гиперссылка – фрагмент текста, который является указателем на другой файл или объект

Браузер — программное обеспечение для просмотра веб-сайтов.

1. Этап усвоения новых знаний.

Учитель: Тема сегодняшнего урока «Списки». Скажите, пожалуйста, какие виды списков вам известны?

Возможные ответы учеников: маркированный, нумерованный и список определений.

Учитель: Для начала рассмотрим два основных вида списков.

1. Теги и атрибуты для создания списков на Web-странице.

3.1.1 Тэги

Учитель: Для создания маркированного списка используется контейнер

. Тэг
• – тег элемента списка.

  Пример:

  • первый элемент
  • второй элемент

  Результат:

  • первый элемент

  • второй элемент

  
  
  

  Учитель: Для создания нумерованного списка используется контейнер ol. Тэг

• – тег элемента списка.

  Пример:

  ol

• первый элемент
• второй элемент

Результат:

1. первый элемент

2. второй элемент




(Обучающиеся в процессе рассказа учителя записывают основные моменты, демонстрация презентации,  3  слайд).

3.1.2 Атрибуты

Учитель: Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега 

.

Тип списка	Код HTML	Пример
Список с маркерами в виде круга	type="disc" ...	Первый Второй Третий
Список с маркерами в виде окружности	type="circle" ...	Первый Второй Третий
Список с квадратными маркерами	type="square" ...	Первый Второй Третий





Учитель: Для указания типа нумерованного списка применяется атрибут type тега 

. Чтобы начать список с определенного значения, используется атрибут start тега 
.

Тип списка	Код HTML	Пример
Арабские числа	type="1" ...	1. Чебурашка 2. Крокодил Гена 3. Шапокляк
Прописные буквы латинского алфавита	type="A" ...	A. Чебурашка B. Крокодил Гена C. Шапокляк
Строчные буквы латинского алфавита	type="a"  ...	a. Чебурашка b. Крокодил Гена c. Шапокляк
Римские числа в верхнем регистре	type="I" ...	I. Чебурашка II. Крокодил Гена III. Шапокляк
Римские числа в нижнем регистре	type="i" ...	i. Чебурашка ii. Крокодил Гена iii. Шапокляк





(Обучающиеся в процессе рассказа учителя записывают основные моменты, демонстрация презентации,  4, 5  слайд).

3.2 Список определений

Учитель: Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера , термин — тегом , а его определение — с помощью тега .

Термин 1

Определение 1

Термин 2

Определение 2

Пример:

…

Тег

Тег — это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др., и для изменения их вида.

HTML-документ

Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.

Сайт

Cайт — это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

…




Результат:



(Демонстрация презентации,  6,7 слайд).




4. Этап закрепления знаний.

4.1. Индивидуальная работа на компьютере:

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

1. Разбор и оформление примера с использованием списков в web-страницу.






1. Проверка изученного материала на тему форматирования документа: Изменить пример из задания 1 в соответствии с подписями (в качестве результата можно показать пример, рисунок).





Ответ:

…

li bжирностьb li

1. наклон

liUподчеркиваниеU li

2. индексы

• _нижние
• ^{верхние}

liUподчеркиваниеU li

3. цвет

ul

….

(Демонстрация презентации, 8,9 слайд)


3. Создайте новую страницу в редакторе блокнот. В элемент укажите «Создание списков» и вашу фамилию. Отформатируйте текст по заданию:

Солнце должно быть: (шрифт размером 7, красного цвета, выравнивание по центру)

1. Теплым.

2. Круглым.

3. Желтым.

Снег должен быть: (выравнивание по центру, размер шрифта 7, синего цвета)

А. Белым

B. Холодным

C. Пушистым





Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.

4. (можно на домашнее задание) Создайте страницы со следующими списками:

Перечень покупок:

• Говядина -1кг

• Масло сливочное -500 г

• Хлеб - 2 батона

• Молоко - 1 литр

Алгоритм вычисления дробей:

1. очистить экран

2. ввести значения X и Y

3. если , вернуться к пункту 2

4. вычислить

5. вывести результат z

(Демонстрация презентации, 8-11 слайд)

5. Этап информации о домашнем задании.

Учитель.  1. Параграф 2.13 задание 4 (кто не успел)

(Демонстрация презентации, 12 слайд).

Спасибо за урок! До свидания, ребята.