План урока с приложениями по информатике 11 класс по теме Язык гипертекстовой разметки

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

Выберите документ из архива для просмотра:

HTML.ppt прил4.txt Выполни.txt План урока информатики 11 класс.docx Приложения.docx

Выбранный для просмотра документ HTML.ppt

Тема урока:«Язык разметки гипертекста HTML» Попов К.Н.

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

Скачать материал "План урока с приложениями по информатике 11 класс по теме Язык гипертекстовой разметки"

Описание презентации по отдельным слайдам:

1 слайд

Тема урока:
«Язык разметки гипертекста HTML»
Попов К.Н.
2 слайд

HTML
Hyper Text Markup Language – язык гипертекстовой разметки.

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

!Теги не чувствительны к регистру!
3 слайд

ТЕГ
Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>. Тег является активным элементом, изменяющим представление следующей за ним информации.
Обычно используются два тега - открывающий и закрывающий.
Тег может иметь некоторое количество атрибутов.
4 слайд

АТРИБУТ
Атрибут – это компонент тега, содержащий указания о том, как браузер должен воспринять и обработать тег.

Синтаксис тега с атрибутом:
<тег атрибут="значение">
5 слайд

ГИПЕРТЕКСТ
Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы или ресурсы с возможностями выполнения переходов.
6 слайд

Открываем документ Задание.txt
<HTML>
<HEAD>
<TITLE> Название</TITLE>
</HEAD>
<BODY>
Я ученик 11 класса . Мне 17 лет.
Это моя первая Web-страница.
Тут я могу писать любой текст.
Я размещу эту страницу в Интернете.
</BODY>
</HTML>
7 слайд

Просмотр кода в Internet Explorer
Обновление web-страницы
меню Вид  Просмотр HTML-кода
8 слайд

Просмотр кода в Google Chrome
9 слайд

Просмотр кода в Mozilla
10 слайд

Тест
11 слайд

Домашнее задание
выучить конспект;
создать собственную страничку с помощью html-языка на свободную тему.

Выбранный для просмотра документ прил4.txt

<HTML>

<HEAD>

<TITLE> Програмируем </TITLE>

</HEAD>

<BODY>

<b>Я ученик 11 класса. Мне 17 лет.</b><br>

<i>Это моя первая Web-страница.</i><br>

<H1><u>Тут я могу писать любой текст.</u></H1><br>

Я размещу эту страницу в Интернете.<br>

</BODY>

</HTML>

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

Скачать материал "План урока с приложениями по информатике 11 класс по теме Язык гипертекстовой разметки"

Как учитель может зарабатывать на Инфоуроке?

Выбранный для просмотра документ Выполни.txt

1. Открой web-страницу в режиме блокнота.

2. Измени название страницы на "11 класс"

3 Поменяй текст новости о семинаре в школе на сообщение "В Станционной среденей школе сос-

тоялся семинар информатики и физики"

4 Убери из окна фотографии и вставь одну "рис1".

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

Скачать материал "План урока с приложениями по информатике 11 класс по теме Язык гипертекстовой разметки"

Как учитель может зарабатывать на Инфоуроке?

Выбранный для просмотра документ План урока информатики 11 класс.docx

ГУ «Станционная средняя школа отдела образования акимата Карабалыкского района»

«Язык гипертекствой разметки HTML»

Попов Константин Николаевич

Учитель высшей категории высшего уровня квалификации

2015-2016 учебный год

Тема урок: Язык гипертекствой разметки HTML.

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

· Сформулировать основные принципы создания WEB-страниц;

· Познакомить учеников с основными командами оформления текста;

· Продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц;

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

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

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

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

Оборудование: мультимедийная установка, программа презентаций Microsoft Office PowerPoint 2007, браузер Google или более новый, раздаточный материал.

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

В конце урока ученики смогут:

· Дать определение таким понятиям:

a. Браузер, гипертекст, тег, атрибут;

b. WEB-страница, WEB-сайт; WEB-дизайн;

c. Язык разметки гипертекста HTML;

· Использовать команды языка HTML для форматирования текста;

План урока:

1. Организационный момент (2 мин)- (посещение, деление на пары)

2. Актуализация опорных знаний (2 мин)- (опрос: интернет, страница, гиперссылки …)

