Четверг, 23.11.2017, 12:01
Приветствую Вас Гость | Регистрация | Вход

Факультет мультимедиа технологий образовательного портала "Мой университет"


Главное
Каникулы с МУ
Обучение ИКТ и ММ
Конференция 4 ММ
Конкурс ИКТ - ФГОС
Конкурсы по ИКТ
Фестиваль ММ
Мультимедиатека
Рассылка
Статистика
Яндекс.Метрика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Каталог статей

Главная » Статьи » Информатика » Информатика

Тема урока: Создание и редактирование простейших файлов 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>

<TABLE>
<TABLE BORDER="1"> <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>

< >
Время на выполнение 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"
Документ, заключенный в теги

Приложение 3

<HTML>
<HEAD>
<TITLE>Фамилия – третий</TITLE>
</HEAD>
<BODY>
<BODY BGCOLOR=yellow>
<H3><p align=center> Таблица 1.</H3>
<table align="center" border="2">
<TR>
<TD WIDTH=35>  </TD>
<TD WIDTH=35>  </TD>
<TD WIDTH=35>  </TD>
</TR>
<TR ALIGN=CENTER>
<TD>  </TD>
<TD> *</TD>
<TD>  </TD>
</TR>
<TR>
<TD>    </TD>
<TD>    </TD>
<TD>    </TD>
</TR>
</TABLE>
<BR>
<H3><p align=center> Таблица 2.</H3>
<table border="3">
<TR>
<TD bgcolor="blue">  </TD>
<TD bgcolor="green">  </TD>
<TD WIDTH=35 bgcolor="red">  </TD>
</TR>
<TR>
<TD>  </TD>
<TD><img src=pic_11.gif></TD>
<TD  </TD>
</TR>
<TR>
<TD WIDTH=55>  </TD>
<TD>  </TD>
<TD>  </TD>
</TR>
</TABLE>
<BR>
<H3><p align=center> Таблица 3.</H3>
<table align="RIGHT" border="1">
<TR>
<TD>Фамилия</TD>
<TD WIDTH=35>  </TD>
<TD WIDTH=35>  </TD>
</TR>
<TR>
<TD><OL TYPE=I><FONT COLOR=”brown”>
<LI>Антонов</LI>
<LI>Базаров</LI>
<LI>Иванов</LI>
</OL>
</TD>
<TD>  </TD>
<TD>  </TD>
</TR>
<TR>
<TD colspan=3></TD>
<TD>  </TD>
<TD>  </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Приложение 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, третий учащийся отвечает на него и так далее.
Категория: Информатика | Добавил: ludmilalev69 (18.06.2013) | Автор: Вылежанина Людмила Евгеньевна E
Просмотров: 1213 | Комментарии: 1 | Теги: Web-сайт, теги, язык HTML, Блокнот | Рейтинг: 0.0/0
Всего комментариев: 1
1  
Уважаемая Людмила Евгеньевна   сообщаю Вам, что данная работа прошла техническую экспертизу и допущена к участию в Конференции.       
Технический эксперт Мухина Ирина Анатольевна

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]