Автор: Петрова Виктория Леонидовна
Должность: Преподаватель информатики
Учебное заведение: АТК ФГБОУ ВО СПб ГУ ГА
Населённый пункт: Санкт-Петербург
Наименование материала: План занятия практического обучения
Тема: Открытый урок по теме "Технологии создания сайта при помощи языка HTML и CSS"
Раздел: среднее профессиональное
План занятия практического обучения
Общие сведения о практическом занятии:
Предмет: Информатика
для
специальности
15.02.07
Автоматизация
технических
процессов
и
производств (Нефтехимической и химической промышленности) с базовой
подготовкой.
Продолжительность проведения занятия – 2 часа
Тип занятия: урок обобщения и систематизации знаний по теме «Разработка
Web-сайтов с использованием языка разметки гипертекста HTML»
Вид занятия: разработка проектов
Форма обучения: групповая
Дата «______»_______________2020г.
Группа 1-А-121
Преподаватель: Виктория Леонидовна Петрова
Материалы, оборудование, ТСО, программное обеспечение:
компьютерный класс, проектор.
Планируемые образовательные результаты:
Предметные –
умение
работать
с
программой-браузером,
знать
правила
записи тегов, знать структуру Web-страницы
Метапредметные – умение применять знания в жизни
Личностные – способность
применять
теоретические
знания
для
решения
практических задач.
Структура урока:
1. организационный момент;
2. актуализация базовых знаний;
3. создание самостоятельного проекта;
4. рефлексия;
5. анализ и оценка работы обучающихся
6. оглашение домашнего задания.
Задачи:
Образовательная:
Учебная – Повторение основных понятий раздела программы.
Знать/ понимать:
набор необходимых инструментов для создания Web-страницы;
типичную структуру Web -страницы;
структурные теги (название и назначение), HTML- код.
Уметь:
самостоятельно составлять и планировать технологическую последова-
тельность операций;
уметь самостоятельно находить и использовать нужную информацию;
пользоваться средствами языка HTML для написания страницы: созда-
вать страницу, редактировать и форматировать Web-страницу.
Воспитательная:
Воспитывать самостоятельность учащихся – умение планировать свою
деятельность, разрабатывать стратегию и план рассуждений;
стимулирование познавательного интереса учащихся, развитие
уверенности в собственных силах;
потребности личности, мотивы социального поведения, деятельности,
ценности и ценностная ориентация, мировоззрение.
Развивающая:
развитие
мышления,
потребностей
—
мотивационной
области,
умственная деятельность: анализ, синтез, классификация, способность
наблюдать, делать выводы, выделять существенные признаки объектов,
умение
выделять
цели
и
способы
деятельности,
проверять
ее
результаты, выдвигать гипотезы;
Формировать творческий подход при создании собственной Web -стра-
ницы.
Продолжить формирование коммуникативной культуры, информацион-
ной культуры, внимательности, аккуратности, дисциплинированности
1.
Организационный момент- сообщение:
Тема
занятия:
Разработка
собственного
сайта
с
несколькими
Web-
страницами с использованием языка разметки гипертекста HTML
Цель занятия:
Повторение
основных
принципов
построения
сайтов,
структуры
HTML-документа.
Стимулирование
познавательного
интереса
учащегося
к
предмету
“Информатика”.
Развитие
умственной
деятельности,
памяти,
умения
логически
мыслить.
Научить ребят применять современное программное обеспечение.
2. Актуализация базовых знаний по теме:
Мы изучили большую тему «Создание Web-сайтов с использованием
языка разметки гипертекстовых документов HTML».
Сегодня мы с вами продолжаем знакомиться с основными приемами
разработки сайта
с
несколькими
Web-страницами
с
применением
языка
гипертекстовой разметки HTML.
К сегодняшнему дню мы уже знаем, что такое сайт и чем он отличается
от обычного текстового документа. Знаем, что Web-сайт можно создавать с
помощью специальных программ и с помощью языка HTML. Вы знаете, что
команды
HTML
задаются
с
помощью
специальных
элементов
–
тегов,
которые бывают парные и непарные. Знаете, что программы, написанные на
языке HTML, имеют определенную стандартизированную структуру.
Ранее
вы
уже
создавали
странички,
применяя
различные
стили
форматирования текста и добавляли на них графические объекты.
И вот теперь давайте с вами вспомним основные понятия, пройденные
ранее.
1.
Расскажите пожалуйста, что такое Web-сайт?
(Web-сайт - группа Web-страниц, принадлежащих одному автору или од-
ному издателю и взаимосвязанных общими гиперссылками, образующих
структуру)
2.
С помощью каких технологий можно создавать сайты?
(Сайты могут быть созданы при помощи любого текстового редактора
или специализированных HTML-редакторов, а также сайтов конструк-
торов, но они имеют меньше технических возможностей).
Выбор редактора, который будет использоваться для создания HTML-
документов, зависит исключительно от понятия удобства и личных пристра-
стий каждого автора.
3.
Как называются управляющие команды, заключенные в угловые скоб-
ки, задающие вид web-страницы?
(Теги)
4.
Какие виды тегов вам известны?
(Парные и одиночные /непарные)
Хорошо, молодцы!
Ранее Вам уже, наверное, говорили, что во Всемирной паутине Web-
сайты обычно содержат материалы по определенной теме или проблеме.
Государственные
структуры
и
организации
обычно
создают
официальные web-сайты,
на
которых
размещают
информацию
о
своей
деятельности.
Коммерческие фирмы размещают на своих сайтах рекламу товаров или
услуг.
И любой пользователь Интернета может создать свой тематический
сайт.
Вот
и
перед
Вам
предстоит
показать,
чему
Вы
научились.
Активизировав все свои знания.
Создание самостоятельного проекта
Для этого, я предлагаю Вам произвести жеребьевку. Каждый из Вас
вытащит листочек, на котором будет указан номер, соответствующий вашему
заданию в приложении с темами для выполнения практического задания по
HTML.
Далее согласно задания начните создавать страничку Вашего Web-
сайта.
Согласно Вашего номера, предлагаю переписать задание себе в
конспект.
Ход работы:
1. У Вас у каждого есть личная папка для сохранения всех файлов
разрабатываемого сайта, в ней Вам необходимо будет создать новую папку с
названием «Рабочая», в ней вы будете сохранять как Web-страницы, так и
графические файлы для Вашего Web-сайта которые вы подберёте
самостоятельно дома к следующему занятию.
2. А сейчас, Вам необходимо запустить текстовый редактор Блокнот
(Пуск – Программы – Стандартные – Блокнот) или щелкните на основном
экране
правой
клавишей
мыши-
Создать-
а
далее
выберите
редактор
–
Блокнот.
Далее:
1)
Создайте
заготовку
главной
Web-страницы,
согласно
выбранной
вами
темы
из
приложения,
например:
«Моя
биография
и
семья».
(у
каждого он будет свой, согласно жеребьевке/выбора)
2) Введите команду Файл – Сохранить как...
Главная
страница
сайта
обычно
имеет
имя “index.htm”
или
“biography.htm“ с кодировкой UTF-8
Сохраните файл в своей папке.
3) Посмотрите, как отобразится страница в браузере.
4) Вложить в свою папку заранее подготовленные к уроку домашние
заготовки (рисунки, фотографии, фоновые изображения).
Web-страницы
должны
содержать
отцентрированный
крупный
заголовок какого-либо цвета, отделенный горизонтальной линией от двух по-
разному выровненных и отформатированных абзацев.
1) На начальной странице сайта обычно размещается текст, кратко
описывающий автора и разработчика сайта, и описание содержания сайта.
2) Для каждого абзаца задаются определенные тип выравнивания и
параметры форматирования шрифта.
3)
Для
изменения
фонового
цвета
Web-страницы
воспользуйтесь
фоновыми изображениями. Или используйте какой-либо цвет из таблицы
цветов для оформления шрифта и фона Web-страниц.
4) На Web- страницах разместите панель навигации с гиперссылками на
другие страницы сайта, и просмотрите их в браузере
В качестве указателей гиперссылок удобно выбрать названия страниц,
на которые осуществляется переход.
5) Указатели гиперссылок разместите внизу страницы в новом абзаце в
одну
строку,
разделив
их
пробелами
(такое
размещение
гиперссылок
называют панелью навигации).
6) Создайте на главной Web-странице ссылку на адрес электронной
почты,
по
которой
посетители
сайта
могут
связаться
с
автором
и
разработчиком сайта.
5. Рефлексия урока
Подведение итогов:
Подведем итоги нашей работы. Мы просмотрели выполненный вами
проект.
Вы
показали
высокий
уровень
знаний
по
данной
теме.
Хочется
отметить, что никто из учащихся не отнесся к работе равнодушно, и если у
кого-то
не
все
получилось
–
не
огорчайтесь,
все
получится!
Работу
продолжим на следующем занятии.
6. Анализ и оценка работы обучающихся
Параметры оценок:
1. Активность
2. Самостоятельность работы
3. Объем, точность выполняемой работы
4. Уровень сопричастности и работы в команде
5.
Умение
применять
и
использовать
ранее
полученные
знания
в
работе, думать логически.
7. Домашнее задание:
Подобрать необходимый материал (картинки, фото, аудио/видио файлы)
Литература:
1.
«Все что нужно знать для создания первоклассных сайтов HTML
и CSS», Джон Джакетт
2.
Презентация «HTML-Язык гипертекстовой разметки»
3.
Презентация «Создание Веб-сайта. Язык HTML»