Разработка Web-страниц с использованием языка HTML (урок, презентация)

Обобщающий  урок информатики

в  11 классе  по теме:

«Разработка Веб-страниц с использованием

 языка HTML»

o           использованные источники:

Угринович Н. Д. Информатика и ИКТ. Базовый уровень. Учебник для  11 классов.                   М.: Бином. Лаборатория знаний, 2008 г.

o        ключевые слова или опорные понятия:

  Web-сайт, WEB-страница,  язык НТМL, тэги, мультимедийность,  интерактивность,  сервер , гостевая  книга, гиперссылка, браузер, контейнер

Цели:

Образовательные

1. Обеспечить в ходе конкурса повторение, закрепление и контроль усвоения тем курса “Разработка  Web-сайтов  с  использованием  языка  HTML”.

2.  Закрепить умение использовать   язык  разметки  гипертекста  HTML  для  создания Web-сайтов.

Развивающие

1. Развивать у учащихся самостоятельность в принятии решения, планирования деятельности.

2. Развивать познавательный интерес учащихся, внося в течение конкурса элемент соревнования.

Воспитательные

1. Содействовать в ходе конкурса формированию основных мировоззренческих идей (причинно-следственные связи)

2. Способствовать воспитанию у учащихся внимательности, целеустремленности.

 

 

 

 

 

 

 

 

 

Ход занятия

 

1.          Организационный момент

Здравствуйте, ребята! Я  рад  приветствовать Вас  на   заключительном  занятии по курсу “Разработка  Web-сайтов  с  использованием  языка  HTML”. Мы проведем его в  форме конкурса. Вы  разбиваетесь на команды по  4  человека и выполняете  предложенные  задания.

Задания  выполняются  индивидуально, а  баллы  идут  той  команде,  чей  участник  дал  правильный ответ. Ваши знания  будет  оценивать  жюри.

 После  каждого этапа  конкурса  жюри  подсчитывает  набранные баллы  и  объявляет  результаты.

Желаю  Вам  удачи!

2.          Теоретические  задания:

а) “Тестирование”

Дорогие  ребята! Вашему  вниманию  предлагается тест  «Проверь себя». Приложение 1, презентация,  слайды 3 - 11

ПОДВЕДЕНИЕ ИТОГОВ: жюри проверяет и оценивает работы учащихся.

б)  “Ответьте  на  вопросы”

А  теперь  вы  должны  ответить  на  вопросы. Приложение 2,

 презентация,  слайды 14 - 18

ПОДВЕДЕНИЕ ИТОГОВ: жюри проверяет и оценивает работы учащихся.

в) “Установите  соответствие”

Вашему  вниманию  предлагается   таблица. Вы  должны  каждой    строчке в  правом  столбце  найти  соответствующую  строчку  в  левом  столбце. Приложение 3, презентация,  слайды 19 - 21

ПОДВЕДЕНИЕ ИТОГОВ: жюри проверяет и оценивает работы участниц.

Практические  задания:  (см. Приложение 4, папку Практикум, презентация,  слайды 22 - 26)

а) “ Создание WEB-страницы  по  предложенному  материалу ”

В   папке  Женева  находится   текстовый  файл «Женева», в  котором дается  небольшая  информация  об этом  городе и  файл  картинки «Женева», с  изображением самого   города.

1.       Создайте  в Блокноте  WEB-страницу, содержащую  этот  текст под  названием  ЖЕНЕВА

2.        Вставить    картинку города,  расположив  ее  посередине  перед  текстом .

3. Выделите в тексте  3 абзаца:

1-ый абзац – цвет шрифта - красный, размер шрифта = 5

2-ой -  цвет шрифта - синий, размер шрифта = 3

3-ий – цвет шрифта - зеленый, размер шрифта = 4

ПОДВЕДЕНИЕ ИТОГОВ: жюри проверяет и оценивает работы участниц.

б) «Доработайте  сайт»

В   папке  ГОРОСКОП   дан  WEB-сайт «ГОРОСКОП» для трех знаков  зодиака,  состоящий  из 4-х  WEB-страниц.

Создать гиперссылки:

А) с  первой  страницы  сайта на другие страницы сайта

Б) с каждой страницы сайта  на главную. 

ПОДВЕДЕНИЕ ИТОГОВ: жюри проверяет и оценивает работы участниц.

в) Работа  с  интерактивными  формами. «Доработайте  WEB-страницу  с анкетой».

Вам предлагается доработать Веб-страницу «Анкета»:

1.Длина поля ФАМИЛИЯ – 30, ИМЯ – 10, ОТЧЕСТВА – 30 , поля возраст – 13.

2.В нужные поля  дописать названия медалей.

3.Занести  предметы, по которым у вас «5».

4. Записать  ваши любимые  занятия.

5. Изменить цвет фона страницы на розовый.

ПОДВЕДЕНИЕ ИТОГОВ: жюри проверяет и оценивает работы учащихся.

4. Итоги  урока. Объявление и награждение  победителей. 

Итак, наш  урок-конкурс  завершен. Подведем  итоги. Вы  хорошо  подготовились к уроку, показали свои знания и умения.

Заключительное  слово  жюри. Победившая  команда   награждается грамотой, призом. Все участники урока  получают поощрительные призы.

• 1 слайд

  
  
  WEB-сайты
  

