Материал опубликовал

Россия, Москва, Москва

Материал размещён в группе «УРОК.РФ: группа для участников конкурсов»

1

#Учебно-методические материалы #Презентация #Учитель-предметник #Среднее профессиональное образование

Учебно-методические материал «Основы языка HTML»

Конкурсная работа

II Всероссийский конкурс для учителей информатики и ИКТ на лучшую методическую разработку «Урок-презентация»

Колледж ГБПОУ 26 КАДР.

Преподаватель: Устюгова Е.В.

Тема: «Основы языка HTML».

Цели урока:

Освоить основные этапы построения web – страниц;

Освоить основные методы создания web – страниц;

Научить создавать web – страницы с помощью языка разметки гипертекста HTML;

Оформлять заголовки на web – страницах;

Размещать гиперссылки и графику на web – страницах;

Показать возможности использования языка разметки гипертекста HTML для создания интернет-страниц и сайтов в любой сфере жизнедеятельности.

Задачи урока:

образовательная – знакомство учащихся с основными построения web-страниц с помощью языка разметки гипертекста HTML;

развивающие – формирование у учащихся логического и алгоритмического мышления; развитие познавательного интереса к предмету; развитие умения оперировать ранее полученными знаниями; развитие умения планировать свою деятельность;

воспитательные – воспитание умения самостоятельно мыслить, ответственности за выполняемую работу, аккуратности при выполнении работы; развитие чувства патриотизма.

Тип урока:

комбинированный

Технические и программные средства:

Персональные компьютеры;

Приложение Windows – Блокнот, Inernet Explorer.

Проектор

План урока

Организационный момент. Тема и цели урока (2минуты).

Проверка домашнего задания доклад на тему: «История HTML» (5 минут) – презентация.

Разминка «задания на тему интернет и интернет-технологии». Осмысление и систематизация материала (7 минут).

Применение полученных на теоретических занятиях знаний. Выполнение практической работы «Основы языка HTML» работа в малых группах и конкурс капитанов (27минут).

Подведение итогов и критерии оценки. Домашнее задание, инструктаж (6 минут).

Ход урока

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

Проверка готовности учащихся к уроку, наличие рапортички с отмеченными отсутствующими, объявление темы и цели урока.

Проверка опережающего домашнего задания – презентация (приложение 1).

Разделение группы на команды по 3 студента.

Разминка«Разминка (интернет и интернет-технологии)».

Применение полученных на теоретических занятиях знаний:

Команда

Капитаны

Выполнение практической работы на ПК (Приложение 2 и приложение 3)

Тест (Приложение 4)

Блиц- опрос (Приложение2)

Работа с презентацией
Конкурс капитанов «Викторина»(Приложение 2)

Заполнить таблицу самообследование по web-страницам, которые построила команда. (Приложение 5)

Подведение итогов урока. Домашнее задание.

- Подсчёт баллов, определение победителей.

- Д/з:

Создать самостоятельно две web-страницы c Городами Героями;

Повторить теги и атрибуты языка HTML.

Приложение1. Презентация на тему: «История HTML».

Приложение2. Разминка (интернет и инетрнет-технологии).

Приложение2. Тема: «Основы языка HTML».

Приложение3. ПРОЕКТ И СОЗДАНИЕ ТЕМАТИЧЕСКОГО САЙТА «Города Герои ВОВ».

1. Разработка проекта сайта « Города Герои ВОВ».

Наш сайт будет посвящен городам Героям Великой Отечественной Войны, каждая страница должна содержать заголовок, иллюстрацию и панель навигации. Сайт будет состоять из четырех страниц. Четыре страницы мы сделаем сегодня на уроке, а две другие вы самостоятельно сделаете дома и внесете в них свое оформление.

Главная страница содержит: (Показ слайдов)

Заголовок – Города Герои ВОВ;

Иллюстрацию: рисунок Главная;

Навигационную панель: Гиперссылки на 3 другие страницы <Москва, Ленинград, Брестская крепость >.

Вторая страница: (Показ слайдов)

Заголовок – Город-Герой Москва;

Иллюстрацию: рисунок Москва;

