Урок-практикум создания «Web – сайта»

  • Работа в классе
  • docx
  • 08.05.2018
Публикация в СМИ для учителей

Публикация в СМИ для учителей

Бесплатное участие. Свидетельство СМИ сразу.
Мгновенные 10 документов в портфолио.

Основной целью занятия является умение применять полученные теоретические знания по теме «Веб - сайт» при работе по созданию сайта. На занятии отрабатываются навыки использования основных тэгов языка HTML при создании Web-сайта в текстовом редакторе Блокнот. Ребята учатся вносить изменения в созданную Web-страницу.Урок-практикум создания «Web – сайта»
Иконка файла материала конспект открытого урока.docx
Визитная карта урока Характеристика группы 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>…. Тест по информатике на тему «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  о   компьютере(слайд)щ. Дан программный код веб­страницы, есть ли здесь ошибки, если есть, то какие? (слайд) ы. э. ю. Драматические театры Санкт­Петербурга я. аа. аб.Драматические театры ав. 
аг. Санкт­Петербурга

ад. ае.
  •  Драматический театр им.Комиссаржевской
  • аж. аз.
  •  Драматический театр на Литейном
  • аи.
  •  Большой драматический им.Товстоногова
  • ак. ал.
  •  Малый драматический театр «Европа» 
    • ам. Правильный код: (слайд) Санкт­Петербурга

      ан. ао. ап.Драматические театры Санкт­Петербурга ар. ас. ат. Драматические театры ау. 
      аф. ах.
        ац.
      •  Драматический театр им.Комиссаржевской ач.
      •  Малый драматический театр «Европа» аш. ащ. аы. аэ. аю.
      •  Драматический театр на Литейном
      •  Большой драматический им.Товстоногова
      ая.И в результате у нас получится: ба.бб. 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. Домашнее задание. гг. Выучить теги, с которыми познакомились на этом занятии и повторить ранее изученные. ге. гж. гд.