3. Цели изадачи. Изложение нового материала на примерах использования документов в формате WEB и блокнот (2 мин) - (демонстрация материала на ПК по сети)

4. Исследование файлов на использование тегов (7 мин) – (самостоятельная работа в парах на ПК)

5. Проверка понимания изученного (2 мин)

6. Закрепление нового материала путём выполнения практического задания (10 мин)- (создание, путём изменениякода готовой страницы по образцу)

7. Коррекция (3 мин)

8. Обобщение, Тест. (15 мин)

9. Итоги урока. Самоценивание. Рефлексия (5 мин)

10. Домашнее задание (2 мин.)

Структура урока

Этап урока	Время, мин	Деятельность учителя	Деятельность ученика
1. Организационный	2 минуты	Настраивает на урок. Раздаёт листы самопроверки с критериями.	Психологически настраиваются на урок. Изучают листы самопроверки и критерии.
3. Актуализация знаний.	2 минуты	Спрашивает, слушает, комментирует ответы.	Отвечают на вопросы.
5. Постановка целей и задач.	2 минуты	Демонстрация презентации и способа создания web-страницы.	Наблюдают, задают вопросы, ставят задачу на урок.
6. Изучение нового материала.	7 минут	1. Организует группы. 2. Руководит, консультирует.	1. Исследуют материал. Участвуют в беседе, делают выводы, формулируют определения, работают с заданием.
8. Проверка понимания изученного материала.	2 минуты	Задаёт вопросы по теме практической работы.	Отвечают на вопросы. Формулируют правильные выводы.
9. Закрепление изученного.	10 минут	Решение задания индивидуально.	Выполнение задания.
10. Коррекция	3 минуты	Проверка задания и ликвидация ошибок (анализ решённой задачей)	Сверяют решение и выполняют коррекцию.
12. Обобщение изученного.	15 минут	Вопросы по основным итогам урока: тема, цель, результат. Решение теста	Ответы учеников на вопросы.
14. Итоги урока (рефлексия)	5 минут	Подводим итог, самооценивание. Рефлексия Таблица (плюс, минус, интересно)	Отвечают на вопросы рефлексии.
15. Домашнее задание.	2 минуты	Задание – привести примеры новых тег, кодировка страниц.	Задают вопросы, записываю задание в тетрадь.

Ход урока:

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

Приветствие учащихся. Проверка присутствующих. Настрой на урок. Деление на пары. Листы самооценки с критериями. Лист рефлексии.

Приветствие учащихся, проверка по журналу. После этого проводим деление на пары через сбор личной вещи в коробку и разложение их на пары в произвольном порядке. Для этого используем пустую коробку, в которую дети вложат ластик, карандаш, ручку, заколку. После этого вынимая по две вещи формируются пары. Каждый ученик получает лист самооценки (прил1) и карточку рефлексии (прил2) для работы в течении урока.

3. Актуализация опорных знаний. (2 мин)

· Как вы можете определить понятие «Интернет»?

· Что такое браузер?

· Какие виды браузеров Вы знаете?

· Как называются документы, которые мы можем просматривать в программе-

· браузере?

На этом этапе идёт процесс повторения опорных знаний для дальнейшего изучения новой темы методом вопросов и ответов.

5. Постановка целей и задач через примеры web-страницы и блокнота. (2 мин)

(по сети на экран продемонстрировать два документа в формате WEB и Блокнот (прил3 и прил4) в папке Демонстрация)

· Систематизация понятий – (проводим через презентацию HTML)

a. Тег, атрибут, гипертекст;

b. WEB-страница, WEB-сайт; WEB-дизайн;

c. Язык разметки гипертекста HTML;

· Команды (теги), определяющие структуру WEB-документа.

· Команды (теги) форматирования текста.

Просмотр презентации, ответы на вопросы, комментарии, выписка тег и обсуждение в парах их применения.

6. Изучение нового материала в парах. Исследование файлов web-страницы и блокнота на теги. (7 мин)

· Сравнение

· Анализ

· Оценка влияния

Самостоятельная работа с раздаточным материалом (прил3 и прил4) в папке Демонстрация. (данная папка Демонстрация раздаётся на ПК перед уроком)

8. Проверка понимания изученного материала через вопросы: (2 мин)

· Теги

· Сохранение страницы

· Открытие кода

· Внесение изменений

