Конспект урока по информатике в 9 классе

Тема: «Технология создания сайта»

Учитель: Новак Ольга Ивановна, учитель информатики МБОУ лицей №10 г. Ставрополя

Тип урока: урок открытия нового знаний

Решаемые учебные задачи:

- Расширить, обобщить и систематизировать представление обучающихся о технологии создания web-сайтов;

- Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций;

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

- Закрепить представления о сетевом этикете;

- Закрепить навыки безопасного поведения в сети Интернет.

Предметные УУД	Метапредметные УУД	Личностные УУД
• Практическое применение навыков конструирования web-сайтов	Регулятивные УУД -  планировать личную деятельность; осуществлять самоконтроль; прогнозировать результаты. Познавательные УУД - уметь осознанно строить речевое высказывание, формулировать ответы на вопросы учителя и одноклассников;   уметь извлекать нужную информацию из текста; осуществлять актуализацию полученных знаний. Коммуникативные УУД - формировать умения слушать и вступать в диалог; развивать умения взаимодействовать в группе.	- ответственное отношение к учению, готовность и способность к саморазвитию и самообразованию на основе мотивации к обучению и познанию.

Ход урока

Этап урока	Деятельность учителя	Деятельность обучающихся
1. Организационный момент	Приветствие. Добрый день, ребята. Посмотрите на экран (Слайд 1), и выскажите предположения о теме нашего урока. (ответы детей). Замечательно, молодцы.	Настраиваются на работу, отвечают на вопросы учителя
2. Актуализация знаний.	А как вы думаете, как создаются сайты? Из чего они состоят? Конечно, одна из самых наиболее популярных профессий в сфере IT-технологий – это сайтостроение. А  вы знаете кто создает сайты? Как называется эта профессия? Хорошо, молодцы Скажите, а вы встречали такие слова (Слайд 2) Web- сайт Web- страничка Web- дизайн Web- технологии Web- разработчик Web- программист Что такое Web? Хорошо, молодцы Web - это средство представления информации в Интернете. А как вы думаете, как создаются сами Web-странички?	(заголовок, картинки, текст, футер) Пробуют ответить на вопросы
3. Изучение нового материала. Первичное применение нового знания	Задание на опережение (работа в группах) 1 группа. Web-страницы могут быть созданы с помощью обычного текстового редактора; редактора, способного сохранять в формате HTML; специализированного редактора; специализированной системы. Основой создания Web-сайтов и Web-страниц является язык гипертекстовой разметки HTML. Группа 2. Существуют программы-помощники, конструкторы создания сайтов. Например, «Конструктор сайтов», Тильда, Викс (краткая информация) Группа 3. HTML-документы сохраняются на диске как обычные текстовые документы, а для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений .html. В HTML-документах используются специальные управляющие последовательности символов — тэги. (слайд 4) Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается от начального только присутствием символа "/", добавляемого перед именем тэга. При интерпретации тэгов браузер не делает различия между строчными и прописными буквами. Поэтому сами тэги можно набирать на любом регистре. Зачастую параметр (атрибут) является необязательной величиной и его можно пропускать.	Применение технологии «Перевернутый класс», обучающиеся выступают по группам
4. Обобщение и систематизация знаний	Практическая работа по созданию веб-страницы	Выполняют практическую работу
6. Рефлексия	Какую веб-страницу вы хотели бы создать сами?
7.  Домашнее задание.	Параграф 5.1, подготовить рассказ на тему «История создания сайтов»

Приложение 1

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

1. Исходные файлы: находятся в папке ВОВ

Перед выполнением задания скопируйте все файлы из папки ВОВ в свою рабочую папку.

2. Загрузить программу Блокнот (ПУСК – Программы – Стандартные)

3. Открыть готовый текстовый файл «для веб-страницы.txt»

Замечание. На каждом шаге будете добавлять новый тэг – он выделен жирным шрифтом. Остальные тэги остаются без изменения.

4. В начале текста разместить тэг, указывающий, что данный документ является HTML-текстом (т.е. обязательный тэг для Web-страницы):

…

текст

…

5. Создание заголовка Web-страницы:

        (заголовок страницы)

…

текст

…

6. Сохраните документ в своей рабочей папке под именем indeх.htm– для этого выполните команду Файл – Сохранить как

7. Открыть программу Internet Explorer (ПУСК – Программы). Работать будем автономно!

