Визитная карта урока
Характеристика группы
201 группа. В группе 15 человек.
Дисциплина.
Информатика и ИКТ.
Дата проведения
27.04.2018
Преподаватель
Капуста Светлана Георгиевна
Форма проведения
занятия
Урокпрактикум
Тема
Цель
Задачи
Оборудование
Этапы
Организационный
Сообщение темы и
цели урока
Актуализация
знаний.
Практическое занятие: «Web – сайт».
Формировать умение применять полученные теоретические знания по теме «Веб сайт»
при работе по созданию сайта.
способствовать развитию информационной культуры; развивать
образовательная: отработать навыки использования основных тэгов языка HTML при
создании Webсайта в текстовом редакторе Блокнот, научить обучающихся вносить
изменения в созданную Webстраницу;
развивающая:
эмоциональную сферу: формировать положительные эмоции к процессу обучения;
воспитательная:
создать условия для развития познавательного интереса,
самостоятельности, воспитывать интерес к занятиям информатикой как возможной
области будущей практической деятельности.
Раздаточный материал, ПК, проектор, экран.
Структура занятия
Задачи этапа
Содержание
Настроить на урок. Сконцентрировать внимание
студентов.
Подготовка к уроку, приветствие.
Сообщение темы и цели урока.
Подведение к теме урока
Проверить уровень знаний, полученных на прошлых
занятиях. Вспомнить теги, изученные на
теоретическом занятии для дальнейшего выполнения
практической работы.
Выполнение студентами работ по
карточкам, фронтальный опрос,
работа с тетрадью и раздаточным
материалом.
Практическая
работа
Выполнить практическую работу по форматированию
ранее созданных вебстраниц и создание
дополнительно своей страницы
Закрепление
знаний
Закрепить полученные знания на этом уроке.
Выполнение студентами
практической работы, освоение
умений применять на практике
полученных знаний
Анализ результатов и выявление
основных ошибок при выполнении
практической работы.
Подведение итогов
Оценить работу студентов. Подвести итоги по данной
теме.
Выставление оценок, ответы на
появившиеся вопросы.
Домашнее задание
Закрепить полученные знания во внеурочное время.
Объяснить форму выполнения
домашнего заданияХОД ЗАНЯТИЯ
1. Организационная часть.
Приветствие, проверка отсутствующих и готовность к уроку
2. Сообщение темы и целей занятия.
Сегодня мы продолжаем работать над изучением темы: «Webсайт», будем
отрабатывать на практике навыки использования тегов языка HTML, сначала
вспомним теги, которые мы уже научились применять, а потом познакомимся с
тегами, которые позволят нам красиво оформить созданные ранее веб – странички.
3. Актуализация знаний.
1.Проверка знаний, полученных на прошлых уроках:
Работа по карточкам:
Фамилия, Имя___________________________________группа___________число____________
Проверочная работа по информатике на тему: «Web – сайт»
Установить соответствие:
Webстраница (документ HTML) представляет собой
Для вставки изображения в документ HTML используется
команда
Тег, который содержит слова, появляющиеся в строке
заголовка браузера
Программа для создания Webстраницы с использованием
языка HTML
HTML (HYPER TEXT MARKUP LANGUAGE)
![]()
Блокнот
Средство при создании Webстраниц
….
Текстовый файл с расширением htm или html
Тег, задающие размер заголовка
…
Контейнер для разделения текста на абзацы
Тег
Имена свойств, принимающие определенные значения,
включаются в тег
Инструкция браузеру, указывающая способ
отображения текста
Атрибуты
Контейнер …
Тело документа
<Р1>….Р1>
Тест по информатике на тему «Web - страница»
1. Язык HTML – это
а. Текстовый файл, имеющий расширение .html;
б. Язык разметки гипертекста;
в. Инструкция браузеру, указывающая способ отображения гипертекста.
2. Какое расширение имеет HTML – файл?
.jpg
.doc
.html
а.
б.
в.
Тег – это …
3.а. Инструкция браузеру, указывающая способ отображения гипертекста;
б. Текстовый файл, имеющий расширение .html;
в. Язык разметки гипертекста.
Выделите лишний структурный тег:
а.
б.
в.
г.
4.
5. Какое действие выполняет следующий тег
?
а. Создает перевод строки;
б. Создает новый «параграф»;
в. Создает самый большой заголовок
Найдите лишний тег оформления списков данных.
а.
б.
в.
6.
8.
9.
7. Какой тег описывает графический файл на вебстранице?
а.
![]()
б.
в.
В какой тег заключается основное содержание webстраницы?
а.
б.
Каким тегом объявляется webстраница?
а.
б.
в.
г.
в.
г.
10. Каким тегом объявляется заголовок webстраницы?
а.
б.
11. В какой тег заключается основное содержание webстраницы?
а.
б.
12. В какой тег заключается название webстраницы?
а.
б.
13. Для перехода текста на новую строку используется тег…
а.
б.
в.
г.
в.
г.
в.
г.
в.
г. д.
Работа у доски:
е. Даны теги, расположить их в нужном порядке, записать на доске.
ж.
з.
и.
к.
л. Название Webстраницы
м. На этой странице можно разместить любую интересную информацию в
Интернете.
Фронтальный опрос:
Что называют тегом? (команды языка HTML, ограниченные угловыми
скобками)
Какие бывают теги? (одиночные и парные)
Парные в свою очередь делятся на… (открывающий тег и закрывающий тег)
Как называется такая пара тегов? (контейнер)
Чем запись открывающегося тега отличается от записи закрывающегося тега?
(закрывающийся тег записывается так же как и открывающийся, но с
символом «/» перед именем тега)
Какие тэги (контейнеры) должны
HTMLдокументе
присутствовать в
обязательно?
(…, …,
…)
Какова логическая структура
Web
страницы? (слайд)
н. (Отвечает студент, работающий у
доски)
о. Структура
Web
страницы (слайд)
п.
р.
с.
Название Webстраницы
т.
у.
ф. На этой странице можно разместить любую интересную информацию в
Интернете.
х.
ц.
ч.
Некоторые теги имеют атрибуты, которые являются именами свойств и могут
принимать определённые значения и влияют на внешний вид Webстраницы. На
слайде указать тег, атрибут и значение атрибута.
ш.
<Н1 ALIGN="center">Bce о компьютереН1>(слайд)щ.
Дан программный код вебстраницы, есть ли здесь ошибки, если
есть, то какие? (слайд)
ы.
э.
ю. Драматические театры СанктПетербурга
я.
аа.
аб.
Драматические театры
ав.
аг.
СанктПетербурга
ад.
ае.
Драматический театр им.Комиссаржевской
аж.
аз.
Драматический театр на Литейном
аи.
Большой драматический им.Товстоногова
ак.
ал.
Малый драматический театр «Европа»
ам. Правильный код: (слайд)
СанктПетербурга
ан.
ао.
ап.Драматические театры СанктПетербурга
ар.
ас.
ат. Драматические театры
ау.
аф.
ах.
ац.- Драматический театр им.Комиссаржевской
ач.
- Малый драматический театр «Европа»
аш.
ащ.
аы.
аэ.
аю.
- Драматический театр на Литейном
- Большой драматический им.Товстоногова
ая.И в результате у нас получится:
ба.бб.
2.Обзор теоретического материала:
бв.
Все эти теги мы применяли на прошлых практических занятиях,
работая над созданием Вебсайта «Готовим сами!».
бг. По плану, мы создаем сайт, относящийся непосредственно к
вашей профессиональной деятельности, который будет содержать в себе 5
вебстраниц: Главная титульная страница, и четыре страницы, содержащие
рецепты приготовления различных блюд. Причем, три из них мы выполняем
все вместе по образцу, а четвертую Вы готовите самостоятельно. Дома Вы
должны были найти и сегодня принести понравившийся Вам рецепт блюда и
соответствующую картинку. И все эти страницы будут в дальнейшем
организованы в единый сайт с помощью
бд. Вспомним, что мы делали:
гиперссылок.
(слад)
бе. Мы уже выполнили:
1. Создали персональную папку «Вебсайт»
2. В нее скопировали папку IMG с картинками, которые будут вставлены в наши
страницы: glavnaya .jpg, salat .jpg, sup .jpg, zapekanka .jpg (обязательным является
использование для имен папки и картинок латинских букв)
3. Используя программу Блокнот, создали в папке «Вебсайт» 4 текстовых
документа: glavnaya, salat, sup, zapekanka
4. В каждый из них внесли соответствующий программный код
5. Сохранили текстовый документ с расширением .txt
6. Сохранили эти документы под новым именем с расширением .html или .htm
бз.
би.
В результате мы получили странички вида: (слайд)
бж.
бк.
бл.
бм.
бн.
бо.бп.
бр.
бс. Пока они выглядят не слишком привлекательно. Мелкий шрифт и
черный текст на белом фоне почти не обращают на себя внимание. С
помощью определенных тегов и их атрибутов можно задать различные
параметры форматирование текста. И именно оформлением наших страниц
мы сегодня и займемся.
бт.
бу.(слайд ) ЦВЕТ ФОНА Webстраницы
бф.
Для изменения цвета фона используют атрибут BGCOLOR, входящий в
состав открывающего тега , значение этого атрибута можно задать
либо названием цвета или представить в формате RGB
бх. текст
бц. текст
бч.
В папке с практическими работами есть кодовая таблица цветов,
которой Вы можете воспользоваться при выполнении работы.
бш.
(слайд ) ПАРАМЕТРЫ ШРИФТА
бщ. Фрагменты текста, к которым необходимо применить то или иное
форматирование, заключается в контейнер между открывающим тегом
с соответствующими параметрами и закрывающим тегом
бы. В состав данного тега входят атрибуты:
бэ.Атрибут FACE позволяет задать гарнитуру шрифта, Например, Times New
Roman, Arial, Tahoma, Courier, Courier New.
бю. …
бя.SIZE атрибут задания размера шрифта в условиях от 1 до 7
ва.
…
вб.COLOR атрибут задания цвета шрифта
вв.
вг.
…
…
вд. (слайд ) НАЧЕРТАНИЕ ШРИФТА
ве. Символы, заключенные между следующими тегами отображают:
вж.
вз.
ви.
вк.
подчеркнутый шрифт
полужирный шрифт
курсивный шрифт
верхний индекс вл.
нижний индекс
вм. В программном коде можно к одному тексту использовать сразу
несколько тегов форматирования символов.
вн.Например:
во. начертание шрифта
вп. При
этом необходимо
следить
за
правильной
последовательностью расположения закрывающих тегов.
вр.
вс.
вт.
ву.
вф.
вх.
вц.
Применяя эти теги можно получить результат: (слайд)
вч. Для своих страниц Вы сами определяете цвет фона и шрифта, его
начертание, размер и выравнивание. Но, хотелось бы обратить внимание на
контраст цвета фона и цвета шрифта. Чтобы текст был читаем, необходимо
правильно сочетать цвета: на светлом фоне яркие и сочные цвета шрифта, а
если у Вас темный фон, то шрифт используйте очень светлый.
вш.
вщ. Когда Вы оформите все четыре страницы, то создаете еще одну,
пятую вебстраницу, и приступаете к написанию программного кода этой
странички. Не забудьте скопировать в папку IMG картинку, которую будете
использовать в новой страничке.
вы.
вэ.
Инструктаж по технике безопасности. (слайд)вю.
С техникой обращаться бережно: не стучать по мониторам, не
стучать мышкой о стол, не стучать по клавишам клавиатуры
При возникновении неполадок: появлении изменений в
функционировании аппаратуры, самопроизвольного её
отключения необходимо немедленно прекратить работу и
сообщить об этом преподавателю
Не пытаться исправить неполадки в оборудовании
самостоятельно
преподаватель
Выполнять за компьютером только те действия, которые говорит
Контролировать расстояние до экрана и правильную осанку
В случае возникновения нештатных ситуаций сохранять
спокойствие и чётко следовать указаниям преподавателя.
вя.
га.
4. Практическая работа.
Выполнение работы по форматированию созданных вебстраниц: установка
цвета фона и шрифта, изменение размера и начертания шрифта.
Создание пятой вебстраницы, используя свой личный материал
(предыдущее домашнее задание: принести рецепт любого блюда и картинку
к данному рецепту), ее редактирование и форматирование.
5. Закрепление материала.
Чему сегодня научились, выполняя практическую работу?
С какими трудностями Вы столкнулись при выполнении сегодняшнего
задания?
гб.Обсудить ошибки, допущенные при выполнении практической работы.
6. Итог урока.
гв. Подведение итогов, выставление оценок.
7. Домашнее задание.
гг. Выучить теги, с которыми познакомились на этом занятии и повторить ранее
изученные.
ге.
гж.
гд.