Урок информатики по теме "Вставка гиперссылок на web-страницу"

Разделы: Информатика, Конкурс «Презентация к уроку»

Презентация к уроку

Загрузить презентацию (4 МБ)

Возраст учащихся: 7-8 класс.

Цели урока:

  • содержательная: формирование у учащихся представления о связи между web-страницами в общей структуре сайта;
  • деятельностная: научиться работать и принимать решения самостоятельно, отработать навыки работы с ИКТ.
  • развивающая: развитие творческой личности.

Задачи:

обучающие:

  • раскрыть назначение гиперссылок и смысл их использования в web-документе;
  • обобщить и систематизировать знания о структуре web-страницы, web-сайта, языке разметки гипертекста HTML;
  • ознакомить учащихся с основными тегами и атрибутами для создания гиперссылок;
  • познакомить учащихся с примерами применения гиперссылок, научить использовать атрибуты для оформления ссылок;
  • познакомить учащихся с примерами сайтов, где использованы гиперссылки.

развивающие:

  • применение методов построения структуры страницы на основе изученных тегов;
  • развитие умения, используя язык разметки гипертекста, создавать web-страницу, размещать гиперссылки на web-странице;
  • актуализация сведений из полученного ранее опыта;
  • самостоятельное выделение и формулирование познавательной цели;
  • развитие логического мышления;
  • развитие процессов мышления и познавательных интересов;
  • развитие грамотной, диалогической речи;

воспитательные:

  • формирование навыков самоорганизации;
  • способствовать воспитанию информационной культуры учащихся;
  • формирование настойчивости в достижении поставленной цели, умения работать самостоятельно.

Предметные результаты:

  • сформировать представление об основных тегах и атрибутах для построения web-страницы;
  • уметь использовать термины «тэг» («тег»), «атрибут», «гиперссылка», понимать различия и назначение этих терминов в обыденной речи и в рамках предметного курса информатики;
  • ознакомить учащихся со структурой гиперссылки;
  • развитие основных навыков и умений использования компьютерных устройств и программ.

Личностные результаты:

  • Формирование умения самостоятельно оценивать и принимать решения;
  • формирование ценности здорового образа жизни;
  • формирование понятия связи различных явлений, процессов, объектов с информационной деятельностью человека;
  • актуализация сведений из личного жизненного опыта информационной деятельности;
  • формирование навыков создания и поддержки индивидуальной информационной среды, навыков обеспечения защиты значимой личной информации.

Метапредметные результаты:

  • формирование представления о гиперссылках и их назначении.
  • формирование и развитие компетентности в области использования информационно-коммуникационных технологий.

Тип урока: урок «открытия» новых знаний.

Формы работы учащихся:

  • Эвристическая беседа с опорой на эмпирические знания и опыт учащихся; фронтальная работа;
  • индивидуальная работа;
  • самостоятельная работа;
  • практическая работа за компьютером.

Необходимое техническое оборудование:

  • компьютерный класс (13 компьютеров);
  • мультимедийное оборудование;
  • локальная сеть, или информационное пространство.

Ход урока

Название используемых ЭОР Деятельность учителя
(с указанием действий с ЭОР, например, демонстрация) 		Деятельность ученика Время, мин.

Организационный момент. Постановка домашнего задания.

нет
  • Проверка готовности учащихся к уроку.
  • Приветствие.
  • Постановка Д.З.: <Приложение 4>
  • Настраивание на работу;
  • Проверка наличия всех необходимых принадлежностей.
  • Записывают Д.З. в тетрадь.

2
Актуализация знаний.

нет
  • Организация диалога с учащимися.
  • Фронтальный опрос.

– Добрый день! На предыдущих уроках мы с вами изучали основы создания web-страниц на языке разметки гипертекста HTML. Нами были изучены приёмы размещения текстовой и графической информации в окне web-страницы. Давайте вспомним основные команды, которые использует язык HTML для создания и оформления web-страниц.

Учитель проводит фронтальный опрос:

– Перечислите основные теги для создания web-страницы?

– Какие теги позволяют заполнить web-страницу качественным содержанием (текстом, графикой)?

– Как обозначается заголовок web-документа? 