• 2 слайд

  Содержание :
  
  
  
  
  
  
  
  
  
  
  
  
  3. Знаете ли
  Вы тэги?
  
  2. Ответьте
  на вопросы
  
  5. Конкурс
  сайтов
  
  6. Итог урока
  
  4. Практикум
  на ПК
  
  1.ТЕСТ
  «Проверь себя»
  
  

• 3 слайд

  Тест
  Проверь себя
  

• 4 слайд

  б
  в
  Веб-сайтов
  
  Тэгов
  
  Языка HTML
  Информация во Всемирной
  паутине реализуется
  а
  

• 5 слайд

  б
  в
  Браузер
  
  Гиперссылка
  
  Контейнер
  
  Пара тэгов,
  заключенная в угловые скобки
  а
  

• 6 слайд

  б
  в
  HTML
  Visual Basic
  Turbo Pascal
  Веб-сайты создаются
  с помощью языка
  а
  

• 7 слайд

  б
  в
  Web-редактор
  Браузер
  Программа для
  просмотра Web-страниц
  а
  Turbo Pascal
  
  

• 8 слайд

  б
  в
  Сервера
  
  Гиперссылок
  
  Браузера
  
  Web-страницы объединяются
  между собой с помощью
  а
  

• 9 слайд

  б
  в
  Внутри одной папки
  В разных папках
  Внутри одной папки, в которой созданы вложенные папки
  Все файлы сайта ( если их очень много)
  должны размещаться
  а
  

• 10 слайд

  б
  в
  Отдельный файл
  
  Отдельная папка
  
  Один файл для всех страниц
  
  
  
  Для каждой страницы
  вашего сайта
  должен быть создан
  а
  

• 11 слайд

  б
  в
  Создания Web-страниц
  
  Просмотра Web-страниц
  
  Создания гиперссылок
  
  Web-редактор -
  это программа для
  а
  
  
  

• 12 слайд

  Ошибка!
  

• 13 слайд

  Молодец!
  Верный ответ
  

• 14 слайд

  Ответьте
  на вопросы
  

• 15 слайд

  Сайт может содержать кроме текста
  звуковую и видеоинформацию, картинки,
  анимацию. Это свойство сайта
  называется …
  
  Посетители сайта могут
  зарегистрироваться на сайте, заполнить
  анкету и т. д. Это свойство сайта
  называется …
  
  3. Файл с содержанием главной страницы
  сайта называют ...
  
  мультимедийность
  интерактивность
  INDEX
  

• 16 слайд

  4. Вступительная страница сайта, которая
  рассказывает читателям для чего
  разработан сайт и какую информацию
  содержит называется…
  
  5. Режим, при котором компьютер
  подключен к сети называется ...
  
  6. Чтобы сайт сделать более
  привлекательным на нем размещают
  картинки в движении, называемые...
  главной
  Анимационными
  роликами
  онлайн
  

• 17 слайд

  7. Если мы хотим разместить страницу
  или сайт в Интернете , то нам нужно
  разместить его на Веб-сервере.
  Компания, предоставляющая возможность
  пользоваться пространством
  на своем Веб-сервере называется ...
  
  8. Веб-сайты располагаются на мощных
  компьютерах, называемых ... или ...
  
  9.Файл, содержащий Веб-страницу
  имеет расширение...
  
  серверами
  хостами
  Хостинговой
  HTML
  

• 18 слайд

  10. Технология HTML состоит в том, что
  в обычный текстовый документ
  вставляются управляющие символы...
  
  
  
  
  11. ... позволяет посетителям
  сайта оставлять свои комментарии по
  поводу сайта, а так же знакомиться с
  комментариями, оставленными другими
  веб-пользователями.
  
  
  тэги
  Гостевая
  книга
  

• 19 слайд

  Знаете ли вы теги?
  

• 20 слайд

  
  
  Задание. Установить соответствие между строками в таблице:
  Какой тэг соответствует какой строке в таблице.
  

• 21 слайд

  
  
  Продолжение табл.
  
  

• 22 слайд

  Практикум на ПК
  

• 23 слайд

  В папке Женева находится текстовый файл «Женева» и файл с изображением самого города.
  Создайте в Блокноте WEB-страницу под названием Женева , содержащую этот текст.
  Вставьте картинку размером 150 Х 200, расположив ее посередине перед текстом .
  Задание №1
  

• 24 слайд

  3. Выделите в тексте 3 абзаца:
  1-ый абзац –
  цвет шрифта - красный, размер шрифта = 5
  2-ой -
  цвет шрифта - синий, размер шрифта = 3
  3-ий –
  цвет шрифта - зеленый, размер шрифта = 4
  
  

• 25 слайд

  .
  В папке ГОРОСКОП дан WEB-сайт «ГОРОСКОП» для трех знаков зодиака, состоящий из 4-х WEB-страниц.
  Создать гиперссылки :
  А) с первой страницы сайта на другие страницы сайта
  Б) с каждой страницы сайта на главную.
  Задание №2
  

• 26 слайд

  Вам предлагается доработать
  Веб-страницу «Анкета»:
  
  1.Длина поля ФАМИЛИЯ – 30, ИМЯ – 10, ОТЧЕСТВА – 30 , поля возраст – 13.
  2.В нужные поля дописать названия медалей.
  3.Занести предметы, по которым у вас «5».
  4. Записать ваши любимые занятия.
  5. Изменить цвет фона страницы на розовый.
  Задание №3
  

• 27 слайд

  Спасибо за урок