Напоминание

Открытый урок по теме "Технологии создания сайта при помощи языка HTML и CSS"


Автор: Петрова Виктория Леонидовна
Должность: Преподаватель информатики
Учебное заведение: АТК ФГБОУ ВО СПб ГУ ГА
Населённый пункт: Санкт-Петербург
Наименование материала: План занятия практического обучения
Тема: Открытый урок по теме "Технологии создания сайта при помощи языка 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»



В раздел образования