Опрос учеников, ответы, комментарии.

9. Закрепление изученного путём выполнения практического задания. (10 мин)

Ученики получают задания на изучение готовой web-страницы с целью её изменения. Папка Задание раздаётся на ПК перед уроком.

· Исследуем готовую web-страницу

· В файле даны указания по изменению страницы

· Сохранить изменения через кодировку и показать результат.

10. Коррекция (3 мин)

Анализ решения задачи, ликвидация пробелов.

12. Обобщение изученного

Вопросы по уроку
Решение теста

Ученики получают готовый тест на решение. После выполнения идёт фронтальная проверка с анализом и самооценкой. (прил5)

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

Учащимися заполняется лист самооценки и выполняется тест на знание кодировки.

Ответы теста.

1	2	3	4	5	6	7	8	9	10
b	c	a	b	b	c	a	d	c	a

Оценка выставляется согласно выработанным критериям .

Подводится итог урока и рефлексия.

14. Итоги урока

Подведение итогов
Оценивание
Рефлексия через заполнение таблицы (плюс, минус, интересно) (прил6)

15. Домашнее задание: выучить конспект, создать собственную страничку с помощью html-языка на свободную тему.

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

Скачать материал "План урока с приложениями по информатике 11 класс по теме Язык гипертекстовой разметки"

Как учитель может зарабатывать на Инфоуроке?

Выбранный для просмотра документ Приложения.docx

Прил1

Лист самооценки

Фамилия Имя ___________________

1 этап : Проверка двух файлов на работу тегов

«5» баллов – овладел навыком открытия кода и сохранением страниц в требуемом формате без каких-либо трудностей.

«4» балла – есть небольшие затруднения при сохранении страницы в нужном формате.

«3» балла – владею навыками просмотра кодировки страниц, но испытываю трудности вносить изменения в страницу.

_________

2 этап: Выполнение задания по изменению страниц

«5» баллов – без ошибок нахожу теги, изменяю код страницы, вставляю объекты без каких-либо трудностей.

«4» балла – есть небольшие затруднения при изменении кода страницы.

«3» балла – владею навыками просмотра кодировки страниц, но мне сложно самостоятельно найти и исправить код.

__________

3 этап: Работа с тестом

«5» баллов – 9-10 правильных ответов.

«4» балла – 7-8 правильных ответов.

«3» балла – 5-6 правильных ответов.

__________

Общий бал _____________

14-15 ----- «5»

10-13 ------ «4»

9 ---------- «3»

прил2

Плюс

Минус

Интересно

Записывается все,

что понравилось на

уроке, информация

и формы работы.

Записывается все, что не понравилось

на уроке, показалось

скучным, осталось

непонятым, вызвало

неприязнь.

Записываются все

любопытные факты,

О которых узнали на

уроке и что бы еще

хотелось узнать по данной проблеме,

вопросы к учителю.

прил5

Тест на тему «Язык HTML»

1. HTML - это…

a) Текстовый файл, имеющий расширение .html;

b) Язык разметки гипертекста;

c) Инструкция браузеру, указывающая способ отображения гипертекста.

2. Какое расширение имеет HTML – файл?

a) .jpg

b) .doc

c) .html

3. Тег – это …

a) Инструкция браузеру, указывающая способ отображения гипертекста;

b) Текстовый файл, имеющий расширение .html;

c) Язык разметки гипертекста.

4. Выделите лишний структурный тег:

a) <html> </html>

b) <table> </table>

c) <body> </body>

d) <head> </head>

5. Выделите лишний тег форматирования символов:

a) <b> </b>

b) <pre> </pre>

c) <i> </i>

6. Какое действие выполняет следующий тег <h1> </h1>?

a) Создает перевод строки;

b) Создает новый «параграф»;

c) Создает самый большой заголовок

7. Найдите лишний тег оформления списков данных.

a) <u> </u>

b) <ul> </ul>

c) <ol> </ol>

8. Найдите лишний тег для создания таблицы.

a) <table> </table>

b) <tr> </tr>

c) <td> </td>

d) <i> </i>

9. Какой тег используется для вставки в веб-страницу гиперссылки?

a) <b> </b>

b) <u> </u>

c) <a> </a>

10. Какой тег описывает графический файл на веб-странице?

a) <img src=«имя файла»>