Навигационную панель: Гиперссылки на 3 другие страницы <Главная, Ленинград, Брестская Крепость>.

Третья страница: (Показ слайдов)

Заголовок – Город-Герой Ленинград;

Иллюстрацию: рисунок Ленинград;

Навигационную панель: Гиперссылки на 3 другие страницы <Главная, Москва, Брестская Крепость>.

Четвертая страница: (Показ слайдов)

Заголовок – Брестская крепость;

Иллюстрацию: рисунок Брест;

Навигационную панель: Гиперссылки на 3 другие страницы <Главная, Москва, Ленинград>.

2.Инструментальные средства создания сайтов

Для нашего проекта используются специальные инструментальные средства позволяющие создавать страницы имея минимальные знания по основам программирования. В качестве самого удобного и распространенного инструментального средства текстовый редактор Блокнот. Браузер для просмотра веб-страниц Internet Explorer.

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

Метод построения:

ПРОЕКТ И СОЗДАНИЕ ТЕМАТИЧЕСКОГО САЙТА «Города Герои ВОВ»

Создать:

Заголовок

Иллюстрацию

панель навигации

ХОД РАБОТЫ

1.Откройте папку Города Герои на рабочем столе.

2. Создание Главной страницы. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

Москва

Ленинград

Брестская крепость

4. Сохраните под именем Главная.html в папке Города Герои.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку Города Герои. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer.

7. Откройте двойным щелчком файл Главная.html для просмотра в браузере. Проанализируйте полученный результат.

1. Создание второй страницы (Москва).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

Главная

Ленинград

Брестская крепость

4. Сохраните под именем Москва.html в папке Города Герои.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку Города Герои. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer.

7. Откройте двойным щелчком файл Москва.html для просмотра в браузере. Проанализируйте полученный результат.

1. Создание третьей страницы (Ленинград).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

Главная

Москва

Брестская крепость

4. Сохраните под именем Ленинград.html в папке Города Герои.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку Города Герои. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer.

7. Откройте двойным щелчком файл Ленинград.html для просмотра в браузере. Проанализируйте полученный результат.

1. Создание третьей страницы (Брестская Крепость).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

Главная

Ленинград

Москва

.

4. Сохраните под именем Брестская крепость.html в папке Города Герои.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку Города Герои. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer.

7. Откройте двойным щелчком файл Брестская крепость.html для просмотра в браузере. Проанализируйте полученный результат.

Приложение 6. Конкурс капитанов «Викторина».

Приложение 4. Тест «Теги языка HTML».

Универсальный указатель ресурса

Конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Выберите правильно записанный тэг:

Выберите правильно записанный тэг:

Тег, указывающий, на гиперссылку

Тег Body служит для:

Компьютер, подключенный к Интернету, обязательно имеет:

HTML

Гиперссылка

Атрибут

URL
Гипертекст

Элемент

Тег

URL
1. Брестская крепость <TITLE>
  
  Брестская крепость TITLE
  <title< font=""> Брестская крепость TITLE></title<>
  
  Брестская крепость TITLE>
сr="Ленинград.jpg" align="center">

src="Ленинград.jpg" align="center">
<A>

<Title>
создания маркированного списка;

создания тела программы на HTML;

создания нумерованного списка;

определения максимального значения.
IP-адрес;

доменное имя;

Web-страницу;

URL-адрес.

Ответы к тесту:

1	2	3	4	5	6	7
d	b	d	d	c	b	a

Приложение2. Блиц опрос.

Задание№1

Задание№2

Задание№3

Приложение 5. Бланк самооценки мини-проекта.

Команда№ (Фамилии)	Соответствие контента выбранному городу (максимально 5б)	Наличие 4-х изображений (по 1 баллу за каждое, максимально 4б)	Наличие гиперссылок, правильное их размещение (5б)	Наличие названий городов (2б)	Дополнительное оформление (2б)	Результаты теста (максимально 7б)	Общая сумма баллов

Оценивание
	25-24 балла	5
	23- 21 балла	4
	20 -16 балла	3
	менее 16 баллов	2