– Какой тег используется для вставки изображения на web-страницу?

– Данный тег является парным или одиночным?
  • Ответы на вопросы учителя.

 

 

 

 

– <html>,</html>;

– <body>, </body>;

– <head><title>Заголовок</title></head>

– img 

– Данный тег является одиночным.

3
Повторение пройденного материала.

нет
  • Организация самостоятельной работы за компьютерами.

Учащиеся выполняют работу в презентации, пользуясь навыками работы с данным приложением. Всего представлены 4 задания на повторение структуры web-страницы.

<Приложение 1>
  • Учащиеся пересаживаются за компьютеры и выполняют самостоятельную работу. Готовый файл им необходимо сохранить и отправить на проверку учителю.

10
Объяснение нового материала.

Примеры сайтов учащихся и самого учителя
  • Обсуждает с учащимися понятие гиперссылки.

Сегодня на уроке познакомимся с понятием «гиперссылка», изучим способы создания гиперссылок и их размещения на web-странице. <Презентация>

Гиперссылка (hyperlink) – часть гипертекстового документа, указывающая на другой документ или web-страницу.

Назначение гиперссылки:

Связывать документы или web-страницы в единую систему, где элементы имеют возможность взаимодействовать друг с другом.

На web-страницу гиперссылки размещаются с помощью контейнера тегов <A>..</A>:

Пример:

<A href=“адрес перехода”> Текст ссылки</A>

Существуют дополнительные атрибуты (свойства)для гиперссылок:

  1. Атрибут LINK=" " – Определяет цвет еще не просмотренной ссылки.
  2. Атрибут VLINK=" " – Определяет цвет уже просмотренной ссылки.
  3. Атрибут ALINK=" " – Определяет цвет активной ссылки, на которую наведен указатель мышки.

Если документ, на который Вы ссылаетесь, находится на локальном компьютере, то вместо адреса указывается имя файла.

<A href=“Document.html”>Текст ссылки</A>

Ссылка на страницу, находящуюся во вложенной папке:

<A href=“Papka1/Document.html”>

Текст ссылки</A>

Если в Интернете, то прописываем полностью Интернет-адрес.

<A href=“http://www.mail.ru”>текст-ссылка</A>

Для указания ссылки на файл:

<A href="http://www.school.ru/raspisanie.doc">Скачайте расписание уроков</A>

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

<A href=“picture.jpg”>изображение</A>

При переходе по ссылке также можно открыть документ в новом окне браузера. До этого, если Вы обратили внимание, он у нас открывался в текущем окне, что не всегда удобно. Решает эту проблему атрибут:

target (цель) и его значение: _blank.

ПРИМЕР 2:

<a href=«Printer.html" target="_blank">Принтер</a>

Учащиеся записывают в тетрадь основные понятия.

15
Физкультминутка.

нет
  • Организация группы на физкультминутку, демонстрация упражнений.
  • Выполняют упражнения для глаз, а так же физическую разминку.

2
Практическая работа.

нет
  • С помощью учителя учащиеся синхронно выполняют образец к практической работе. Используя образец в дальнейшей работе, учащиеся создают мини-сайт «Телефонный справочник» по раздаточному материалу.

<Приложение 2>

<Приложение 3>
  • Пересаживаются для индивидуальной работы за компьютерами.

10

Подведение итогов урока. Рефлексия.

нет
  • Проводит рефлексию;
  • Выставляет оценки.

– Можете ли вы назвать тему урока?

– Вам было легко или были трудности?

– Что у вас получилось лучше всего и без ошибок?

– Какое задание было самым интересным и почему?

– Как бы вы оценили свою работу?

  • Отражают свое отношение к уроку.
  • Отвечают на поставленные вопросы.

3

Список используемых ресурсов:

  1. Учебное пособие «Информатика и ИКТ», Н.Д. Угринович.
  2. Учебное пособие «Изучаем HTML, XHTML и CSS», Эл. Фримен, Эр. Фримен, 2014 (обновленное издание).
  3. «Библия пользователя HTML, XHTML и CSS», С. Шафер, 2011.
  4. Мини-проекты по созданию сайтов собственного производства, проекты учащихся.