Министерство транспорта Российской Федерации

Федеральное агентство морского и речного транспорта

Печорское речное училище – филиал Федерального государственного образовательного учреждения высшего профессионального образования

«Санкт-Петербургский государственный университет водных коммуникаций»

Методическая разработка

открытого урока по дисциплине

«Интернет-технологии»

Тема: Создание простой Web-страницы

 на языке HTML.

Изучение приемов форматирования абзацев

г.Печора

2010г.

Составитель: Назаренко М.А.

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

Учебная дисциплина «Интернет-технологии» является факультативной дисциплиной, предназначена для приобретения практических навыков работы на персональном компьютере в глобальной сети Интернет, необходимых для лучшего освоения общепрофессиональных и специальных дисциплин.

Учебная дисциплина содержит практические задания расширенного и углубленного характера по основным разделам учебных дисциплин «Информатика» и «Информационные технологии». Задания снабжены подробными указаниями для исполнения и рисунками для наглядности.

Тема открытого урока «Создание простой web-страницы на языке HTML. Изучение приемов форматирования абзацев».

В результате изучения темы студент должен

иметь представление:

• о способах создания и форматирования простейшего html-документа.

знать:        

• основные команды меню web-редактора HtmlPad FisherMan, при помощи которых создаются простейшие html-документы;
• способы создания и форматирования html-документа.

уметь:

• создавать и форматировать простейший html-документ.

Актуальность выбранной темы открытого урока заключается в необходимости  владения навыками создания web-документов, учитывая, что в настоящее время очень развиты Интернет коммуникации. Необходимо знать структуру организации web-пространства и web-документов.

Каждый этап урока разработан так, чтобы обучение стало наиболее эффективным -  применяются различные информационные технологии. Информация представляется учащимся не только на слух, но и визуально. На этапе объяснения нового материала - это использование презентации, а на этапе закрепления – выполнение практической работы и электронное тестирование.

Методическая цель открытого урока: показать коллегам методику проведения комбинированного урока с использованием информационных технологий.

Дидактические единицы:

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

html-документ, web-страница,

тег, атрибут тега,

значение атрибута.

Открытый урок по дисциплине

«Интернет-технологии»

Группа – 31  Дата – 2.12.2010г.

Преподаватель – Назаренко М.А.

Тема: Создание простой Web-страницы на языке HTML.

Изучение приемов форматирования абзацев

I.        Цели:

Образовательная:

• сформулировать основные принципы создания WEB -страниц;
• познакомить учеников с основными командами оформления текста;
• продемонстрировать использование этих команд на конкретных примерах оформления WEB -страниц;
• формировать навыки и умения создания простейших WEB -страниц.

Развивающая:

• формировать умение пользоваться полученными знаниями;
• формировать понимание необходимости владения знаниями, умениями и навыками по дисциплине;
• развивать психические процессы такие как внимание, логическое мышление, зрительная и слуховая память;
• вырабатывать умения сопоставлять, сравнивать, анализировать, делать выводы,  применять полученные знания в новой ситуации;

Воспитательная:

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

II.        Методика обучения: информационная технология.

        Методы обучения: наглядный, практический, самостоятельная работа.

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

IV.        Межпредметные связи: информатика, информационные технологии, английский язык

V.        Оборудование: 

• компьютеры;
• проектор;
• методические указания к практической работе;
• тесты в электронном виде;
• презентация по теме.

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

В конце урока студенты смогут создать простейший web-документ.

6. Структура урока:

ПЛАН УРОКА

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

Приветствие.

Напоминание о технике безопасности.

Сообщение плана урока.

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

Вопросы для актуализации знаний:

Какие типы редакторов для создания web-страницы вы знаете? (визуальные и текстовые)

В чем их принципиальное отличие?

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

3. Изложение нового материала. Просмотр презентации.

(см. Приложение 1).

Систематизация понятий: гипертекст; WEB-страница, WEB-сайт; WEB-дизайн; язык разметки гипертекста HTML.

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

Команды (теги) форматирования абзаца.

Примеры использования тегов форматирования.

4. Закрепление нового материала

1. Выполнение практической работы

Разъяснение хода практической работы (см. Приложение 2).

Критерии оценки за практическую работу.

Консультация учащихся.

Практическая работа № 5 «Создание простой Web-страницы на языке HTML. Изучение приемов форматирования абзацев»

Физкультминутка (зарядка для глаз).

2. Тестирование

Вопросы для тестирования (см. Приложение 3).

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

Анализ результатов выполнения практической работы.

Выставление оценок за урок.

Приложение 1

Кадры презентации к уроку (этап объяснения нового материала)

Приложение 2

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

Тема: Создание простой web-страницы на языке HTML. Изучение приемов форматирования абзацев.

Цель занятия. Изучение способа создания простейшей web-страницы на языке HTML.

