Класс: 8 «Р»

Тема урока: Вставка изображений и гиперссылок на Web-страницы

Цель урока: овладение умениями вставлять изображения и гиперссылки на Web-странички

Задачи:

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

 раскрыть назначение гиперссылок и изображений, смысл их использования в web-документе;

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

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

 применение методов построения структуры страницы на основе изученных тегов;

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

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

 формирование навыков самоорганизации;

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

Учащиеся должны:

Знать: что такое гиперссылка;

Уметь: вставлять изображение и гиперссылки на web-страницы;

Использовать: полученные знания на уроке в практической деятельности.

Методическое планирование урока

Этапы урока Дидактические задачи Содержание обучения Деятельность учителя Учебная деятельность
этапа учащихся
Организационны Подготовить учащихся к Взаимные приветствия учителя Учитель приветствует Учащиеся приветствуют
й момент работе на уроке, и учащихся; фиксация класс и проверяет его учителя
определить цели и задачи отсутствующих; проверка готовность к уроку
урока. внешнего состояния классного
помещения; проверка
подготовленности учащихся к
уроку; организация внимания и
внутренней готовности.
 Проверка Установить правильность и – Добрый день! Дома вы  Сдают работы.
домашнего осознанность выполнения должны были выполнить  Если возникли
задания всеми учащимися небольшую работу на трудности в
домашнего задания; листочках «Приложение 1». У выполнении Д.З.,
устранить в ходе проверки всех все получилось? У кого сообщают об этом
обнаруженные пробелы в возникли проблемы? Сдаем учителю
знаниях, совершенствуя работы на проверку.
при этом ЗУН.

Повторение Глубоко и всесторонне Учащиеся выполняют работу в  Организация Учащиеся пересаживаются за

пройденного проверить знания презентации, пользуясь самостоятельной компьютеры и выполняют
материала учащихся; выявив причины навыками работы с данным работы за самостоятельную работу.
обнаруженных пробелов в приложением. Всего Готовый файл им необходимо
 знаниях и умениях; представлены 4 задания на компьютерами. сохранить и отправить на
стимулировать повторение структуры web- проверку учителю.
опрашиваемых и весь страницы «Приложение 2» (Метод практический)
класс к овладению
рациональными приемами
учения и самообразования.
Изучение нового Организовать и направить  Учитель  Внимательно слушают
материала к цели познавательную Наиболее широкое объясняет, как учителя;
деятельность учащихся. распространение для веб- вставить
графики получили два  Основную информацию
изображение на записывают в тетради;
основных web-страницу.
формата: GIF и JPEG. Такие (Метод рассказ)  Задают вопросы.
качества как:  Учитель
многофункциональность, объясняет как
универсальность, небольшой создавать
объем исходных файлов при гиперссылки на
достаточном хорошем web-страницах
качестве, сослужили этим (метод рассказ)
форматам хорошую службу,  Используется
фактически определив их презентация
как стандарт для web-
изображений.

Код вставки изображения

<img
src="img/Компьютер.jpg"
border="0" width="400"
height="209" hspace="20"
align="left" >

Само изображение
"вставляется" с помощью
тега: img src. Полностью
запись выглядит вот так: img
src="img/Компьютер.jpg",
где "img/Компьютер.jpg" –
указывает, что наша
картинка лежит в папке: img,
а имя графического файла
(картинки): Компьютер.jpg.
Давайте рассмотрим
дополнительные параметры:

border="0" – указывает,
что рамки вокруг
изображения нет.

width="400" – указывает,
что ширина изображения
составляет: 400
пикселей(ставьте
реальную цифру ширины
ваших изображений).

height="209" - указывает,
что высота изображения
составляет: 209
пикселей(ставьте
реальную цифру высоты
ваших изображений).

hspace="20" – указывает
на отступ текста вокруг
изображения в 20
пикселей.
 align="left" – это уже
знакомый Вам тег…..
Правильно, обозначает
выравнивание по левому
краю, также может
принимать,
значение: right -
выравнивание по правому
краю.

Познакомимся с понятием
«гиперссылка», изучим
способы создания гиперссылок
и их размещения на 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/raspi
sanie.doc">Скачайте
расписание уроков</A>
Ссылкой может являться не
только текст, но и рисунок.
Здесь принцип такой же, как и
в текстовой ссылке, просто
вместо текста мы используем
изображение, которое хотим
обозначить как ссылку.
<A
href=“picture.jpg”>изображение
</A>
При переходе по ссылке также
можно открыть документ в
новом окне браузера. До этого,
если Вы обратили внимание,
 он у нас открывался в текущем
окне, что не всегда удобно.
Решает эту проблему атрибут:
target (цель) и его значение:
_blank.
ПРИМЕР 2:
<a href=«Printer.html"
target="_blank">Принтер</a>

Проверка Установить, усвоили или Итак, ребята какую тему мы  Проводит  Отвечают на вопросы
понимания нет учащиеся связь между сегодня изучали на уроке? небольшой учителя
учащимися фактами, содержание фронтальный
нового материала новых понятий, Какие новые понятия мы опрос
закономерностей, изучили?
устранить обнаруженные 1) Какие форматы
пробелы. гр. файлов
используются для
Web-страниц?

2) Какой тег
используется для
вставки
изображения?

3) Какой обяза-
тельный атрибут
задает имя файла с
картинкой
 Домашнее Сообщить учащимся о Дома вам нужно будет Учитель записывает Записывают Д.З. в дневники
задание домашнем задании, выучить основные тэги, Д.З. на доске
разъяснить методику его используемые для вставки
выполнения и подвести изображений и гиперссылок на
итоги работы web-страницу.

Дата__________

ФИО учителя_____________________________

Подпись учителя_______________