b) <head> </head>

c) <table> </table>

Прил6

Основные теги HTML.

В столбце «/» отмечается наличие парного (закрывающего) тега: + (необходим), - (отсутствует), ± (имеется, но необязателен).

Тег	/	Описание и назначение
		служебные
<HEAD>	+	«голова» html-документа, здесь располагается служебная информация
<BODY>	+	«тело» документа c link – цвет гиперссылки c alink – цвет активной гиперссылки c vlink – цвет посещённой гиперссылки c text – цвет основного текста c bgcolor – цвет фона страницы c background – адрес графического файла, который будет использован в качестве фона страницы
<TITLE>	+	заголовок странички
		абзац
<P>	±	начало абзаца c align – выравнивание (left, right, center, justify)
<CENTER>	+	выравнивание содержимого по центру
<BR>	–	разрыв строки, переход на новую строку
<H1>..<H6>	+	заголовки (принимает значения в диапазоне 1-6) c align – выравнивание
		текст
<FONT>	+	размер и цвет текста c color – цвет текста c face – имя или список имён шрифтов через запятую c size – размер
<B>	+	полужирное начертание
<I>	+	курсивное начертание
<U>	+	подчёркнутый текст
<S>	+	зачёркнутый текст
<SUP>	+	верхний индекс
<SUB>	+	нижний индекс
<MARQUEE>	+	бегущая строка c behavior – тип движения (alternate, scroll, slide) c bgcolor – цвет фона c direction – направление движения (left, right, up, down) c height – высота строки при вертикальном движении c width – ширина строки при горизонтальном движении c scrollamount – скорость в пикселях на движение
		таблица
<TABLE>	+	вставка таблицы c align – выравнивание таблицы c background – адрес фонового изображения c bgcolor – цвет фона c border – толщина рамки c width и height
<TR>	+	строка таблицы
<TD>	+	ячейка таблицы
		изображение или видеоклип
<IMG>	–	вставка изображения c src – адрес графического изображения (файла) c align – выравнивание изображения в окружающем тексте (absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top) c alt – замещающий текст c border – толщина рамки c width и height – ширина и высота изображения c hspace и vspace – горизонтальные и вертикальные поля вокруг изображения
		гиперссылка
<A>	+	гиперссылка c href – адрес c target – место загрузки документа: ü _blank – новое окно ü _parent – родительский фрейм ü _self – текущее окно или фрейм ü _top – во всё окно браузера
		фрейм
<FRAMESET>	+	разбивает окно браузера на фреймы (кадры или подокна) c border – толщина рамки c cols и rows – количество частей по вертикали и горизонтали
<FRAME>	±	загружает страницы во фрейм (кадр) c src – адрес странички, размещаемой в кадре c scrolling – отображение полос прокрутки (auto, no, yes)

На стенд

Проверка двух файлов на работу тегов

Выполнение задания по изменению страниц

Работа с тестом

HTML

Язык гипертекстовой разметки

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

Скачать материал "План урока с приложениями по информатике 11 класс по теме Язык гипертекстовой разметки"

Как учитель может зарабатывать на Инфоуроке?

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

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 664 139 материалов в базе

Найти материалы

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

Другие материалы

docx

Контрольная работа за 8 класс Математические основы информатики

Учебник: «Информатика», Босова Л.Л., Босова А.Ю.
Тема: Глава 1. Математические основы информатики

01.06.2016
1734
0

docx

Задания для дифференцированного зачета по информатике , 1 курс

01.06.2016
2072
4

pptx

Интерактивная система контроля и мониторинга качества знаний

01.06.2016
1184
5

docx

Доклад "Актуальность ИКТ в практике современного учителя в условиях ФГОС"

Рейтинг: 5 из 5

01.06.2016
4176
30

docx

Сервис LearningApps.org - виртуальный класс с интерактивным обучением

31.05.2016
671
1

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

Скачать материал
- 01.06.2016 1452
- RAR 981.8 кбайт
- 18 скачиваний
- Рейтинг: 3 из 5
- Оцените материал:
Настоящий материал опубликован пользователем Попов Константин Николаевич. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Автор материала

Попов Константин Николаевич
- На сайте: 7 лет и 10 месяцев
- Подписчики: 0
- Всего просмотров: 26591
- Всего материалов: 18