Задание 5.1. Создание простейшей Web-страницы.

1. Запустите редактор HtmlPad FisherMan (Пуск • Все программы • HtmlPad FisherMan).

2. Используя меню редактора и команды на вкладке HTML/Общие введите следующий документ:

Содержание документа

3. Сохраните этот документ в своей папке под именем first.html

4. На рабочей панели нажмите значок браузера Internet Explorer, посмотрите, как отображается ваш документ.

Задание для самопроверки:

Где отображается содержимое элемента title?

Где отображается содержимое элемента body?

Проверьте, что происходит при уменьшении ширины окна.

Задание 5.2. Изучение приемов форматирования абзацев.

1. Удалите весь текст, находящийся между тегами  и . Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега .  Используя команды на вкладке HTML/Текст дополните документ.

2. Введите следующий текст: Заголовок первого уровня, заключив его между тегами

и

3. Ниже введите Заголовок второго уровня, заключив этот текст между тегами

 и

4. Далее введите отдельный абзац текста, начав его с тега

. Введите следующий текст: Это моя первая страница HTML. Введите закрывающий тег

5. Введите тег горизонтальной линии

6. Создайте еще один абзац текста и выровняйте его по центру, начав его с тега <р> и применив к этому тегу атрибут align со значением center. Введите следующий текст: Этот параграф выровнен по центру.

7. Сохраните этот документ под именем paragraph.html

8. На рабочей панели нажмите значок браузера Internet Explorer, посмотрите, как отображается ваш документ.

9. Далее добавьте абзац, в котором будет изменено начертание шрифта. Для этого введите следующий текст:

В этом параграфе мы изменяем начертание шрифта. 

Этот текст выводится жирным шрифтом.

10. Введите тег горизонтальной линии зелёного цвета шириной 80% и толщиной 20 пикселей. Для этого введите

11. Далее добавьте в документ абзац с переносами строк и с измененным начертанием шрифта. Для этого введите строку:

Это
пара
граф с переносами строк.

Текст этого параграфа выводится курсивом.

12. Добавьте еще один абзац с комментариями в HTML. Для этого введите строки:

 = right> Этот текст будет показан в окне браузера и выровнен по правому краю.

13. Сохраните этот документ под тем же названием.

14. Нажмите значок браузера Internet Explorer, посмотрите, как отображается ваш документ.

Задание для самопроверки:

Установите соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране.

Дополнительное задание.

По уже известному виду HTML–странички восстановите HTML – код.

Подсказка: в теле данного документа использованы тэги, определяющие, заголовки первого и третьего уровней, абзац, горизонтальные линии толщиной 10 , 4 и 1 пикселей, одна из них имеет ширину 50%, другие 100%. Линия толщиной в 10 пикселей – красного цвета (red), линия в 1 пиксел – желтая (yellow), располагается внизу.

Приложение 3

Вопросы для тестирования на этапе закрепления нового материала

1. Что такое гипертекст?

1. гипертрофированный текст
2. текст с перекрестными ссылками        √
3. текст имеющий много значений
4. текст из гиперпространства

2. Что такое HTML?

1. гиперъязык разметки текста
2. язык разметки гипертекста                √
3. язык программирования
4. язык племени Майа

3. Как называются команды в угловых скобках ?

1. теги                 √
2. атрибуты
3. значения

4. Сколько пар обязательных тэгов Вам известно?

1. 6
2. 3
3. 4                        √
4. гораздо больше

5. Для чего нужны в html?

1. для объяснения читателю смысла страницы
2. для заметок, предназначенных только для читателя
3. для скрытия смысла документа
4. для заметок, предназначенных только для пользования автором        √

6. Между какими тэгами находится название документа?

1. ..

2. ..

3. ..
4.         √

7. Между какими тэгами находится содержимое тела документа ?

1. ..        √

2. ..

3. ..
4.         

8. Какая пара тэгов определяет абзац в документе?

1. ..

                   √

2. ..

3. ..

4. ..

СПИСОК ЛИТЕРАТУРЫ

1. Молодцов В.А., Современные открытые уроки информатики 8-11 классы. - 2-е изд. перераб. и доп. – Ростов-на-Дону: Феникс, 2003. - 352с.
2. Угринович Н.Д., Информатика и информационные технологии. 10-11 классы. - М.: БИНОМ. Лаборатория знаний, 2003. — 512 с.
3. Семакин И.Г., Информатика. Базовый курс – 9 класс. - М.: БИНОМ. Лаборатория знаний, 2005. — 371 с
4. Шелепаева А.Х. Поурочные разработки по информатике: 8-9 классы. – 2 изд., перераб. и доп. – М.: ВАКО, 2006. – 272 с.
5. Шелепаева А.Х. Поурочные разработки по информатике: базовый уровень. 10-11 классы. – М.: ВАКО, 2007. – 352 с.