Тема урока: Создание и редактирование простейших файлов HTML в программе Блокнот
ФИЛИАЛ ГОСУДАРСТВЕННОГО БЮДЖЕТНОГО ОБРАЗОВАТЕЛЬНОГО УЧРЕЖДЕНИЯ СРЕДНЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «КРАЕВОЙ ПОЛИТЕХНИЧЕСКИЙ КОЛЛЕДЖ» в. п. Октябрьский Пермского края
Тема урока: Создание и редактирование простейших файлов HTML в программе Блокнот
Дисциплина: Информатика и ИКТ Автор: Вылежанина Л.Е.
2013 Цели: Образовательный аспект: Закрепить изученный материал об основных тегах и атрибутах для создания Web-страниц. Развивающий аспект: развивать коммуникативную и информационную компетенции; интеллектуальные и креативные способности студентов. Воспитательный аспект: содействовать воспитанию личностных качеств: коммуникабельности, нацеленности на развитие и самосовершенствование, ориентации на результат.
Задачи урока: 1. Систематизировать знания об основных тегах и атрибутах для создания простой Web-страницы. 2. Развивать общие компетенции: - осуществления поиска, анализа и оценки информации, необходимой для постановки и решения поставленных задач; - использования информационно-коммуникационных технологий в профессиональной деятельности; - развития умений межличностного взаимодействия; - оценки результатов собственной деятельности.
Гипотеза: Теги – основные атрибуты создания простого HTML-документа.
Тип урока: закрепление изученного материала по теме.
Используемые приемы, методы, технологии обучения: Приемы: • «Тонкие» и «толстые» вопросы, • «Шкала мнений», • «Мастерская вопросов».
Методы обучения: технология развития критического мышления через чтение и письмо, исследовательские (анализ и синтез полученной информации, сравнение, систематизация) с применением рефлексивной технологии, практические.
Технологии: частично-поисковые, наглядно-демонстрационные. Используемые формы организации познавательной деятельности студентов: Парное, обучение в группах малого состава, фронтальное обучение. Средства обучения: компьютеры, медиа-проектор, презентация, ресурсы Интернет
Формируемые компетенции: 1. ОК 2. Организовывать собственную деятельность, выбирать типовые методы и способы выполнения профессиональных задач, оценивать их эффективность и качество. 2. ОК 3. Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность. 3. ОК 4. Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач, профессионального и личностного развития. 4. ОК 6. Работать в коллективе и в команде, эффективно общаться с коллегами, руководством, потребителями. 5. ОК 8. Самостоятельно определять задачи профессионального и личностного развития, заниматься самообразованием, осознанно планировать повышение квалификации.
Список используемых источников: 1. Угринович Н. «Информатика и информационные технологии»: учебник для 10-11 классов, М.: Бином, 2005- 512с. 2. Копыл В.И. Информатика. Весь школьный курс в таблицах: учебное пособие – Минск: Букмастер: Кузьма, 2011.- 224с. 3. Лазарев Т.В. Образовательные технологии новых стандартов. Ч.1: Технология АМО: методическое пособие – Петрозаводск: Verso, 2012. – 255с. 4. Ресурсы Интернет.
Название этапа Содержание Методы и формы учебной работы Средства обучения Межпредметные связи Формируемые компетенции 1. Организационный момент Вступительное слово преподавателя: Добрый день! Я рада вас всех приветствовать. В течение 5 часов мы с вами учились создавать простейшие Web-страницы с помощью программы Блокнот. (оборудование, ТСО, дидактические средства и т.д.) Мультимедиа-презентация Вывод на тему урока. Этап целеполагания.
П: Тема закончилась, и нам необходимо закрепить изученный материал. Давайте вместе подумаем над темой и целью нашего урока.
Ожидаемые ответы: - для чего нужны теги; - закрепить изученную тему; - больше узнать о тегах и как они вставляются в программу; - можно ли самим создать HTML-документ. развивать культуру межличностного общения, устанавливать психологические контакты
1. Определение мотивов.
2. Осмысление проблемы.
Выдвижение гипотезы. П: Да, вы на правильном пути, и тема урока «Создание и редактирование простейших файлов в программе Блокнот», ваша цель закрепить изученный материал об основных тегах и атрибутах для создания HTML-документов. Процесс закрепления будет проходить в несколько этапов. Этап 1 состоит из 2-х частей. 1 часть – 2 человека будут работать у доски. Вам необходимо создать алгоритм составления HTML-страницы из фрагментов карточек-тегов.
2 часть – с оставшейся группой мы проведем устный опрос: Вопрос 1. Можно ли самим создать Web-страницу? Вопрос 2. С помощью, каких программ можно создавать Web-страницы?
Вопрос 3.Что называется Web-страницей? Web-сайтом?
Вопрос 4. Как называются программы для просмотра Web-страниц? Перечислите известные Вам. Вопрос 5. Что такое тег? Как он записывается? Видны ли значки тегов при просмотре страницы в браузере.
Вопрос 6. В каком формате сохраняются Web-страницы? Вопрос 7. Как происходит переход с одной страницы на другую в HTML-документах? С «тонкими» и «толстыми» вопросами вы справились. А теперь посмотрим на доску. Давайте проверим, правильно ли составлен фрагмент Web-страницы? Если имеются неточности – исправление замеченных ошибок. С заданием Вы справились, а теперь давайте создадим небольшую проблему и вставим в наш документ таблицу, макет, которой посмотрим на слайде 9. Работа всей группы. Студенты выбирают из карточек-тегов нужные элементы для создания таблицы. П: Проговаривайте, что создание горизонтальной строки начинается и заканчивается тегом …? Ячейка …? Окантовка таблицы …?
П: Какой тег используется для вставки заголовка на страницу?
П: Представим теперь, что в таблице у нас должны остаться пустые ячейки. Какой атрибут будет использован в этом случае?
П: Отвечая на поставленные мной вопросы, не возникло ли у вас никакого предположения или гипотезы к уроку? Давайте сформулируем вместе. Слайд 10.
На доске с помощью магнитов прикреплены карточки-теги (Приложение 1). Студенты в правильной последовательности размещают карточки-теги и составляют Web-страницу. Ожидаемые ответы: -да, можно.
-Текстовый редактор MS Word, текстовая программа Блокнот, программа презентаций Power Point, программа Front Page. -основной документ, используемый в WWW, который может содержать текст, рисунки, таблицы, диаграммы, анимированные изображения. Web-сайт – совокупность нескольких Web-страниц, объединенных одной темой. -Браузеры. Internet Explorer, Opera, Google Chrome, Mozilla Firefox.
-инструкция браузеру, указывающая способ отображения информации. Парный и непарный, <>, </>. Если правильно введены все теги, то нет. -HTML-документа, сохраняются с расширением . html. - с помощью гиперссылок.
<HTML> <HEAD> <ТIТLE>Пример НТМL-документа </ТIТLE> </HEAD> <BODY> Самый простой HTML-документ </BODY> </HTML>
< > Время на выполнение 10 мин. Гипотеза: Теги – основные атрибуты создания простого HTML-документа.
Карточки со словами-тегами
Английский язык
Работа с карточками на доске.
Прием «Тонкие» и «толстые» вопросы.
Прием «Шкала мнений»
Организация самоконтроля и самооценки П: Вы все неплохо поработали. Перед началом урока я вас попросила разбиться на 3 подгруппы (в каждой по 6 - 8 человек). У каждой подгруппы на столах лежат карточки-задания под номерами 1, 2 или 3, причем информация в них разная. Работа над данным заданием будет проходить в парах. На столах лежат карточки-задания в таблицах. Студенты берут карточки-задания с таблицами, в которых отсутствует информация в нескольких столбцах. Информация, которая содержится в таблице студента 1, отсутствует у студента 2, и, наоборот, та информация, которая отсутствует у студента 2, есть в таблице у студента 1. Студентам необходимо заполнить таблицу с недостающим материалом. Работая в парах, они задают друг другу вопросы о той информации, которая у них отсутствует и, получая ответы, заполняют таблицы в карточках-заданиях. (Приложение 2).
П: Вижу, с заданием вы справились. Прошу вас, поменяться карточами-заданиями между мини-группами, т.е. 1 подгруппа отдает свои карточки-задания с заполненными таблицами подгруппе 3, подгруппа 2 отдает – 1 подгруппе, а 3 подгруппа – 2.
Работа в парах по заполнению карточек-заданий (5 – 7 мин).
После того, как вся таблица в карточке-задании заполнена, проводится совместная проверка задания.
ОК 4. Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач, профессионального и личностного развития. ОК 6. Работать в коллективе и в команде, эффективно общаться с коллегами, руководством, потребителями.
Прием «Мастерская вопросов»
3. Определение аппарата исследования. П: У вас у всех появились новые карточки-задания. Как вы думаете, для чего вы поменялись информацией? Слайды 16, 17. Ожидаемые ответы: - продолжить работу; - для лучшего закрепления темы; - узнать больше о составлении Web-страниц.
4. Учебное исследование.
Определение источников информации П: Ваши ответы верны, и для закрепления материала об HTM-страницах, мы с вами проведем исследование. Мотивация: Работать вы будете за компьютерами в парах. Возьмите для работы за компьютером новые карточки-задания (те, на которые поменялись), карандаш или ручку. На компьютерных столах лежит распечатанный фрагмент HTM-страницы, а на рабочем столе в папке «ОУ Теги» вы найдете HTM-файл «1tabl_Фамилия». Провести исследование электронного файла «1tabl_Фамилия» по заполненным таблицам карточек-заданий 1, 2 или 3 и подчеркнуть обнаруженные теги в распечатанном фрагменте HTM-страницы (приложение 3). П: Время на выполнение исследования закончилось. Выключите компьютеры и садитесь по своим подгруппам. Работают в парах, с источниками исследования: подчеркивают в текстовом файле найденные элементы тегов по заполненным карточкам-заданиям, исследуя текстовый документ и документ HTML под именем «1table_Фамилия». Время выполнения 15 мин. Учащиеся выполняют задание в группах малого состава. ОК 3. Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность. ОК 4. Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач, профессионального и личностного развития.
5. Закрепление материала. Обратите внимание, у вас на столах лежат предложения к карточкам-заданиям 1, 2 или 3 (Приложение 4). Каждый из вас берет карточку с предложениями, из которых необходимо правильно составить вопрос, при этом предложения у вас разные. По цепочке в быстром темпе первый студент формулируют вопрос, а его сосед отвечает по информации из таблицы, затем второй студент формулирует второй вопрос, третий студент отвечает на него и так далее. Работа в мини-группах – ответы на вопросы (5 – 7 мин).
Контроль правильности формулирования вопроса и ответа студентов со стороны преподавателя. Литература, Русский язык ОК 6. Работать в коллективе и в команде, эффективно общаться с коллегами, руководством, потребителями.
Прием «Мастерская вопросов».
6. Подведение итогов урока. Рефлексия. П: Вернемся к нашей гипотезе. Гипотеза: Теги – основные атрибуты создания простого HTML-документа. Скажите, удалось нам сегодня подтвердить гипотезу? П: Какую полезную информацию вы получили сегодня на уроке? П: Как и где вам пригодятся знания о тегах? А как будущим специалистам? Домашнее задание: Составить схему HTML-документа об учебе в ГБОУ СПО «КПК» по своей специальности «Техническое обслуживание и ремонт автотранспорта».
Ожидаемые ответы: Гипотеза доказана.
Открытый диалог.
Выставление оценок за работу.
ОК 3. Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность. ОК 8. Самостоятельно определять задачи профессионального и личностного развития, заниматься самообразованием, осознанно планировать повышение квалификации.
Приложение 1 <HTML> и </HTML> HTML-документ <HEAD> и </HEAD> Имя документа <ТIТLE> и </ТIТLE> секция заголовка отображается в окне Браузера <BODY> и </BODY>) секция тела документа Пример НТМL-документа Первый HTML-документ <HTML> <HEAD> <ТIТLE> Пример НТМL-документа </ТIТLE> </HEAD> <BODY> Самый простой HTML-документ </BODY> </HTML> <TABLE> <TABLE BORDER="1"> <TR> <TR> <TH> <TD> </TR> </TR> </TH> </TD> </TR> </TR> Заголовок таблицы 1 Заголовок таблицы 2 <H3>Таблица1</H3> столбец 1, строка 1 столбец 2, строка 1 столбец 1, строка 2 столбец 2, строка 2 <TD colspan=2>столбец 1+2, строка 3</TD> </TABLE> < > < > < > < > <TD rowspan=2>столбец 2, строка 4+5</TD> <TD> столбец 1, строка 4</TD> <TD> столбец 1, строка 5</TD> <TR> </TR> <TR> </TR> <TR> </TR> <TR> </TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD>
Приложение 2 Карточка-задание 1. Эталон Ячейка таблицы Выравнивание таблицы по центру Выравнивание текста по центру в строке .html colspan Ширина столбца Заголовок текста <TD>…</TD> <TABLE ALIGN="CENTER"> <TR ALIGN="CENTER"> Расширение HTML-файлов Объединение ячеек по горизонтали WIDTH=?(число) <H3>…</H3>
Карточка-задание 2. Эталон Определить таблицу <TR>…</TR> Окантовка таблицы   rowspan ссылка на другую страницу Нумерованный список <TABLE>…</TABLE> Строка таблицы <TABLE BORDER=?(число) Символьный примитив пробел Объединение ячеек по вертикали <A HREF=”URL”> текст </A> <OL>…</OL>
Карточка-задание 3. Эталон <OL TAPE=I> <FONT COLOR="цвет"> Вставка графического изображения <BODY BGCOLOR="цвет"> <BODY>…</BODY> <HTML>…</HTML> Блокнот Нумерованный список I маркер римские цифры Цвет текста <IMG SRC="grafica.gif" Цвет страницы Тело документа Документ, заключенный в теги Программа для создания простого HTML-документа
Карточка-задание 1. Заполнить столбцы таблицы недостающей информацией Ячейка таблицы Выравнивание текста по центру в строке colspan Ширина столбца <TABLE ALIGN="CENTER"> Расширение HTML-файлов <H3>…</H3>
Карточка-задание 2. Заполнить столбцы таблицы недостающей информацией Определить таблицу Окантовка таблицы rowspan ссылка на другую страницу Строка таблицы Символьный примитив пробел <OL>…</OL>
Карточка-задание 3. Заполнить столбцы таблицы недостающей информацией <OL TAPE=I> Вставка графического изображения <HTML>…</HTML> Цвет текста Цвет страницы Тело документа Программа для создания простого HTML-документа
Карточка-задание 1. Заполнить столбцы таблицы недостающей информацией Выравнивание таблицы по центру .html Заголовок текста <TD>…</TD> <TR ALIGN="CENTER"> Объединение ячеек по горизонтали WIDTH=?(число)
Карточка-задание 2. Заполнить столбцы таблицы недостающей информацией <TR>…</TR>   Нумерованный список <TABLE>…</TABLE> <TABLE BORDER=?(число) Объединение ячеек по вертикали <A HREF=”URL”> текст </A>
Карточка-задание 3. Заполнить столбцы таблицы недостающей информацией <FONT COLOR="цвет"> <BODY BGCOLOR="цвет"> <BODY>…</BODY> Блокнот Нумерованный список I маркер римские цифры <IMG SRC="grafica.gif" Документ, заключенный в теги
Приложение 4 Предложения к карточке-заданию 1. 1. Для задания ячейки таблицы используется тег <TD></TD>. 2. Для выравнивания таблицы по центру используется тег <TABLE ALIGN=”CENTER”>. 3. Для выравнивания текста в строке по центру (левому/правому краю) используется тег <TR> ALIGN=”CTNTER”(LEFT/RIGHT)>. 4. Для сохранения файла в формате HTML-страницы используется расширение .html. 5. Для объединения ячеек по горизонтали используется параметр colspan. 6. Ширина столбца задается с помощью параметра WIDTN=?(число). 7. Заголовок текста задается тегом <H?><H/?> Примечание. Из 1 предложения, составить вопрос и задать соседу, сосед отвечает по информации из таблицы, затем второй учащийся формулирует вопрос 2, третий учащийся отвечает на него и так далее. Предложения к карточке-заданию 2. 1. Тег, который указывает браузеру, что HTML-документ содержит таблицу <TABLE></TABLE>. 2. Строка таблицы задается с помощью тега <TR>…</TR>. 3. Параметр   используется в пустых ячейках таблицу (если в ячейку не вводится информация). 4. Для окантовки таблицы используется тег <TABLE BORDER=?(число)>. 5. Для объединения ячеек по вертикали используется параметр rowspan. 6. Гиперссылка на другую страницу задается с помощью тега <A HREF=”URL”> текст </A> 7. Нумерованный список задается тегом <OL>…</OL>. Примечание. Из 1 предложения, составить вопрос и задать соседу, сосед отвечает по информации из таблицы, затем второй учащийся формулирует вопрос 2, третий учащийся отвечает на него и так далее. Предложения к карточке-заданию 3. 1. Нумерованный список с маркером римские цифры задается тегом <OL TAPY I>. 2. Цвет текста задается тегом <FONT COLOR=”цвет”>. 3. Для вставки графического используется тег <IMG SRC=”URL адрес и имя файла”>. 4. Цвет страницы задается тегом <BODY BGCOLOR=”цвет”>. 5. Тело документа задается тегом <BODY>…</BODY>. 6. HTML-документ заключается в теги <HTML>…</HTML>. 7. Для создания простой HTML-страницы используется программа БЛОКНОТ. Примечание. Из 1 предложения, составить вопрос и задать соседу, сосед отвечает по информации из таблицы, затем второй учащийся формулирует вопрос 2, третий учащийся отвечает на него и так далее.
Уважаемая Людмила Евгеньевна сообщаю Вам, что данная работа прошла техническую экспертизу и допущена к участию в Конференции. Технический эксперт Мухина Ирина Анатольевна
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]