Открыть Web-страницу – команда Файл – Открыть; выбрать нужный файл и щелкнуть по кнопке «Обзор…»

Замечание. Будете продолжать редактирование файла index.htm, не закрывая InternetExplorer: для этого через панель задач переключиться на программу Блокнот, в которой открыт файл index.htm.

8. Определение тела документа:

для этого необходимо вставить тэги …

Страница получит вид:

…

текст

…

Замечание. Сохранить редактируемый в Блокноте файл (Файл – Сохранить) и, переключившись через панель задач на InternetExplorer, выполнить в браузере команду Вид – Обновить (или щелкнуть по кнопке «Обновить»).

9. Разбить текст на несколько абзацев:

для этого имеется тэг
(его действие аналогично нажатию клавиши Enter в процессоре Word). Поставить тэг
перед словами:

1. «Почетного...»

2. «Впервые…»

3. «В сентябре…»

10. Оформить красную строку: для этого нужно вставить несколько символов пробела  (вставьте 4 пробела) – после каждого тэга
 и перед началом всего текста- т.е.

    

11. Между абзацами вставить по одной пустой строки – для этого добавить еще один тэг

12. Выровнить абзацы по ширине: для этого перед текстом поставить тэг, после текста – тэг

13.Вставить к тексту заголовок: для этого после поставить тэг

города герои

 и выровнять его по центру страницы – дополнить этот тэг, чтобы получилось

align="center">города герои

Замечание. Изменяя цифру от 1 до 6, можно получить заголовки шести уровней. Попробуйте, не забывая при этом замечание п. 7.

14. Изменение фона страницы и цвета текста: для этого добавить в тэг

Замечание.  Код цвета фона и текста можно подобрать другие. Запись цвета - в формате RGB

Цвет	#RRGGBB (код)	Цвет	#RRGGBB (код)
Black— черный	#000000	Рurple — фиолетовый	#FF00FF
White — белый	#FFFFFF	Yellow — желтый	#FFFF00
Red— красный	#FF0000	Вrown — коричневый	#996633
Сreen — зеленый	#00FF00	Оrangе — оранжевый	#FF8000
Аzure — бирюзовый	#00FFFF	Violet— лиловый	#8000FF
Вlue — синий	#0000FF	Gray — серый	#А0А0А0

Более полный перечень цветов – см. файл Приложение 2.

Просматривайте Web-страницу после внесения изменений (не забывайте о замечании п.7)

15. Расположение текста на экране: редактируемая страница при просмотре в браузере имеет недостаток -  слишком широкий текст, который неудобно читать. Чтобы «сузить» текст можно использовать для разметки страницу таблицу с невидимыми границами (атрибут bolder).

После тэга вставить тэги таблицы

, состоящей из одной строки и трех ячеек

….

Заголовок

Текст

…

в этой строке: <table bolder=0> <tr>

16. Изменение начертания шрифта (т.е. выделение фрагментов текста): выделить слова «Города Герои» (1-й абзац) – полужирным, 3-й абзац – курсивом. Для этого в тексте поставить тэги

 Города Герои и  …

Замечание. Способы выделения текста:- полужирный, -курсив,  - подчеркивание (парные тэги!Не забывайте ставить закрывающий тэг)

17. Изменение размера шрифта: текст

Замечание.        Цифру можно изменять от 1 до 7 (7 – самый крупный шрифт, 1 – самый мелкий)

Сделайте для 1-го абзаца шрифт 5, для 4-го абзаца – шрифт 4

Вставка рисунка: после тэга

Города Герои

вставить тэг

(рисунок вставляем по центру сразу после заголовка)

Внимание !Рисунок gorod.jpg должен находиться в той же рабочей папке, куда сохранили своюWeb-страницу. Формат рисунка должен быть jpeg.

Для этого скопируйте рисунок gorod.jpg из папки ВОВ в свою рабочую папку.

18. Сохраните изменения в Блокноте и просмотрите Web-страницу в браузере InternetExplorer.

19. Вставка «бегущей строки»: после заголовка

 Города Герои

вставить тэги

height=30 width=100%

hspase=5 vspase=5 align=middle

bgcolor=yellow

direction=left loop=infinite behavior=scroll

scrollamount=5 scrolldelay=100>

Запишите Вашу фамилию, имя

Не забудьте сохранить задание.